@base-framework/ui 1.2.55 → 1.2.57

package/dist/{full-page-CI8OB56g.js → full-page-C8-dsYzw.js}

@@ -1,8 +1,8 @@
-import { I as U, Span as f, Button as v, OnState as M, Div as l, Legend as mt, Fieldset as bt, H4 as Ke, P as k, Label as Y, Checkbox as me, Input as p, Textarea as Qe, UseParent as G, Img as be, H5 as xt, H2 as Z, Form as pt, Header as ee, Footer as xe, A as Je, H3 as pe, Nav as ye, Ul as te, Li as we, OnStateOpen as ve, On as X, Dialog as yt, Th as Xe, Thead as wt, Tr as vt, Table as ke, Time as kt, H1 as Ct } from "@base-framework/atoms";
-import { Atom as i, router as q, Jot as B, Component as S, Html as Ze, Data as N, Events as H, DateTime as se, NavLink as St, DataTracker as et } from "@base-framework/base";
+import { I as Y, Span as h, Button as v, OnState as P, Div as l, Legend as mt, Fieldset as bt, H4 as Qe, P as k, Label as V, Checkbox as be, Input as y, Textarea as Je, UseParent as K, Img as xe, H5 as xt, H2 as ee, Form as pt, Header as te, Footer as pe, A as Xe, H3 as ye, Nav as we, Ul as se, Li as ve, OnStateOpen as ke, On as Z, Dialog as yt, Th as Ze, Thead as wt, Tr as vt, Table as Ce, Time as kt, H1 as Ct } from "@base-framework/atoms";
+import { Atom as i, router as G, Jot as M, Component as S, Html as et, Data as F, Events as U, DateTime as ne, NavLink as St, DataTracker as tt } from "@base-framework/base";
 import { Icons as g } from "./icons.es.js";
 import { Timer as $t, TableBody as Dt, DataTableBody as It, ScrollableTableBody as Tt, List as Pt } from "@base-framework/organisms";
