@base-framework/ui 1.0.312 → 1.0.313

package/dist/{empty-state-D1QN4wKI.js → empty-state-DZx0Deoe.js}

@@ -1,12 +1,12 @@
-import { Div as l, H5 as X, P as g, I as p, Li as q, Span as a, Ul as H, Button as f, OnState as I, Label as A, H2 as C, Form as Z, Header as $, Footer as P, A as Y, H3 as ee, Checkbox as te, Input as b, Img as _, Nav as se, UseParent as W, OnStateOpen as M, Time as oe, Dialog as le } from "@base-framework/atoms";
-import { Atom as c, Component as w, Html as j, Dom as ne, base as re, Data as F, Builder as G, Jot as v, Events as k, DateTime as L } from "@base-framework/base";
+import { Div as l, H5 as X, P as g, I as p, Li as q, Span as a, Ul as H, Button as f, OnState as I, Label as A, H2 as C, Form as Z, Header as F, Footer as P, A as Y, H3 as ee, Checkbox as te, Input as b, Img as _, Nav as se, UseParent as W, OnStateOpen as M, Time as oe, Dialog as le } from "@base-framework/atoms";
+import { Atom as c, Component as w, Html as j, Dom as ne, base as re, Data as $, Builder as G, Jot as v, Events as k, DateTime as L } from "@base-framework/base";
 import { P as S, b as ie, R as ae } from "./range-calendar-BMWSJTE0.js";
 import { C as ce, F as ue, a as y } from "./veil-CVCuKSvj.js";
 import { B as h, I as m } from "./buttons-CHEs54Wl.js";
 import { Icons as u } from "./icons.es.js";
 import { Timer as de, List as he, DynamicTime as fe } from "@base-framework/organisms";
-import { F as z } from "./format-DnofNaaz.js";
-const E = {
+import { F as O } from "./format-DnofNaaz.js";
+const z = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -34,8 +34,8 @@ const E = {
   }
 }, me = (e, t) => l({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   p({ html: e })
-]), ge = (e) => X({ class: "font-semibold" }, e), pe = (e) => g({ class: "text-sm text-muted-foreground" }, e), kt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: n, bgColor: r, iconColor: i } = E[o] || E.default;
+]), ge = (e) => X({ class: "font-semibold" }, e), pe = (e) => g({ class: "text-sm text-muted-foreground" }, e), St = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: n, bgColor: r, iconColor: i } = z[o] || z.default;
   return l({ class: `flex items-start p-4 border rounded-lg ${r} ${n}` }, [
     // Icon and content
     s && me(s, i),
@@ -45,7 +45,7 @@ const E = {
     ])
   ]);
 });
-class St extends w {
+class Dt extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -104,7 +104,7 @@ const be = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
     ]) : null
   )
 ]);
