@base-framework/ui 1.0.271 → 1.0.273

package/dist/{empty-state-qfZvAfRD.js → empty-state-CPWpkmxa.js}

@@ -1,10 +1,10 @@
-import { Div as n, H5 as J, P as m, I as p, Li as U, Span as a, Ul as V, Button as f, OnState as x, Label as R, H2 as v, Form as K, Header as I, Footer as A, A as q, H3 as Q, Checkbox as X, Input as w, Img as Z, Nav as ee, UseParent as H, Time as te, Dialog as se } from "@base-framework/atoms";
-import { Atom as c, Component as C, Html as L, Dom as oe, base as ne, Data as $, Builder as Y, Jot as k, Events as le, DateTime as F } from "@base-framework/base";
-import { P as S, b as re, R as ie } from "./range-calendar-DW0cMOJy.js";
-import { C as ae, F as ce, a as y } from "./veil-tVDPinrr.js";
+import { Div as n, H5 as J, P as m, I as p, Li as U, Span as i, Ul as R, Button as f, OnState as x, Label as V, H2 as C, Form as K, Header as I, Footer as A, A as q, H3 as Q, Checkbox as X, Input as w, Img as Z, Nav as ee, UseParent as H, Time as te, Dialog as se } from "@base-framework/atoms";
+import { Atom as c, Component as y, Html as L, Dom as oe, base as ne, Data as $, Builder as Y, Jot as k, Events as le, DateTime as F } from "@base-framework/base";
+import { P as S, b as re, R as ae } from "./range-calendar-DW0cMOJy.js";
+import { C as ie, F as ce, a as v } from "./veil-tVDPinrr.js";
 import { B as h, I as g } from "./buttons-BKLL4I6r.js";
-import { Icons as u } from "./icons.es.js";
-import { Timer as de, List as ue, DynamicTime as he } from "@base-framework/organisms";
+import { Icons as d } from "./icons.es.js";
+import { Timer as ue, List as de, DynamicTime as he } from "@base-framework/organisms";
 import { F as P } from "./format-DnofNaaz.js";
 const M = {
   info: {
@@ -34,18 +34,18 @@ const M = {
   }
 }, fe = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   p({ html: e })
-]), me = (e) => J({ class: "font-semibold" }, e), pe = (e) => m({ class: "text-sm text-muted-foreground" }, e), kt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: l, bgColor: r, iconColor: i } = M[o] || M.default;
+]), me = (e) => J({ class: "font-semibold" }, e), pe = (e) => m({ class: "text-sm text-muted-foreground" }, e), Ct = 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 && fe(s, i),
+    s && fe(s, a),
     n({ class: "flex flex-col" }, [
       me(e),
       pe(t)
     ])
   ]);
 });
-class ge extends C {
+class kt extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -69,30 +69,30 @@ class ge extends C {
     oe.addClass(t, s), ne.on("animationend", t, (o) => L.removeElement(t));
   }
 }
-const be = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), xe = (e) => a({ class: "flex w-4 h-4", html: e }), we = (e) => a({ class: "flex-auto" }, e), ye = (e, t) => U({
+const ge = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), be = (e) => i({ class: "flex w-4 h-4", html: e }), xe = (e) => i({ class: "flex-auto" }, e), we = (e, t) => U({
   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 && xe(e.icon),
-  we(e.label),
-  e.shortcut && be(e.shortcut)
-]), ve = (e, t) => V({ class: "grid gap-2" }, [
-  e.map((s) => ye(s, t))
-]), Ce = (e) => n({ class: "w-full z-10" }, [
+  e.icon && be(e.icon),
+  xe(e.label),
+  e.shortcut && ge(e.shortcut)
+]), ye = (e, t) => R({ class: "grid gap-2" }, [
+  e.map((s) => we(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) => ve(t, e)]
+    for: ["groups", (t) => ye(t, e)]
   })
-]), ke = ({ label: e, icon: t, toggleDropdown: s }) => f({
+]), Ce = ({ label: e, icon: t, toggleDropdown: s }) => f({
   cache: "button",
   class: `inline-flex items-center justify-between rounded-md border
 			px-2 py-2 text-sm font-medium hover:bg-muted
 			focus:outline-none transition duration-150 ease-in-out`,
   click: s
 }, [
-  e && a(e),
+  e && i(e),
   t && p({ html: t })
-]), Se = ({ onSelect: e }) => n([
+]), ke = ({ onSelect: e }) => n([
   x(
     "open",
     (t, s, o) => t ? new S({
@@ -100,11 +100,11 @@ const be = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
       parent: o,
       button: o.button
     }, [
-      Ce(e)
+      ve(e)
     ]) : null
   )
 ]);