-import { F as W } from "./format-DE4rFWuD.js";
+import { F as q } from "./format-DE4rFWuD.js";
 import { F as Mt } from "./bside-template-C7AQgQ6H.js";
 const Bt = {
   xs: "w-4 h-4",
@@ -14,13 +14,13 @@ const Bt = {
   "3xl": "w-16 h-16"
 }, ge = i((e, t) => {
   const s = Bt[e.size || "sm"];
-  return U({
+  return Y({
     ...e,
     // @ts-ignore
     class: `stroke-current icon-size ${s} ${e.class || ""}`,
     html: t[0]?.textContent
   });
-}), Te = {
+}), Pe = {
   xs: "w-4 h-4",
   // 16px - matches Icon
   sm: "w-6 h-6",
@@ -35,7 +35,7 @@ const Bt = {
   // 56px - matches Icon
   "3xl": "w-16 h-16"
   // 64px - matches Icon
-}, Pe = {
+}, Me = {
   xs: "16px",
   sm: "24px",
   md: "32px",
@@ -43,14 +43,14 @@ const Bt = {
   xl: "48px",
   "2xl": "56px",
   "3xl": "64px"
-}, Me = {
+}, Be = {
   outlined: "material-symbols-outlined",
   filled: "material-symbols-filled",
   rounded: "material-symbols-rounded",
   sharp: "material-symbols-sharp"
-}, Be = i((e) => {
-  const t = e.size || "sm", s = e.variant || "outlined", n = Te[t] || Te.sm, a = Pe[t] || Pe.sm, o = Me[s] || Me.outlined;
-  return f({
+}, ze = i((e) => {
+  const t = e.size || "sm", s = e.variant || "outlined", n = Pe[t] || Pe.sm, a = Me[t] || Me.sm, o = Be[s] || Be.outlined;
+  return h({
     ...e,
     // @ts-ignore
     class: `inline-flex items-center justify-center ${o} ${n} ${e.class || ""}`,
@@ -62,14 +62,14 @@ const Bt = {
     name: void 0
     // @ts-ignore
   }, e.name);
-}), x = (e = {}, t) => t ? typeof t == "string" && t.includes("<svg") ? ge(e, t) : typeof t == "object" && t.name ? Be({
+}), p = (e = {}, t) => t ? typeof t == "string" && t.includes("<svg") ? ge(e, t) : typeof t == "object" && t.name ? ze({
   ...e,
   name: t.name,
   variant: t.variant || e.variant || "outlined"
-}) : typeof t == "string" ? Be({
+}) : typeof t == "string" ? ze({
   ...e,
   name: t
-}) : ge(e, t) : null, Ta = (e) => e ? !!(typeof e == "object" && e.name || typeof e == "string" && !e.includes("<svg")) : !1, Pa = (e) => typeof e == "string" && e.includes("<svg"), ze = {
+}) : ge(e, t) : null, Ta = (e) => e ? !!(typeof e == "object" && e.name || typeof e == "string" && !e.includes("<svg")) : !1, Pa = (e) => typeof e == "string" && e.includes("<svg"), Oe = {
   gray: {
     backgroundColor: "bg-gray-50",
     textColor: "text-gray-600",
@@ -150,18 +150,18 @@ const Bt = {
     textColor: "text-foreground",
     ringColor: "ring-white/10"
   }
-}, zt = (e) => ze[e] || ze.gray, Ot = (e, t = {}) => {
+}, zt = (e) => Oe[e] || Oe.gray, Ot = (e, t = {}) => {
   const s = zt(e), n = t.backgroundColor ?? s.backgroundColor, a = t.textColor ?? s.textColor, o = t.ringColor ?? s.ringColor;
   return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${n} ${a} ${o}`;
 }, Ma = i((e, t) => {
-  const { type: s, icon: n, size: a = "xs", backgroundColor: o, textColor: r, ringColor: c, ...u } = e, h = Ot(s, { backgroundColor: o, textColor: r, ringColor: c });
-  return f({ ...u, class: h }, [
-    n ? x({ size: a, class: "mr-1" }, n) : null,
+  const { type: s, icon: n, size: a = "xs", backgroundColor: o, textColor: r, ringColor: c, ...u } = e, f = Ot(s, { backgroundColor: o, textColor: r, ringColor: c });
+  return h({ ...u, class: f }, [
+    n ? p({ size: a, class: "mr-1" }, n) : null,
     ...t || []
   ]);
 });
-let z = globalThis.history?.state?._pos ?? 0;
-const le = /* @__PURE__ */ new Map(), re = (e) => (e || "").replace(/^\/+/, "").replace(/\/+$/, ""), tt = (e, t) => {
+let O = globalThis.history?.state?._pos ?? 0;
+const le = /* @__PURE__ */ new Map(), re = (e) => (e || "").replace(/^\/+/, "").replace(/\/+$/, ""), me = (e, t) => {
   if (!t) return !1;
   const s = re(e), n = re(t);
   return s === n || s.startsWith(n + "/");
@@ -184,21 +184,21 @@ const le = /* @__PURE__ */ new Map(), re = (e) => (e || "").replace(/^\/+/, "").
 if (typeof globalThis.history?.pushState == "function") {
   const e = globalThis.history.pushState, t = globalThis.history.replaceState;
   globalThis.history.pushState = function(s, n, a) {
-    z++;
-    const o = s !== null && typeof s == "object" ? { ...s, _pos: z } : { _pos: z };
+    O++;
+    const o = s !== null && typeof s == "object" ? { ...s, _pos: O } : { _pos: O };
     return e.call(this, o, n, a);
   }, globalThis.history.replaceState = function(s, n, a) {
-    const o = globalThis.history.state?._pos ?? z, r = s !== null && typeof s == "object" ? { ...s, _pos: o } : { _pos: o };
+    const o = globalThis.history.state?._pos ?? O, r = s !== null && typeof s == "object" ? { ...s, _pos: o } : { _pos: o };
     return t.call(this, r, n, a);
   }, globalThis.addEventListener("popstate", (s) => {
     const n = (
       /** @type {any} */
       s.state?._pos
     );
-    typeof n == "number" && (z = n);
+    typeof n == "number" && (O = n);
   });
 }
-const Oe = (e) => {
+const Ne = (e) => {
   const t = globalThis.history?.state || {};
   if (!(t._entryKey === e.key && t._entryPos === e.pos && t._entrySourcePath === e.sourcePath && t._entryBasePath === e.basePath))
     try {
@@ -216,16 +216,16 @@ const Oe = (e) => {
     } catch {
     }
 }, Lt = (e) => {
-  const t = globalThis.history?.state || {}, s = q.path || "", n = Nt(s, e), o = typeof t._entryKey == "string" && t._entryKey ? t._entryKey : `${e || ""}|${n}|${z}`, r = le.get(o);
-  if (r && tt(s, r.basePath))
-    return Oe(r), r;
-  const c = t._entryPos, u = t._entrySourcePath, h = t._entryBasePath, y = typeof c == "number" ? c : z, R = typeof u == "string" || u === null ? u : q.lastPath || null, P = {
-    key: o,
-    pos: y,
-    sourcePath: R,
-    basePath: typeof h == "string" && h ? h : n
+  const t = globalThis.history?.state || {}, s = G.path || "", n = Nt(s, e), a = t._entryBasePath, o = typeof a == "string" && a.length > 0 && me(s, a), c = o && typeof t._entryKey == "string" && t._entryKey ? t._entryKey : `${e || ""}|${n}|${O}`, u = le.get(c);
+  if (u && me(s, u.basePath))
+    return Ne(u), u;
+  const f = o ? t._entryPos : void 0, b = o ? t._entrySourcePath : void 0, A = typeof f == "number" ? f : O, B = typeof b == "string" || b === null ? b : G.lastPath || null, z = {
+    key: c,
+    pos: A,
+    sourcePath: B,
+    basePath: o && typeof a == "string" && a ? a : n
   };
-  return Oe(P), le.set(o, P), P;
+  return Ne(z), le.set(c, z), z;
 }, Rt = (e) => {
   const t = globalThis.history?.state?._entryKey;
   typeof t == "string" && t && le.delete(t), e && le.delete(e);
@@ -233,16 +233,16 @@ const Oe = (e) => {
   const t = Ft(), s = Lt(e.backUrl);
   return () => {
     Rt(e.backUrl);
-    const n = z - s.pos + 1, a = s.sourcePath, o = typeof a == "string" && a.length > 0 && !tt(a, s.basePath);
+    const n = O - s.pos + 1, a = s.sourcePath, o = typeof a == "string" && a.length > 0 && !me(a, s.basePath);
     if (!t && s.pos > 0) {
       globalThis.history.go(-n);
       return;
     }
     if (o) {
-      q.navigate(a);
+      G.navigate(a);
       return;
     }
-    e.backUrl && q.navigate(e.backUrl);
+    e.backUrl && G.navigate(e.backUrl);
   };
 };
 class st extends S {
@@ -259,9 +259,9 @@ class st extends S {
     return s ? { data: s } : null;
   }
 }
-const F = (e) => (
+const L = (e) => (
   /** @type {VeilComponentConstructor} */
-  B(e, st)
+  M(e, st)
 );
 class Ba extends st {
   /**
@@ -297,18 +297,18 @@ class Ba extends st {
     const t = this.size, s = this.icon, n = this.activeIcon || this.icon, a = (() => {
       if (this.dataKey) {
         let r = `[[${this.dataKey}]]`;
-        return this.formatType === "number" ? r = W.number(r, "0") : this.formatType === "money" ? r = W.roundMoney(r) : this.formatType === "date" ? r = W.date(r) : this.formatType === "percent" && (r = W.percentage(r)), f({ class: "toggle-btn-value text-sm tabular-nums capitalize" }, r);
+        return this.formatType === "number" ? r = q.number(r, "0") : this.formatType === "money" ? r = q.roundMoney(r) : this.formatType === "date" ? r = q.date(r) : this.formatType === "percent" && (r = q.percentage(r)), h({ class: "toggle-btn-value text-sm tabular-nums capitalize" }, r);
       }
-      return this.value !== null && this.value !== void 0 ? f({ class: "toggle-btn-value text-sm tabular-nums" }, String(this.value)) : null;
+      return this.value !== null && this.value !== void 0 ? h({ class: "toggle-btn-value text-sm tabular-nums" }, String(this.value)) : null;
     })(), o = this.fill;
     return v({
       click: () => this.handleToggle(),
       // @ts-ignore
       class: `toggle-btn inline-flex items-center gap-1.5 bg-transparent border-0 p-0 cursor-pointer text-foreground/70 hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${this.class || ""}`
     }, [
-      M(
+      P(
         "active",
-        (r) => x({ size: t, variant: r && o ? "filled" : "outlined" }, r ? n : s)
+        (r) => p({ size: t, variant: r && o ? "filled" : "outlined" }, r ? n : s)
       ),
       a
     ]);
@@ -353,18 +353,18 @@ class za extends S {
    * @returns {object}
    */
   render() {
-    const t = this.icon, s = this.activeIcon || this.icon, n = ie[this.size] || ie.md, a = ["xs", "sm"].includes(this.size) ? "xs" : "sm", o = this.class ?? "bg-background/40 backdrop-blur-sm", r = "text-foreground", c = this.activeClass || r, u = this.circle ?? !1, h = this.fill;
+    const t = this.icon, s = this.activeIcon || this.icon, n = ie[this.size] || ie.md, a = ["xs", "sm"].includes(this.size) ? "xs" : "sm", o = this.class ?? "bg-background/40 backdrop-blur-sm", r = "text-foreground", c = this.activeClass || r, u = this.circle ?? !1, f = this.fill;
     return v({
       click: () => this.handleToggle(),
       // @ts-ignore
       class: `circle-toggle-btn inline-flex items-center justify-center rounded-full border-0 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 ${n} ${o}${u ? " rounded-full w-[40px] h-[40px] max-w-[40px]" : ""}`
     }, [
-      M("active", (y) => [
-        x({
+      P("active", (b) => [
+        p({
           size: a,
-          variant: y && h ? "filled" : "outlined",
-          class: `transition-colors ${y ? c : r}`
-        }, y ? s : t)
+          variant: b && f ? "filled" : "outlined",
+          class: `transition-colors ${b ? c : r}`
+        }, b ? s : t)
       ])
     ]);
   }
@@ -377,10 +377,10 @@ const Oa = i((e, t) => {
     class: `circle-btn inline-flex items-center justify-center rounded-full border-0 bg-background/40 backdrop-blur-sm text-foreground cursor-pointer transition-colors hover:bg-background/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 ${n} ${e.class || ""}`
   }, [
     // @ts-ignore
-    e.icon ? x({ size: a }, e.icon) : null,
+    e.icon ? p({ size: a }, e.icon) : null,
     ...t || []
   ]);
-}), E = (e) => i((t, s) => v({
+}), _ = (e) => i((t, s) => v({
   ...e,
   ...t,
   // @ts-ignore
@@ -392,12 +392,12 @@ const Oa = i((e, t) => {
     class: e.class
   }, [
     // @ts-ignore
-    e.icon && e.position !== "right" ? x({ size: e.size || "sm", class: e.animation ?? null }, e.icon) : null,
+    e.icon && e.position !== "right" ? p({ size: e.size || "sm", class: e.animation ?? null }, e.icon) : null,
     ...t || [],
     // @ts-ignore
-    e.icon && e.position === "right" ? x({ size: e.size || "sm", class: e.animation ?? null }, e.icon) : null
+    e.icon && e.position === "right" ? p({ size: e.size || "sm", class: e.animation ?? null }, e.icon) : null
   ])
-), Ne = (e) => i((t, s) => nt({
+), Fe = (e) => i((t, s) => nt({
   ...e,
   ...t,
   // @ts-ignore
@@ -419,22 +419,22 @@ const Oa = i((e, t) => {
     class: `circle-icon-btn inline-flex items-center justify-center rounded-full ${a} text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50 cursor-pointer ${n[s] || n.md} ${e.class || ""}`
   }, [
     // @ts-ignore
-    e.icon ? x({ size: s === "xs" ? "xs" : "sm" }, e.icon) : null,
+    e.icon ? p({ size: s === "xs" ? "xs" : "sm" }, e.icon) : null,
     ...t || []
   ]);
-}), Fe = {
-  primary: E({ class: "primary" }),
-  secondary: E({ class: "secondary" }),
-  destructive: E({ class: "destructive" }),
-  warning: E({ class: "warning" }),
-  outline: E({ class: "outline" }),
-  ghost: E({ class: "ghost" }),
-  link: E({ class: "link" }),
-  icon: Ne({ class: "icon" }),
-  withIcon: Ne({ class: "with-icon" }),
+}), Le = {
+  primary: _({ class: "primary" }),
+  secondary: _({ class: "secondary" }),
+  destructive: _({ class: "destructive" }),
+  warning: _({ class: "warning" }),
+  outline: _({ class: "outline" }),
+  ghost: _({ class: "ghost" }),
+  link: _({ class: "link" }),
+  icon: Fe({ class: "icon" }),
+  withIcon: Fe({ class: "with-icon" }),
   back: jt({ class: "with-icon back-button" }),
   circleIcon: Et
-}, b = i((e, t) => (Fe[e.variant] || Fe.primary)(e, t)), Na = i((e, t) => b({ ...e, variant: "withIcon", icon: g.loading, animation: "animate-spin" }, t)), _t = i((e, t) => {
+}, x = i((e, t) => (Le[e.variant] || Le.primary)(e, t)), Na = i((e, t) => x({ ...e, variant: "withIcon", icon: g.loading, animation: "animate-spin" }, t)), _t = i((e, t) => {
   const s = e.margin ?? "my-5 mx-5", n = e.padding ?? "p-4", a = e.border ?? "border-border";
   return e.hover && (e.class += " hover:shadow-lg hover:bg-muted/50"), l({
     ...e,
@@ -471,14 +471,14 @@ const Oa = i((e, t) => {
       class: `flex flex-auto flex-col gap-y-1 ${e.labelProps?.class || ""}`
     }, [
       // @ts-ignore
-      Ke({ class: "text-base" }, e.label),
+      Qe({ class: "text-base" }, e.label),
       // @ts-ignore
       e.description && k({ class: "text-sm text-muted-foreground" }, e.description)
     ]),
     // Controls container: grows to fill remaining space, spacing between items
     l({ class: "flex flex-col gap-y-4" }, t)
   ]);
-}), Yt = "flex h-10 w-full px-3 py-2 text-sm", D = "rounded-md border border-border bg-input", $ = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", C = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", V = "placeholder:text-muted-foreground", Ce = `${Yt} ${D} ${$} ${V} ${C}`, Vt = ({ id: e, checked: t, bind: s, required: n }) => me({
+}), Yt = "flex h-10 w-full px-3 py-2 text-sm", D = "rounded-md border border-border bg-input", $ = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", C = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", W = "placeholder:text-muted-foreground", Se = `${Yt} ${D} ${$} ${W} ${C}`, Vt = ({ id: e, checked: t, bind: s, required: n }) => be({
   id: e,
   cache: "checkbox",
   class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
@@ -488,10 +488,10 @@ const Oa = i((e, t) => {
   required: n,
   checked: t,
   bind: s
-}), Wt = () => f({ class: "absolute text-xs pointer-events-none" }, [
-  M(
+}), Wt = () => h({ class: "absolute text-xs pointer-events-none" }, [
+  P(
     "checked",
-    (e) => e ? U({
+    (e) => e ? Y({
       class: "w-2 h-2 pointer-events-none",
       html: g.check
     }) : null
@@ -518,11 +518,11 @@ const Oa = i((e, t) => {
 }, [
   Vt({ bind: t, checked: s, id: e, required: n }),
   Wt()
-]), Gt = ({ id: e, label: t, clickHandler: s }) => Y({
+]), Gt = ({ id: e, label: t, clickHandler: s }) => V({
   class: "text-base cursor-pointer",
   htmlFor: e,
   click: s
-}, t), Kt = B(
+}, t), Kt = M(
   {
     /**
      * This will initialize the state of the checkbox.
@@ -631,25 +631,25 @@ const Oa = i((e, t) => {
   "pointer-events-none select-none"
 ].join(" ");
 let as = 0;
-const Se = (e) => e.id || e.name || `floating-${++as}`, $e = (e, t, s, n) => e ? Y(
+const $e = (e) => e.id || e.name || `floating-${++as}`, De = (e, t, s, n) => e ? V(
   { htmlFor: s, class: n },
-  t ? [f(e), f({ class: "text-destructive ml-0.5" }, "*")] : e
-) : null, os = () => U({
+  t ? [h(e), h({ class: "text-destructive ml-0.5" }, "*")] : e
+) : null, os = () => Y({
   class: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none w-4 h-4 text-foreground-secondary",
   html: g.chevron.single.down
-}), ne = i((e) => {
-  const t = Se(e);
+}), ae = i((e) => {
+  const t = $e(e);
   return l({ class: "relative" }, [
-    p({
+    y({
       ...e,
       id: t,
       placeholder: " ",
       class: `${Xt} ${e.class || ""}`.trim()
     }),
-    $e(e.label, e.required, t, ts)
+    De(e.label, e.required, t, ts)
   ]);
 }), La = i(
-  (e) => ne({
+  (e) => ae({
     ...e,
     type: "tel",
     name: e.name || "Phone",
@@ -658,44 +658,44 @@ const Se = (e) => e.id || e.name || `floating-${++as}`, $e = (e, t, s, n) => e ?
     keyup: Jt
   })
 ), Ra = i(
-  (e) => ne({
+  (e) => ae({
     ...e,
     type: "email",
     name: e.name || "Email",
     label: e.label || "Email"
   })
 ), Aa = i(
-  (e) => ne({
+  (e) => ae({
     ...e,
     type: "password",
     name: e.name || "Password",
     label: e.label || "Password"
   })
 ), ja = i(
-  (e) => ne({
+  (e) => ae({
     ...e,
     type: "number"
   })
 ), Ea = i(
-  (e) => ne({
+  (e) => ae({
     ...e,
     type: "url",
     name: e.name || "Url",
     label: e.label || "URL"
   })
 ), _a = i((e) => {
-  const t = Se(e);
+  const t = $e(e);
   return l({ class: "relative" }, [
-    Qe({
+    Je({
       ...e,
       id: t,
       placeholder: " ",
       class: `${Zt} ${e.class || ""}`.trim()
     }),
-    $e(e.label, e.required, t, ss)
+    De(e.label, e.required, t, ss)
   ]);
 }), Ha = i((e) => {
-  const t = Se(e), { options: s, onCreated: n, ...a } = e;
+  const t = $e(e), { options: s, onCreated: n, ...a } = e;
   return l({ class: "relative" }, [
     {
       tag: "select",
@@ -703,11 +703,11 @@ const Se = (e) => e.id || e.name || `floating-${++as}`, $e = (e, t, s, n) => e ?
       id: t,
       class: `[&>option]:text-foreground [&>option]:bg-background ${es} ${a.class || ""}`.trim(),
       onCreated(o) {
-        s && Ze.setupSelectOptions(o, s), typeof n == "function" && n(o);
+        s && et.setupSelectOptions(o, s), typeof n == "function" && n(o);
       }
     },
     os(),
-    $e(e.label, e.required, t, ns)
+    De(e.label, e.required, t, ns)
   ]);
 }), ls = (e) => {
   if (!e || e.length === 0) return "";
@@ -716,11 +716,11 @@ const Se = (e) => e.id || e.name || `floating-${++as}`, $e = (e, t, s, n) => e ?
 }, rs = (e) => {
   const t = e.target, s = ls(t.value);
   s && (t.value = s);
-}, L = i((e) => p({
+}, R = i((e) => y({
   ...e,
   // @ts-ignore
-  class: `${Ce} ${e.class || ""}`.trim()
-})), Ua = i((e) => L({
+  class: `${Se} ${e.class || ""}`.trim()
+})), Ua = i((e) => R({
   ...e,
   type: "tel",
   // @ts-ignore
@@ -731,7 +731,7 @@ const Se = (e) => e.id || e.name || `floating-${++as}`, $e = (e, t, s, n) => e ?
   // @ts-ignore
   pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
   keyup: rs
-})), Ya = i((e) => L({
+})), Ya = i((e) => R({
   ...e,
   type: "email",
   // @ts-ignore
@@ -739,77 +739,77 @@ const Se = (e) => e.id || e.name || `floating-${++as}`, $e = (e, t, s, n) => e ?
   // @ts-ignore
   label: e.label || "Email",
   placeholder: "Email address"
-})), Va = i((e) => Qe({
+})), Va = i((e) => Je({
   ...e,
   as: "textarea",
   // @ts-ignore
-  class: `flex w-full h-24 px-3 py-2 text-sm ${D} ${$} ${V} ${C} ${e.class || ""}`.trim()
+  class: `flex w-full h-24 px-3 py-2 text-sm ${D} ${$} ${W} ${C} ${e.class || ""}`.trim()
 })), Wa = (e = {}) => l({ class: "flex items-center gap-x-2" }, [
-  p({
+  y({
     ...e,
     type: "radio",
     class: "cursor-pointer appearance-none h-4 w-4 border rounded-full checked:border-primary checked:bg-primary focus:ring focus:ring-primary".trim()
   }),
-  e.label && Y({ forHTML: e.value, class: "cursor-pointer" }, e.label)
-]), qa = i((e) => p({
+  e.label && V({ forHTML: e.value, class: "cursor-pointer" }, e.label)
+]), qa = i((e) => y({
   ...e,
   type: "date",
   // @ts-ignore
-  class: `${D} ${$} ${V} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Ga = i((e) => p({
+  class: `${D} ${$} ${W} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), Ga = i((e) => y({
   ...e,
   type: "time",
   // @ts-ignore
-  class: `${D} ${$} ${V} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Ka = i((e) => p({
+  class: `${D} ${$} ${W} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), Ka = i((e) => y({
   ...e,
   type: "datetime-local",
   // @ts-ignore
-  class: `${D} ${$} ${V} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Qa = i((e) => p({
+  class: `${D} ${$} ${W} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), Qa = i((e) => y({
   ...e,
   type: "month",
   // @ts-ignore
-  class: `${D} ${$} ${V} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Ja = i((e) => p({
+  class: `${D} ${$} ${W} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), Ja = i((e) => y({
   ...e,
   type: "week",
   // @ts-ignore
-  class: `${D} ${$} ${V} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Xa = i((e) => L({
+  class: `${D} ${$} ${W} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), Xa = i((e) => R({
   ...e,
   type: "number"
-})), Za = i((e) => L({
+})), Za = i((e) => R({
   ...e,
   type: "password"
 }));
-i((e) => L({
+i((e) => R({
   ...e,
   type: "search"
 }));
-const eo = i((e) => L({
+const eo = i((e) => R({
   ...e,
   type: "url"
-})), to = i((e) => L({
+})), to = i((e) => R({
   ...e,
   type: "hidden"
-})), so = i((e) => p({
+})), so = i((e) => y({
   ...e,
   type: "color",
   // @ts-ignore
   class: `${D} text-foreground p-0 ${C} ${e.class || ""}`.trim()
 }));
-i((e) => me({
+i((e) => be({
   ...e,
   // @ts-ignore
   class: `flex h-4 w-4 text-foreground ${D} ${$} ${C} ${e.class || ""}`.trim()
 }));
-const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", no = i((e) => p({
+const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", no = i((e) => y({
   ...e,
   type: "file",
   // @ts-ignore
-  class: `${Ce} ${is} ${e.class || ""}`.trim()
-})), ao = F(
+  class: `${Se} ${is} ${e.class || ""}`.trim()
+})), ao = L(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -842,7 +842,7 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
       return l({ class: "relative w-full h-4 flex items-center" }, [
         // Track
         l({ class: "absolute h-2 w-full rounded-full bg-muted" }),
-        G(({ state: e }) => [
+        K(({ state: e }) => [
           // Filled Track
           l({
             class: "absolute h-2 bg-primary rounded-full",
@@ -859,7 +859,7 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
             style: ["left: [[filledPercentage]]%", e]
           }),
           // Hidden Range Input
-          p({
+          y({
             type: "range",
             min: ["[[min]]", e],
             max: ["[[max]]", e],
@@ -886,12 +886,12 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
   return {
     tag: "select",
     onCreated(a) {
-      t && Ze.setupSelectOptions(a, t), s && s(a);
+      t && et.setupSelectOptions(a, t), s && s(a);
     },
     ...n,
-    class: `[&>option]:text-foreground [&>option]:bg-background ${Ce} ${n.class || ""}`.trim()
+    class: `[&>option]:text-foreground [&>option]:bg-background ${Se} ${n.class || ""}`.trim()
   };
-}), cs = i(({ src: e, alt: t, class: s, checkPath: n = !0, loading: a = "lazy", decoding: o = "async", fetchPriority: r = "auto" }) => !e || (s = s || "", n && e.indexOf(".") === -1 && e.indexOf("[[") === -1) ? null : be({
+}), cs = i(({ src: e, alt: t, class: s, checkPath: n = !0, loading: a = "lazy", decoding: o = "async", fetchPriority: r = "auto" }) => !e || (s = s || "", n && e.indexOf(".") === -1 && e.indexOf("[[") === -1) ? null : xe({
   class: `absolute w-full h-full object-cover fadeIn ${s}`,
   src: e,
   alt: t,
@@ -903,7 +903,7 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
    * If there's an error loading the image, hide it.
    */
   error: (c) => c.target.style.visibility = "hidden"
-})), ds = (e) => !e || isNaN(e) ? null : e, Le = (e, t) => {
+})), ds = (e) => !e || isNaN(e) ? null : e, Re = (e, t) => {
   const s = e, n = 16, a = 2 * Math.PI * n, o = s / 100 * a, r = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
@@ -947,19 +947,19 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     html: r
   });
 }, lo = i((e) => {
-  const t = e.progress || 0, s = e.class || "", n = Le(t, s);
+  const t = e.progress || 0, s = e.class || "", n = Re(t, s);
   return l({
     class: "circle-graph-wrap",
     onSet: [
       // @ts-ignore
       e.prop,
-      (a) => (a = ds(a), a ? Le(a, s) : n)
+      (a) => (a = ds(a), a ? Re(a, s) : n)
     ]
   }, [n]);
-}), us = () => G(({ state: e }) => l({
+}), us = () => K(({ state: e }) => l({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: ["width: [[progress]]%;", e]
-})), ro = F(
+})), ro = L(
   {
     /**
      * This will render the progress bar component.
@@ -1026,10 +1026,10 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     s ? a : "",
     n ? o : "",
     t
-  ].filter(Boolean).join(" "), h = `height: env(safe-area-inset-bottom, 0px);${c ? ` ${c}` : ""}`;
+  ].filter(Boolean).join(" "), f = `height: env(safe-area-inset-bottom, 0px);${c ? ` ${c}` : ""}`;
   return l({
     class: u,
-    style: h,
+    style: f,
     "aria-hidden": "true"
   });
 }), co = i((e = {}) => {
@@ -1047,13 +1047,13 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     s ? a : "",
     n ? o : "",
     t
-  ].filter(Boolean).join(" "), h = `height: env(safe-area-inset-top, 0px);${c ? ` ${c}` : ""}`;
+  ].filter(Boolean).join(" "), f = `height: env(safe-area-inset-top, 0px);${c ? ` ${c}` : ""}`;
   return l({
     class: u,
-    style: h,
+    style: f,
     "aria-hidden": "true"
   });
-}), Re = {
+}), Ae = {
   top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
   "top-right": "bottom-full left-full transform -translate-x-1 mb-2",
   "top-left": "bottom-full right-full transform translate-x-1 mb-2",
@@ -1062,19 +1062,19 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
   "bottom-left": "top-full right-full transform translate-x-1 mt-2",
   left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
   right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
-}, hs = (e) => Re[String(e)] || Re.top, uo = i(({ position: e = "top", content: t }, s) => {
+}, hs = (e) => Ae[String(e)] || Ae.top, uo = i(({ position: e = "top", content: t }, s) => {
   const n = hs(e);
   return Array.isArray(s) === !1 && (s = [s]), l({ class: "relative group inline-block" }, [
     ...s,
     // Tooltip box
-    f({
+    h({
       class: `
 				absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
 				group-hover:opacity-100 transition-opacity duration-200 ${n} pointer-events-none
 			`
     }, t)
   ]);
-}), Ae = {
+}), je = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1101,9 +1101,9 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     iconColor: "text-muted-foreground"
   }
 }, fs = (e, t) => l({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
-  x({ size: "sm" }, e)
+  p({ size: "sm" }, e)
 ]), gs = (e) => xt({ class: "font-semibold" }, e), ms = (e) => k({ class: "text-sm text-muted-foreground" }, e), ho = i(({ title: e, description: t, icon: s, type: n = "default" }) => {
-  const { borderColor: a, bgColor: o, iconColor: r } = Ae[n] || Ae.default;
+  const { borderColor: a, bgColor: o, iconColor: r } = je[n] || je.default;
   return l({ class: `flex items-start p-4 border rounded-lg ${o} ${a}` }, [
     // Icon and content
     s && fs(s, r),
@@ -1115,17 +1115,17 @@ const is = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
 }), bs = (e, t) => {
   const s = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, n = t.getBoundingClientRect(), a = 10, o = globalThis.scrollX, r = globalThis.scrollY;
   let c = s.left + o, u = s.bottom + r;
-  const h = globalThis.innerHeight - s.bottom, y = s.top;
-  return c + n.width > globalThis.innerWidth && (c = globalThis.innerWidth - n.width - a), h < n.height && y > h ? u = s.top + r - n.height - a : h < n.height && (u = s.bottom + r - (n.height - h) - a), { x: c, y: u };
+  const f = globalThis.innerHeight - s.bottom, b = s.top;
+  return c + n.width > globalThis.innerWidth && (c = globalThis.innerWidth - n.width - a), f < n.height && b > f ? u = s.top + r - n.height - a : f < n.height && (u = s.bottom + r - (n.height - f) - a), { x: c, y: u };
 };
-class ae extends S {
+class oe extends S {
   /**
    * This will set up the data.
    *
    * @returns {object}
    */
   setData() {
-    const t = this.parent.data || new N();
+    const t = this.parent.data || new F();
     return t.set({
       position: { x: 0, y: 0 }
     }), t;
@@ -1247,9 +1247,9 @@ class ae extends S {
     this?.panel?.hidePopover();
   }
 }
-const xs = i((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), ps = i((e, t) => Y({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ys = i((e, t) => k({ ...e, class: "text-sm text-muted-foreground italic" }, t)), ws = i((e, t) => k({ ...e, class: "text-sm text-destructive" }, t)), fo = i((e, t = []) => _t({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+const xs = i((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), ps = i((e, t) => V({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ys = i((e, t) => k({ ...e, class: "text-sm text-muted-foreground italic" }, t)), ws = i((e, t) => k({ ...e, class: "text-sm text-destructive" }, t)), fo = i((e, t = []) => _t({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
   // @ts-ignore
-  e.title && Z({ class: "text-lg font-semibold py-4 px-6" }, e.title),
+  e.title && ee({ class: "text-lg font-semibold py-4 px-6" }, e.title),
   // @ts-ignore
   e.description && k({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
   ...t
@@ -1278,7 +1278,7 @@ const xs = i((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     ...e,
     class: "w-full"
   }, a);
-}), bo = F(
+}), bo = L(
   {
     /**
      * The initial state of the FormField.
@@ -1329,19 +1329,19 @@ const xs = i((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
   l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)
 )), po = i((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
   // @ts-ignore
-  e.title && Z({ class: "font-semibold" }, e.title),
+  e.title && ee({ class: "font-semibold" }, e.title),
   ...t
 ])), yo = (e, t) => l({ class: "flex justify-between" }, [
-  f({ class: "text-muted-foreground" }, e),
-  f(t)
+  h({ class: "text-muted-foreground" }, e),
+  h(t)
 ]), wo = (e, t) => l({ class: "flex" }, [
-  f({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
-  f(t)
-]), Ss = i(({ title: e, description: t, back: s, icon: n, options: a = [], titleCenter: o = !1 }) => ee({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10 min-w-0" }, [
+  h({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
+  h(t)
+]), Ss = i(({ title: e, description: t, back: s, icon: n, options: a = [], titleCenter: o = !1 }) => te({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10 min-w-0" }, [
   /**
    * Back Button (Mobile Only)
    */
-  s && b({
+  s && x({
     variant: "icon",
     icon: g.arrows.left,
     class: "mr-2 p-0 flex sm:hidden",
@@ -1351,11 +1351,11 @@ const xs = i((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
    * Icon Container
    */
   n && l({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [
-    x({ size: "md" }, n)
+    p({ size: "md" }, n)
   ]),
   l({ class: "flex flex-auto flex-row justify-between ml-2 gap-2 min-w-0" }, [
     l({ class: `flex flex-auto flex-col min-w-0 ${o ? "items-center" : ""}` }, [
-      Z({ class: "text-lg font-semibold m-0 truncate" }, e),
+      ee({ class: "text-lg font-semibold m-0 truncate" }, e),
       t && l({ class: "text-sm text-muted-foreground truncate" }, t)
     ]),
     l({ class: "flex flex-none items-center gap-2" }, a)
@@ -1379,10 +1379,10 @@ const xs = i((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
       Ss(e),
       l({ class: "modal-body flex grow flex-col py-0 px-6 z-0", cache: "modalBody" }, t),
       // @ts-ignore
-      !e.hideFooter && xe({ class: "modal-footer sticky bottom-0 bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
+      !e.hideFooter && pe({ class: "modal-footer sticky bottom-0 bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
     ])
   ]);
-}), je = {
+}), Ee = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -1408,9 +1408,9 @@ const xs = i((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, $s = (e) => ee({ class: "flex justify-center" }, [
-  pe({ class: "text-lg font-bold mb-0" }, e)
-]), Ds = i(({ href: e, class: t }, s) => Je({
+}, $s = (e) => te({ class: "flex justify-center" }, [
+  ye({ class: "text-lg font-bold mb-0" }, e)
+]), Ds = i(({ href: e, class: t }, s) => Xe({
   class: `bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
   href: e,
   animateIn: "pullRightIn",
@@ -1471,7 +1471,7 @@ class ko extends S {
    */
   getTypeStyles() {
     const t = this.type || "default";
-    return je[t] || je.default;
+    return Ee[t] || Ee.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -1481,8 +1481,8 @@ class ko extends S {
   getButtons() {
     return [
       l({ class: "flex flex-row mt-6 gap-2" }, [
-        this.secondary && b({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
-        this.primary && b({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
+        this.secondary && x({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
+        this.primary && x({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
       ])
     ];
   }
@@ -1496,17 +1496,17 @@ class ko extends S {
     return [
       l({ class: "flex items-start" }, [
         this.icon && l({ class: `mr-4 ${t}` }, [
-          x({ size: "md" }, this.icon)
+          p({ size: "md" }, this.icon)
         ]),
         l({ class: "flex flex-auto flex-col" }, [
           l({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
             this.title && $s(this.title)
           ]),
           k({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
-          (this.primary || this.secondary) && xe({ class: "margin-top-24 flex align-center" }, this.getButtons())
+          (this.primary || this.secondary) && pe({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
-      b({
+      x({
         class: "absolute top-[12px] right-[12px]",
         variant: "icon",
         icon: g.x,
@@ -1524,7 +1524,7 @@ class ko extends S {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v({
+const _e = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v({
   class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
@@ -1532,17 +1532,17 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
     a.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ts(e);
   }
 }, [
-  x({}, s),
-  f(t)
+  p({}, s),
+  h(t)
 ])), Ts = (e) => {
   const t = document.documentElement;
-  if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), Ee && !Ee("(prefers-color-scheme: " + e + ")").matches) {
+  if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), _e && !_e("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
     return;
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, Co = B(
+}, Co = M(
   {
     /**
      * This will render the component.
@@ -1569,7 +1569,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       };
     }
   }
-), So = F(
+), So = L(
   {
     /**
      * The initial state of the Toggle.
@@ -1603,7 +1603,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
           s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, t, this);
         }
       }, [
-        me({
+        be({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
           /**
@@ -1614,7 +1614,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
           bind: this.bind,
           required: this.required
         }),
-        f({
+        h({
           class: "absolute h-5 w-5 bg-background rounded-full shadow-md transform transition-transform",
           onState: ["active", { "translate-x-[22px]": !0, "translate-x-[2px]": !1 }]
         })
@@ -1625,9 +1625,9 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
   src: e,
   alt: t,
   class: "rounded-full"
-})), Ms = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), lt = (e) => !e || e.length < 2 ? e : Ms(e), Bs = (e) => f([e, (t, s) => {
+})), Ms = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), lt = (e) => !e || e.length < 2 ? e : Ms(e), Bs = (e) => h([e, (t, s) => {
   s.textContent = lt(t);
-}]), _e = {
+}]), He = {
   xs: "h-6 w-6",
   sm: "h-8 w-8",
   md: "h-12 w-12",
@@ -1637,7 +1637,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
   "3xl": "h-48 w-48",
   "4xl": "h-64 w-64",
   default: "h-12 w-12"
-}, He = {
+}, Ue = {
   xs: "text-[7px]",
   sm: "text-xs",
   md: "text-base",
@@ -1647,7 +1647,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
   "3xl": "text-4xl",
   "4xl": "text-5xl",
   default: "text-base"
-}, zs = (e) => _e[e] || _e.default, Os = (e) => He[e] || He.default, Ns = (e, t = null, s = "md") => {
+}, zs = (e) => He[e] || He.default, Os = (e) => Ue[e] || Ue.default, Ns = (e, t = null, s = "md") => {
   const n = lt(String(e)), a = Os(s);
   return l(
     {
@@ -1658,7 +1658,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
 		`
     },
     [
-      t ? Bs(t) : f({ class: "uppercase" }, n)
+      t ? Bs(t) : h({ class: "uppercase" }, n)
     ]
   );
 }, Fs = i(({ src: e, alt: t, fallbackText: s, watcherFallback: n, size: a }) => {
@@ -1672,7 +1672,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       Ns(s, n, a)
     ]
   );
-}), Ue = (e) => !e || e.includes("[[") || e.indexOf(".") === -1 && e.indexOf("blob:") === -1, $o = B(
+}), Ye = (e) => !e || e.includes("[[") || e.indexOf(".") === -1 && e.indexOf("blob:") === -1, $o = M(
   {
     /**
      * Get the initial state for the component.
@@ -1682,7 +1682,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
     state() {
       return {
         // @ts-ignore
-        loaded: !!this.src && !Ue(this.src)
+        loaded: !!this.src && !Ye(this.src)
       };
     },
     /**
@@ -1692,7 +1692,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", H.trigger("click", e));
+      e && (e.value = "", U.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -1711,7 +1711,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
     render() {
       const e = "image-upload", t = this.onChange || null;
       return l({ class: "flex-none items-center" }, [
-        p({
+        y({
           id: e,
           cache: "input",
           type: "file",
@@ -1728,13 +1728,13 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          M("loaded", (s) => s === !1 || Ue(this.src) ? Y({
+          P("loaded", (s) => s === !1 || Ye(this.src) ? V({
             htmlFor: e,
             class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
           }, [
             ge(g.upload),
             l("Upload Image")
-          ]) : be({
+          ]) : xe({
             // @ts-ignore
             src: this.src,
             class: "absolute inset-0 w-full h-full object-cover rounded-full"
@@ -1743,7 +1743,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       ]);
     }
   }
-), Do = B(
+), Do = M(
   {
     /**
      * Get the initial state for the component.
@@ -1763,7 +1763,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", H.trigger("click", e));
+      e && (e.value = "", U.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -1782,7 +1782,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
     render() {
       const e = "logo-upload", t = this.onChange || null;
       return l({ class: "flex-none items-center" }, [
-        p({
+        y({
           id: e,
           cache: "input",
           type: "file",
@@ -1799,17 +1799,17 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          M(
+          P(
             "loaded",
-            (s) => s ? be({
+            (s) => s ? xe({
               // @ts-ignore
               src: this.src,
               class: "absolute inset-0 w-full h-full object-cover rounded-full"
-            }) : Y({
+            }) : V({
               htmlFor: e,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
-              x({}, g.upload),
+              p({}, g.upload),
               l("Upload logo")
             ])
           )
@@ -1825,22 +1825,22 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       this.input = null;
     }
   }
-), Ls = (e, t) => Je(
+), Ls = (e, t) => Xe(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [f(t)]
-), Rs = () => x({
+  [h(t)]
+), Rs = () => p({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
 }, g.chevron.single.right), As = (e) => l({ class: "flex items-center" }, [
-  e.href ? Ls(e.href, e.label) : f(e.label),
+  e.href ? Ls(e.href, e.label) : h(e.label),
   e.separator && Rs()
-]), Io = B(
+]), Io = M(
   {
     /**
      * Set initial data
@@ -1848,7 +1848,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
      * @returns {Data}
      */
     setData() {
-      return new N({
+      return new F({
         // @ts-ignore
         items: this.items || []
       });
@@ -1860,7 +1860,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
      */
     render() {
       const e = this.data.items.length - 1;
-      return ye(
+      return we(
         {
           "aria-label": "Breadcrumb",
           class: "flex items-center gap-x-1 text-sm"
@@ -1879,7 +1879,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       );
     }
   }
-), Ye = {
+), Ve = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -1888,8 +1888,8 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, js = (e) => Ye[e] || Ye.default, Es = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
-  f({
+}, js = (e) => Ve[e] || Ve.default, Es = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+  h({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
       "bg-primary": e,
@@ -1902,7 +1902,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
 ]), _s = (e, t) => Array.from({ length: e }, (s, n) => Es({
   index: n,
   size: t
-})), To = B(
+})), To = M(
   {
     /**
      * Defines component data (props).
@@ -1910,7 +1910,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
      * @returns {Data}
      */
     setData() {
-      return new N({
+      return new F({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -1940,22 +1940,22 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
     click: e
   },
   [
-    f({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
-    x({ size: "sm" }, g.chevron.upDown)
+    h({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    p({ size: "sm" }, g.chevron.upDown)
   ]
-), Us = (e, t, s) => we({
+), Us = (e, t, s) => ve({
   class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
   click: () => t(e),
   onState: [s, "selectedValue", { "bg-secondary": e.value }]
 }, [
-  e.icon && f({ class: "mr-2 flex items-baseline" }, [x({ size: "xs" }, e.icon)]),
-  f({ class: "text-base font-normal" }, e.label)
+  e.icon && h({ class: "mr-2 flex items-baseline" }, [p({ size: "xs" }, e.icon)]),
+  h({ class: "text-base font-normal" }, e.label)
 ]), Ys = (e, t) => l({ class: "w-full border rounded-md" }, [
-  te({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Us(s, e, t)] })
+  se({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Us(s, e, t)] })
 ]), Vs = ({ onSelect: e, state: t }) => l({ class: "flex flex-auto flex-col" }, [
-  M(
+  P(
     "open",
-    (s, n, a) => s ? new ae({
+    (s, n, a) => s ? new oe({
       cache: "dropdown",
       parent: a,
       button: a.button
@@ -1963,7 +1963,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       Ys(e, t)
     ]) : null
   )
-]), Po = B(
+]), Po = M(
   {
     /**
      * This will set up the data.
@@ -1971,7 +1971,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
      * @returns {Data}
      */
     setData() {
-      return new N({
+      return new F({
         // @ts-ignore
         items: this.items || []
       });
@@ -2053,7 +2053,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
         }),
         // Hidden required input for form validation
         // @ts-ignore
-        this.required && p({
+        this.required && y({
           class: "opacity-0 absolute top-0 left-0 z-1",
           type: "text",
           // @ts-ignore
@@ -2065,7 +2065,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       ]);
     }
   }
-), rt = ({ icon: e, click: t, ariaLabel: s }) => b({
+), rt = ({ icon: e, click: t, ariaLabel: s }) => x({
   variant: "icon",
   class: "flex flex-none",
   click: t,
@@ -2079,7 +2079,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
   icon: g.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), Gs = ({ bind: e, min: t, max: s, readonly: n = !1 }) => G(({ state: a }) => p({
+}), Gs = ({ bind: e, min: t, max: s, readonly: n = !1 }) => K(({ state: a }) => y({
   value: ["[[count]]", a],
   bind: e,
   blur: (o, { state: r }) => {
@@ -2092,7 +2092,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), Mo = F(
+})), Mo = L(
   {
     /**
      * Initial state for the counter component.
@@ -2128,8 +2128,8 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
   }
 ), Ks = ({ currentMonth: e, currentYear: t, onSelect: s }) => l(
   { class: "grid grid-cols-3 gap-2" },
-  se.monthNames.map(
-    (n, a) => b(
+  ne.monthNames.map(
+    (n, a) => x(
       {
         click: (o) => {
           o.preventDefault(), o.stopPropagation(), s(a);
@@ -2140,7 +2140,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       n.substring(0, 3)
     )
   )
-), O = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), Qs = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), _ = (e, t, s) => `${e}-${O(t + 1)}-${O(s)}`, Js = (e) => e ? "bg-accent text-primary" : "", Xs = (e) => e ? "text-muted-foreground opacity-50" : "", Zs = (e, t) => e === t, en = (e, t) => Zs(e, t) ? "bg-primary text-primary-foreground" : "", tn = (e, t, s, n) => {
+), N = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), Qs = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), H = (e, t, s) => `${e}-${N(t + 1)}-${N(s)}`, Js = (e) => e ? "bg-accent text-primary" : "", Xs = (e) => e ? "text-muted-foreground opacity-50" : "", Zs = (e, t) => e === t, en = (e, t) => Zs(e, t) ? "bg-primary text-primary-foreground" : "", tn = (e, t, s, n) => {
   const a = en(t, n);
   return a || (e ? Js(e) : s ? Xs(s) : "text-foreground");
 }, de = (e) => {
@@ -2169,28 +2169,28 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
     t.toString()
   );
 }, ue = (e, t, s, n) => e === n.date && t === n.month && s === n.year, sn = (e, t, s, n = !1) => {
-  const { year: a, month: o } = e, r = _(a, o, e.date), c = new Date(a, o, 1).getDay(), u = new Date(a, o + 1, 0).getDate(), h = new Date(a, o, 0).getDate(), y = [], R = o === 0 ? 11 : o - 1, A = o === 0 ? a - 1 : a;
+  const { year: a, month: o } = e, r = H(a, o, e.date), c = new Date(a, o, 1).getDay(), u = new Date(a, o + 1, 0).getDate(), f = new Date(a, o, 0).getDate(), b = [], A = o === 0 ? 11 : o - 1, B = o === 0 ? a - 1 : a;
   for (let d = c - 1; d >= 0; d--) {
-    const w = h - d, I = ue(w, R, A, t), T = new Date(A, R, w) < new Date(t.year, t.month, t.date), j = n && T;
-    y.push(
+    const w = f - d, I = ue(w, A, B, t), T = new Date(B, A, w) < new Date(t.year, t.month, t.date), E = n && T;
+    b.push(
       de({
         day: w,
         currentDate: r,
-        date: _(A, R, w),
+        date: H(B, A, w),
         isToday: I,
         isOutsideMonth: !0,
         select: s,
-        disabled: j
+        disabled: E
       })
     );
   }
   for (let d = 1; d <= u; d++) {
     const w = ue(d, o, a, t), I = new Date(a, o, d) < new Date(t.year, t.month, t.date), T = n && I;
-    y.push(
+    b.push(
       de({
         day: d,
         currentDate: r,
-        date: _(a, o, d),
+        date: H(a, o, d),
         isToday: w,
         isOutsideMonth: !1,
         select: s,
@@ -2198,14 +2198,14 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       })
     );
   }
-  const P = o === 11 ? 0 : o + 1, oe = o === 11 ? a + 1 : a, m = (7 - y.length % 7) % 7;
+  const j = o === 11 ? 0 : o + 1, z = o === 11 ? a + 1 : a, m = (7 - b.length % 7) % 7;
   for (let d = 1; d <= m; d++) {
-    const w = ue(d, P, oe, t), I = new Date(oe, P, d) < new Date(t.year, t.month, t.date), T = n && I;
-    y.push(
+    const w = ue(d, j, z, t), I = new Date(z, j, d) < new Date(t.year, t.month, t.date), T = n && I;
+    b.push(
       de({
         day: d,
         currentDate: r,
-        date: _(oe, P, d),
+        date: H(z, j, d),
         isToday: w,
         isOutsideMonth: !0,
         select: s,
@@ -2213,8 +2213,8 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
       })
     );
   }
-  return y;
-}, Ve = ({ label: e, click: t }) => b(
+  return b;
+}, We = ({ label: e, click: t }) => x(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -2228,10 +2228,10 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
     icon: e === "Previous" ? g.chevron.single.left : g.chevron.single.right
   }
 ), nn = ({ onMonthClick: e, onYearClick: t, next: s, previous: n }) => l({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
-  b({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
-  b({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
-  Ve({ label: "Previous", click: n }),
-  Ve({ label: "Next", click: s })
+  x({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+  x({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
+  We({ label: "Previous", click: n }),
+  We({ label: "Next", click: s })
 ]), an = (e) => l(
   { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
   e
@@ -2265,7 +2265,7 @@ const Ee = globalThis.matchMedia, ce = i(({ value: e, label: t, icon: s }) => v(
   return l(
     { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
     a.map(
-      (o) => b(
+      (o) => x(
         {
           click: (r) => {
             r.preventDefault(), r.stopPropagation(), s(o);
@@ -2304,7 +2304,7 @@ class cn extends S {
    */
   setData() {
     const t = /* @__PURE__ */ new Date(), s = this.getSelectedDate(t), n = s.getMonth();
-    return new N({
+    return new F({
       monthName: this.getMonthName(n),
       currentDate: `${s.getFullYear()}-${n + 1}-${s.getDate()}`,
       current: {
@@ -2337,7 +2337,7 @@ class cn extends S {
    * @returns {string}
    */
   getMonthName(t) {
-    return se.monthNames[t];
+    return ne.monthNames[t];
   }
   /**
    * This will go to the previous month.
@@ -2369,7 +2369,7 @@ class cn extends S {
    */
   setCurrentDate(t, s, n = null) {
     const a = this.data;
-    a.current.month = t, a.current.year = s, typeof n == "number" && (a.current.date = O(n)), a.currentDate = `${s}-${O(t + 1)}-${a.current.date}`, a.monthName = this.getMonthName(t);
+    a.current.month = t, a.current.year = s, typeof n == "number" && (a.current.date = N(n)), a.currentDate = `${s}-${N(t + 1)}-${a.current.date}`, a.monthName = this.getMonthName(t);
   }
   /**
    * This will select a date.
@@ -2388,7 +2388,7 @@ class cn extends S {
    */
   render() {
     return l({ class: "calendar-container p-3 rounded-md border min-w-80" }, [
-      M("view", (t) => {
+      P("view", (t) => {
         switch (t) {
           case "months":
             return Ks(
@@ -2444,18 +2444,18 @@ const dn = (e) => {
     return null;
   const t = parseInt(e.substring(0, 2), 10), s = parseInt(e.substring(2, 4), 10), n = parseInt(e.substring(4, 8), 10);
   return t >= 1 && t <= 12 && s >= 1 && s <= 31 && n >= 1900 ? `${n}-${t.toString().padStart(2, "0")}-${s.toString().padStart(2, "0")}` : null;
-}, hn = ({ bind: e, required: t }) => p({
+}, hn = ({ bind: e, required: t }) => y({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), fn = ({ placeholder: e, handleInputChange: t, handleInputFocus: s }) => p({
+}), fn = ({ placeholder: e, handleInputChange: t, handleInputFocus: s }) => y({
   cache: "dateInput",
   class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
   placeholder: e || "mm/dd/yyyy",
   input: t,
   focus: s,
-  onState: ["selectedDate", (n) => n ? se.format("standard", n) : ""]
+  onState: ["selectedDate", (n) => n ? ne.format("standard", n) : ""]
 }), gn = ({ bind: e, required: t, toggleOpen: s, handleInputChange: n, handleInputFocus: a, placeholder: o }) => l(
   {
     class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
@@ -2469,12 +2469,12 @@ const dn = (e) => {
         click: s
       },
       [
-        U({ html: g.calendar.days })
+        Y({ html: g.calendar.days })
       ]
     )
   ]
-), mn = ({ handleDateSelect: e, blockPriorDates: t }) => ve(
-  (s, n, a) => new ae({
+), mn = ({ handleDateSelect: e, blockPriorDates: t }) => ke(
+  (s, n, a) => new oe({
     cache: "dropdown",
     parent: a,
     button: a.panel,
@@ -2486,7 +2486,7 @@ const dn = (e) => {
       blockPriorDates: t
     })
   ])
-), Bo = F(
+), Bo = L(
   {
     /**
      * The initial state of the DatePicker.
@@ -2517,7 +2517,7 @@ const dn = (e) => {
       const s = e.target.value.replace(/\D/g, "");
       e.target.value = dn(s);
       const n = un(s);
-      n && (this.state.selectedDate = n, this.input.value = n, H.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n));
+      n && (this.state.selectedDate = n, this.input.value = n, U.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n));
     },
     /**
      * Handles input focus - select all text for easy editing.
@@ -2533,7 +2533,7 @@ const dn = (e) => {
      * @param {string} date
      */
     handleDateSelect(e) {
-      this.state.selectedDate = e, this.state.open = !1, this.input.value = e, H.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(e);
+      this.state.selectedDate = e, this.state.open = !1, this.input.value = e, U.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(e);
     },
     /**
      * Toggles the calendar popover.
@@ -2569,7 +2569,7 @@ const dn = (e) => {
       );
     }
   }
-), We = ({ label: e, click: t }) => b(
+), qe = ({ label: e, click: t }) => x(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -2583,66 +2583,66 @@ const dn = (e) => {
     icon: e === "Previous" ? g.chevron.single.left : g.chevron.single.right
   }
 ), bn = ({ onMonthClick: e, onYearClick: t, next: s, previous: n }) => l({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
-  b({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
-  b({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
-  We({ label: "Previous", click: n }),
-  We({ label: "Next", click: s })
+  x({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+  x({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
+  qe({ label: "Previous", click: n }),
+  qe({ label: "Next", click: s })
 ]), xn = (e) => l({ class: "h-9 flex items-center justify-center font-medium" }, e), pn = () => l(
   { class: "grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground mb-2" },
   ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(xn)
 ), yn = ({ day: e, iso: t, disabled: s, isStart: n, isEnd: a, isBetween: o, isOtherMonth: r, click: c }) => {
-  let u = "ghost", h = "";
-  return n || a ? (u = "default", h = "bg-primary text-primary-foreground hover:bg-primary/90") : o && (h = "bg-accent text-accent-foreground hover:bg-accent/80"), s && (h += " opacity-50 cursor-not-allowed"), r && (h += " text-muted-foreground opacity-50"), b(
+  let u = "ghost", f = "";
+  return n || a ? (u = "default", f = "bg-primary text-primary-foreground hover:bg-primary/90") : o && (f = "bg-accent text-accent-foreground hover:bg-accent/80"), s && (f += " opacity-50 cursor-not-allowed"), r && (f += " text-muted-foreground opacity-50"), x(
     {
-      class: `flex items-center justify-center p-0 text-sm font-medium rounded-md transition-colors ${h}`,
+      class: `flex items-center justify-center p-0 text-sm font-medium rounded-md transition-colors ${f}`,
       variant: u,
       disabled: s,
-      click: (y) => {
-        y.preventDefault(), y.stopPropagation(), s || c();
+      click: (b) => {
+        b.preventDefault(), b.stopPropagation(), s || c();
       }
     },
     e.toString()
   );
 }, wn = ({ today: e, current: t, blockPriorDates: s, onDateClick: n }) => {
-  const { start: a, end: o } = t, r = new Date(t.year, t.month, 1).getDay(), c = new Date(t.year, t.month + 1, 0).getDate(), u = [], h = t.month === 0 ? 11 : t.month - 1, y = t.month === 0 ? t.year - 1 : t.year, R = new Date(y, h + 1, 0).getDate(), A = t.month === 11 ? 0 : t.month + 1, P = t.month === 11 ? t.year + 1 : t.year;
+  const { start: a, end: o } = t, r = new Date(t.year, t.month, 1).getDay(), c = new Date(t.year, t.month + 1, 0).getDate(), u = [], f = t.month === 0 ? 11 : t.month - 1, b = t.month === 0 ? t.year - 1 : t.year, A = new Date(b, f + 1, 0).getDate(), B = t.month === 11 ? 0 : t.month + 1, j = t.month === 11 ? t.year + 1 : t.year;
   for (let m = r - 1; m >= 0; m--) {
-    const d = R - m, w = _(y, h, d), I = new Date(y, h, d), T = new Date(e.year, e.month, e.date), j = I < T, K = s && j, Q = a === w, J = o === w, gt = a && o && w > a && w < o;
+    const d = A - m, w = H(b, f, d), I = new Date(b, f, d), T = new Date(e.year, e.month, e.date), E = I < T, Q = s && E, J = a === w, X = o === w, gt = a && o && w > a && w < o;
     u.push({
       day: d,
       iso: w,
-      disabled: K,
-      isStart: Q,
-      isEnd: J,
+      disabled: Q,
+      isStart: J,
+      isEnd: X,
       isBetween: gt,
       isOtherMonth: !0,
       click: () => n(w)
     });
   }
   for (let m = 1; m <= c; m++) {
-    const d = _(t.year, t.month, m), w = new Date(t.year, t.month, m), I = new Date(e.year, e.month, e.date), T = w < I, j = s && T, K = a === d, Q = o === d, J = a && o && d > a && d < o;
+    const d = H(t.year, t.month, m), w = new Date(t.year, t.month, m), I = new Date(e.year, e.month, e.date), T = w < I, E = s && T, Q = a === d, J = o === d, X = a && o && d > a && d < o;
     u.push({
       day: m,
       iso: d,
-      disabled: j,
-      isStart: K,
-      isEnd: Q,
-      isBetween: J,
+      disabled: E,
+      isStart: Q,
+      isEnd: J,
+      isBetween: X,
       isOtherMonth: !1,
       click: () => {
         n(d);
       }
     });
   }
-  const Ie = (7 - u.length % 7) % 7;
-  for (let m = 1; m <= Ie; m++) {
-    const d = _(P, A, m), w = new Date(P, A, m), I = new Date(e.year, e.month, e.date), T = w < I, j = s && T, K = a === d, Q = o === d, J = a && o && d > a && d < o;
+  const Te = (7 - u.length % 7) % 7;
+  for (let m = 1; m <= Te; m++) {
+    const d = H(j, B, m), w = new Date(j, B, m), I = new Date(e.year, e.month, e.date), T = w < I, E = s && T, Q = a === d, J = o === d, X = a && o && d > a && d < o;
     u.push({
       day: m,
       iso: d,
-      disabled: j,
-      isStart: K,
-      isEnd: Q,
-      isBetween: J,
+      disabled: E,
+      isStart: Q,
+      isEnd: J,
+      isBetween: X,
       isOtherMonth: !0,
       click: () => n(d)
     });
@@ -2694,8 +2694,8 @@ const dn = (e) => {
   })
 ])), kn = ({ currentMonth: e, currentYear: t, onSelect: s }) => l(
   { class: "grid grid-cols-3 gap-2" },
-  se.monthNames.map(
-    (n, a) => b(
+  ne.monthNames.map(
+    (n, a) => x(
       {
         click: (o) => {
           o.preventDefault(), o.stopPropagation(), s(a);
@@ -2707,21 +2707,21 @@ const dn = (e) => {
     )
   )
 ), Cn = ({ start: e, end: t, selecting: s, onSelectStart: n, onSelectEnd: a }) => l({ class: "flex gap-x-2 mb-4" }, [
-  X("selecting", (o) => b({
+  Z("selecting", (o) => x({
     click: n,
     variant: o === "start" ? "primary" : "outline",
     class: "flex-1"
   }, [
-    l({ class: "font-medium" }, qe("current.start", "Start Date"))
+    l({ class: "font-medium" }, Ge("current.start", "Start Date"))
   ])),
-  X("selecting", (o) => b({
+  Z("selecting", (o) => x({
     click: a,
     variant: o === "end" ? "primary" : "outline",
     class: "flex-1"
   }, [
-    l({ class: "font-medium" }, qe("current.end", "End Date"))
+    l({ class: "font-medium" }, Ge("current.end", "End Date"))
   ]))
-]), qe = (e, t) => [`[[${e}]]`, (s) => s == null ? t : Sn(s)], Sn = (e) => {
+]), Ge = (e, t) => [`[[${e}]]`, (s) => s == null ? t : Sn(s)], Sn = (e) => {
   const t = /* @__PURE__ */ new Date(e + "T00:00:00"), s = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], n = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   return `${s[t.getDay()]}, ${t.getDate()} ${n[t.getMonth()]}`;
 }, $n = ({ currentYear: e, onSelect: t }) => {
@@ -2729,7 +2729,7 @@ const dn = (e) => {
   return l(
     { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
     n.map(
-      (a) => b(
+      (a) => x(
         {
           click: (o) => {
             o.preventDefault(), o.stopPropagation(), t(a);
@@ -2758,14 +2758,14 @@ class Dn extends S {
    */
   setData() {
     const t = /* @__PURE__ */ new Date(), s = this.startDate ? /* @__PURE__ */ new Date(this.startDate + "T00:00:00") : t, n = s.getMonth(), a = s.getFullYear();
-    return new N({
+    return new F({
       today: {
         date: t.getDate(),
         month: t.getMonth(),
         year: t.getFullYear()
       },
       monthName: this.getMonthName(n),
-      currentData: `${s.getFullYear()}-${O(s.getMonth() + 1)}-${O(s.getDate())}`,
+      currentData: `${s.getFullYear()}-${N(s.getMonth() + 1)}-${N(s.getDate())}`,
       current: {
         date: t.getDate(),
         month: n,
@@ -2783,7 +2783,7 @@ class Dn extends S {
    * @returns {string}
    */
   getMonthName(t) {
-    return se.monthNames[t];
+    return ne.monthNames[t];
   }
   /**
    * Initialize component state.
@@ -2829,7 +2829,7 @@ class Dn extends S {
    */
   setCurrent({ month: t, year: s, date: n = null }) {
     const a = this.data.current;
-    a.month = (t + 12) % 12, a.year = s + (t < 0 ? -1 : t > 11 ? 1 : 0), n !== null && (a.date = n), this.data.monthName = this.getMonthName(a.month), this.data.currentDate = `${s}-${O(t + 1)}-${O(a.date)}`;
+    a.month = (t + 12) % 12, a.year = s + (t < 0 ? -1 : t > 11 ? 1 : 0), n !== null && (a.date = n), this.data.monthName = this.getMonthName(a.month), this.data.currentDate = `${s}-${N(t + 1)}-${N(a.date)}`;
   }
   /**
    * Render the range calendar.
@@ -2850,7 +2850,7 @@ class Dn extends S {
           r.preventDefault(), r.stopPropagation(), this.data.selecting = "end";
         }
       }),
-      M("view", (r) => {
+      P("view", (r) => {
         switch (r) {
           case "months":
             return kn(
@@ -2900,7 +2900,7 @@ class Dn extends S {
     ]);
   }
 }
-const In = ({ bind: e, required: t }) => p({
+const In = ({ bind: e, required: t }) => y({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
@@ -2910,13 +2910,13 @@ const In = ({ bind: e, required: t }) => p({
   click: s
 }, [
   In({ bind: e, required: t }),
-  G(({ state: n }) => [
-    f(W.date(["[[start]]", n], "Start Date")),
-    f(" - "),
-    f(W.date(["[[end]]", n], "End Date"))
+  K(({ state: n }) => [
+    h(q.date(["[[start]]", n], "Start Date")),
+    h(" - "),
+    h(q.date(["[[end]]", n], "End Date"))
   ]),
-  U({ html: g.calendar.days })
-]), Pn = ({ handleDateSelect: e, blockPriorDates: t }) => ve((s, n, a) => new ae({
+  Y({ html: g.calendar.days })
+]), Pn = ({ handleDateSelect: e, blockPriorDates: t }) => ke((s, n, a) => new oe({
   cache: "dropdown",
   parent: a,
   button: a.panel,
@@ -2928,7 +2928,7 @@ const In = ({ bind: e, required: t }) => p({
     onRangeSelect: e,
     blockPriorDates: t
   })
-])), zo = F(
+])), zo = L(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -2961,7 +2961,7 @@ const In = ({ bind: e, required: t }) => p({
      */
     render() {
       const e = (s, { state: n }) => n.toggle("open"), t = (s, n) => {
-        this.state.start = s, this.state.end = n, this.state.open = !1, this.input.value = `${s}-${n}`, H.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: n }, this.parent);
+        this.state.start = s, this.state.end = n, this.state.open = !1, this.input.value = `${s}-${n}`, U.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: n }, this.parent);
       };
       return l({ class: "relative w-full max-w-[320px]" }, [
         Tn({
@@ -2996,7 +2996,7 @@ function Bn(e) {
   };
 }
 function zn({ bind: e, required: t }) {
-  return p({
+  return y({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
     bind: e,
@@ -3004,7 +3004,7 @@ function zn({ bind: e, required: t }) {
   });
 }
 function On({ placeholder: e, handleInputChange: t, handleInputFocus: s }) {
-  return p({
+  return y({
     cache: "timeInput",
     class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
     placeholder: e || "hh:mm AM/PM",
@@ -3027,7 +3027,7 @@ function Nn({ bind: e, required: t, toggleOpen: s, handleInputChange: n, handleI
           click: s
         },
         [
-          U({ html: g.clock })
+          Y({ html: g.clock })
         ]
       )
     ]
@@ -3048,8 +3048,8 @@ function he({ items: e, handleTimeSelect: t, state: s, stateValue: n, pad: a = !
   );
 }
 function Fn({ handleTimeSelect: e }) {
-  return ve(
-    (t, s, n) => new ae(
+  return ke(
+    (t, s, n) => new oe(
       {
         cache: "dropdown",
         parent: n,
@@ -3094,7 +3094,7 @@ function Fn({ handleTimeSelect: e }) {
     )
   );
 }
-function Ge(e) {
+function Ke(e) {
   if (!e)
     return { hour: null, minute: null, meridian: null };
   const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
@@ -3107,7 +3107,7 @@ function Ge(e) {
     meridian: o
   });
 }
-const Oo = F(
+const Oo = L(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -3115,7 +3115,7 @@ const Oo = F(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: n } = Ge(e);
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: n } = Ke(e);
       return {
         selectedTime: e,
         open: !1,
@@ -3131,7 +3131,7 @@ const Oo = F(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: s } = Ge(this.input.value);
+        const { hour: e, minute: t, meridian: s } = Ke(this.input.value);
         this.state.set({
           hour: e,
           minute: t,
@@ -3162,7 +3162,7 @@ const Oo = F(
         minute: n.minute,
         meridian: n.meridian,
         selectedTime: n.formattedTime
-      }), this.input.value = n.formattedTime, H.trigger("change", this.input), typeof this.change == "function" && this.change(n.formattedTime)), e.target.value = s;
+      }), this.input.value = n.formattedTime, U.trigger("change", this.input), typeof this.change == "function" && this.change(n.formattedTime)), e.target.value = s;
     },
     /**
      * Handles input focus - select all text for easy editing.
@@ -3180,7 +3180,7 @@ const Oo = F(
     handleTimeSelect({ hour: e, minute: t, meridian: s }) {
       if (e && (this.state.hour = e), t && (this.state.minute = t), s && (this.state.meridian = s), this.state.hour && this.state.minute && this.state.meridian) {
         const n = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-        this.state.selectedTime = n, this.state.open = !1, this.input.value = n, H.trigger("change", this.input), typeof this.change == "function" && this.change(n);
+        this.state.selectedTime = n, this.state.open = !1, this.input.value = n, U.trigger("change", this.input), typeof this.change == "function" && this.change(n);
       }
     },
     /**
@@ -3208,9 +3208,9 @@ const Oo = F(
     }
   }
 ), Ln = (e, t) => l({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
-  x({ size: "lg" }, e)
-]), Rn = ({ title: e }) => ee({ class: "flex flex-auto items-center" }, [
-  Z({ class: "text-lg font-semibold" }, e)
+  p({ size: "lg" }, e)
+]), Rn = ({ title: e }) => te({ class: "flex flex-auto items-center" }, [
+  ee({ class: "text-lg font-semibold" }, e)
 ]), No = i((e, t) => yt(
   {
     class: `fixed pullUpIn z-30 w-[98%] border md:w-full max-w-lg bg-popover text-foreground shadow-lg duration-200
@@ -3233,7 +3233,7 @@ const Oo = F(
           l({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
         // @ts-ignore
-        e.buttons && xe({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
+        e.buttons && pe({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
       ])
     ])
   ]
@@ -3244,12 +3244,12 @@ const Oo = F(
         // @ts-ignore
         e.icon && l({ class: "w-16 h-16 mb-2 text-primary" }, [
           // @ts-ignore
-          x({ size: "lg" }, e.icon)
+          p({ size: "lg" }, e.icon)
         ])
       ]),
-      ee({ class: "py-4 text-center" }, [
+      te({ class: "py-4 text-center" }, [
         // @ts-ignore
-        Z({ class: "text-xl font-bold" }, e.title),
+        ee({ class: "text-xl font-bold" }, e.title),
         // @ts-ignore
         k({ class: "pb-8 text-muted-foreground" }, e.description || ""),
         ...t
@@ -3271,20 +3271,20 @@ i(({ value: e, label: t }) => v({
 const An = (e, t) => {
   const s = e.toggleAllSelectedRows();
   t.state.checked = !s;
-}, jn = (e) => Xe({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
-  G((t) => new Kt({ class: "mr-2", onChange: (s, n) => An(t, n) }))
+}, jn = (e) => Ze({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
+  K((t) => new Kt({ class: "mr-2", onChange: (s, n) => An(t, n) }))
 ]), En = ({ align: e, sortable: t, key: s, label: n, sort: a, class: o }) => {
   const r = e || "justify-start";
-  return Xe({
+  return Ze({
     class: `cursor-pointer py-3 px-4 text-base ${o || ""}`,
     click: t && (() => a(s))
   }, [
     l({ class: `flex flex-auto w-full items-center ${r}` }, [
-      f(n),
-      t && U({ class: "ml-2", html: g.arrows.upDown })
+      h(n),
+      t && Y({ class: "ml-2", html: g.arrows.upDown })
     ])
   ]);
-}, De = (e) => wt([
+}, Ie = (e) => wt([
   vt({
     class: "text-muted-foreground border-b",
     map: [
@@ -3316,7 +3316,7 @@ class it extends S {
    */
   setData() {
     let t = this.rows && this.rows.length > 0;
-    return (this.loadMoreItems || this.tableData) && !t && (t = null), new N({
+    return (this.loadMoreItems || this.tableData) && !t && (t = null), new F({
       selectedRows: [],
       // @ts-ignore
       hasItems: t,
@@ -3387,11 +3387,11 @@ class it extends S {
   render() {
     const t = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
     return l({ class: "w-full flex flex-auto flex-col" }, [
-      X("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
+      Z("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
       l({ class: `w-full rounded-md ${t} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        ke({ class: "w-full" }, [
+        Ce({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && De({ headers: this.headers, sort: (n) => this.sortRows(n) }),
+          this.headers && Ie({ headers: this.headers, sort: (n) => this.sortRows(n) }),
           // @ts-ignore
           this.customHeader ?? null,
           _n({
@@ -3496,11 +3496,11 @@ class Un extends it {
   render() {
     const t = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
     return l({ class: "w-full flex flex-auto flex-col" }, [
-      X("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
+      Z("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
       l({ class: `w-full rounded-md ${t} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        ke({ class: "w-full" }, [
+        Ce({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && De({ headers: this.headers, sort: (n) => this.sortRows(n) }),
+          this.headers && Ie({ headers: this.headers, sort: (n) => this.sortRows(n) }),
           // @ts-ignore
           this.customHeader ?? null,
           Hn({
@@ -3598,11 +3598,11 @@ class Vn extends it {
   render() {
     const t = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
     return l({ class: "w-full flex flex-auto flex-col" }, [
-      X("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
+      Z("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
       l({ class: `w-full rounded-md ${t} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        ke({ class: "w-full" }, [
+        Ce({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && De({ headers: this.headers, sort: (n) => this.sortRows(n) }),
+          this.headers && Ie({ headers: this.headers, sort: (n) => this.sortRows(n) }),
           // @ts-ignore
           this.customHeader ?? null,
           Yn({
@@ -3689,12 +3689,12 @@ const Ro = i((e) => new Vn(
   ]),
   k({ class: "text-xs leading-5 text-gray-500" }, "Online")
 ]), Gn = (e) => k({ class: "text-xs leading-5 text-muted-foreground" }, [
-  f("Last seen "),
+  h("Last seen "),
   kt({ datetime: e }, "3h ago")
 ]), Kn = (e, t) => e === "online" ? qn() : Gn(t), Qn = i(({ role: e, lastSeen: t, status: s }) => l({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
   k({ class: "text-sm leading-6 m-0" }, e),
   Kn(s, t)
-])), Jn = (e) => e.split(" ").map((s) => s[0]).join(""), Xn = i((e) => we({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+])), Jn = (e) => e.split(" ").map((s) => s[0]).join(""), Xn = i((e) => ve({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
   l({ class: "flex min-w-0 gap-x-4" }, [
     // @ts-ignore
     Fs({ src: e.image, alt: e.name, fallbackText: Jn(e.name) }),
@@ -3793,10 +3793,10 @@ const ea = i(({ options: e, click: t }, s) => ({
       selected: !0
     }]
   }, [
-    x({ size: "sm" }, t)
+    p({ size: "sm" }, t)
   ]),
-  Y({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, e),
-  s && f(
+  V({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, e),
+  s && h(
     {
       class: "flex justify-center items-center px-1 transition-all text-muted-foreground mr-2",
       onState: [
@@ -3809,7 +3809,7 @@ const ea = i(({ options: e, click: t }, s) => ({
       ]
     },
     [
-      x({ size: "xs" }, g.chevron.single.down)
+      p({ size: "xs" }, g.chevron.single.down)
     ]
   )
 ];
@@ -3872,8 +3872,8 @@ class ct extends S {
     this.link.update(t);
   }
 }
-const sa = i(({ map: e }, t) => te({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: e }, [
-  Ke({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, t)
+const sa = i(({ map: e }, t) => se({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: e }, [
+  Qe({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, t)
 ]));
 class na extends S {
   /**
@@ -3891,8 +3891,8 @@ class na extends S {
    */
   render() {
     const t = this.mapOptions(this.options), s = this.class || "", n = this.mobileBorder ? "border md:border-0 rounded-md" : "";
-    return ye({ class: `navigation flex flex-auto flex-col ${s}` }, [
-      te({
+    return we({ class: `navigation flex flex-auto flex-col ${s}` }, [
+      se({
         class: `relative group flex flex-col gap-2 py-2 px-2 list-none m-0 ${n}`,
         map: t
       }),
@@ -4002,8 +4002,8 @@ class la extends dt {
    */
   render() {
     const t = `navigation flex flex-auto flex-col sub ${this.mainClassName || ""}`, s = this.mapOptions(this.options);
-    return ye({ class: t, onState: this.onState() }, [
-      te({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...s, ...this.addSubs(), this.addWatcher()])
+    return we({ class: t, onState: this.onState() }, [
+      se({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...s, ...this.addSubs(), this.addWatcher()])
     ]);
   }
   /**
@@ -4015,7 +4015,7 @@ class la extends dt {
   addWatcher() {
     return {
       watch: {
-        value: ["[[path]]", q.data],
+        value: ["[[path]]", G.data],
         callBack: this.updateLinks.bind(this)
       }
     };
@@ -4056,7 +4056,7 @@ class la extends dt {
    * @returns {void}
    */
   afterSetup() {
-    const t = q.data.path;
+    const t = G.data.path;
     this.updateLinks(t);
   }
   /**
@@ -4073,8 +4073,8 @@ class la extends dt {
     this.parentLink.update(s);
   }
 }
-const ra = (e) => pe({ class: "text-lg ml-2" }, e), ia = (e) => l({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
-  b({
+const ra = (e) => ye({ class: "text-lg ml-2" }, e), ia = (e) => l({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
+  x({
     variant: "icon",
     class: "m-2",
     click: (t, { state: s }) => s.toggle("open"),
@@ -4154,21 +4154,21 @@ class da extends S {
     this.container = app.root;
   }
 }
-const ut = () => b({ class: "m-2", variant: "ghost", addState() {
+const ut = () => x({ class: "m-2", variant: "ghost", addState() {
   return {
     open: !1
   };
 }, click: (e, { state: t }) => t.toggle("open") }, [
-  x({}, g.bar.three)
-]), ua = (e) => pe({ class: "text-lg ml-2" }, e), ha = (e) => l({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
+  p({}, g.bar.three)
+]), ua = (e) => ye({ class: "text-lg ml-2" }, e), ha = (e) => l({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
   ut(),
   e.title && ua(e.title)
 ]), ht = (e, t) => e.map((s) => s.options ? { ...s, options: ht(s.options, t) } : { ...s, callBack: t }), ft = (e) => l({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
-  M(
+  P(
     "open",
     (t) => t ? [
       new da({ title: e.title }, [
-        G(({ state: s }) => {
+        K(({ state: s }) => {
           const n = (o) => s.open = !1, a = ht(e.options, n);
           return new dt(
             {
@@ -4192,7 +4192,7 @@ const ut = () => b({ class: "m-2", variant: "ghost", addState() {
 ])), _o = i((e) => {
   const t = e.margin || "m-4 ml-0";
   return l({ class: `flex-none ${t}` }, [
-    b({ variant: "back", class: "ghost", ...e })
+    x({ variant: "back", class: "ghost", ...e })
   ]);
 });
 class fa extends S {
@@ -4290,7 +4290,7 @@ class fa extends S {
     return this.children;
   }
 }
-et.addType("dockableOverlay", (e) => {
+tt.addType("dockableOverlay", (e) => {
   if (!e)
     return;
   const t = e.component;
@@ -4298,12 +4298,20 @@ et.addType("dockableOverlay", (e) => {
 });
 class Ho extends fa {
   /**
-   * This will stop presistence.
+   * This will declare the props for the component.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    super.declareProps(), this.animateIn = null, this.animateOut = null, this.maxSize = 1024;
+  }
+  /**
+   * This will set the dock size threshold from the maxSize prop.
    *
    * @returns {void}
    */
   onCreated() {
-    this.dockSize = this.maxSize || 1024;
+    this.dockSize = this.maxSize;
   }
   /**
    * This will render the component.
@@ -4314,16 +4322,14 @@ class Ho extends fa {
     const t = this.container;
     return l(
       {
-        // @ts-ignore
         animateIn: this.animateIn ?? null,
-        // @ts-ignore
         animateOut: this.animateOut ?? null,
         onState: [
           ["loading", {
             loading: !0
           }],
           ["docked", (s, n) => {
-            s ? (n.className = this.getDockedClassName(), t.appendChild(n)) : (n.className = this.getClassName(), app.root.appendChild(n));
+            s ? (n.className = this.getDockedClassName(), t.appendChild(n)) : (n.className = this.getClassName(), globalThis.app.root.appendChild(n));
           }]
         ]
       },
@@ -4338,12 +4344,12 @@ class Ho extends fa {
    * @returns {string}
    */
   getDockedClassName() {
-    return "flex flex-auto flex-col bg-background flex will-change-contents " + (this.class || "");
+    return `flex flex-auto flex-col bg-background will-change-contents ${this.class || ""}`.trim();
   }
   /**
-   * This will setup and render the component.
+   * This will set up and render the component inside the given container.
    *
-   * @param {object} container
+   * @param {HTMLElement} container
    * @returns {void}
    */
   setup(t) {
@@ -4361,18 +4367,13 @@ class Ho extends fa {
     };
   }
   /**
-   * This will check the dock size.
+   * This will register this overlay with the data tracker and
+   * perform an initial dock-state check.
    *
    * @returns {void}
    */
   afterSetup() {
-    et.add(
-      this.container,
-      "dockableOverlay",
-      {
-        component: this
-      }
-    ), this.onResize();
+    tt.add(this.container, "dockableOverlay", { component: this }), this.onResize();
   }
   /**
    * This will setup the overlay events.
@@ -4385,7 +4386,7 @@ class Ho extends fa {
     ];
   }
   /**
-   * This will check if the overlay can dock.
+   * This will check if the viewport is wide enough to dock the overlay.
    *
    * @returns {boolean}
    */
@@ -4393,7 +4394,7 @@ class Ho extends fa {
     return globalThis.innerWidth >= this.dockSize;
   }
   /**
-   * This will handle the overlay resize.
+   * This will update the docked state when the viewport is resized.
    *
    * @returns {void}
    */
@@ -4401,7 +4402,7 @@ class Ho extends fa {
     this.state.docked = this.canDock();
   }
 }
-const ga = i(({ index: e, click: t, state: s }, n) => we({
+const ga = i(({ index: e, click: t, state: s }, n) => ve({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -4410,11 +4411,11 @@ const ga = i(({ index: e, click: t, state: s }, n) => we({
     }]
   ],
   click: () => t(e)
-}, n)), ma = i(({ selectOption: e, state: t }) => te({
+}, n)), ma = i(({ selectOption: e, state: t }) => se({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
   for: ["filteredOptions", (s, n) => ga({ index: n, click: e, state: t }, s.label)]
 })), ba = i((e) => l({ class: "relative flex flex-auto items-center" }, [
-  L({
+  R({
     cache: "input",
     // @ts-ignore
     class: e.class ?? "",
@@ -4436,13 +4437,13 @@ const ga = i(({ index: e, click: t, state: s }, n) => we({
   // @ts-ignore
   e.icon && l({ class: "absolute flex right-0 mr-2" }, [
     // @ts-ignore
-    x({ size: "sm" }, e.icon)
+    p({ size: "sm" }, e.icon)
   ])
 ])), xa = (e) => l({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (t, s, n) => {
     if (t)
-      return new ae({
+      return new oe({
         cache: "dropdown",
         parent: n,
         button: n.input,
@@ -4451,7 +4452,7 @@ const ga = i(({ index: e, click: t, state: s }, n) => we({
         ma(e)
       ]);
   }]
-}), Uo = B(
+}), Uo = M(
   {
     /**
      * This will set up the data object.
@@ -4460,7 +4461,7 @@ const ga = i(({ index: e, click: t, state: s }, n) => we({
      */
     setData() {
       const e = this.options || [];
-      return new N({
+      return new F({
         options: e,
         filteredOptions: e
       });
@@ -4578,9 +4579,9 @@ const ga = i(({ index: e, click: t, state: s }, n) => we({
     class: `relative flex items-center w-full rounded-xl bg-muted/30 focus-within:ring-2 focus-within:ring-ring transition-all ${e.containerClass || ""}`
   }, [
     l({ class: "absolute left-4 flex items-center pointer-events-none text-muted-foreground" }, [
-      x({ size: "sm" }, t)
+      p({ size: "sm" }, t)
     ]),
-    p({
+    y({
       type: "text",
       // @ts-ignore
       cache: e.cache ?? "input",
@@ -4639,7 +4640,7 @@ const wa = i((e, t) => (e.class = "basic-page pt-[80px] sm:pt-0 flex flex-auto f
   tag: "section",
   ...e,
   children: t
-})), va = i(({ title: e, description: t }) => ee({ class: "sm:py-8 px-6 md:px-5 flex flex-col" }, [
+})), va = i(({ title: e, description: t }) => te({ class: "sm:py-8 px-6 md:px-5 flex flex-col" }, [
   Ct({ class: "scroll-m-20 text-3xl font-bold tracking-tight" }, e),
   t && k({ class: "text-base text-muted-foreground py-2 max-w-[700px]" }, t)
 ]));
@@ -4683,7 +4684,7 @@ export {
   Fa as L,
   no as M,
   Ra as N,
-  ne as O,
+  ae as O,
   ja as P,
   Aa as Q,
   Ha as R,
@@ -4702,7 +4703,7 @@ export {
   xs as a1,
   ps as a2,
   ws as a3,
-  _ as a4,
+  H as a4,
   Vo as a5,
   En as a6,
   to as a7,
@@ -4722,7 +4723,7 @@ export {
   Yo as aL,
   yo as aM,
   la as aN,
-  De as aO,
+  Ie as aO,
   Ua as aP,
   Va as aQ,
   Co as aR,
@@ -4732,18 +4733,18 @@ export {
   So as aV,
   Ba as aW,
   uo as aX,
-  x as aY,
+  p as aY,
   eo as aZ,
   Ao as a_,
   $o as aa,
   dt as ab,
-  L as ac,
+  R as ac,
   Ht as ad,
   Na as ae,
   Do as af,
   ct as ag,
   wa as ah,
-  Be as ai,
+  ze as ai,
   Ws as aj,
   jo as ak,
   Eo as al,
@@ -4760,21 +4761,21 @@ export {
   pa as aw,
   Za as ax,
   qs as ay,
-  ae as az,
+  oe as az,
   ca as b,
   st as b0,
-  F as b1,
+  L as b1,
   Ja as b2,
   Qs as b3,
   bs as b4,
   Pa as b5,
   Ta as b6,
-  O as b7,
+  N as b7,
   vo as b8,
   Ma as c,
   ya as d,
   Io as e,
-  b as f,
+  x as f,
   sn as g,
   _t as h,
   Kt as i,