@base-framework/ui 1.0.327 → 1.0.328

package/dist/{empty-state-ByQ_GcoM.js → empty-state-CprYMaCA.js}

@@ -1,10 +1,10 @@
-import { Div as l, H5 as se, P as w, I as C, Li as W, Span as c, Ul as G, Button as b, OnState as B, Label as O, H2 as $, Form as oe, Header as L, Footer as z, A as J, H3 as ne, Checkbox as le, Input as f, Img as K, Nav as re, UseParent as Q, OnStateOpen as E, Time as ie, Dialog as ae } from "@base-framework/atoms";
-import { Atom as u, Component as k, Html as N, Dom as ce, base as ue, Data as A, Builder as X, Jot as I, Events as y, DateTime as j } from "@base-framework/base";
-import { P as F, b as de, R as he } from "./range-calendar-BMWSJTE0.js";
-import { C as fe, F as me } from "./form-group-CJzpq9Us.js";
+import { Div as l, H5 as oe, P as w, I as C, Li as G, Span as c, Ul as J, Button as b, OnState as B, Label as O, H2 as $, Form as ne, Header as L, Footer as z, A as K, H3 as le, Checkbox as re, Input as f, Img as Q, Nav as ie, UseParent as X, OnStateOpen as E, Time as ae, Dialog as ce } from "@base-framework/atoms";
+import { Atom as u, Component as k, Html as N, Dom as ue, base as de, Data as A, Builder as Z, Jot as I, Events as v, DateTime as j } from "@base-framework/base";
+import { P as F, b as he, R as fe } from "./range-calendar-BMWSJTE0.js";
+import { C as me, F as ge } from "./form-group-CJzpq9Us.js";
 import { B as h, I as x } from "./buttons-CHEs54Wl.js";
 import { Icons as d } from "./icons.es.js";
-import { Timer as ge, List as pe, DynamicTime as be } from "@base-framework/organisms";
+import { Timer as pe, List as be, DynamicTime as xe } from "@base-framework/organisms";
 import { a as D } from "./veil-CqnAmj-D.js";
 import { F as U } from "./format-DnofNaaz.js";
 const V = {
@@ -33,16 +33,16 @@ const V = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, xe = (e, t) => l({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+}, ye = (e, t) => l({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   C({ html: e })
-]), ve = (e) => se({ class: "font-semibold" }, e), ye = (e) => w({ class: "text-sm text-muted-foreground" }, e), Lt = u(({ title: e, description: t, icon: s, type: o = "default" }) => {
+]), ve = (e) => oe({ class: "font-semibold" }, e), we = (e) => w({ class: "text-sm text-muted-foreground" }, e), Lt = u(({ title: e, description: t, icon: s, type: o = "default" }) => {
   const { borderColor: n, bgColor: r, iconColor: i } = V[o] || V.default;
   return l({ class: `flex items-start p-4 border rounded-lg ${r} ${n}` }, [
     // Icon and content
-    s && xe(s, i),
+    s && ye(s, i),
     l({ class: "flex flex-col" }, [
       ve(e),
-      ye(t)
+      we(t)
     ])
   ]);
 });
@@ -67,24 +67,24 @@ class At extends k {
       N.removeElement(t);
       return;
     }
-    ce.addClass(t, s), ue.on("animationend", t, (o) => N.removeElement(t));
+    ue.addClass(t, s), de.on("animationend", t, (o) => N.removeElement(t));
   }
 }
