@base-framework/ui 1.0.247 → 1.0.249

package/dist/{empty-state-CtYoGkqL.js → empty-state-Dct3Y9SD.js}

@@ -1,12 +1,12 @@
 import { Div as n, H5 as G, P as b, I as m, Li as V, Span as i, Ul as U, Button as f, OnState as x, Label as q, Form as K, H2 as D, Header as I, Footer as L, A as H, H3 as Q, Checkbox as X, Input as w, Img as Z, Nav as ee, UseParent as R, Time as te, Dialog as se } from "@base-framework/atoms";
-import { Atom as c, Component as v, Html as P, Dom as oe, base as ne, Data as $, Builder as Y, Jot as C, DateTime as A } from "@base-framework/base";
-import { P as k, b as le, R as re } from "./range-calendar-k0B4ZWJq.js";
+import { Atom as c, Component as y, Html as P, Dom as oe, base as ne, Data as $, Builder as Y, Jot as C, Events as le, DateTime as A } from "@base-framework/base";
+import { P as k, b as re, R as ae } from "./range-calendar-k0B4ZWJq.js";
 import { B as h, I as p } from "./buttons-Cm9etaEG.js";
 import { Icons as u } from "./icons.es.js";
-import { Timer as ae, List as ie, DynamicTime as ce } from "@base-framework/organisms";
-import { a as y } from "./veil-D4dRxILB.js";
-import { F as M } from "./format-DnofNaaz.js";
-const F = {
+import { Timer as ie, List as ce, DynamicTime as de } from "@base-framework/organisms";
+import { a as v } from "./veil-D4dRxILB.js";
+import { F } from "./format-DnofNaaz.js";
+const M = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -32,20 +32,20 @@ const F = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, de = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+}, ue = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   m({ html: e })
-]), ue = (e) => G({ class: "font-semibold" }, e), he = (e) => b({ class: "text-sm text-muted-foreground" }, e), yt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: l, bgColor: r, iconColor: a } = F[o] || F.default;
+]), he = (e) => G({ class: "font-semibold" }, e), fe = (e) => b({ class: "text-sm text-muted-foreground" }, e), yt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: l, bgColor: r, iconColor: a } = M[o] || M.default;
   return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
     // Icon and content
-    s && de(s, a),
+    s && ue(s, a),
     n({ class: "flex flex-col" }, [
-      ue(e),
-      he(t)
+      he(e),
+      fe(t)
     ])
   ]);
 });
-class fe extends v {
+class me extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -69,19 +69,19 @@ class fe extends v {
     oe.addClass(t, s), ne.on("animationend", t, (o) => P.removeElement(t));
   }
 }
