@base-framework/ui 1.0.2023 → 1.0.2024

package/dist/{empty-state-BJJ3lWNv.js → empty-state-CpNRoBnH.js}

@@ -1,11 +1,11 @@
-import { Div as n, H5 as Z, P as b, I as x, Li as H, Span as l, Ul as q, Button as m, OnState as I, Label as P, H2 as S, Form as tt, Header as T, Footer as L, A as V, H3 as et, Checkbox as st, Input as f, 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 at, Data as B, Builder as _, Jot as v, Events as p, DateTime as M } from "@base-framework/base";
-import { P as D, b as lt, R as ct } from "./range-calendar-6CLMTieN.js";
+import { Div as n, H5 as Z, P as b, I 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, b as at, R as ct } from "./range-calendar-6CLMTieN.js";
 import { C as dt, F as ut } from "./form-group-BB7dLJir.js";
 import { B as h, I as g } from "./buttons-CHEs54Wl.js";
-import { Icons as d } from "./icons.es.js";
-import { Timer as ht, List as ft, DynamicTime as mt } from "@base-framework/organisms";
-import { a as C } from "./image-BB__4s0g.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 j = {
   info: {
@@ -36,10 +36,10 @@ const j = {
 }, gt = (t, e) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${e}` }, [
   x({ html: t })
 ]), pt = (t) => Z({ class: "font-semibold" }, t), bt = (t) => b({ class: "text-sm text-muted-foreground" }, t), Le = c(({ title: t, description: e, icon: s, type: o = "default" }) => {
-  const { borderColor: r, bgColor: i, iconColor: a } = j[o] || j.default;
+  const { borderColor: r, bgColor: i, iconColor: l } = j[o] || j.default;
   return n({ class: `flex items-start p-4 border rounded-lg ${i} ${r}` }, [
     // Icon and content
-    s && gt(s, a),
+    s && gt(s, l),
     n({ class: "flex flex-col" }, [
       pt(t),
       bt(e)
@@ -67,34 +67,34 @@ class Oe extends w {
       A.removeElement(e);
       return;
     }
-    it.addClass(e, s), at.on("animationend", e, (o) => A.removeElement(e));
+    it.addClass(e, s), lt.on("animationend", e, (o) => A.removeElement(e));
   }
 }
-const xt = (t) => l({ class: "ml-auto text-xs tracking-widest opacity-60" }, t), yt = (t) => l({ class: "flex w-4 h-4", html: t }), wt = (t) => l({ class: "flex-auto" }, t), vt = (t, e) => H({
+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({
   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)
-]), Ct = (t, e) => q({ class: "grid gap-2" }, [
-  t.map((s) => vt(s, e))
+]), vt = (t, e) => q({ class: "grid gap-2" }, [
+  t.map((s) => Ct(s, e))
 ]), St = (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) => Ct(e, t)]
+    for: ["groups", (e) => vt(e, t)]
   })
-]), Dt = ({ label: t, icon: e, toggleDropdown: s }) => m({
+]), Dt = ({ label: t, icon: e, toggleDropdown: s }) => f({
   cache: "button",
   class: `inline-flex items-center justify-between rounded-md border
 			px-2 py-2 text-sm font-medium hover:bg-muted
 			focus:outline-none transition duration-150 ease-in-out`,
   click: s
 }, [
-  t && l(t),
+  t && a(t),
   e && x({ html: e })
 ]), kt = ({ onSelect: t }) => n([
-  I(
+  T(
     "open",
     (e, s, o) => e ? new D({
       cache: "dropdown",
@@ -168,7 +168,7 @@ class Ae extends w {
     ]);
   }
 }
-const It = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e)), Tt = 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) => b({ ...t, class: "text-sm text-muted-foreground italic" }, e)), Ft = c((t, e) => b({ ...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" }, [
+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) => b({ ...t, class: "text-sm text-muted-foreground italic" }, e)), Ft = c((t, e) => b({ ...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 && b({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, t.description),
   ...e
@@ -194,7 +194,7 @@ const It = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
     ...t,
     class: "w-full"
   }, r);
-}), Ne = C(
+}), ze = v(
   {
     /**
      * The initial state of the FormField.
@@ -219,8 +219,8 @@ const It = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
         this.state.error = i, this.state.hasError = !!i;
       };
       return n({ class: "flex flex-auto gap-y-4" }, [
-        It([
-          Tt({ htmlFor: e }, s),
+        Tt([
+          It({ htmlFor: e }, s),
           Mt({
             id: e,
             name: t,
@@ -237,175 +237,33 @@ const It = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
   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)
-), ze = 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" }, [
+), 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),
   ...e
 ])), Re = (t, e) => n({ class: "flex justify-between" }, [
-  l({ class: "text-muted-foreground" }, t),
-  l(e)
+  a({ class: "text-muted-foreground" }, t),
+  a(e)
 ]), He = (t, e) => n({ class: "flex" }, [
-  l({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, t),
-  l(e)
-]);
-class Lt {
+  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" }, [
   /**
-   * Creates an instance of DrawerGesture.
-   *
-   * @param {object} [options={}]
-   * @param {HTMLElement|null} [options.modal=null] - The modal element (panel) reference
-   * @param {number} [options.closeThreshold=150] - Pixels to drag before closing
-   * @param {number} [options.snapThreshold=50] - Pixels to drag before snapping
-   * @param {Function|null} [options.onClose=null] - Callback when drawer should close
+   * Back Button (Mobile Only)
    */
-  constructor(e = {}) {
-    const { modal: s = null, closeThreshold: o = 150, snapThreshold: r = 50, onClose: i = null } = e;
-    this.modal = s, this.reset();
-  }
+  s && h({
+    variant: "icon",
+    icon: u.arrows.left,
+    class: "mr-2 p-0 flex sm:hidden",
+    click: (i, l) => l.close()
+  }),
   /**
-   * Reset drag state
-   *
-   * @returns {void}
-   */
-  reset() {
-    this.state = {
-      isDragging: !1,
-      startY: 0,
-      currentY: 0,
-      startScrollTop: 0,
-      canDrag: !1
-    };
-  }
-  /**
-   * Check if viewport is mobile
-   *
-   * @returns {boolean}
-   */
-  isMobile() {
-    return window.innerWidth < 1024;
-  }
-  /**
-   * Handle touch start
-   *
-   * @param {TouchEvent} e
-   * @returns {void}
-   */
-  handleTouchStart(e) {
-    if (!this.modalBody) return;
-    const s = e.touches[0];
-    this.state.startY = s.clientY, this.state.currentY = s.clientY, this.state.startScrollTop = this.modalBody.scrollTop, this.state.canDrag = this.modalBody.scrollTop === 0;
-  }
-  /**
-   * Handle touch move
-   *
-   * @param {TouchEvent} e
-   * @returns {void}
-   */
-  handleTouchMove(e) {
-    if (!this.modalContent || !this.modalBody) return;
-    const s = e.touches[0];
-    this.state.currentY = s.clientY;
-    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);
-    } else this.modalBody.scrollTop > 0 && (this.state.canDrag = !1);
-  }
-  /**
-   * Handle touch end
-   *
-   * @param {TouchEvent} e
-   * @returns {void}
-   */
-  handleTouchEnd(e) {
-    if (!this.modalContent) return;
-    const s = this.getDeltaY();
-    this.state.isDragging && (this.modalContent.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out", s > this.closeThreshold ? this.animateClose() : this.snapBack()), this.state.isDragging = !1, this.state.canDrag = !1;
-  }
-  /**
-   * Get current drag delta Y
-   *
-   * @returns {number}
+   * Icon Container
    */
-  getDeltaY() {
-    return this.state.currentY - this.state.startY;
-  }
-  /**
-   * Calculate translateY with rubber band damping
-   *
-   * @param {number} deltaY
-   * @returns {number}
-   */
-  calculateTranslateY(e) {
-    const s = 1 - e / (window.innerHeight * 2);
-    return e * Math.max(s, 0.5);
-  }
-  /**
-   * Calculate backdrop opacity based on drag distance
-   *
-   * @param {number} deltaY
-   * @returns {number}
-   */
-  calculateBackdropOpacity(e) {
-    return Math.max(0, 1 - e / this.closeThreshold);
-  }
-  /**
-   * Update backdrop opacity
-   *
-   * @param {number} opacity
-   * @returns {void}
-   */
-  updateBackdropOpacity(e) {
-    this.modal && this.modal.style.setProperty("--backdrop-opacity", e.toString());
-  }
-  /**
-   * Animate drawer closing
-   *
-   * @returns {void}
-   */
-  animateClose() {
-    this.modalContent && (this.modalContent.style.transform = "translateY(100%)", this.updateBackdropOpacity(0), setTimeout(() => {
-      this.onClose && this.onClose();
-    }, 300));
-  }
-  /**
-   * Snap drawer back to original position
-   *
-   * @returns {void}
-   */
-  snapBack() {
-    this.modalContent && (this.modalContent.style.transform = "translateY(0)", this.updateBackdropOpacity(1));
-  }
-  /**
-   * Check if currently dragging
-   *
-   * @returns {boolean}
-   */
-  isDragging() {
-    return this.state.isDragging;
-  }
-  /**
-   * Cleanup
-   *
-   * @returns {void}
-   */
-  destroy() {
-    this.reset(), this.onClose = null;
-  }
-}
-const Ot = ({ title: t, description: e, back: s, icon: o, options: r = [] }) => T({ 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
-   */
-  s && h({ variant: "icon", icon: d.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (i, a) => a.close() }),
-  /**
-   * Icon
-   */
-  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [g(o)]),
+  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [
+    g({ size: "md" }, o)
+  ]),
   /**
-   * Title and Description
+   * 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" }, [
@@ -414,7 +272,7 @@ const Ot = ({ title: t, description: e, back: s, icon: o, options: r = [] }) =>
     ]),
     n({ class: "flex flex-none items-center gap-2" }, r)
   ])
-]), Q = c((t, e) => n({
+])), Q = c((t, e) => 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 overflow-y-auto ${t.class}`,
   click: (s, o) => {
@@ -427,12 +285,12 @@ const Ot = ({ title: t, description: e, back: s, icon: o, options: r = [] }) =>
     cache: "modalContent",
     ...t.gestureHandlers
   }, [
-    Ot(t),
+    Lt(t),
     n({ class: "modal-body flex flex-grow flex-col py-0 px-6 z-0 overflow-y-auto", 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)
   ])
-])), At = (t) => _.render(t, app.root);
-class Yt extends w {
+])), Ot = (t) => _.render(t, app.root);
+class At extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -566,7 +424,7 @@ class Yt extends w {
    * @returns {void}
    */
   open() {
-    At(this), this.showModal();
+    Ot(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -595,17 +453,179 @@ class Yt extends w {
     this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
   }
 }
-class qe extends Yt {
+class Yt {
   /**
-   * This will declare the props for the compiler.
+   * Creates an instance of DrawerGesture.
+   *
+   * @param {object} [options={}]
+   * @param {HTMLElement} [options.modal=null] - The modal element (panel) reference
+   * @param {HTMLElement} [options.modalContent=null] - The modal content element reference
+   * @param {HTMLElement} [options.modalBody=null] - The scrollable body element reference
+   * @param {number} [options.closeThreshold=150] - Pixels to drag before closing
+   * @param {number} [options.snapThreshold=50] - Pixels to drag before snapping
+   * @param {Function} [options.onClose=null] - Callback when drawer should close
+   */
+  constructor(e = {}) {
+    const {
+      modal: s = null,
+      modalContent: o = null,
+      modalBody: r = null,
+      closeThreshold: i = 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();
+  }
+  /**
+   * Resets the drag state to initial values
+   *
+   * @returns {void}
+   */
+  reset() {
+    this.state = {
+      isDragging: !1,
+      startY: 0,
+      currentY: 0,
+      startScrollTop: 0,
+      canDrag: !1
+    };
+  }
+  /**
+   * Checks if the viewport is mobile size
+   *
+   * @returns {boolean}
+   */
+  isMobile() {
+    return window.innerWidth < 1024;
+  }
+  /**
+   * Handles touch start event
+   *
+   * @param {TouchEvent} e - The touch event
+   * @returns {void}
+   */
+  handleTouchStart(e) {
+    if (!this.modalBody)
+      return;
+    const s = e.touches[0];
+    this.state.startY = s.clientY, this.state.currentY = s.clientY, this.state.startScrollTop = this.modalBody.scrollTop, this.state.canDrag = this.modalBody.scrollTop === 0;
+  }
+  /**
+   * Handles touch move event
+   *
+   * @param {TouchEvent} e - The touch event
+   * @returns {void}
+   */
+  handleTouchMove(e) {
+    if (!this.modalContent || !this.modalBody)
+      return;
+    const s = e.touches[0];
+    this.state.currentY = s.clientY;
+    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);
+    } else this.modalBody.scrollTop > 0 && (this.state.canDrag = !1);
+  }
+  /**
+   * Handles touch end event
+   *
+   * @param {TouchEvent} e - The touch event
+   * @returns {void}
+   */
+  handleTouchEnd(e) {
+    if (!this.modalContent)
+      return;
+    const s = this.getDeltaY();
+    this.state.isDragging && (this.modalContent.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out", s > this.closeThreshold ? this.animateClose() : this.snapBack()), this.state.isDragging = !1, this.state.canDrag = !1;
+  }
+  /**
+   * Gets current drag delta Y
+   *
+   * @returns {number} The vertical drag distance in pixels
+   */
+  getDeltaY() {
+    return this.state.currentY - this.state.startY;
+  }
+  /**
+   * Calculates translateY with rubber band damping effect.
+   * The further you drag, the more resistance is applied.
+   *
+   * @param {number} deltaY - The raw drag distance
+   * @returns {number} The damped translation distance
+   */
+  calculateTranslateY(e) {
+    const s = 1 - e / (window.innerHeight * 2);
+    return e * Math.max(s, 0.5);
+  }
+  /**
+   * Calculates backdrop opacity based on drag distance.
+   * Opacity decreases as the drawer is dragged down.
+   *
+   * @param {number} deltaY - The drag distance
+   * @returns {number} Opacity value between 0 and 1
+   */
+  calculateBackdropOpacity(e) {
+    return Math.max(0, 1 - e / this.closeThreshold);
+  }
+  /**
+   * Updates the backdrop opacity via CSS custom property
+   *
+   * @param {number} opacity - The opacity value (0-1)
+   * @returns {void}
+   */
+  updateBackdropOpacity(e) {
+    this.modal && this.modal.style.setProperty("--backdrop-opacity", e.toString());
+  }
+  /**
+   * Animates the drawer closing by translating it off-screen
+   *
+   * @returns {void}
+   */
+  animateClose() {
+    this.modalContent && (this.modalContent.style.transform = "translateY(100%)", this.updateBackdropOpacity(0), setTimeout(() => {
+      this.onClose && this.onClose();
+    }, 300));
+  }
+  /**
+   * Snaps the drawer back to its original position
+   *
+   * @returns {void}
+   */
+  snapBack() {
+    this.modalContent && (this.modalContent.style.transform = "translateY(0)", this.updateBackdropOpacity(1));
+  }
+  /**
+   * Checks if currently dragging
+   *
+   * @returns {boolean}
+   */
+  isDragging() {
+    return this.state.isDragging;
+  }
+  /**
+   * Cleans up resources and resets state
+   *
+   * @returns {void}
+   */
+  destroy() {
+    this.reset(), this.modal = null, this.modalContent = null, this.modalBody = null, this.onClose = null;
+  }
+}
+class qe extends At {
+  /**
+   * Declares the component props
    *
    * @returns {void}
    */
   declareProps() {
-    super.declareProps(), this.type = "drawer", this.swipeToClose = !0, this.closeThreshold = 150, this.snapThreshold = 50;
+    super.declareProps(), this.type = "drawer", this.swipeToClose = !0, this.closeThreshold = 150, this.snapThreshold = 50, this.gesture = null, this.modalContent = null, this.modalBody = null;
   }
   /**
-   * Get extra props for ModalContainer
+   * Gets extra props to pass to ModalContainer
    *
    * @returns {object}
    */
@@ -614,7 +634,7 @@ class qe extends Yt {
     return this.swipeToClose && this.gesture && (e.gestureHandlers = this.getGestureHandlers()), e;
   }
   /**
-   * Render the drawer with gesture handlers
+   * Renders the drawer with gesture handlers
    *
    * @returns {object}
    */
@@ -629,8 +649,8 @@ class qe extends Yt {
         buttons: this.getButtons(),
         hideFooter: this.hideFooter,
         onSubmit: (i) => {
-          let a = !0;
-          this.onSubmit && (a = this.onSubmit(i)), a !== !1 && this.destroy();
+          let l = !0;
+          this.onSubmit && (l = this.onSubmit(i)), l !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -641,17 +661,15 @@ class qe extends Yt {
     );
   }
   /**
-   * Show the modal
+   * Shows the modal and initializes gesture handling
    *
    * @protected
    * @returns {void}
    */
   showModal() {
-    super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new Lt({
+    super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new Yt({
       modal: this.panel,
-      // @ts-ignore
       modalContent: this.modalContent,
-      // @ts-ignore
       modalBody: this.modalBody,
       closeThreshold: this.closeThreshold,
       snapThreshold: this.snapThreshold,
@@ -659,8 +677,8 @@ class qe extends Yt {
     }));
   }
   /**
-   * Get gesture event handlers for modal content
-   * Returns event props to be spread onto the modal-content element
+   * Gets gesture event handlers for modal content.
+   * Returns event props to be spread onto the modal-content element.
    *
    * @returns {object}
    */
@@ -672,7 +690,7 @@ class qe extends Yt {
     };
   }
   /**
-   * Clean up before destroy
+   * Cleans up before destroy
    *
    * @protected
    * @returns {void}
@@ -707,7 +725,7 @@ const E = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, jt = (t) => T({ class: "flex justify-center" }, [
+}, jt = (t) => I({ class: "flex justify-center" }, [
   et({ class: "text-lg font-bold mb-0" }, t)
 ]), Et = c(({ href: t, class: e }, s) => V({
   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}`,
@@ -715,14 +733,14 @@ const E = {
   animateIn: "pullRightIn",
   animateOut: "pullRight",
   role: "alert"
-}, s)), Nt = c(({ close: t, class: e }, s) => n({
+}, s)), zt = 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 zt extends w {
+class Nt extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -749,7 +767,7 @@ class zt extends w {
     return r ? Et({
       href: r,
       class: `${e} ${s}`
-    }, i) : Nt({
+    }, i) : zt({
       close: this.close.bind(this),
       class: `${e} ${s}`
     }, i);
@@ -806,7 +824,7 @@ class zt extends w {
       h({
         class: "absolute top-[12px] right-[12px]",
         variant: "icon",
-        icon: d.x,
+        icon: u.x,
         click: this.close.bind(this)
       })
     ];
@@ -830,11 +848,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 ft({
+      new mt({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (e) => new zt(e)
+        rowItem: (e) => new Nt(e)
       })
     ]);
   }
@@ -857,7 +875,7 @@ class Ve extends w {
     this.list.delete(e.id), this.list.isEmpty() && this.panel.hidePopover();
   }
 }
-const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
+const z = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
   onState: ["method", { active: t }],
   dataSet: ["method", ["state", t, "active"]],
@@ -866,16 +884,16 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
   }
 }, [
   g(s),
-  l(e)
+  a(e)
 ])), Rt = (t) => {
   const e = document.documentElement;
-  if (t === "system" && (t = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + t + ")").matches) {
+  if (t === "system" && (t = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), z && !z("(prefers-color-scheme: " + t + ")").matches) {
     e.classList.add(t);
     return;
   }
   const s = t === "light" ? "dark" : "light";
   e.classList.remove(s);
-}, Ge = v(
+}, Ge = C(
   {
     /**
      * This will render the component.
@@ -885,9 +903,9 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     render() {
       return n({ class: "flex flex-auto flex-col" }, [
         n({ class: "grid grid-cols-3 gap-4" }, [
-          F({ label: "System", value: "system", icon: d.adjustments.horizontal }),
-          F({ label: "Light", value: "light", icon: d.sun }),
-          F({ label: "Dark", value: "dark", icon: d.moon })
+          F({ label: "System", value: "system", icon: u.adjustments.horizontal }),
+          F({ label: "Light", value: "light", icon: u.sun }),
+          F({ label: "Dark", value: "dark", icon: u.moon })
         ])
       ]);
     },
@@ -902,7 +920,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
       };
     }
   }
-), We = C(
+), We = v(
   {
     /**
      * The initial state of the Toggle.
@@ -929,7 +947,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
      * @returns {object}
      */
     render() {
-      return m({
+      return f({
         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 }) => {
@@ -947,7 +965,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
           bind: this.bind,
           required: this.required
         }),
-        l({
+        a({
           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 }]
         })
@@ -974,7 +992,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     [y.BUSY]: k.BUSY,
     [y.AWAY]: k.AWAY
   }]
-}), qt = (t) => t.indexOf(".") === -1 && t.indexOf("[[") === -1 && t.indexOf("blob:") === -1, Ke = v(
+}), qt = (t) => t.indexOf(".") === -1 && t.indexOf("[[") === -1 && t.indexOf("blob:") === -1, Ke = C(
   {
     /**
      * Get the initial state for the component.
@@ -1013,7 +1031,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     render() {
       const t = "image-upload", e = this.onChange || null;
       return n({ class: "flex-none items-center" }, [
-        f({
+        m({
           id: t,
           cache: "input",
           type: "file",
@@ -1030,11 +1048,11 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          I("loaded", (s) => s === !1 || qt(this.src) ? P({
+          T("loaded", (s) => s === !1 || qt(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(d.upload),
+            g(u.upload),
             n("Upload Image")
           ]) : G({
             // @ts-ignore
@@ -1045,7 +1063,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
       ]);
     }
   }
-), Qe = v(
+), Qe = C(
   {
     /**
      * Get the initial state for the component.
@@ -1084,7 +1102,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     render() {
       const t = "logo-upload", e = this.onChange || null;
       return n({ class: "flex-none items-center" }, [
-        f({
+        m({
           id: t,
           cache: "input",
           type: "file",
@@ -1101,7 +1119,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          I(
+          T(
             "loaded",
             (s) => s ? G({
               // @ts-ignore
@@ -1111,7 +1129,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
               htmlFor: t,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
-              g(d.upload),
+              g(u.upload),
               n("Upload logo")
             ])
           )
@@ -1126,15 +1144,15 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [l(e)]
+  [a(e)]
 ), Gt = () => g({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, d.chevron.single.right), Wt = (t) => n({ class: "flex items-center" }, [
-  t.href ? Vt(t.href, t.label) : l(t.label),
+}, 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 = v(
+]), Xe = C(
   {
     /**
      * Set initial data
@@ -1173,7 +1191,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
       );
     }
   }
-), z = {
+), N = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -1182,8 +1200,8 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, _t = (t) => z[t] || z.default, Jt = ({ index: t, size: e }) => n({ class: `${e} rounded-full bg-muted cursor-pointer` }, [
-  l({
+}, _t = (t) => N[t] || N.default, Jt = ({ 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,
@@ -1196,7 +1214,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
 ]), Kt = (t, e) => Array.from({ length: t }, (s, o) => Jt({
   index: o,
   size: e
-})), Ze = v(
+})), Ze = C(
   {
     /**
      * Defines component data (props).
@@ -1227,27 +1245,27 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
       );
     }
   }
-), Qt = ({ toggleDropdown: t }) => m(
+), Qt = ({ toggleDropdown: t }) => f(
   {
     cache: "button",
     class: "relative z-[2] inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border bg-input hover:bg-muted h-10 px-4 py-2 justify-between",
     click: t
   },
   [
-    l({ onState: ["selectedLabel", (e) => e || "Select item..."] }),
-    x({ html: d.chevron.upDown })
+    a({ onState: ["selectedLabel", (e) => e || "Select item..."] }),
+    x({ html: u.chevron.upDown })
   ]
 ), Xt = (t, e, s) => H({
   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 && l({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, t.icon)]),
-  l({ class: "text-base font-normal" }, t.label)
+  t.icon && a({ class: "mr-2 flex items-baseline" }, [g({ 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" }, [
-  I(
+  T(
     "open",
     (s, o, r) => s ? new D({
       cache: "dropdown",
@@ -1257,7 +1275,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
       Zt(t, e)
     ]) : null
   )
-]), ts = v(
+]), ts = C(
   {
     /**
      * This will set up the data.
@@ -1347,7 +1365,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
         }),
         // Hidden required input for form validation
         // @ts-ignore
-        this.required && f({
+        this.required && m({
           class: "opacity-0 absolute top-0 left-0 z-[1]",
           type: "text",
           // @ts-ignore
@@ -1366,19 +1384,19 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
   icon: t,
   "aria-label": s
 }), ee = ({ click: t }) => X({
-  icon: d.circleMinus,
+  icon: u.circleMinus,
   click: t,
   ariaLabel: "Decrement"
 }), se = ({ click: t }) => X({
-  icon: d.circlePlus,
+  icon: u.circlePlus,
   click: t,
   ariaLabel: "Increment"
-}), oe = ({ bind: t, min: e, max: s, readonly: o = !1 }) => W(({ state: r }) => f({
+}), oe = ({ bind: t, min: e, max: s, readonly: o = !1 }) => W(({ state: r }) => m({
   value: ["[[count]]", r],
   bind: t,
-  blur: (i, { state: a }) => {
-    let u = parseInt(i.target.value, 10);
-    isNaN(u) && (u = e ?? 0), e !== void 0 && (u = Math.max(u, e)), s !== void 0 && (u = Math.min(u, s)), a.count = u;
+  blur: (i, { state: l }) => {
+    let d = parseInt(i.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",
   readonly: o,
@@ -1386,7 +1404,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), es = C(
+})), es = v(
   {
     /**
      * Initial state for the counter component.
@@ -1428,32 +1446,32 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     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 }) => f({
+}, ie = ({ bind: t, required: e }) => m({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: t,
   required: e
-}), ae = ({ placeholder: t, handleInputChange: e, handleInputFocus: s }) => f({
+}), le = ({ placeholder: t, handleInputChange: e, handleInputFocus: s }) => m({
   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) : ""]
-}), le = ({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: i }) => n(
+}), ae = ({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: i }) => 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 }),
-    ae({ placeholder: i, handleInputChange: o, handleInputFocus: r }),
-    m(
+    le({ placeholder: i, handleInputChange: o, handleInputFocus: r }),
+    f(
       {
         class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
         click: s
       },
       [
-        x({ html: d.calendar.days })
+        x({ html: u.calendar.days })
       ]
     )
   ]
@@ -1464,13 +1482,13 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     button: r.panel,
     size: "fit"
   }, [
-    new lt({
+    new at({
       selectedDate: r.state.selectedDate,
       selectedCallBack: t,
       blockPriorDates: e
     })
   ])
-), ss = C(
+), ss = v(
   {
     /**
      * The initial state of the DatePicker.
@@ -1537,7 +1555,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          le({
+          ae({
             toggleOpen: this.toggleOpen.bind(this),
             bind: this.bind,
             required: this.required,
@@ -1553,22 +1571,22 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
       );
     }
   }
-), de = ({ bind: t, required: e }) => f({
+), de = ({ bind: t, required: e }) => m({
   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 }) => m({
+}), ue = ({ bind: t, required: e, toggleOpen: s }) => f({
   class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 px-4 py-2",
   click: s
 }, [
   de({ bind: t, required: e }),
   W(({ state: o }) => [
-    l(Y.date(["[[start]]", o], "Start Date")),
-    l(" - "),
-    l(Y.date(["[[end]]", o], "End Date"))
+    a(Y.date(["[[start]]", o], "Start Date")),
+    a(" - "),
+    a(Y.date(["[[end]]", o], "End Date"))
   ]),
-  x({ html: d.calendar.days })
+  x({ html: u.calendar.days })
 ]), he = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, r) => new D({
   cache: "dropdown",
   parent: r,
@@ -1581,7 +1599,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     onRangeSelect: t,
     blockPriorDates: e
   })
-])), os = C(
+])), os = v(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1630,7 +1648,7 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     }
   }
 ), ns = ({ dateTime: t = "", remoteTimeZone: e = "America/Denver", filter: s = null }) => nt([
-  new mt({
+  new ft({
     dateTime: t,
     filter: s || ((o) => {
       const r = M.getLocalTime(o, !0, !1, e);
@@ -1638,11 +1656,11 @@ const N = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => m({
     })
   })
 ]);
-function fe(t) {
+function me(t) {
   let e = "";
   return t.length > 0 && (e = t.substring(0, 2), t.length > 2 && (e += ":" + t.substring(2, 4))), e;
 }
-function me(t) {
+function fe(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);
@@ -1657,7 +1675,7 @@ function me(t) {
   };
 }
 function ge({ bind: t, required: e }) {
-  return f({
+  return m({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
     bind: t,
@@ -1665,7 +1683,7 @@ function ge({ bind: t, required: e }) {
   });
 }
 function pe({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
-  return f({
+  return m({
     cache: "timeInput",
     class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
     placeholder: t || "hh:mm AM/PM",
@@ -1682,13 +1700,13 @@ function be({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleI
     [
       ge({ bind: t, required: e }),
       pe({ placeholder: i, handleInputChange: o, handleInputFocus: r }),
-      m(
+      f(
         {
           class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
           click: s
         },
         [
-          x({ html: d.clock })
+          x({ html: u.clock })
         ]
       )
     ]
@@ -1698,12 +1716,12 @@ function $({ items: t, handleTimeSelect: e, state: s, stateValue: o, pad: r = !1
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
     t.map((i) => {
-      let a = r ? i.toString().padStart(2, "0") : i.toString();
-      return m({
-        text: a,
+      let l = r ? i.toString().padStart(2, "0") : i.toString();
+      return f({
+        text: l,
         class: "hover:bg-muted/50 rounded-md pr-2 py-1",
-        click: () => e({ [o]: a }),
-        onState: [s, o, { "bg-muted": a }]
+        click: () => e({ [o]: l }),
+        onState: [s, o, { "bg-muted": l }]
       });
     })
   );
@@ -1761,14 +1779,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, a = parseInt(o, 10), u = parseInt(r, 10);
-  return a < 0 || a > 23 || u < 0 || u > 59 ? { hour: null, minute: null, meridian: null } : (i ? (i = i.toUpperCase(), i === "PM" && a < 12 ? a += 12 : i === "AM" && a === 12 && (a = 12)) : a === 0 ? (i = "AM", a = 12) : a < 12 ? i = "AM" : a === 12 ? i = "PM" : (i = "PM", a -= 12), {
-    hour: a.toString().padStart(2, "0"),
-    minute: u.toString().padStart(2, "0"),
+  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), {
+    hour: l.toString().padStart(2, "0"),
+    minute: d.toString().padStart(2, "0"),
     meridian: i
   });
 }
-const rs = C(
+const rs = v(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1816,8 +1834,8 @@ const rs = C(
      * @param {Event} e
      */
     handleInputChange(t) {
-      let e = t.target.value.replace(/[^\d]/g, ""), s = fe(e);
-      const o = me(e);
+      let e = t.target.value.replace(/[^\d]/g, ""), s = me(e);
+      const o = fe(e);
       o.formattedTime && (s = o.formattedTime, this.state.set({
         hour: o.hour,
         minute: o.minute,
@@ -1870,9 +1888,9 @@ const rs = C(
   }
 ), 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 }) => T({ class: "flex flex-auto items-center" }, [
+]), we = ({ title: t }) => I({ class: "flex flex-auto items-center" }, [
   S({ class: "text-lg font-semibold" }, t)
-]), ve = c((t, e) => rt(
+]), Ce = c((t, e) => rt(
   {
     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
@@ -1894,7 +1912,7 @@ const rs = C(
       ])
     ])
   ]
-)), Ce = (t) => _.render(t, app.root), R = {
+)), ve = (t) => _.render(t, app.root), R = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1936,12 +1954,12 @@ class Se extends w {
    * @returns {object}
    */
   render() {
-    const e = (u) => {
-      u.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: r } = R[this.type] || R.default, i = `${this.getMainClass()} ${o} ${s}`, a = this.title || "Dialog Title";
-    return ve({
+    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,
-      title: a,
+      title: l,
       click: e,
       icon: this.icon,
       iconColor: r,
@@ -1983,7 +2001,7 @@ class Se extends w {
    * @returns {void}
    */
   open() {
-    Ce(this), this.panel.showModal(), this.state.open = !0;
+    ve(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -2024,7 +2042,7 @@ class is extends Se {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const as = c((t, e = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
+const ls = 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" }, [
@@ -2032,7 +2050,7 @@ const as = c((t, e = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
           g(t.icon)
         ])
       ]),
-      T({ class: "py-4 text-center" }, [
+      I({ class: "py-4 text-center" }, [
         S({ class: "text-xl font-bold" }, t.title),
         b({ class: "pb-8 text-muted-foreground" }, t.description || ""),
         ...e
@@ -2046,38 +2064,38 @@ export {
   He as C,
   Oe as D,
   es as E,
-  It as F,
+  Tt as F,
   ss as G,
   os as H,
   Ke as I,
   ns as J,
   rs as K,
   Qe as L,
-  Yt as M,
+  At as M,
   Ve as N,
   is as O,
   se as P,
-  ve as Q,
+  Ce as Q,
   Se as R,
   Re as S,
   Ge as T,
-  as as U,
-  vt as a,
+  ls as U,
+  Ct as a,
   Ae as b,
   St as c,
-  Tt as d,
+  It as d,
   Bt as e,
   Ft as f,
   Ye as g,
   je as h,
   Ee as i,
   Mt as j,
-  Ne as k,
+  ze as k,
   K as l,
-  ze as m,
+  Ne as m,
   Ue as n,
   qe as o,
-  zt as p,
+  Nt as p,
   We as q,
   _e as r,
   Je as s,