-const we = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), Ce = (e) => c({ class: "flex w-4 h-4", html: e }), Se = (e) => c({ class: "flex-auto" }, e), ke = (e, t) => W({
+const Ce = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), Se = (e) => c({ class: "flex w-4 h-4", html: e }), ke = (e) => c({ class: "flex-auto" }, e), Ie = (e, t) => G({
   class: "relative flex cursor-pointer hover:bg-muted/50 select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   click: () => t(e)
 }, [
-  e.icon && Ce(e.icon),
-  Se(e.label),
-  e.shortcut && we(e.shortcut)
-]), Ie = (e, t) => G({ class: "grid gap-2" }, [
-  e.map((s) => ke(s, t))
-]), De = (e) => l({ class: "w-full z-10" }, [
+  e.icon && Se(e.icon),
+  ke(e.label),
+  e.shortcut && Ce(e.shortcut)
+]), De = (e, t) => J({ class: "grid gap-2" }, [
+  e.map((s) => Ie(s, t))
+]), $e = (e) => l({ class: "w-full z-10" }, [
   l({
     class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
-    for: ["groups", (t) => Ie(t, e)]
+    for: ["groups", (t) => De(t, e)]
   })
-]), $e = ({ label: e, icon: t, toggleDropdown: s }) => b({
+]), Fe = ({ label: e, icon: t, toggleDropdown: s }) => b({
   cache: "button",
   class: `inline-flex items-center justify-between rounded-md border
 			px-2 py-2 text-sm font-medium hover:bg-muted
@@ -93,7 +93,7 @@ const we = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
 }, [
   e && c(e),
   t && C({ html: t })
-]), Fe = ({ onSelect: e }) => l([
+]), Te = ({ onSelect: e }) => l([
   B(
     "open",
     (t, s, o) => t ? new F({
@@ -101,7 +101,7 @@ const we = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
       parent: o,
       button: o.button
     }, [
-      De(e)
+      $e(e)
     ]) : null
   )
 ]);
@@ -159,33 +159,33 @@ class Mt extends k {
    */
   render() {
     return l({ class: "relative" }, [
-      $e({
+      Fe({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      Fe({ onSelect: this.handleSelect.bind(this) })
+      Te({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Be = u((e, t) => O({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Le = u((e, t) => w({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ae = u((e, t) => w({ ...e, class: "text-sm text-destructive" }, t)), Pt = u((e, t = []) => fe({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+const Be = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Le = u((e, t) => O({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Ae = u((e, t) => w({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Me = u((e, t) => w({ ...e, class: "text-sm text-destructive" }, t)), Pt = u((e, t = []) => me({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
   e.title && $({ class: "text-lg font-semibold py-4 px-6" }, e.title),
   e.description && w({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
   ...t
-])), jt = u((e, t = []) => me({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
+])), jt = u((e, t = []) => ge({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
   l({ class: "flex flex-col gap-y-6" }, t)
 ])), Ot = u((e, t = []) => {
   const s = e.border ? "border-t" : "";
   return l({ ...e, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${e.class || ""}` }, t);
-}), Me = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", Z = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = Z(o.children, t, s)), !o.required) ? o : Me(o) ? {
+}), Pe = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", ee = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = ee(o.children, t, s)), !o.required) ? o : Pe(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: t
-} : o), Pe = u((e, t) => {
-  const n = Z(t, (r) => {
+} : o), je = u((e, t) => {
+  const n = ee(t, (r) => {
     r.target.checkValidity() && e.setError(null);
   }, (r) => {
     e.setError(r.target.validationMessage);
@@ -219,24 +219,24 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
         this.state.error = r, this.state.hasError = !!r;
       };
       return l({ class: "flex flex-auto gap-y-4" }, [
-        Te([
-          Be({ htmlFor: t }, s),
-          Pe({
+        Be([
+          Le({ htmlFor: t }, s),
+          je({
             id: t,
             name: e,
             value: this.state.value,
             setError: n
           }, this.children),
-          o && Le({ id: this.getId("description") }, o),
-          l({ onState: ["error", (r) => r && Ae(r)] })
+          o && Ae({ id: this.getId("description") }, o),
+          l({ onState: ["error", (r) => r && Me(r)] })
         ])
       ]);
     }
   }
-), je = (e, t, s = null) => {
+), Oe = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
-}, ee = u(
-  (e, t) => oe({ ...e, submit: (s, o) => je(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+}, te = u(
+  (e, t) => ne({ ...e, submit: (s, o) => Oe(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
 ), Et = u((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Nt = u((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
   e.title && $({ class: "font-semibold" }, e.title),
   ...t
@@ -246,7 +246,7 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
 ]), Vt = (e, t) => l({ class: "flex" }, [
   c({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
   c(t)
-]), Oe = ({ title: e, description: t, back: s, icon: o, options: n = [] }) => L({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), ze = ({ title: e, description: t, back: s, icon: o, options: n = [] }) => L({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
@@ -265,19 +265,19 @@ const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     ]),
     ...n
   ])
-]), ze = u((e, t) => l({
+]), Ee = u((e, t) => l({
   popover: "manual",
   class: `modal m-auto top-0 right-0 bottom-0 left-0 fixed z-20 grid w-full h-full max-h-screen gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 ${e.class}`,
   click: (s, o) => {
     s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
   }
 }, [
-  ee({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
-    Oe(e),
+  te({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
+    ze(e),
     l({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
     z({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
-])), Ee = (e) => X.render(e, app.root);
+])), Ne = (e) => Z.render(e, app.root);
 class Rt extends k {
   /**
    * This will declare the props for the compiler.
@@ -294,7 +294,7 @@ class Rt extends k {
    */
   render() {
     const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return ze(
+    return Ee(
       {
         class: t,
         title: s,
@@ -409,7 +409,7 @@ class Rt extends k {
    * @returns {void}
    */
   open() {
-    Ee(this), this.showModal();
+    Ne(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -464,22 +464,22 @@ const R = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Ne = (e) => L({ class: "flex justify-center" }, [
-  ne({ class: "text-lg font-bold mb-0" }, e)
-]), Ue = u(({ href: e, class: t }, s) => J({
+}, Ue = (e) => L({ class: "flex justify-center" }, [
+  le({ class: "text-lg font-bold mb-0" }, e)
+]), Ve = u(({ href: e, class: t }, s) => K({
   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)), Ve = u(({ close: e, class: t }, s) => l({
+}, s)), Re = u(({ close: e, class: t }, s) => l({
   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 Re extends k {
+class He extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -503,10 +503,10 @@ class Re extends k {
    */
   render() {
     const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), n = this.href || null, r = this.getChildren(o);
-    return n ? Ue({
+    return n ? Ve({
       href: n,
       class: `${t} ${s}`
-    }, r) : Ve({
+    }, r) : Re({
       close: this.close.bind(this),
       class: `${t} ${s}`
     }, r);
@@ -518,7 +518,7 @@ class Re extends k {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new ge(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new pe(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -554,7 +554,7 @@ class Re extends k {
         this.icon && C({ class: `mr-4 ${t}`, html: this.icon }),
         l({ class: "flex flex-auto flex-col" }, [
           l({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && Ne(this.title)
+            this.title && Ue(this.title)
           ]),
           w({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
           (this.primary || this.secondary) && z({ class: "margin-top-24 flex align-center" }, this.getButtons())
@@ -578,7 +578,7 @@ class Re extends k {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let He = 0;
+let qe = 0;
 class Ht extends k {
   /**
    * This will render the component.
@@ -587,11 +587,11 @@ class Ht extends k {
    */
   render() {
     return l({ class: "notification-container pointer-events-none inset-auto bg-transparent backdrop:bg-transparent overflow-visible fixed bottom-[80px] right-0 z-50 p-5", popover: "manual" }, [
-      new pe({
+      new be({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new Re(t)
+        rowItem: (t) => new He(t)
       })
     ]);
   }
@@ -602,7 +602,7 @@ class Ht extends k {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = He++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = qe++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -619,12 +619,12 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
   click: (o, { state: n }) => {
-    n.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), qe(e);
+    n.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ye(e);
   }
 }, [
   x(s),
   c(t)
-])), qe = (e) => {
+])), Ye = (e) => {
   const t = document.documentElement;
   if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), H && !H("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
@@ -693,7 +693,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
           s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, t, this);
         }
       }, [
-        le({
+        re({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
           /**
@@ -721,8 +721,8 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Ye = (e = "") => (e = e.toUpperCase(), S[e] || S.OFFLINE), _t = (e) => l({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ye(e)}`
+}, _e = (e = "") => (e = e.toUpperCase(), S[e] || S.OFFLINE), _t = (e) => l({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${_e(e)}`
 }), Wt = ({ propName: e = "status" } = {}) => l({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
@@ -731,7 +731,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
     [S.BUSY]: T.BUSY,
     [S.AWAY]: T.AWAY
   }]
-}), _e = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1, Gt = I(
+}), q = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1, Gt = I(
   {
     /**
      * Get the initial state for the component.
@@ -751,7 +751,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", y.trigger("click", e));
+      e && (e.value = "", v.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -787,17 +787,17 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          B("loaded", (s) => s === !1 || _e(this.src) ? O({
+          B("loaded", (s) => (console.log(s, this.src, q(this.src), this), s === !1 || q(this.src) ? O({
             htmlFor: e,
             class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
           }, [
             x(d.upload),
             l("Upload Image")
-          ]) : K({
+          ]) : Q({
             // @ts-ignore
             src: this.src,
             class: "absolute inset-0 w-full h-full object-cover rounded-full"
-          }))
+          })))
         ])
       ]);
     }
@@ -822,7 +822,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", y.trigger("click", e));
+      e && (e.value = "", v.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -860,7 +860,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
         }, [
           B(
             "loaded",
-            (s) => s ? K({
+            (s) => s ? Q({
               // @ts-ignore
               src: this.src,
               class: "absolute inset-0 w-full h-full object-cover rounded-full"
@@ -876,7 +876,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       ]);
     }
   }
-), We = (e, t) => J(
+), We = (e, t) => K(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
@@ -911,7 +911,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
      */
     render() {
       const e = this.data.items.length - 1;
-      return re(
+      return ie(
         {
           "aria-label": "Breadcrumb",
           class: "flex items-center gap-x-1 text-sm"
@@ -930,7 +930,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       );
     }
   }
-), q = {
+), Y = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -939,7 +939,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, Ke = (e) => q[e] || q.default, Qe = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+}, Ke = (e) => Y[e] || Y.default, Qe = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
   c({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
@@ -994,7 +994,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
     c({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
     C({ html: d.chevron.upDown })
   ]
-), et = (e, t, s) => W({
+), et = (e, t, s) => G({
   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 }]
@@ -1002,7 +1002,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   e.icon && c({ class: "mr-2 flex items-baseline" }, [x({ size: "xs" }, e.icon)]),
   c({ class: "text-base font-normal" }, e.label)
 ]), tt = (e, t) => l({ class: "w-full border rounded-md" }, [
-  G({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => et(s, e, t)] })
+  J({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => et(s, e, t)] })
 ]), st = ({ onSelect: e, state: t }) => l({ class: "flex flex-auto flex-col" }, [
   B(
     "open",
@@ -1116,21 +1116,21 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       ]);
     }
   }
-), te = ({ icon: e, click: t, ariaLabel: s }) => h({
+), se = ({ icon: e, click: t, ariaLabel: s }) => h({
   variant: "icon",
   class: "flex flex-none",
   click: t,
   icon: e,
   "aria-label": s
-}), ot = ({ click: e }) => te({
+}), ot = ({ click: e }) => se({
   icon: d.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), nt = ({ click: e }) => te({
+}), nt = ({ click: e }) => se({
   icon: d.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), lt = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Q(({ state: n }) => f({
+}), lt = ({ bind: e, min: t, max: s, readonly: o = !1 }) => X(({ state: n }) => f({
   value: ["[[count]]", n],
   bind: e,
   blur: (r, { state: i }) => {
@@ -1213,7 +1213,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
     button: n.panel,
     size: "fit"
   }, [
-    new de({
+    new he({
       selectedDate: n.state.selectedDate,
       selectedCallBack: e,
       blockPriorDates: t
@@ -1251,16 +1251,16 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
         const i = n.target.value.replace(/\D/g, "");
         let a = "";
         if (i.length > 0 && (a = i.substring(0, 2), i.length > 2 && (a += "/" + i.substring(2, 4), i.length > 4 && (a += "/" + i.substring(4, 8)))), n.target.value = a, i.length === 8) {
-          const m = parseInt(i.substring(0, 2), 10), g = parseInt(i.substring(2, 4), 10), v = parseInt(i.substring(4, 8), 10);
-          if (m >= 1 && m <= 12 && g >= 1 && g <= 31 && v >= 1900) {
-            const p = `${v}-${m.toString().padStart(2, "0")}-${g.toString().padStart(2, "0")}`;
-            this.state.selectedDate = p, this.input.value = p, y.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(p);
+          const m = parseInt(i.substring(0, 2), 10), g = parseInt(i.substring(2, 4), 10), y = parseInt(i.substring(4, 8), 10);
+          if (m >= 1 && m <= 12 && g >= 1 && g <= 31 && y >= 1900) {
+            const p = `${y}-${m.toString().padStart(2, "0")}-${g.toString().padStart(2, "0")}`;
+            this.state.selectedDate = p, this.input.value = p, v.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(p);
           }
         }
       }, s = (n) => {
         n.target.select();
       }, o = (n) => {
-        this.state.selectedDate = n, this.state.open = !1, this.input.value = n, y.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n);
+        this.state.selectedDate = n, this.state.open = !1, this.input.value = n, v.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n);
       };
       return l(
         { class: "relative w-full max-w-[320px]" },
@@ -1291,7 +1291,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   click: s
 }, [
   ut({ bind: e, required: t }),
-  Q(({ state: o }) => [
+  X(({ state: o }) => [
     c(U.date(["[[start]]", o], "Start Date")),
     c(" - "),
     c(U.date(["[[end]]", o], "End Date"))
@@ -1303,7 +1303,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   button: n.panel,
   size: "xl"
 }, [
-  new he({
+  new fe({
     startDate: n.state.start,
     endDate: n.state.end,
     onRangeSelect: e,
@@ -1342,7 +1342,7 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
      */
     render() {
       const e = (s, { state: o }) => o.toggle("open"), t = (s, o) => {
-        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, y.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
+        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, v.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
       };
       return l({ class: "relative w-full max-w-[320px]" }, [
         dt({
@@ -1357,8 +1357,8 @@ const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
       ]);
     }
   }
-), ss = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => ie([
-  new be({
+), ss = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => ae([
+  new xe({
     dateTime: e,
     filter: s || ((o) => {
       const n = j.getLocalTime(o, !0, !1, t);
@@ -1465,7 +1465,7 @@ function pt({ handleTimeSelect: e }) {
     )
   );
 }
-function Y(e) {
+function _(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);
@@ -1486,7 +1486,7 @@ const os = D(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = Y(e);
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = _(e);
       return {
         selectedTime: e,
         open: !1,
@@ -1502,7 +1502,7 @@ const os = D(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: s } = Y(this.input.value);
+        const { hour: e, minute: t, meridian: s } = _(this.input.value);
         this.state.set({
           hour: e,
           minute: t,
@@ -1522,15 +1522,15 @@ const os = D(
         if (r.length > 0 && (i = r.substring(0, 2), r.length > 2 && (i += ":" + r.substring(2, 4))), r.length >= 4) {
           const a = parseInt(r.substring(0, 2), 10), m = parseInt(r.substring(2, 4), 10);
           if (a >= 0 && a <= 23 && m >= 0 && m <= 59) {
-            let g = a, v = "AM";
-            a === 0 ? g = 12 : a > 12 ? (g = a - 12, v = "PM") : a === 12 && (v = "PM");
-            const p = `${g.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")} ${v}`;
+            let g = a, y = "AM";
+            a === 0 ? g = 12 : a > 12 ? (g = a - 12, y = "PM") : a === 12 && (y = "PM");
+            const p = `${g.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")} ${y}`;
             i = p, this.state.set({
               hour: g.toString().padStart(2, "0"),
               minute: m.toString().padStart(2, "0"),
-              meridian: v,
+              meridian: y,
               selectedTime: p
-            }), this.input.value = p, y.trigger("change", this.input), typeof this.change == "function" && this.change(p);
+            }), this.input.value = p, v.trigger("change", this.input), typeof this.change == "function" && this.change(p);
           }
         }
         n.target.value = i;
@@ -1539,7 +1539,7 @@ const os = D(
       }, o = ({ hour: n, minute: r, meridian: i }) => {
         if (n && (this.state.hour = n), r && (this.state.minute = r), i && (this.state.meridian = i), this.state.hour && this.state.minute && this.state.meridian) {
           const a = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-          this.state.selectedTime = a, this.state.open = !1, this.input.value = a, y.trigger("change", this.input), typeof this.change == "function" && this.change(a);
+          this.state.selectedTime = a, this.state.open = !1, this.input.value = a, v.trigger("change", this.input), typeof this.change == "function" && this.change(a);
         }
       };
       return l(
@@ -1564,7 +1564,7 @@ const os = D(
   x({ size: "lg" }, e)
 ]), xt = ({ title: e }) => L({ class: "flex flex-auto items-center" }, [
   $({ class: "text-lg font-semibold" }, e)
-]), vt = u((e, t) => ae(
+]), yt = u((e, t) => ce(
   {
     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
@@ -1586,7 +1586,7 @@ const os = D(
       ])
     ])
   ]
-)), yt = (e) => X.render(e, app.root), _ = {
+)), vt = (e) => Z.render(e, app.root), W = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1630,8 +1630,8 @@ class wt extends k {
   render() {
     const t = (a) => {
       a.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: n } = _[this.type] || _.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
-    return vt({
+    }, { borderColor: s, bgColor: o, iconColor: n } = W[this.type] || W.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
+    return yt({
       class: r,
       title: i,
       click: t,
@@ -1675,7 +1675,7 @@ class wt extends k {
    * @returns {void}
    */
   open() {
-    yt(this), this.panel.showModal(), this.state.open = !0;
+    vt(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1717,7 +1717,7 @@ class ns extends wt {
   }
 }
 const ls = u((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
-  ee({ class: "flex flex-auto flex-col" }, [
+  te({ class: "flex flex-auto flex-col" }, [
     l({ class: "flex flex-auto flex-col gap-y-4" }, [
       l({ class: "flex flex-auto items-center justify-center" }, [
         e.icon && l({ class: "w-16 h-16 mb-2 text-primary" }, [
@@ -1738,7 +1738,7 @@ export {
   Vt as C,
   At as D,
   es as E,
-  Te as F,
+  Be as F,
   ts as G,
   ss as H,
   Gt as I,
@@ -1747,33 +1747,33 @@ export {
   Jt as L,
   Rt as M,
   Ht as N,
-  vt as O,
+  yt as O,
   nt as P,
   wt as Q,
   ls as R,
   Ut as S,
   qt as T,
-  ke as a,
+  Ie as a,
   Mt as b,
-  De as c,
-  Be as d,
-  Le as e,
-  Ae as f,
+  $e as c,
+  Le as d,
+  Ae as e,
+  Me as f,
   Pt as g,
   jt as h,
   Ot as i,
-  Pe as j,
+  je as j,
   zt as k,
-  ee as l,
+  te as l,
   Et as m,
   Nt as n,
-  Re as o,
+  He as o,
   Yt as p,
   _t as q,
   Wt as r,
   T as s,
   S as t,
-  Ye as u,
+  _e as u,
   Qt as v,
   Xt as w,
   ot as x,

package/dist/index.es.js

@@ -4,9 +4,9 @@ import { C as T, F as b } from "./form-group-CJzpq9Us.js";
 import { C as I, d as S, D as F, c as B, E as P, F as k, H as M, I as x, M as f, N as v, P as N, R as y, T as h, a as U, b as L, U as W, W as H } from "./inputs-9udyzkHR.js";
 import { V as w, a as A } from "./veil-CqnAmj-D.js";
 import { Icons as O } from "./icons.es.js";
-import { A as V, B as j, C as q, w as J, K as z, y as K, z as Q, E as _, G as X, D as Y, m as Z, n as $, Q as aa, O as ea, v as sa, c as oa, a as ta, b as ra, R as na, l as la, g as ia, i as pa, h as da, j as ma, e as ua, k as ga, F as Ca, d as ca, f as Ta, I as ba, L as Da, x as Ia, M as Sa, o as Fa, N as Ba, P as Pa, s as ka, t as Ma, S as xa, q as fa, r as va, T as Na, H as ya, J as ha, p as Ua, u as La } from "./empty-state-ByQ_GcoM.js";
+import { A as V, B as j, C as q, w as J, K as z, y as K, z as Q, E as _, G as X, D as Y, m as Z, n as $, Q as aa, O as ea, v as sa, c as oa, a as ta, b as ra, R as na, l as la, g as ia, i as pa, h as da, j as ma, e as ua, k as ga, F as Ca, d as ca, f as Ta, I as ba, L as Da, x as Ia, M as Sa, o as Fa, N as Ba, P as Pa, s as ka, t as Ma, S as xa, q as fa, r as va, T as Na, H as ya, J as ha, p as Ua, u as La } from "./empty-state-CprYMaCA.js";
 import { A as Ha, b as Ra, C as wa, D as Aa, a as Ga, F as Oa, M as Ea, P as Va, R as ja, c as qa, g as Ja, p as za } from "./range-calendar-BMWSJTE0.js";
-import { B as Qa, p as _a, C as Xa, j as Ya, D as Za, m as $a, k as ae, H as ee, I as se, N as oe, O as te, P as re, S as ne, n as le, o as ie, x as pe, s as de, q as me, r as ue, T as ge, t as Ce, w as ce, u as Te, v as be, l as De, U as Ie, W as Se, f as Fe, h as Be, i as Pe, c as ke, d as Me, b as xe, e as fe, a as ve, g as Ne } from "./signature-panel-0XY9I1Hx.js";
+import { B as Qa, p as _a, C as Xa, j as Ya, D as Za, m as $a, k as ae, H as ee, I as se, N as oe, O as te, P as re, S as ne, n as le, o as ie, x as pe, s as de, q as me, r as ue, T as ge, t as Ce, w as ce, u as Te, v as be, l as De, U as Ie, W as Se, f as Fe, h as Be, i as Pe, c as ke, d as Me, b as xe, e as fe, a as ve, g as Ne } from "./signature-panel-CcRmukPe.js";
 import { B as he, I as Ue, M as Le, d as We, e as He, g as Re, N as we, b as Ae, a as Ge, f as Oe, P as Ee, c as Ve, S as je, T as qe } from "./mobile-nav-wrapper-Dm9DinRD.js";
 import { B as ze, a as Ke, C as Qe, F as _e, b as Xe, c as Ye, M as Ze, P as $e, S as as } from "./sidebar-menu-page-D4WMgz5U.js";
 import { A as ss, F as os, M as ts, a as rs, T as ns } from "./aside-template-sUm-F2f0.js";

package/dist/molecules.es.js

@@ -1,4 +1,4 @@
-import { A as s, B as t, C as e, w as r, K as i, y as n, z as m, E as l, G as d, D as C, m as p, n as S, Q as g, O as u, v as D, c, a as F, b as T, R as P, l as A, g as I, i as f, h as w, j as b, e as y, k as B, F as M, d as k, f as x, I as L, L as R, x as U, M as v, o as E, N, P as h, s as G, t as O, S as j, q, r as z, T as H, H as J, J as K, p as Q, u as _ } from "./empty-state-ByQ_GcoM.js";
+import { A as s, B as t, C as e, w as r, K as i, y as n, z as m, E as l, G as d, D as C, m as p, n as S, Q as g, O as u, v as D, c, a as F, b as T, R as P, l as A, g as I, i as f, h as w, j as b, e as y, k as B, F as M, d as k, f as x, I as L, L as R, x as U, M as v, o as E, N, P as h, s as G, t as O, S as j, q, r as z, T as H, H as J, J as K, p as Q, u as _ } from "./empty-state-CprYMaCA.js";
 import { A as W, P as X, g as Y } from "./range-calendar-BMWSJTE0.js";
 export {
   s as Alert,

package/dist/organisms.es.js

@@ -1,4 +1,4 @@
-import { B as s, p as n, C as t, j as o, D as r, m as l, k as i, H as d, I as b, N as u, O as v, P as g, S as p, n as T, o as D, x as N, s as k, q as C, r as c, T as B, t as M, w as m, u as y, v as W, l as h, U as S, W as H, f as P, h as U, i as x, c as I, d as f, b as L, e as O, a as F, g as G } from "./signature-panel-0XY9I1Hx.js";
+import { B as s, p as n, C as t, j as o, D as r, m as l, k as i, H as d, I as b, N as u, O as v, P as g, S as p, n as T, o as D, x as N, s as k, q as C, r as c, T as B, t as M, w as m, u as y, v as W, l as h, U as S, W as H, f as P, h as U, i as x, c as I, d as f, b as L, e as O, a as F, g as G } from "./signature-panel-CcRmukPe.js";
 import { b as R, C as j, D as q, a as z, F as A, M as E, R as J, c as K, p as Q } from "./range-calendar-BMWSJTE0.js";
 import { B as X, I as Y, M as Z, d as _, e as $, g as aa, N as ea, b as sa, a as na, f as ta, P as oa, c as ra, S as la, T as ia } from "./mobile-nav-wrapper-Dm9DinRD.js";
 export {

package/dist/{signature-panel-0XY9I1Hx.js → signature-panel-CcRmukPe.js}

@@ -1,23 +1,23 @@
-import { Button as x, Div as o, On as C, Span as L, Th as N, UseParent as E, I as Q, Thead as V, Tr as G, Table as B, P as v, Li as y, Time as X, Nav as g, Ul as f, Section as I, Canvas as q } from "@base-framework/atoms";
-import { Atom as d, Component as p, Data as T, DateTime as K, router as w, NavLink as M, DataTracker as U, Jot as _, base as O, Dom as W } from "@base-framework/base";
+import { Button as w, Div as o, On as C, Span as L, Th as N, UseParent as E, I as Q, Thead as V, Tr as G, Table as B, P as v, Li as y, Time as X, Nav as m, Ul as f, Section as I, Canvas as q } from "@base-framework/atoms";
+import { Atom as d, Component as p, Data as T, DateTime as K, router as x, NavLink as M, DataTracker as U, Jot as _, base as O, Dom as W } from "@base-framework/base";
 import { B as P, I as J } from "./buttons-CHEs54Wl.js";
 import { Icons as S } from "./icons.es.js";
 import { TableBody as Z, DataTableBody as ee, ScrollableTableBody as te, List as se, IntervalTimer as ae } from "@base-framework/organisms";
 import { C as ie, I as ne, H as oe } from "./inputs-9udyzkHR.js";
 import { A as le, P as re } from "./range-calendar-BMWSJTE0.js";
-import { V as m } from "./veil-CqnAmj-D.js";
+import { V as g } from "./veil-CqnAmj-D.js";
 d((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-d(({ value: t, label: e }) => x({
+d(({ value: t, label: e }) => w({
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-md px-8 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
   onState: ["performance", { active: t }],
   dataSet: ["performance", ["state", t, "active"]],
   click: (s, { state: a }) => a.performance = t
 }, e));
-class gt extends p {
+class mt extends p {
   /**
    * This will declare the props for the compiler.
    *
@@ -81,9 +81,9 @@ const ce = (t) => {
 }, fe = (t, e, s) => {
   const a = /* @__PURE__ */ new Date();
   return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
-}, me = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
+}, ge = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
   const n = fe(t, e, s);
-  return x({
+  return w({
     text: t || "",
     disabled: !t,
     class: `
@@ -93,19 +93,19 @@ const ce = (t) => {
 		`,
     click: () => i(a, s)
   });
-}, ge = (t, e) => {
+}, me = (t, e) => {
   const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = he(t, e, s), n = Array.from({ length: a }, (h, k) => new Date(t, e, k + 1)), l = (i.length + n.length) % 7, c = l === 0 ? 0 : 7 - l, r = ue(t, e, c), u = [...i, ...n, ...r], b = [];
   for (let h = 0; h < u.length; h += 7) {
-    const k = u.slice(h, h + 7), D = k.find((F) => F) || new Date(t, e, 1), { weekNumber: H, year: Y } = de(D);
+    const k = u.slice(h, h + 7), D = k.find((Y) => Y) || new Date(t, e, 1), { weekNumber: H, year: F } = de(D);
     b.push({
       weekNumber: H,
-      year: Y,
+      year: F,
       days: k
     });
   }
   return b;
 }, pe = ({ selectWeek: t }) => C("month", (e, s, { data: a }) => {
-  const { year: i, month: n, currentDate: l } = a, c = ge(i, n);
+  const { year: i, month: n, currentDate: l } = a, c = me(i, n);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -142,7 +142,7 @@ const ce = (t) => {
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
             u.map(
-              (h) => me({
+              (h) => ge({
                 year: h?.getFullYear() || null,
                 month: h?.getMonth() || null,
                 day: h?.getDate() || null,
@@ -300,9 +300,9 @@ class kt extends p {
 const ke = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, we = (t) => N({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+}, xe = (t) => N({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
   E((e) => new ie({ class: "mr-2", onChange: (s, a) => ke(e, a) }))
-]), xe = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
+]), we = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
   return N({
     class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
@@ -318,7 +318,7 @@ const ke = (t, e) => {
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? we({ toggle: t.toggle }) : xe({
+      (e) => e.label === "checkbox" ? xe({ toggle: t.toggle }) : we({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -567,7 +567,7 @@ class De extends j {
     this.list.refresh();
   }
 }
-const wt = d((t) => new De(
+const xt = d((t) => new De(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -652,7 +652,7 @@ class Ce extends j {
     this.list.refresh();
   }
 }
-const xt = d((t) => new Ce(
+const wt = d((t) => new Ce(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -729,14 +729,14 @@ class vt extends p {
    * @returns {object}
    */
   render() {
-    return g(
+    return m(
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
         f({
           class: "flex gap-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
-            value: ["[[path]]", w.data],
+            value: ["[[path]]", x.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -749,7 +749,7 @@ class vt extends p {
    * @returns {void}
    */
   afterSetup() {
-    const e = w.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -932,7 +932,7 @@ class St extends A {
             loading: !0
           }],
           ["docked", (s, a) => {
-            s ? (a.className = this.getDockedClassName(), e.appendChild(a), document.documentElement.style.overflowY = "auto") : (a.className = this.getClassName(), app.root.appendChild(a), document.documentElement.style.overflowY = "hidden");
+            s ? (a.className = this.getDockedClassName(), e.appendChild(a)) : (a.className = this.getClassName(), app.root.appendChild(a));
           }]
         ]
       },
@@ -1009,14 +1009,6 @@ class St extends A {
   onResize() {
     this.state.docked = this.canDock();
   }
-  /**
-   * This will resume scrolling when the overlay is being removed.
-   *
-   * @returns {void}
-   */
-  beforeDestroy() {
-    document.documentElement.style.overflowY = "auto";
-  }
 }
 class Ct extends A {
   /**
@@ -1207,16 +1199,16 @@ const ze = d(({ index: t, click: e, state: s }, a) => y({
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    x({
+    w({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), He = (t, e) => (t.callBack = e, Ae(t)), Ye = (t) => g({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+), He = (t, e) => (t.callBack = e, Ae(t)), Fe = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
   f({ class: "flex flex-auto flex-row", map: [t.options, (e) => He(e, t.callBack)] })
 ]);
-class It extends m {
+class It extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1233,7 +1225,7 @@ class It extends m {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      Ye({
+      Fe({
         class: this.class,
         options: this.options,
         callBack: e
@@ -1303,23 +1295,23 @@ class It extends m {
     };
   }
 }
-const Fe = (t) => y(
+const Ye = (t) => y(
   {
     class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    x({
+    w({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
       disabled: t.disabled
     }, t.label)
   ]
-), Ee = (t, e) => (t.callBack = e, Fe(t)), Qe = (t) => g({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+), Ee = (t, e) => (t.callBack = e, Ye(t)), Qe = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
   f({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ee(e, t.callBack)] })
 ]);
-class Bt extends m {
+class Bt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1371,7 +1363,7 @@ const Ve = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ge = (t, e) => {
   dataSet: ["selected", ["state", !0, "active"]],
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm"
 });
-class qe extends m {
+class qe extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1392,12 +1384,12 @@ class qe extends m {
    * @returns {object}
    */
   render() {
-    return g({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
+    return m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
       f({
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", w.data],
+          value: ["[[path]]", x.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1409,7 +1401,7 @@ class qe extends m {
    * @returns {void}
    */
   afterSetup() {
-    const e = w.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1466,7 +1458,7 @@ class qe extends m {
     this.links = [];
   }
 }
-class Tt extends m {
+class Tt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1518,16 +1510,16 @@ const Ke = (t) => y(
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    x({
+    w({
       class: "flex flex-auto justify-center items-center px-4 py-3 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), _e = (t, e) => (t.callBack = e, Ke(t)), Je = (t) => g({ class: `border-b border-border ${t.class}` }, [
+), _e = (t, e) => (t.callBack = e, Ke(t)), Je = (t) => m({ class: `border-b border-border ${t.class}` }, [
   f({ class: "flex flex-row items-center", map: [t.options, (e) => _e(e, t.callBack)] })
 ]);
-class Mt extends m {
+class Mt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1611,17 +1603,17 @@ const Ze = (t) => y(
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    x({
+    w({
       class: "flex flex-auto justify-center items-center px-4 py-3 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
       disabled: t.disabled
     }, t.label)
   ]
-), et = (t, e) => (t.callBack = e, Ze(t)), tt = (t) => g({ class: `border-b border-border ${t.class}` }, [
+), et = (t, e) => (t.callBack = e, Ze(t)), tt = (t) => m({ class: `border-b border-border ${t.class}` }, [
   f({ class: "flex flex-row items-center", map: [t.options, (e) => et(e, t.callBack)] })
 ]);
-class Pt extends m {
+class Pt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1673,7 +1665,7 @@ const st = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), at = (t, e) => {
   dataSet: ["selected", ["state", !0, "active"]],
   class: "relative inline-flex items-center justify-center whitespace-nowrap px-4 py-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100"
 });
-class nt extends m {
+class nt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1694,12 +1686,12 @@ class nt extends m {
    * @returns {object}
    */
   render() {
-    return g({ class: `border-b border-border ${this.class}` }, [
+    return m({ class: `border-b border-border ${this.class}` }, [
       f({
         class: "flex flex-row items-center",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", w.data],
+          value: ["[[path]]", x.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1711,7 +1703,7 @@ class nt extends m {
    * @returns {void}
    */
   afterSetup() {
-    const e = w.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1768,7 +1760,7 @@ class nt extends m {
     this.links = [];
   }
 }
-class Rt extends m {
+class Rt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -2120,14 +2112,14 @@ class Ot extends p {
 }
 export {
   Dt as B,
-  we as C,
+  xe as C,
   ye as D,
-  xe as H,
+  we as H,
   Ct as I,
   vt as N,
   A as O,
-  gt as P,
-  xt as S,
+  mt as P,
+  wt as S,
   R as T,
   Re as U,
   kt as W,
@@ -2136,12 +2128,12 @@ export {
   de as c,
   pt as d,
   bt as e,
-  me as f,
+  ge as f,
   he as g,
   pe as h,
   be as i,
   j,
-  wt as k,
+  xt as k,
   yt as l,
   St as m,
   Lt as n,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.327",
+	"version": "1.0.328",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {