@base-framework/ui 1.0.232 → 1.0.233

package/dist/{empty-state-2O1fITpG.js → empty-state-C4Pnrs-y.js}

@@ -1,11 +1,12 @@
-import { Div as n, H5 as R, P as g, I as b, Li as O, Span as a, Ul as V, Button as m, OnState as v, Label as W, Form as G, H2 as C, Header as k, Footer as M, A as Y, H3 as J, Checkbox as K, Nav as Q, Input as S, UseParent as X, Time as Z, Dialog as ee } from "@base-framework/atoms";
-import { Atom as c, Component as x, Html as L, Dom as te, base as se, Data as D, Builder as H, Jot as I, DateTime as B } from "@base-framework/base";
-import { P as T, b as oe } from "./calendar-Bn55oWBo.js";
-import { B as h, I as p } from "./buttons-Cm9etaEG.js";
+import { Div as n, H5 as W, P as g, I as f, Li as V, Span as i, Ul as q, Button as m, OnState as w, Label as J, Form as G, H2 as S, Header as D, Footer as P, A as H, H3 as K, Checkbox as Q, Nav as X, Input as y, UseParent as Z, Time as ee, Dialog as te } from "@base-framework/atoms";
+import { Atom as c, Component as v, Html as M, Dom as se, base as oe, Data as I, Builder as Y, Jot as $, DateTime as A } from "@base-framework/base";
+import { P as C, b as ne, R as le } from "./range-calendar-ZAHrVCgV.js";
+import { B as h, I as b } from "./buttons-Cm9etaEG.js";
 import { Icons as u } from "./icons.es.js";
-import { Timer as ne, List as le, DynamicTime as re } from "@base-framework/organisms";
-import { a as w } from "./veil-D4dRxILB.js";
-const P = {
+import { Timer as re, List as ae, DynamicTime as ie } from "@base-framework/organisms";
+import { a as x } from "./veil-D4dRxILB.js";
+import { F as L } from "./format-BueUWxwT.js";
+const F = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -31,20 +32,20 @@ const P = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, ie = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
-  b({ html: e })
-]), ae = (e) => R({ class: "font-semibold" }, e), ce = (e) => g({ class: "text-sm text-muted-foreground" }, e), mt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: r, bgColor: l, iconColor: i } = P[o] || P.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${l} ${r}` }, [
+}, ce = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+  f({ html: e })
+]), de = (e) => W({ class: "font-semibold" }, e), ue = (e) => g({ class: "text-sm text-muted-foreground" }, e), wt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: l, bgColor: r, iconColor: a } = F[o] || F.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
     // Icon and content
-    s && ie(s, i),
+    s && ce(s, a),
     n({ class: "flex flex-col" }, [
-      ae(e),
-      ce(t)
+      de(e),
+      ue(t)
     ])
   ]);
 });
-class de extends x {
+class he extends v {
   /**
    * This will declare the props for the compiler.
    *
@@ -62,48 +63,48 @@ class de extends x {
     this.prepareDestroy(), this.removeContext();
     const t = this.panel, s = this.removingClass;
     if (!s) {
-      L.removeElement(t);
+      M.removeElement(t);
       return;
     }
-    te.addClass(t, s), se.on("animationend", t, (o) => L.removeElement(t));
+    se.addClass(t, s), oe.on("animationend", t, (o) => M.removeElement(t));
   }
 }
-const ue = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), he = (e) => a({ class: "flex w-4 h-4", html: e }), me = (e) => a({ class: "flex-auto" }, e), fe = (e, t) => O({
+const me = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), fe = (e) => i({ class: "flex w-4 h-4", html: e }), pe = (e) => i({ class: "flex-auto" }, e), ge = (e, t) => V({
   class: "relative flex cursor-pointer hover:bg-muted/50 select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   click: () => t(e)
 }, [
-  e.icon && he(e.icon),
-  me(e.label),
-  e.shortcut && ue(e.shortcut)
-]), ge = (e, t) => V({ class: "grid gap-2" }, [
-  e.map((s) => fe(s, t))
-]), be = (e) => n({ class: "w-full z-10" }, [
+  e.icon && fe(e.icon),
+  pe(e.label),
+  e.shortcut && me(e.shortcut)
+]), be = (e, t) => q({ class: "grid gap-2" }, [
+  e.map((s) => ge(s, t))
+]), xe = (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) => ge(t, e)]
+    for: ["groups", (t) => be(t, e)]
   })
-]), pe = ({ label: e, icon: t, toggleDropdown: s }) => m({
+]), we = ({ label: e, icon: t, toggleDropdown: s }) => m({
   cache: "button",
   class: `inline-flex items-center justify-between rounded-md border border-input
 			bg-background 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),
