@base-framework/ui 1.1.13 → 1.1.15

package/dist/{empty-state-CxSSx4bC.js → empty-state-BR5Aa8lA.js}

@@ -1,13 +1,17 @@
-import { Div as n, I as b, H5 as Z, P as x, Li as H, Span as a, Ul as q, Button as f, OnState as T, Label as P, H2 as S, Form as tt, Header as I, Footer as L, A as V, H3 as et, Checkbox as st, Input as m, Img as G, Nav as ot, UseParent as W, OnStateOpen as O, Time as nt, Dialog as rt } from "@base-framework/atoms";
-import { Atom as c, Component as w, Html as A, Dom as it, base as lt, Data as B, Builder as _, Jot as C, Events as p, DateTime as M } from "@base-framework/base";
-import { P as D, C as at, R as ct } from "./range-calendar-BZW1R_D_.js";
-import { C as dt, F as ut } from "./form-group-BB7dLJir.js";
-import { B as h, I as g } from "./buttons-Dr-bViom.js";
+import { Atom as c, Component as y, Html as A, Dom as Z, base as tt, Data as k, Builder as H, Jot as w, Events as g, DateTime as M } from "@base-framework/base";
+import { Div as n, H5 as et, P as b, Li as q, Span as a, Ul as V, Button as p, I as T, OnState as I, Label as P, H2 as v, Form as st, Header as B, Footer as L, A as G, H3 as ot, Checkbox as nt, Input as f, Img as W, Nav as it, UseParent as _, OnStateOpen as O, Time as rt, Dialog as lt } from "@base-framework/atoms";
+import { P as S, C as at, R as ct } from "./simple-search-input-CuC8q0fJ.js";
+import { U as m, B as h, I as dt } from "./buttons-snATS4J5.js";
+import { Timer as ut, List as ht, DynamicTime as mt } from "@base-framework/organisms";
+import { C as ft, b as pt } from "./tooltip-BmvjA9XQ.js";
+import { f as C } from "./image-BhZbKYDj.js";
 import { Icons as u } from "./icons.es.js";
