@base-framework/ui 1.2.25 → 1.2.26

package/dist/{full-page-C2UTDwxp.js → full-page-CbpTbpJf.js}

@@ -1,10 +1,10 @@
-import { I as Y, Span as g, Button as w, OnState as T, Div as o, Legend as rt, Fieldset as it, H4 as Ye, P as k, Label as V, Checkbox as ue, Input as p, Textarea as ct, UseParent as W, Img as he, H5 as dt, H2 as J, Form as ut, Header as Z, Footer as fe, A as Ve, H3 as ge, Nav as me, Ul as X, Li as be, OnStateOpen as xe, On as Q, Dialog as ht, Th as We, Thead as ft, Tr as gt, Table as pe, Time as mt, H1 as bt } from "@base-framework/atoms";
-import { Atom as r, Jot as M, Component as C, Html as xt, Data as z, Events as L, DateTime as ee, NavLink as pt, router as Ce, DataTracker as _e } from "@base-framework/base";
-import { Icons as u } from "./icons.es.js";
-import { Timer as yt, TableBody as wt, DataTableBody as vt, ScrollableTableBody as kt, List as Ct } from "@base-framework/organisms";
-import { F as U } from "./format-DE4rFWuD.js";
-import { F as St } from "./bside-template-C7AQgQ6H.js";
-const $t = {
+import { I as j, Span as u, Button as w, OnState as M, Div as o, Legend as ht, Fieldset as ft, H4 as We, P as k, Label as E, Checkbox as he, Input as p, Textarea as qe, UseParent as V, Img as fe, H5 as gt, H2 as J, Form as mt, Header as X, Footer as ge, A as Ge, H3 as me, Nav as be, Ul as Z, Li as xe, OnStateOpen as pe, On as Q, Dialog as bt, Th as Ke, Thead as xt, Tr as pt, Table as ye, Time as yt, H1 as wt } from "@base-framework/atoms";
+import { Atom as r, Jot as P, Component as S, Html as Qe, Data as z, Events as R, DateTime as ee, NavLink as vt, router as De, DataTracker as Je } from "@base-framework/base";
+import { Icons as h } from "./icons.es.js";
+import { Timer as kt, TableBody as Ct, DataTableBody as St, ScrollableTableBody as $t, List as Dt } from "@base-framework/organisms";
+import { F as _ } from "./format-DE4rFWuD.js";
+import { F as It } from "./bside-template-C7AQgQ6H.js";
+const Tt = {
   xs: "w-4 h-4",
   sm: "w-6 h-6",
   md: "w-8 h-8",
@@ -12,15 +12,15 @@ const $t = {
   xl: "w-12 h-12",
   "2xl": "w-14 h-14",
   "3xl": "w-16 h-16"
-}, ce = r((e, t) => {
-  const s = $t[e.size || "sm"];
-  return Y({
+}, de = r((e, t) => {
+  const s = Tt[e.size || "sm"];
+  return j({
     ...e,
     // @ts-ignore
     class: `stroke-current icon-size ${s} ${e.class || ""}`,
     html: t[0]?.textContent
   });
-}), Se = {
+}), Ie = {
   xs: "w-4 h-4",
   // 16px - matches Icon
   sm: "w-6 h-6",
@@ -35,7 +35,7 @@ const $t = {
   // 56px - matches Icon
   "3xl": "w-16 h-16"
   // 64px - matches Icon
-}, $e = {
+}, Te = {
   xs: "16px",
   sm: "24px",
   md: "32px",
@@ -43,14 +43,14 @@ const $t = {
   xl: "48px",
   "2xl": "56px",
   "3xl": "64px"
-}, De = {
+}, Me = {
   outlined: "material-symbols-outlined",
   filled: "material-symbols-filled",
   rounded: "material-symbols-rounded",
   sharp: "material-symbols-sharp"
-}, Ie = r((e) => {
-  const t = e.size || "sm", s = e.variant || "outlined", n = Se[t] || Se.sm, a = $e[t] || $e.sm, l = De[s] || De.outlined;
-  return g({
+}, Pe = r((e) => {
+  const t = e.size || "sm", s = e.variant || "outlined", n = Ie[t] || Ie.sm, a = Te[t] || Te.sm, l = Me[s] || Me.outlined;
+  return u({
     ...e,
     // @ts-ignore
     class: `inline-flex items-center justify-center ${l} ${n} ${e.class || ""}`,
@@ -62,14 +62,14 @@ const $t = {
     name: void 0
     // @ts-ignore
   }, e.name);
-}), x = (e = {}, t) => t ? typeof t == "string" && t.includes("<svg") ? ce(e, t) : typeof t == "object" && t.name ? Ie({
+}), x = (e = {}, t) => t ? typeof t == "string" && t.includes("<svg") ? de(e, t) : typeof t == "object" && t.name ? Pe({
   ...e,
   name: t.name,
   variant: t.variant || e.variant || "outlined"
-}) : typeof t == "string" ? Ie({
+}) : typeof t == "string" ? Pe({
   ...e,
   name: t
-}) : ce(e, t) : null, fa = (e) => e ? !!(typeof e == "object" && e.name || typeof e == "string" && !e.includes("<svg")) : !1, ga = (e) => typeof e == "string" && e.includes("<svg"), Te = {
+}) : de(e, t) : null, Da = (e) => e ? !!(typeof e == "object" && e.name || typeof e == "string" && !e.includes("<svg")) : !1, Ia = (e) => typeof e == "string" && e.includes("<svg"), Be = {
   gray: {
     backgroundColor: "bg-gray-50",
     textColor: "text-gray-600",
@@ -150,17 +150,17 @@ const $t = {
     textColor: "text-foreground",
     ringColor: "ring-white/10"
   }
-}, Dt = (e) => Te[e] || Te.gray, It = (e, t = {}) => {
-  const s = Dt(e), n = t.backgroundColor ?? s.backgroundColor, a = t.textColor ?? s.textColor, l = t.ringColor ?? s.ringColor;
+}, Mt = (e) => Be[e] || Be.gray, Pt = (e, t = {}) => {
+  const s = Mt(e), n = t.backgroundColor ?? s.backgroundColor, a = t.textColor ?? s.textColor, l = 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} ${l}`;
-}, ma = r((e, t) => {
-  const { type: s, icon: n, size: a = "xs", backgroundColor: l, textColor: i, ringColor: c, ...h } = e, m = It(s, { backgroundColor: l, textColor: i, ringColor: c });
-  return g({ ...h, class: m }, [
+}, Ta = r((e, t) => {
+  const { type: s, icon: n, size: a = "xs", backgroundColor: l, textColor: i, ringColor: c, ...f } = e, m = Pt(s, { backgroundColor: l, textColor: i, ringColor: c });
+  return u({ ...f, class: m }, [
     n ? x({ size: a, class: "mr-1" }, n) : null,
     ...t || []
   ]);
 });
-class qe extends C {
+class Xe extends S {
   /**
    * This will set the component context.
    *
@@ -176,9 +176,9 @@ class qe extends C {
 }
 const O = (e) => (
   /** @type {VeilComponentConstructor} */
-  M(e, qe)
+  P(e, Xe)
 );
-class ba extends qe {
+class Ma extends Xe {
   /**
    * Declare public props and their defaults.
    */
@@ -212,16 +212,16 @@ class ba extends qe {
     const t = this.size, s = this.icon, n = this.activeIcon || this.icon, a = (() => {
       if (this.dataKey) {
         let l = `[[${this.dataKey}]]`;
-        return this.formatType === "number" ? l = U.number(l, "0") : this.formatType === "money" ? l = U.roundMoney(l) : this.formatType === "date" ? l = U.date(l) : this.formatType === "percent" && (l = U.percentage(l)), g({ class: "toggle-btn-value text-sm tabular-nums capitalize" }, l);
+        return this.formatType === "number" ? l = _.number(l, "0") : this.formatType === "money" ? l = _.roundMoney(l) : this.formatType === "date" ? l = _.date(l) : this.formatType === "percent" && (l = _.percentage(l)), u({ class: "toggle-btn-value text-sm tabular-nums capitalize" }, l);
       }
-      return this.value !== null && this.value !== void 0 ? g({ class: "toggle-btn-value text-sm tabular-nums" }, String(this.value)) : null;
+      return this.value !== null && this.value !== void 0 ? u({ class: "toggle-btn-value text-sm tabular-nums" }, String(this.value)) : null;
     })();
     return w({
       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 || ""}`
     }, [
-      T(
+      M(
         "active",
         (l) => x({ size: t }, l ? n : s)
       ),
@@ -229,7 +229,7 @@ class ba extends qe {
     ]);
   }
 }
-const ne = {
+const ae = {
   xs: "w-6 h-6",
   sm: "w-8 h-8",
   md: "w-10 h-10",
@@ -237,7 +237,7 @@ const ne = {
   xl: "w-14 h-14",
   "2xl": "w-16 h-16"
 };
-class xa extends C {
+class Pa extends S {
   /**
    * Declare public props.
    */
@@ -268,13 +268,13 @@ class xa extends C {
    * @returns {object}
    */
   render() {
-    const t = this.icon, s = this.activeIcon || this.icon, n = ne[this.size] || ne.md, a = ["xs", "sm"].includes(this.size) ? "xs" : "sm", l = this.class ?? "bg-background/40 backdrop-blur-sm", i = "text-foreground", c = this.activeClass || i, h = this.circle ?? !1;
+    const t = this.icon, s = this.activeIcon || this.icon, n = ae[this.size] || ae.md, a = ["xs", "sm"].includes(this.size) ? "xs" : "sm", l = this.class ?? "bg-background/40 backdrop-blur-sm", i = "text-foreground", c = this.activeClass || i, f = this.circle ?? !1;
     return w({
       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} ${l}${h ? " rounded-full w-[40px] h-[40px] max-w-[40px]" : ""}`
+      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} ${l}${f ? " rounded-full w-[40px] h-[40px] max-w-[40px]" : ""}`
     }, [
-      T("active", (m) => [
+      M("active", (m) => [
         x({
           size: a,
           class: `transition-colors ${m ? c : i}`
@@ -283,8 +283,8 @@ class xa extends C {
     ]);
   }
 }
-const pa = r((e, t) => {
-  const s = e.size || "md", n = ne[s] || ne.md, a = ["xs", "sm"].includes(s) ? "xs" : "sm";
+const Ba = r((e, t) => {
+  const s = e.size || "md", n = ae[s] || ae.md, a = ["xs", "sm"].includes(s) ? "xs" : "sm";
   return w({
     ...e,
     // @ts-ignore
@@ -295,34 +295,34 @@ const pa = r((e, t) => {
     ...t || []
   ]);
 });
-let ae = 0;
-const de = /* @__PURE__ */ new Map(), Tt = () => {
+let oe = 0;
+const ue = /* @__PURE__ */ new Map(), Bt = () => {
   const e = globalThis.location?.hash || "";
   return (e ? e.replace(/^#\/?/, "") : globalThis.location?.pathname || "/").replace(/^\/+/, "").replace(/\/+$/, "");
-}, Mt = (e, t) => t ? e === t || e.startsWith(t + "/") : !1;
+}, zt = (e, t) => t ? e === t || e.startsWith(t + "/") : !1;
 if (typeof globalThis.history?.pushState == "function") {
   const e = globalThis.history.pushState;
   globalThis.history.pushState = function(...t) {
-    return ae++, e.apply(this, t);
+    return oe++, e.apply(this, t);
   };
 }
-const Ge = (e) => {
-  const t = e || "", s = Tt(), n = de.get(t);
-  if (n && Mt(s, n.basePath))
+const Ze = (e) => {
+  const t = e || "", s = Bt(), n = ue.get(t);
+  if (n && zt(s, n.basePath))
     return n;
   const a = {
-    pushCount: ae,
+    pushCount: oe,
     basePath: s
   };
-  return de.set(t, a), a;
-}, Ke = (e) => {
-  de.delete(e || "");
-}, F = (e) => r((t, s) => w({
+  return ue.set(t, a), a;
+}, et = (e) => {
+  ue.delete(e || "");
+}, L = (e) => r((t, s) => w({
   ...e,
   ...t,
   // @ts-ignore
   class: `bttn ${e.class} ${t.class || ""}`
-}, s)), ye = r(
+}, s)), we = r(
   (e, t) => w({
     ...e,
     // @ts-ignore
@@ -334,40 +334,40 @@ const Ge = (e) => {
     // @ts-ignore
     e.icon && e.position === "right" ? x({ size: e.size || "sm", class: e.animation ?? null }, e.icon) : null
   ])
-), Me = (e) => r((t, s) => ye({
+), ze = (e) => r((t, s) => we({
   ...e,
   ...t,
   // @ts-ignore
   class: `bttn ${e.class} ${t.class || ""}`
-}, s)), Bt = (e) => {
-  const t = Ge(e.backUrl);
+}, s)), Ot = (e) => {
+  const t = Ze(e.backUrl);
   return () => {
-    Ke(e.backUrl);
-    const n = ae - t.pushCount + 1;
+    et(e.backUrl);
+    const n = oe - t.pushCount + 1;
     if (e.allowHistory === !0 && t.pushCount > 0) {
       globalThis.history.go(-n);
       return;
     }
     e.backUrl && app.navigate(e.backUrl);
   };
-}, Pt = (e) => r((t, s) => (t.icon = t.icon || u.arrows.left, t.click = t.click || Bt(t), ye({
+}, Nt = (e) => r((t, s) => (t.icon = t.icon || h.arrows.left, t.click = t.click || Ot(t), we({
   ...e,
   ...t
-}, s))), zt = (e) => {
-  const t = Ge(e.backUrl);
+}, s))), Ft = (e) => {
+  const t = Ze(e.backUrl);
   return () => {
-    Ke(e.backUrl);
-    const n = ae - t.pushCount + 1;
+    et(e.backUrl);
+    const n = oe - t.pushCount + 1;
     if (t.pushCount > 0) {
       globalThis.history.go(-n);
       return;
     }
     e.backUrl && app.navigate(e.backUrl);
   };
-}, Ot = (e) => r((t, s) => (t.icon = t.icon || u.arrows.left, t.click = t.click || zt(t), ye({
+}, Lt = (e) => r((t, s) => (t.icon = t.icon || h.arrows.left, t.click = t.click || Ft(t), we({
   ...e,
   ...t
-}, s))), Nt = r((e, t) => {
+}, s))), At = r((e, t) => {
   const s = e.size || "md", n = {
     xs: "w-6 h-6",
     sm: "w-8 h-8",
@@ -384,42 +384,42 @@ const Ge = (e) => {
     e.icon ? x({ size: s === "xs" ? "xs" : "sm" }, e.icon) : null,
     ...t || []
   ]);
-}), Be = {
-  primary: F({ class: "primary" }),
-  secondary: F({ class: "secondary" }),
-  destructive: F({ class: "destructive" }),
-  warning: F({ class: "warning" }),
-  outline: F({ class: "outline" }),
-  ghost: F({ class: "ghost" }),
-  link: F({ class: "link" }),
-  icon: Me({ class: "icon" }),
-  withIcon: Me({ class: "with-icon" }),
-  back: Pt({ class: "with-icon back-button" }),
-  smartBack: Ot({ class: "with-icon back-button" }),
-  circleIcon: Nt
-}, b = r((e, t) => (Be[e.variant] || Be.primary)(e, t)), ya = r((e, t) => b({ ...e, variant: "withIcon", icon: u.loading, animation: "animate-spin" }, t)), Rt = r((e, t) => {
+}), Oe = {
+  primary: L({ class: "primary" }),
+  secondary: L({ class: "secondary" }),
+  destructive: L({ class: "destructive" }),
+  warning: L({ class: "warning" }),
+  outline: L({ class: "outline" }),
+  ghost: L({ class: "ghost" }),
+  link: L({ class: "link" }),
+  icon: ze({ class: "icon" }),
+  withIcon: ze({ class: "with-icon" }),
+  back: Nt({ class: "with-icon back-button" }),
+  smartBack: Lt({ class: "with-icon back-button" }),
+  circleIcon: At
+}, b = r((e, t) => (Oe[e.variant] || Oe.primary)(e, t)), za = r((e, t) => b({ ...e, variant: "withIcon", icon: h.loading, animation: "animate-spin" }, t)), Rt = r((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"), o({
     ...e,
     // @ts-ignore
     class: `rounded-lg ${a} bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${s} ${n} ${e.class || ""}`
   }, t);
-}), Ft = r((e, t) => rt({
+}), jt = r((e, t) => ht({
   ...e,
   // @ts-ignore
   class: ` font-medium -mt-4 -mx-1 px-2 py-2 ${e.class || ""}`
-}, t)), wa = r((e, t) => {
+}, t)), Oa = r((e, t) => {
   const s = e.border === "full" ? "border rounded-md" : "border-t";
-  return it({
+  return ft({
     ...e,
     // @ts-ignore
     class: `p-6 ${s} ${e.class || ""}`
   }, [
     // @ts-ignore
-    e.legend && Ft(e.legend),
+    e.legend && jt(e.legend),
     o({ class: "flex flex-auto flex-col gap-y-6" }, t)
   ]);
-}), jt = r((e, t) => {
+}), Et = r((e, t) => {
   const s = e.border === !0 ? "border-t" : "";
   return o({
     ...e,
@@ -434,14 +434,14 @@ const Ge = (e) => {
       class: `flex flex-auto flex-col gap-y-1 ${e.labelProps?.class || ""}`
     }, [
       // @ts-ignore
-      Ye({ class: "text-base" }, e.label),
+      We({ 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
     o({ class: "flex flex-col gap-y-4" }, t)
   ]);
-}), Lt = "flex h-10 w-full px-3 py-2 text-sm", B = "rounded-md border border-border bg-input", I = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", D = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", H = "placeholder:text-muted-foreground", we = `${Lt} ${B} ${I} ${H} ${D}`, Ht = ({ id: e, checked: t, bind: s, required: n }) => ue({
+}), Ht = "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", H = "placeholder:text-muted-foreground", ve = `${Ht} ${D} ${$} ${H} ${C}`, Ut = ({ id: e, checked: t, bind: s, required: n }) => he({
   id: e,
   cache: "checkbox",
   class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
@@ -451,19 +451,19 @@ const Ge = (e) => {
   required: n,
   checked: t,
   bind: s
-}), At = () => g({ class: "absolute text-xs pointer-events-none" }, [
-  T(
+}), Yt = () => u({ class: "absolute text-xs pointer-events-none" }, [
+  M(
     "checked",
-    (e) => e ? Y({
+    (e) => e ? j({
       class: "w-2 h-2 pointer-events-none",
-      html: u.check
+      html: h.check
     }) : null
   )
-]), Et = ({ id: e, bind: t, checked: s, required: n, clickHandler: a }) => o({
+]), _t = ({ id: e, bind: t, checked: s, required: n, clickHandler: a }) => o({
   class: `relative flex items-center justify-center w-5 h-5 transition-colors duration-200 hover:border-accent-foreground
 			rounded-md border
-			${I}
-			${D}`.trim(),
+			${$}
+			${C}`.trim(),
   onState: [
     "checked",
     {
@@ -479,13 +479,13 @@ const Ge = (e) => {
   tabIndex: 0,
   click: a
 }, [
-  Ht({ bind: t, checked: s, id: e, required: n }),
-  At()
-]), Ut = ({ id: e, label: t, clickHandler: s }) => V({
+  Ut({ bind: t, checked: s, id: e, required: n }),
+  Yt()
+]), Vt = ({ id: e, label: t, clickHandler: s }) => E({
   class: "text-base cursor-pointer",
   htmlFor: e,
   click: s
-}, t), Yt = M(
+}, t), Wt = P(
   {
     /**
      * This will initialize the state of the checkbox.
@@ -524,7 +524,7 @@ const Ge = (e) => {
     render() {
       const e = this.getId(), t = (s) => this.clickHandler(s);
       return o({ class: `flex items-center gap-x-2 cursor-pointer ${this.class || ""}` }, [
-        Et({
+        _t({
           id: e,
           // @ts-ignore
           bind: this.bind,
@@ -536,22 +536,154 @@ const Ge = (e) => {
           clickHandler: t
         }),
         // @ts-ignore
-        this.label && Ut({ id: e, label: this.label, clickHandler: t })
+        this.label && Vt({ id: e, label: this.label, clickHandler: t })
       ]);
     }
   }
-), Vt = (e) => {
+), qt = (e) => {
   if (!e || e.length === 0) return "";
   const s = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
   return s ? s[2] ? `(${s[1]}) ${s[2]}${s[3] ? "-" + s[3] : ""}` : s[1] || "" : e;
-}, Wt = (e) => {
-  const t = e.target, s = Vt(t.value);
+}, Gt = (e) => {
+  const t = e.target, s = qt(t.value);
+  s && (t.value = s);
+}, Kt = [
+  "peer w-full h-14 px-3 pt-5 pb-1",
+  "text-base text-foreground",
+  D,
+  $,
+  C,
+  "placeholder-transparent"
+].join(" "), Qt = [
+  "peer w-full min-h-[120px] px-3 pt-6 pb-2",
+  "text-base text-foreground",
+  D,
+  $,
+  C,
+  "placeholder-transparent resize-y"
+].join(" "), Jt = [
+  "peer w-full h-14 px-3 pt-5 pb-1 pr-10",
+  "text-base text-foreground appearance-none",
+  D,
+  $,
+  C
+].join(" "), Xt = [
+  "absolute left-3",
+  "text-muted-foreground",
+  "transition-all duration-200",
+  "pointer-events-none select-none",
+  // Floated state (default — input has a value or is focused)
+  "top-2 text-xs",
+  // Centered / placeholder state (empty + not focused)
+  "peer-[:placeholder-shown:not(:focus)]:top-1/2",
+  "peer-[:placeholder-shown:not(:focus)]:-translate-y-1/2",
+  "peer-[:placeholder-shown:not(:focus)]:text-base"
+].join(" "), Zt = [
+  "absolute left-3",
+  "text-muted-foreground",
+  "transition-all duration-200",
+  "pointer-events-none select-none",
+  // Floated state
+  "top-1 text-xs",
+  // Placeholder state (empty + not focused)
+  "peer-[:placeholder-shown:not(:focus)]:top-3.5",
+  "peer-[:placeholder-shown:not(:focus)]:text-base"
+].join(" "), es = [
+  "absolute left-3 top-2",
+  "text-xs text-muted-foreground",
+  "pointer-events-none select-none"
+].join(" ");
+let ts = 0;
+const ke = (e) => e.id || e.name || `floating-${++ts}`, Ce = (e, t, s, n) => e ? E(
+  { htmlFor: s, class: n },
+  t ? [u(e), u({ class: "text-destructive ml-0.5" }, "*")] : e
+) : null, ss = () => j({
+  class: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none w-4 h-4 text-muted-foreground",
+  html: h.chevron.single.down
+}), te = r((e) => {
+  const t = ke(e);
+  return o({ class: "relative" }, [
+    p({
+      ...e,
+      id: t,
+      placeholder: " ",
+      class: `${Kt} ${e.class || ""}`.trim()
+    }),
+    Ce(e.label, e.required, t, Xt)
+  ]);
+}), Na = r(
+  (e) => te({
+    ...e,
+    type: "tel",
+    name: e.name || "Phone",
+    label: e.label || "Phone",
+    pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
+    keyup: Gt
+  })
+), Fa = r(
+  (e) => te({
+    ...e,
+    type: "email",
+    name: e.name || "Email",
+    label: e.label || "Email"
+  })
+), La = r(
+  (e) => te({
+    ...e,
+    type: "password",
+    name: e.name || "Password",
+    label: e.label || "Password"
+  })
+), Aa = r(
+  (e) => te({
+    ...e,
+    type: "number"
+  })
+), Ra = r(
+  (e) => te({
+    ...e,
+    type: "url",
+    name: e.name || "Url",
+    label: e.label || "URL"
+  })
+), ja = r((e) => {
+  const t = ke(e);
+  return o({ class: "relative" }, [
+    qe({
+      ...e,
+      id: t,
+      placeholder: " ",
+      class: `${Qt} ${e.class || ""}`.trim()
+    }),
+    Ce(e.label, e.required, t, Zt)
+  ]);
+}), Ea = r((e) => {
+  const t = ke(e);
+  return o({ class: "relative" }, [
+    {
+      tag: "select",
+      ...e,
+      id: t,
+      class: `${Jt} ${e.class || ""}`.trim(),
+      onCreated(s) {
+        e.options && Qe.setupSelectOptions(s, e.options), typeof e.onCreated == "function" && e.onCreated(s);
+      }
+    },
+    ss(),
+    Ce(e.label, e.required, t, es)
+  ]);
+}), ns = (e) => {
+  if (!e || e.length === 0) return "";
+  const s = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
+  return s ? s[2] ? `(${s[1]}) ${s[2]}${s[3] ? "-" + s[3] : ""}` : s[1] || "" : e;
+}, as = (e) => {
+  const t = e.target, s = ns(t.value);
   s && (t.value = s);
 }, N = r((e) => p({
   ...e,
   // @ts-ignore
-  class: `${we} ${e.class || ""}`.trim()
-})), va = r((e) => N({
+  class: `${ve} ${e.class || ""}`.trim()
+})), Ha = r((e) => N({
   ...e,
   type: "tel",
   // @ts-ignore
@@ -561,8 +693,8 @@ const Ge = (e) => {
   placeholder: "(555) 555-5555",
   // @ts-ignore
   pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
-  keyup: Wt
-})), ka = r((e) => N({
+  keyup: as
+})), Ua = r((e) => N({
   ...e,
   type: "email",
   // @ts-ignore
@@ -570,47 +702,47 @@ const Ge = (e) => {
   // @ts-ignore
   label: e.label || "Email",
   placeholder: "Email address"
-})), Ca = r((e) => ct({
+})), Ya = r((e) => qe({
   ...e,
   as: "textarea",
   // @ts-ignore
-  class: `flex w-full h-24 px-3 py-2 text-sm ${B} ${I} ${H} ${D} ${e.class || ""}`.trim()
-})), Sa = (e = {}) => o({ class: "flex items-center gap-x-2" }, [
+  class: `flex w-full h-24 px-3 py-2 text-sm ${D} ${$} ${H} ${C} ${e.class || ""}`.trim()
+})), _a = (e = {}) => o({ class: "flex items-center gap-x-2" }, [
   p({
     ...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 && V({ forHTML: e.value, class: "cursor-pointer" }, e.label)
-]), $a = r((e) => p({
+  e.label && E({ forHTML: e.value, class: "cursor-pointer" }, e.label)
+]), Va = r((e) => p({
   ...e,
   type: "date",
   // @ts-ignore
-  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Da = r((e) => p({
+  class: `${D} ${$} ${H} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), Wa = r((e) => p({
   ...e,
   type: "time",
   // @ts-ignore
-  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Ia = r((e) => p({
+  class: `${D} ${$} ${H} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), qa = r((e) => p({
   ...e,
   type: "datetime-local",
   // @ts-ignore
-  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Ta = r((e) => p({
+  class: `${D} ${$} ${H} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), Ga = r((e) => p({
   ...e,
   type: "month",
   // @ts-ignore
-  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Ma = r((e) => p({
+  class: `${D} ${$} ${H} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), Ka = r((e) => p({
   ...e,
   type: "week",
   // @ts-ignore
-  class: `${B} ${I} ${H} ${D} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), Ba = r((e) => N({
+  class: `${D} ${$} ${H} ${C} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), Qa = r((e) => N({
   ...e,
   type: "number"
-})), Pa = r((e) => N({
+})), Ja = r((e) => N({
   ...e,
   type: "password"
 }));
@@ -618,29 +750,29 @@ r((e) => N({
   ...e,
   type: "search"
 }));
-const za = r((e) => N({
+const Xa = r((e) => N({
   ...e,
   type: "url"
-})), Oa = r((e) => N({
+})), Za = r((e) => N({
   ...e,
   type: "hidden"
-})), Na = r((e) => p({
+})), eo = r((e) => p({
   ...e,
   type: "color",
   // @ts-ignore
-  class: `${B} text-foreground p-0 ${D} ${e.class || ""}`.trim()
+  class: `${D} text-foreground p-0 ${C} ${e.class || ""}`.trim()
 }));
-r((e) => ue({
+r((e) => he({
   ...e,
   // @ts-ignore
-  class: `flex h-4 w-4 text-foreground ${B} ${I} ${D} ${e.class || ""}`.trim()
+  class: `flex h-4 w-4 text-foreground ${D} ${$} ${C} ${e.class || ""}`.trim()
 }));
-const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", Ra = r((e) => p({
+const os = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", to = r((e) => p({
   ...e,
   type: "file",
   // @ts-ignore
-  class: `${we} ${_t} ${e.class || ""}`.trim()
-})), Fa = O(
+  class: `${ve} ${os} ${e.class || ""}`.trim()
+})), so = O(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -673,7 +805,7 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
       return o({ class: "relative w-full h-4 flex items-center" }, [
         // Track
         o({ class: "absolute h-2 w-full rounded-full bg-muted" }),
-        W(({ state: e }) => [
+        V(({ state: e }) => [
           // Filled Track
           o({
             class: "absolute h-2 bg-primary rounded-full",
@@ -698,8 +830,8 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
             // Incorporate your new classes here
             class: `
 						absolute w-full h-full opacity-0 cursor-pointer
-						${I}
-						${D}
+						${$}
+						${C}
 						${this.class || ""}
 					`.trim(),
             bind: this.bind,
@@ -712,15 +844,15 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
       ]);
     }
   }
-), ja = r((e) => ({
+), no = r((e) => ({
   tag: "select",
   onCreated(t) {
-    e.options && xt.setupSelectOptions(t, e.options);
+    e.options && Qe.setupSelectOptions(t, e.options);
   },
   ...e,
   // @ts-ignore
-  class: `${we} ${e.class || ""}`.trim()
-})), qt = r(({ src: e, alt: t, class: s, checkPath: n = !0 }) => !e || (s = s || "", n && e.indexOf(".") === -1 && e.indexOf("[[") === -1) ? null : he({
+  class: `${ve} ${e.class || ""}`.trim()
+})), ls = r(({ src: e, alt: t, class: s, checkPath: n = !0 }) => !e || (s = s || "", n && e.indexOf(".") === -1 && e.indexOf("[[") === -1) ? null : fe({
   class: `absolute w-full h-full object-cover fadeIn ${s}`,
   src: e,
   alt: t,
@@ -729,7 +861,7 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
    * If there's an error loading the image, hide it.
    */
   error: (a) => a.target.style.visibility = "hidden"
-})), Gt = (e) => !e || isNaN(e) ? null : e, Pe = (e, t) => {
+})), rs = (e) => !e || isNaN(e) ? null : e, Ne = (e, t) => {
   const s = e, n = 16, a = 2 * Math.PI * n, l = s / 100 * a, i = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
@@ -772,20 +904,20 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     class: "circle-graph text-inherit",
     html: i
   });
-}, La = r((e) => {
-  const t = e.progress || 0, s = e.class || "", n = Pe(t, s);
+}, ao = r((e) => {
+  const t = e.progress || 0, s = e.class || "", n = Ne(t, s);
   return o({
     class: "circle-graph-wrap",
     onSet: [
       // @ts-ignore
       e.prop,
-      (a) => (a = Gt(a), a ? Pe(a, s) : n)
+      (a) => (a = rs(a), a ? Ne(a, s) : n)
     ]
   }, [n]);
-}), Kt = () => W(({ state: e }) => o({
+}), is = () => V(({ state: e }) => o({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: ["width: [[progress]]%;", e]
-})), Ha = O(
+})), oo = O(
   {
     /**
      * This will render the progress bar component.
@@ -794,7 +926,7 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
      */
     render() {
       return o({ class: "relative w-full h-4 rounded-full bg-muted" }, [
-        Kt()
+        is()
       ]);
     },
     /**
@@ -837,7 +969,7 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
       e < 0 && (e = 0), e > 100 && (e = 100), this.state.progress = e;
     }
   }
-), Aa = r((e = {}) => {
+), lo = r((e = {}) => {
   const {
     class: t = "",
     background: s = !0,
@@ -846,7 +978,7 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     blurClass: l = "backdrop-blur",
     zIndexClass: i = "z-9999",
     style: c = ""
-  } = e, h = [
+  } = e, f = [
     "sticky bottom-0 left-0 right-0 w-full",
     i,
     s ? a : "",
@@ -854,11 +986,11 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     t
   ].filter(Boolean).join(" "), m = `height: env(safe-area-inset-bottom, 0px);${c ? ` ${c}` : ""}`;
   return o({
-    class: h,
+    class: f,
     style: m,
     "aria-hidden": "true"
   });
-}), Ea = r((e = {}) => {
+}), ro = r((e = {}) => {
   const {
     class: t = "",
     background: s = !0,
@@ -867,7 +999,7 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     blurClass: l = "backdrop-blur",
     zIndexClass: i = "z-9999",
     style: c = ""
-  } = e, h = [
+  } = e, f = [
     "fixed top-0 left-0 right-0 w-full",
     i,
     s ? a : "",
@@ -875,11 +1007,11 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     t
   ].filter(Boolean).join(" "), m = `height: env(safe-area-inset-top, 0px);${c ? ` ${c}` : ""}`;
   return o({
-    class: h,
+    class: f,
     style: m,
     "aria-hidden": "true"
   });
-}), ze = {
+}), Fe = {
   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",
@@ -888,19 +1020,19 @@ const _t = "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"
-}, Qt = (e) => ze[String(e)] || ze.top, Ua = r(({ position: e = "top", content: t }, s) => {
-  const n = Qt(e);
+}, cs = (e) => Fe[String(e)] || Fe.top, io = r(({ position: e = "top", content: t }, s) => {
+  const n = cs(e);
   return Array.isArray(s) === !1 && (s = [s]), o({ class: "relative group inline-block" }, [
     ...s,
     // Tooltip box
-    g({
+    u({
       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)
   ]);
-}), Oe = {
+}), Le = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -926,25 +1058,25 @@ const _t = "file:border-0 file:bg-transparent file:text-sm file:font-medium file
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, Jt = (e, t) => o({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+}, ds = (e, t) => o({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   x({ size: "sm" }, e)
-]), Zt = (e) => dt({ class: "font-semibold" }, e), Xt = (e) => k({ class: "text-sm text-muted-foreground" }, e), Ya = r(({ title: e, description: t, icon: s, type: n = "default" }) => {
-  const { borderColor: a, bgColor: l, iconColor: i } = Oe[n] || Oe.default;
+]), us = (e) => gt({ class: "font-semibold" }, e), hs = (e) => k({ class: "text-sm text-muted-foreground" }, e), co = r(({ title: e, description: t, icon: s, type: n = "default" }) => {
+  const { borderColor: a, bgColor: l, iconColor: i } = Le[n] || Le.default;
   return o({ class: `flex items-start p-4 border rounded-lg ${l} ${a}` }, [
     // Icon and content
-    s && Jt(s, i),
+    s && ds(s, i),
     o({ class: "flex flex-col" }, [
-      Zt(e),
-      Xt(t)
+      us(e),
+      hs(t)
     ])
   ]);
-}), es = (e, t) => {
+}), fs = (e, t) => {
   const s = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, n = t.getBoundingClientRect(), a = 10, l = globalThis.scrollX, i = globalThis.scrollY;
-  let c = s.left + l, h = s.bottom + i;
+  let c = s.left + l, f = s.bottom + i;
   const m = globalThis.innerHeight - s.bottom, v = s.top;
-  return c + n.width > globalThis.innerWidth && (c = globalThis.innerWidth - n.width - a), m < n.height && v > m ? h = s.top + i - n.height - a : m < n.height && (h = s.bottom + i - (n.height - m) - a), { x: c, y: h };
+  return c + n.width > globalThis.innerWidth && (c = globalThis.innerWidth - n.width - a), m < n.height && v > m ? f = s.top + i - n.height - a : m < n.height && (f = s.bottom + i - (n.height - m) - a), { x: c, y: f };
 };
-class te extends C {
+class se extends S {
   /**
    * This will set up the data.
    *
@@ -1021,7 +1153,7 @@ class te extends C {
    * @returns {void}
    */
   updatePosition() {
-    const t = this.button ?? null, s = this.panel, n = es(t, s);
+    const t = this.button ?? null, s = this.panel, n = fs(t, s);
     this.data.position = n;
   }
   /**
@@ -1073,29 +1205,29 @@ class te extends C {
     this?.panel?.hidePopover();
   }
 }
-const ts = r((e, t) => o({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), ss = r((e, t) => V({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ns = r((e, t) => k({ ...e, class: "text-sm text-muted-foreground italic" }, t)), as = r((e, t) => k({ ...e, class: "text-sm text-destructive" }, t)), Va = r((e, t = []) => Rt({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+const gs = r((e, t) => o({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), ms = r((e, t) => E({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), bs = r((e, t) => k({ ...e, class: "text-sm text-muted-foreground italic" }, t)), xs = r((e, t) => k({ ...e, class: "text-sm text-destructive" }, t)), uo = r((e, t = []) => Rt({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
   // @ts-ignore
   e.title && J({ 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
-])), Wa = r((e, t = []) => (
+])), ho = r((e, t = []) => (
   // @ts-ignore
-  jt({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
+  Et({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
     o({ class: "flex flex-col gap-y-6" }, t)
   ])
-)), _a = r((e, t = []) => {
+)), fo = r((e, t = []) => {
   const s = e.border ? "border-t" : "";
   return o({ ...e, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${e.class || ""}` }, t);
-}), os = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", Qe = (e, t, s) => e.map((n) => !n || (n.children && n.children.length > 0 && (n.children = Qe(n.children, t, s)), !n.required) ? n : os(n) ? {
+}), ps = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", tt = (e, t, s) => e.map((n) => !n || (n.children && n.children.length > 0 && (n.children = tt(n.children, t, s)), !n.required) ? n : ps(n) ? {
   ...n,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: t
-} : n), ls = r((e, t) => {
-  const a = Qe(t, (l) => {
+} : n), ys = r((e, t) => {
+  const a = tt(t, (l) => {
     l.target.checkValidity() && e.setError(null);
   }, (l) => {
     e.setError(l.target.validationMessage);
@@ -1104,7 +1236,7 @@ const ts = r((e, t) => o({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     ...e,
     class: "w-full"
   }, a);
-}), qa = O(
+}), go = O(
   {
     /**
      * The initial state of the FormField.
@@ -1129,47 +1261,47 @@ const ts = r((e, t) => o({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
         this.state.error = l, this.state.hasError = !!l;
       };
       return o({ class: "flex flex-auto gap-y-4" }, [
-        ts([
-          ss({ htmlFor: t }, s),
-          ls({
+        gs([
+          ms({ htmlFor: t }, s),
+          ys({
             id: t,
             name: e,
             value: this.state.value,
             setError: a
           }, this.children),
-          n && ns({ id: this.getId("description") }, n),
-          o({ onState: ["error", (l) => l && as(l)] })
+          n && bs({ id: this.getId("description") }, n),
+          o({ onState: ["error", (l) => l && xs(l)] })
         ])
       ]);
     }
   }
-), rs = (e, t, s = null) => {
+), ws = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
-}, Je = r(
+}, st = r(
   (e, t) => (
     // @ts-ignore
-    ut({ ...e, submit: (s, n) => rs(s, n, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+    mt({ ...e, submit: (s, n) => ws(s, n, e.submit), class: `w-full ${e.class ?? ""}` }, t)
   )
-), Ga = r((e, t) => (
+), mo = r((e, t) => (
   // @ts-ignore
   o({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)
-)), Ka = r((e, t = []) => o({ class: "flex flex-col gap-y-3 py-4" }, [
+)), bo = r((e, t = []) => o({ class: "flex flex-col gap-y-3 py-4" }, [
   // @ts-ignore
   e.title && J({ class: "font-semibold" }, e.title),
   ...t
-])), Qa = (e, t) => o({ class: "flex justify-between" }, [
-  g({ class: "text-muted-foreground" }, e),
-  g(t)
-]), Ja = (e, t) => o({ class: "flex" }, [
-  g({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
-  g(t)
-]), is = r(({ title: e, description: t, back: s, icon: n, options: a = [] }) => Z({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10 min-w-0" }, [
+])), xo = (e, t) => o({ class: "flex justify-between" }, [
+  u({ class: "text-muted-foreground" }, e),
+  u(t)
+]), po = (e, t) => o({ class: "flex" }, [
+  u({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
+  u(t)
+]), vs = r(({ title: e, description: t, back: s, icon: n, options: a = [] }) => X({ 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({
     variant: "icon",
-    icon: u.arrows.left,
+    icon: h.arrows.left,
     class: "mr-2 p-0 flex sm:hidden",
     click: (l, i) => i.close()
   }),
@@ -1186,7 +1318,7 @@ const ts = r((e, t) => o({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     ]),
     o({ class: "flex flex-none items-center gap-2" }, a)
   ])
-])), Za = r((e, t) => {
+])), yo = r((e, t) => {
   const s = e.class?.includes("drawer");
   return o({
     popover: "manual",
@@ -1196,7 +1328,7 @@ const ts = r((e, t) => o({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
       l.target === i.panel && (l.preventDefault(), l.stopPropagation(), i.state.open = !1);
     }
   }, [
-    Je({
+    st({
       class: "modal-content relative bg-background z-1 flex flex-auto flex-col gap-y-4 min-w-0",
       // @ts-ignore
       submit: (l, i) => e.onSubmit && e.onSubmit(i),
@@ -1204,13 +1336,13 @@ const ts = r((e, t) => o({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
       // @ts-ignore
       ...e.gestureHandlers
     }, [
-      is(e),
+      vs(e),
       o({ class: "modal-body flex grow flex-col py-0 px-6 z-0", cache: "modalBody" }, t),
       // @ts-ignore
-      !e.hideFooter && fe({ 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 && ge({ 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)
     ])
   ]);
-}), Ne = {
+}), Ae = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -1236,22 +1368,22 @@ const ts = r((e, t) => o({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, cs = (e) => Z({ class: "flex justify-center" }, [
-  ge({ class: "text-lg font-bold mb-0" }, e)
-]), ds = r(({ href: e, class: t }, s) => Ve({
+}, ks = (e) => X({ class: "flex justify-center" }, [
+  me({ class: "text-lg font-bold mb-0" }, e)
+]), Cs = r(({ href: e, class: t }, s) => Ge({
   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",
   animateOut: "pullRight",
   role: "alert"
-}, s)), us = r(({ close: e, class: t }, s) => o({
+}, s)), Ss = r(({ close: e, class: t }, s) => o({
   class: `pullRightIn 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}`,
   click: () => e(),
   animateIn: "pullRightIn",
   animateOut: "pullRight",
   role: "alert"
 }, s));
-class Xa extends C {
+class wo extends S {
   /**
    * This will declare the props for the compiler.
    *
@@ -1275,10 +1407,10 @@ class Xa extends C {
    */
   render() {
     const { bgColor: t, borderColor: s, iconColor: n } = this.getTypeStyles(), a = this.href || null, l = this.getChildren(n);
-    return a ? ds({
+    return a ? Cs({
       href: a,
       class: `${t} ${s}`
-    }, l) : us({
+    }, l) : Ss({
       close: this.close.bind(this),
       class: `${t} ${s}`
     }, l);
@@ -1290,7 +1422,7 @@ class Xa extends C {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new yt(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new kt(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -1299,7 +1431,7 @@ class Xa extends C {
    */
   getTypeStyles() {
     const t = this.type || "default";
-    return Ne[t] || Ne.default;
+    return Ae[t] || Ae.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -1328,16 +1460,16 @@ class Xa extends C {
         ]),
         o({ class: "flex flex-auto flex-col" }, [
           o({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && cs(this.title)
+            this.title && ks(this.title)
           ]),
           k({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
-          (this.primary || this.secondary) && fe({ class: "margin-top-24 flex align-center" }, this.getButtons())
+          (this.primary || this.secondary) && ge({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
       b({
         class: "absolute top-[12px] right-[12px]",
         variant: "icon",
-        icon: u.x,
+        icon: h.x,
         click: this.close.bind(this)
       })
     ];
@@ -1352,17 +1484,17 @@ class Xa extends C {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w({
+const Re = globalThis.matchMedia, le = r(({ value: e, label: t, icon: s }) => w({
   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"]],
   click: (n, { state: a }) => {
-    a.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), hs(e);
+    a.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), $s(e);
   }
 }, [
   x({}, s),
-  g(t)
-])), hs = (e) => {
+  u(t)
+])), $s = (e) => {
   const t = document.documentElement;
   if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), Re && !Re("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
@@ -1370,7 +1502,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, eo = M(
+}, vo = P(
   {
     /**
      * This will render the component.
@@ -1380,9 +1512,9 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
     render() {
       return o({ class: "flex flex-auto flex-col" }, [
         o({ class: "grid grid-cols-3 gap-4" }, [
-          oe({ label: "System", value: "system", icon: u.adjustments.horizontal }),
-          oe({ label: "Light", value: "light", icon: u.sun }),
-          oe({ label: "Dark", value: "dark", icon: u.moon })
+          le({ label: "System", value: "system", icon: h.adjustments.horizontal }),
+          le({ label: "Light", value: "light", icon: h.sun }),
+          le({ label: "Dark", value: "dark", icon: h.moon })
         ])
       ]);
     },
@@ -1397,7 +1529,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       };
     }
   }
-), to = O(
+), ko = O(
   {
     /**
      * The initial state of the Toggle.
@@ -1431,7 +1563,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
           s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, t, this);
         }
       }, [
-        ue({
+        he({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
           /**
@@ -1442,20 +1574,20 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
           bind: this.bind,
           required: this.required
         }),
-        g({
+        u({
           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 }]
         })
       ]);
     }
   }
-), fs = r(({ src: e, alt: t }) => !e || e.indexOf(".") === -1 && e.indexOf("[[") === -1 ? null : qt({
+), Ds = r(({ src: e, alt: t }) => !e || e.indexOf(".") === -1 && e.indexOf("[[") === -1 ? null : ls({
   src: e,
   alt: t,
   class: "rounded-full"
-})), gs = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), Ze = (e) => !e || e.length < 2 ? e : gs(e), ms = (e) => g([e, (t, s) => {
-  s.textContent = Ze(t);
-}]), Fe = {
+})), Is = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), nt = (e) => !e || e.length < 2 ? e : Is(e), Ts = (e) => u([e, (t, s) => {
+  s.textContent = nt(t);
+}]), je = {
   xs: "h-6 w-6",
   sm: "h-8 w-8",
   md: "h-12 w-12",
@@ -1465,7 +1597,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
   "3xl": "h-48 w-48",
   "4xl": "h-64 w-64",
   default: "h-12 w-12"
-}, je = {
+}, Ee = {
   xs: "text-[7px]",
   sm: "text-xs",
   md: "text-base",
@@ -1475,8 +1607,8 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
   "3xl": "text-4xl",
   "4xl": "text-5xl",
   default: "text-base"
-}, bs = (e) => Fe[e] || Fe.default, xs = (e) => je[e] || je.default, ps = (e, t = null, s = "md") => {
-  const n = Ze(String(e)), a = xs(s);
+}, Ms = (e) => je[e] || je.default, Ps = (e) => Ee[e] || Ee.default, Bs = (e, t = null, s = "md") => {
+  const n = nt(String(e)), a = Ps(s);
   return o(
     {
       class: `
@@ -1486,21 +1618,21 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
 		`
     },
     [
-      t ? ms(t) : g({ class: "uppercase" }, n)
+      t ? Ts(t) : u({ class: "uppercase" }, n)
     ]
   );
-}, ys = r(({ src: e, alt: t, fallbackText: s, watcherFallback: n, size: a }) => {
-  const l = bs(a);
+}, zs = r(({ src: e, alt: t, fallbackText: s, watcherFallback: n, size: a }) => {
+  const l = Ms(a);
   return o(
     {
       class: `relative flex items-center justify-center ${l}`
     },
     [
-      fs({ src: e, alt: t }),
-      ps(s, n, a)
+      Ds({ src: e, alt: t }),
+      Bs(s, n, a)
     ]
   );
-}), ws = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1 && e.indexOf("blob:") === -1, so = M(
+}), Os = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1 && e.indexOf("blob:") === -1, Co = P(
   {
     /**
      * Get the initial state for the component.
@@ -1520,7 +1652,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", L.trigger("click", e));
+      e && (e.value = "", R.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -1556,13 +1688,13 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          T("loaded", (s) => s === !1 || ws(this.src) ? V({
+          M("loaded", (s) => s === !1 || Os(this.src) ? E({
             htmlFor: e,
             class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
           }, [
-            ce(u.upload),
+            de(h.upload),
             o("Upload Image")
-          ]) : he({
+          ]) : fe({
             // @ts-ignore
             src: this.src,
             class: "absolute inset-0 w-full h-full object-cover rounded-full"
@@ -1571,7 +1703,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       ]);
     }
   }
-), no = M(
+), So = P(
   {
     /**
      * Get the initial state for the component.
@@ -1591,7 +1723,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", L.trigger("click", e));
+      e && (e.value = "", R.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -1627,17 +1759,17 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          T(
+          M(
             "loaded",
-            (s) => s ? he({
+            (s) => s ? fe({
               // @ts-ignore
               src: this.src,
               class: "absolute inset-0 w-full h-full object-cover rounded-full"
-            }) : V({
+            }) : E({
               htmlFor: e,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
-              x({}, u.upload),
+              x({}, h.upload),
               o("Upload logo")
             ])
           )
@@ -1653,22 +1785,22 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       this.input = null;
     }
   }
-), vs = (e, t) => Ve(
+), Ns = (e, t) => Ge(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [g(t)]
-), ks = () => x({
+  [u(t)]
+), Fs = () => x({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), Cs = (e) => o({ class: "flex items-center" }, [
-  e.href ? vs(e.href, e.label) : g(e.label),
-  e.separator && ks()
-]), ao = M(
+}, h.chevron.single.right), Ls = (e) => o({ class: "flex items-center" }, [
+  e.href ? Ns(e.href, e.label) : u(e.label),
+  e.separator && Fs()
+]), $o = P(
   {
     /**
      * Set initial data
@@ -1688,7 +1820,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
      */
     render() {
       const e = this.data.items.length - 1;
-      return me(
+      return be(
         {
           "aria-label": "Breadcrumb",
           class: "flex items-center gap-x-1 text-sm"
@@ -1697,7 +1829,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
           o({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => Cs({
+            for: ["items", (t, s) => Ls({
               href: t.href,
               label: t.label,
               separator: s < e
@@ -1707,7 +1839,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       );
     }
   }
-), Le = {
+), He = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -1716,8 +1848,8 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, Ss = (e) => Le[e] || Le.default, $s = ({ index: e, size: t }) => o({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
-  g({
+}, As = (e) => He[e] || He.default, Rs = ({ index: e, size: t }) => o({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+  u({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
       "bg-primary": e,
@@ -1727,10 +1859,10 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       n.activeIndex = e, a && a(e);
     }
   })
-]), Ds = (e, t) => Array.from({ length: e }, (s, n) => $s({
+]), js = (e, t) => Array.from({ length: e }, (s, n) => Rs({
   index: n,
   size: t
-})), oo = M(
+})), Do = P(
   {
     /**
      * Defines component data (props).
@@ -1752,7 +1884,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = Ss(this.size || "sm"), s = Ds(this.data.count, t);
+      const e = this.gap || "gap-2", t = As(this.size || "sm"), s = js(this.data.count, t);
       return o(
         { class: "flex justify-center items-center py-2" },
         [
@@ -1761,37 +1893,37 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       );
     }
   }
-), Is = ({ toggleDropdown: e }) => w(
+), Es = ({ toggleDropdown: e }) => w(
   {
     cache: "button",
     class: "relative z-2 inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border bg-input hover:bg-muted h-10 px-4 py-2 justify-between",
     click: e
   },
   [
-    g({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
-    x({ size: "sm" }, u.chevron.upDown)
+    u({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    x({ size: "sm" }, h.chevron.upDown)
   ]
-), Ts = (e, t, s) => be({
+), Hs = (e, t, s) => xe({
   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 && g({ class: "mr-2 flex items-baseline" }, [x({ size: "xs" }, e.icon)]),
-  g({ class: "text-base font-normal" }, e.label)
-]), Ms = (e, t) => o({ class: "w-full border rounded-md" }, [
-  X({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Ts(s, e, t)] })
-]), Bs = ({ onSelect: e, state: t }) => o({ class: "flex flex-auto flex-col" }, [
-  T(
+  e.icon && u({ class: "mr-2 flex items-baseline" }, [x({ size: "xs" }, e.icon)]),
+  u({ class: "text-base font-normal" }, e.label)
+]), Us = (e, t) => o({ class: "w-full border rounded-md" }, [
+  Z({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Hs(s, e, t)] })
+]), Ys = ({ onSelect: e, state: t }) => o({ class: "flex flex-auto flex-col" }, [
+  M(
     "open",
-    (s, n, a) => s ? new te({
+    (s, n, a) => s ? new se({
       cache: "dropdown",
       parent: a,
       button: a.button
     }, [
-      Ms(e, t)
+      Us(e, t)
     ]) : null
   )
-]), lo = M(
+]), Io = P(
   {
     /**
      * This will set up the data.
@@ -1872,8 +2004,8 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
       return o({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
         // @ts-ignore
-        Is({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        Bs({
+        Es({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        Ys({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1893,21 +2025,21 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       ]);
     }
   }
-), Xe = ({ icon: e, click: t, ariaLabel: s }) => b({
+), at = ({ icon: e, click: t, ariaLabel: s }) => b({
   variant: "icon",
   class: "flex flex-none",
   click: t,
   icon: e,
   "aria-label": s
-}), Ps = ({ click: e }) => Xe({
-  icon: u.circleMinus,
+}), _s = ({ click: e }) => at({
+  icon: h.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), zs = ({ click: e }) => Xe({
-  icon: u.circlePlus,
+}), Vs = ({ click: e }) => at({
+  icon: h.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), Os = ({ bind: e, min: t, max: s, readonly: n = !1 }) => W(({ state: a }) => p({
+}), Ws = ({ bind: e, min: t, max: s, readonly: n = !1 }) => V(({ state: a }) => p({
   value: ["[[count]]", a],
   bind: e,
   blur: (l, { state: i }) => {
@@ -1920,7 +2052,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), ro = O(
+})), To = O(
   {
     /**
      * Initial state for the counter component.
@@ -1943,18 +2075,18 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
     render() {
       const e = this.class ?? "";
       return o({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${e}` }, [
-        Ps({ click: () => this.state.decrement("count") }),
-        Os({
+        _s({ click: () => this.state.decrement("count") }),
+        Ws({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        zs({ click: () => this.state.increment("count") })
+        Vs({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), Ns = ({ currentMonth: e, currentYear: t, onSelect: s }) => o(
+), qs = ({ currentMonth: e, currentYear: t, onSelect: s }) => o(
   { class: "grid grid-cols-3 gap-2" },
   ee.monthNames.map(
     (n, a) => b(
@@ -1968,10 +2100,10 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       n.substring(0, 3)
     )
   )
-), P = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), Rs = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), j = (e, t, s) => `${e}-${P(t + 1)}-${P(s)}`, Fs = (e) => e ? "bg-accent text-primary" : "", js = (e) => e ? "text-muted-foreground opacity-50" : "", Ls = (e, t) => e === t, Hs = (e, t) => Ls(e, t) ? "bg-primary text-primary-foreground" : "", As = (e, t, s, n) => {
-  const a = Hs(t, n);
-  return a || (e ? Fs(e) : s ? js(s) : "text-foreground");
-}, le = (e) => {
+), B = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), Gs = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), A = (e, t, s) => `${e}-${B(t + 1)}-${B(s)}`, Ks = (e) => e ? "bg-accent text-primary" : "", Qs = (e) => e ? "text-muted-foreground opacity-50" : "", Js = (e, t) => e === t, Xs = (e, t) => Js(e, t) ? "bg-primary text-primary-foreground" : "", Zs = (e, t, s, n) => {
+  const a = Xs(t, n);
+  return a || (e ? Ks(e) : s ? Qs(s) : "text-foreground");
+}, re = (e) => {
   const {
     day: t,
     currentDate: s,
@@ -1985,7 +2117,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
     {
       class: `
 				flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md cursor-pointer
-				${As(a, s, l, n)}
+				${Zs(a, s, l, n)}
 				hover:bg-muted/50 hover:text-muted-foreground focus:z-10
                 disabled:pointer-events-none disabled:opacity-50
 			`,
@@ -1996,53 +2128,53 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
     },
     t.toString()
   );
-}, re = (e, t, s, n) => e === n.date && t === n.month && s === n.year, Es = (e, t, s, n = !1) => {
-  const { year: a, month: l } = e, i = j(a, l, e.date), c = new Date(a, l, 1).getDay(), h = new Date(a, l + 1, 0).getDate(), m = new Date(a, l, 0).getDate(), v = [], _ = l === 0 ? 11 : l - 1, A = l === 0 ? a - 1 : a;
+}, ie = (e, t, s, n) => e === n.date && t === n.month && s === n.year, en = (e, t, s, n = !1) => {
+  const { year: a, month: l } = e, i = A(a, l, e.date), c = new Date(a, l, 1).getDay(), f = new Date(a, l + 1, 0).getDate(), m = new Date(a, l, 0).getDate(), v = [], W = l === 0 ? 11 : l - 1, U = l === 0 ? a - 1 : a;
   for (let d = c - 1; d >= 0; d--) {
-    const y = m - d, S = re(y, _, A, t), $ = new Date(A, _, y) < new Date(t.year, t.month, t.date), R = n && $;
+    const y = m - d, I = ie(y, W, U, t), T = new Date(U, W, y) < new Date(t.year, t.month, t.date), F = n && T;
     v.push(
-      le({
+      re({
         day: y,
         currentDate: i,
-        date: j(A, _, y),
-        isToday: S,
+        date: A(U, W, y),
+        isToday: I,
         isOutsideMonth: !0,
         select: s,
-        disabled: R
+        disabled: F
       })
     );
   }
-  for (let d = 1; d <= h; d++) {
-    const y = re(d, l, a, t), S = new Date(a, l, d) < new Date(t.year, t.month, t.date), $ = n && S;
+  for (let d = 1; d <= f; d++) {
+    const y = ie(d, l, a, t), I = new Date(a, l, d) < new Date(t.year, t.month, t.date), T = n && I;
     v.push(
-      le({
+      re({
         day: d,
         currentDate: i,
-        date: j(a, l, d),
+        date: A(a, l, d),
         isToday: y,
         isOutsideMonth: !1,
         select: s,
-        disabled: $
+        disabled: T
       })
     );
   }
-  const E = l === 11 ? 0 : l + 1, se = l === 11 ? a + 1 : a, f = (7 - v.length % 7) % 7;
-  for (let d = 1; d <= f; d++) {
-    const y = re(d, E, se, t), S = new Date(se, E, d) < new Date(t.year, t.month, t.date), $ = n && S;
+  const Y = l === 11 ? 0 : l + 1, ne = l === 11 ? a + 1 : a, g = (7 - v.length % 7) % 7;
+  for (let d = 1; d <= g; d++) {
+    const y = ie(d, Y, ne, t), I = new Date(ne, Y, d) < new Date(t.year, t.month, t.date), T = n && I;
     v.push(
-      le({
+      re({
         day: d,
         currentDate: i,
-        date: j(se, E, d),
+        date: A(ne, Y, d),
         isToday: y,
         isOutsideMonth: !0,
         select: s,
-        disabled: $
+        disabled: T
       })
     );
   }
   return v;
-}, He = ({ label: e, click: t }) => b(
+}, Ue = ({ label: e, click: t }) => b(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -2053,18 +2185,18 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
     click: t,
     "aria-label": `${e} month`,
     variant: "icon",
-    icon: e === "Previous" ? u.chevron.single.left : u.chevron.single.right
+    icon: e === "Previous" ? h.chevron.single.left : h.chevron.single.right
   }
-), Us = ({ onMonthClick: e, onYearClick: t, next: s, previous: n }) => o({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
+), tn = ({ onMonthClick: e, onYearClick: t, next: s, previous: n }) => o({ 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]]"),
-  He({ label: "Previous", click: n }),
-  He({ label: "Next", click: s })
-]), Ys = (e) => o(
+  Ue({ label: "Previous", click: n }),
+  Ue({ label: "Next", click: s })
+]), sn = (e) => o(
   { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
   e
-), Vs = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(Ys), Ws = (e) => o({ class: "rdp flex flex-auto flex-col w-full gap-y-1" }, [
-  Us({
+), nn = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(sn), an = (e) => o({ class: "rdp flex flex-auto flex-col w-full gap-y-1" }, [
+  tn({
     onMonthClick: e.onMonthClick,
     onYearClick: e.onYearClick,
     next: e.next,
@@ -2075,10 +2207,10 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
     onSet: [
       "currentDate",
       () => [
-        o({ class: "grid grid-cols-7" }, Vs()),
+        o({ class: "grid grid-cols-7" }, nn()),
         o(
           { class: "grid grid-cols-7" },
-          Es(
+          en(
             e.current,
             e.today,
             e.select,
@@ -2088,7 +2220,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
       ]
     ]
   })
-]), _s = ({ currentMonth: e, currentYear: t, onSelect: s }) => {
+]), on = ({ currentMonth: e, currentYear: t, onSelect: s }) => {
   const n = t - 50, a = Array.from({ length: 101 }, (l, i) => n + i);
   return o(
     { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
@@ -2106,7 +2238,7 @@ const Re = globalThis.matchMedia, oe = r(({ value: e, label: t, icon: s }) => w(
     )
   );
 };
-class qs extends C {
+class ln extends S {
   /**
    * This will declare the props for the compiler.
    *
@@ -2122,7 +2254,7 @@ class qs extends C {
    * @returns {Date}
    */
   getSelectedDate(t) {
-    const s = this.selectedDate ? new Date(Rs(this.selectedDate)) : t;
+    const s = this.selectedDate ? new Date(Gs(this.selectedDate)) : t;
     return new Date(s.getFullYear(), s.getMonth(), s.getDate());
   }
   /**
@@ -2197,7 +2329,7 @@ class qs extends C {
    */
   setCurrentDate(t, s, n = null) {
     const a = this.data;
-    a.current.month = t, a.current.year = s, typeof n == "number" && (a.current.date = P(n)), a.currentDate = `${s}-${P(t + 1)}-${a.current.date}`, a.monthName = this.getMonthName(t);
+    a.current.month = t, a.current.year = s, typeof n == "number" && (a.current.date = B(n)), a.currentDate = `${s}-${B(t + 1)}-${a.current.date}`, a.monthName = this.getMonthName(t);
   }
   /**
    * This will select a date.
@@ -2216,10 +2348,10 @@ class qs extends C {
    */
   render() {
     return o({ class: "calendar-container p-3 rounded-md border min-w-80" }, [
-      T("view", (t) => {
+      M("view", (t) => {
         switch (t) {
           case "months":
-            return Ns(
+            return qs(
               {
                 // @ts-ignore
                 currentMonth: this.data.current.month,
@@ -2231,7 +2363,7 @@ class qs extends C {
               }
             );
           case "years":
-            return _s(
+            return on(
               {
                 // @ts-ignore
                 currentMonth: this.data.current.month,
@@ -2243,7 +2375,7 @@ class qs extends C {
               }
             );
           default:
-            return Ws({
+            return an({
               // @ts-ignore
               current: this.data.current,
               // @ts-ignore
@@ -2264,57 +2396,57 @@ class qs extends C {
     ]);
   }
 }
-const Gs = (e) => {
+const rn = (e) => {
   let t = "";
   return e.length > 0 && (t = e.substring(0, 2), e.length > 2 && (t += "/" + e.substring(2, 4), e.length > 4 && (t += "/" + e.substring(4, 8)))), t;
-}, Ks = (e) => {
+}, cn = (e) => {
   if (e.length !== 8)
     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;
-}, Qs = ({ bind: e, required: t }) => p({
+}, dn = ({ bind: e, required: t }) => p({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), Js = ({ placeholder: e, handleInputChange: t, handleInputFocus: s }) => p({
+}), un = ({ placeholder: e, handleInputChange: t, handleInputFocus: s }) => p({
   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 ? ee.format("standard", n) : ""]
-}), Zs = ({ bind: e, required: t, toggleOpen: s, handleInputChange: n, handleInputFocus: a, placeholder: l }) => o(
+}), hn = ({ bind: e, required: t, toggleOpen: s, handleInputChange: n, handleInputFocus: a, placeholder: l }) => o(
   {
     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"
   },
   [
-    Qs({ bind: e, required: t }),
-    Js({ placeholder: l, handleInputChange: n, handleInputFocus: a }),
+    dn({ bind: e, required: t }),
+    un({ placeholder: l, handleInputChange: n, handleInputFocus: a }),
     w(
       {
         class: "shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
         click: s
       },
       [
-        Y({ html: u.calendar.days })
+        j({ html: h.calendar.days })
       ]
     )
   ]
-), Xs = ({ handleDateSelect: e, blockPriorDates: t }) => xe(
-  (s, n, a) => new te({
+), fn = ({ handleDateSelect: e, blockPriorDates: t }) => pe(
+  (s, n, a) => new se({
     cache: "dropdown",
     parent: a,
     button: a.panel,
     size: "fit"
   }, [
-    new qs({
+    new ln({
       selectedDate: a.state.selectedDate,
       selectedCallBack: e,
       blockPriorDates: t
     })
   ])
-), io = O(
+), Mo = O(
   {
     /**
      * The initial state of the DatePicker.
@@ -2343,9 +2475,9 @@ const Gs = (e) => {
      */
     handleInputChange(e) {
       const s = e.target.value.replace(/\D/g, "");
-      e.target.value = Gs(s);
-      const n = Ks(s);
-      n && (this.state.selectedDate = n, this.input.value = n, L.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n));
+      e.target.value = rn(s);
+      const n = cn(s);
+      n && (this.state.selectedDate = n, this.input.value = n, R.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n));
     },
     /**
      * Handles input focus - select all text for easy editing.
@@ -2361,7 +2493,7 @@ const Gs = (e) => {
      * @param {string} date
      */
     handleDateSelect(e) {
-      this.state.selectedDate = e, this.state.open = !1, this.input.value = e, L.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(e);
+      this.state.selectedDate = e, this.state.open = !1, this.input.value = e, R.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(e);
     },
     /**
      * Toggles the calendar popover.
@@ -2381,7 +2513,7 @@ const Gs = (e) => {
       return o(
         { class: "relative w-full max-w-[320px]" },
         [
-          Zs({
+          hn({
             toggleOpen: this.toggleOpen.bind(this),
             bind: this.bind,
             required: this.required,
@@ -2389,7 +2521,7 @@ const Gs = (e) => {
             handleInputFocus: this.handleInputFocus.bind(this),
             placeholder: this.placeholder
           }),
-          Xs({
+          fn({
             handleDateSelect: this.handleDateSelect.bind(this),
             blockPriorDates: this.blockPriorDates || !1
           })
@@ -2397,7 +2529,7 @@ const Gs = (e) => {
       );
     }
   }
-), Ae = ({ label: e, click: t }) => b(
+), Ye = ({ label: e, click: t }) => b(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -2408,22 +2540,22 @@ const Gs = (e) => {
     click: t,
     "aria-label": `${e} month`,
     variant: "icon",
-    icon: e === "Previous" ? u.chevron.single.left : u.chevron.single.right
+    icon: e === "Previous" ? h.chevron.single.left : h.chevron.single.right
   }
-), en = ({ onMonthClick: e, onYearClick: t, next: s, previous: n }) => o({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
+), gn = ({ onMonthClick: e, onYearClick: t, next: s, previous: n }) => o({ 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]]"),
-  Ae({ label: "Previous", click: n }),
-  Ae({ label: "Next", click: s })
-]), tn = (e) => o({ class: "h-9 flex items-center justify-center font-medium" }, e), sn = () => o(
+  Ye({ label: "Previous", click: n }),
+  Ye({ label: "Next", click: s })
+]), mn = (e) => o({ class: "h-9 flex items-center justify-center font-medium" }, e), bn = () => o(
   { 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(tn)
-), nn = ({ day: e, iso: t, disabled: s, isStart: n, isEnd: a, isBetween: l, isOtherMonth: i, click: c }) => {
-  let h = "ghost", m = "";
-  return n || a ? (h = "default", m = "bg-primary text-primary-foreground hover:bg-primary/90") : l && (m = "bg-accent text-accent-foreground hover:bg-accent/80"), s && (m += " opacity-50 cursor-not-allowed"), i && (m += " text-muted-foreground opacity-50"), b(
+  ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(mn)
+), xn = ({ day: e, iso: t, disabled: s, isStart: n, isEnd: a, isBetween: l, isOtherMonth: i, click: c }) => {
+  let f = "ghost", m = "";
+  return n || a ? (f = "default", m = "bg-primary text-primary-foreground hover:bg-primary/90") : l && (m = "bg-accent text-accent-foreground hover:bg-accent/80"), s && (m += " opacity-50 cursor-not-allowed"), i && (m += " text-muted-foreground opacity-50"), b(
     {
       class: `flex items-center justify-center p-0 text-sm font-medium rounded-md transition-colors ${m}`,
-      variant: h,
+      variant: f,
       disabled: s,
       click: (v) => {
         v.preventDefault(), v.stopPropagation(), s || c();
@@ -2431,27 +2563,27 @@ const Gs = (e) => {
     },
     e.toString()
   );
-}, an = ({ today: e, current: t, blockPriorDates: s, onDateClick: n }) => {
-  const { start: a, end: l } = t, i = new Date(t.year, t.month, 1).getDay(), c = new Date(t.year, t.month + 1, 0).getDate(), h = [], m = t.month === 0 ? 11 : t.month - 1, v = t.month === 0 ? t.year - 1 : t.year, _ = new Date(v, m + 1, 0).getDate(), A = t.month === 11 ? 0 : t.month + 1, E = t.month === 11 ? t.year + 1 : t.year;
-  for (let f = i - 1; f >= 0; f--) {
-    const d = _ - f, y = j(v, m, d), S = new Date(v, m, d), $ = new Date(e.year, e.month, e.date), R = S < $, q = s && R, G = a === y, K = l === y, lt = a && l && y > a && y < l;
-    h.push({
+}, pn = ({ today: e, current: t, blockPriorDates: s, onDateClick: n }) => {
+  const { start: a, end: l } = t, i = new Date(t.year, t.month, 1).getDay(), c = new Date(t.year, t.month + 1, 0).getDate(), f = [], m = t.month === 0 ? 11 : t.month - 1, v = t.month === 0 ? t.year - 1 : t.year, W = new Date(v, m + 1, 0).getDate(), U = t.month === 11 ? 0 : t.month + 1, Y = t.month === 11 ? t.year + 1 : t.year;
+  for (let g = i - 1; g >= 0; g--) {
+    const d = W - g, y = A(v, m, d), I = new Date(v, m, d), T = new Date(e.year, e.month, e.date), F = I < T, q = s && F, G = a === y, K = l === y, ut = a && l && y > a && y < l;
+    f.push({
       day: d,
       iso: y,
       disabled: q,
       isStart: G,
       isEnd: K,
-      isBetween: lt,
+      isBetween: ut,
       isOtherMonth: !0,
       click: () => n(y)
     });
   }
-  for (let f = 1; f <= c; f++) {
-    const d = j(t.year, t.month, f), y = new Date(t.year, t.month, f), S = new Date(e.year, e.month, e.date), $ = y < S, R = s && $, q = a === d, G = l === d, K = a && l && d > a && d < l;
-    h.push({
-      day: f,
+  for (let g = 1; g <= c; g++) {
+    const d = A(t.year, t.month, g), y = new Date(t.year, t.month, g), I = new Date(e.year, e.month, e.date), T = y < I, F = s && T, q = a === d, G = l === d, K = a && l && d > a && d < l;
+    f.push({
+      day: g,
       iso: d,
-      disabled: R,
+      disabled: F,
       isStart: q,
       isEnd: G,
       isBetween: K,
@@ -2461,13 +2593,13 @@ const Gs = (e) => {
       }
     });
   }
-  const ke = (7 - h.length % 7) % 7;
-  for (let f = 1; f <= ke; f++) {
-    const d = j(E, A, f), y = new Date(E, A, f), S = new Date(e.year, e.month, e.date), $ = y < S, R = s && $, q = a === d, G = l === d, K = a && l && d > a && d < l;
-    h.push({
-      day: f,
+  const $e = (7 - f.length % 7) % 7;
+  for (let g = 1; g <= $e; g++) {
+    const d = A(Y, U, g), y = new Date(Y, U, g), I = new Date(e.year, e.month, e.date), T = y < I, F = s && T, q = a === d, G = l === d, K = a && l && d > a && d < l;
+    f.push({
+      day: g,
       iso: d,
-      disabled: R,
+      disabled: F,
       isStart: q,
       isEnd: G,
       isBetween: K,
@@ -2477,21 +2609,21 @@ const Gs = (e) => {
   }
   return o(
     { class: "grid grid-cols-7 gap-1" },
-    h.map(
-      (f, d) => nn({
-        day: f.day,
-        iso: f.iso,
-        disabled: f.disabled,
-        isStart: f.isStart,
-        isEnd: f.isEnd,
-        isBetween: f.isBetween,
-        isOtherMonth: f.isOtherMonth,
-        click: f.click
+    f.map(
+      (g, d) => xn({
+        day: g.day,
+        iso: g.iso,
+        disabled: g.disabled,
+        isStart: g.isStart,
+        isEnd: g.isEnd,
+        isBetween: g.isBetween,
+        isOtherMonth: g.isOtherMonth,
+        click: g.click
       })
     )
   );
-}, on = r((e, t) => o({ class: "flex flex-auto flex-col" }, [
-  en({
+}, yn = r((e, t) => o({ class: "flex flex-auto flex-col" }, [
+  gn({
     // @ts-ignore
     onMonthClick: e.onMonthClick,
     // @ts-ignore
@@ -2506,8 +2638,8 @@ const Gs = (e) => {
     onSet: [
       "currentDate",
       () => [
-        sn(),
-        an({
+        bn(),
+        pn({
           // @ts-ignore
           today: e.today,
           // @ts-ignore
@@ -2520,7 +2652,7 @@ const Gs = (e) => {
       ]
     ]
   })
-])), ln = ({ currentMonth: e, currentYear: t, onSelect: s }) => o(
+])), wn = ({ currentMonth: e, currentYear: t, onSelect: s }) => o(
   { class: "grid grid-cols-3 gap-2" },
   ee.monthNames.map(
     (n, a) => b(
@@ -2534,25 +2666,25 @@ const Gs = (e) => {
       n.substring(0, 3)
     )
   )
-), rn = ({ start: e, end: t, selecting: s, onSelectStart: n, onSelectEnd: a }) => o({ class: "flex gap-x-2 mb-4" }, [
+), vn = ({ start: e, end: t, selecting: s, onSelectStart: n, onSelectEnd: a }) => o({ class: "flex gap-x-2 mb-4" }, [
   Q("selecting", (l) => b({
     click: n,
     variant: l === "start" ? "primary" : "outline",
     class: "flex-1"
   }, [
-    o({ class: "font-medium" }, Ee("current.start", "Start Date"))
+    o({ class: "font-medium" }, _e("current.start", "Start Date"))
   ])),
   Q("selecting", (l) => b({
     click: a,
     variant: l === "end" ? "primary" : "outline",
     class: "flex-1"
   }, [
-    o({ class: "font-medium" }, Ee("current.end", "End Date"))
+    o({ class: "font-medium" }, _e("current.end", "End Date"))
   ]))
-]), Ee = (e, t) => [`[[${e}]]`, (s) => s == null ? t : cn(s)], cn = (e) => {
+]), _e = (e, t) => [`[[${e}]]`, (s) => s == null ? t : kn(s)], kn = (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()]}`;
-}, dn = ({ currentYear: e, onSelect: t }) => {
+}, Cn = ({ currentYear: e, onSelect: t }) => {
   const s = e - 50, n = Array.from({ length: 101 }, (a, l) => s + l);
   return o(
     { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
@@ -2570,7 +2702,7 @@ const Gs = (e) => {
     )
   );
 };
-class un extends C {
+class Sn extends S {
   /**
    * Declare compiler props.
    *
@@ -2593,7 +2725,7 @@ class un extends C {
         year: t.getFullYear()
       },
       monthName: this.getMonthName(n),
-      currentData: `${s.getFullYear()}-${P(s.getMonth() + 1)}-${P(s.getDate())}`,
+      currentData: `${s.getFullYear()}-${B(s.getMonth() + 1)}-${B(s.getDate())}`,
       current: {
         date: t.getDate(),
         month: n,
@@ -2657,7 +2789,7 @@ class un extends C {
    */
   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}-${P(t + 1)}-${P(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}-${B(t + 1)}-${B(a.date)}`;
   }
   /**
    * Render the range calendar.
@@ -2667,7 +2799,7 @@ class un extends C {
   render() {
     const { today: t, current: s, selecting: n } = this.data, { start: a, end: l } = s;
     return o({ class: "range-calendar border border-border rounded-lg shadow-md p-4 w-full max-w-sm min-w-80" }, [
-      rn({
+      vn({
         start: a,
         end: l,
         selecting: n,
@@ -2678,10 +2810,10 @@ class un extends C {
           i.preventDefault(), i.stopPropagation(), this.data.selecting = "end";
         }
       }),
-      T("view", (i) => {
+      M("view", (i) => {
         switch (i) {
           case "months":
-            return ln(
+            return wn(
               {
                 currentMonth: s.month,
                 currentYear: s.year,
@@ -2691,7 +2823,7 @@ class un extends C {
               }
             );
           case "years":
-            return dn(
+            return Cn(
               {
                 currentYear: s.year,
                 onSelect: (c) => {
@@ -2700,7 +2832,7 @@ class un extends C {
               }
             );
           default:
-            return on({
+            return yn({
               // @ts-ignore
               monthName: this.data.monthName,
               year: s.year,
@@ -2715,12 +2847,12 @@ class un extends C {
                 c.preventDefault(), c.stopPropagation(), this.state.view = "years";
               },
               next: () => {
-                const c = this.data.current, h = c.month === 11 ? { month: 0, year: c.year + 1 } : { month: c.month + 1, year: c.year };
-                this.setCurrent(h);
+                const c = this.data.current, f = c.month === 11 ? { month: 0, year: c.year + 1 } : { month: c.month + 1, year: c.year };
+                this.setCurrent(f);
               },
               previous: () => {
-                const c = this.data.current, h = c.month === 0 ? { month: 11, year: c.year - 1 } : { month: c.month - 1, year: c.year };
-                this.setCurrent(h);
+                const c = this.data.current, f = c.month === 0 ? { month: 11, year: c.year - 1 } : { month: c.month - 1, year: c.year };
+                this.setCurrent(f);
               }
             });
         }
@@ -2728,35 +2860,35 @@ class un extends C {
     ]);
   }
 }
-const hn = ({ bind: e, required: t }) => p({
+const $n = ({ bind: e, required: t }) => p({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), fn = ({ bind: e, required: t, toggleOpen: s }) => w({
+}), Dn = ({ bind: e, required: t, toggleOpen: s }) => w({
   class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 px-4 py-2",
   click: s
 }, [
-  hn({ bind: e, required: t }),
-  W(({ state: n }) => [
-    g(U.date(["[[start]]", n], "Start Date")),
-    g(" - "),
-    g(U.date(["[[end]]", n], "End Date"))
+  $n({ bind: e, required: t }),
+  V(({ state: n }) => [
+    u(_.date(["[[start]]", n], "Start Date")),
+    u(" - "),
+    u(_.date(["[[end]]", n], "End Date"))
   ]),
-  Y({ html: u.calendar.days })
-]), gn = ({ handleDateSelect: e, blockPriorDates: t }) => xe((s, n, a) => new te({
+  j({ html: h.calendar.days })
+]), In = ({ handleDateSelect: e, blockPriorDates: t }) => pe((s, n, a) => new se({
   cache: "dropdown",
   parent: a,
   button: a.panel,
   size: "xl"
 }, [
-  new un({
+  new Sn({
     startDate: a.state.start,
     endDate: a.state.end,
     onRangeSelect: e,
     blockPriorDates: t
   })
-])), co = O(
+])), Po = O(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -2789,15 +2921,15 @@ const hn = ({ 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}`, L.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}`, R.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: n }, this.parent);
       };
       return o({ class: "relative w-full max-w-[320px]" }, [
-        fn({
+        Dn({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        gn({
+        In({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
@@ -2805,11 +2937,11 @@ const hn = ({ bind: e, required: t }) => p({
     }
   }
 );
-function mn(e) {
+function Tn(e) {
   let t = "";
   return e.length > 0 && (t = e.substring(0, 2), e.length > 2 && (t += ":" + e.substring(2, 4))), t;
 }
-function bn(e) {
+function Mn(e) {
   if (e.length < 4)
     return { formattedTime: null, hour: null, minute: null, meridian: null };
   const t = parseInt(e.substring(0, 2), 10), s = parseInt(e.substring(2, 4), 10);
@@ -2823,7 +2955,7 @@ function bn(e) {
     meridian: a
   };
 }
-function xn({ bind: e, required: t }) {
+function Pn({ bind: e, required: t }) {
   return p({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
@@ -2831,7 +2963,7 @@ function xn({ bind: e, required: t }) {
     required: t
   });
 }
-function pn({ placeholder: e, handleInputChange: t, handleInputFocus: s }) {
+function Bn({ placeholder: e, handleInputChange: t, handleInputFocus: s }) {
   return p({
     cache: "timeInput",
     class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
@@ -2841,27 +2973,27 @@ function pn({ placeholder: e, handleInputChange: t, handleInputFocus: s }) {
     onState: ["selectedTime", (n) => n || ""]
   });
 }
-function yn({ bind: e, required: t, toggleOpen: s, handleInputChange: n, handleInputFocus: a, placeholder: l }) {
+function zn({ bind: e, required: t, toggleOpen: s, handleInputChange: n, handleInputFocus: a, placeholder: l }) {
   return o(
     {
       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"
     },
     [
-      xn({ bind: e, required: t }),
-      pn({ placeholder: l, handleInputChange: n, handleInputFocus: a }),
+      Pn({ bind: e, required: t }),
+      Bn({ placeholder: l, handleInputChange: n, handleInputFocus: a }),
       w(
         {
           class: "shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
           click: s
         },
         [
-          Y({ html: u.clock })
+          j({ html: h.clock })
         ]
       )
     ]
   );
 }
-function ie({ items: e, handleTimeSelect: t, state: s, stateValue: n, pad: a = !1 }) {
+function ce({ items: e, handleTimeSelect: t, state: s, stateValue: n, pad: a = !1 }) {
   return o(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
     e.map((l) => {
@@ -2875,9 +3007,9 @@ function ie({ items: e, handleTimeSelect: t, state: s, stateValue: n, pad: a = !
     })
   );
 }
-function wn({ handleTimeSelect: e }) {
-  return xe(
-    (t, s, n) => new te(
+function On({ handleTimeSelect: e }) {
+  return pe(
+    (t, s, n) => new se(
       {
         cache: "dropdown",
         parent: n,
@@ -2892,7 +3024,7 @@ function wn({ handleTimeSelect: e }) {
               { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
               [
                 // Hours column
-                ie({
+                ce({
                   items: Array.from({ length: 12 }, (a, l) => l + 1),
                   handleTimeSelect: e,
                   state: n.state,
@@ -2900,7 +3032,7 @@ function wn({ handleTimeSelect: e }) {
                   pad: !0
                 }),
                 // Minutes column
-                ie({
+                ce({
                   items: Array.from({ length: 60 }, (a, l) => l),
                   handleTimeSelect: e,
                   state: n.state,
@@ -2908,7 +3040,7 @@ function wn({ handleTimeSelect: e }) {
                   pad: !0
                 }),
                 // AM/PM column
-                ie({
+                ce({
                   items: ["AM", "PM"],
                   handleTimeSelect: e,
                   state: n.state,
@@ -2922,7 +3054,7 @@ function wn({ handleTimeSelect: e }) {
     )
   );
 }
-function Ue(e) {
+function Ve(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);
@@ -2935,7 +3067,7 @@ function Ue(e) {
     meridian: l
   });
 }
-const uo = O(
+const Bo = O(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -2943,7 +3075,7 @@ const uo = O(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: n } = Ue(e);
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: n } = Ve(e);
       return {
         selectedTime: e,
         open: !1,
@@ -2959,7 +3091,7 @@ const uo = O(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: s } = Ue(this.input.value);
+        const { hour: e, minute: t, meridian: s } = Ve(this.input.value);
         this.state.set({
           hour: e,
           minute: t,
@@ -2983,14 +3115,14 @@ const uo = O(
      * @param {Event} e
      */
     handleInputChange(e) {
-      let t = e.target.value.replace(/[^\d]/g, ""), s = mn(t);
-      const n = bn(t);
+      let t = e.target.value.replace(/[^\d]/g, ""), s = Tn(t);
+      const n = Mn(t);
       n.formattedTime && (s = n.formattedTime, this.state.set({
         hour: n.hour,
         minute: n.minute,
         meridian: n.meridian,
         selectedTime: n.formattedTime
-      }), this.input.value = n.formattedTime, L.trigger("change", this.input), typeof this.change == "function" && this.change(n.formattedTime)), e.target.value = s;
+      }), this.input.value = n.formattedTime, R.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.
@@ -3008,7 +3140,7 @@ const uo = O(
     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, L.trigger("change", this.input), typeof this.change == "function" && this.change(n);
+        this.state.selectedTime = n, this.state.open = !1, this.input.value = n, R.trigger("change", this.input), typeof this.change == "function" && this.change(n);
       }
     },
     /**
@@ -3020,7 +3152,7 @@ const uo = O(
       return o(
         { class: "relative w-full max-w-[320px]" },
         [
-          yn({
+          zn({
             toggleOpen: this.toggleOpen.bind(this),
             bind: this.bind,
             required: this.required,
@@ -3028,18 +3160,18 @@ const uo = O(
             handleInputFocus: this.handleInputFocus.bind(this),
             placeholder: this.placeholder
           }),
-          wn({
+          On({
             handleTimeSelect: this.handleTimeSelect.bind(this)
           })
         ]
       );
     }
   }
-), vn = (e, t) => o({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+), Nn = (e, t) => o({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
   x({ size: "lg" }, e)
-]), kn = ({ title: e }) => Z({ class: "flex flex-auto items-center" }, [
+]), Fn = ({ title: e }) => X({ class: "flex flex-auto items-center" }, [
   J({ class: "text-lg font-semibold" }, e)
-]), ho = r((e, t) => ht(
+]), zo = r((e, t) => bt(
   {
     class: `fixed pullUpIn z-30 w-[98%] border md:w-full max-w-lg bg-popover text-foreground shadow-lg duration-200
 				rounded-lg flex flex-auto flex-col
@@ -3052,21 +3184,21 @@ const uo = O(
     o({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
       // @ts-ignore
-      e.icon && vn(e.icon, e.iconColor),
+      e.icon && Nn(e.icon, e.iconColor),
       o({ class: "flex flex-auto flex-col gap-4" }, [
         o({ class: "flex flex-auto flex-col gap-y-2" }, [
-          kn(e),
+          Fn(e),
           // @ts-ignore
           e.description && k({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
           o({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
         // @ts-ignore
-        e.buttons && fe({ 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 && ge({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
       ])
     ])
   ]
-)), fo = r((e, t = []) => o({ class: "w-full max-w-md p-6 m-auto" }, [
-  Je({ class: "flex flex-auto flex-col" }, [
+)), Oo = r((e, t = []) => o({ class: "w-full max-w-md p-6 m-auto" }, [
+  st({ class: "flex flex-auto flex-col" }, [
     o({ class: "flex flex-auto flex-col gap-y-4" }, [
       o({ class: "flex flex-auto items-center justify-center" }, [
         // @ts-ignore
@@ -3075,7 +3207,7 @@ const uo = O(
           x({ size: "lg" }, e.icon)
         ])
       ]),
-      Z({ class: "py-4 text-center" }, [
+      X({ class: "py-4 text-center" }, [
         // @ts-ignore
         J({ class: "text-xl font-bold" }, e.title),
         // @ts-ignore
@@ -3096,28 +3228,28 @@ r(({ value: e, label: t }) => w({
   dataSet: ["performance", ["state", e, "active"]],
   click: (s, { state: n }) => n.performance = e
 }, t));
-const Cn = (e, t) => {
+const Ln = (e, t) => {
   const s = e.toggleAllSelectedRows();
   t.state.checked = !s;
-}, Sn = (e) => We({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
-  W((t) => new Yt({ class: "mr-2", onChange: (s, n) => Cn(t, n) }))
-]), $n = ({ align: e, sortable: t, key: s, label: n, sort: a, class: l }) => {
+}, An = (e) => Ke({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
+  V((t) => new Wt({ class: "mr-2", onChange: (s, n) => Ln(t, n) }))
+]), Rn = ({ align: e, sortable: t, key: s, label: n, sort: a, class: l }) => {
   const i = e || "justify-start";
-  return We({
+  return Ke({
     class: `cursor-pointer py-3 px-4 text-base ${l || ""}`,
     click: t && (() => a(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${i}` }, [
-      g(n),
-      t && Y({ class: "ml-2", html: u.arrows.upDown })
+      u(n),
+      t && j({ class: "ml-2", html: h.arrows.upDown })
     ])
   ]);
-}, ve = (e) => ft([
-  gt({
+}, Se = (e) => xt([
+  pt({
     class: "text-muted-foreground border-b",
     map: [
       e.headers,
-      (t) => t.label === "checkbox" ? Sn({ toggle: e.toggle }) : $n({
+      (t) => t.label === "checkbox" ? An({ toggle: e.toggle }) : Rn({
         align: t.align,
         sortable: t.sortable,
         key: t.key,
@@ -3126,7 +3258,7 @@ const Cn = (e, t) => {
       })
     ]
   })
-]), Dn = ({ key: e, rows: t, selectRow: s, rowItem: n, emptyState: a, skeleton: l, columnCount: i }) => new wt({
+]), jn = ({ key: e, rows: t, selectRow: s, rowItem: n, emptyState: a, skeleton: l, columnCount: i }) => new Ct({
   cache: "list",
   key: e,
   items: t,
@@ -3136,7 +3268,7 @@ const Cn = (e, t) => {
   skeleton: l,
   columnCount: i
 });
-class et extends C {
+class ot extends S {
   /**
    * Initializes component data.
    *
@@ -3217,12 +3349,12 @@ class et extends C {
     return o({ class: "w-full flex flex-auto flex-col" }, [
       Q("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${t} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        pe({ class: "w-full" }, [
+        ye({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && ve({ headers: this.headers, sort: (n) => this.sortRows(n) }),
+          this.headers && Se({ headers: this.headers, sort: (n) => this.sortRows(n) }),
           // @ts-ignore
           this.customHeader ?? null,
-          Dn({
+          jn({
             // @ts-ignore
             key: this.key,
             // @ts-ignore
@@ -3301,7 +3433,7 @@ class et extends C {
     this.data.selectedRows = [];
   }
 }
-const In = (e) => new vt({
+const En = (e) => new St({
   cache: "list",
   loadMoreItems: e.loadMoreItems,
   offset: e.offset,
@@ -3314,7 +3446,7 @@ const In = (e) => new vt({
   skeleton: e.skeleton,
   columnCount: e.columnCount
 });
-class Tn extends et {
+class Hn extends ot {
   /**
    * Renders the DataTable component.
    *
@@ -3325,12 +3457,12 @@ class Tn extends et {
     return o({ class: "w-full flex flex-auto flex-col" }, [
       Q("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${t} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        pe({ class: "w-full" }, [
+        ye({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && ve({ headers: this.headers, sort: (n) => this.sortRows(n) }),
+          this.headers && Se({ headers: this.headers, sort: (n) => this.sortRows(n) }),
           // @ts-ignore
           this.customHeader ?? null,
-          In({
+          En({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -3366,7 +3498,7 @@ class Tn extends et {
     this.list.refresh();
   }
 }
-const go = r((e) => new Tn(
+const No = r((e) => new Hn(
   {
     // @ts-ignore
     cache: e.cache ?? "list",
@@ -3397,7 +3529,7 @@ const go = r((e) => new Tn(
     // @ts-ignore
     skeleton: e.skeleton
   }
-)), Mn = (e) => new kt({
+)), Un = (e) => new $t({
   cache: "list",
   scrollContainer: e.scrollContainer,
   loadMoreItems: e.loadMoreItems,
@@ -3411,7 +3543,7 @@ const go = r((e) => new Tn(
   skeleton: e.skeleton,
   columnCount: e.columnCount
 });
-class Bn extends et {
+class Yn extends ot {
   /**
    * Renders the DataTable component.
    *
@@ -3422,12 +3554,12 @@ class Bn extends et {
     return o({ class: "w-full flex flex-auto flex-col" }, [
       Q("hasItems", (n) => n === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${t} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        pe({ class: "w-full" }, [
+        ye({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && ve({ headers: this.headers, sort: (n) => this.sortRows(n) }),
+          this.headers && Se({ headers: this.headers, sort: (n) => this.sortRows(n) }),
           // @ts-ignore
           this.customHeader ?? null,
-          Mn({
+          Un({
             // @ts-ignore
             scrollContainer: this.scrollContainer,
             // @ts-ignore
@@ -3465,7 +3597,7 @@ class Bn extends et {
     this.list.refresh();
   }
 }
-const mo = r((e) => new Bn(
+const Fo = r((e) => new Yn(
   {
     // @ts-ignore
     cache: e.cache ?? "list",
@@ -3498,28 +3630,28 @@ const mo = r((e) => new Bn(
     // @ts-ignore
     skeleton: e.skeleton
   }
-)), Pn = r(({ name: e, email: t }) => o({ class: "min-w-0 flex-auto" }, [
+)), _n = r(({ name: e, email: t }) => o({ class: "min-w-0 flex-auto" }, [
   k({ class: "text-base font-semibold leading-6 m-0" }, e),
   k({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, t)
-])), zn = () => o({ class: "flex items-center gap-x-1.5" }, [
+])), Vn = () => o({ class: "flex items-center gap-x-1.5" }, [
   o({ class: "flex-none rounded-full bg-emerald-500/20 p-1" }, [
     o({ class: "h-1.5 w-1.5 rounded-full bg-emerald-500" })
   ]),
   k({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), On = (e) => k({ class: "text-xs leading-5 text-muted-foreground" }, [
-  g("Last seen "),
-  mt({ datetime: e }, "3h ago")
-]), Nn = (e, t) => e === "online" ? zn() : On(t), Rn = r(({ role: e, lastSeen: t, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+]), Wn = (e) => k({ class: "text-xs leading-5 text-muted-foreground" }, [
+  u("Last seen "),
+  yt({ datetime: e }, "3h ago")
+]), qn = (e, t) => e === "online" ? Vn() : Wn(t), Gn = r(({ role: e, lastSeen: t, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
   k({ class: "text-sm leading-6 m-0" }, e),
-  Nn(s, t)
-])), Fn = (e) => e.split(" ").map((s) => s[0]).join(""), jn = r((e) => be({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  qn(s, t)
+])), Kn = (e) => e.split(" ").map((s) => s[0]).join(""), Qn = r((e) => xe({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
   o({ class: "flex min-w-0 gap-x-4" }, [
     // @ts-ignore
-    ys({ src: e.image, alt: e.name, fallbackText: Fn(e.name) }),
+    zs({ src: e.image, alt: e.name, fallbackText: Kn(e.name) }),
     // @ts-ignore
-    Pn({ name: e.name, email: e.email })
+    _n({ name: e.name, email: e.email })
   ]),
-  Rn({
+  Gn({
     // @ts-ignore
     role: e.role,
     // @ts-ignore
@@ -3527,16 +3659,16 @@ const mo = r((e) => new Bn(
     // @ts-ignore
     status: e.status
   })
-])), bo = r((e) => new Ct({
+])), Lo = r((e) => new Dt({
   cache: "list",
   key: "name",
   // @ts-ignore
   items: e.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: jn
+  rowItem: Qn
 }));
-class Ln extends C {
+class Jn extends S {
   /**
    * This will declare the props for the compiler.
    *
@@ -3597,14 +3729,14 @@ class Ln extends C {
     });
   }
 }
-const Hn = r(({ options: e, click: t }, s) => ({
+const Xn = r(({ options: e, click: t }, s) => ({
   tag: "li",
   ...{
     class: `relative flex flex-row w-auto text-left p-0 transition-all cursor-pointer min-w-[48px] option${e ? " sub" : ""}`,
     click: t
   },
   children: s
-})), An = (e, t = null, s = !1) => [
+})), Zn = (e, t = null, s = !1) => [
   t && o({
     class: "icon w-12 rounded-md flex items-center justify-center min-w-12",
     onState: ["selected", {
@@ -3613,8 +3745,8 @@ const Hn = r(({ options: e, click: t }, s) => ({
   }, [
     x({ size: "sm" }, t)
   ]),
-  V({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, e),
-  s && g(
+  E({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, e),
+  s && u(
     {
       class: "flex justify-center items-center px-1 transition-all text-muted-foreground mr-2",
       onState: [
@@ -3627,11 +3759,11 @@ const Hn = r(({ options: e, click: t }, s) => ({
       ]
     },
     [
-      x({ size: "xs" }, u.chevron.single.down)
+      x({ size: "xs" }, h.chevron.single.down)
     ]
   )
 ];
-class tt extends C {
+class lt extends S {
   /**
    * This will declare the props for the compiler.
    *
@@ -3648,7 +3780,7 @@ class tt extends C {
    */
   render() {
     const t = !this.options && this.callBack;
-    return Hn(
+    return Xn(
       { options: this.options, click: t },
       [
         this.addLink()
@@ -3662,8 +3794,8 @@ class tt extends C {
    * @protected
    */
   addLink() {
-    const t = this.options && this.options.length > 0, s = this.content || An(String(this.label), this.icon, t);
-    return this.href ? new pt(
+    const t = this.options && this.options.length > 0, s = this.content || Zn(String(this.label), this.icon, t);
+    return this.href ? new vt(
       {
         class: "flex flex-auto flex-row rounded-md transition-all overflow-x-hidden",
         cache: "link",
@@ -3672,7 +3804,7 @@ class tt extends C {
         exact: this.exact || !1
       },
       s
-    ) : new Ln({
+    ) : new Jn({
       class: "flex flex-auto flex-row rounded-md transition-all overflow-x-hidden",
       cache: "link",
       checkCallBack: this.checkCallBack
@@ -3690,10 +3822,10 @@ class tt extends C {
     this.link.update(t);
   }
 }
-const En = r(({ map: e }, t) => X({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: e }, [
-  Ye({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, t)
+const ea = r(({ map: e }, t) => Z({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: e }, [
+  We({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, t)
 ]));
-class Un extends C {
+class ta extends S {
   /**
    * This will declare the props for the compiler.
    *
@@ -3709,8 +3841,8 @@ class Un extends C {
    */
   render() {
     const t = this.mapOptions(this.options), s = this.class || "", n = this.mobileBorder ? "border md:border-0 rounded-md" : "";
-    return me({ class: `navigation flex flex-auto flex-col ${s}` }, [
-      X({
+    return be({ class: `navigation flex flex-auto flex-col ${s}` }, [
+      Z({
         class: `relative group flex flex-col gap-2 py-2 px-2 list-none m-0 ${n}`,
         map: t
       }),
@@ -3742,7 +3874,7 @@ class Un extends C {
    */
   addGroup(t) {
     const s = this.mapOptions(t.options);
-    return En({ map: s }, t.group);
+    return ea({ map: s }, t.group);
   }
   /**
    * This will add a link.
@@ -3751,10 +3883,10 @@ class Un extends C {
    * @returns {object}
    */
   addLink(t) {
-    return new tt(t);
+    return new lt(t);
   }
 }
-class st extends Un {
+class rt extends ta {
   onCreated() {
     this.links = [];
   }
@@ -3765,7 +3897,7 @@ class st extends Un {
    * @returns {object}
    */
   setupSubNav(t) {
-    return new Wn(
+    return new aa(
       {
         parentLink: t,
         options: t.options
@@ -3789,7 +3921,7 @@ class st extends Un {
    * @returns {object}
    */
   addLink(t) {
-    const s = new tt(t);
+    const s = new lt(t);
     if (this.links.push(s), !s.options)
       return s;
     const n = this.addSubNav(s);
@@ -3800,11 +3932,11 @@ class st extends Un {
     };
   }
 }
-const Yn = (e, t) => new RegExp(`${e}($|/|\\.).*`).test(t), Vn = (e, t) => {
+const sa = (e, t) => new RegExp(`${e}($|/|\\.).*`).test(t), na = (e, t) => {
   const s = e.link.panel.pathname;
-  return !s && e.isSelected() ? !0 : e.exact ? t === s : Yn(s, t);
+  return !s && e.isSelected() ? !0 : e.exact ? t === s : sa(s, t);
 };
-class Wn extends st {
+class aa extends rt {
   /**
    * This will declare the props for the compiler.
    *
@@ -3820,8 +3952,8 @@ class Wn extends st {
    */
   render() {
     const t = `navigation flex flex-auto flex-col sub ${this.mainClassName || ""}`, s = this.mapOptions(this.options);
-    return me({ class: t, onState: this.onState() }, [
-      X({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...s, ...this.addSubs(), this.addWatcher()])
+    return be({ class: t, onState: this.onState() }, [
+      Z({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...s, ...this.addSubs(), this.addWatcher()])
     ]);
   }
   /**
@@ -3833,7 +3965,7 @@ class Wn extends st {
   addWatcher() {
     return {
       watch: {
-        value: ["[[path]]", Ce.data],
+        value: ["[[path]]", De.data],
         callBack: this.updateLinks.bind(this)
       }
     };
@@ -3874,7 +4006,7 @@ class Wn extends st {
    * @returns {void}
    */
   afterSetup() {
-    const t = Ce.data.path;
+    const t = De.data.path;
     this.updateLinks(t);
   }
   /**
@@ -3886,27 +4018,27 @@ class Wn extends st {
   updateLinks(t) {
     let s = !1;
     for (const n of this.links)
-      if (n.rendered && (s = Vn(n, t), s === !0))
+      if (n.rendered && (s = na(n, t), s === !0))
         break;
     this.parentLink.update(s);
   }
 }
-const _n = (e) => ge({ class: "text-lg ml-2" }, e), qn = (e) => o({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
+const oa = (e) => me({ class: "text-lg ml-2" }, e), la = (e) => o({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
   b({
     variant: "icon",
     class: "m-2",
     click: (t, { state: s }) => s.toggle("open"),
-    icon: u.arrows.left
+    icon: h.arrows.left
   }),
-  e.title && _n(e.title)
-]), Gn = () => o({
+  e.title && oa(e.title)
+]), ra = () => o({
   class: `
 			absolute inset-0 bg-black/40 z-[-1] fadeIn
 			transition-opacity duration-200
 		`,
   click: (e, { state: t }) => t.open = !1
 });
-class Kn extends C {
+class ia extends S {
   /**
    * This will declare the props for the compiler.
    *
@@ -3925,7 +4057,7 @@ class Kn extends C {
       class: "fixed inset-0 z-50",
       style: "[[typeClass]]"
     }, [
-      Gn(),
+      ra(),
       // Popover Content
       o({
         class: `
@@ -3934,7 +4066,7 @@ class Kn extends C {
         dataSet: ["open", ["expanded", !0, "true"]]
       }, [
         o({ class: "flex flex-auto flex-col w-full h-full overflow-y-auto max-h-[85vh] rounded-md bg-popover border" }, [
-          qn({ title: this.title }),
+          la({ title: this.title }),
           o({ class: "flex flex-auto flex-col" }, this.children)
         ])
       ])
@@ -3972,31 +4104,31 @@ class Kn extends C {
     this.container = app.root;
   }
 }
-const nt = () => b({ class: "m-2", variant: "ghost", addState() {
+const it = () => b({ class: "m-2", variant: "ghost", addState() {
   return {
     open: !1
   };
 }, click: (e, { state: t }) => t.toggle("open") }, [
-  x({}, u.bar.three)
-]), Qn = (e) => ge({ class: "text-lg ml-2" }, e), Jn = (e) => o({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
-  nt(),
-  e.title && Qn(e.title)
-]), at = (e, t) => {
+  x({}, h.bar.three)
+]), ca = (e) => me({ class: "text-lg ml-2" }, e), da = (e) => o({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
+  it(),
+  e.title && ca(e.title)
+]), ct = (e, t) => {
   e.forEach((s) => {
     if (s.options) {
-      at(s.options, t);
+      ct(s.options, t);
       return;
     }
     s.callBack = t;
   });
-}, ot = (e) => o({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
-  T(
+}, dt = (e) => o({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
+  M(
     "open",
     (t) => t ? [
-      new Kn({ title: e.title }, [
-        W(({ state: s }) => {
+      new ia({ title: e.title }, [
+        V(({ state: s }) => {
           const n = (a) => s.open = !1;
-          return at(e.options, n), new st(
+          return ct(e.options, n), new rt(
             {
               options: e.options
             }
@@ -4005,23 +4137,23 @@ const nt = () => b({ class: "m-2", variant: "ghost", addState() {
       ])
     ] : null
   )
-]), xo = r((e) => o({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
+]), Ao = r((e) => o({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
   o([
-    nt(),
-    ot(e)
+    it(),
+    dt(e)
   ])
-])), po = r((e) => o({ cache: "mobileNav", class: "flex flex-auto flex-col w-full relative lg:hidden" }, [
+])), Ro = r((e) => o({ cache: "mobileNav", class: "flex flex-auto flex-col w-full relative lg:hidden" }, [
   o({ class: "flex flex-auto flex-col w-full" }, [
-    Jn(e),
-    ot(e)
+    da(e),
+    dt(e)
   ])
-])), yo = r((e) => {
+])), jo = r((e) => {
   const t = e.margin || "m-4 ml-0";
   return e.allowHistory = e.allowHistory === !0, o({ class: `flex-none ${t}` }, [
     b({ variant: "back", class: "ghost", ...e })
   ]);
 });
-class Zn extends C {
+class ua extends S {
   /**
    * This will declare the props for the compiler.
    *
@@ -4116,13 +4248,13 @@ class Zn extends C {
     return this.children;
   }
 }
-_e.addType("dockableOverlay", (e) => {
+Je.addType("dockableOverlay", (e) => {
   if (!e)
     return;
   const t = e.component;
   t && t.rendered === !0 && t.state.docked === !1 && t.destroy();
 });
-class wo extends Zn {
+class Eo extends ua {
   /**
    * This will stop presistence.
    *
@@ -4192,7 +4324,7 @@ class wo extends Zn {
    * @returns {void}
    */
   afterSetup() {
-    _e.add(
+    Je.add(
       this.container,
       "dockableOverlay",
       {
@@ -4227,7 +4359,7 @@ class wo extends Zn {
     this.state.docked = this.canDock();
   }
 }
-const Xn = r(({ index: e, click: t, state: s }, n) => be({
+const ha = r(({ index: e, click: t, state: s }, n) => xe({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -4236,10 +4368,10 @@ const Xn = r(({ index: e, click: t, state: s }, n) => be({
     }]
   ],
   click: () => t(e)
-}, n)), ea = r(({ selectOption: e, state: t }) => X({
+}, n)), fa = r(({ selectOption: e, state: t }) => Z({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (s, n) => Xn({ index: n, click: e, state: t }, s.label)]
-})), ta = r((e) => o({ class: "relative flex flex-auto items-center" }, [
+  for: ["filteredOptions", (s, n) => ha({ index: n, click: e, state: t }, s.label)]
+})), ga = r((e) => o({ class: "relative flex flex-auto items-center" }, [
   N({
     cache: "input",
     // @ts-ignore
@@ -4264,20 +4396,20 @@ const Xn = r(({ index: e, click: t, state: s }, n) => be({
     // @ts-ignore
     x({ size: "sm" }, e.icon)
   ])
-])), sa = (e) => o({
+])), ma = (e) => o({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (t, s, n) => {
     if (t)
-      return new te({
+      return new se({
         cache: "dropdown",
         parent: n,
         button: n.input,
         size: "xl"
       }, [
-        ea(e)
+        fa(e)
       ]);
   }]
-}), vo = M(
+}), Ho = P(
   {
     /**
      * This will set up the data object.
@@ -4374,7 +4506,7 @@ const Xn = r(({ index: e, click: t, state: s }, n) => be({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        ta({
+        ga({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -4386,7 +4518,7 @@ const Xn = r(({ index: e, click: t, state: s }, n) => be({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        sa({
+        ma({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -4397,8 +4529,8 @@ const Xn = r(({ index: e, click: t, state: s }, n) => be({
       ]);
     }
   }
-), ko = r((e) => {
-  const t = e.icon ?? u.magnifyingGlass.default;
+), Uo = r((e) => {
+  const t = e.icon ?? h.magnifyingGlass.default;
   return o({
     // @ts-ignore
     class: `relative flex items-center w-full rounded-xl bg-muted/30 focus-within:ring-2 focus-within:ring-ring transition-all ${e.containerClass || ""}`
@@ -4433,7 +4565,7 @@ const Xn = r(({ index: e, click: t, state: s }, n) => be({
     })
   ]);
 });
-class na extends C {
+class ba extends S {
   /**
    * This will declare the props for the compiler.
    *
@@ -4451,7 +4583,7 @@ class na extends C {
     return o({ class: `${this.class || ""}` }, this.children);
   }
 }
-class aa extends na {
+class xa extends ba {
   /**
    * This will be called every time the route
    * is activated.
@@ -4461,15 +4593,15 @@ class aa extends na {
   update(t) {
   }
 }
-const oa = r((e, t) => (e.class = "basic-page pt-[80px] sm:pt-0 flex flex-auto flex-col " + (e.class || ""), {
+const pa = r((e, t) => (e.class = "basic-page pt-[80px] sm:pt-0 flex flex-auto flex-col " + (e.class || ""), {
   tag: "section",
   ...e,
   children: t
-})), la = r(({ title: e, description: t }) => Z({ class: "sm:py-8 px-6 md:px-5 flex flex-col" }, [
-  bt({ class: "scroll-m-20 text-3xl font-bold tracking-tight" }, e),
+})), ya = r(({ title: e, description: t }) => X({ class: "sm:py-8 px-6 md:px-5 flex flex-col" }, [
+  wt({ 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)
 ]));
-class Co extends aa {
+class Yo extends xa {
   /**
    * This will declare the props for the compiler.
    *
@@ -4484,133 +4616,141 @@ class Co extends aa {
    * @returns {object}
    */
   render() {
-    return oa([
-      la({
+    return pa([
+      ya({
         title: this.title,
         description: this.description
       }),
-      St(this.children)
+      It(this.children)
     ]);
   }
 }
 export {
-  Oa as $,
-  Ya as A,
-  yo as B,
-  qs as C,
-  et as D,
-  Ka as E,
-  ho as F,
-  wo as G,
-  oo as H,
-  go as I,
-  ka as J,
-  fo as K,
-  wa as L,
-  Ra as M,
-  Je as N,
-  Va as O,
-  _a as P,
-  Wa as Q,
-  ls as R,
-  ns as S,
-  qa as T,
-  jt as U,
-  ts as V,
-  ss as W,
-  as as X,
-  j as Y,
-  Co as Z,
-  $n as _,
-  ys as a,
-  P as a$,
-  ce as a0,
-  qt as a1,
-  so as a2,
-  st as a3,
-  N as a4,
-  Ft as a5,
-  ya as a6,
-  no as a7,
-  tt as a8,
-  oa as a9,
-  vo as aA,
-  ta as aB,
-  ja as aC,
-  ko as aD,
-  Qa as aE,
-  Wn as aF,
-  ve as aG,
-  va as aH,
-  Ca as aI,
-  eo as aJ,
-  Da as aK,
-  uo as aL,
-  Jn as aM,
-  to as aN,
-  ba as aO,
-  Ua as aP,
-  x as aQ,
-  za as aR,
-  bo as aS,
-  jn as aT,
-  qe as aU,
-  O as aV,
+  go as $,
+  co as A,
+  jo as B,
+  ln as C,
+  ot as D,
+  bo as E,
+  zo as F,
+  Eo as G,
+  Do as H,
+  No as I,
+  Ua as J,
+  Oo as K,
+  Oa as L,
+  to as M,
+  Fa as N,
+  te as O,
+  Aa as P,
+  La as Q,
+  Ea as R,
+  Na as S,
+  ja as T,
+  Ra as U,
+  st as V,
+  uo as W,
+  fo as X,
+  ho as Y,
+  ys as Z,
+  bs as _,
+  zs as a,
+  Qn as a$,
+  Et as a0,
+  gs as a1,
+  ms as a2,
+  xs as a3,
+  A as a4,
+  Yo as a5,
+  Rn as a6,
+  Za as a7,
+  de as a8,
+  ls as a9,
+  la as aA,
+  oo as aB,
+  _a as aC,
+  Sn as aD,
+  so as aE,
+  lo as aF,
+  ro as aG,
+  Fo as aH,
+  Ho as aI,
+  ga as aJ,
+  no as aK,
+  Uo as aL,
+  xo as aM,
+  aa as aN,
+  Se as aO,
+  Ha as aP,
+  Ya as aQ,
+  vo as aR,
+  Wa as aS,
+  Bo as aT,
+  da as aU,
+  ko as aV,
   Ma as aW,
-  Rs as aX,
-  es as aY,
-  ga as aZ,
-  fa as a_,
-  Ie as aa,
-  Ps as ab,
-  xo as ac,
-  po as ad,
-  Ws as ae,
-  Ta as af,
-  nt as ag,
-  Ln as ah,
-  Un as ai,
-  En as aj,
-  Kn as ak,
-  Xa as al,
-  Ba as am,
-  Zn as an,
-  na as ao,
-  Pa as ap,
-  zs as aq,
-  te as ar,
-  qn as as,
-  Ha as at,
-  Sa as au,
-  un as av,
-  Fa as aw,
-  Aa as ax,
-  Ea as ay,
-  mo as az,
-  Gn as b,
-  Za as b0,
-  ma as c,
-  aa as d,
-  ao as e,
+  io as aX,
+  x as aY,
+  Xa as aZ,
+  Lo as a_,
+  Co as aa,
+  rt as ab,
+  N as ac,
+  jt as ad,
+  za as ae,
+  So as af,
+  lt as ag,
+  pa as ah,
+  Pe as ai,
+  _s as aj,
+  Ao as ak,
+  Ro as al,
+  an as am,
+  Ga as an,
+  it as ao,
+  Jn as ap,
+  ta as aq,
+  ea as ar,
+  ia as as,
+  wo as at,
+  Qa as au,
+  ua as av,
+  ba as aw,
+  Ja as ax,
+  Vs as ay,
+  se as az,
+  ra as b,
+  Xe as b0,
+  O as b1,
+  Ka as b2,
+  Gs as b3,
+  fs as b4,
+  Ia as b5,
+  Da as b6,
+  B as b7,
+  yo as b8,
+  Ta as c,
+  xa as d,
+  $o as e,
   b as f,
-  Es as g,
+  en as g,
   Rt as h,
-  Yt as i,
-  Sn as j,
-  pa as k,
-  La as l,
-  xa as m,
-  Na as n,
-  Ja as o,
-  lo as p,
-  Os as q,
-  ro as r,
-  Dn as s,
-  $a as t,
-  io as u,
-  co as v,
-  Ia as w,
-  le as x,
-  Ys as y,
-  Ga as z
+  Wt as i,
+  An as j,
+  Ba as k,
+  ao as l,
+  Pa as m,
+  eo as n,
+  po as o,
+  Io as p,
+  Ws as q,
+  To as r,
+  jn as s,
+  Va as t,
+  Mo as u,
+  Po as v,
+  qa as w,
+  re as x,
+  sn as y,
+  mo as z
 };