-class St extends C {
+class St extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -158,17 +158,17 @@ class St extends C {
    */
   render() {
     return n({ class: "relative" }, [
-      ke({
+      Ce({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      Se({ onSelect: this.handleSelect.bind(this) })
+      ke({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ie = c((e, t) => R({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), $e = c((e, t) => m({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Te = c((e, t) => m({ ...e, class: "text-sm text-destructive" }, t)), Dt = c((e, t = []) => ae({ class: "space-y-0", margin: "m-0", padding: "p-0" }, [
-  e.title && v({ class: "text-lg font-semibold py-4 px-6" }, e.title),
+const Se = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), De = c((e, t) => V({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Ie = c((e, t) => m({ ...e, class: "text-sm text-muted-foreground italic" }, t)), $e = c((e, t) => m({ ...e, class: "text-sm text-destructive" }, t)), Dt = c((e, t = []) => ie({ class: "space-y-0", margin: "m-0", padding: "p-0" }, [
+  e.title && C({ class: "text-lg font-semibold py-4 px-6" }, e.title),
   e.description && m({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
   ...t
 ])), It = c((e, t = []) => ce({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
@@ -176,14 +176,14 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
 ])), $t = c((e, t = []) => {
   const s = e.border ? "border-t" : "";
   return n({ ...e, class: `flex flex-col pb-4 px-6 space-y-4 ${s} ${e.class || ""}` }, t);
-}), Be = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", _ = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = _(o.children, t, s)), !o.required) ? o : Be(o) ? {
+}), Te = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", _ = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = _(o.children, t, s)), !o.required) ? o : Te(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: t
-} : o), Fe = c((e, t) => {
+} : o), Be = c((e, t) => {
   const l = _(t, (r) => {
     r.target.checkValidity() && e.setError(null);
   }, (r) => {
@@ -193,7 +193,7 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
     ...e,
     class: "w-full"
   }, l);
-}), Tt = y(
+}), Tt = v(
   {
     /**
      * The initial state of the FormField.
@@ -218,38 +218,38 @@ const De = 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" }, [
-        De([
-          Ie({ htmlFor: t }, s),
-          Fe({
+        Se([
+          De({ htmlFor: t }, s),
+          Be({
             id: t,
             name: e,
             value: this.state.value,
             setError: l
           }, this.children),
-          o && $e({ id: this.getId("description") }, o),
-          n({ onState: ["error", (r) => r && Te(r)] })
+          o && Ie({ id: this.getId("description") }, o),
+          n({ onState: ["error", (r) => r && $e(r)] })
         ])
       ]);
     }
   }
-), Ae = (e, t, s = null) => {
+), Fe = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
 }, W = c(
-  (e, t) => K({ ...e, submit: (s, o) => Ae(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+  (e, t) => K({ ...e, submit: (s, o) => Fe(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
 ), Bt = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Ft = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
-  e.title && v({ class: "font-semibold" }, e.title),
+  e.title && C({ class: "font-semibold" }, e.title),
   ...t
 ])), At = (e, t) => n({ class: "flex justify-between" }, [
-  a({ class: "text-muted-foreground" }, e),
-  a(t)
+  i({ class: "text-muted-foreground" }, e),
+  i(t)
 ]), Lt = (e, t) => n({ class: "flex" }, [
-  a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
-  a(t)
-]), Le = ({ 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" }, [
+  i({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
+  i(t)
+]), 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
    */
-  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, i) => i.close() }),
+  s && h({ variant: "icon", icon: d.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, a) => a.close() }),
   /**
    * Icon
    */
@@ -259,12 +259,12 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
    */
   n({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
     n({ class: "flex flex-auto flex-col" }, [
-      v({ class: "text-lg font-semibold m-0 truncate" }, e),
+      C({ class: "text-lg font-semibold m-0 truncate" }, e),
       t && n({ class: "text-sm text-muted-foreground truncate" }, t)
     ]),
     ...l
   ])
-]), Pe = 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) => {
@@ -272,12 +272,12 @@ const De = 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) }, [
-    Le(e),
+    Ae(e),
     n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
     A({ 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) => Y.render(e, app.root);
-class Pt extends C {
+])), Pe = (e) => Y.render(e, app.root);
+class Pt extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -293,7 +293,7 @@ class Pt extends C {
    */
   render() {
     const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Pe(
+    return Le(
       {
         class: t,
         title: s,
@@ -408,7 +408,7 @@ class Pt extends C {
    * @returns {void}
    */
   open() {
-    Me(this), this.showModal();
+    Pe(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -463,25 +463,29 @@ const N = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Ne = (e) => I({ class: "flex justify-center" }, [
+}, Me = (e) => I({ class: "flex justify-center" }, [
   Q({ class: "text-lg font-bold mb-0" }, e)
-]), ze = c(({ href: e, class: t }, s) => q({
-  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}`,
+]), Ne = c(({ href: e, class: t }, s) => q({
+  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) => 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(),
+  animateIn: "pullRightIn",
+  animateOut: "pullRight",
   role: "alert"
 }, s));
-class je extends ge {
+class Ee extends y {
   /**
    * This will declare the props for the compiler.
    *
    * @returns {void}
    */
   declareProps() {
-    this.removingClass = "pullRight", this.secondaryAction = null, this.primaryAction = null, this.primary = !1, this.secondary = !1, this.title = null, this.description = null, this.icon = null, this.onClick = null;
+    this.secondaryAction = null, this.primaryAction = null, this.primary = !1, this.secondary = !1, this.title = null, this.description = null, this.icon = null, this.onClick = null;
   }
   /**
    * This will be called when the component is created.
@@ -498,10 +502,10 @@ class je extends ge {
    */
   render() {
     const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(o);
-    return l ? ze({
+    return l ? Ne({
       href: l,
       class: `${t} ${s}`
-    }, r) : Ee({
+    }, r) : ze({
       close: this.close.bind(this),
       class: `${t} ${s}`
     }, r);
@@ -513,7 +517,7 @@ class je extends ge {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new de(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new ue(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -549,7 +553,7 @@ class je extends ge {
         this.icon && p({ 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 && Ne(this.title)
+            this.title && Me(this.title)
           ]),
           m({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
           (this.primary || this.secondary) && A({ class: "margin-top-24 flex align-center" }, this.getButtons())
@@ -558,7 +562,7 @@ class je extends ge {
       h({
         class: "absolute top-[12px] right-[12px]",
         variant: "icon",
-        icon: u.x,
+        icon: d.x,
         click: this.close.bind(this)
       })
     ];
@@ -573,8 +577,8 @@ class je extends ge {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Oe = 0;
-class Mt extends C {
+let je = 0;
+class Mt extends y {
   /**
    * This will render the component.
    *
@@ -582,11 +586,11 @@ class Mt extends C {
    */
   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 ue({
+      new de({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new je(t)
+        rowItem: (t) => new Ee(t)
       })
     ]);
   }
@@ -597,7 +601,7 @@ class Mt extends C {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = Oe++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = je++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -614,12 +618,12 @@ const z = 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"), Ue(e);
+    l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Oe(e);
   }
 }, [
   g(s),
-  a(t)
-])), Ue = (e) => {
+  i(t)
+])), Oe = (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"), z && !z("(prefers-color-scheme: " + e + ")").matches) {
@@ -638,9 +642,9 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     render() {
       return n({ class: "flex flex-auto flex-col" }, [
         n({ class: "grid grid-cols-3 gap-4" }, [
-          T({ label: "System", value: "system", icon: u.adjustments.horizontal }),
-          T({ label: "Light", value: "light", icon: u.sun }),
-          T({ label: "Dark", value: "dark", icon: u.moon })
+          T({ label: "System", value: "system", icon: d.adjustments.horizontal }),
+          T({ label: "Light", value: "light", icon: d.sun }),
+          T({ label: "Dark", value: "dark", icon: d.moon })
         ])
       ]);
     },
@@ -655,7 +659,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       };
     }
   }
-), zt = y(
+), zt = v(
   {
     /**
      * The initial state of the Toggle.
@@ -700,7 +704,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
           bind: this.bind,
           required: this.required
         }),
-        a({
+        i({
           class: "absolute h-5 w-5 bg-background rounded-full shadow-md transform transition-transform",
           onState: ["active", { "translate-x-[22px]": !0, "translate-x-[2px]": !1 }]
         })
@@ -717,8 +721,8 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Ve = (e = "") => (e = e.toUpperCase(), b[e] || b.OFFLINE), Et = (e) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ve(e)}`
+}, Ue = (e = "") => (e = e.toUpperCase(), b[e] || b.OFFLINE), Et = (e) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ue(e)}`
 }), jt = ({ propName: e = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
@@ -790,11 +794,11 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
               // @ts-ignore
               src: this.src,
               class: "absolute inset-0 w-full h-full object-cover rounded-full"
-            }) : R({
+            }) : V({
               htmlFor: e,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
-              g(u.upload),
+              g(d.upload),
               n("Upload logo")
             ])
           )
@@ -809,14 +813,14 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [a(t)]
-), qe = () => g({
+  [i(t)]
+), Ve = () => g({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), He = (e) => n({ class: "flex items-center" }, [
-  e.href ? Re(e.href, e.label) : a(e.label),
-  e.separator && qe()
+}, d.chevron.single.right), qe = (e) => n({ class: "flex items-center" }, [
+  e.href ? Re(e.href, e.label) : i(e.label),
+  e.separator && Ve()
 ]), Ut = k(
   {
     /**
@@ -846,7 +850,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
           n({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => He({
+            for: ["items", (t, s) => qe({
               href: t.href,
               label: t.label,
               separator: s < e
@@ -865,8 +869,8 @@ const z = 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"
-}, Ye = (e) => E[e] || E.default, _e = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
-  a({
+}, He = (e) => E[e] || E.default, Ye = ({ 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", {
       "bg-primary": e,
@@ -876,10 +880,10 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       o.activeIndex = e, l && l(e);
     }
   })
-]), We = (e, t) => Array.from({ length: e }, (s, o) => _e({
+]), _e = (e, t) => Array.from({ length: e }, (s, o) => Ye({
   index: o,
   size: t
-})), Vt = k(
+})), Rt = k(
   {
     /**
      * Defines component data (props).
@@ -901,7 +905,7 @@ const z = globalThis.matchMedia, T = 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 = He(this.size || "sm"), s = _e(this.data.count, t);
       return n(
         { class: "flex justify-center items-center py-2" },
         [
@@ -910,26 +914,26 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       );
     }
   }
-), Ge = ({ toggleDropdown: e }) => f(
+), We = ({ 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",
     click: e
   },
   [
-    a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
-    p({ html: u.chevron.upDown })
+    i({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    p({ html: d.chevron.upDown })
   ]
-), Je = (e, t, s) => U({
+), Ge = (e, t, s) => U({
   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" }, [g({ size: "xs" }, e.icon)]),
-  a({ class: "text-base font-normal" }, e.label)
-]), Ke = (e, t) => n({ class: "w-full border rounded-md" }, [
-  V({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Je(s, e, t)] })
-]), Qe = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
+  e.icon && i({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, e.icon)]),
+  i({ class: "text-base font-normal" }, e.label)
+]), Je = (e, t) => n({ class: "w-full border rounded-md" }, [
+  R({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Ge(s, e, t)] })
+]), Ke = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
   x(
     "open",
     (s, o, l) => s ? new S({
@@ -937,10 +941,10 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       parent: l,
       button: l.button
     }, [
-      Ke(e, t)
+      Je(e, t)
     ]) : null
   )
-]), Rt = k(
+]), Vt = k(
   {
     /**
      * This will set up the data.
@@ -1021,8 +1025,8 @@ const z = 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
-        Ge({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        Qe({
+        We({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        Ke({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1048,20 +1052,20 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   click: t,
   icon: e,
   "aria-label": s
-}), Xe = ({ click: e }) => G({
-  icon: u.circleMinus,
+}), Qe = ({ click: e }) => G({
+  icon: d.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), Ze = ({ click: e }) => G({
-  icon: u.circlePlus,
+}), Xe = ({ click: e }) => G({
+  icon: d.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => H(({ state: l }) => w({
+}), Ze = ({ bind: e, min: t, max: s, readonly: o = !1 }) => H(({ state: l }) => w({
   value: ["[[count]]", l],
   bind: e,
-  blur: (r, { state: i }) => {
-    let d = parseInt(r.target.value, 10);
-    isNaN(d) && (d = t ?? 0), t !== void 0 && (d = Math.max(d, t)), s !== void 0 && (d = Math.min(d, s)), i.count = d;
+  blur: (r, { state: a }) => {
+    let u = parseInt(r.target.value, 10);
+    isNaN(u) && (u = t ?? 0), t !== void 0 && (u = Math.max(u, t)), s !== void 0 && (u = Math.min(u, s)), a.count = u;
   },
   class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
   readonly: o,
@@ -1069,7 +1073,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), qt = y(
+})), qt = v(
   {
     /**
      * Initial state for the counter component.
@@ -1092,32 +1096,32 @@ const z = 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}` }, [
-        Xe({ click: () => this.state.decrement("count") }),
-        et({
+        Qe({ click: () => this.state.decrement("count") }),
+        Ze({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        Ze({ click: () => this.state.increment("count") })
+        Xe({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), tt = ({ bind: e, required: t }) => w({
+), et = ({ 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({
+}), tt = ({ 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 }),
-  a({
+  et({ bind: e, required: t }),
+  i({
     onState: ["selectedDate", (o) => o ? F.format("standard", o) : "Pick a date"]
   }),
-  p({ html: u.calendar.days })
-]), ot = ({ handleDateSelect: e, blockPriorDates: t }) => x(
+  p({ html: d.calendar.days })
+]), st = ({ handleDateSelect: e, blockPriorDates: t }) => x(
   "open",
   (s, o, l) => s ? new S({
     cache: "dropdown",
@@ -1131,7 +1135,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       blockPriorDates: t
     })
   ]) : null
-), Ht = y(
+), Ht = v(
   {
     /**
      * The initial state of the DatePicker.
@@ -1163,35 +1167,35 @@ const z = 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]" }, [
-        st({
+        tt({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        ot({
+        st({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), nt = ({ bind: e, required: t }) => w({
+), ot = ({ 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
-}), lt = ({ bind: e, required: t, toggleOpen: s }) => f({
+}), nt = ({ 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
 }, [
-  nt({ bind: e, required: t }),
+  ot({ bind: e, required: t }),
   H(({ state: o }) => [
-    a(P.date(["[[start]]", o], "Start Date")),
-    a(" - "),
-    a(P.date(["[[end]]", o], "End Date"))
+    i(P.date(["[[start]]", o], "Start Date")),
+    i(" - "),
+    i(P.date(["[[end]]", o], "End Date"))
   ]),
-  p({ html: u.calendar.days })
-]), rt = ({ handleDateSelect: e, blockPriorDates: t }) => x(
+  p({ html: d.calendar.days })
+]), lt = ({ handleDateSelect: e, blockPriorDates: t }) => x(
   "open",
   (s, o, l) => s ? new S({
     cache: "dropdown",
@@ -1199,14 +1203,14 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     button: l.panel,
     size: "xl"
   }, [
-    new ie({
+    new ae({
       startDate: l.state.start,
       endDate: l.state.end,
       onRangeSelect: e,
       blockPriorDates: t
     })
   ]) : null
-), Yt = y(
+), Yt = v(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1242,12 +1246,12 @@ const z = 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]" }, [
-        lt({
+        nt({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        rt({
+        lt({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
@@ -1263,7 +1267,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     })
   })
 ]);
-function it({ bind: e, required: t }) {
+function rt({ bind: e, required: t }) {
   return w({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
@@ -1278,11 +1282,11 @@ function at({ bind: e, required: t, toggleOpen: s }) {
       click: s
     },
     [
-      it({ bind: e, required: t }),
-      a({
+      rt({ bind: e, required: t }),
+      i({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
-      p({ html: u.clock })
+      p({ html: d.clock })
     ]
   );
 }
@@ -1290,17 +1294,17 @@ function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
     e.map((r) => {
-      let i = l ? r.toString().padStart(2, "0") : r.toString();
+      let a = l ? r.toString().padStart(2, "0") : r.toString();
       return f({
-        text: i,
+        text: a,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
-        click: () => t({ [o]: i }),
-        onState: [s, o, { "bg-muted": i }]
+        click: () => t({ [o]: a }),
+        onState: [s, o, { "bg-muted": a }]
       });
     })
   );
 }
-function ct({ handleTimeSelect: e }) {
+function it({ handleTimeSelect: e }) {
   return x(
     "open",
     (t, s, o) => t ? new S(
@@ -1354,14 +1358,14 @@ function j(e) {
   const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
   if (!s)
     return { hour: null, minute: null, meridian: null };
-  let [, o, l, , r] = s, i = parseInt(o, 10), d = parseInt(l, 10);
-  return i < 0 || i > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && i < 12 ? i += 12 : r === "AM" && i === 12 && (i = 12)) : i === 0 ? (r = "AM", i = 12) : i < 12 ? r = "AM" : i === 12 ? r = "PM" : (r = "PM", i -= 12), {
-    hour: i.toString().padStart(2, "0"),
-    minute: d.toString().padStart(2, "0"),
+  let [, o, l, , r] = s, a = parseInt(o, 10), u = parseInt(l, 10);
+  return a < 0 || a > 23 || u < 0 || u > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && a < 12 ? a += 12 : r === "AM" && a === 12 && (a = 12)) : a === 0 ? (r = "AM", a = 12) : a < 12 ? r = "AM" : a === 12 ? r = "PM" : (r = "PM", a -= 12), {
+    hour: a.toString().padStart(2, "0"),
+    minute: u.toString().padStart(2, "0"),
     meridian: r
   });
 }
-const Wt = y(
+const Wt = v(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1414,18 +1418,18 @@ const Wt = y(
             bind: this.bind,
             required: this.required
           }),
-          ct({
+          it({
             handleTimeSelect: t
           })
         ]
       );
     }
   }
-), dt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+), ct = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
   g({ size: "lg" }, e)
 ]), ut = ({ title: e }) => I({ class: "flex flex-auto items-center" }, [
-  v({ class: "text-lg font-semibold" }, e)
-]), ht = c((e, t) => se(
+  C({ class: "text-lg font-semibold" }, e)
+]), 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
@@ -1436,7 +1440,7 @@ const Wt = y(
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && dt(e.icon, e.iconColor),
+      e.icon && ct(e.icon, e.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
         n({ class: "flex flex-auto flex-col space-y-2" }, [
           ut(e),
@@ -1447,7 +1451,7 @@ const Wt = y(
       ])
     ])
   ]
-)), ft = (e) => Y.render(e, app.root), O = {
+)), ht = (e) => Y.render(e, app.root), O = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1474,7 +1478,7 @@ const Wt = y(
     iconColor: "text-muted-foreground"
   }
 };
-class mt extends C {
+class ft extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -1489,12 +1493,12 @@ class mt extends C {
    * @returns {object}
    */
   render() {
-    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}`, i = this.title || "Dialog Title";
-    return ht({
+    const t = (u) => {
+      u.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 dt({
       class: r,
-      title: i,
+      title: a,
       click: t,
       icon: this.icon,
       iconColor: l,
@@ -1536,7 +1540,7 @@ class mt extends C {
    * @returns {void}
    */
   open() {
-    ft(this), this.panel.showModal(), this.state.open = !0;
+    ht(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1547,7 +1551,7 @@ class mt extends C {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class Gt extends mt {
+class Gt extends ft {
   /**
    * This will declare the props for the compiler.
    *
@@ -1586,7 +1590,7 @@ const Jt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
         ])
       ]),
       I({ class: "py-4 text-center" }, [
-        v({ class: "text-xl font-bold" }, e.title),
+        C({ class: "text-xl font-bold" }, e.title),
         m({ class: "pb-8 text-muted-foreground" }, e.description || ""),
         ...t
       ])
@@ -1594,49 +1598,49 @@ const Jt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
   ])
 ]));
 export {
-  kt as A,
+  Ct as A,
   Ut as B,
   Lt as C,
-  ge as D,
+  kt as D,
   Ht as E,
-  De as F,
+  Se as F,
   Yt as G,
   _t as H,
   Wt as I,
   Gt as J,
-  ht as K,
+  dt as K,
   Ot as L,
   Pt as M,
   Mt as N,
-  mt as O,
-  Ze as P,
+  ft as O,
+  Xe as P,
   Jt as Q,
   At as S,
   Nt as T,
-  ye as a,
+  we as a,
   St as b,
-  Ce as c,
-  Ie as d,
-  $e as e,
-  Te as f,
+  ve as c,
+  De as d,
+  Ie as e,
+  $e as f,
   Dt as g,
   It as h,
   $t as i,
-  Fe as j,
+  Be as j,
   Tt as k,
   W as l,
   Bt as m,
   Ft as n,
-  je as o,
+  Ee as o,
   zt as p,
   Et as q,
   jt as r,
   D as s,
   b as t,
-  Ve as u,
-  Vt as v,
-  Rt as w,
-  Xe as x,
-  et as y,
+  Ue as u,
+  Rt as v,
+  Vt as w,
+  Qe as x,
+  Ze as y,
   qt as z
 };

package/dist/index.es.js

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

package/dist/molecules.es.js

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

package/dist/types/components/molecules/notifications/notification.d.ts

@@ -4,9 +4,9 @@
  * A component that displays notifications.
  *
  * @class
- * @extends DelayComponent
+ * @extends Component
  */
-export class Notification extends DelayComponent {
+export class Notification extends Component {
     /**
      * @member {function|null} secondaryAction
      */
@@ -75,5 +75,5 @@ export class Notification extends DelayComponent {
     close(e: object): void;
 }
 export default Notification;
-import { DelayComponent } from "../delay-component.js";
+import { Component } from "@base-framework/base";
 import { Timer } from "@base-framework/organisms";

package/package.json

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