@tempots/beatui 0.0.3 → 0.0.5

package/dist/index.es.js

@@ -1,39 +1,39 @@
-var dn = Object.defineProperty;
+var pn = Object.defineProperty;
 var Ne = (n) => {
   throw TypeError(n);
 };
-var pn = (n, l, e) => l in n ? dn(n, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[l] = e;
-var w = (n, l, e) => pn(n, typeof l != "symbol" ? l + "" : l, e), mn = (n, l, e) => l.has(n) || Ne("Cannot " + e);
-var $ = (n, l, e) => (mn(n, l, "read from private field"), e ? e.call(n) : l.get(n)), Q = (n, l, e) => l.has(n) ? Ne("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(n) : l.set(n, e);
-import { makeProviderMark as gn, localStorageProp as bn, computedOf as y, Use as _, attr as c, html as h, on as m, aria as q, style as d, Value as S, Empty as k, Ensure as Pe, WithElement as z, OnDispose as K, Fragment as U, input as P, emitValue as v, emitValueAsDate as fn, ForEach as be, OneOfType as kn, emitValueAsNullableDate as xn, emitValueAsNullableDateTime as yn, emitValueAsNumber as ie, prop as W, When as le, computed as Fe, emitChecked as vn, dataAttr as he, render as wn, WithBrowserCtx as $n } from "@tempots/dom";
+var mn = (n, l, e) => l in n ? pn(n, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[l] = e;
+var w = (n, l, e) => mn(n, typeof l != "symbol" ? l + "" : l, e), gn = (n, l, e) => l.has(n) || Ne("Cannot " + e);
+var $ = (n, l, e) => (gn(n, l, "read from private field"), e ? e.call(n) : l.get(n)), Q = (n, l, e) => l.has(n) ? Ne("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(n) : l.set(n, e);
+import { makeProviderMark as bn, localStorageProp as fn, computedOf as y, Use as _, attr as c, html as h, on as m, aria as q, style as d, Value as S, Empty as k, Ensure as Pe, WithElement as z, OnDispose as K, Fragment as U, input as P, emitValue as v, emitValueAsDate as kn, ForEach as be, OneOfType as xn, emitValueAsNullableDate as yn, emitValueAsNullableDateTime as vn, emitValueAsNumber as ie, prop as W, When as le, computed as Fe, emitChecked as wn, dataAttr as he, render as $n, WithBrowserCtx as Sn } from "@tempots/dom";
 import { Use as ql } from "@tempots/dom";
-import { useAppearence as Sn, WhenInViewport as _n, Resource as Me, ElementRect as ce, AutoSelect as Cn, WindowSize as En } from "@tempots/ui";
-class Bn {
-  button({ variant: l, size: e, color: t, roundedness: o }) {
-    const r = [
+import { useAppearence as _n, WhenInViewport as Cn, Resource as Me, ElementRect as ce, AutoSelect as En, WindowSize as Bn } from "@tempots/ui";
+class In {
+  button({ variant: l, size: e, color: t, roundedness: r }) {
+    const o = [
       "bc-button",
       `bu-text-${e}`,
       `bc-control--padding-${e}`,
-      `bc-control--rounded-${o}`
+      `bc-control--rounded-${r}`
     ];
     switch (l) {
       case "filled":
-        r.push(`bu-bg--${t}`), r.push(`hover:bu-bg--${t}`);
+        o.push(`bu-bg--${t}`), o.push(`hover:bu-bg--${t}`);
         break;
       case "light":
-        r.push(`bu-bg--light-${t}`), r.push(`hover:bu-bg--light-${t}`);
+        o.push(`bu-bg--light-${t}`), o.push(`hover:bu-bg--light-${t}`);
         break;
       case "outline":
-        r.push(`bu-border--${t}`), r.push(`hover:bu-bg--light-${t}`);
+        o.push(`bu-border--${t}`), o.push(`hover:bu-bg--light-${t}`);
         break;
       case "default":
-        r.push("bu-bg--light-neutral"), r.push(`bu-text--${t}`), r.push("hover:bu-bg--light-base");
+        o.push("bu-bg--light-neutral"), o.push(`bu-text--${t}`), o.push("hover:bu-bg--light-base");
         break;
       case "text":
-        r.push("bu-bg--inherit"), r.push(`bu-text--${t}`), r.push("hover:bu-underline");
+        o.push("bu-bg--inherit"), o.push(`bu-text--${t}`), o.push("hover:bu-underline");
         break;
     }
-    return r.join(" ");
+    return o.join(" ");
   }
   overlay({ effect: l, mode: e }) {
     return `bc-overlay bc-overlay--effect-${l} bc-overlay--mode-${e}`;
@@ -43,7 +43,7 @@ class Bn {
     return e && t.push(`bu-fg--${e}`), t.join(" ");
   }
   panel({ side: l, color: e, shadow: t }) {
-    return `bc-panel ${(Array.isArray(l) ? l : [l]).map((r) => `bc-panel--side-${r}`).join(" ")} bu-bg--lighter-${e} bc-panel--shadow-${t}`;
+    return `bc-panel ${(Array.isArray(l) ? l : [l]).map((o) => `bc-panel--side-${o}`).join(" ")} bu-bg--lighter-${e} bc-panel--shadow-${t}`;
   }
   label(l) {
     return `bc-label bc-label--${l.type}`;
@@ -80,8 +80,8 @@ class Bn {
     size: e = "md",
     roundedness: t = "lg"
   }) {
-    const o = ["bc-card"];
-    return l !== "default" && o.push(`bc-card--${l}`), e !== "md" && o.push(`bc-card--padding-${e}`), t !== "lg" && o.push(`bc-card--rounded-${t}`), o.join(" ");
+    const r = ["bc-card"];
+    return l !== "default" && r.push(`bc-card--${l}`), e !== "md" && r.push(`bc-card--padding-${e}`), t !== "lg" && r.push(`bc-card--rounded-${t}`), r.join(" ");
   }
   center({ gap: l = "lg" }) {
     const e = ["bc-center"];
@@ -92,8 +92,8 @@ class Bn {
     size: e = "md",
     roundedness: t = "lg"
   }) {
-    const o = ["bc-sink"];
-    return l !== "default" && o.push(`bc-sink--${l}`), e !== "md" && o.push(`bc-sink--padding-${e}`), t !== "lg" && o.push(`bc-sink--rounded-${t}`), o.join(" ");
+    const r = ["bc-sink"];
+    return l !== "default" && r.push(`bc-sink--${l}`), e !== "md" && r.push(`bc-sink--padding-${e}`), t !== "lg" && r.push(`bc-sink--rounded-${t}`), r.join(" ");
   }
   segmentedControl({ size: l = "sm" }) {
     return [
@@ -108,28 +108,28 @@ class Bn {
   }
 }
 const C = {
-  mark: gn("Theme"),
+  mark: bn("Theme"),
   // Create function returns the value and cleanup
   create: (n) => {
-    const l = new Bn(), e = Sn(), t = bn({
+    const l = new In(), e = _n(), t = fn({
       key: "beatui-appearance-preference",
       defaultValue: "system"
-    }), o = () => {
+    }), r = () => {
       e.dispose(), t.dispose();
-    }, r = y(
+    }, o = y(
       e,
       t
     )((u, i) => i === "system" ? u : i);
     return {
       value: {
         theme: l,
-        appearance: r,
+        appearance: o,
         appearancePreference: t,
         setAppearancePreference: (u) => {
           t.set(u);
         }
       },
-      dispose: o
+      dispose: r
     };
   }
 }, Dt = () => _(
@@ -141,8 +141,8 @@ function He({
   disabled: l,
   variant: e = "filled",
   size: t = "md",
-  color: o = "base",
-  roundedness: r = "sm",
+  color: r = "base",
+  roundedness: o = "sm",
   onClick: s = () => {
   }
 }, ...u) {
@@ -154,8 +154,8 @@ function He({
         i,
         e ?? "primary",
         t ?? "md",
-        o,
-        r
+        r,
+        o
       )(
         ({ theme: a }, p, g, b, x) => a.button({
           variant: p,
@@ -169,13 +169,13 @@ function He({
     ...u
   ));
 }
-const In = "bui-icons";
-function An() {
+const An = "bui-icons";
+function Tn() {
   return new Promise((n, l) => {
-    const e = indexedDB.open(In, 1);
+    const e = indexedDB.open(An, 1);
     e.onupgradeneeded = function(t) {
-      const o = t.target.result;
-      o.objectStoreNames.contains("icons") || o.createObjectStore("icons");
+      const r = t.target.result;
+      r.objectStoreNames.contains("icons") || r.createObjectStore("icons");
     }, e.onsuccess = function() {
       n(e.result);
     }, e.onerror = function() {
@@ -183,14 +183,14 @@ function An() {
     };
   });
 }
-const Le = An();
-function Tn(n, l) {
+const Le = Tn();
+function On(n, l) {
   return new Promise(async (e, t) => {
-    const r = (await Le).transaction("icons", "readwrite");
-    r.objectStore("icons").put(l, n), r.oncomplete = e, r.onerror = t;
+    const o = (await Le).transaction("icons", "readwrite");
+    o.objectStore("icons").put(l, n), o.oncomplete = e, o.onerror = t;
   });
 }
-function On(n) {
+function Vn(n) {
   return new Promise(async (l, e) => {
     const s = (await Le).transaction("icons", "readonly").objectStore("icons").get(n);
     s.onsuccess = function() {
@@ -198,7 +198,7 @@ function On(n) {
     }, s.onerror = e;
   });
 }
-async function Vn(n) {
+async function jn(n) {
   const l = `https://api.iconify.design/${n}.svg`;
   return fetch(l).then((e) => {
     if (e.status === 200)
@@ -206,28 +206,28 @@ async function Vn(n) {
     throw new Error(`Failed to load icon: ${n}`);
   });
 }
-async function jn(n) {
-  const l = n.replace(":", "/"), e = await On(l);
+async function Nn(n) {
+  const l = n.replace(":", "/"), e = await Vn(l);
   if (e)
     return e;
-  const t = await Vn(l);
-  return await Tn(l, t), t;
+  const t = await jn(l);
+  return await On(l, t), t;
 }
-function Z({ icon: n, size: l = "md", color: e, title: t }, ...o) {
-  return _(C, ({ theme: r }) => h.span(
+function Z({ icon: n, size: l = "md", color: e, title: t }, ...r) {
+  return _(C, ({ theme: o }) => h.span(
     c.class(
       y(
-        r,
+        o,
         l,
         e
       )((s, u, i) => s.icon({ size: u, color: i }))
     ),
     q.label(t),
-    _n(
+    Cn(
       { once: !0 },
       () => Me({
         request: n,
-        load: ({ request: s }) => jn(s),
+        load: ({ request: s }) => Nn(s),
         mapError: String
       })({
         success: (s) => h.span(
@@ -239,22 +239,22 @@ function Z({ icon: n, size: l = "md", color: e, title: t }, ...o) {
         failure: (s) => h.span(c.title(s), c.class("text-red-500"), "🚫")
       })
     ),
-    ...o
+    ...r
   ));
 }
-const Nn = ({
+const Fn = ({
   disabled: n,
   value: l,
   color: e = "base",
   onClose: t
 }) => {
-  const o = S.map(n ?? !1, (s) => s), r = S.map(e ?? "base", (s) => s);
+  const r = S.map(n ?? !1, (s) => s), o = S.map(e ?? "base", (s) => s);
   return _(C, (s) => h.span(
     c.class(
       y(
         s,
-        o,
-        r
+        r,
+        o
       )(
         ({ theme: u }, i, a) => u.tag({
           disabled: i,
@@ -273,7 +273,7 @@ const Nn = ({
 }, Pt = (...n) => _(
   C,
   ({ theme: l }) => h.span(c.class(l.label({ type: "emphasis" })), ...n)
-), Fn = (...n) => _(
+), Re = (...n) => _(
   C,
   ({ theme: l }) => h.span(c.class(l.label({ type: "default" })), ...n)
 ), Hn = (...n) => _(
@@ -290,14 +290,14 @@ const Nn = ({
   label: l,
   context: e,
   description: t,
-  content: o,
-  controller: r
+  content: r,
+  controller: o
 }) => _(C, (s) => h.div(
   c.class(
     y(
       s,
-      r.hasError,
-      r.disabled
+      o.hasError,
+      o.disabled
     )(
       ({ theme: u }, i, a) => u.controlInputWrapper({
         hasError: i,
@@ -309,13 +309,13 @@ const Nn = ({
     c.class("bc-control-input-wrapper__header"),
     h.label(
       c.class("bc-control-input-wrapper__label"),
-      c.for(r.name),
+      c.for(o.name),
       h.span(
         c.class(
           y(
             s,
-            r.hasError,
-            r.disabled
+            o.hasError,
+            o.disabled
           )(
             ({ theme: u }, i, a) => u.controlInputWrapperLabelText({
               hasError: i,
@@ -327,15 +327,15 @@ const Nn = ({
       ),
       l != null && n ? Wn : k
     ),
-    e != null ? Fn(e) : k
+    e != null ? Re(e) : k
   ) : k,
-  h.div(c.class("bc-control-input-wrapper__content"), o),
+  h.div(c.class("bc-control-input-wrapper__content"), r),
   t != null ? h.div(
     c.class("bc-control-input-wrapper__description"),
     t
   ) : k,
   Pe(
-    r.error,
+    o.error,
     (u) => h.div(c.class("bc-control-input-wrapper__error"), u)
   )
 )), O = ({
@@ -343,8 +343,8 @@ const Nn = ({
   disabled: l,
   input: e,
   before: t,
-  after: o,
-  hasError: r,
+  after: r,
+  hasError: o,
   focusableSelector: s = "input, select, textarea",
   growInput: u = !0
 }) => {
@@ -362,7 +362,7 @@ const Nn = ({
       y(
         a,
         i,
-        r ?? !1
+        o ?? !1
       )(
         ({ theme: p }, g, b) => p.inputContainer({
           disabled: g,
@@ -381,23 +381,23 @@ const Nn = ({
       ),
       e
     ),
-    o != null ? h.span(c.class("bc-input-container__after"), o) : null
+    r != null ? h.span(c.class("bc-input-container__after"), r) : null
   ));
 }, V = ({
   autocomplete: n,
   autofocus: l,
   class: e,
   disabled: t,
-  name: o,
-  placeholder: r,
+  name: r,
+  placeholder: o,
   id: s
 }) => U(
   c.autocomplete(n),
   c.autofocus(l),
   c.class(e),
   c.disabled(t),
-  c.name(o ?? s),
-  c.placeholder(r),
+  c.name(r ?? s),
+  c.placeholder(o),
   c.id(s)
 ), T = (n) => ({
   id: n.name,
@@ -407,7 +407,7 @@ const Nn = ({
 }), fe = (n, l) => ({
   ...T(n),
   value: n.value.map(l)
-}), Re = (n) => {
+}), qe = (n) => {
   const { value: l, onBlur: e, onChange: t } = n;
   return O({
     ...n,
@@ -416,11 +416,11 @@ const Nn = ({
       c.valueAsDate(l),
       c.class("bc-input"),
       e != null ? m.blur(v(e)) : k,
-      t != null ? m.change(fn(t)) : k
+      t != null ? m.change(kn(t)) : k
     )
   });
 }, Dn = (n) => {
-  const { value: l, onBlur: e, onChange: t, onInput: o } = n;
+  const { value: l, onBlur: e, onChange: t, onInput: r } = n;
   return O({
     ...n,
     input: P.text(
@@ -429,7 +429,7 @@ const Nn = ({
       c.class("bc-input"),
       e != null ? m.blur(v(e)) : k,
       t != null ? m.change(v(t)) : k,
-      o != null ? m.input(v(o)) : k
+      r != null ? m.input(v(r)) : k
     )
   });
 }, A = (
@@ -440,8 +440,8 @@ const Nn = ({
 ), j = (n, l) => (e) => {
   n.change(e), l == null || l(e);
 }, ke = (n, l, e) => (t) => {
-  const o = l(t);
-  n.change(o), e == null || e(o);
+  const r = l(t);
+  n.change(r), e == null || e(r);
 }, Lt = (n, l, e) => (t) => {
   l(t) ? (n.change(null), e == null || e(null)) : (n.change(t), e == null || e(t));
 }, Rt = (n) => {
@@ -459,7 +459,7 @@ const Nn = ({
   const { onBlur: l, onChange: e, ...t } = n;
   return I({
     ...t,
-    content: Re({
+    content: qe({
       ...t,
       ...T(t.controller),
       onChange: j(t.controller, e),
@@ -467,8 +467,8 @@ const Nn = ({
     })
   });
 }, Pn = (n) => {
-  const l = n.getFullYear(), e = (n.getMonth() + 1).toString().padStart(2, "0"), t = n.getDate().toString().padStart(2, "0"), o = n.getHours().toString().padStart(2, "0"), r = n.getMinutes().toString().padStart(2, "0");
-  return `${l}-${e}-${t}T${o}:${r}`;
+  const l = n.getFullYear(), e = (n.getMonth() + 1).toString().padStart(2, "0"), t = n.getDate().toString().padStart(2, "0"), r = n.getHours().toString().padStart(2, "0"), o = n.getMinutes().toString().padStart(2, "0");
+  return `${l}-${e}-${t}T${r}:${o}`;
 }, Mn = (n) => {
   const { value: l, onBlur: e, onChange: t } = n;
   return O({
@@ -478,7 +478,7 @@ const Nn = ({
       c.value(S.map(l, Pn)),
       c.class("bc-input"),
       e != null ? m.blur(v(e)) : k,
-      t != null ? m.change(v((o) => t(new Date(o)))) : k
+      t != null ? m.change(v((r) => t(new Date(r)))) : k
     )
   });
 }, zt = (n) => {
@@ -498,7 +498,7 @@ const Nn = ({
     autocomplete: "email",
     placeholder: "you@company.com",
     ...n
-  }, { value: e, onBlur: t, onChange: o, onInput: r } = l;
+  }, { value: e, onBlur: t, onChange: r, onInput: o } = l;
   return O({
     ...n,
     input: P.email(
@@ -506,8 +506,8 @@ const Nn = ({
       c.value(e),
       c.class("bc-input"),
       t != null ? m.blur(v(t)) : k,
-      o != null ? m.change(v(o)) : k,
-      r != null ? m.input(v(r)) : k
+      r != null ? m.change(v(r)) : k,
+      o != null ? m.input(v(o)) : k
     )
   });
 }, Ut = (n) => {
@@ -529,7 +529,7 @@ const Nn = ({
   success: { type: "success" }
 }, xe = "$$tts-exp-", Rn = (n, l) => z((e) => {
   const t = `${xe}${n}`;
-  return K(S.on(l, (o) => Reflect.set(e, t, o)));
+  return K(S.on(l, (r) => Reflect.set(e, t, r)));
 }), Xt = (n, l) => {
   const e = `${xe}${n}`;
   return (t) => {
@@ -538,7 +538,7 @@ const Nn = ({
 }, qn = (n, l) => {
   const e = `${xe}${n}`;
   return (t) => {
-    const o = t.target, r = o.selectedIndex, s = o.options[r];
+    const r = t.target, o = r.selectedIndex, s = r.options[o];
     l(Reflect.get(s, e));
   };
 }, de = {
@@ -558,28 +558,28 @@ const Nn = ({
   getOptionValues: (n) => n.flatMap(
     (l) => l.type === "group" ? de.getOptionValues(l.options) : l.type === "break" ? [] : [l.value]
   ),
-  contains: (n, l, e = (t, o) => t === o) => de.getOptionValues(n).some((t) => e(t, l))
-}, qe = (n, l, e) => Pe(
+  contains: (n, l, e = (t, r) => t === r) => de.getOptionValues(n).some((t) => e(t, l))
+}, ze = (n, l, e) => Pe(
   n,
-  (t) => kn(t, {
-    value: (o) => {
-      const r = y(
-        o,
+  (t) => xn(t, {
+    value: (r) => {
+      const o = y(
+        r,
         e
       )((s, u) => l(s.value, u));
       return h.option(
-        K(r.dispose),
-        c.selected(r),
-        Rn("value", o.$.value),
-        o.$.label
+        K(o.dispose),
+        c.selected(o),
+        Rn("value", r.$.value),
+        r.$.label
       );
     },
-    group: (o) => h.optgroup(
-      c.label(o.$.group),
+    group: (r) => h.optgroup(
+      c.label(r.$.group),
       be(
-        o.$.options,
-        (r) => qe(
-          r,
+        r.$.options,
+        (o) => ze(
+          o,
           l,
           e
         )
@@ -587,13 +587,13 @@ const Nn = ({
     ),
     break: () => h.hr()
   })
-), ze = (n) => {
+), Ue = (n) => {
   const {
     value: l,
     onBlur: e,
     onChange: t,
-    options: o,
-    unselectedLabel: r = "Select one ...",
+    options: r,
+    unselectedLabel: o = "Select one ...",
     equality: s = (i, a) => i === a
   } = n;
   let u;
@@ -614,8 +614,8 @@ const Nn = ({
       V(n),
       c.class("focus:outline-none bg-transparent"),
       c.class("w-full"),
-      h.option(c.hidden("hidden"), r),
-      be(o, (i) => qe(i, s, l)),
+      h.option(c.hidden("hidden"), o),
+      be(r, (i) => ze(i, s, l)),
       e != null ? m.blur(e) : k,
       t != null ? m.change(qn("value", (i) => t(i))) : k
     )
@@ -627,9 +627,9 @@ const Nn = ({
 })({
   success: (l) => {
     const e = l.map(
-      (t) => t.map((o) => typeof o == "object" && "id" in o && "label" in o ? de.value(o.id, o.label) : o)
+      (t) => t.map((r) => typeof r == "object" && "id" in r && "label" in r ? de.value(r.id, r.label) : r)
     );
-    return ze({
+    return Ue({
       ...n,
       options: e,
       unselectedLabel: n.unselectedLabel,
@@ -652,14 +652,14 @@ const Nn = ({
   const { onBlur: l, onChange: e, ...t } = n;
   return I({
     ...t,
-    content: ze({
+    content: Ue({
       ...t,
       ...T(t.controller),
       onChange: j(t.controller, e),
       onBlur: A(t.controller, l)
     })
   });
-}, Ue = (n) => {
+}, Ge = (n) => {
   const { value: l, onBlur: e, onChange: t } = n;
   return O({
     ...n,
@@ -668,14 +668,14 @@ const Nn = ({
       c.valueAsDate(l),
       c.class("bc-input"),
       e != null ? m.blur(v(e)) : k,
-      t != null ? m.change(xn(t)) : k
+      t != null ? m.change(yn(t)) : k
     )
   });
 }, Jt = (n) => {
   const { onBlur: l, onChange: e, ...t } = n;
   return I({
     ...t,
-    content: Ue({
+    content: Ge({
       ...t,
       ...T(t.controller),
       onChange: j(t.controller, e),
@@ -683,25 +683,25 @@ const Nn = ({
     })
   });
 }, Un = (n) => {
-  const l = n.getFullYear(), e = n.getMonth() + 1, t = n.getDate(), o = n.getHours(), r = n.getMinutes(), s = n.getSeconds();
-  return `${l}-${e.toString().padStart(2, "0")}-${t.toString().padStart(2, "0")}T${o.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
-}, Ge = (n) => {
-  const { value: l, onBlur: e, onChange: t } = n, o = S.map(l, (r) => r != null ? Un(r) : null);
+  const l = n.getFullYear(), e = n.getMonth() + 1, t = n.getDate(), r = n.getHours(), o = n.getMinutes(), s = n.getSeconds();
+  return `${l}-${e.toString().padStart(2, "0")}-${t.toString().padStart(2, "0")}T${r.toString().padStart(2, "0")}:${o.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+}, Xe = (n) => {
+  const { value: l, onBlur: e, onChange: t } = n, r = S.map(l, (o) => o != null ? Un(o) : null);
   return O({
     ...n,
     input: P["datetime-local"](
       V(n),
-      c.value(S.map(o, (r) => r ?? null)),
+      c.value(S.map(r, (o) => o ?? null)),
       c.class("bc-input"),
       e != null ? m.blur(v(e)) : k,
-      t != null ? m.change(yn(t)) : k
+      t != null ? m.change(vn(t)) : k
     )
   });
 }, Kt = (n) => {
   const { onBlur: l, onChange: e, ...t } = n;
   return I({
     ...t,
-    content: Ge({
+    content: Xe({
       ...t,
       ...T(t.controller),
       onChange: j(t.controller, e),
@@ -712,15 +712,15 @@ const Nn = ({
   const { onBlur: l, onChange: e, ...t } = n;
   return I({
     ...t,
-    content: Ue({
+    content: Ge({
       ...t,
       ...fe(
         t.controller,
-        (o) => o != null && o !== "" ? new Date(o) : null
+        (r) => r != null && r !== "" ? new Date(r) : null
       ),
       onChange: ke(
         t.controller,
-        (o) => o != null ? o.toISOString().split("T")[0] : null,
+        (r) => r != null ? r.toISOString().split("T")[0] : null,
         e
       ),
       onBlur: A(t.controller, l)
@@ -730,57 +730,57 @@ const Nn = ({
   const { onBlur: l, onChange: e, ...t } = n;
   return I({
     ...t,
-    content: Ge({
+    content: Xe({
       ...t,
       ...fe(
         t.controller,
-        (o) => o != null && o !== "" ? Gn(o) : null
+        (r) => r != null && r !== "" ? Gn(r) : null
       ),
       onChange: ke(
         t.controller,
-        (o) => o != null ? Xn(o) : null,
+        (r) => r != null ? Xn(r) : null,
         e
       ),
       onBlur: A(t.controller, l)
     })
   });
-}, oe = (n) => typeof n == "string" && n.trim() === "" ? null : n, Xe = (n) => n ?? "", Qn = (n) => {
-  const { value: l, onBlur: e, onChange: t, onInput: o, ...r } = n;
+}, re = (n) => typeof n == "string" && n.trim() === "" ? null : n, Qe = (n) => n ?? "", Qn = (n) => {
+  const { value: l, onBlur: e, onChange: t, onInput: r, ...o } = n;
   return O({
-    ...r,
+    ...o,
     input: P.text(
-      V(r),
-      c.value(S.map(l, Xe)),
+      V(o),
+      c.value(S.map(l, Qe)),
       c.class("bc-input"),
       e != null ? m.blur(e) : k,
-      t != null ? m.change(v((s) => t(oe(s)))) : k,
-      o != null ? m.input(v((s) => o(oe(s)))) : k
+      t != null ? m.change(v((s) => t(re(s)))) : k,
+      r != null ? m.input(v((s) => r(re(s)))) : k
     )
   });
 }, Yn = (n) => {
-  const { value: l, onBlur: e, onChange: t, onInput: o, rows: r } = n;
+  const { value: l, onBlur: e, onChange: t, onInput: r, rows: o } = n;
   return O({
     ...n,
     input: h.textarea(
       V(n),
-      c.rows(r ?? 10),
-      c.value(S.map(l, Xe)),
+      c.rows(o ?? 10),
+      c.value(S.map(l, Qe)),
       c.class("bc-input"),
       e != null ? m.blur(e) : k,
-      t != null ? m.change(v((s) => t(oe(s)))) : k,
-      o != null ? m.input(v((s) => o(oe(s)))) : k
+      t != null ? m.change(v((s) => t(re(s)))) : k,
+      r != null ? m.input(v((s) => r(re(s)))) : k
     )
   });
 }, nl = (n) => {
-  const { onBlur: l, onChange: e, rows: t, ...o } = n;
+  const { onBlur: l, onChange: e, rows: t, ...r } = n;
   return I({
-    ...o,
+    ...r,
     content: Yn({
-      ...o,
-      ...T(o.controller),
+      ...r,
+      ...T(r.controller),
       rows: t,
-      onChange: j(o.controller, e),
-      onBlur: A(o.controller, l)
+      onChange: j(r.controller, e),
+      onBlur: A(r.controller, l)
     })
   });
 }, tl = (n) => {
@@ -795,7 +795,7 @@ const Nn = ({
     })
   });
 }, Jn = (n) => {
-  const { value: l, step: e, min: t, max: o, onBlur: r, onChange: s, onInput: u, disabled: i } = n;
+  const { value: l, step: e, min: t, max: r, onBlur: o, onChange: s, onInput: u, disabled: i } = n;
   return _(C, (a) => O({
     ...n,
     input: P.number(
@@ -803,7 +803,7 @@ const Nn = ({
       c.valueAsNumber(l),
       c.step(e),
       c.min(t),
-      c.max(o),
+      c.max(r),
       c.class("bc-input"),
       c.class(
         y(
@@ -815,7 +815,7 @@ const Nn = ({
           })
         )
       ),
-      r != null ? m.blur(v(r)) : k,
+      o != null ? m.blur(v(o)) : k,
       s != null ? m.change(ie(s)) : k,
       u != null ? m.input(ie(u)) : k
     )
@@ -836,8 +836,8 @@ const Nn = ({
     value: l,
     onBlur: e,
     onChange: t,
-    onInput: o,
-    before: r,
+    onInput: r,
+    before: o,
     after: s,
     hasError: u,
     disabled: i,
@@ -855,7 +855,7 @@ const Nn = ({
     p
   )((M, G) => M ? "•••••••••••••••" : G ?? "secret password");
   return O({
-    before: r,
+    before: o,
     disabled: i,
     hasError: u,
     input: h.input(
@@ -873,7 +873,7 @@ const Nn = ({
       c.value(l),
       e != null ? m.blur(v(e)) : k,
       t != null ? m.change(v(t)) : k,
-      o != null ? m.input(v(o)) : k
+      r != null ? m.input(v(r)) : k
     ),
     after: s ?? h.button(
       c.class("bc-input-container__password-toggle"),
@@ -886,7 +886,7 @@ const Nn = ({
       )
     )
   });
-}, ol = (n) => {
+}, rl = (n) => {
   const { onBlur: l, onChange: e, ...t } = n;
   return I({
     label: "Password",
@@ -902,15 +902,15 @@ const Nn = ({
 function Zn(n, l) {
   return n.length === l.length && n.every((e, t) => e === l[t]);
 }
-function rl({
+function ol({
   segments: n,
   activeSegment: l = null,
   onSegmentChange: e,
   size: t = "md"
 }) {
-  const o = S.toSignal(
+  const r = S.toSignal(
     l ?? null
-  ).deriveProp(), r = W(
+  ).deriveProp(), o = W(
     n.map(() => 0),
     Zn
   );
@@ -931,27 +931,27 @@ function rl({
       h.div(
         c.class("bc-segmented-control__indicator"),
         d.display(
-          o.map((u) => u == null ? "none" : "block")
+          r.map((u) => u == null ? "none" : "block")
         ),
         d.width(
-          Fe(() => `${r.value[o.value ?? 0]}px`, [o, r])
+          Fe(() => `${o.value[r.value ?? 0]}px`, [r, o])
         ),
         d.left(
-          Fe(() => `${r.value.slice(0, o.value ?? 0).reduce((i, a) => i + a, 0)}px`, [o, r])
+          Fe(() => `${o.value.slice(0, r.value ?? 0).reduce((i, a) => i + a, 0)}px`, [r, o])
         )
       ),
       // clickable buttons
       n.map(({ label: u, onSelect: i }, a) => h.button(
         // { href: href ?? '' },
         m.click((p) => {
-          p.preventDefault(), o.set(a), e == null || e(a), i == null || i();
+          p.preventDefault(), r.set(a), e == null || e(a), i == null || i();
         }),
         c.class("bc-segmented-control__segment"),
         c.class(
-          o.map((p) => p == null || p === a ? "bc-segmented-control__segment--active" : "bc-segmented-control__segment--inactive")
+          r.map((p) => p == null || p === a ? "bc-segmented-control__segment--active" : "bc-segmented-control__segment--inactive")
         ),
         ce((p) => (p.on(({ width: g }) => {
-          r.update((b) => {
+          o.update((b) => {
             const x = [...b];
             return x[a] = g, x;
           });
@@ -964,37 +964,37 @@ const sl = (n) => {
   const { onBlur: l, onChange: e, ...t } = n;
   return I({
     ...t,
-    content: Re({
+    content: qe({
       ...t,
       ...fe(
         t.controller,
-        (o) => new Date(o)
+        (r) => new Date(r)
       ),
       onChange: ke(
         t.controller,
-        (o) => o.toISOString(),
+        (r) => r.toISOString(),
         e
       ),
       onBlur: A(t.controller, l)
     })
   });
 }, et = (n) => {
-  const { value: l, onChange: e, onBlur: t } = n, o = W(""), r = (u) => {
+  const { value: l, onChange: e, onBlur: t } = n, r = W(""), o = (u) => {
     e == null || e(S.get(l).filter((i) => i !== u));
   }, s = () => {
-    const u = o.value.trim(), i = S.get(l);
-    u === "" || i.includes(u) || (o.set(""), e == null || e([...i, u]));
+    const u = r.value.trim(), i = S.get(l);
+    u === "" || i.includes(u) || (r.set(""), e == null || e([...i, u]));
   };
   return O({
     ...n,
     input: U(
       c.class("bc-input-container__tags"),
-      be(l, (u) => Nn({ value: u, onClose: () => r(u.value) })),
+      be(l, (u) => Fn({ value: u, onClose: () => o(u.value) })),
       P.text(
         V(n),
-        c.value(o),
+        c.value(r),
         c.class("bc-input bc-input-container__tags-input"),
-        m.input(v(o.set)),
+        m.input(v(r.set)),
         e != null ? m.change(s) : k,
         t != null ? m.blur(t) : k
       )
@@ -1012,38 +1012,38 @@ const sl = (n) => {
     })
   });
 }, nt = (n) => {
-  const { value: l, onBlur: e, onChange: t, onInput: o, rows: r } = n;
+  const { value: l, onBlur: e, onChange: t, onInput: r, rows: o } = n;
   return O({
     ...n,
     input: h.textarea(
       V(n),
-      c.rows(r ?? 10),
+      c.rows(o ?? 10),
       c.value(l),
       c.class("bc-input"),
       e != null ? m.blur(v(e)) : k,
       t != null ? m.change(v(t)) : k,
-      o != null ? m.input(v(o)) : k
+      r != null ? m.input(v(r)) : k
     )
   });
 }, al = (n) => {
-  const { onBlur: l, onChange: e, rows: t, ...o } = n;
+  const { onBlur: l, onChange: e, rows: t, ...r } = n;
   return I({
-    ...o,
+    ...r,
     content: nt({
-      ...o,
-      ...T(o.controller),
+      ...r,
+      ...T(r.controller),
       rows: t,
-      value: o.controller.value,
-      onChange: j(o.controller, e),
-      onBlur: A(o.controller, l)
+      value: r.controller.value,
+      onChange: j(r.controller, e),
+      onBlur: A(r.controller, l)
     })
   });
 };
-function Qe(n) {
+function Ye(n) {
   return function(e) {
-    var o;
+    var r;
     if (e.type === "Valid") return e;
-    const t = (o = e.dependencies) == null ? void 0 : o[n];
+    const t = (r = e.dependencies) == null ? void 0 : r[n];
     return t != null ? { type: "Invalid", ...t } : { type: "Valid" };
   };
 }
@@ -1065,8 +1065,8 @@ function lt(n) {
   ].join("");
 }
 var X;
-class re {
-  constructor(l, e, t, o, r) {
+class oe {
+  constructor(l, e, t, r, o) {
     w(this, "path");
     w(this, "change");
     w(this, "value");
@@ -1085,11 +1085,11 @@ class re {
     w(this, "enable", () => {
       $(this, X).disabled.set(!1);
     });
-    this.path = l, this.change = e, this.value = t, this.status = o, this.error = o.map((s) => s.type === "Invalid" ? s.error : void 0), this.hasError = o.map((s) => s.type === "Invalid"), this.dependencyErrors = o.map(
+    this.path = l, this.change = e, this.value = t, this.status = r, this.error = r.map((s) => s.type === "Invalid" ? s.error : void 0), this.hasError = r.map((s) => s.type === "Invalid"), this.dependencyErrors = r.map(
       (s) => s.type === "Invalid" ? s.dependencies : void 0
-    ), this.parent = r, this.disabled = y(
+    ), this.parent = o, this.disabled = y(
       $(this, X).disabled,
-      r.disabled
+      o.disabled
     )((s, u) => s || u);
   }
   get name() {
@@ -1101,13 +1101,13 @@ class re {
 }
 X = new WeakMap();
 var L, Y;
-const ve = class ve extends re {
-  constructor(e, t, o, r, s) {
+const ve = class ve extends oe {
+  constructor(e, t, r, o, s) {
     super(
       e,
       t,
-      o.map((u) => u ?? []),
-      r,
+      r.map((u) => u ?? []),
+      o,
       s
     );
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1115,22 +1115,22 @@ const ve = class ve extends re {
     Q(this, Y, (e, t) => {
       if ($(this, L)[e])
         return $(this, L)[e];
-      const o = async (s) => {
+      const r = async (s) => {
         const u = this.value.value.slice();
         u[e] = s, this.change(u);
-      }, r = t(
+      }, o = t(
         [...this.path, e],
-        o,
+        r,
         this.value.map((s) => s[e]),
-        this.status.map(Qe(e)),
+        this.status.map(Ye(e)),
         { disabled: this.disabled }
       );
-      return $(this, L)[e] = r, r;
+      return $(this, L)[e] = o, o;
     });
     w(this, "length", this.value.map((e) => e.length));
-    w(this, "item", (e) => $(this, Y).call(this, e, (t, o, r, s, u) => new re(t, o, r, s, u)));
-    w(this, "list", (e) => $(this, Y).call(this, e, (t, o, r, s, u) => new ve(t, o, r, s, u)));
-    w(this, "group", (e) => $(this, Y).call(this, e, (t, o, r, s, u) => new se(t, o, r, s, u)));
+    w(this, "item", (e) => $(this, Y).call(this, e, (t, r, o, s, u) => new oe(t, r, o, s, u)));
+    w(this, "list", (e) => $(this, Y).call(this, e, (t, r, o, s, u) => new ve(t, r, o, s, u)));
+    w(this, "group", (e) => $(this, Y).call(this, e, (t, r, o, s, u) => new se(t, r, o, s, u)));
     w(this, "push", (...e) => {
       this.change([...this.value.value, ...e]);
     });
@@ -1147,11 +1147,11 @@ const ve = class ve extends re {
       this.splice(e, 1);
     });
     w(this, "splice", (e, t) => {
-      const o = $(this, L).splice(e, t);
-      for (const s of o)
+      const r = $(this, L).splice(e, t);
+      for (const s of r)
         s.dispose();
-      const r = this.value.value.slice();
-      r.splice(e, t), this.change(r);
+      const o = this.value.value.slice();
+      o.splice(e, t), this.change(o);
     });
   }
   dispose() {
@@ -1164,13 +1164,13 @@ const ve = class ve extends re {
 L = new WeakMap(), Y = new WeakMap();
 let pe = ve;
 var R, J;
-const we = class we extends re {
-  constructor(e, t, o, r, s) {
+const we = class we extends oe {
+  constructor(e, t, r, o, s) {
     super(
       e,
       t,
-      o.map((u) => u ?? {}),
-      r,
+      r.map((u) => u ?? {}),
+      o,
       s
     );
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1178,26 +1178,26 @@ const we = class we extends re {
     Q(this, J, (e, t) => {
       if ($(this, R).has(e))
         return $(this, R).get(e);
-      const o = async (s) => {
+      const r = async (s) => {
         this.change({
           ...this.value.value,
           [e]: s
         });
-      }, r = t(
+      }, o = t(
         [...this.path, e],
-        o,
+        r,
         this.value.map((s) => s[e]),
-        this.status.map(Qe(e)),
+        this.status.map(Ye(e)),
         { disabled: this.disabled }
       );
       return $(this, R).set(
         e,
-        r
-      ), r;
+        o
+      ), o;
     });
-    w(this, "field", (e) => $(this, J).call(this, e, (t, o, r, s, u) => new re(t, o, r, s, u)));
-    w(this, "list", (e) => $(this, J).call(this, e, (t, o, r, s, u) => new pe(t, o, r, s, u)));
-    w(this, "group", (e) => $(this, J).call(this, e, (t, o, r, s, u) => new we(t, o, r, s, u)));
+    w(this, "field", (e) => $(this, J).call(this, e, (t, r, o, s, u) => new oe(t, r, o, s, u)));
+    w(this, "list", (e) => $(this, J).call(this, e, (t, r, o, s, u) => new pe(t, r, o, s, u)));
+    w(this, "group", (e) => $(this, J).call(this, e, (t, r, o, s, u) => new we(t, r, o, s, u)));
   }
   dispose() {
     super.dispose();
@@ -1208,13 +1208,13 @@ const we = class we extends re {
 };
 R = new WeakMap(), J = new WeakMap();
 let se = we;
-class ot extends se {
+class rt extends se {
   dispose() {
     super.dispose(), this.parent.disabled.dispose(), this.value.dispose(), this.status.dispose();
   }
 }
 const il = (n) => {
-  const { value: l, onBlur: e, onChange: t, placeholder: o, disabled: r } = n;
+  const { value: l, onBlur: e, onChange: t, placeholder: r, disabled: o } = n;
   return _(C, (s) => O({
     growInput: !1,
     ...n,
@@ -1222,7 +1222,7 @@ const il = (n) => {
       c.class(
         y(
           s,
-          r ?? !1
+          o ?? !1
         )(
           ({ theme: u }, i) => u.checkboxInput({
             disabled: i
@@ -1234,11 +1234,11 @@ const il = (n) => {
         c.checked(l),
         c.class("bc-checkbox-input__checkbox"),
         e != null ? m.blur(v(e)) : k,
-        t != null ? m.change(vn(t)) : k
+        t != null ? m.change(wn(t)) : k
       ),
-      o != null ? h.span(
+      r != null ? h.span(
         c.class("bc-checkbox-input__label"),
-        Hn(o)
+        Hn(r)
       ) : k
     )
   }));
@@ -1248,12 +1248,12 @@ const il = (n) => {
   onChange: e,
   placeholder: t
 }) => {
-  const o = S.deriveProp(n ?? !1), r = W(!1);
+  const r = S.deriveProp(n ?? !1), o = W(!1);
   return _(C, (s) => h.div(
     c.class(
       y(
         s,
-        o
+        r
       )(
         ({ theme: u }, i) => u.editableText({
           isEditing: i
@@ -1261,19 +1261,19 @@ const il = (n) => {
       )
     ),
     le(
-      o,
+      r,
       () => h.input(
         c.placeholder(t),
         c.value(l),
         c.class("bc-editable-text__input"),
-        Cn(),
+        En(),
         m.keydown((u) => {
-          u.key === "Enter" ? o.set(!1) : u.key === "Escape" && (r.set(!0), o.set(!1));
+          u.key === "Enter" ? r.set(!1) : u.key === "Escape" && (o.set(!0), r.set(!1));
         }),
         m.blur(
           v((u) => {
-            if (o.set(!1), r.value) {
-              r.set(!1);
+            if (r.set(!1), o.value) {
+              o.set(!1);
               return;
             }
             e(u);
@@ -1281,7 +1281,7 @@ const il = (n) => {
         )
       ),
       () => h.span(
-        m.click(() => o.set(!0)),
+        m.click(() => r.set(!0)),
         c.class("bc-editable-text__display"),
         le(
           S.map(l, (u) => u != null && u.trim() !== ""),
@@ -1294,7 +1294,7 @@ const il = (n) => {
         h.button(
           c.class("bc-editable-text__edit-button"),
           q.label("Edit"),
-          m.click(() => o.set(!0)),
+          m.click(() => r.set(!0)),
           Z({ icon: "line-md/pencil" })
         )
       )
@@ -1305,14 +1305,14 @@ const il = (n) => {
   onChange: l,
   offLabel: e,
   onLabel: t,
-  label: o,
-  disabled: r = !1,
+  label: r,
+  disabled: o = !1,
   size: s = "md"
 }) => _(C, (u) => h.div(
   c.class(
     y(
       u,
-      r ?? !1,
+      o ?? !1,
       s
     )(
       ({ theme: i }, a, p) => i.toggle({
@@ -1324,9 +1324,9 @@ const il = (n) => {
   c.role("switch"),
   q.checked(n),
   m.click(() => {
-    S.get(r) || l(!S.get(n));
+    S.get(o) || l(!S.get(n));
   }),
-  o != null ? h.div(c.class("bc-toggle__label"), o) : null,
+  r != null ? Re(c.class(`bu-text-${s}`), r) : null,
   h.div(
     c.class("bc-toggle__track"),
     c.class(
@@ -1392,7 +1392,7 @@ const il = (n) => {
     )
   )
 ));
-function rt(n) {
+function ot(n) {
   function l(e) {
     return typeof e == "number" ? e : e.toString();
   }
@@ -1401,12 +1401,12 @@ function rt(n) {
   );
 }
 function st(n) {
-  const l = n.filter((o) => o.path == null || o.path.length === 0).map((o) => o.message), e = n.filter((o) => o.path != null && o.path.length > 0).reduce((o, r) => {
-    const s = rt(r.path), u = s.pop();
-    let i = o;
+  const l = n.filter((r) => r.path == null || r.path.length === 0).map((r) => r.message), e = n.filter((r) => r.path != null && r.path.length > 0).reduce((r, o) => {
+    const s = ot(o.path), u = s.pop();
+    let i = r;
     for (const a of s)
       i.dependencies == null && (i.dependencies = {}), i.dependencies[a] == null && (i.dependencies[a] = {}), i = i.dependencies[a];
-    return i.dependencies == null && (i.dependencies = {}), i.dependencies[u] = { error: r.message }, o;
+    return i.dependencies == null && (i.dependencies = {}), i.dependencies[u] = { error: o.message }, r;
   }, {}), t = l.join(`
 `);
   return {
@@ -1414,14 +1414,14 @@ function st(n) {
     error: t != "" ? t : void 0
   };
 }
-function Ye(n) {
+function Je(n) {
   return U(c.disabled(n.disabled), c.name(n.name));
 }
 function pl(n, {
   triggerOn: l = "change"
 } = {}) {
   return U(
-    Ye(n),
+    Je(n),
     c.value(n.value),
     (l === "input" ? m.input : m.change)(v(n.change))
   );
@@ -1430,7 +1430,7 @@ function ml(n, {
   triggerOn: l = "change"
 } = {}) {
   return U(
-    Ye(n),
+    Je(n),
     c.valueAsNumber(n.value),
     (l === "input" ? m.input : m.change)(
       ie(n.change)
@@ -1441,7 +1441,7 @@ function gl({
   defaultValue: n = {},
   schema: l
 }) {
-  const e = W(n), t = W({ type: "Valid" }), o = W(!1), r = async (u) => {
+  const e = W(n), t = W({ type: "Valid" }), r = W(!1), o = async (u) => {
     e.set(u);
     const i = await l["~standard"].validate(u);
     i.issues != null ? t.set({
@@ -1449,8 +1449,8 @@ function gl({
       ...st(i.issues)
     }) : t.set({ type: "Valid" });
   };
-  return new ot([], r, e, t, {
-    disabled: o
+  return new rt([], o, e, t, {
+    disabled: r
   });
 }
 const ct = ["!=", "<=", ">=", "<", ">", "="];
@@ -1461,10 +1461,10 @@ function at(n) {
   return ["=", n];
 }
 function ut(n, l, e) {
-  const [t, o] = at(l), r = n.findIndex((i) => i[1] === o);
-  if (r === -1)
-    throw new Error(`Breakpoint ${String(o)} not found`);
-  const s = n[r][0], u = r < n.length - 1 ? n[r + 1][0] : 1 / 0;
+  const [t, r] = at(l), o = n.findIndex((i) => i[1] === r);
+  if (o === -1)
+    throw new Error(`Breakpoint ${String(r)} not found`);
+  const s = n[o][0], u = o < n.length - 1 ? n[o + 1][0] : 1 / 0;
   switch (t) {
     case "=":
       return e >= s && e < u;
@@ -1486,22 +1486,22 @@ function bl(n, l) {
   const e = n.findIndex((t) => t[0] > l) - 1;
   return e >= 0 ? n[e][1] : (n.length > 0 && l >= n[0][0], n[0][1]);
 }
-function Je(n, { breakpoints: l, mode: e = "viewport" }) {
-  const o = [...Object.entries(l).map(
+function Ke(n, { breakpoints: l, mode: e = "viewport" }) {
+  const r = [...Object.entries(l).map(
     ([s, u]) => [u, s]
-  )].sort((s, u) => s[0] - u[0]), r = (s) => {
+  )].sort((s, u) => s[0] - u[0]), o = (s) => {
     const u = s.map(({ width: a }) => {
-      const p = o.findIndex((g) => g[0] > a) - 1;
-      return p >= 0 ? { width: a, breakpoint: o[p][1] } : o.length > 0 && a >= o[0][0] ? { width: a, breakpoint: o[0][1] } : { width: a, breakpoint: o[0][1] };
+      const p = r.findIndex((g) => g[0] > a) - 1;
+      return p >= 0 ? { width: a, breakpoint: r[p][1] } : r.length > 0 && a >= r[0][0] ? { width: a, breakpoint: r[0][1] } : { width: a, breakpoint: r[0][1] };
     });
     return n({
       value: u,
       breakpoints: l,
-      asList: o,
-      is: (a, p) => ut(o, a, p)
+      asList: r,
+      is: (a, p) => ut(r, a, p)
     });
   };
-  return e === "element" ? ce(r) : En(r);
+  return e === "element" ? ce(o) : Bn(o);
 }
 let ae = NaN;
 function it(n, l) {
@@ -1520,7 +1520,7 @@ function ht(n) {
       lg: B(e, "--breakpoint-lg", 1280),
       xl: B(e, "--breakpoint-xl", 1536)
     };
-    return Je(n, { breakpoints: t });
+    return Ke(n, { breakpoints: t });
   });
 }
 function fl(n) {
@@ -1540,7 +1540,7 @@ function fl(n) {
       "5xl": B(e, "--container-5xl", 1536),
       "6xl": B(e, "--container-6xl", 2048)
     };
-    return Je(n, {
+    return Ke(n, {
       breakpoints: t,
       mode: "element"
     });
@@ -1550,19 +1550,19 @@ const F = (n) => Object.entries(n), ee = (n, l) => {
   const e = setTimeout(n, l);
   return () => clearTimeout(e);
 };
-function Ke({
+function Ze({
   initialStatus: n = "closed",
   openedAfter: l,
   closedAfter: e
 }) {
-  const t = W(n), o = () => {
+  const t = W(n), r = () => {
     t.set("start-opening");
-  }, r = () => {
+  }, o = () => {
     t.set("closing");
   }, s = () => {
-    t.value === "open" || t.value === "opening" ? r() : o();
+    t.value === "open" || t.value === "opening" ? o() : r();
   }, u = (b) => {
-    b ? o() : r();
+    b ? r() : o();
   }, i = (b) => t.on((x) => {
     x === "closed" && b();
   });
@@ -1574,8 +1574,8 @@ function Ke({
   const p = t.map((b) => b !== "closed"), g = t.map((b) => b === "open" || b === "opening");
   return {
     status: t,
-    open: o,
-    close: r,
+    open: r,
+    close: o,
     toggle: s,
     setOpen: u,
     isOpen: p,
@@ -1590,10 +1590,10 @@ function kl({
   openDuration: e = l ?? 500,
   closeDuration: t = l ?? 500
 } = {}) {
-  return Ke({
+  return Ze({
     initialStatus: n,
-    openedAfter: (o) => ee(o, e),
-    closedAfter: (o) => ee(o, t)
+    openedAfter: (r) => ee(r, e),
+    closedAfter: (r) => ee(r, t)
   });
 }
 function We(n, l) {
@@ -1618,7 +1618,7 @@ function me({
     setElement: (t) => {
       e = t;
     },
-    ...Ke({
+    ...Ze({
       initialStatus: n,
       openedAfter: (t) => e == null ? (t(), () => {
       }) : We(e, t),
@@ -1708,7 +1708,7 @@ function De(n, l) {
 function ue(n) {
   n = n.filter((l) => l.some((e) => e != null && !e.startsWith("?")));
   for (let l = 0; l < n[0].length; l++)
-    n.every((e) => e[l] == null || e[l].startsWith("?")) && (n = n.map((e) => e.filter((t, o) => o !== l)), l--);
+    n.every((e) => e[l] == null || e[l].startsWith("?")) && (n = n.map((e) => e.filter((t, r) => r !== l)), l--);
   return n = n.map((l) => l.map((e) => e != null && e.startsWith("?") ? e.slice(1) : e)), n;
 }
 function dt({
@@ -1716,9 +1716,9 @@ function dt({
   mediumBreakpoint: l,
   vertical: e,
   horizontal: t,
-  is: o
+  is: r
 }) {
-  function r(i) {
+  function o(i) {
     var x;
     let a = [
       [null],
@@ -1796,7 +1796,7 @@ function dt({
   return ({
     width: i,
     breakpoint: a
-  }) => o(`<=${n}`, i) ? r(a) : o(`<=${l}`, i) ? s(a) : u(a);
+  }) => r(`<=${n}`, i) ? o(a) : r(`<=${l}`, i) ? s(a) : u(a);
 }
 const pt = ["menu", "aside"], mt = [
   "banner",
@@ -1817,14 +1817,14 @@ function xl({
   ...e
 }) {
   return _(C, ({ theme: t }) => {
-    const o = Object.fromEntries(
+    const r = Object.fromEntries(
       pt.filter((s) => e[s]).map(
         (s) => [
           s,
           De(e[s].width ?? {}, D[s])
         ]
       )
-    ), r = Object.fromEntries(
+    ), o = Object.fromEntries(
       mt.filter((s) => e[s]).map(
         (s) => [
           s,
@@ -1840,25 +1840,25 @@ function xl({
       const i = dt({
         smallBreakpoint: n,
         mediumBreakpoint: l,
-        vertical: o,
-        horizontal: r,
+        vertical: r,
+        horizontal: o,
         is: u
       }), a = s.map(i), p = y(
-        r.header != null,
-        o.menu != null,
-        o.aside != null
+        o.header != null,
+        r.menu != null,
+        r.aside != null
       )((f, N, ne) => f || N || ne), g = y(
-        o.aside != null,
+        r.aside != null,
         a
       )((f, { displayAside: N }) => f && !N), b = y(
-        o.menu != null,
+        r.menu != null,
         a
       )((f, { displayMenu: N }) => f && !N), x = me(), E = me(), H = W(0), M = y(
-        o.menu != null,
+        r.menu != null,
         a,
         x.isOpen
       )(gt), G = y(
-        o.aside != null,
+        r.aside != null,
         a,
         E.isOpen
       )(bt);
@@ -2101,15 +2101,15 @@ function xl({
   });
 }
 function yl({ variant: n = "default", size: l = "md", roundedness: e = "lg" } = {}, ...t) {
-  return _(C, (o) => h.div(
+  return _(C, (r) => h.div(
     c.class(
       y(
-        o,
+        r,
         n,
         l,
         e
       )(
-        ({ theme: r }, s, u, i) => r.card({
+        ({ theme: o }, s, u, i) => o.card({
           variant: s,
           size: u,
           roundedness: i
@@ -2132,8 +2132,8 @@ function wl({ gap: n = "lg" } = {}, ...l) {
         e,
         n
       )(
-        ({ theme: t }, o) => t.center({
-          gap: o
+        ({ theme: t }, r) => t.center({
+          gap: r
         })
       )
     ),
@@ -2144,15 +2144,15 @@ function $l(...n) {
   return h.div(c.class("bc-group"), ...n);
 }
 function Sl({ variant: n = "default", size: l = "md", roundedness: e = "lg" } = {}, ...t) {
-  return _(C, (o) => h.div(
+  return _(C, (r) => h.div(
     c.class(
       y(
-        o,
+        r,
         n,
         l,
         e
       )(
-        ({ theme: r }, s, u, i) => r.sink({
+        ({ theme: o }, s, u, i) => o.sink({
           variant: s,
           size: u,
           roundedness: i
@@ -2167,16 +2167,16 @@ function _l(...n) {
 }
 function ft(n) {
   return ({ effect: l, ...e }, t) => {
-    const o = [], r = () => o.forEach((a) => a()), s = me();
-    s.onClosed(r);
-    const i = wn((() => {
+    const r = [], o = () => r.forEach((a) => a()), s = me();
+    s.onClosed(o);
+    const i = $n((() => {
       var p, g;
       const a = /* @__PURE__ */ new Set();
       for (const b of n.element.querySelectorAll(
         ":scope > :not([data-overlay])"
       ))
         b.hasAttribute("inert") ? a.add(b) : b.setAttribute("inert", "");
-      if (o.push(() => {
+      if (r.push(() => {
         for (const b of n.element.querySelectorAll(
           ":scope > :not([data-overlay])"
         ))
@@ -2187,14 +2187,14 @@ function ft(n) {
           var H;
           E.key === "Escape" && ((H = e.onEscape) == null || H.call(e), s.close());
         };
-        document.addEventListener("keydown", b), o.push(
+        document.addEventListener("keydown", b), r.push(
           () => document.removeEventListener("keydown", b)
         );
         const x = () => {
           var E;
           (E = e.onClickOutside) == null || E.call(e), s.close();
         };
-        n.element.addEventListener("mousedown", x), o.push(
+        n.element.addEventListener("mousedown", x), r.push(
           () => n.element.removeEventListener("mousedown", x)
         );
       }
@@ -2221,31 +2221,31 @@ function ft(n) {
       clear: !1,
       providers: n.providers
     });
-    return o.push(i), ee(() => s.open(), 0), r;
+    return r.push(i), ee(() => s.open(), 0), o;
   };
 }
-function Ze(n, l, e) {
-  return $n((t) => {
-    const o = n(t), r = ft(o);
+function en(n, l, e) {
+  return Sn((t) => {
+    const r = n(t), o = ft(r);
     let s = () => {
     };
     const u = (i) => {
-      s(), s = r(l, i);
+      s(), s = o(l, i);
     };
     return U(K(s), e(u));
   });
 }
 function Cl(n, l) {
-  return Ze((e) => e, n, l);
+  return en((e) => e, n, l);
 }
 function El(n, l) {
-  return Ze(
+  return en(
     (e) => e.makePortal("body"),
     n,
     l
   );
 }
-const en = {
+const nn = {
   red: {
     50: "oklch(0.971 0.013 17.38)",
     100: "oklch(0.936 0.032 17.717)",
@@ -2532,7 +2532,7 @@ const en = {
     900: "oklch(0.216 0.006 56.043)",
     950: "oklch(0.147 0.004 49.25)"
   }
-}, nn = {
+}, tn = {
   sm: "40rem",
   // 640px
   md: "48rem",
@@ -2544,19 +2544,19 @@ const en = {
   "2xl": "96rem"
   // 1536px
 };
-function tn(n) {
+function ln(n) {
   return `--breakpoint-${n}`;
 }
 function Bl(n) {
-  return `var(${tn(n)})`;
+  return `var(${ln(n)})`;
 }
 function Il(n) {
-  return `@media (width >= ${nn[n]})`;
+  return `@media (width >= ${tn[n]})`;
 }
 function kt() {
   const n = {};
-  return F(nn).forEach(([l, e]) => {
-    n[tn(l)] = e;
+  return F(tn).forEach(([l, e]) => {
+    n[ln(l)] = e;
   }), n;
 }
 const xt = [
@@ -2581,8 +2581,8 @@ const xt = [
   "info"
 ], Al = [
   ...ye,
-  ...F(en).map(([n]) => n)
-], ln = {
+  ...F(nn).map(([n]) => n)
+], rn = {
   primary: "blue",
   secondary: "gray",
   base: "gray",
@@ -2631,7 +2631,7 @@ const xt = [
   }
 };
 function Tl(n) {
-  return ye.includes(n) ? ln[n] : n;
+  return ye.includes(n) ? rn[n] : n;
 }
 function ge(n, l) {
   return `--color-${n}-${l}`;
@@ -2641,12 +2641,12 @@ function te(n, l) {
 }
 function $t() {
   const n = {};
-  return n["--color-white"] = "white", n["--color-black"] = "black", n["--color-inherit"] = "inherit", F(en).forEach(([l, e]) => {
-    F(e).forEach(([t, o]) => {
-      n[ge(l, t)] = o;
+  return n["--color-white"] = "white", n["--color-black"] = "black", n["--color-inherit"] = "inherit", F(nn).forEach(([l, e]) => {
+    F(e).forEach(([t, r]) => {
+      n[ge(l, t)] = r;
     });
   }), ye.forEach((l) => {
-    const e = ln[l];
+    const e = rn[l];
     xt.forEach((t) => {
       n[ge(l, t)] = te(
         e,
@@ -2654,18 +2654,18 @@ function $t() {
       );
     });
   }), F(yt).forEach(([l, e]) => {
-    F(e).forEach(([t, [o, r]]) => {
-      n[`--bg-${t}-${l}`] = te(o, r);
+    F(e).forEach(([t, [r, o]]) => {
+      n[`--bg-${t}-${l}`] = te(r, o);
     });
   }), F(vt).forEach(([l, e]) => {
-    F(e).forEach(([t, [o, r]]) => {
-      n[`--text-${t}-${l}`] = te(o, r);
+    F(e).forEach(([t, [r, o]]) => {
+      n[`--text-${t}-${l}`] = te(r, o);
     });
   }), F(wt).forEach(([l, e]) => {
-    F(e).forEach(([t, [o, r]]) => {
+    F(e).forEach(([t, [r, o]]) => {
       n[`--border-${t}-${l}`] = te(
-        o,
-        r
+        r,
+        o
       );
     });
   }), n;
@@ -2679,11 +2679,11 @@ const on = {
   xl: "calc(var(--spacing-base) * 3)",
   full: "9999px"
 };
-function rn(n) {
+function sn(n) {
   return `--radius-${n}`;
 }
 function Ol(n) {
-  return `var(${rn(n)})`;
+  return `var(${sn(n)})`;
 }
 function Vl(n) {
   return `@media (width >= ${on[n]})`;
@@ -2691,7 +2691,7 @@ function Vl(n) {
 function St() {
   const n = {};
   return F(on).forEach(([l, e]) => {
-    n[rn(l)] = e;
+    n[sn(l)] = e;
   }), n;
 }
 const _t = "0.25rem", Ct = {
@@ -2707,16 +2707,16 @@ const _t = "0.25rem", Ct = {
   "3xl": "calc(var(--spacing-base) * 6)",
   full: "9999px"
 };
-function sn(n) {
+function cn(n) {
   return `--spacing-${n}`;
 }
 function jl(n) {
-  return `var(${sn(n)})`;
+  return `var(${cn(n)})`;
 }
 function Et() {
   const n = {};
   return F(Ct).forEach(([l, e]) => {
-    n[sn(l)] = e;
+    n[cn(l)] = e;
   }), n;
 }
 const Bt = {
@@ -2804,11 +2804,11 @@ const Bt = {
     "monospace"
   ]
 };
-function cn(n) {
+function an(n) {
   return `--font-size-${n}`;
 }
 function Nl(n) {
-  return `var(${cn(n)})`;
+  return `var(${an(n)})`;
 }
 function Vt(n) {
   return `--font-weight-${n}`;
@@ -2816,37 +2816,37 @@ function Vt(n) {
 function jt(n) {
   return `var(${jt()})`;
 }
-function an(n) {
+function un(n) {
   return `--line-height-${n}`;
 }
 function Fl(n) {
-  return `var(${an(n)})`;
+  return `var(${un(n)})`;
 }
-function un(n) {
+function hn(n) {
   return `--letter-spacing-${n}`;
 }
 function Hl(n) {
-  return `var(${un(n)})`;
+  return `var(${hn(n)})`;
 }
-function hn(n) {
+function dn(n) {
   return `--font-family-${n}`;
 }
 function Wl(n) {
-  return `var(${hn(n)})`;
+  return `var(${dn(n)})`;
 }
 function Nt() {
   const n = {};
   return Object.entries(Bt).forEach(([l, e]) => {
     const [t] = Array.isArray(e) ? e : [e];
-    n[cn(l)] = t;
+    n[an(l)] = t;
   }), Object.entries(It).forEach(([l, e]) => {
     n[Vt(l)] = e;
   }), Object.entries(At).forEach(([l, e]) => {
-    n[an(l)] = e;
-  }), Object.entries(Tt).forEach(([l, e]) => {
     n[un(l)] = e;
+  }), Object.entries(Tt).forEach(([l, e]) => {
+    n[hn(l)] = e;
   }), Object.entries(Ot).forEach(([l, e]) => {
-    n[hn(l)] = e.join(", ");
+    n[dn(l)] = e.join(", ");
   }), n;
 }
 function Dl() {
@@ -2862,19 +2862,19 @@ function Pl(n, l) {
   return l == null && typeof window > "u" ? "" : getComputedStyle(l ?? document.documentElement).getPropertyValue(n).trim();
 }
 function Ml(n, l = 0, e = () => !0) {
-  let t = null, o;
-  const r = W(n.value);
+  let t = null, r;
+  const o = W(n.value);
   return n.on((s) => {
-    o = s, e(s) ? t == null && (t = setTimeout(() => {
-      t = null, r.set(o);
-    }, l)) : r.set(s);
+    r = s, e(s) ? t == null && (t = setTimeout(() => {
+      t = null, o.set(r);
+    }, l)) : o.set(s);
   }), n.onDispose(() => {
     t != null && clearTimeout(t);
-  }), r;
+  }), o;
 }
 export {
   xl as AppShell,
-  Bn as BeatUITheme,
+  In as BeatUITheme,
   He as Button,
   yl as Card,
   wl as Center,
@@ -2883,7 +2883,7 @@ export {
   V as CommonInputAttributes,
   I as ControlInputWrapper,
   qt as DateControl,
-  Re as DateInput,
+  qe as DateInput,
   zt as DateTimeControl,
   Mn as DateTimeInput,
   hl as EditableText,
@@ -2892,23 +2892,23 @@ export {
   Pt as EmphasisLabel,
   Mt as ErrorLabel,
   Rn as Expando,
-  ot as FormController,
+  rt as FormController,
   Gt as FormStatus,
   $l as Group,
   se as GroupController,
   Z as Icon,
   O as InputContainer,
-  Fn as Label,
+  Re as Label,
   zn as LazyNativeSelect,
   Qt as LazyNativeSelectControl,
   pe as ListController,
   Hn as MutedLabel,
-  ze as NativeSelect,
+  Ue as NativeSelect,
   Yt as NativeSelectControl,
   Jt as NullableDateControl,
-  Ue as NullableDateInput,
+  Ge as NullableDateInput,
   Kt as NullableDateTimeControl,
-  Ge as NullableDateTimeInput,
+  Xe as NullableDateTimeInput,
   Zt as NullableStringDateControl,
   el as NullableStringDateTimeControl,
   Yn as NullableTextArea,
@@ -2919,15 +2919,15 @@ export {
   Jn as NumberInput,
   El as OverlayBody,
   Cl as OverlayElement,
-  ol as PasswordControl,
+  rl as PasswordControl,
   Kn as PasswordInput,
   Wn as RequiredSymbol,
-  rl as SegmentedControl,
+  ol as SegmentedControl,
   de as SelectOption,
   Sl as Sink,
   _l as Stack,
   sl as StringDateControl,
-  Nn as Tag,
+  Fn as Tag,
   cl as TagsControl,
   et as TagsInput,
   nt as TextArea,
@@ -2938,26 +2938,26 @@ export {
   Dt as ThemeAppeareance,
   dl as Toggle,
   ql as Use,
-  re as ValueController,
-  Je as WithBreakpoint,
+  oe as ValueController,
+  Ke as WithBreakpoint,
   ht as WithTWBreakpoint,
   fl as WithTWElementBreakpoint,
   _t as baseSpacing,
   yt as bgColors,
   wt as borderColors,
-  nn as breakpoints,
+  tn as breakpoints,
   xt as colorShades,
-  en as colors,
+  nn as colors,
   ut as compareBreakpoint,
-  Ye as connectCommonAttributes,
+  Je as connectCommonAttributes,
   ml as connectNumberInput,
   pl as connectStringInput,
   st as convertStandardSchemaIssues,
-  rt as convertStandardSchemaPathToPath,
+  ot as convertStandardSchemaPathToPath,
   Ml as delaySignal,
   Xt as emitExpando,
   qn as emitOptionExpando,
-  oe as emptyToNull,
+  re as emptyToNull,
   bl as findBreakpoint,
   Ot as fontFamily,
   Bt as fontSize,
@@ -2970,47 +2970,47 @@ export {
   Nt as generateTypographyVariables,
   Il as getBreakpointMediaQuery,
   Bl as getBreakpointVar,
-  tn as getBreakpointVarName,
+  ln as getBreakpointVarName,
   te as getColorVar,
   ge as getColorVarName,
   Wl as getFontFamilyVar,
-  hn as getFontFamilyVarName,
+  dn as getFontFamilyVarName,
   Nl as getFontSizeVar,
-  cn as getFontSizeVarName,
+  an as getFontSizeVarName,
   jt as getFontWeightVar,
   Vt as getFontWeightVarName,
   Hl as getLetterSpacingVar,
-  un as getLetterSpacingVarName,
+  hn as getLetterSpacingVarName,
   Fl as getLineHeightVar,
-  an as getLineHeightVarName,
+  un as getLineHeightVarName,
   Vl as getRadiusMediaQuery,
   Ol as getRadiusVar,
-  rn as getRadiusVarName,
+  sn as getRadiusVarName,
   jl as getSpacingVar,
-  sn as getSpacingVarName,
+  cn as getSpacingVarName,
   Pl as getTokenValue,
   T as inputOptionsFromController,
   fe as inputOptionsFromMappedController,
   Tt as letterSpacing,
   At as lineHeight,
-  Qe as makeMapValidationResult,
+  Ye as makeMapValidationResult,
   ke as makeMappedOnChangeHandler,
   Lt as makeNullableOnChangeHandler,
   A as makeOnBlurHandler,
   j as makeOnChangeHandler,
   ft as makeOverlay,
   Tl as normalizeColorName,
-  Xe as nullToEmpty,
+  Qe as nullToEmpty,
   ul as parsePath,
   lt as pathToString,
   on as radius,
   ye as semanticColorNames,
-  ln as semanticColors,
+  rn as semanticColors,
   Ct as spacing,
   vt as textColors,
   Al as themeColorNames,
   me as useAnimatedElementToggle,
-  Ke as useAnimatedToggle,
+  Ze as useAnimatedToggle,
   gl as useForm,
   kl as useTimedToggle,
   tt as wrapSegment