-class Dt extends w {
+class It extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -119,7 +119,7 @@ class Dt extends w {
    * @returns {Data}
    */
   setData() {
-    return new F({
+    return new $({
       groups: this.groups || []
     });
   }
@@ -167,13 +167,13 @@ class Dt extends w {
     ]);
   }
 }
-const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Ie = c((e, t) => A({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), $e = c((e, t) => g({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Fe = c((e, t) => g({ ...e, class: "text-sm text-destructive" }, t)), It = c((e, t = []) => ce({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Ie = c((e, t) => A({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Fe = c((e, t) => g({ ...e, class: "text-sm text-muted-foreground italic" }, t)), $e = c((e, t) => g({ ...e, class: "text-sm text-destructive" }, t)), Ft = c((e, t = []) => ce({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
   e.title && C({ class: "text-lg font-semibold py-4 px-6" }, e.title),
   e.description && g({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
   ...t
 ])), $t = c((e, t = []) => ue({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
   l({ class: "flex flex-col gap-y-6" }, t)
-])), Ft = c((e, t = []) => {
+])), Bt = c((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);
 }), Be = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", J = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = J(o.children, t, s)), !o.required) ? o : Be(o) ? {
@@ -193,7 +193,7 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     ...e,
     class: "w-full"
   }, n);
-}), Bt = y(
+}), Tt = y(
   {
     /**
      * The initial state of the FormField.
@@ -226,8 +226,8 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
             value: this.state.value,
             setError: n
           }, this.children),
-          o && $e({ id: this.getId("description") }, o),
-          l({ onState: ["error", (r) => r && Fe(r)] })
+          o && Fe({ id: this.getId("description") }, o),
+          l({ onState: ["error", (r) => r && $e(r)] })
         ])
       ]);
     }
@@ -236,16 +236,16 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
 }, K = c(
   (e, t) => Z({ ...e, submit: (s, o) => Le(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), Tt = c((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Lt = c((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
+), Lt = c((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), At = c((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
   e.title && C({ class: "font-semibold" }, e.title),
   ...t
-])), At = (e, t) => l({ class: "flex justify-between" }, [
+])), Pt = (e, t) => l({ class: "flex justify-between" }, [
   a({ class: "text-muted-foreground" }, e),
   a(t)
-]), Pt = (e, t) => l({ class: "flex" }, [
+]), Mt = (e, t) => l({ class: "flex" }, [
   a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
   a(t)
-]), Ae = ({ title: e, description: t, back: s, icon: o, options: n = [] }) => $({ 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: n = [] }) => F({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
@@ -277,7 +277,7 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     P({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
 ])), Me = (e) => G.render(e, app.root);
-class Mt extends w {
+class jt extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -437,7 +437,7 @@ class Mt extends w {
     this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
   }
 }
-const N = {
+const E = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -463,22 +463,22 @@ const N = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, je = (e) => $({ class: "flex justify-center" }, [
+}, je = (e) => F({ class: "flex justify-center" }, [
   ee({ class: "text-lg font-bold mb-0" }, e)
-]), ze = c(({ href: e, class: t }, s) => Y({
+]), Oe = c(({ href: e, class: t }, s) => Y({
   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)), Ee = c(({ close: e, class: t }, s) => l({
+}, s)), ze = c(({ 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 Ne extends w {
+class Ee extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -502,10 +502,10 @@ class Ne extends w {
    */
   render() {
     const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), n = this.href || null, r = this.getChildren(o);
-    return n ? ze({
+    return n ? Oe({
       href: n,
       class: `${t} ${s}`
-    }, r) : Ee({
+    }, r) : ze({
       close: this.close.bind(this),
       class: `${t} ${s}`
     }, r);
@@ -526,7 +526,7 @@ class Ne extends w {
    */
   getTypeStyles() {
     const t = this.type || "default";
-    return N[t] || N.default;
+    return E[t] || E.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -577,8 +577,8 @@ class Ne extends w {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Oe = 0;
-class jt extends w {
+let Ne = 0;
+class Ot extends w {
   /**
    * This will render the component.
    *
@@ -590,7 +590,7 @@ class jt extends w {
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new Ne(t)
+        rowItem: (t) => new Ee(t)
       })
     ]);
   }
@@ -601,7 +601,7 @@ class jt extends w {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = Oe++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = Ne++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -613,7 +613,7 @@ class jt extends w {
     this.list.delete(t.id), this.list.isEmpty() && this.panel.hidePopover();
   }
 }
-const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
+const N = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
   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"]],
@@ -625,7 +625,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
   a(t)
 ])), Ue = (e) => {
   const t = document.documentElement;
-  if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), O && !O("(prefers-color-scheme: " + e + ")").matches) {
+  if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
     return;
   }
@@ -722,7 +722,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
   AWAY: "bg-yellow-500"
 }, Re = (e = "") => (e = e.toUpperCase(), x[e] || x.OFFLINE), Nt = (e) => l({
   class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Re(e)}`
-}), Ot = ({ propName: e = "status" } = {}) => l({
+}), Ut = ({ propName: e = "status" } = {}) => l({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
     [x.ONLINE]: D.ONLINE,
@@ -730,7 +730,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     [x.BUSY]: D.BUSY,
     [x.AWAY]: D.AWAY
   }]
-}), Ut = v(
+}), Ve = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1, Rt = v(
   {
     /**
      * Get the initial state for the component.
@@ -786,25 +786,22 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          I(
-            "loaded",
-            (s) => s ? _({
-              // @ts-ignore
-              src: this.src,
-              class: "absolute inset-0 w-full h-full object-cover rounded-full"
-            }) : A({
-              htmlFor: e,
-              class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
-            }, [
-              m(u.upload),
-              l("Upload Image")
-            ])
-          )
+          I("loaded", (s) => s === !1 || Ve(this.src) ? A({
+            htmlFor: e,
+            class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
+          }, [
+            m(u.upload),
+            l("Upload Image")
+          ]) : _({
+            // @ts-ignore
+            src: this.src,
+            class: "absolute inset-0 w-full h-full object-cover rounded-full"
+          }))
         ])
       ]);
     }
   }
-), Rt = v(
+), Vt = v(
   {
     /**
      * Get the initial state for the component.
@@ -878,7 +875,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       ]);
     }
   }
-), Ve = (e, t) => Y(
+), qe = (e, t) => Y(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
@@ -886,14 +883,14 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
   [a(t)]
-), qe = () => m({
+), He = () => m({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), He = (e) => l({ class: "flex items-center" }, [
-  e.href ? Ve(e.href, e.label) : a(e.label),
-  e.separator && qe()
-]), Vt = v(
+}, u.chevron.single.right), Ye = (e) => l({ class: "flex items-center" }, [
+  e.href ? qe(e.href, e.label) : a(e.label),
+  e.separator && He()
+]), qt = v(
   {
     /**
      * Set initial data
@@ -901,7 +898,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new F({
+      return new $({
         // @ts-ignore
         items: this.items || []
       });
@@ -922,7 +919,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
           l({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => He({
+            for: ["items", (t, s) => Ye({
               href: t.href,
               label: t.label,
               separator: s < e
@@ -941,7 +938,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, Ye = (e) => U[e] || U.default, _e = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+}, _e = (e) => U[e] || U.default, We = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
   a({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
@@ -952,10 +949,10 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       o.activeIndex = e, n && n(e);
     }
   })
-]), We = (e, t) => Array.from({ length: e }, (s, o) => _e({
+]), Ge = (e, t) => Array.from({ length: e }, (s, o) => We({
   index: o,
   size: t
-})), qt = v(
+})), Ht = v(
   {
     /**
      * Defines component data (props).
@@ -963,7 +960,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new F({
+      return new $({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -977,7 +974,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = Ye(this.size || "sm"), s = We(this.data.count, t);
+      const e = this.gap || "gap-2", t = _e(this.size || "sm"), s = Ge(this.data.count, t);
       return l(
         { class: "flex justify-center items-center py-2" },
         [
@@ -986,7 +983,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       );
     }
   }
-), Ge = ({ toggleDropdown: e }) => f(
+), Je = ({ 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 bg-input hover:bg-muted h-10 px-4 py-2 justify-between",
@@ -996,16 +993,16 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
     p({ html: u.chevron.upDown })
   ]
-), Je = (e, t, s) => q({
+), Ke = (e, t, s) => q({
   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 && a({ class: "mr-2 flex items-baseline" }, [m({ size: "xs" }, e.icon)]),
   a({ class: "text-base font-normal" }, e.label)
-]), Ke = (e, t) => l({ class: "w-full border rounded-md" }, [
-  H({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Je(s, e, t)] })
-]), Qe = ({ onSelect: e, state: t }) => l({ class: "flex flex-auto flex-col" }, [
+]), Qe = (e, t) => l({ class: "w-full border rounded-md" }, [
+  H({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Ke(s, e, t)] })
+]), Xe = ({ onSelect: e, state: t }) => l({ class: "flex flex-auto flex-col" }, [
   I(
     "open",
     (s, o, n) => s ? new S({
@@ -1013,10 +1010,10 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       parent: n,
       button: n.button
     }, [
-      Ke(e, t)
+      Qe(e, t)
     ]) : null
   )
-]), Ht = v(
+]), Yt = v(
   {
     /**
      * This will set up the data.
@@ -1024,7 +1021,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new F({
+      return new $({
         // @ts-ignore
         items: this.items || []
       });
@@ -1097,8 +1094,8 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
       return l({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
         // @ts-ignore
-        Ge({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        Qe({
+        Je({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        Xe({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1124,15 +1121,15 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
   click: t,
   icon: e,
   "aria-label": s
-}), Xe = ({ click: e }) => Q({
+}), Ze = ({ click: e }) => Q({
   icon: u.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), Ze = ({ click: e }) => Q({
+}), et = ({ click: e }) => Q({
   icon: u.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => W(({ state: n }) => b({
+}), tt = ({ bind: e, min: t, max: s, readonly: o = !1 }) => W(({ state: n }) => b({
   value: ["[[count]]", n],
   bind: e,
   blur: (r, { state: i }) => {
@@ -1145,7 +1142,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), Yt = y(
+})), _t = y(
   {
     /**
      * Initial state for the counter component.
@@ -1168,32 +1165,32 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     render() {
       const e = this.class ?? "";
       return l({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${e}` }, [
-        Xe({ click: () => this.state.decrement("count") }),
-        et({
+        Ze({ click: () => this.state.decrement("count") }),
+        tt({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        Ze({ click: () => this.state.increment("count") })
+        et({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), tt = ({ bind: e, required: t }) => b({
+), st = ({ bind: e, required: t }) => b({
   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 bg-input hover:bg-muted rounded-md h-10 px-4 py-2",
   click: s
 }, [
-  tt({ bind: e, required: t }),
+  st({ bind: e, required: t }),
   a({
     onState: ["selectedDate", (o) => o ? L.format("standard", o) : "Pick a date"]
   }),
   p({ html: u.calendar.days })
-]), ot = ({ handleDateSelect: e, blockPriorDates: t }) => M(
+]), lt = ({ handleDateSelect: e, blockPriorDates: t }) => M(
   (s, o, n) => new S({
     cache: "dropdown",
     parent: n,
@@ -1206,7 +1203,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       blockPriorDates: t
     })
   ])
-), _t = y(
+), Wt = y(
   {
     /**
      * The initial state of the DatePicker.
@@ -1238,35 +1235,35 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
         this.state.selectedDate = s, this.state.open = !1, this.input.value = s, k.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(s);
       };
       return l({ class: "relative w-full max-w-[320px]" }, [
-        st({
+        ot({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        ot({
+        lt({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), lt = ({ bind: e, required: t }) => b({
+), nt = ({ bind: e, required: t }) => b({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), nt = ({ bind: e, required: t, toggleOpen: s }) => f({
+}), rt = ({ bind: e, required: t, toggleOpen: s }) => f({
   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
 }, [
-  lt({ bind: e, required: t }),
+  nt({ bind: e, required: t }),
   W(({ state: o }) => [
-    a(z.date(["[[start]]", o], "Start Date")),
+    a(O.date(["[[start]]", o], "Start Date")),
     a(" - "),
-    a(z.date(["[[end]]", o], "End Date"))
+    a(O.date(["[[end]]", o], "End Date"))
   ]),
   p({ html: u.calendar.days })
-]), rt = ({ handleDateSelect: e, blockPriorDates: t }) => M((s, o, n) => new S({
+]), it = ({ handleDateSelect: e, blockPriorDates: t }) => M((s, o, n) => new S({
   cache: "dropdown",
   parent: n,
   button: n.panel,
@@ -1278,7 +1275,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     onRangeSelect: e,
     blockPriorDates: t
   })
-])), Wt = y(
+])), Gt = y(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1314,19 +1311,19 @@ const O = globalThis.matchMedia, B = 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}`, k.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]" }, [
-        nt({
+        rt({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        rt({
+        it({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), Gt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => oe([
+), Jt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => oe([
   new fe({
     dateTime: e,
     filter: s || ((o) => {
@@ -1335,7 +1332,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     })
   })
 ]);
-function it({ bind: e, required: t }) {
+function at({ bind: e, required: t }) {
   return b({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
@@ -1343,14 +1340,14 @@ function it({ bind: e, required: t }) {
     required: t
   });
 }
-function at({ bind: e, required: t, toggleOpen: s }) {
+function ct({ bind: e, required: t, toggleOpen: s }) {
   return f(
     {
       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
     },
     [
-      it({ bind: e, required: t }),
+      at({ bind: e, required: t }),
       a({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
@@ -1372,7 +1369,7 @@ function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: n = !1
     })
   );
 }
-function ct({ handleTimeSelect: e }) {
+function ut({ handleTimeSelect: e }) {
   return M(
     (t, s, o) => new S(
       {
@@ -1432,7 +1429,7 @@ function R(e) {
     meridian: r
   });
 }
-const Jt = y(
+const Kt = y(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1480,23 +1477,23 @@ const Jt = y(
       return l(
         { class: "relative w-full max-w-[320px]" },
         [
-          at({
+          ct({
             toggleOpen: e,
             bind: this.bind,
             required: this.required
           }),
-          ct({
+          ut({
             handleTimeSelect: t
           })
         ]
       );
     }
   }
-), ut = (e, t) => l({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+), dt = (e, t) => l({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
   m({ size: "lg" }, e)
-]), dt = ({ title: e }) => $({ class: "flex flex-auto items-center" }, [
+]), ht = ({ title: e }) => F({ class: "flex flex-auto items-center" }, [
   C({ class: "text-lg font-semibold" }, e)
-]), ht = c((e, t) => le(
+]), ft = c((e, t) => le(
   {
     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
@@ -1507,10 +1504,10 @@ const Jt = y(
   [
     l({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && ut(e.icon, e.iconColor),
+      e.icon && dt(e.icon, e.iconColor),
       l({ class: "flex flex-auto flex-col gap-4" }, [
         l({ class: "flex flex-auto flex-col gap-y-2" }, [
-          dt(e),
+          ht(e),
           e.description && g({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
           l({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
@@ -1518,7 +1515,7 @@ const Jt = y(
       ])
     ])
   ]
-)), ft = (e) => G.render(e, app.root), V = {
+)), mt = (e) => G.render(e, app.root), V = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1545,7 +1542,7 @@ const Jt = y(
     iconColor: "text-muted-foreground"
   }
 };
-class mt extends w {
+class gt extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -1563,7 +1560,7 @@ class mt extends w {
     const t = (d) => {
       d.target === this.panel && this.close();
     }, { borderColor: s, bgColor: o, iconColor: n } = V[this.type] || V.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
-    return ht({
+    return ft({
       class: r,
       title: i,
       click: t,
@@ -1607,7 +1604,7 @@ class mt extends w {
    * @returns {void}
    */
   open() {
-    ft(this), this.panel.showModal(), this.state.open = !0;
+    mt(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1618,7 +1615,7 @@ class mt extends w {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class Kt extends mt {
+class Qt extends gt {
   /**
    * This will declare the props for the compiler.
    *
@@ -1648,7 +1645,7 @@ class Kt extends mt {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const Qt = c((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
+const Xt = c((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
   K({ 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" }, [
@@ -1656,7 +1653,7 @@ const Qt = c((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
           m(e.icon)
         ])
       ]),
-      $({ class: "py-4 text-center" }, [
+      F({ class: "py-4 text-center" }, [
         C({ class: "text-xl font-bold" }, e.title),
         g({ class: "pb-8 text-muted-foreground" }, e.description || ""),
         ...t
@@ -1665,50 +1662,50 @@ const Qt = c((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
   ])
 ]));
 export {
-  kt as A,
-  Vt as B,
-  Pt as C,
-  St as D,
-  _t as E,
+  St as A,
+  qt as B,
+  Mt as C,
+  Dt as D,
+  Wt as E,
   De as F,
-  Wt as G,
-  Gt as H,
-  Ut as I,
-  Jt as J,
-  Kt as K,
-  Rt as L,
-  Mt as M,
-  jt as N,
-  ht as O,
-  Ze as P,
-  mt as Q,
-  Qt as R,
-  At as S,
+  Gt as G,
+  Jt as H,
+  Rt as I,
+  Kt as J,
+  Qt as K,
+  Vt as L,
+  jt as M,
+  Ot as N,
+  ft as O,
+  et as P,
+  gt as Q,
+  Xt as R,
+  Pt as S,
   zt as T,
   ve as a,
-  Dt as b,
+  It as b,
   Ce as c,
   Ie as d,
-  $e as e,
-  Fe as f,
-  It as g,
+  Fe as e,
+  $e as f,
+  Ft as g,
   $t as h,
-  Ft as i,
+  Bt as i,
   Te as j,
-  Bt as k,
+  Tt as k,
   K as l,
-  Tt as m,
-  Lt as n,
-  Ne as o,
+  Lt as m,
+  At as n,
+  Ee as o,
   Et as p,
   Nt as q,
-  Ot as r,
+  Ut as r,
   D as s,
   x as t,
   Re as u,
-  qt as v,
-  Ht as w,
-  Xe as x,
-  et as y,
-  Yt as z
+  Ht as v,
+  Yt as w,
+  Ze as x,
+  tt as y,
+  _t as z
 };

package/dist/index.es.js

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

package/package.json

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