-  t && b({ html: t })
-]), xe = ({ onSelect: e }) => n([
-  v(
+  e && i(e),
+  t && f({ html: t })
+]), ye = ({ onSelect: e }) => n([
+  w(
     "open",
-    (t, s, o) => t ? new T({
+    (t, s, o) => t ? new C({
       cache: "dropdown",
       parent: o,
       button: o.button
     }, [
-      be(e)
+      xe(e)
     ]) : null
   )
 ]);
-class ft extends x {
+class yt extends v {
   /**
    * This will declare the props for the compiler.
    *
@@ -118,7 +119,7 @@ class ft extends x {
    * @returns {Data}
    */
   setData() {
-    return new D({
+    return new I({
       groups: this.groups || []
     });
   }
@@ -157,33 +158,33 @@ class ft extends x {
    */
   render() {
     return n({ class: "relative" }, [
-      pe({
+      we({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      xe({ onSelect: this.handleSelect.bind(this) })
+      ye({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const we = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), ye = c((e, t) => W({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ve = c((e, t) => g({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ce = c((e, t) => g({ ...e, class: "text-sm text-destructive" }, t)), ke = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", U = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = U(o.children, t, s)), o.required && ke(o) ? {
+const ve = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ce = c((e, t) => J({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ke = c((e, t) => g({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Se = c((e, t) => g({ ...e, class: "text-sm text-destructive" }, t)), De = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", U = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = U(o.children, t, s)), o.required && De(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: t
-} : o)), Se = c((e, t) => {
-  const r = U(t, (l) => {
-    l.target.checkValidity() && e.setError(null);
-  }, (l) => {
-    e.setError(l.target.validationMessage);
+} : o)), Ie = c((e, t) => {
+  const l = U(t, (r) => {
+    r.target.checkValidity() && e.setError(null);
+  }, (r) => {
+    e.setError(r.target.validationMessage);
   });
   return n({
     ...e,
     class: "w-full"
-  }, r);
-}), gt = w(
+  }, l);
+}), vt = x(
   {
     /**
      * The initial state of the FormField.
@@ -204,70 +205,70 @@ const we = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
      * @returns {object}
      */
     render() {
-      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, r = (l) => {
-        this.state.error = l, this.state.hasError = !!l;
+      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, l = (r) => {
+        this.state.error = r, this.state.hasError = !!r;
       };
       return n({ class: "flex flex-auto space-y-4" }, [
-        we([
-          ye({ htmlFor: t }, s),
-          Se({
+        ve([
+          Ce({ htmlFor: t }, s),
+          Ie({
             id: t,
             name: e,
             value: this.state.value,
-            setError: r
+            setError: l
           }, this.children),
-          o && ve({ id: this.getId("description") }, o),
-          n({ onState: ["error", (l) => l && Ce(l)] })
+          o && ke({ id: this.getId("description") }, o),
+          n({ onState: ["error", (r) => r && Se(r)] })
         ])
       ]);
     }
   }
-), De = (e, t, s = null) => {
+), $e = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
-}, q = c(
-  (e, t) => G({ ...e, submit: (s, o) => De(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)), pt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
-  e.title && C({ class: "font-semibold" }, e.title),
+}, R = c(
+  (e, t) => G({ ...e, submit: (s, o) => $e(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+), Ct = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), kt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
+  e.title && S({ class: "font-semibold" }, e.title),
   ...t
-])), xt = (e, t) => n({ class: "flex justify-between" }, [
-  a({ class: "text-muted-foreground" }, e),
-  a(t)
-]), wt = (e, t) => n({ class: "flex" }, [
-  a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
-  a(t)
-]), Ie = ({ title: e, description: t, back: s, icon: o, options: r = [] }) => k({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+])), St = (e, t) => n({ class: "flex justify-between" }, [
+  i({ class: "text-muted-foreground" }, e),
+  i(t)
+]), Dt = (e, t) => n({ class: "flex" }, [
+  i({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
+  i(t)
+]), Te = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => D({ 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: (l, i) => i.close() }),
+  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, a) => a.close() }),
   /**
    * Icon
    */
-  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [p(o)]),
+  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [b(o)]),
   /**
    * Title and Description
    */
   n({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
     n({ class: "flex flex-auto flex-col" }, [
-      C({ class: "text-lg font-semibold m-0 truncate" }, e),
+      S({ class: "text-lg font-semibold m-0 truncate" }, e),
       t && n({ class: "text-sm text-muted-foreground truncate" }, t)
     ]),
-    ...r
+    ...l
   ])
-]), Te = c((e, t) => n({
+]), Be = 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) => {
     s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
   }
 }, [
-  q({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
-    Ie(e),
+  R({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
+    Te(e),
     n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
-    M({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
+    P({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
-])), $e = (e) => H.render(e, app.root);
-class yt extends x {
+])), Ae = (e) => Y.render(e, app.root);
+class It extends v {
   /**
    * This will declare the props for the compiler.
    *
@@ -283,16 +284,16 @@ class yt extends x {
    */
   render() {
     const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Te(
+    return Be(
       {
         class: t,
         title: s,
         description: o,
         options: this.headerOptions(),
         buttons: this.getButtons(),
-        onSubmit: (r) => {
-          let l = !0;
-          this.onSubmit && (l = this.onSubmit(r)), l !== !1 && this.destroy();
+        onSubmit: (l) => {
+          let r = !0;
+          this.onSubmit && (r = this.onSubmit(l)), r !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -398,7 +399,7 @@ class yt extends x {
    * @returns {void}
    */
   open() {
-    $e(this), this.showModal();
+    Ae(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -427,7 +428,7 @@ class yt extends x {
     this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
   }
 }
-const F = {
+const N = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -453,18 +454,18 @@ const F = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Ae = (e) => k({ class: "flex justify-center" }, [
-  J({ class: "text-lg font-bold mb-0" }, e)
-]), Be = c(({ href: e, class: t }, s) => Y({
+}, Pe = (e) => D({ class: "flex justify-center" }, [
+  K({ class: "text-lg font-bold mb-0" }, e)
+]), Me = c(({ href: e, class: t }, s) => H({
   class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
   href: e,
   role: "alert"
-}, s)), Me = c(({ close: e, class: t }, s) => n({
+}, s)), Le = c(({ close: e, class: t }, s) => n({
   class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
   click: () => e(),
   role: "alert"
 }, s));
-class Le extends de {
+class Fe extends he {
   /**
    * This will declare the props for the compiler.
    *
@@ -487,14 +488,14 @@ class Le extends de {
    * @returns {object}
    */
   render() {
-    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, l = this.getChildren(o);
-    return r ? Be({
-      href: r,
+    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(o);
+    return l ? Me({
+      href: l,
       class: `${t} ${s}`
-    }, l) : Me({
+    }, r) : Le({
       close: this.close.bind(this),
       class: `${t} ${s}`
-    }, l);
+    }, r);
   }
   /**
    * This will be called after the component is set up.
@@ -503,7 +504,7 @@ class Le extends de {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new ne(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new re(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -512,7 +513,7 @@ class Le extends de {
    */
   getTypeStyles() {
     const t = this.type || "default";
-    return F[t] || F.default;
+    return N[t] || N.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -536,13 +537,13 @@ class Le extends de {
   getChildren(t) {
     return [
       n({ class: "flex items-start" }, [
-        this.icon && b({ class: `mr-4 ${t}`, html: this.icon }),
+        this.icon && f({ 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 && Ae(this.title)
+            this.title && Pe(this.title)
           ]),
           g({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
-          (this.primary || this.secondary) && M({ class: "margin-top-24 flex align-center" }, this.getButtons())
+          (this.primary || this.secondary) && P({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
       h({
@@ -563,8 +564,8 @@ class Le extends de {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Pe = 0;
-class vt extends x {
+let Ne = 0;
+class $t extends v {
   /**
    * This will render the component.
    *
@@ -572,11 +573,11 @@ class vt extends x {
    */
   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 le({
+      new ae({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new Le(t)
+        rowItem: (t) => new Fe(t)
       })
     ]);
   }
@@ -587,7 +588,7 @@ class vt extends x {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = Pe++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = Ne++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -599,26 +600,26 @@ class vt extends x {
     this.list.delete(t.id);
   }
 }
-const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
+const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
   class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
-  click: (o, { state: r }) => {
-    r.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Fe(e);
+  click: (o, { state: l }) => {
+    l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), ze(e);
   }
 }, [
-  p(s),
-  a(t)
-])), Fe = (e) => {
+  b(s),
+  i(t)
+])), ze = (e) => {
   var o;
   const t = document.documentElement;
-  if (e === "system" && (e = (o = globalThis.matchMedia) != null && o.call(globalThis, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + e + ")").matches) {
+  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) {
     t.classList.add(e);
     return;
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, Ct = I(
+}, Tt = $(
   {
     /**
      * This will render the component.
@@ -628,9 +629,9 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
     render() {
       return n({ class: "flex flex-auto flex-col" }, [
         n({ class: "grid grid-cols-3 gap-4" }, [
-          $({ label: "System", value: "system", icon: u.adjustments.horizontal }),
-          $({ label: "Light", value: "light", icon: u.sun }),
-          $({ label: "Dark", value: "dark", icon: u.moon })
+          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 })
         ])
       ]);
     },
@@ -645,7 +646,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       };
     }
   }
-), kt = w(
+), Bt = x(
   {
     /**
      * The initial state of the Toggle.
@@ -679,7 +680,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
           s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, t, this);
         }
       }, [
-        K({
+        Q({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
           /**
@@ -690,49 +691,49 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
           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 }]
         })
       ]);
     }
   }
-), y = {
+), k = {
   ONLINE: "online",
   OFFLINE: "offline",
   BUSY: "busy",
   AWAY: "away"
-}, f = {
+}, p = {
   ONLINE: "bg-green-500",
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Ne = (e = "") => (e = e.toUpperCase(), f[e] || f.OFFLINE), St = (e) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ne(e)}`
-}), Dt = ({ propName: e = "status" } = {}) => n({
+}, Ee = (e = "") => (e = e.toUpperCase(), p[e] || p.OFFLINE), At = (e) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ee(e)}`
+}), Pt = ({ propName: e = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
-    [f.ONLINE]: y.ONLINE,
-    [f.OFFLINE]: y.OFFLINE,
-    [f.BUSY]: y.BUSY,
-    [f.AWAY]: y.AWAY
+    [p.ONLINE]: k.ONLINE,
+    [p.OFFLINE]: k.OFFLINE,
+    [p.BUSY]: k.BUSY,
+    [p.AWAY]: k.AWAY
   }]
-}), ze = (e, t) => Y(
+}), je = (e, t) => H(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [a(t)]
-), Ee = () => p({
+  [i(t)]
+), Oe = () => b({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), je = (e) => n({ class: "flex items-center" }, [
-  e.href ? ze(e.href, e.label) : a(e.label),
-  e.separator && Ee()
-]), It = I(
+}, u.chevron.single.right), Ve = (e) => n({ class: "flex items-center" }, [
+  e.href ? je(e.href, e.label) : i(e.label),
+  e.separator && Oe()
+]), Mt = $(
   {
     /**
      * Set initial data
@@ -740,7 +741,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new D({
+      return new I({
         // @ts-ignore
         items: this.items || []
       });
@@ -752,7 +753,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      */
     render() {
       const e = this.data.items.length - 1;
-      return Q(
+      return X(
         {
           "aria-label": "Breadcrumb",
           class: "flex items-center space-x-1 text-sm"
@@ -761,7 +762,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
           n({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => je({
+            for: ["items", (t, s) => Ve({
               href: t.href,
               label: t.label,
               separator: s < e
@@ -771,7 +772,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       );
     }
   }
-), z = {
+), E = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -780,21 +781,21 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, Oe = (e) => z[e] || z.default, Ve = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
-  a({
+}, qe = (e) => E[e] || E.default, He = ({ 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,
       "shadow-md": e
     }],
-    click: (s, { data: o, onClick: r }) => {
-      o.activeIndex = e, r && r(e);
+    click: (s, { data: o, onClick: l }) => {
+      o.activeIndex = e, l && l(e);
     }
   })
-]), Ye = (e, t) => Array.from({ length: e }, (s, o) => Ve({
+]), Ye = (e, t) => Array.from({ length: e }, (s, o) => He({
   index: o,
   size: t
-})), Tt = I(
+})), Lt = $(
   {
     /**
      * Defines component data (props).
@@ -802,7 +803,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new D({
+      return new I({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -816,7 +817,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = Oe(this.size || "sm"), s = Ye(this.data.count, t);
+      const e = this.gap || "gap-2", t = qe(this.size || "sm"), s = Ye(this.data.count, t);
       return n(
         { class: "flex justify-center items-center py-2" },
         [
@@ -825,37 +826,37 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       );
     }
   }
-), He = ({ toggleDropdown: e }) => m(
+), Ue = ({ toggleDropdown: e }) => m(
   {
     cache: "button",
     class: "relative z-[2] inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-muted h-10 px-4 py-2 justify-between",
     click: e
   },
   [
-    a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
-    b({ html: u.chevron.upDown })
+    i({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    f({ html: u.chevron.upDown })
   ]
-), Ue = (e, t, s) => O({
+), Re = (e, t, s) => V({
   class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
   click: () => t(e),
   onState: [s, "selectedValue", { "bg-secondary": e.value }]
 }, [
-  e.icon && a({ class: "mr-2 flex items-baseline" }, [p({ size: "xs" }, e.icon)]),
-  a({ class: "text-base font-normal" }, e.label)
-]), qe = (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) => Ue(s, e, t)] })
-]), _e = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
-  v(
+  e.icon && i({ class: "mr-2 flex items-baseline" }, [b({ size: "xs" }, e.icon)]),
+  i({ class: "text-base font-normal" }, e.label)
+]), _e = (e, t) => n({ class: "w-full border rounded-md" }, [
+  q({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Re(s, e, t)] })
+]), We = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
+  w(
     "open",
-    (s, o, r) => s ? new T({
+    (s, o, l) => s ? new C({
       cache: "dropdown",
-      parent: r,
-      button: r.button
+      parent: l,
+      button: l.button
     }, [
-      qe(e, t)
+      _e(e, t)
     ]) : null
   )
-]), $t = I(
+]), Ft = $(
   {
     /**
      * This will set up the data.
@@ -863,7 +864,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new D({
+      return new I({
         // @ts-ignore
         items: this.items || []
       });
@@ -936,8 +937,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       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
-        He({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        _e({
+        Ue({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        We({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -945,7 +946,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
         }),
         // Hidden required input for form validation
         // @ts-ignore
-        this.required && S({
+        this.required && y({
           class: "opacity-0 absolute top-0 left-0 z-[1]",
           type: "text",
           // @ts-ignore
@@ -963,20 +964,20 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
   click: t,
   icon: e,
   "aria-label": s
-}), Re = ({ click: e }) => _({
+}), Je = ({ click: e }) => _({
   icon: u.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), We = ({ click: e }) => _({
+}), Ge = ({ click: e }) => _({
   icon: u.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), Ge = ({ bind: e, min: t, max: s, readonly: o = !1 }) => X(({ state: r }) => S({
-  value: ["[[count]]", r],
+}), Ke = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Z(({ state: l }) => y({
+  value: ["[[count]]", l],
   bind: e,
-  blur: (l, { state: i }) => {
-    let d = parseInt(l.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 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)), a.count = d;
   },
   class: "flex flex-auto text-lg font-medium bg-transparent text-center border min-w-0",
   readonly: o,
@@ -984,7 +985,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), At = w(
+})), Nt = x(
   {
     /**
      * Initial state for the counter component.
@@ -1007,46 +1008,46 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
     render() {
       const e = this.class ?? "";
       return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
-        Re({ click: () => this.state.decrement("count") }),
-        Ge({
+        Je({ click: () => this.state.decrement("count") }),
+        Ke({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        We({ click: () => this.state.increment("count") })
+        Ge({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), Je = ({ bind: e, required: t }) => S({
+), Qe = ({ bind: e, required: t }) => y({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), Ke = ({ bind: e, required: t, toggleOpen: s }) => m({
+}), Xe = ({ bind: e, required: t, toggleOpen: s }) => m({
   class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
   click: s
 }, [
-  Je({ bind: e, required: t }),
-  a({
-    onState: ["selectedDate", (o) => o ? B.format("standard", o) : "Pick a date"]
+  Qe({ bind: e, required: t }),
+  i({
+    onState: ["selectedDate", (o) => o ? A.format("standard", o) : "Pick a date"]
   }),
-  b({ html: u.calendar.days })
-]), Qe = ({ handleDateSelect: e, blockPriorDates: t }) => v(
+  f({ html: u.calendar.days })
+]), Ze = ({ handleDateSelect: e, blockPriorDates: t }) => w(
   "open",
-  (s, o, r) => s ? new T({
+  (s, o, l) => s ? new C({
     cache: "dropdown",
-    parent: r,
-    button: r.panel,
+    parent: l,
+    button: l.panel,
     size: "fit"
   }, [
-    new oe({
-      selectedDate: r.state.selectedDate,
+    new ne({
+      selectedDate: l.state.selectedDate,
       selectedCallBack: e,
       blockPriorDates: t
     })
   ]) : null
-), Bt = w(
+), zt = x(
   {
     /**
      * The initial state of the DatePicker.
@@ -1078,71 +1079,148 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
         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]" }, [
-        Ke({
+        Xe({
+          toggleOpen: e,
+          bind: this.bind,
+          required: this.required
+        }),
+        Ze({
+          handleDateSelect: t,
+          blockPriorDates: this.blockPriorDates || !1
+        })
+      ]);
+    }
+  }
+), et = ({ bind: e, required: t }) => y({
+  cache: "input",
+  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
+  bind: e,
+  required: t
+}), tt = ({ bind: e, required: t, toggleOpen: s }) => m({
+  class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
+  click: s
+}, [
+  et({ bind: e, required: t }),
+  i(L.date("[[start]]", "Start Date")),
+  i(" - "),
+  i(L.date("[[end]]", "End Date")),
+  f({ html: u.calendar.days })
+]), st = ({ handleDateSelect: e, blockPriorDates: t }) => w(
+  "open",
+  (s, o, l) => s ? new C({
+    cache: "dropdown",
+    parent: l,
+    button: l.panel,
+    size: "fit"
+  }, [
+    new le({
+      startDate: l.state.start,
+      endDate: l.state.end,
+      onRangeSelect: e,
+      blockPriorDates: t
+    })
+  ]) : null
+), Et = x(
+  {
+    /**
+     * The initial state of the DateRangePicker.
+     *
+     * @member {object} state
+     */
+    state() {
+      return {
+        start: this.start ?? null,
+        end: this.end ?? null,
+        open: !1
+      };
+    },
+    /**
+     * This is added to check the input after the component is rendered.
+     * to see if the bind updated the input value.
+     *
+     * @returns {void}
+     */
+    after() {
+      if (this.input.value) {
+        const e = this.input.value.split("-");
+        this.state.start = e[0], this.state.end = e[1];
+      }
+    },
+    /**
+     * Renders the DatePicker component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = (s, { state: o }) => o.toggle("open"), t = (s, o) => {
+        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, typeof this.onChange == "function" && this.onChange({ start: s, end: o });
+      };
+      return n({ class: "relative w-full max-w-[320px]" }, [
+        tt({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        Qe({
+        st({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), Mt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => Z([
-  new re({
+), jt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => ee([
+  new ie({
     dateTime: e,
     filter: s || ((o) => {
-      const r = B.getLocalTime(o, !0, !1, t);
-      return B.getTimeFrame(r);
+      const l = A.getLocalTime(o, !0, !1, t);
+      return A.getTimeFrame(l);
     })
   })
 ]);
-function Xe({ bind: e, required: t }) {
-  return S({
+function ot({ bind: e, required: t }) {
+  return y({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
     bind: e,
     required: t
   });
 }
-function Ze({ bind: e, required: t, toggleOpen: s }) {
+function nt({ bind: e, required: t, toggleOpen: s }) {
   return m(
     {
       class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
       click: s
     },
     [
-      Xe({ bind: e, required: t }),
-      a({
+      ot({ bind: e, required: t }),
+      i({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
-      b({ html: u.clock })
+      f({ html: u.clock })
     ]
   );
 }
-function A({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: r = !1 }) {
+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((l) => {
-      let i = r ? l.toString().padStart(2, "0") : l.toString();
+    e.map((r) => {
+      let a = l ? r.toString().padStart(2, "0") : r.toString();
       return m({
-        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 et({ handleTimeSelect: e }) {
+function lt({ handleTimeSelect: e }) {
   return n(
     { class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" },
     [
-      v(
+      w(
         "open",
-        (t, s, o) => t ? new T(
+        (t, s, o) => t ? new C(
           {
             cache: "dropdown",
             parent: o,
@@ -1157,23 +1235,23 @@ function et({ handleTimeSelect: e }) {
                   { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
                   [
                     // Hours column
-                    A({
-                      items: Array.from({ length: 12 }, (r, l) => l + 1),
+                    B({
+                      items: Array.from({ length: 12 }, (l, r) => r + 1),
                       handleTimeSelect: e,
                       state: o.state,
                       stateValue: "hour",
                       pad: !0
                     }),
                     // Minutes column
-                    A({
-                      items: Array.from({ length: 60 }, (r, l) => l),
+                    B({
+                      items: Array.from({ length: 60 }, (l, r) => r),
                       handleTimeSelect: e,
                       state: o.state,
                       stateValue: "minute",
                       pad: !0
                     }),
                     // AM/PM column
-                    A({
+                    B({
                       items: ["AM", "PM"],
                       handleTimeSelect: e,
                       state: o.state,
@@ -1189,20 +1267,20 @@ function et({ handleTimeSelect: e }) {
     ]
   );
 }
-function E(e) {
+function j(e) {
   if (!e)
     return { hour: null, minute: null, meridian: null };
   const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
   if (!s)
     return { hour: null, minute: null, meridian: null };
-  let [, o, r, , l] = s, i = parseInt(o, 10), d = parseInt(r, 10);
-  return i < 0 || i > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && i < 12 ? i += 12 : l === "AM" && i === 12 && (i = 12)) : i === 0 ? (l = "AM", i = 12) : i < 12 ? l = "AM" : i === 12 ? l = "PM" : (l = "PM", i -= 12), {
-    hour: i.toString().padStart(2, "0"),
+  let [, o, l, , r] = s, a = parseInt(o, 10), d = parseInt(l, 10);
+  return a < 0 || a > 23 || d < 0 || d > 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: d.toString().padStart(2, "0"),
-    meridian: l
+    meridian: r
   });
 }
-const Lt = w(
+const Ot = x(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1210,7 +1288,7 @@ const Lt = w(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = E(e);
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = j(e);
       return {
         selectedTime: e,
         open: !1,
@@ -1226,7 +1304,7 @@ const Lt = w(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: s } = E(this.input.value);
+        const { hour: e, minute: t, meridian: s } = j(this.input.value);
         this.state.set({
           hour: e,
           minute: t,
@@ -1241,32 +1319,32 @@ const Lt = w(
      * @returns {object}
      */
     render() {
-      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: r }) => {
-        if (s && (this.state.hour = s), o && (this.state.minute = o), r && (this.state.meridian = r), this.state.hour && this.state.minute && this.state.meridian) {
-          const l = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-          this.state.selectedTime = l, this.state.open = !1, this.input.value = l, typeof this.change == "function" && this.change(l);
+      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: l }) => {
+        if (s && (this.state.hour = s), o && (this.state.minute = o), l && (this.state.meridian = l), this.state.hour && this.state.minute && this.state.meridian) {
+          const r = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
+          this.state.selectedTime = r, this.state.open = !1, this.input.value = r, typeof this.change == "function" && this.change(r);
         }
       };
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          Ze({
+          nt({
             toggleOpen: e,
             bind: this.bind,
             required: this.required
           }),
-          et({
+          lt({
             handleTimeSelect: t
           })
         ]
       );
     }
   }
-), tt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
-  p({ size: "lg" }, e)
-]), st = ({ title: e }) => k({ class: "flex flex-auto items-center" }, [
-  C({ class: "text-lg font-semibold" }, e)
-]), ot = c((e, t) => ee(
+), rt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+  b({ size: "lg" }, e)
+]), at = ({ title: e }) => D({ class: "flex flex-auto items-center" }, [
+  S({ class: "text-lg font-semibold" }, e)
+]), it = c((e, t) => te(
   {
     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
@@ -1277,18 +1355,18 @@ const Lt = w(
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && tt(e.icon, e.iconColor),
+      e.icon && rt(e.icon, e.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
         n({ class: "flex flex-auto flex-col space-y-2" }, [
-          st(e),
+          at(e),
           e.description && g({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
           n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
-        e.buttons && M({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
+        e.buttons && P({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
       ])
     ])
   ]
-)), nt = (e) => H.render(e, app.root), j = {
+)), ct = (e) => Y.render(e, app.root), O = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1315,7 +1393,7 @@ const Lt = w(
     iconColor: "text-muted-foreground"
   }
 };
-class lt extends x {
+class dt extends v {
   /**
    * This will declare the props for the compiler.
    *
@@ -1332,13 +1410,13 @@ class lt extends x {
   render() {
     const t = (d) => {
       d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: r } = j[this.type] || j.default, l = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
-    return ot({
-      class: l,
-      title: i,
+    }, { borderColor: s, bgColor: o, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${o} ${s}`, a = this.title || "Dialog Title";
+    return it({
+      class: r,
+      title: a,
       click: t,
       icon: this.icon,
-      iconColor: r,
+      iconColor: l,
       description: this.description,
       buttons: this.getButtons()
     }, this.children);
@@ -1377,7 +1455,7 @@ class lt extends x {
    * @returns {void}
    */
   open() {
-    nt(this), this.panel.showModal(), this.state.open = !0;
+    ct(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1388,7 +1466,7 @@ class lt extends x {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class Pt extends lt {
+class Vt extends dt {
   /**
    * This will declare the props for the compiler.
    *
@@ -1418,16 +1496,16 @@ class Pt extends lt {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const Ft = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
-  q({ class: "flex flex-auto flex-col" }, [
+const qt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
+  R({ class: "flex flex-auto flex-col" }, [
     n({ class: "flex flex-auto flex-col space-y-4" }, [
       n({ class: "flex flex-auto items-center justify-center" }, [
         e.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
-          p(e.icon)
+          b(e.icon)
         ])
       ]),
-      k({ class: "py-4 text-center" }, [
-        C({ class: "text-xl font-bold" }, e.title),
+      D({ class: "py-4 text-center" }, [
+        S({ class: "text-xl font-bold" }, e.title),
         g({ class: "pb-8 text-muted-foreground" }, e.description || ""),
         ...t
       ])
@@ -1435,44 +1513,45 @@ const Ft = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
   ])
 ]));
 export {
-  mt as A,
-  It as B,
-  wt as C,
-  de as D,
-  Pt as E,
-  we as F,
-  ot as G,
-  lt as H,
-  Ft as I,
-  yt as M,
-  vt as N,
-  We as P,
-  xt as S,
-  Ct as T,
-  fe as a,
-  ft as b,
-  be as c,
-  ye as d,
-  ve as e,
-  Ce as f,
-  Se as g,
-  gt as h,
-  q as i,
-  bt as j,
-  pt as k,
-  Le as l,
-  kt as m,
-  St as n,
-  Dt as o,
-  y as p,
-  f as q,
-  Ne as r,
-  Tt as s,
-  $t as t,
-  Re as u,
-  Ge as v,
-  At as w,
-  Bt as x,
-  Mt as y,
-  Lt as z
+  wt as A,
+  Mt as B,
+  Dt as C,
+  he as D,
+  Ot as E,
+  ve as F,
+  Vt as G,
+  it as H,
+  dt as I,
+  qt as J,
+  It as M,
+  $t as N,
+  Ge as P,
+  St as S,
+  Tt as T,
+  ge as a,
+  yt as b,
+  xe as c,
+  Ce as d,
+  ke as e,
+  Se as f,
+  Ie as g,
+  vt as h,
+  R as i,
+  Ct as j,
+  kt as k,
+  Fe as l,
+  Bt as m,
+  At as n,
+  Pt as o,
+  k as p,
+  p as q,
+  Ee as r,
+  Lt as s,
+  Ft as t,
+  Je as u,
+  Ke as v,
+  Nt as w,
+  zt as x,
+  Et as y,
+  jt as z
 };