@base-framework/ui 1.0.2022 → 1.0.2024

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

@@ -1,13 +1,13 @@
-import { Div as n, H5 as X, P as b, I as x, Li as q, Span as a, Ul as Y, Button as m, OnState as D, Label as A, H2 as S, Form as Z, Header as F, Footer as M, A as V, H3 as ee, Checkbox as te, Input as f, Img as _, Nav as se, UseParent as W, OnStateOpen as P, Time as oe, Dialog as ne } from "@base-framework/atoms";
-import { Atom as c, Component as y, Html as O, Dom as re, base as le, Data as T, Builder as G, Jot as w, Events as p, DateTime as L } from "@base-framework/base";
-import { P as I, b as ie, R as ae } from "./range-calendar-6CLMTieN.js";
-import { C as ce, F as ue } from "./form-group-BB7dLJir.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 u } from "./icons.es.js";
-import { Timer as de, List as he, DynamicTime as fe } from "@base-framework/organisms";
-import { a as C } from "./image-BB__4s0g.js";
-import { F as j } from "./format-BmrNQptv.js";
-const z = {
+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: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -33,20 +33,20 @@ const z = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, me = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
-  x({ html: e })
-]), ge = (e) => X({ class: "font-semibold" }, e), pe = (e) => b({ class: "text-sm text-muted-foreground" }, e), Lt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: r, bgColor: l, iconColor: i } = z[o] || z.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${l} ${r}` }, [
+}, 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: l } = j[o] || j.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${i} ${r}` }, [
     // Icon and content
-    s && me(s, i),
+    s && gt(s, l),
     n({ class: "flex flex-col" }, [
-      ge(e),
-      pe(t)
+      pt(t),
+      bt(e)
     ])
   ]);
 });