-const me = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), pe = (e) => i({ class: "flex w-4 h-4", html: e }), ge = (e) => i({ class: "flex-auto" }, e), be = (e, t) => V({
+const pe = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), ge = (e) => i({ class: "flex w-4 h-4", html: e }), be = (e) => i({ class: "flex-auto" }, e), xe = (e, t) => V({
   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 && pe(e.icon),
-  ge(e.label),
-  e.shortcut && me(e.shortcut)
-]), xe = (e, t) => U({ class: "grid gap-2" }, [
-  e.map((s) => be(s, t))
-]), we = (e) => n({ class: "w-full z-10" }, [
+  e.icon && ge(e.icon),
+  be(e.label),
+  e.shortcut && pe(e.shortcut)
+]), we = (e, t) => U({ class: "grid gap-2" }, [
+  e.map((s) => xe(s, t))
+]), ve = (e) => n({ class: "w-full z-10" }, [
   n({
     class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
-    for: ["groups", (t) => xe(t, e)]
+    for: ["groups", (t) => we(t, e)]
   })
 ]), ye = ({ label: e, icon: t, toggleDropdown: s }) => f({
   cache: "button",
@@ -92,7 +92,7 @@ const me = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
 }, [
   e && i(e),
   t && m({ html: t })
-]), ve = ({ onSelect: e }) => n([
+]), Ce = ({ onSelect: e }) => n([
   x(
     "open",
     (t, s, o) => t ? new k({
@@ -100,11 +100,11 @@ const me = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
       parent: o,
       button: o.button
     }, [
-      we(e)
+      ve(e)
     ]) : null
   )
 ]);
-class vt extends v {
+class Ct extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -163,18 +163,18 @@ class vt extends v {
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      ve({ onSelect: this.handleSelect.bind(this) })
+      Ce({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const Ce = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), ke = c((e, t) => q({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Se = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), De = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), Ie = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", _ = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = _(o.children, t, s)), o.required && Ie(o) ? {
+const ke = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Se = c((e, t) => q({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), De = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ie = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), $e = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", _ = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = _(o.children, t, s)), o.required && $e(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: t
-} : o)), $e = c((e, t) => {
+} : o)), Te = c((e, t) => {
   const l = _(t, (r) => {
     r.target.checkValidity() && e.setError(null);
   }, (r) => {
@@ -184,7 +184,7 @@ const Ce = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
     ...e,
     class: "w-full"
   }, l);
-}), Ct = y(
+}), kt = v(
   {
     /**
      * The initial state of the FormField.
@@ -209,34 +209,34 @@ const Ce = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
         this.state.error = r, this.state.hasError = !!r;
       };
       return n({ class: "flex flex-auto space-y-4" }, [
-        Ce([
-          ke({ htmlFor: t }, s),
-          $e({
+        ke([
+          Se({ htmlFor: t }, s),
+          Te({
             id: t,
             name: e,
             value: this.state.value,
             setError: l
           }, this.children),
-          o && Se({ id: this.getId("description") }, o),
-          n({ onState: ["error", (r) => r && De(r)] })
+          o && De({ id: this.getId("description") }, o),
+          n({ onState: ["error", (r) => r && Ie(r)] })
         ])
       ]);
     }
   }
-), Te = (e, t, s = null) => {
+), Be = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
 }, W = c(
-  (e, t) => K({ ...e, submit: (s, o) => Te(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), kt = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), St = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
+  (e, t) => K({ ...e, submit: (s, o) => Be(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+), St = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Dt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
   e.title && D({ class: "font-semibold" }, e.title),
   ...t
-])), Dt = (e, t) => n({ class: "flex justify-between" }, [
+])), It = (e, t) => n({ class: "flex justify-between" }, [
   i({ class: "text-muted-foreground" }, e),
   i(t)
-]), It = (e, t) => n({ class: "flex" }, [
+]), $t = (e, t) => n({ class: "flex" }, [
   i({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
   i(t)
-]), Be = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => I({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), Ae = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => I({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
@@ -255,7 +255,7 @@ const Ce = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
     ]),
     ...l
   ])
-]), Ae = c((e, t) => n({
+]), Le = c((e, t) => n({
   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) => {
@@ -263,12 +263,12 @@ const Ce = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   }
 }, [
   W({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
-    Be(e),
+    Ae(e),
     n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
     L({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
-])), Le = (e) => Y.render(e, app.root);
-class $t extends v {
+])), Pe = (e) => Y.render(e, app.root);
+class Tt extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -284,7 +284,7 @@ class $t extends v {
    */
   render() {
     const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Ae(
+    return Le(
       {
         class: t,
         title: s,
@@ -399,7 +399,7 @@ class $t extends v {
    * @returns {void}
    */
   open() {
-    Le(this), this.showModal();
+    Pe(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -454,18 +454,18 @@ const z = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Pe = (e) => I({ class: "flex justify-center" }, [
+}, Fe = (e) => I({ class: "flex justify-center" }, [
   Q({ class: "text-lg font-bold mb-0" }, e)
 ]), Me = c(({ href: e, class: t }, s) => H({
   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}`,
   href: e,
   role: "alert"
-}, s)), Fe = c(({ close: e, class: t }, s) => n({
+}, s)), ze = c(({ close: e, class: t }, s) => n({
   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(),
   role: "alert"
 }, s));
-class ze extends fe {
+class Ne extends me {
   /**
    * This will declare the props for the compiler.
    *
@@ -492,7 +492,7 @@ class ze extends fe {
     return l ? Me({
       href: l,
       class: `${t} ${s}`
-    }, r) : Fe({
+    }, r) : ze({
       close: this.close.bind(this),
       class: `${t} ${s}`
     }, r);
@@ -504,7 +504,7 @@ class ze extends fe {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new ae(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new ie(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -540,7 +540,7 @@ class ze extends fe {
         this.icon && m({ class: `mr-4 ${t}`, html: this.icon }),
         n({ class: "flex flex-auto flex-col" }, [
           n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && Pe(this.title)
+            this.title && Fe(this.title)
           ]),
           b({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
           (this.primary || this.secondary) && L({ class: "margin-top-24 flex align-center" }, this.getButtons())
@@ -564,8 +564,8 @@ class ze extends fe {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Ne = 0;
-class Tt extends v {
+let Ee = 0;
+class Bt extends y {
   /**
    * This will render the component.
    *
@@ -573,11 +573,11 @@ class Tt extends v {
    */
   render() {
     return n({ 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 ie({
+      new ce({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new ze(t)
+        rowItem: (t) => new Ne(t)
       })
     ]);
   }
@@ -588,7 +588,7 @@ class Tt extends v {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = Ne++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = Ee++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -605,12 +605,12 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
   click: (o, { state: l }) => {
-    l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ee(e);
+    l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), je(e);
   }
 }, [
   p(s),
   i(t)
-])), Ee = (e) => {
+])), je = (e) => {
   var o;
   const t = document.documentElement;
   if (e === "system" && (e = (o = globalThis.matchMedia) != null && o.call(globalThis, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + e + ")").matches) {
@@ -619,7 +619,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, Bt = C(
+}, At = C(
   {
     /**
      * This will render the component.
@@ -646,7 +646,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       };
     }
   }
-), At = y(
+), Lt = v(
   {
     /**
      * The initial state of the Toggle.
@@ -708,9 +708,9 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, je = (e = "") => (e = e.toUpperCase(), g[e] || g.OFFLINE), Lt = (e) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${je(e)}`
-}), Pt = ({ propName: e = "status" } = {}) => n({
+}, Oe = (e = "") => (e = e.toUpperCase(), g[e] || g.OFFLINE), Pt = (e) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Oe(e)}`
+}), Ft = ({ propName: e = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
     [g.ONLINE]: S.ONLINE,
@@ -731,6 +731,17 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
         loaded: !!this.src
       };
     },
+    /**
+     * This will open the file browse dialog.
+     *
+     * @returns {void}
+     */
+    openFileBrowse() {
+      const e = this.input;
+      e && (e.value = "", le.trigger("click", e, {
+        bubbles: !1
+      }));
+    },
     /**
      * Render the component.
      *
@@ -738,9 +749,15 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      */
     render() {
       const e = "logo-upload", t = this.onChange || null;
-      return n({ class: "relative w-32 h-32 rounded-full border border-dashed border-muted-foreground flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group" }, [
+      return n({
+        class: "relative w-32 h-32 rounded-full border flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group",
+        click: (s) => {
+          s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
+        }
+      }, [
         w({
           id: e,
+          cache: "input",
           type: "file",
           accept: "image/*",
           class: "hidden",
@@ -767,7 +784,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       ]);
     }
   }
-), Oe = (e, t) => H(
+), Ve = (e, t) => H(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
@@ -775,14 +792,14 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
   [i(t)]
-), Ve = () => p({
+), Ue = () => p({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), Ue = (e) => n({ class: "flex items-center" }, [
-  e.href ? Oe(e.href, e.label) : i(e.label),
-  e.separator && Ve()
-]), Ft = C(
+}, u.chevron.single.right), qe = (e) => n({ class: "flex items-center" }, [
+  e.href ? Ve(e.href, e.label) : i(e.label),
+  e.separator && Ue()
+]), zt = C(
   {
     /**
      * Set initial data
@@ -811,7 +828,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
           n({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => Ue({
+            for: ["items", (t, s) => qe({
               href: t.href,
               label: t.label,
               separator: s < e
@@ -830,7 +847,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, qe = (e) => E[e] || E.default, He = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+}, He = (e) => E[e] || E.default, Re = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
   i({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
@@ -841,10 +858,10 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       o.activeIndex = e, l && l(e);
     }
   })
-]), Re = (e, t) => Array.from({ length: e }, (s, o) => He({
+]), Ye = (e, t) => Array.from({ length: e }, (s, o) => Re({
   index: o,
   size: t
-})), zt = C(
+})), Nt = C(
   {
     /**
      * Defines component data (props).
@@ -866,7 +883,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = qe(this.size || "sm"), s = Re(this.data.count, t);
+      const e = this.gap || "gap-2", t = He(this.size || "sm"), s = Ye(this.data.count, t);
       return n(
         { class: "flex justify-center items-center py-2" },
         [
@@ -875,7 +892,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       );
     }
   }
-), Ye = ({ toggleDropdown: e }) => f(
+), _e = ({ toggleDropdown: e }) => f(
   {
     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 border-input bg-background hover:bg-muted h-10 px-4 py-2 justify-between",
@@ -885,16 +902,16 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     i({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
     m({ html: u.chevron.upDown })
   ]
-), _e = (e, t, s) => V({
+), We = (e, t, s) => V({
   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 && i({ class: "mr-2 flex items-baseline" }, [p({ size: "xs" }, e.icon)]),
   i({ class: "text-base font-normal" }, e.label)
-]), We = (e, t) => n({ class: "w-full border rounded-md" }, [
-  U({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => _e(s, e, t)] })
-]), Je = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
+]), Je = (e, t) => n({ class: "w-full border rounded-md" }, [
+  U({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => We(s, e, t)] })
+]), Ge = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
   x(
     "open",
     (s, o, l) => s ? new k({
@@ -902,10 +919,10 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       parent: l,
       button: l.button
     }, [
-      We(e, t)
+      Je(e, t)
     ]) : null
   )
-]), Nt = C(
+]), Et = C(
   {
     /**
      * This will set up the data.
@@ -986,8 +1003,8 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
       return n({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
         // @ts-ignore
-        Ye({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        Je({
+        _e({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        Ge({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1013,15 +1030,15 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   click: t,
   icon: e,
   "aria-label": s
-}), Ge = ({ click: e }) => J({
+}), Ke = ({ click: e }) => J({
   icon: u.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), Ke = ({ click: e }) => J({
+}), Qe = ({ click: e }) => J({
   icon: u.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), Qe = ({ bind: e, min: t, max: s, readonly: o = !1 }) => R(({ state: l }) => w({
+}), Xe = ({ bind: e, min: t, max: s, readonly: o = !1 }) => R(({ state: l }) => w({
   value: ["[[count]]", l],
   bind: e,
   blur: (r, { state: a }) => {
@@ -1034,7 +1051,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), Et = y(
+})), jt = v(
   {
     /**
      * Initial state for the counter component.
@@ -1057,32 +1074,32 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     render() {
       const e = this.class ?? "";
       return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
-        Ge({ click: () => this.state.decrement("count") }),
-        Qe({
+        Ke({ click: () => this.state.decrement("count") }),
+        Xe({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        Ke({ click: () => this.state.increment("count") })
+        Qe({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), Xe = ({ bind: e, required: t }) => w({
+), Ze = ({ bind: e, required: t }) => w({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), Ze = ({ bind: e, required: t, toggleOpen: s }) => f({
+}), et = ({ bind: e, required: t, toggleOpen: s }) => f({
   class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
   click: s
 }, [
-  Xe({ bind: e, required: t }),
+  Ze({ bind: e, required: t }),
   i({
     onState: ["selectedDate", (o) => o ? A.format("standard", o) : "Pick a date"]
   }),
   m({ html: u.calendar.days })
-]), et = ({ handleDateSelect: e, blockPriorDates: t }) => x(
+]), tt = ({ handleDateSelect: e, blockPriorDates: t }) => x(
   "open",
   (s, o, l) => s ? new k({
     cache: "dropdown",
@@ -1090,13 +1107,13 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     button: l.panel,
     size: "fit"
   }, [
-    new le({
+    new re({
       selectedDate: l.state.selectedDate,
       selectedCallBack: e,
       blockPriorDates: t
     })
   ]) : null
-), jt = y(
+), Ot = v(
   {
     /**
      * The initial state of the DatePicker.
@@ -1128,35 +1145,35 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
         this.state.selectedDate = s, this.state.open = !1, this.input.value = s, typeof this.onChange == "function" && this.onChange(s);
       };
       return n({ class: "relative w-full max-w-[320px]" }, [
-        Ze({
+        et({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        et({
+        tt({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), tt = ({ bind: e, required: t }) => w({
+), st = ({ bind: e, required: t }) => w({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), st = ({ bind: e, required: t, toggleOpen: s }) => f({
+}), ot = ({ bind: e, required: t, toggleOpen: s }) => f({
   class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
   click: s
 }, [
-  tt({ bind: e, required: t }),
+  st({ bind: e, required: t }),
   R(({ state: o }) => [
-    i(M.date(["[[start]]", o], "Start Date")),
+    i(F.date(["[[start]]", o], "Start Date")),
     i(" - "),
-    i(M.date(["[[end]]", o], "End Date"))
+    i(F.date(["[[end]]", o], "End Date"))
   ]),
   m({ html: u.calendar.days })
-]), ot = ({ handleDateSelect: e, blockPriorDates: t }) => x(
+]), nt = ({ handleDateSelect: e, blockPriorDates: t }) => x(
   "open",
   (s, o, l) => s ? new k({
     cache: "dropdown",
@@ -1164,14 +1181,14 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     button: l.panel,
     size: "xl"
   }, [
-    new re({
+    new ae({
       startDate: l.state.start,
       endDate: l.state.end,
       onRangeSelect: e,
       blockPriorDates: t
     })
   ]) : null
-), Ot = y(
+), Vt = v(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1207,20 +1224,20 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
         this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
       };
       return n({ class: "relative w-full max-w-[320px]" }, [
-        st({
+        ot({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        ot({
+        nt({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), Vt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => te([
-  new ce({
+), Ut = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => te([
+  new de({
     dateTime: e,
     filter: s || ((o) => {
       const l = A.getLocalTime(o, !0, !1, t);
@@ -1228,7 +1245,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     })
   })
 ]);
-function nt({ bind: e, required: t }) {
+function lt({ bind: e, required: t }) {
   return w({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
@@ -1236,14 +1253,14 @@ function nt({ bind: e, required: t }) {
     required: t
   });
 }
-function lt({ bind: e, required: t, toggleOpen: s }) {
+function rt({ bind: e, required: t, toggleOpen: s }) {
   return f(
     {
       class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
       click: s
     },
     [
-      nt({ bind: e, required: t }),
+      lt({ bind: e, required: t }),
       i({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
@@ -1265,7 +1282,7 @@ function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1
     })
   );
 }
-function rt({ handleTimeSelect: e }) {
+function at({ handleTimeSelect: e }) {
   return n(
     { class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" },
     [
@@ -1331,7 +1348,7 @@ function j(e) {
     meridian: r
   });
 }
-const Ut = y(
+const qt = v(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1379,23 +1396,23 @@ const Ut = y(
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          lt({
+          rt({
             toggleOpen: e,
             bind: this.bind,
             required: this.required
           }),
-          rt({
+          at({
             handleTimeSelect: t
           })
         ]
       );
     }
   }
-), at = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+), it = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
   p({ size: "lg" }, e)
-]), it = ({ title: e }) => I({ class: "flex flex-auto items-center" }, [
+]), ct = ({ title: e }) => I({ class: "flex flex-auto items-center" }, [
   D({ class: "text-lg font-semibold" }, e)
-]), ct = c((e, t) => se(
+]), dt = c((e, t) => se(
   {
     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
@@ -1406,10 +1423,10 @@ const Ut = y(
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && at(e.icon, e.iconColor),
+      e.icon && it(e.icon, e.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
         n({ class: "flex flex-auto flex-col space-y-2" }, [
-          it(e),
+          ct(e),
           e.description && b({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
           n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
@@ -1417,7 +1434,7 @@ const Ut = y(
       ])
     ])
   ]
-)), dt = (e) => Y.render(e, app.root), O = {
+)), ut = (e) => Y.render(e, app.root), O = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1444,7 +1461,7 @@ const Ut = y(
     iconColor: "text-muted-foreground"
   }
 };
-class ut extends v {
+class ht extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -1462,7 +1479,7 @@ class ut extends v {
     const t = (d) => {
       d.target === this.panel && this.close();
     }, { borderColor: s, bgColor: o, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${o} ${s}`, a = this.title || "Dialog Title";
-    return ct({
+    return dt({
       class: r,
       title: a,
       click: t,
@@ -1506,7 +1523,7 @@ class ut extends v {
    * @returns {void}
    */
   open() {
-    dt(this), this.panel.showModal(), this.state.open = !0;
+    ut(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1517,7 +1534,7 @@ class ut extends v {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class qt extends ut {
+class Ht extends ht {
   /**
    * This will declare the props for the compiler.
    *
@@ -1547,7 +1564,7 @@ class qt extends ut {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const Ht = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
+const Rt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
   W({ class: "flex flex-auto flex-col" }, [
     n({ class: "flex flex-auto flex-col space-y-4" }, [
       n({ class: "flex flex-auto items-center justify-center" }, [
@@ -1565,45 +1582,45 @@ const Ht = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
 ]));
 export {
   yt as A,
-  Ft as B,
-  It as C,
-  fe as D,
-  Ut as E,
-  Ce as F,
-  qt as G,
-  ct as H,
-  ut as I,
-  Ht as J,
+  zt as B,
+  $t as C,
+  me as D,
+  qt as E,
+  ke as F,
+  Ht as G,
+  dt as H,
+  ht as I,
+  Rt as J,
   Mt as L,
-  $t as M,
-  Tt as N,
-  Ke as P,
-  Dt as S,
-  Bt as T,
-  be as a,
-  vt as b,
-  we as c,
-  ke as d,
-  Se as e,
-  De as f,
-  $e as g,
-  Ct as h,
+  Tt as M,
+  Bt as N,
+  Qe as P,
+  It as S,
+  At as T,
+  xe as a,
+  Ct as b,
+  ve as c,
+  Se as d,
+  De as e,
+  Ie as f,
+  Te as g,
+  kt as h,
   W as i,
-  kt as j,
-  St as k,
-  ze as l,
-  At as m,
-  Lt as n,
-  Pt as o,
+  St as j,
+  Dt as k,
+  Ne as l,
+  Lt as m,
+  Pt as n,
+  Ft as o,
   S as p,
   g as q,
-  je as r,
-  zt as s,
-  Nt as t,
-  Ge as u,
-  Qe as v,
-  Et as w,
-  jt as x,
-  Ot as y,
-  Vt as z
+  Oe as r,
+  Nt as s,
+  Et as t,
+  Ke as u,
+  Xe as v,
+  jt as w,
+  Ot as x,
+  Vt as y,
+  Ut as z
 };

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { B as c, I as C, L as T } from "./buttons-Cm9etaEG.js";
 import { C as b, d as I, D as S, c as P, E as B, F, H as k, I as M, M as f, N as x, P as N, R as v, T as y, a as h, b as L, U as W, W as H } from "./inputs-CMjx5-IX.js";
 import { V as R, a as w } from "./veil-D4dRxILB.js";
 import { Icons as E } from "./icons.es.js";
-import { A as O, B as V, C as j, t as q, G as J, v as z, w as _, x as K, y as Q, D as X, j as Y, k as Z, I as $, H as aa, s as ea, c as sa, a as oa, b as ta, J as ra, i as na, g as la, e as ia, h as pa, F as ma, d as ua, f as da, L as ga, u as ca, M as Ca, l as Ta, N as Da, P as ba, p as Ia, q as Sa, S as Pa, n as Ba, o as Fa, T as ka, z as Ma, E as fa, m as xa, r as Na } from "./empty-state-CtYoGkqL.js";
+import { A as O, B as V, C as j, t as q, G as J, v as z, w as _, x as K, y as Q, D as X, j as Y, k as Z, I as $, H as aa, s as ea, c as sa, a as oa, b as ta, J as ra, i as na, g as la, e as ia, h as pa, F as ma, d as ua, f as da, L as ga, u as ca, M as Ca, l as Ta, N as Da, P as ba, p as Ia, q as Sa, S as Pa, n as Ba, o as Fa, T as ka, z as Ma, E as fa, m as xa, r as Na } from "./empty-state-Dct3Y9SD.js";
 import { A as ya, b as ha, C as La, D as Wa, a as Ha, F as Aa, M as Ra, P as wa, R as Ua, c as Ea, g as Ga, p as Oa } from "./range-calendar-k0B4ZWJq.js";
 import { B as ja, p as qa, C as Ja, j as za, D as _a, m as Ka, k as Qa, H as Xa, I as Ya, N as Za, O as $a, P as ae, S as ee, n as se, o as oe, t as te, s as re, q as ne, r as le, T as ie, l as pe, U as me, W as ue, f as de, h as ge, i as ce, c as Ce, d as Te, b as De, e as be, a as Ie, g as Se } from "./signature-panel-Cj_uAlDW.js";
 import { B as Be, I as Fe, M as ke, d as Me, e as fe, g as xe, N as Ne, b as ve, a as ye, f as he, P as Le, c as We, S as He, T as Ae } from "./mobile-nav-wrapper-Dj67Pb8l.js";

package/dist/molecules.es.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.247",
+	"version": "1.0.249",
 	"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": {