-import { Timer as ht, List as mt, DynamicTime as ft } from "@base-framework/organisms";
-import { a as v } from "./image-BB__4s0g.js";
-import { F as Y } from "./format-BmrNQptv.js";
-const z = {
+import { F as z } from "./format-BmrNQptv.js";
+import "./mobile-nav-wrapper-1erstN34.js";
+import "./aside-template-BDvEMLnk.js";
+import "./full-page-DccgwWsM.js";
+import "./bside-template-BCP2pJWN.js";
+const Y = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -34,19 +38,19 @@ const z = {
     iconColor: "text-muted-foreground"
   }
 }, gt = (t, e) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${e}` }, [
-  b({ html: t })
-]), pt = (t) => Z({ class: "font-semibold" }, t), bt = (t) => x({ class: "text-sm text-muted-foreground" }, t), Le = c(({ title: t, description: e, icon: s, type: o = "default" }) => {
-  const { borderColor: r, bgColor: i, iconColor: l } = z[o] || z.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${i} ${r}` }, [
+  m({ size: "sm" }, t)
+]), bt = (t) => et({ class: "font-semibold" }, t), xt = (t) => b({ class: "text-sm text-muted-foreground" }, t), je = c(({ title: t, description: e, icon: s, type: o = "default" }) => {
+  const { borderColor: i, bgColor: r, iconColor: l } = Y[o] || Y.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${i}` }, [
     // Icon and content
     s && gt(s, l),
     n({ class: "flex flex-col" }, [
-      pt(t),
-      bt(e)
+      bt(t),
+      xt(e)
     ])
   ]);
 });
-class Oe extends w {
+class Ee extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -67,24 +71,24 @@ class Oe extends w {
       A.removeElement(e);
       return;
     }
-    it.addClass(e, s), lt.on("animationend", e, (o) => A.removeElement(e));
+    Z.addClass(e, s), tt.on("animationend", e, (o) => A.removeElement(e));
   }
 }
-const xt = (t) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, t), yt = (t) => a({ class: "flex w-4 h-4", html: t }), wt = (t) => a({ class: "flex-auto" }, t), Ct = (t, e) => H({
+const yt = (t) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, t), wt = (t) => a({ class: "flex w-4 h-4", html: t }), Ct = (t) => a({ class: "flex-auto" }, t), vt = (t, e) => q({
   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: () => e(t)
 }, [
-  t.icon && yt(t.icon),
-  wt(t.label),
-  t.shortcut && xt(t.shortcut)
-]), vt = (t, e) => q({ class: "grid gap-2" }, [
-  t.map((s) => Ct(s, e))
-]), St = (t) => n({ class: "w-full z-10" }, [
+  t.icon && wt(t.icon),
+  Ct(t.label),
+  t.shortcut && yt(t.shortcut)
+]), St = (t, e) => V({ class: "grid gap-2" }, [
+  t.map((s) => vt(s, e))
+]), Dt = (t) => 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", (e) => vt(e, t)]
+    for: ["groups", (e) => St(e, t)]
   })
-]), Dt = ({ label: t, icon: e, toggleDropdown: s }) => f({
+]), kt = ({ label: t, icon: e, toggleDropdown: s }) => p({
   cache: "button",
   class: `inline-flex items-center justify-between rounded-md border
 			px-2 py-2 text-sm font-medium hover:bg-muted
@@ -92,20 +96,20 @@ const xt = (t) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, t),
   click: s
 }, [
   t && a(t),
-  e && b({ html: e })
-]), kt = ({ onSelect: t }) => n([
-  T(
+  e && T({ html: e })
+]), Tt = ({ onSelect: t }) => n([
+  I(
     "open",
-    (e, s, o) => e ? new D({
+    (e, s, o) => e ? new S({
       cache: "dropdown",
       parent: o,
       button: o.button
     }, [
-      St(t)
+      Dt(t)
     ]) : null
   )
 ]);
-class Ae extends w {
+class Ne extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -120,7 +124,7 @@ class Ae extends w {
    * @returns {Data}
    */
   setData() {
-    return new B({
+    return new k({
       groups: this.groups || []
     });
   }
@@ -159,42 +163,42 @@ class Ae extends w {
    */
   render() {
     return n({ class: "relative" }, [
-      Dt({
+      kt({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      kt({ onSelect: this.handleSelect.bind(this) })
+      Tt({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e)), It = c((t, e) => P({ ...t, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, e)), Bt = c((t, e) => x({ ...t, class: "text-sm text-muted-foreground italic" }, e)), Ft = c((t, e) => x({ ...t, class: "text-sm text-destructive" }, e)), Ye = c((t, e = []) => dt({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
-  t.title && S({ class: "text-lg font-semibold py-4 px-6" }, t.title),
-  t.description && x({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, t.description),
+const It = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e)), Bt = c((t, e) => P({ ...t, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, e)), Ft = c((t, e) => b({ ...t, class: "text-sm text-muted-foreground italic" }, e)), $t = c((t, e) => b({ ...t, class: "text-sm text-destructive" }, e)), Ue = c((t, e = []) => ft({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+  t.title && v({ class: "text-lg font-semibold py-4 px-6" }, t.title),
+  t.description && b({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, t.description),
   ...e
-])), ze = c((t, e = []) => ut({ label: t.label, description: t.description, class: "py-4 px-6", border: t.border }, [
+])), Re = c((t, e = []) => pt({ label: t.label, description: t.description, class: "py-4 px-6", border: t.border }, [
   n({ class: "flex flex-col gap-y-6" }, e)
-])), je = c((t, e = []) => {
+])), He = c((t, e = []) => {
   const s = t.border ? "border-t" : "";
   return n({ ...t, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${t.class || ""}` }, e);
-}), $t = (t) => t.tag === "input" || t.tag === "select" || t.tag === "textarea", J = (t, e, s) => t.map((o) => !o || (o.children && o.children.length > 0 && (o.children = J(o.children, e, s)), !o.required) ? o : $t(o) ? {
+}), Mt = (t) => t.tag === "input" || t.tag === "select" || t.tag === "textarea", J = (t, e, s) => t.map((o) => !o || (o.children && o.children.length > 0 && (o.children = J(o.children, e, s)), !o.required) ? o : Mt(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: e
-} : o), Mt = c((t, e) => {
-  const r = J(e, (i) => {
-    i.target.checkValidity() && t.setError(null);
-  }, (i) => {
-    t.setError(i.target.validationMessage);
+} : o), Pt = c((t, e) => {
+  const i = J(e, (r) => {
+    r.target.checkValidity() && t.setError(null);
+  }, (r) => {
+    t.setError(r.target.validationMessage);
   });
   return n({
     ...t,
     class: "w-full"
-  }, r);
-}), Ee = v(
+  }, i);
+}), qe = C(
   {
     /**
      * The initial state of the FormField.
@@ -215,38 +219,38 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
      * @returns {object}
      */
     render() {
-      const t = this.name, e = this.getId(`${t}`), { label: s, description: o } = this, r = (i) => {
-        this.state.error = i, this.state.hasError = !!i;
+      const t = this.name, e = this.getId(`${t}`), { label: s, description: o } = this, i = (r) => {
+        this.state.error = r, this.state.hasError = !!r;
       };
       return n({ class: "flex flex-auto gap-y-4" }, [
-        Tt([
-          It({ htmlFor: e }, s),
-          Mt({
+        It([
+          Bt({ htmlFor: e }, s),
+          Pt({
             id: e,
             name: t,
             value: this.state.value,
-            setError: r
+            setError: i
           }, this.children),
-          o && Bt({ id: this.getId("description") }, o),
-          n({ onState: ["error", (i) => i && Ft(i)] })
+          o && Ft({ id: this.getId("description") }, o),
+          n({ onState: ["error", (r) => r && $t(r)] })
         ])
       ]);
     }
   }
-), Pt = (t, e, s = null) => {
+), Lt = (t, e, s = null) => {
   t.target.checkValidity() && (t.preventDefault(), s && s(t, e));
 }, K = c(
-  (t, e) => tt({ ...t, submit: (s, o) => Pt(s, o, t.submit), class: `w-full ${t.class ?? ""}` }, e)
-), Ne = c((t, e) => n({ ...t, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${t.class || ""}` }, e)), Ue = c((t, e = []) => n({ class: "flex flex-col gap-y-3 py-4" }, [
-  t.title && S({ class: "font-semibold" }, t.title),
+  (t, e) => st({ ...t, submit: (s, o) => Lt(s, o, t.submit), class: `w-full ${t.class ?? ""}` }, e)
+), Ve = c((t, e) => n({ ...t, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${t.class || ""}` }, e)), Ge = c((t, e = []) => n({ class: "flex flex-col gap-y-3 py-4" }, [
+  t.title && v({ class: "font-semibold" }, t.title),
   ...e
-])), Re = (t, e) => n({ class: "flex justify-between" }, [
+])), We = (t, e) => n({ class: "flex justify-between" }, [
   a({ class: "text-muted-foreground" }, t),
   a(e)
-]), He = (t, e) => n({ class: "flex" }, [
+]), _e = (t, e) => n({ class: "flex" }, [
   a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, t),
   a(e)
-]), Lt = c(({ title: t, description: e, back: s, icon: o, options: r = [] }) => I({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10 min-w-0" }, [
+]), Ot = c(({ title: t, description: e, back: s, icon: o, options: i = [] }) => B({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10 min-w-0" }, [
   /**
    * Back Button (Mobile Only)
    */
@@ -254,46 +258,43 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
     variant: "icon",
     icon: u.arrows.left,
     class: "mr-2 p-0 flex sm:hidden",
-    click: (i, l) => l.close()
+    click: (r, l) => l.close()
   }),
   /**
    * Icon Container
    */
   o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [
-    g({ size: "md" }, o)
+    m({ size: "md" }, o)
   ]),
-  /**
-   * Title and Description Container
-   */
   n({ class: "flex flex-auto flex-row justify-between ml-2 gap-2 min-w-0" }, [
     n({ class: "flex flex-auto flex-col min-w-0" }, [
-      S({ class: "text-lg font-semibold m-0 truncate" }, t),
+      v({ class: "text-lg font-semibold m-0 truncate" }, t),
       e && n({ class: "text-sm text-muted-foreground truncate" }, e)
     ]),
-    n({ class: "flex flex-none items-center gap-2" }, r)
+    n({ class: "flex flex-none items-center gap-2" }, i)
   ])
 ])), Q = c((t, e) => {
   const s = t.class?.includes("drawer");
   return n({
     popover: "manual",
     class: `modal ${s ? "" : "m-auto top-0 right-0 bottom-0 left-0"} ${s ? "" : "h-full max-h-screen"} fixed z-20 grid w-full gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 overflow-y-auto ${t.class}`,
-    click: (i, l) => {
-      i.target === l.panel && (i.preventDefault(), i.stopPropagation(), l.state.open = !1);
+    click: (r, l) => {
+      r.target === l.panel && (r.preventDefault(), r.stopPropagation(), l.state.open = !1);
     }
   }, [
     K({
       class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4 min-w-0",
-      submit: (i, l) => t.onSubmit && t.onSubmit(l),
+      submit: (r, l) => t.onSubmit && t.onSubmit(l),
       cache: "modalContent",
       ...t.gestureHandlers
     }, [
-      Lt(t),
-      n({ class: "modal-body flex flex-grow flex-col py-0 px-6 z-0 overflow-y-auto", cache: "modalBody" }, e),
+      Ot(t),
+      n({ class: "modal-body flex flex-grow flex-col py-0 px-6 z-0", cache: "modalBody" }, e),
       !t.hideFooter && L({ class: "modal-footer sticky bottom-0 bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, t.buttons)
     ])
   ]);
-}), Ot = (t) => _.render(t, app.root);
-class At extends w {
+}), At = (t) => H.render(t, app.root);
+class zt extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -317,9 +318,9 @@ class At extends w {
         options: this.headerOptions(),
         buttons: this.getButtons(),
         hideFooter: this.hideFooter,
-        onSubmit: (r) => {
-          let i = !0;
-          this.onSubmit && (i = this.onSubmit(r)), i !== !1 && this.destroy();
+        onSubmit: (i) => {
+          let r = !0;
+          this.onSubmit && (r = this.onSubmit(i)), r !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -427,7 +428,7 @@ class At extends w {
    * @returns {void}
    */
   open() {
-    Ot(this), this.showModal();
+    At(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -472,12 +473,12 @@ class Yt {
     const {
       modal: s = null,
       modalContent: o = null,
-      modalBody: r = null,
-      closeThreshold: i = 150,
+      modalBody: i = null,
+      closeThreshold: r = 150,
       snapThreshold: l = 50,
       onClose: d = null
     } = e;
-    this.modal = s, this.modalContent = o, this.modalBody = r, this.closeThreshold = i, this.snapThreshold = l, this.onClose = d, this.reset();
+    this.modal = s, this.modalContent = o, this.modalBody = i, this.closeThreshold = r, this.snapThreshold = l, this.onClose = d, this.reset();
   }
   /**
    * Resets the drag state to initial values
@@ -527,10 +528,10 @@ class Yt {
     const o = this.getDeltaY();
     if (!this.state.isDragging && this.state.canDrag && o > 0 && this.modalBody.scrollTop === 0 && (this.state.isDragging = !0), this.state.isDragging && o > 0) {
       e.preventDefault();
-      const r = this.calculateTranslateY(o);
-      this.modalContent.style.transform = `translateY(${r}px)`, this.modalContent.style.transition = "none";
-      const i = this.calculateBackdropOpacity(o);
-      this.updateBackdropOpacity(i);
+      const i = this.calculateTranslateY(o);
+      this.modalContent.style.transform = `translateY(${i}px)`, this.modalContent.style.transition = "none";
+      const r = this.calculateBackdropOpacity(o);
+      this.updateBackdropOpacity(r);
     } else this.modalBody.scrollTop > 0 && (this.state.canDrag = !1);
   }
   /**
@@ -618,7 +619,7 @@ class Yt {
     this.reset(), this.modal = null, this.onClose = null;
   }
 }
-class qe extends At {
+class Je extends zt {
   /**
    * Declares the component props
    *
@@ -642,7 +643,7 @@ class qe extends At {
    * @returns {object}
    */
   render() {
-    const e = this.getMainClass(), s = this.title || "", o = this.description || null, r = this.getContainerProps();
+    const e = this.getMainClass(), s = this.title || "", o = this.description || null, i = this.getContainerProps();
     return Q(
       {
         class: e,
@@ -651,14 +652,14 @@ class qe extends At {
         options: this.headerOptions(),
         buttons: this.getButtons(),
         hideFooter: this.hideFooter,
-        onSubmit: (i) => {
+        onSubmit: (r) => {
           let l = !0;
-          this.onSubmit && (l = this.onSubmit(i)), l !== !1 && this.destroy();
+          this.onSubmit && (l = this.onSubmit(r)), l !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
         aria: { expanded: ["open"] },
-        ...r
+        ...i
       },
       this.children
     );
@@ -729,22 +730,22 @@ const j = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, zt = (t) => I({ class: "flex justify-center" }, [
-  et({ class: "text-lg font-bold mb-0" }, t)
-]), jt = c(({ href: t, class: e }, s) => V({
+}, jt = (t) => B({ class: "flex justify-center" }, [
+  ot({ class: "text-lg font-bold mb-0" }, t)
+]), Et = c(({ href: t, class: e }, s) => G({
   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 ${e}`,
   href: t,
   animateIn: "pullRightIn",
   animateOut: "pullRight",
   role: "alert"
-}, s)), Et = c(({ close: t, class: e }, s) => n({
+}, s)), Nt = c(({ close: t, class: e }, 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 ${e}`,
   click: () => t(),
   animateIn: "pullRightIn",
   animateOut: "pullRight",
   role: "alert"
 }, s));
-class Nt extends w {
+class Ut extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -767,14 +768,14 @@ class Nt extends w {
    * @returns {object}
    */
   render() {
-    const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, i = this.getChildren(o);
-    return r ? jt({
-      href: r,
+    const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), i = this.href || null, r = this.getChildren(o);
+    return i ? Et({
+      href: i,
       class: `${e} ${s}`
-    }, i) : Et({
+    }, r) : Nt({
       close: this.close.bind(this),
       class: `${e} ${s}`
-    }, i);
+    }, r);
   }
   /**
    * This will be called after the component is set up.
@@ -783,7 +784,7 @@ class Nt extends w {
    */
   afterSetup() {
     const e = this.duration;
-    e !== "infinite" && (this.timer = new ht(e, this.close.bind(this)), this.timer.start());
+    e !== "infinite" && (this.timer = new ut(e, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -816,12 +817,14 @@ class Nt extends w {
   getChildren(e) {
     return [
       n({ class: "flex items-start" }, [
-        this.icon && b({ class: `mr-4 ${e}`, html: this.icon }),
+        this.icon && n({ class: `mr-4 ${e}` }, [
+          m({ size: "md" }, this.icon)
+        ]),
         n({ class: "flex flex-auto flex-col" }, [
           n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && zt(this.title)
+            this.title && jt(this.title)
           ]),
-          x({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
+          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())
         ])
       ]),
@@ -843,8 +846,8 @@ class Nt extends w {
     e && e.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Ut = 0;
-class Ve extends w {
+let Rt = 0;
+class Ke extends y {
   /**
    * This will render the component.
    *
@@ -852,11 +855,11 @@ class Ve extends w {
    */
   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 mt({
+      new ht({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (e) => new Nt(e)
+        rowItem: (e) => new Ut(e)
       })
     ]);
   }
@@ -867,7 +870,7 @@ class Ve extends w {
    * @returns {void}
    */
   addNotice(e = {}) {
-    e.id = Ut++, e.callBack = () => this.removeNotice(e), this.list.append([e]), this.panel.hidePopover(), this.panel.showPopover();
+    e.id = Rt++, e.callBack = () => this.removeNotice(e), this.list.append([e]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -879,17 +882,17 @@ class Ve extends w {
     this.list.delete(e.id), this.list.isEmpty() && this.panel.hidePopover();
   }
 }
-const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
+const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => p({
   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: t }],
   dataSet: ["method", ["state", t, "active"]],
-  click: (o, { state: r }) => {
-    r.method = t, localStorage.setItem("theme", t), t === "system" && localStorage.removeItem("theme"), Rt(t);
+  click: (o, { state: i }) => {
+    i.method = t, localStorage.setItem("theme", t), t === "system" && localStorage.removeItem("theme"), Ht(t);
   }
 }, [
-  g(s),
+  m({}, s),
   a(e)
-])), Rt = (t) => {
+])), Ht = (t) => {
   const e = document.documentElement;
   if (t === "system" && (t = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), E && !E("(prefers-color-scheme: " + t + ")").matches) {
     e.classList.add(t);
@@ -897,7 +900,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   }
   const s = t === "light" ? "dark" : "light";
   e.classList.remove(s);
-}, Ge = C(
+}, Qe = w(
   {
     /**
      * This will render the component.
@@ -924,7 +927,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       };
     }
   }
-), We = v(
+), Xe = C(
   {
     /**
      * The initial state of the Toggle.
@@ -951,14 +954,14 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      * @returns {object}
      */
     render() {
-      return f({
+      return p({
         class: "relative inline-flex h-6 w-11 min-w-11 items-center rounded-full bg-muted transition-colors focus:outline-none",
         onState: ["active", { "bg-primary": !0, "bg-muted": !1 }],
         click: (e, { state: s }) => {
           s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, e, this);
         }
       }, [
-        st({
+        nt({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
           /**
@@ -976,27 +979,27 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       ]);
     }
   }
-), k = {
+), D = {
   ONLINE: "online",
   OFFLINE: "offline",
   BUSY: "busy",
   AWAY: "away"
-}, y = {
+}, x = {
   ONLINE: "bg-green-500",
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Ht = (t = "") => (t = t.toUpperCase(), y[t] || y.OFFLINE), _e = (t) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ht(t)}`
-}), Je = ({ propName: t = "status" } = {}) => n({
+}, qt = (t = "") => (t = t.toUpperCase(), x[t] || x.OFFLINE), Ze = (t) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${qt(t)}`
+}), ts = ({ propName: t = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [t, {
-    [y.ONLINE]: k.ONLINE,
-    [y.OFFLINE]: k.OFFLINE,
-    [y.BUSY]: k.BUSY,
-    [y.AWAY]: k.AWAY
+    [x.ONLINE]: D.ONLINE,
+    [x.OFFLINE]: D.OFFLINE,
+    [x.BUSY]: D.BUSY,
+    [x.AWAY]: D.AWAY
   }]
-}), qt = (t) => t.indexOf(".") === -1 && t.indexOf("[[") === -1 && t.indexOf("blob:") === -1, Ke = C(
+}), Vt = (t) => t.indexOf(".") === -1 && t.indexOf("[[") === -1 && t.indexOf("blob:") === -1, es = w(
   {
     /**
      * Get the initial state for the component.
@@ -1016,7 +1019,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      */
     openFileBrowse() {
       const t = this.input;
-      t && (t.value = "", p.trigger("click", t));
+      t && (t.value = "", g.trigger("click", t));
     },
     /**
      * Get the URL for the uploaded file.
@@ -1035,7 +1038,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     render() {
       const t = "image-upload", e = this.onChange || null;
       return n({ class: "flex-none items-center" }, [
-        m({
+        f({
           id: t,
           cache: "input",
           type: "file",
@@ -1052,13 +1055,13 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          T("loaded", (s) => s === !1 || qt(this.src) ? P({
+          I("loaded", (s) => s === !1 || Vt(this.src) ? P({
             htmlFor: t,
             class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
           }, [
-            g(u.upload),
+            dt(u.upload),
             n("Upload Image")
-          ]) : G({
+          ]) : W({
             // @ts-ignore
             src: this.src,
             class: "absolute inset-0 w-full h-full object-cover rounded-full"
@@ -1067,7 +1070,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       ]);
     }
   }
-), Qe = C(
+), ss = w(
   {
     /**
      * Get the initial state for the component.
@@ -1087,7 +1090,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      */
     openFileBrowse() {
       const t = this.input;
-      t && (t.value = "", p.trigger("click", t));
+      t && (t.value = "", g.trigger("click", t));
     },
     /**
      * Get the URL for the uploaded file.
@@ -1106,7 +1109,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     render() {
       const t = "logo-upload", e = this.onChange || null;
       return n({ class: "flex-none items-center" }, [
-        m({
+        f({
           id: t,
           cache: "input",
           type: "file",
@@ -1123,9 +1126,9 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          T(
+          I(
             "loaded",
-            (s) => s ? G({
+            (s) => s ? W({
               // @ts-ignore
               src: this.src,
               class: "absolute inset-0 w-full h-full object-cover rounded-full"
@@ -1133,7 +1136,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
               htmlFor: t,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
-              g(u.upload),
+              m({}, u.upload),
               n("Upload logo")
             ])
           )
@@ -1149,7 +1152,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       this.input = null;
     }
   }
-), Vt = (t, e) => V(
+), Gt = (t, e) => G(
   {
     href: t,
     "aria-current": e === "Breadcrumb" && "page",
@@ -1157,14 +1160,14 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
   [a(e)]
-), Gt = () => g({
+), Wt = () => m({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), Wt = (t) => n({ class: "flex items-center" }, [
-  t.href ? Vt(t.href, t.label) : a(t.label),
-  t.separator && Gt()
-]), Xe = C(
+}, u.chevron.single.right), _t = (t) => n({ class: "flex items-center" }, [
+  t.href ? Gt(t.href, t.label) : a(t.label),
+  t.separator && Wt()
+]), os = w(
   {
     /**
      * Set initial data
@@ -1172,7 +1175,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new B({
+      return new k({
         // @ts-ignore
         items: this.items || []
       });
@@ -1184,7 +1187,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      */
     render() {
       const t = this.data.items.length - 1;
-      return ot(
+      return it(
         {
           "aria-label": "Breadcrumb",
           class: "flex items-center gap-x-1 text-sm"
@@ -1193,7 +1196,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
           n({
             role: "list",
             class: "flex items-center",
-            for: ["items", (e, s) => Wt({
+            for: ["items", (e, s) => _t({
               href: e.href,
               label: e.label,
               separator: s < t
@@ -1212,21 +1215,21 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, _t = (t) => N[t] || N.default, Jt = ({ index: t, size: e }) => n({ class: `${e} rounded-full bg-muted cursor-pointer` }, [
+}, Jt = (t) => N[t] || N.default, Kt = ({ index: t, size: e }) => n({ class: `${e} rounded-full bg-muted cursor-pointer` }, [
   a({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
       "bg-primary": t,
       "shadow-md": t
     }],
-    click: (s, { data: o, onClick: r }) => {
-      o.activeIndex = t, r && r(t);
+    click: (s, { data: o, onClick: i }) => {
+      o.activeIndex = t, i && i(t);
     }
   })
-]), Kt = (t, e) => Array.from({ length: t }, (s, o) => Jt({
+]), Qt = (t, e) => Array.from({ length: t }, (s, o) => Kt({
   index: o,
   size: e
-})), Ze = C(
+})), ns = w(
   {
     /**
      * Defines component data (props).
@@ -1234,7 +1237,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new B({
+      return new k({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -1248,7 +1251,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      * @returns {object}
      */
     render() {
-      const t = this.gap || "gap-2", e = _t(this.size || "sm"), s = Kt(this.data.count, e);
+      const t = this.gap || "gap-2", e = Jt(this.size || "sm"), s = Qt(this.data.count, e);
       return n(
         { class: "flex justify-center items-center py-2" },
         [
@@ -1257,7 +1260,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       );
     }
   }
-), Qt = ({ toggleDropdown: t }) => f(
+), Xt = ({ toggleDropdown: t }) => p(
   {
     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",
@@ -1265,29 +1268,29 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   },
   [
     a({ onState: ["selectedLabel", (e) => e || "Select item..."] }),
-    b({ html: u.chevron.upDown })
+    m({ size: "sm" }, u.chevron.upDown)
   ]
-), Xt = (t, e, s) => H({
+), Zt = (t, e, s) => q({
   class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
   click: () => e(t),
   onState: [s, "selectedValue", { "bg-secondary": t.value }]
 }, [
-  t.icon && a({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, t.icon)]),
+  t.icon && a({ class: "mr-2 flex items-baseline" }, [m({ size: "xs" }, t.icon)]),
   a({ class: "text-base font-normal" }, t.label)
-]), Zt = (t, e) => n({ class: "w-full border rounded-md" }, [
-  q({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Xt(s, t, e)] })
-]), te = ({ onSelect: t, state: e }) => n({ class: "flex flex-auto flex-col" }, [
-  T(
+]), te = (t, e) => n({ class: "w-full border rounded-md" }, [
+  V({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Zt(s, t, e)] })
+]), ee = ({ onSelect: t, state: e }) => n({ class: "flex flex-auto flex-col" }, [
+  I(
     "open",
-    (s, o, r) => s ? new D({
+    (s, o, i) => s ? new S({
       cache: "dropdown",
-      parent: r,
-      button: r.button
+      parent: i,
+      button: i.button
     }, [
-      Zt(t, e)
+      te(t, e)
     ]) : null
   )
-]), ts = C(
+]), is = w(
   {
     /**
      * This will set up the data.
@@ -1295,7 +1298,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new B({
+      return new k({
         // @ts-ignore
         items: this.items || []
       });
@@ -1368,8 +1371,8 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       const t = this.class || "", e = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
       return n({ class: `relative ${s} flex flex-auto flex-col ${e} ${t}` }, [
         // @ts-ignore
-        Qt({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        te({
+        Xt({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        ee({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1377,7 +1380,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
         }),
         // Hidden required input for form validation
         // @ts-ignore
-        this.required && m({
+        this.required && f({
           class: "opacity-0 absolute top-0 left-0 z-[1]",
           type: "text",
           // @ts-ignore
@@ -1395,19 +1398,19 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   click: e,
   icon: t,
   "aria-label": s
-}), ee = ({ click: t }) => X({
+}), se = ({ click: t }) => X({
   icon: u.circleMinus,
   click: t,
   ariaLabel: "Decrement"
-}), se = ({ click: t }) => X({
+}), oe = ({ click: t }) => X({
   icon: u.circlePlus,
   click: t,
   ariaLabel: "Increment"
-}), oe = ({ bind: t, min: e, max: s, readonly: o = !1 }) => W(({ state: r }) => m({
-  value: ["[[count]]", r],
+}), ne = ({ bind: t, min: e, max: s, readonly: o = !1 }) => _(({ state: i }) => f({
+  value: ["[[count]]", i],
   bind: t,
-  blur: (i, { state: l }) => {
-    let d = parseInt(i.target.value, 10);
+  blur: (r, { state: l }) => {
+    let d = parseInt(r.target.value, 10);
     isNaN(d) && (d = e ?? 0), e !== void 0 && (d = Math.max(d, e)), s !== void 0 && (d = Math.min(d, s)), l.count = d;
   },
   class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
@@ -1416,7 +1419,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), es = v(
+})), rs = C(
   {
     /**
      * Initial state for the counter component.
@@ -1439,18 +1442,18 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     render() {
       const t = this.class ?? "";
       return n({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${t}` }, [
-        ee({ click: () => this.state.decrement("count") }),
-        oe({
+        se({ click: () => this.state.decrement("count") }),
+        ne({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        se({ click: () => this.state.increment("count") })
+        oe({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), ne = (t) => {
+), ie = (t) => {
   let e = "";
   return t.length > 0 && (e = t.substring(0, 2), t.length > 2 && (e += "/" + t.substring(2, 4), t.length > 4 && (e += "/" + t.substring(4, 8)))), e;
 }, re = (t) => {
@@ -1458,49 +1461,49 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     return null;
   const e = parseInt(t.substring(0, 2), 10), s = parseInt(t.substring(2, 4), 10), o = parseInt(t.substring(4, 8), 10);
   return e >= 1 && e <= 12 && s >= 1 && s <= 31 && o >= 1900 ? `${o}-${e.toString().padStart(2, "0")}-${s.toString().padStart(2, "0")}` : null;
-}, ie = ({ bind: t, required: e }) => m({
+}, le = ({ bind: t, required: e }) => f({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: t,
   required: e
-}), le = ({ placeholder: t, handleInputChange: e, handleInputFocus: s }) => m({
+}), ae = ({ placeholder: t, handleInputChange: e, handleInputFocus: s }) => f({
   cache: "dateInput",
   class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
   placeholder: t || "mm/dd/yyyy",
   input: e,
   focus: s,
   onState: ["selectedDate", (o) => o ? M.format("standard", o) : ""]
-}), ae = ({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: i }) => n(
+}), ce = ({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: r }) => n(
   {
     class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
   },
   [
-    ie({ bind: t, required: e }),
-    le({ placeholder: i, handleInputChange: o, handleInputFocus: r }),
-    f(
+    le({ bind: t, required: e }),
+    ae({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
+    p(
       {
         class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
         click: s
       },
       [
-        b({ html: u.calendar.days })
+        T({ html: u.calendar.days })
       ]
     )
   ]
-), ce = ({ handleDateSelect: t, blockPriorDates: e }) => O(
-  (s, o, r) => new D({
+), de = ({ handleDateSelect: t, blockPriorDates: e }) => O(
+  (s, o, i) => new S({
     cache: "dropdown",
-    parent: r,
-    button: r.panel,
+    parent: i,
+    button: i.panel,
     size: "fit"
   }, [
     new at({
-      selectedDate: r.state.selectedDate,
+      selectedDate: i.state.selectedDate,
       selectedCallBack: t,
       blockPriorDates: e
     })
   ])
-), ss = v(
+), ls = C(
   {
     /**
      * The initial state of the DatePicker.
@@ -1529,9 +1532,9 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      */
     handleInputChange(t) {
       const s = t.target.value.replace(/\D/g, "");
-      t.target.value = ne(s);
+      t.target.value = ie(s);
       const o = re(s);
-      o && (this.state.selectedDate = o, this.input.value = o, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(o));
+      o && (this.state.selectedDate = o, this.input.value = o, g.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(o));
     },
     /**
      * Handles input focus - select all text for easy editing.
@@ -1547,7 +1550,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      * @param {string} date
      */
     handleDateSelect(t) {
-      this.state.selectedDate = t, this.state.open = !1, this.input.value = t, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(t);
+      this.state.selectedDate = t, this.state.open = !1, this.input.value = t, g.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(t);
     },
     /**
      * Toggles the calendar popover.
@@ -1567,7 +1570,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          ae({
+          ce({
             toggleOpen: this.toggleOpen.bind(this),
             bind: this.bind,
             required: this.required,
@@ -1575,7 +1578,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
             handleInputFocus: this.handleInputFocus.bind(this),
             placeholder: this.placeholder
           }),
-          ce({
+          de({
             handleDateSelect: this.handleDateSelect.bind(this),
             blockPriorDates: this.blockPriorDates || !1
           })
@@ -1583,35 +1586,35 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       );
     }
   }
-), de = ({ bind: t, required: e }) => m({
+), ue = ({ bind: t, required: e }) => f({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: t,
   required: e
-}), ue = ({ bind: t, required: e, toggleOpen: s }) => f({
+}), he = ({ bind: t, required: e, toggleOpen: s }) => p({
   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
 }, [
-  de({ bind: t, required: e }),
-  W(({ state: o }) => [
-    a(Y.date(["[[start]]", o], "Start Date")),
+  ue({ bind: t, required: e }),
+  _(({ state: o }) => [
+    a(z.date(["[[start]]", o], "Start Date")),
     a(" - "),
-    a(Y.date(["[[end]]", o], "End Date"))
+    a(z.date(["[[end]]", o], "End Date"))
   ]),
-  b({ html: u.calendar.days })
-]), he = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, r) => new D({
+  T({ html: u.calendar.days })
+]), me = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, i) => new S({
   cache: "dropdown",
-  parent: r,
-  button: r.panel,
+  parent: i,
+  button: i.panel,
   size: "xl"
 }, [
   new ct({
-    startDate: r.state.start,
-    endDate: r.state.end,
+    startDate: i.state.start,
+    endDate: i.state.end,
     onRangeSelect: t,
     blockPriorDates: e
   })
-])), os = v(
+])), as = C(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1644,58 +1647,58 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      */
     render() {
       const t = (s, { state: o }) => o.toggle("open"), e = (s, o) => {
-        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
+        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, g.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
       };
       return n({ class: "relative w-full max-w-[320px]" }, [
-        ue({
+        he({
           toggleOpen: t,
           bind: this.bind,
           required: this.required
         }),
-        he({
+        me({
           handleDateSelect: e,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), ns = ({ dateTime: t = "", remoteTimeZone: e = "America/Denver", filter: s = null }) => nt([
-  new ft({
+), cs = ({ dateTime: t = "", remoteTimeZone: e = "America/Denver", filter: s = null }) => rt([
+  new mt({
     dateTime: t,
     filter: s || ((o) => {
-      const r = M.getLocalTime(o, !0, !1, e);
-      return M.getTimeFrame(r);
+      const i = M.getLocalTime(o, !0, !1, e);
+      return M.getTimeFrame(i);
     })
   })
 ]);
-function me(t) {
+function fe(t) {
   let e = "";
   return t.length > 0 && (e = t.substring(0, 2), t.length > 2 && (e += ":" + t.substring(2, 4))), e;
 }
-function fe(t) {
+function pe(t) {
   if (t.length < 4)
     return { formattedTime: null, hour: null, minute: null, meridian: null };
   const e = parseInt(t.substring(0, 2), 10), s = parseInt(t.substring(2, 4), 10);
   if (e < 0 || e > 23 || s < 0 || s > 59)
     return { formattedTime: null, hour: null, minute: null, meridian: null };
-  let o = e, r = "AM";
-  return e === 0 ? o = 12 : e > 12 ? (o = e - 12, r = "PM") : e === 12 && (r = "PM"), {
-    formattedTime: `${o.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")} ${r}`,
+  let o = e, i = "AM";
+  return e === 0 ? o = 12 : e > 12 ? (o = e - 12, i = "PM") : e === 12 && (i = "PM"), {
+    formattedTime: `${o.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")} ${i}`,
     hour: o.toString().padStart(2, "0"),
     minute: s.toString().padStart(2, "0"),
-    meridian: r
+    meridian: i
   };
 }
 function ge({ bind: t, required: e }) {
-  return m({
+  return f({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
     bind: t,
     required: e
   });
 }
-function pe({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
-  return m({
+function be({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
+  return f({
     cache: "timeInput",
     class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
     placeholder: t || "hh:mm AM/PM",
@@ -1704,32 +1707,32 @@ function pe({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
     onState: ["selectedTime", (o) => o || ""]
   });
 }
-function be({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: i }) {
+function xe({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: r }) {
   return n(
     {
       class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
     },
     [
       ge({ bind: t, required: e }),
-      pe({ placeholder: i, handleInputChange: o, handleInputFocus: r }),
-      f(
+      be({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
+      p(
         {
           class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
           click: s
         },
         [
-          b({ html: u.clock })
+          T({ html: u.clock })
         ]
       )
     ]
   );
 }
-function $({ items: t, handleTimeSelect: e, state: s, stateValue: o, pad: r = !1 }) {
+function $({ items: t, handleTimeSelect: e, state: s, stateValue: o, pad: i = !1 }) {
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
-    t.map((i) => {
-      let l = r ? i.toString().padStart(2, "0") : i.toString();
-      return f({
+    t.map((r) => {
+      let l = i ? r.toString().padStart(2, "0") : r.toString();
+      return p({
         text: l,
         class: "hover:bg-muted/50 rounded-md pr-2 py-1",
         click: () => e({ [o]: l }),
@@ -1738,9 +1741,9 @@ function $({ items: t, handleTimeSelect: e, state: s, stateValue: o, pad: r = !1
     })
   );
 }
-function xe({ handleTimeSelect: t }) {
+function ye({ handleTimeSelect: t }) {
   return O(
-    (e, s, o) => new D(
+    (e, s, o) => new S(
       {
         cache: "dropdown",
         parent: o,
@@ -1756,7 +1759,7 @@ function xe({ handleTimeSelect: t }) {
               [
                 // Hours column
                 $({
-                  items: Array.from({ length: 12 }, (r, i) => i + 1),
+                  items: Array.from({ length: 12 }, (i, r) => r + 1),
                   handleTimeSelect: t,
                   state: o.state,
                   stateValue: "hour",
@@ -1764,7 +1767,7 @@ function xe({ handleTimeSelect: t }) {
                 }),
                 // Minutes column
                 $({
-                  items: Array.from({ length: 60 }, (r, i) => i),
+                  items: Array.from({ length: 60 }, (i, r) => r),
                   handleTimeSelect: t,
                   state: o.state,
                   stateValue: "minute",
@@ -1791,14 +1794,14 @@ function U(t) {
   const e = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = t.match(e);
   if (!s)
     return { hour: null, minute: null, meridian: null };
-  let [, o, r, , i] = s, l = parseInt(o, 10), d = parseInt(r, 10);
-  return l < 0 || l > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (i ? (i = i.toUpperCase(), i === "PM" && l < 12 ? l += 12 : i === "AM" && l === 12 && (l = 12)) : l === 0 ? (i = "AM", l = 12) : l < 12 ? i = "AM" : l === 12 ? i = "PM" : (i = "PM", l -= 12), {
+  let [, o, i, , r] = s, l = parseInt(o, 10), d = parseInt(i, 10);
+  return l < 0 || l > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && l < 12 ? l += 12 : r === "AM" && l === 12 && (l = 12)) : l === 0 ? (r = "AM", l = 12) : l < 12 ? r = "AM" : l === 12 ? r = "PM" : (r = "PM", l -= 12), {
     hour: l.toString().padStart(2, "0"),
     minute: d.toString().padStart(2, "0"),
-    meridian: i
+    meridian: r
   });
 }
-const rs = v(
+const ds = C(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1846,14 +1849,14 @@ const rs = v(
      * @param {Event} e
      */
     handleInputChange(t) {
-      let e = t.target.value.replace(/[^\d]/g, ""), s = me(e);
-      const o = fe(e);
+      let e = t.target.value.replace(/[^\d]/g, ""), s = fe(e);
+      const o = pe(e);
       o.formattedTime && (s = o.formattedTime, this.state.set({
         hour: o.hour,
         minute: o.minute,
         meridian: o.meridian,
         selectedTime: o.formattedTime
-      }), this.input.value = o.formattedTime, p.trigger("change", this.input), typeof this.change == "function" && this.change(o.formattedTime)), t.target.value = s;
+      }), this.input.value = o.formattedTime, g.trigger("change", this.input), typeof this.change == "function" && this.change(o.formattedTime)), t.target.value = s;
     },
     /**
      * Handles input focus - select all text for easy editing.
@@ -1871,7 +1874,7 @@ const rs = v(
     handleTimeSelect({ hour: t, minute: e, meridian: s }) {
       if (t && (this.state.hour = t), e && (this.state.minute = e), s && (this.state.meridian = s), this.state.hour && this.state.minute && this.state.meridian) {
         const o = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-        this.state.selectedTime = o, this.state.open = !1, this.input.value = o, p.trigger("change", this.input), typeof this.change == "function" && this.change(o);
+        this.state.selectedTime = o, this.state.open = !1, this.input.value = o, g.trigger("change", this.input), typeof this.change == "function" && this.change(o);
       }
     },
     /**
@@ -1883,7 +1886,7 @@ const rs = v(
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          be({
+          xe({
             toggleOpen: this.toggleOpen.bind(this),
             bind: this.bind,
             required: this.required,
@@ -1891,18 +1894,18 @@ const rs = v(
             handleInputFocus: this.handleInputFocus.bind(this),
             placeholder: this.placeholder
           }),
-          xe({
+          ye({
             handleTimeSelect: this.handleTimeSelect.bind(this)
           })
         ]
       );
     }
   }
-), ye = (t, e) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${e}` }, [
-  g({ size: "lg" }, t)
-]), we = ({ title: t }) => I({ class: "flex flex-auto items-center" }, [
-  S({ class: "text-lg font-semibold" }, t)
-]), Ce = c((t, e) => rt(
+), we = (t, e) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${e}` }, [
+  m({ size: "lg" }, t)
+]), Ce = ({ title: t }) => B({ class: "flex flex-auto items-center" }, [
+  v({ class: "text-lg font-semibold" }, t)
+]), ve = c((t, e) => lt(
   {
     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
@@ -1913,18 +1916,18 @@ const rs = v(
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      t.icon && ye(t.icon, t.iconColor),
+      t.icon && we(t.icon, t.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
         n({ class: "flex flex-auto flex-col gap-y-2" }, [
-          we(t),
-          t.description && x({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t.description),
+          Ce(t),
+          t.description && b({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t.description),
           n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e)
         ]),
         t.buttons && L({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, t.buttons)
       ])
     ])
   ]
-)), ve = (t) => _.render(t, app.root), R = {
+)), Se = (t) => H.render(t, app.root), R = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1951,7 +1954,7 @@ const rs = v(
     iconColor: "text-muted-foreground"
   }
 };
-class Se extends w {
+class De extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -1968,13 +1971,13 @@ class Se extends w {
   render() {
     const e = (d) => {
       d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: r } = R[this.type] || R.default, i = `${this.getMainClass()} ${o} ${s}`, l = this.title || "Dialog Title";
-    return Ce({
-      class: i,
+    }, { borderColor: s, bgColor: o, iconColor: i } = R[this.type] || R.default, r = `${this.getMainClass()} ${o} ${s}`, l = this.title || "Dialog Title";
+    return ve({
+      class: r,
       title: l,
       click: e,
       icon: this.icon,
-      iconColor: r,
+      iconColor: i,
       description: this.description,
       buttons: this.getButtons()
     }, this.children);
@@ -2013,7 +2016,7 @@ class Se extends w {
    * @returns {void}
    */
   open() {
-    ve(this), this.panel.showModal(), this.state.open = !0;
+    Se(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -2024,7 +2027,7 @@ class Se extends w {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class is extends Se {
+class us extends De {
   /**
    * This will declare the props for the compiler.
    *
@@ -2054,68 +2057,68 @@ class is extends Se {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const ls = c((t, e = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
+const hs = c((t, e = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
   K({ class: "flex flex-auto flex-col" }, [
     n({ class: "flex flex-auto flex-col gap-y-4" }, [
       n({ class: "flex flex-auto items-center justify-center" }, [
         t.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
-          g(t.icon)
+          m({ size: "lg" }, t.icon)
         ])
       ]),
-      I({ class: "py-4 text-center" }, [
-        S({ class: "text-xl font-bold" }, t.title),
-        x({ class: "pb-8 text-muted-foreground" }, t.description || ""),
+      B({ class: "py-4 text-center" }, [
+        v({ class: "text-xl font-bold" }, t.title),
+        b({ class: "pb-8 text-muted-foreground" }, t.description || ""),
         ...e
       ])
     ])
   ])
 ]));
 export {
-  Le as A,
-  Xe as B,
-  He as C,
-  ss as D,
-  ls as E,
+  je as A,
+  os as B,
+  _e as C,
+  ls as D,
+  hs as E,
   K as F,
-  y as G,
-  Re as H,
-  Ke as I,
-  _e as J,
-  Je as K,
-  Qe as L,
-  ee as M,
-  Nt as N,
-  ns as O,
-  se as P,
-  rs as Q,
-  We as R,
-  k as S,
-  Ge as T,
-  Ht as U,
-  ts as a,
-  is as b,
-  oe as c,
-  es as d,
-  os as e,
-  Oe as f,
-  Ne as g,
-  Ue as h,
-  Se as i,
-  Ce as j,
-  Ze as k,
-  qe as l,
-  St as m,
-  Ct as n,
-  Ae as o,
-  Ye as p,
-  je as q,
-  ze as r,
-  Mt as s,
-  Bt as t,
-  Ee as u,
-  Tt as v,
-  It as w,
-  Ft as x,
-  At as y,
-  Ve as z
+  x as G,
+  We as H,
+  es as I,
+  Ze as J,
+  ts as K,
+  ss as L,
+  se as M,
+  Ut as N,
+  cs as O,
+  oe as P,
+  ds as Q,
+  Xe as R,
+  D as S,
+  Qe as T,
+  qt as U,
+  is as a,
+  us as b,
+  ne as c,
+  rs as d,
+  as as e,
+  Ee as f,
+  Ve as g,
+  Ge as h,
+  De as i,
+  ve as j,
+  ns as k,
+  Je as l,
+  Dt as m,
+  vt as n,
+  Ne as o,
+  Ue as p,
+  He as q,
+  Re as r,
+  Pt as s,
+  Ft as t,
+  qe as u,
+  It as v,
+  Bt as w,
+  $t as x,
+  zt as y,
+  Ke as z
 };