-class At extends y {
+class Oe extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -62,50 +62,50 @@ class At extends y {
    */
   remove() {
     this.prepareDestroy(), this.removeContext();
-    const t = this.panel, s = this.removingClass;
+    const e = this.panel, s = this.removingClass;
     if (!s) {
-      O.removeElement(t);
+      A.removeElement(e);
       return;
     }
-    re.addClass(t, s), le.on("animationend", t, (o) => O.removeElement(t));
+    it.addClass(e, s), lt.on("animationend", e, (o) => A.removeElement(e));
   }
 }
-const be = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), xe = (e) => a({ class: "flex w-4 h-4", html: e }), ve = (e) => a({ class: "flex-auto" }, e), ye = (e, t) => q({
+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: () => t(e)
+  click: () => e(t)
 }, [
-  e.icon && xe(e.icon),
-  ve(e.label),
-  e.shortcut && be(e.shortcut)
-]), we = (e, t) => Y({ class: "grid gap-2" }, [
-  e.map((s) => ye(s, t))
-]), Ce = (e) => n({ class: "w-full z-10" }, [
+  t.icon && yt(t.icon),
+  wt(t.label),
+  t.shortcut && xt(t.shortcut)
+]), vt = (t, e) => q({ class: "grid gap-2" }, [
+  t.map((s) => Ct(s, e))
+]), St = (t) => n({ class: "w-full z-10" }, [
   n({
     class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
-    for: ["groups", (t) => we(t, e)]
+    for: ["groups", (e) => vt(e, t)]
   })
-]), Se = ({ label: e, icon: t, 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
 }, [
-  e && a(e),
-  t && x({ html: t })
-]), Ie = ({ onSelect: e }) => n([
-  D(
+  t && a(t),
+  e && x({ html: e })
+]), kt = ({ onSelect: t }) => n([
+  T(
     "open",
-    (t, s, o) => t ? new I({
+    (e, s, o) => e ? new D({
       cache: "dropdown",
       parent: o,
       button: o.button
     }, [
-      Ce(e)
+      St(t)
     ]) : null
   )
 ]);
-class Mt extends y {
+class Ae extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -120,7 +120,7 @@ class Mt extends y {
    * @returns {Data}
    */
   setData() {
-    return new T({
+    return new B({
       groups: this.groups || []
     });
   }
@@ -149,8 +149,8 @@ class Mt extends y {
    * @param {object} item - The selected item object
    * @returns {void}
    */
-  handleSelect(t) {
-    this.state.selectedItem = t, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(t);
+  handleSelect(e) {
+    this.state.selectedItem = e, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(e);
   }
   /**
    * Renders the Dropdown component.
@@ -159,42 +159,42 @@ class Mt extends y {
    */
   render() {
     return n({ class: "relative" }, [
-      Se({
+      Dt({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      Ie({ onSelect: this.handleSelect.bind(this) })
+      kt({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const ke = c((e, t) => n({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), De = c((e, t) => A({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Fe = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Te = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), Pt = c((e, t = []) => ce({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
-  e.title && S({ class: "text-lg font-semibold py-4 px-6" }, e.title),
-  e.description && b({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
-  ...t
-])), Ot = c((e, t = []) => ue({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
-  n({ class: "flex flex-col gap-y-6" }, t)
-])), jt = c((e, t = []) => {
-  const s = e.border ? "border-t" : "";
-  return n({ ...e, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${e.class || ""}` }, t);
-}), $e = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", J = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = J(o.children, t, s)), !o.required) ? o : $e(o) ? {
+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
+])), je = c((t, e = []) => ut({ label: t.label, description: t.description, class: "py-4 px-6", border: t.border }, [
+  n({ class: "flex flex-col gap-y-6" }, e)
+])), Ee = c((t, e = []) => {
+  const s = t.border ? "border-t" : "";
+  return n({ ...t, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${t.class || ""}` }, e);
+}), $t = (t) => t.tag === "input" || t.tag === "select" || t.tag === "textarea", J = (t, e, s) => t.map((o) => !o || (o.children && o.children.length > 0 && (o.children = J(o.children, e, s)), !o.required) ? o : $t(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
-  input: t
-} : o), Be = c((e, t) => {
-  const r = J(t, (l) => {
-    l.target.checkValidity() && e.setError(null);
-  }, (l) => {
-    e.setError(l.target.validationMessage);
+  input: e
+} : o), Mt = c((t, e) => {
+  const r = J(e, (i) => {
+    i.target.checkValidity() && t.setError(null);
+  }, (i) => {
+    t.setError(i.target.validationMessage);
   });
   return n({
-    ...e,
+    ...t,
     class: "w-full"
   }, r);
-}), zt = C(
+}), ze = v(
   {
     /**
      * The initial state of the FormField.
@@ -215,70 +215,82 @@ const ke = c((e, t) => n({ ...e, class: "flex flex-auto flex-col gap-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 t = this.name, e = this.getId(`${t}`), { label: s, description: o } = this, r = (i) => {
+        this.state.error = i, this.state.hasError = !!i;
       };
       return n({ class: "flex flex-auto gap-y-4" }, [
-        ke([
-          De({ htmlFor: t }, s),
-          Be({
-            id: t,
-            name: e,
+        Tt([
+          It({ htmlFor: e }, s),
+          Mt({
+            id: e,
+            name: t,
             value: this.state.value,
             setError: r
           }, this.children),
-          o && Fe({ id: this.getId("description") }, o),
-          n({ onState: ["error", (l) => l && Te(l)] })
+          o && Bt({ id: this.getId("description") }, o),
+          n({ onState: ["error", (i) => i && Ft(i)] })
         ])
       ]);
     }
   }
-), Le = (e, t, s = null) => {
-  e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
+), Pt = (t, e, s = null) => {
+  t.target.checkValidity() && (t.preventDefault(), s && s(t, e));
 }, K = c(
-  (e, t) => Z({ ...e, submit: (s, o) => Le(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), Et = c((e, t) => n({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Nt = c((e, t = []) => n({ class: "flex flex-col gap-y-3 py-4" }, [
-  e.title && S({ class: "font-semibold" }, e.title),
-  ...t
-])), Ut = (e, t) => n({ class: "flex justify-between" }, [
-  a({ class: "text-muted-foreground" }, e),
-  a(t)
-]), Rt = (e, t) => n({ class: "flex" }, [
-  a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
-  a(t)
-]), Ae = ({ title: e, description: t, back: s, icon: o, options: r = [] }) => F({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10 min-w-0" }, [
+  (t, e) => tt({ ...t, submit: (s, o) => Pt(s, o, t.submit), class: `w-full ${t.class ?? ""}` }, e)
+), Ne = c((t, e) => n({ ...t, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${t.class || ""}` }, e)), Ue = c((t, e = []) => n({ class: "flex flex-col gap-y-3 py-4" }, [
+  t.title && S({ class: "font-semibold" }, t.title),
+  ...e
+])), Re = (t, e) => n({ class: "flex justify-between" }, [
+  a({ class: "text-muted-foreground" }, t),
+  a(e)
+]), He = (t, e) => n({ class: "flex" }, [
+  a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, t),
+  a(e)
+]), Lt = c(({ title: t, description: e, back: s, icon: o, options: r = [] }) => I({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10 min-w-0" }, [
   /**
-   * Back Button
+   * Back Button (Mobile Only)
    */
-  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: (i, l) => l.close()
+  }),
   /**
-   * Icon
+   * Icon Container
    */
-  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" }, [
-      S({ class: "text-lg font-semibold m-0 truncate" }, e),
-      t && n({ class: "text-sm text-muted-foreground truncate" }, t)
+      S({ class: "text-lg font-semibold m-0 truncate" }, t),
+      e && n({ class: "text-sm text-muted-foreground truncate" }, e)
     ]),
     n({ class: "flex flex-none items-center gap-2" }, r)
   ])
-]), Me = c((e, t) => 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 ${e.class}`,
+  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) => {
     s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
   }
 }, [
-  K({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4 min-w-0", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
-    Ae(e),
-    n({ class: "modal-body flex flex-grow flex-col py-0 px-6 z-0", cache: "modalBody" }, t),
-    !e.hideFooter && M({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
+  K({
+    class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4 min-w-0",
+    submit: (s, o) => t.onSubmit && t.onSubmit(o),
+    cache: "modalContent",
+    ...t.gestureHandlers
+  }, [
+    Lt(t),
+    n({ class: "modal-body flex flex-grow flex-col py-0 px-6 z-0 overflow-y-auto", cache: "modalBody" }, e),
+    !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)
   ])
-])), Pe = (e) => G.render(e, app.root);
-class Ht extends y {
+])), Ot = (t) => _.render(t, app.root);
+class At extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -293,18 +305,18 @@ class Ht extends y {
    * @returns {object}
    */
   render() {
-    const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Me(
+    const e = this.getMainClass(), s = this.title || "", o = this.description || null;
+    return Q(
       {
-        class: t,
+        class: e,
         title: s,
         description: o,
         options: this.headerOptions(),
         buttons: this.getButtons(),
         hideFooter: this.hideFooter,
         onSubmit: (r) => {
-          let l = !0;
-          this.onSubmit && (l = this.onSubmit(r)), l !== !1 && this.destroy();
+          let i = !0;
+          this.onSubmit && (i = this.onSubmit(r)), i !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -322,8 +334,8 @@ class Ht extends y {
     return {
       open: {
         state: !1,
-        callBack: (t) => {
-          t || this.destroy();
+        callBack: (e) => {
+          e || this.destroy();
         }
       }
     };
@@ -353,8 +365,8 @@ class Ht extends y {
    * @param {object} element
    * @returns {boolean}
    */
-  isOutsideClick(t) {
-    return !this.panel.contains(t);
+  isOutsideClick(e) {
+    return !this.panel.contains(e);
   }
   /**
    * This will get the size class.
@@ -384,6 +396,8 @@ class Ht extends y {
         return "right right-0";
       case "left":
         return "left left-0";
+      case "drawer":
+        return "drawer";
       default:
         return "";
     }
@@ -401,7 +415,7 @@ class Ht extends y {
    *
    * @param {object} container
    */
-  setContainer(t) {
+  setContainer(e) {
     this.container = app.root;
   }
   /**
@@ -410,7 +424,7 @@ class Ht extends y {
    * @returns {void}
    */
   open() {
-    Pe(this), this.showModal();
+    Ot(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -439,6 +453,252 @@ class Ht extends y {
     this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
   }
 }
+class Yt {
+  /**
+   * 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, this.gesture = null, this.modalContent = null, this.modalBody = null;
+  }
+  /**
+   * Gets extra props to pass to ModalContainer
+   *
+   * @returns {object}
+   */
+  getContainerProps() {
+    const e = {};
+    return this.swipeToClose && this.gesture && (e.gestureHandlers = this.getGestureHandlers()), e;
+  }
+  /**
+   * Renders the drawer with gesture handlers
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.getMainClass(), s = this.title || "", o = this.description || null, r = this.getContainerProps();
+    return Q(
+      {
+        class: e,
+        title: s,
+        description: o,
+        options: this.headerOptions(),
+        buttons: this.getButtons(),
+        hideFooter: this.hideFooter,
+        onSubmit: (i) => {
+          let l = !0;
+          this.onSubmit && (l = this.onSubmit(i)), l !== !1 && this.destroy();
+        },
+        icon: this.icon,
+        back: this.back ?? !1,
+        aria: { expanded: ["open"] },
+        ...r
+      },
+      this.children
+    );
+  }
+  /**
+   * Shows the modal and initializes gesture handling
+   *
+   * @protected
+   * @returns {void}
+   */
+  showModal() {
+    super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new Yt({
+      modal: this.panel,
+      modalContent: this.modalContent,
+      modalBody: this.modalBody,
+      closeThreshold: this.closeThreshold,
+      snapThreshold: this.snapThreshold,
+      onClose: () => this.destroy()
+    }));
+  }
+  /**
+   * Gets gesture event handlers for modal content.
+   * Returns event props to be spread onto the modal-content element.
+   *
+   * @returns {object}
+   */
+  getGestureHandlers() {
+    return !this.swipeToClose || !this.gesture || !this.gesture.isMobile() ? {} : {
+      touchstart: (e) => this.gesture.handleTouchStart(e),
+      touchmove: (e) => this.gesture.handleTouchMove(e),
+      touchend: (e) => this.gesture.handleTouchEnd(e)
+    };
+  }
+  /**
+   * Cleans up before destroy
+   *
+   * @protected
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.gesture && (this.gesture.destroy(), this.gesture = null), super.beforeDestroy();
+  }
+}
 const E = {
   info: {
     bgColor: "bg-muted/10",
@@ -465,22 +725,22 @@ const E = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Oe = (e) => F({ class: "flex justify-center" }, [
-  ee({ class: "text-lg font-bold mb-0" }, e)
-]), je = c(({ href: e, class: t }, 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 ${t}`,
-  href: e,
+}, 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}`,
+  href: t,
   animateIn: "pullRightIn",
   animateOut: "pullRight",
   role: "alert"
-}, s)), ze = c(({ close: e, class: t }, s) => n({
-  class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
-  click: () => e(),
+}, 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 Ee extends y {
+class Nt extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -503,14 +763,14 @@ class Ee extends y {
    * @returns {object}
    */
   render() {
-    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, l = this.getChildren(o);
-    return r ? je({
+    const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, i = this.getChildren(o);
+    return r ? Et({
       href: r,
-      class: `${t} ${s}`
-    }, l) : ze({
+      class: `${e} ${s}`
+    }, i) : zt({
       close: this.close.bind(this),
-      class: `${t} ${s}`
-    }, l);
+      class: `${e} ${s}`
+    }, i);
   }
   /**
    * This will be called after the component is set up.
@@ -518,8 +778,8 @@ class Ee extends y {
    * @returns {void}
    */
   afterSetup() {
-    const t = this.duration;
-    t !== "infinite" && (this.timer = new de(t, this.close.bind(this)), this.timer.start());
+    const e = this.duration;
+    e !== "infinite" && (this.timer = new ht(e, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -527,8 +787,8 @@ class Ee extends y {
    * @returns {object}
    */
   getTypeStyles() {
-    const t = this.type || "default";
-    return E[t] || E.default;
+    const e = this.type || "default";
+    return E[e] || E.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -549,16 +809,16 @@ class Ee extends y {
    * @param {string} iconColor
    * @returns {array}
    */
-  getChildren(t) {
+  getChildren(e) {
     return [
       n({ class: "flex items-start" }, [
-        this.icon && x({ class: `mr-4 ${t}`, html: this.icon }),
+        this.icon && x({ class: `mr-4 ${e}`, 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 && Oe(this.title)
+            this.title && jt(this.title)
           ]),
           b({ 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) && L({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
       h({
@@ -575,12 +835,12 @@ class Ee extends y {
    * @param {object} e The event object.
    * @returns {void}
    */
-  close(t) {
-    t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
+  close(e) {
+    e && e.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Ne = 0;
-class qt extends y {
+let Ut = 0;
+class Ve extends w {
   /**
    * This will render the component.
    *
@@ -588,11 +848,11 @@ class qt extends y {
    */
   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 he({
+      new mt({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new Ee(t)
+        rowItem: (e) => new Nt(e)
       })
     ]);
   }
@@ -602,8 +862,8 @@ class qt extends y {
    * @param {object} props
    * @returns {void}
    */
-  addNotice(t = {}) {
-    t.id = Ne++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+  addNotice(e = {}) {
+    e.id = Ut++, e.callBack = () => this.removeNotice(e), this.list.append([e]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -611,29 +871,29 @@ class qt extends y {
    * @param {object} notice
    * @returns {void}
    */
-  removeNotice(t) {
-    this.list.delete(t.id), this.list.isEmpty() && this.panel.hidePopover();
+  removeNotice(e) {
+    this.list.delete(e.id), this.list.isEmpty() && this.panel.hidePopover();
   }
 }
-const N = globalThis.matchMedia, $ = c(({ value: e, label: t, 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: e }],
-  dataSet: ["method", ["state", e, "active"]],
+  onState: ["method", { active: t }],
+  dataSet: ["method", ["state", t, "active"]],
   click: (o, { state: r }) => {
-    r.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ue(e);
+    r.method = t, localStorage.setItem("theme", t), t === "system" && localStorage.removeItem("theme"), Rt(t);
   }
 }, [
   g(s),
-  a(t)
-])), Ue = (e) => {
-  const t = document.documentElement;
-  if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + e + ")").matches) {
-    t.classList.add(e);
+  a(e)
+])), Rt = (t) => {
+  const e = document.documentElement;
+  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 = e === "light" ? "dark" : "light";
-  t.classList.remove(s);
-}, Yt = w(
+  const s = t === "light" ? "dark" : "light";
+  e.classList.remove(s);
+}, Ge = C(
   {
     /**
      * This will render the component.
@@ -643,9 +903,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 })
+          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 })
         ])
       ]);
     },
@@ -660,7 +920,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       };
     }
   }
-), Vt = C(
+), We = v(
   {
     /**
      * The initial state of the Toggle.
@@ -687,14 +947,14 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, 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: (t, { state: s }) => {
-          s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, t, this);
+        click: (e, { state: s }) => {
+          s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, e, this);
         }
       }, [
-        te({
+        st({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
           /**
@@ -717,22 +977,22 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
   OFFLINE: "offline",
   BUSY: "busy",
   AWAY: "away"
-}, v = {
+}, y = {
   ONLINE: "bg-green-500",
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Re = (e = "") => (e = e.toUpperCase(), v[e] || v.OFFLINE), _t = (e) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Re(e)}`
-}), Wt = ({ propName: e = "status" } = {}) => n({
+}, Ht = (t = "") => (t = t.toUpperCase(), y[t] || y.OFFLINE), _e = (t) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ht(t)}`
+}), Je = ({ propName: t = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
-  onSet: [e, {
-    [v.ONLINE]: k.ONLINE,
-    [v.OFFLINE]: k.OFFLINE,
-    [v.BUSY]: k.BUSY,
-    [v.AWAY]: k.AWAY
+  onSet: [t, {
+    [y.ONLINE]: k.ONLINE,
+    [y.OFFLINE]: k.OFFLINE,
+    [y.BUSY]: k.BUSY,
+    [y.AWAY]: k.AWAY
   }]
-}), He = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1 && e.indexOf("blob:") === -1, Gt = w(
+}), qt = (t) => t.indexOf(".") === -1 && t.indexOf("[[") === -1 && t.indexOf("blob:") === -1, Ke = C(
   {
     /**
      * Get the initial state for the component.
@@ -751,8 +1011,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {void}
      */
     openFileBrowse() {
-      const e = this.input;
-      e && (e.value = "", p.trigger("click", e));
+      const t = this.input;
+      t && (t.value = "", p.trigger("click", t));
     },
     /**
      * Get the URL for the uploaded file.
@@ -760,8 +1020,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @param {File} file - The file to get the URL for.
      * @returns {string} The object URL for the file.
      */
-    getFileUrl(e) {
-      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(e);
+    getFileUrl(t) {
+      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(t);
     },
     /**
      * Render the component.
@@ -769,17 +1029,17 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object} Rendered component
      */
     render() {
-      const e = "image-upload", t = this.onChange || null;
+      const t = "image-upload", e = this.onChange || null;
       return n({ class: "flex-none items-center" }, [
-        f({
-          id: e,
+        m({
+          id: t,
           cache: "input",
           type: "file",
           accept: "image/*",
           class: "hidden",
           change: (s) => {
             const o = s.target.files?.[0];
-            o && t && (this.state.loaded = !1, t(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
+            o && e && (this.state.loaded = !1, e(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
           }
         }),
         n({
@@ -788,13 +1048,13 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          D("loaded", (s) => s === !1 || He(this.src) ? A({
-            htmlFor: e,
+          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(u.upload),
             n("Upload Image")
-          ]) : _({
+          ]) : G({
             // @ts-ignore
             src: this.src,
             class: "absolute inset-0 w-full h-full object-cover rounded-full"
@@ -803,7 +1063,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       ]);
     }
   }
-), Jt = w(
+), Qe = C(
   {
     /**
      * Get the initial state for the component.
@@ -822,8 +1082,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {void}
      */
     openFileBrowse() {
-      const e = this.input;
-      e && (e.value = "", p.trigger("click", e));
+      const t = this.input;
+      t && (t.value = "", p.trigger("click", t));
     },
     /**
      * Get the URL for the uploaded file.
@@ -831,8 +1091,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @param {File} file - The file to get the URL for.
      * @returns {string} The object URL for the file.
      */
-    getFileUrl(e) {
-      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(e);
+    getFileUrl(t) {
+      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(t);
     },
     /**
      * Render the component.
@@ -840,17 +1100,17 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object} Rendered component
      */
     render() {
-      const e = "logo-upload", t = this.onChange || null;
+      const t = "logo-upload", e = this.onChange || null;
       return n({ class: "flex-none items-center" }, [
-        f({
-          id: e,
+        m({
+          id: t,
           cache: "input",
           type: "file",
           accept: "image/*",
           class: "hidden",
           change: (s) => {
             const o = s.target.files?.[0];
-            o && t && (this.state.loaded = !1, t(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
+            o && e && (this.state.loaded = !1, e(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
           }
         }),
         n({
@@ -859,14 +1119,14 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          D(
+          T(
             "loaded",
-            (s) => s ? _({
+            (s) => s ? G({
               // @ts-ignore
               src: this.src,
               class: "absolute inset-0 w-full h-full object-cover rounded-full"
-            }) : A({
-              htmlFor: e,
+            }) : P({
+              htmlFor: t,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
               g(u.upload),
@@ -877,22 +1137,22 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       ]);
     }
   }
-), qe = (e, t) => V(
+), Vt = (t, e) => V(
   {
-    href: e,
-    "aria-current": t === "Breadcrumb" && "page",
+    href: t,
+    "aria-current": e === "Breadcrumb" && "page",
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [a(t)]
-), Ye = () => g({
+  [a(e)]
+), Gt = () => g({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), Ve = (e) => n({ class: "flex items-center" }, [
-  e.href ? qe(e.href, e.label) : a(e.label),
-  e.separator && Ye()
-]), Kt = w(
+}, u.chevron.single.right), Wt = (t) => n({ class: "flex items-center" }, [
+  t.href ? Vt(t.href, t.label) : a(t.label),
+  t.separator && Gt()
+]), Xe = C(
   {
     /**
      * Set initial data
@@ -900,7 +1160,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new T({
+      return new B({
         // @ts-ignore
         items: this.items || []
       });
@@ -911,8 +1171,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object}
      */
     render() {
-      const e = this.data.items.length - 1;
-      return se(
+      const t = this.data.items.length - 1;
+      return ot(
         {
           "aria-label": "Breadcrumb",
           class: "flex items-center gap-x-1 text-sm"
@@ -921,17 +1181,17 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
           n({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => Ve({
-              href: t.href,
-              label: t.label,
-              separator: s < e
+            for: ["items", (e, s) => Wt({
+              href: e.href,
+              label: e.label,
+              separator: s < t
             })]
           })
         ]
       );
     }
   }
-), U = {
+), N = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -940,21 +1200,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"
-}, _e = (e) => U[e] || U.default, We = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+}, _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": e,
-      "shadow-md": e
+      "bg-primary": t,
+      "shadow-md": t
     }],
     click: (s, { data: o, onClick: r }) => {
-      o.activeIndex = e, r && r(e);
+      o.activeIndex = t, r && r(t);
     }
   })
-]), Ge = (e, t) => Array.from({ length: e }, (s, o) => We({
+]), Kt = (t, e) => Array.from({ length: t }, (s, o) => Jt({
   index: o,
-  size: t
-})), Qt = w(
+  size: e
+})), Ze = C(
   {
     /**
      * Defines component data (props).
@@ -962,7 +1222,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new T({
+      return new B({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -976,46 +1236,46 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = _e(this.size || "sm"), s = Ge(this.data.count, t);
+      const t = this.gap || "gap-2", e = _t(this.size || "sm"), s = Kt(this.data.count, e);
       return n(
         { class: "flex justify-center items-center py-2" },
         [
-          n({ class: `flex ${e}` }, s)
+          n({ class: `flex ${t}` }, s)
         ]
       );
     }
   }
-), Je = ({ toggleDropdown: e }) => 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: e
+    click: t
   },
   [
-    a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    a({ onState: ["selectedLabel", (e) => e || "Select item..."] }),
     x({ html: u.chevron.upDown })
   ]
-), Ke = (e, t, s) => q({
+), Xt = (t, e, s) => H({
   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 }]
+  click: () => e(t),
+  onState: [s, "selectedValue", { "bg-secondary": t.value }]
 }, [
-  e.icon && a({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, e.icon)]),
-  a({ class: "text-base font-normal" }, e.label)
-]), Qe = (e, t) => n({ class: "w-full border rounded-md" }, [
-  Y({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Ke(s, e, t)] })
-]), Xe = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
-  D(
+  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" }, [
+  T(
     "open",
-    (s, o, r) => s ? new I({
+    (s, o, r) => s ? new D({
       cache: "dropdown",
       parent: r,
       button: r.button
     }, [
-      Qe(e, t)
+      Zt(t, e)
     ]) : null
   )
-]), Xt = w(
+]), ts = C(
   {
     /**
      * This will set up the data.
@@ -1023,7 +1283,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new T({
+      return new B({
         // @ts-ignore
         items: this.items || []
       });
@@ -1046,9 +1306,9 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @param {object} item
      * @returns {void}
      */
-    setStateItem(e) {
-      const t = this.state;
-      t.selectedValue = e.value, t.selectedLabel = e.label, t.open = !1;
+    setStateItem(t) {
+      const e = this.state;
+      e.selectedValue = t.value, e.selectedLabel = t.label, e.open = !1;
     },
     /**
      * Handles the selection of an item.
@@ -1056,8 +1316,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @param {object} item
      * @returns {void}
      */
-    select(e) {
-      this.setStateItem(e), typeof this.onSelect == "function" && this.onSelect(e, this.parent);
+    select(t) {
+      this.setStateItem(t), typeof this.onSelect == "function" && this.onSelect(t, this.parent);
     },
     /**
      * Selects the first item in the list.
@@ -1065,8 +1325,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {void}
      */
     selectFirstItem() {
-      const e = this.data.items[0];
-      this.select(e);
+      const t = this.data.items[0];
+      this.select(t);
     },
     /**
      * Toggles the dropdown open state.
@@ -1083,8 +1343,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      */
     after() {
       if (this.selectFirst === !0 && this.state.selectedValue === "") {
-        const e = this.data.items[0];
-        e && this.setStateItem(e);
+        const t = this.data.items[0];
+        t && this.setStateItem(t);
       }
     },
     /**
@@ -1093,11 +1353,11 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object}
      */
     render() {
-      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}` }, [
+      const t = this.class || "", e = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
+      return n({ class: `relative ${s} flex flex-auto flex-col ${e} ${t}` }, [
         // @ts-ignore
-        Je({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        Xe({
+        Qt({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        te({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1105,7 +1365,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, 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
@@ -1117,34 +1377,34 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       ]);
     }
   }
-), Q = ({ icon: e, click: t, ariaLabel: s }) => h({
+), X = ({ icon: t, click: e, ariaLabel: s }) => h({
   variant: "icon",
   class: "flex flex-none",
-  click: t,
-  icon: e,
+  click: e,
+  icon: t,
   "aria-label": s
-}), Ze = ({ click: e }) => Q({
+}), ee = ({ click: t }) => X({
   icon: u.circleMinus,
-  click: e,
+  click: t,
   ariaLabel: "Decrement"
-}), et = ({ click: e }) => Q({
+}), se = ({ click: t }) => X({
   icon: u.circlePlus,
-  click: e,
+  click: t,
   ariaLabel: "Increment"
-}), tt = ({ bind: e, min: t, 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: 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;
+  bind: t,
+  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,
-  min: t,
+  min: e,
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), Zt = C(
+})), es = v(
   {
     /**
      * Initial state for the counter component.
@@ -1155,7 +1415,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       return {
         count: {
           state: this.initialCount ?? 0,
-          callBack: (e) => this.change && this.change(e)
+          callBack: (t) => this.change && this.change(t)
         }
       };
     },
@@ -1165,47 +1425,47 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object}
      */
     render() {
-      const e = this.class ?? "";
-      return n({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${e}` }, [
-        Ze({ click: () => this.state.decrement("count") }),
-        tt({
+      const t = this.class ?? "";
+      return n({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${t}` }, [
+        ee({ click: () => this.state.decrement("count") }),
+        oe({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        et({ click: () => this.state.increment("count") })
+        se({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), st = (e) => {
-  let t = "";
-  return e.length > 0 && (t = e.substring(0, 2), e.length > 2 && (t += "/" + e.substring(2, 4), e.length > 4 && (t += "/" + e.substring(4, 8)))), t;
-}, ot = (e) => {
-  if (e.length !== 8)
+), ne = (t) => {
+  let e = "";
+  return t.length > 0 && (e = t.substring(0, 2), t.length > 2 && (e += "/" + t.substring(2, 4), t.length > 4 && (e += "/" + t.substring(4, 8)))), e;
+}, re = (t) => {
+  if (t.length !== 8)
     return null;
-  const t = parseInt(e.substring(0, 2), 10), s = parseInt(e.substring(2, 4), 10), o = parseInt(e.substring(4, 8), 10);
-  return t >= 1 && t <= 12 && s >= 1 && s <= 31 && o >= 1900 ? `${o}-${t.toString().padStart(2, "0")}-${s.toString().padStart(2, "0")}` : null;
-}, nt = ({ bind: e, required: t }) => f({
+  const e = parseInt(t.substring(0, 2), 10), s = parseInt(t.substring(2, 4), 10), o = parseInt(t.substring(4, 8), 10);
+  return e >= 1 && e <= 12 && s >= 1 && s <= 31 && o >= 1900 ? `${o}-${e.toString().padStart(2, "0")}-${s.toString().padStart(2, "0")}` : null;
+}, ie = ({ bind: t, required: e }) => m({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
-  bind: e,
-  required: t
-}), rt = ({ placeholder: e, handleInputChange: t, handleInputFocus: s }) => f({
+  bind: t,
+  required: e
+}), le = ({ placeholder: t, handleInputChange: e, handleInputFocus: s }) => m({
   cache: "dateInput",
   class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
-  placeholder: e || "mm/dd/yyyy",
-  input: t,
+  placeholder: t || "mm/dd/yyyy",
+  input: e,
   focus: s,
-  onState: ["selectedDate", (o) => o ? L.format("standard", o) : ""]
-}), lt = ({ bind: e, required: t, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: l }) => n(
+  onState: ["selectedDate", (o) => o ? M.format("standard", o) : ""]
+}), 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"
   },
   [
-    nt({ bind: e, required: t }),
-    rt({ placeholder: l, handleInputChange: o, handleInputFocus: r }),
-    m(
+    ie({ bind: t, required: e }),
+    le({ placeholder: i, handleInputChange: o, handleInputFocus: r }),
+    f(
       {
         class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
         click: s
@@ -1215,20 +1475,20 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       ]
     )
   ]
-), it = ({ handleDateSelect: e, blockPriorDates: t }) => P(
-  (s, o, r) => new I({
+), ce = ({ handleDateSelect: t, blockPriorDates: e }) => O(
+  (s, o, r) => new D({
     cache: "dropdown",
     parent: r,
     button: r.panel,
     size: "fit"
   }, [
-    new ie({
+    new at({
       selectedDate: r.state.selectedDate,
-      selectedCallBack: e,
-      blockPriorDates: t
+      selectedCallBack: t,
+      blockPriorDates: e
     })
   ])
-), es = C(
+), ss = v(
   {
     /**
      * The initial state of the DatePicker.
@@ -1255,10 +1515,10 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      *
      * @param {Event} e
      */
-    handleInputChange(e) {
-      const s = e.target.value.replace(/\D/g, "");
-      e.target.value = st(s);
-      const o = ot(s);
+    handleInputChange(t) {
+      const s = t.target.value.replace(/\D/g, "");
+      t.target.value = ne(s);
+      const o = re(s);
       o && (this.state.selectedDate = o, this.input.value = o, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(o));
     },
     /**
@@ -1266,16 +1526,16 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      *
      * @param {Event} e
      */
-    handleInputFocus(e) {
-      e.target.select();
+    handleInputFocus(t) {
+      t.target.select();
     },
     /**
      * Handles date selection from calendar.
      *
      * @param {string} date
      */
-    handleDateSelect(e) {
-      this.state.selectedDate = e, this.state.open = !1, this.input.value = e, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(e);
+    handleDateSelect(t) {
+      this.state.selectedDate = t, this.state.open = !1, this.input.value = t, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(t);
     },
     /**
      * Toggles the calendar popover.
@@ -1283,8 +1543,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @param {Event} e
      * @param {object} context
      */
-    toggleOpen(e, { state: t }) {
-      t.toggle("open");
+    toggleOpen(t, { state: e }) {
+      e.toggle("open");
     },
     /**
      * Renders the DatePicker component.
@@ -1295,7 +1555,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          lt({
+          ae({
             toggleOpen: this.toggleOpen.bind(this),
             bind: this.bind,
             required: this.required,
@@ -1303,7 +1563,7 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
             handleInputFocus: this.handleInputFocus.bind(this),
             placeholder: this.placeholder
           }),
-          it({
+          ce({
             handleDateSelect: this.handleDateSelect.bind(this),
             blockPriorDates: this.blockPriorDates || !1
           })
@@ -1311,35 +1571,35 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
       );
     }
   }
-), at = ({ bind: e, required: t }) => 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: e,
-  required: t
-}), ct = ({ bind: e, required: t, toggleOpen: s }) => m({
+  bind: t,
+  required: e
+}), 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
 }, [
-  at({ bind: e, required: t }),
+  de({ bind: t, required: e }),
   W(({ state: o }) => [
-    a(j.date(["[[start]]", o], "Start Date")),
+    a(Y.date(["[[start]]", o], "Start Date")),
     a(" - "),
-    a(j.date(["[[end]]", o], "End Date"))
+    a(Y.date(["[[end]]", o], "End Date"))
   ]),
   x({ html: u.calendar.days })
-]), ut = ({ handleDateSelect: e, blockPriorDates: t }) => P((s, o, r) => new I({
+]), he = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, r) => new D({
   cache: "dropdown",
   parent: r,
   button: r.panel,
   size: "xl"
 }, [
-  new ae({
+  new ct({
     startDate: r.state.start,
     endDate: r.state.end,
-    onRangeSelect: e,
-    blockPriorDates: t
+    onRangeSelect: t,
+    blockPriorDates: e
   })
-])), ts = C(
+])), os = v(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1361,8 +1621,8 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      */
     after() {
       if (this.input.value) {
-        const e = this.input.value.split("-");
-        this.state.start = e[0], this.state.end = e[1];
+        const t = this.input.value.split("-");
+        this.state.start = t[0], this.state.end = t[1];
       }
     },
     /**
@@ -1371,76 +1631,76 @@ const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object}
      */
     render() {
-      const e = (s, { state: o }) => o.toggle("open"), t = (s, o) => {
+      const t = (s, { state: o }) => o.toggle("open"), e = (s, o) => {
         this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
       };
       return n({ class: "relative w-full max-w-[320px]" }, [
-        ct({
-          toggleOpen: e,
+        ue({
+          toggleOpen: t,
           bind: this.bind,
           required: this.required
         }),
-        ut({
-          handleDateSelect: t,
+        he({
+          handleDateSelect: e,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), ss = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => oe([
-  new fe({
-    dateTime: e,
+), ns = ({ dateTime: t = "", remoteTimeZone: e = "America/Denver", filter: s = null }) => nt([
+  new ft({
+    dateTime: t,
     filter: s || ((o) => {
-      const r = L.getLocalTime(o, !0, !1, t);
-      return L.getTimeFrame(r);
+      const r = M.getLocalTime(o, !0, !1, e);
+      return M.getTimeFrame(r);
     })
   })
 ]);
-function dt(e) {
-  let t = "";
-  return e.length > 0 && (t = e.substring(0, 2), e.length > 2 && (t += ":" + e.substring(2, 4))), 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 ht(e) {
-  if (e.length < 4)
+function fe(t) {
+  if (t.length < 4)
     return { formattedTime: null, hour: null, minute: null, meridian: null };
-  const t = parseInt(e.substring(0, 2), 10), s = parseInt(e.substring(2, 4), 10);
-  if (t < 0 || t > 23 || s < 0 || s > 59)
+  const e = parseInt(t.substring(0, 2), 10), s = parseInt(t.substring(2, 4), 10);
+  if (e < 0 || e > 23 || s < 0 || s > 59)
     return { formattedTime: null, hour: null, minute: null, meridian: null };
-  let o = t, r = "AM";
-  return t === 0 ? o = 12 : t > 12 ? (o = t - 12, r = "PM") : t === 12 && (r = "PM"), {
+  let o = e, r = "AM";
+  return e === 0 ? o = 12 : e > 12 ? (o = e - 12, r = "PM") : e === 12 && (r = "PM"), {
     formattedTime: `${o.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")} ${r}`,
     hour: o.toString().padStart(2, "0"),
     minute: s.toString().padStart(2, "0"),
     meridian: r
   };
 }
-function ft({ bind: e, required: t }) {
-  return f({
+function ge({ bind: t, required: e }) {
+  return m({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
-    bind: e,
-    required: t
+    bind: t,
+    required: e
   });
 }
-function mt({ placeholder: e, handleInputChange: t, handleInputFocus: s }) {
-  return f({
+function pe({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
+  return m({
     cache: "timeInput",
     class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
-    placeholder: e || "hh:mm AM/PM",
-    input: t,
+    placeholder: t || "hh:mm AM/PM",
+    input: e,
     focus: s,
     onState: ["selectedTime", (o) => o || ""]
   });
 }
-function gt({ bind: e, required: t, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: l }) {
+function be({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: i }) {
   return n(
     {
       class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
     },
     [
-      ft({ bind: e, required: t }),
-      mt({ placeholder: l, handleInputChange: o, handleInputFocus: r }),
-      m(
+      ge({ bind: t, required: e }),
+      pe({ placeholder: i, handleInputChange: o, handleInputFocus: r }),
+      f(
         {
           class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
           click: s
@@ -1452,23 +1712,23 @@ function gt({ bind: e, required: t, toggleOpen: s, handleInputChange: o, handleI
     ]
   );
 }
-function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: r = !1 }) {
+function $({ items: t, handleTimeSelect: e, state: s, stateValue: o, pad: r = !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();
-      return m({
-        text: i,
+    t.map((i) => {
+      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: () => t({ [o]: i }),
-        onState: [s, o, { "bg-muted": i }]
+        click: () => e({ [o]: l }),
+        onState: [s, o, { "bg-muted": l }]
       });
     })
   );
 }
-function pt({ handleTimeSelect: e }) {
-  return P(
-    (t, s, o) => new I(
+function xe({ handleTimeSelect: t }) {
+  return O(
+    (e, s, o) => new D(
       {
         cache: "dropdown",
         parent: o,
@@ -1483,25 +1743,25 @@ function pt({ handleTimeSelect: e }) {
               { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
               [
                 // Hours column
-                B({
-                  items: Array.from({ length: 12 }, (r, l) => l + 1),
-                  handleTimeSelect: e,
+                $({
+                  items: Array.from({ length: 12 }, (r, i) => i + 1),
+                  handleTimeSelect: t,
                   state: o.state,
                   stateValue: "hour",
                   pad: !0
                 }),
                 // Minutes column
-                B({
-                  items: Array.from({ length: 60 }, (r, l) => l),
-                  handleTimeSelect: e,
+                $({
+                  items: Array.from({ length: 60 }, (r, i) => i),
+                  handleTimeSelect: t,
                   state: o.state,
                   stateValue: "minute",
                   pad: !0
                 }),
                 // AM/PM column
-                B({
+                $({
                   items: ["AM", "PM"],
-                  handleTimeSelect: e,
+                  handleTimeSelect: t,
                   state: o.state,
                   stateValue: "meridian"
                 })
@@ -1513,20 +1773,20 @@ function pt({ handleTimeSelect: e }) {
     )
   );
 }
-function R(e) {
-  if (!e)
+function U(t) {
+  if (!t)
     return { hour: null, minute: null, meridian: null };
-  const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(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, , 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, 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: l
+    meridian: i
   });
 }
-const os = C(
+const rs = v(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1534,11 +1794,11 @@ const os = C(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = R(e);
+      const t = this.selectedTime ?? null, { hour: e, minute: s, meridian: o } = U(t);
       return {
-        selectedTime: e,
+        selectedTime: t,
         open: !1,
-        hour: t,
+        hour: e,
         minute: s,
         meridian: o
       };
@@ -1550,10 +1810,10 @@ const os = C(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: s } = R(this.input.value);
+        const { hour: t, minute: e, meridian: s } = U(this.input.value);
         this.state.set({
-          hour: e,
-          minute: t,
+          hour: t,
+          minute: e,
           meridian: s,
           selectedTime: this.input.value
         });
@@ -1565,39 +1825,39 @@ const os = C(
      * @param {Event} e
      * @param {object} context
      */
-    toggleOpen(e, { state: t }) {
-      t.toggle("open");
+    toggleOpen(t, { state: e }) {
+      e.toggle("open");
     },
     /**
      * Handles direct input changes and formats the time.
      *
      * @param {Event} e
      */
-    handleInputChange(e) {
-      let t = e.target.value.replace(/[^\d]/g, ""), s = dt(t);
-      const o = ht(t);
+    handleInputChange(t) {
+      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,
         meridian: o.meridian,
         selectedTime: o.formattedTime
-      }), this.input.value = o.formattedTime, p.trigger("change", this.input), typeof this.change == "function" && this.change(o.formattedTime)), e.target.value = s;
+      }), this.input.value = o.formattedTime, p.trigger("change", this.input), typeof this.change == "function" && this.change(o.formattedTime)), t.target.value = s;
     },
     /**
      * Handles input focus - select all text for easy editing.
      *
      * @param {Event} e
      */
-    handleInputFocus(e) {
-      e.target.select();
+    handleInputFocus(t) {
+      t.target.select();
     },
     /**
      * Handles time selection from the picker columns.
      *
      * @param {object} params
      */
-    handleTimeSelect({ hour: e, minute: t, meridian: s }) {
-      if (e && (this.state.hour = e), t && (this.state.minute = t), s && (this.state.meridian = s), this.state.hour && this.state.minute && this.state.meridian) {
+    handleTimeSelect({ hour: t, minute: e, meridian: s }) {
+      if (t && (this.state.hour = t), e && (this.state.minute = e), s && (this.state.meridian = s), this.state.hour && this.state.minute && this.state.meridian) {
         const o = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
         this.state.selectedTime = o, this.state.open = !1, this.input.value = o, p.trigger("change", this.input), typeof this.change == "function" && this.change(o);
       }
@@ -1611,7 +1871,7 @@ const os = C(
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          gt({
+          be({
             toggleOpen: this.toggleOpen.bind(this),
             bind: this.bind,
             required: this.required,
@@ -1619,40 +1879,40 @@ const os = C(
             handleInputFocus: this.handleInputFocus.bind(this),
             placeholder: this.placeholder
           }),
-          pt({
+          xe({
             handleTimeSelect: this.handleTimeSelect.bind(this)
           })
         ]
       );
     }
   }
-), bt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
-  g({ size: "lg" }, e)
-]), xt = ({ title: e }) => F({ class: "flex flex-auto items-center" }, [
-  S({ class: "text-lg font-semibold" }, e)
-]), vt = c((e, t) => ne(
+), ye = (t, e) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${e}` }, [
+  g({ size: "lg" }, t)
+]), we = ({ title: t }) => I({ class: "flex flex-auto items-center" }, [
+  S({ class: "text-lg font-semibold" }, t)
+]), Ce = c((t, e) => rt(
   {
     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
-				bottom-4 top-auto inset-auto m-auto md:bottom-0 md:top-0 left-0 right-0 ${e.class}`,
-    click: e.click,
+				bottom-4 top-auto inset-auto m-auto md:bottom-0 md:top-0 left-0 right-0 ${t.class}`,
+    click: t.click,
     aria: { expanded: ["open"] }
   },
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && bt(e.icon, e.iconColor),
+      t.icon && ye(t.icon, t.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
         n({ class: "flex flex-auto flex-col gap-y-2" }, [
-          xt(e),
-          e.description && b({ 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)
+          we(t),
+          t.description && b({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t.description),
+          n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e)
         ]),
-        e.buttons && M({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
+        t.buttons && L({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, t.buttons)
       ])
     ])
   ]
-)), yt = (e) => G.render(e, app.root), H = {
+)), ve = (t) => _.render(t, app.root), R = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1679,7 +1939,7 @@ const os = C(
     iconColor: "text-muted-foreground"
   }
 };
-class wt extends y {
+class Se extends w {
   /**
    * This will declare the props for the compiler.
    *
@@ -1694,13 +1954,13 @@ class wt extends y {
    * @returns {object}
    */
   render() {
-    const t = (d) => {
+    const e = (d) => {
       d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: r } = H[this.type] || H.default, l = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
-    return vt({
-      class: l,
-      title: i,
-      click: t,
+    }, { 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: l,
+      click: e,
       icon: this.icon,
       iconColor: r,
       description: this.description,
@@ -1741,7 +2001,7 @@ class wt extends y {
    * @returns {void}
    */
   open() {
-    yt(this), this.panel.showModal(), this.state.open = !0;
+    ve(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1752,7 +2012,7 @@ class wt extends y {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class ns extends wt {
+class is extends Se {
   /**
    * This will declare the props for the compiler.
    *
@@ -1767,10 +2027,10 @@ class ns extends wt {
    * @returns {array}
    */
   getButtons() {
-    const t = this.confirmTextLabel || "Confirm";
+    const e = this.confirmTextLabel || "Confirm";
     return [
       h({ variant: "outline", click: () => this.close() }, "Cancel"),
-      h({ variant: "primary", click: () => this.confirm() }, t)
+      h({ variant: "primary", click: () => this.confirm() }, e)
     ];
   }
   /**
@@ -1782,67 +2042,68 @@ class ns extends wt {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const rs = c((e, t = []) => 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" }, [
-        e.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
-          g(e.icon)
+        t.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
+          g(t.icon)
         ])
       ]),
-      F({ class: "py-4 text-center" }, [
-        S({ class: "text-xl font-bold" }, e.title),
-        b({ class: "pb-8 text-muted-foreground" }, e.description || ""),
-        ...t
+      I({ class: "py-4 text-center" }, [
+        S({ class: "text-xl font-bold" }, t.title),
+        b({ class: "pb-8 text-muted-foreground" }, t.description || ""),
+        ...e
       ])
     ])
   ])
 ]));
 export {
-  Lt as A,
-  Kt as B,
-  Rt as C,
-  At as D,
+  Le as A,
+  Xe as B,
+  He as C,
+  Oe as D,
   es as E,
-  ke as F,
-  ts as G,
-  ss as H,
-  Gt as I,
-  os as J,
-  ns as K,
-  Jt as L,
-  Ht as M,
-  qt as N,
-  vt as O,
-  et as P,
-  wt as Q,
-  rs as R,
-  Ut as S,
-  Yt as T,
-  ye as a,
-  Mt as b,
-  Ce as c,
-  De as d,
-  Fe as e,
-  Te as f,
-  Pt as g,
-  Ot as h,
-  jt as i,
-  Be as j,
-  zt as k,
+  Tt as F,
+  ss as G,
+  os as H,
+  Ke as I,
+  ns as J,
+  rs as K,
+  Qe as L,
+  At as M,
+  Ve as N,
+  is as O,
+  se as P,
+  Ce as Q,
+  Se as R,
+  Re as S,
+  Ge as T,
+  ls as U,
+  Ct as a,
+  Ae as b,
+  St as c,
+  It as d,
+  Bt as e,
+  Ft as f,
+  Ye as g,
+  je as h,
+  Ee as i,
+  Mt as j,
+  ze as k,
   K as l,
-  Et as m,
-  Nt as n,
-  Ee as o,
-  Vt as p,
-  _t as q,
-  Wt as r,
-  k as s,
-  v as t,
-  Re as u,
-  Qt as v,
-  Xt as w,
-  Ze as x,
-  tt as y,
-  Zt as z
+  Ne as m,
+  Ue as n,
+  qe as o,
+  Nt as p,
+  We as q,
+  _e as r,
+  Je as s,
+  k as t,
+  y as u,
+  Ht as v,
+  Ze as w,
+  ts as x,
+  ee as y,
+  oe as z
 };