@base-framework/ui 1.1.2 → 1.1.3

package/dist/atoms.es.js

@@ -1,7 +1,7 @@
-import { B as e, C as t, F as o, L as r, P as n, R as p, S as I, a as u, T as i } from "./tooltip-Czvqmxt3.js";
+import { B as e, C as t, F as o, L as r, P as n, R as p, S as I, a as u, T as i } from "./tooltip-BFch3OOj.js";
 import { B as d, I as m, L as x } from "./buttons-CfwtbIR-.js";
 import { C as T, F as g } from "./form-group-BB7dLJir.js";
-import { C as F, d as c, D as f, c as L, E as P, F as R, H as S, I as b, M as h, N as k, P as D, R as V, T as E, a as G, b as H, U as M, W as N } from "./inputs-9udyzkHR.js";
+import { C as F, d as c, D as f, c as L, E as P, F as R, H as S, I as b, M as h, N as k, P as D, R as V, T as E, a as G, b as H, U as M, W as N } from "./inputs-ByrGuC40.js";
 import { I as W, V as w, a as J } from "./image-BB__4s0g.js";
 export {
   e as Badge,

package/dist/{empty-state-CNuWXebM.js → empty-state-03NScfF6.js}

@@ -1,8 +1,8 @@
-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 it } from "@base-framework/atoms";
-import { Atom as c, Component as w, Html as A, Dom as rt, base as lt, Data as B, Builder as _, Jot as C, Events as p, DateTime as M } from "@base-framework/base";
+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 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 m, Img as G, Nav as ot, UseParent as W, OnStateOpen as O, Time as nt, Dialog as it } from "@base-framework/atoms";
+import { Atom as c, Component as w, Html as A, Dom as lt, base as rt, Data as B, Builder as _, Jot as C, Events as g, DateTime as M } from "@base-framework/base";
 import { P as D, b as at, R as ct } from "./range-calendar-CAwPjNM3.js";
 import { C as dt, F as ut } from "./form-group-BB7dLJir.js";
-import { B as h, I as g } from "./buttons-CfwtbIR-.js";
+import { B as h, I as p } from "./buttons-CfwtbIR-.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";
@@ -33,15 +33,15 @@ const z = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, gt = (t, e) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${e}` }, [
+}, pt = (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: i, bgColor: r, iconColor: l } = z[o] || z.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${i}` }, [
+]), gt = (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: i, bgColor: l, iconColor: r } = z[o] || z.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${l} ${i}` }, [
     // Icon and content
-    s && gt(s, l),
+    s && pt(s, r),
     n({ class: "flex flex-col" }, [
-      pt(t),
+      gt(t),
       bt(e)
     ])
   ]);
@@ -67,7 +67,7 @@ class Oe extends w {
       A.removeElement(e);
       return;
     }
-    rt.addClass(e, s), lt.on("animationend", e, (o) => A.removeElement(e));
+    lt.addClass(e, s), rt.on("animationend", e, (o) => A.removeElement(e));
   }
 }
 const xt = (t) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, t), yt = (t) => a({ class: "flex w-4 h-4", html: t }), wt = (t) => a({ class: "flex-auto" }, t), Ct = (t, e) => H({
@@ -94,7 +94,7 @@ const xt = (t) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, t),
   t && a(t),
   e && x({ html: e })
 ]), kt = ({ onSelect: t }) => n([
-  T(
+  I(
     "open",
     (e, s, o) => e ? new D({
       cache: "dropdown",
@@ -167,8 +167,16 @@ class Ae extends w {
       kt({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
+  /**
+   * Cleanup before destroying the component.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.button = null, this.dropdown = null;
+  }
 }
-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" }, [
+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" }, [
   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
@@ -185,10 +193,10 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
   invalid: s,
   input: e
 } : o), Mt = c((t, e) => {
-  const i = J(e, (r) => {
-    r.target.checkValidity() && t.setError(null);
-  }, (r) => {
-    t.setError(r.target.validationMessage);
+  const i = J(e, (l) => {
+    l.target.checkValidity() && t.setError(null);
+  }, (l) => {
+    t.setError(l.target.validationMessage);
   });
   return n({
     ...t,
@@ -215,12 +223,12 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
      * @returns {object}
      */
     render() {
-      const t = this.name, e = this.getId(`${t}`), { label: s, description: o } = this, i = (r) => {
-        this.state.error = r, this.state.hasError = !!r;
+      const t = this.name, e = this.getId(`${t}`), { label: s, description: o } = this, i = (l) => {
+        this.state.error = l, this.state.hasError = !!l;
       };
       return n({ class: "flex flex-auto gap-y-4" }, [
-        Tt([
-          It({ htmlFor: e }, s),
+        It([
+          Tt({ htmlFor: e }, s),
           Mt({
             id: e,
             name: t,
@@ -228,7 +236,7 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
             setError: i
           }, this.children),
           o && Bt({ id: this.getId("description") }, o),
-          n({ onState: ["error", (r) => r && Ft(r)] })
+          n({ onState: ["error", (l) => l && Ft(l)] })
         ])
       ]);
     }
@@ -246,7 +254,7 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, 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: i = [] }) => 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" }, [
+]), Lt = c(({ title: t, description: e, back: s, icon: o, options: i = [] }) => 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 (Mobile Only)
    */
@@ -254,13 +262,13 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
     variant: "icon",
     icon: u.arrows.left,
     class: "mr-2 p-0 flex sm:hidden",
-    click: (r, l) => l.close()
+    click: (l, r) => r.close()
   }),
   /**
    * Icon Container
    */
   o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [
-    g({ size: "md" }, o)
+    p({ size: "md" }, o)
   ]),
   /**
    * Title and Description Container
@@ -277,13 +285,13 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
   return n({
     popover: "manual",
     class: `modal ${s ? "" : "m-auto top-0 right-0 bottom-0 left-0"} ${s ? "" : "h-full max-h-screen"} fixed z-20 grid w-full gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 overflow-y-auto ${t.class}`,
-    click: (r, l) => {
-      r.target === l.panel && (r.preventDefault(), r.stopPropagation(), l.state.open = !1);
+    click: (l, r) => {
+      l.target === r.panel && (l.preventDefault(), l.stopPropagation(), r.state.open = !1);
     }
   }, [
     K({
       class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4 min-w-0",
-      submit: (r, l) => t.onSubmit && t.onSubmit(l),
+      submit: (l, r) => t.onSubmit && t.onSubmit(r),
       cache: "modalContent",
       ...t.gestureHandlers
     }, [
@@ -318,8 +326,8 @@ class At extends w {
         buttons: this.getButtons(),
         hideFooter: this.hideFooter,
         onSubmit: (i) => {
-          let r = !0;
-          this.onSubmit && (r = this.onSubmit(i)), r !== !1 && this.destroy();
+          let l = !0;
+          this.onSubmit && (l = this.onSubmit(i)), l !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -473,11 +481,11 @@ class Yt {
       modal: s = null,
       modalContent: o = null,
       modalBody: i = null,
-      closeThreshold: r = 150,
-      snapThreshold: l = 50,
+      closeThreshold: l = 150,
+      snapThreshold: r = 50,
       onClose: d = null
     } = e;
-    this.modal = s, this.modalContent = o, this.modalBody = i, this.closeThreshold = r, this.snapThreshold = l, this.onClose = d, this.reset();
+    this.modal = s, this.modalContent = o, this.modalBody = i, this.closeThreshold = l, this.snapThreshold = r, this.onClose = d, this.reset();
   }
   /**
    * Resets the drag state to initial values
@@ -529,8 +537,8 @@ class Yt {
       e.preventDefault();
       const i = this.calculateTranslateY(o);
       this.modalContent.style.transform = `translateY(${i}px)`, this.modalContent.style.transition = "none";
-      const r = this.calculateBackdropOpacity(o);
-      this.updateBackdropOpacity(r);
+      const l = this.calculateBackdropOpacity(o);
+      this.updateBackdropOpacity(l);
     } else this.modalBody.scrollTop > 0 && (this.state.canDrag = !1);
   }
   /**
@@ -651,9 +659,9 @@ class qe extends At {
         options: this.headerOptions(),
         buttons: this.getButtons(),
         hideFooter: this.hideFooter,
-        onSubmit: (r) => {
-          let l = !0;
-          this.onSubmit && (l = this.onSubmit(r)), l !== !1 && this.destroy();
+        onSubmit: (l) => {
+          let r = !0;
+          this.onSubmit && (r = this.onSubmit(l)), r !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -729,7 +737,7 @@ const j = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, zt = (t) => I({ class: "flex justify-center" }, [
+}, zt = (t) => T({ class: "flex justify-center" }, [
   et({ class: "text-lg font-bold mb-0" }, t)
 ]), jt = 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}`,
@@ -767,14 +775,14 @@ class Nt extends w {
    * @returns {object}
    */
   render() {
-    const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), i = this.href || null, r = this.getChildren(o);
+    const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), i = this.href || null, l = this.getChildren(o);
     return i ? jt({
       href: i,
       class: `${e} ${s}`
-    }, r) : Et({
+    }, l) : Et({
       close: this.close.bind(this),
       class: `${e} ${s}`
-    }, r);
+    }, l);
   }
   /**
    * This will be called after the component is set up.
@@ -878,6 +886,14 @@ class Ve extends w {
   removeNotice(e) {
     this.list.delete(e.id), this.list.isEmpty() && this.panel.hidePopover();
   }
+  /**
+   * Cleanup before destroying the component.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.list = null;
+  }
 }
 const E = 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',
@@ -887,7 +903,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     i.method = t, localStorage.setItem("theme", t), t === "system" && localStorage.removeItem("theme"), Rt(t);
   }
 }, [
-  g(s),
+  p(s),
   a(e)
 ])), Rt = (t) => {
   const e = document.documentElement;
@@ -974,6 +990,14 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
           onState: ["active", { "translate-x-[22px]": !0, "translate-x-[2px]": !1 }]
         })
       ]);
+    },
+    /**
+     * Cleanup before destroying the component.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.checkbox = null;
     }
   }
 ), k = {
@@ -1016,7 +1040,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      */
     openFileBrowse() {
       const t = this.input;
-      t && (t.value = "", p.trigger("click", t));
+      t && (t.value = "", g.trigger("click", t));
     },
     /**
      * Get the URL for the uploaded file.
@@ -1052,11 +1076,11 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          T("loaded", (s) => s === !1 || qt(this.src) ? P({
+          I("loaded", (s) => s === !1 || 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),
+            p(u.upload),
             n("Upload Image")
           ]) : G({
             // @ts-ignore
@@ -1065,6 +1089,14 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
           }))
         ])
       ]);
+    },
+    /**
+     * Cleanup before destroying the component.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.input = null;
     }
   }
 ), Qe = C(
@@ -1087,7 +1119,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      */
     openFileBrowse() {
       const t = this.input;
-      t && (t.value = "", p.trigger("click", t));
+      t && (t.value = "", g.trigger("click", t));
     },
     /**
      * Get the URL for the uploaded file.
@@ -1123,7 +1155,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          T(
+          I(
             "loaded",
             (s) => s ? G({
               // @ts-ignore
@@ -1133,12 +1165,20 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
               htmlFor: t,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
-              g(u.upload),
+              p(u.upload),
               n("Upload logo")
             ])
           )
         ])
       ]);
+    },
+    /**
+     * Cleanup before destroying the component.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.input = null;
     }
   }
 ), Vt = (t, e) => V(
@@ -1149,7 +1189,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
   [a(e)]
-), Gt = () => g({
+), Gt = () => p({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
@@ -1264,12 +1304,12 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   click: () => e(t),
   onState: [s, "selectedValue", { "bg-secondary": t.value }]
 }, [
-  t.icon && a({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, t.icon)]),
+  t.icon && a({ class: "mr-2 flex items-baseline" }, [p({ 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(
+  I(
     "open",
     (s, o, i) => s ? new D({
       cache: "dropdown",
@@ -1379,6 +1419,14 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
           value: ["[[selectedValue]]", this.state]
         })
       ]);
+    },
+    /**
+     * This will run before the component is destroyed.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.dropdown = null, this.button = null;
     }
   }
 ), X = ({ icon: t, click: e, ariaLabel: s }) => h({
@@ -1398,9 +1446,9 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
 }), oe = ({ bind: t, min: e, max: s, readonly: o = !1 }) => W(({ state: i }) => m({
   value: ["[[count]]", i],
   bind: t,
-  blur: (r, { state: l }) => {
-    let d = parseInt(r.target.value, 10);
-    isNaN(d) && (d = e ?? 0), e !== void 0 && (d = Math.max(d, e)), s !== void 0 && (d = Math.min(d, s)), l.count = d;
+  blur: (l, { state: r }) => {
+    let d = parseInt(l.target.value, 10);
+    isNaN(d) && (d = e ?? 0), e !== void 0 && (d = Math.max(d, e)), s !== void 0 && (d = Math.min(d, s)), r.count = d;
   },
   class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
   readonly: o,
@@ -1450,25 +1498,25 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     return null;
   const e = parseInt(t.substring(0, 2), 10), s = parseInt(t.substring(2, 4), 10), o = parseInt(t.substring(4, 8), 10);
   return e >= 1 && e <= 12 && s >= 1 && s <= 31 && o >= 1900 ? `${o}-${e.toString().padStart(2, "0")}-${s.toString().padStart(2, "0")}` : null;
-}, re = ({ bind: t, required: e }) => m({
+}, le = ({ 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
-}), le = ({ placeholder: t, handleInputChange: e, handleInputFocus: s }) => m({
+}), re = ({ 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) : ""]
-}), ae = ({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: r }) => n(
+}), ae = ({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: l }) => 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"
   },
   [
-    re({ bind: t, required: e }),
-    le({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
+    le({ bind: t, required: e }),
+    re({ placeholder: l, handleInputChange: o, handleInputFocus: i }),
     f(
       {
         class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
@@ -1523,7 +1571,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       const s = t.target.value.replace(/\D/g, "");
       t.target.value = ne(s);
       const o = ie(s);
-      o && (this.state.selectedDate = o, this.input.value = o, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(o));
+      o && (this.state.selectedDate = o, this.input.value = o, g.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(o));
     },
     /**
      * Handles input focus - select all text for easy editing.
@@ -1539,7 +1587,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      * @param {string} date
      */
     handleDateSelect(t) {
-      this.state.selectedDate = t, this.state.open = !1, this.input.value = t, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(t);
+      this.state.selectedDate = t, this.state.open = !1, this.input.value = t, g.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(t);
     },
     /**
      * Toggles the calendar popover.
@@ -1573,6 +1621,14 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
           })
         ]
       );
+    },
+    /**
+     * This will run before the component is destroyed.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.dropdown = null, this.dateInput = null, this.input = null;
     }
   }
 ), de = ({ bind: t, required: e }) => m({
@@ -1636,7 +1692,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
      */
     render() {
       const t = (s, { state: o }) => o.toggle("open"), e = (s, o) => {
-        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
+        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, g.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
       };
       return n({ class: "relative w-full max-w-[320px]" }, [
         ue({
@@ -1649,6 +1705,14 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
+    },
+    /**
+     * This will run before the component is destroyed.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.dropdown = null, this.input = null;
     }
   }
 ), ns = ({ dateTime: t = "", remoteTimeZone: e = "America/Denver", filter: s = null }) => nt([
@@ -1678,7 +1742,7 @@ function fe(t) {
     meridian: i
   };
 }
-function ge({ bind: t, required: e }) {
+function pe({ bind: t, required: e }) {
   return m({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
@@ -1686,7 +1750,7 @@ function ge({ bind: t, required: e }) {
     required: e
   });
 }
-function pe({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
+function ge({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
   return m({
     cache: "timeInput",
     class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
@@ -1696,14 +1760,14 @@ function pe({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
     onState: ["selectedTime", (o) => o || ""]
   });
 }
-function be({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: r }) {
+function be({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: l }) {
   return n(
     {
       class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
     },
     [
-      ge({ bind: t, required: e }),
-      pe({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
+      pe({ bind: t, required: e }),
+      ge({ placeholder: l, handleInputChange: o, handleInputFocus: i }),
       f(
         {
           class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
@@ -1719,13 +1783,13 @@ function be({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleI
 function $({ items: t, handleTimeSelect: e, state: s, stateValue: o, pad: i = !1 }) {
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
-    t.map((r) => {
-      let l = i ? r.toString().padStart(2, "0") : r.toString();
+    t.map((l) => {
+      let r = i ? l.toString().padStart(2, "0") : l.toString();
       return f({
-        text: l,
+        text: r,
         class: "hover:bg-muted/50 rounded-md pr-2 py-1",
-        click: () => e({ [o]: l }),
-        onState: [s, o, { "bg-muted": l }]
+        click: () => e({ [o]: r }),
+        onState: [s, o, { "bg-muted": r }]
       });
     })
   );
@@ -1748,7 +1812,7 @@ function xe({ handleTimeSelect: t }) {
               [
                 // Hours column
                 $({
-                  items: Array.from({ length: 12 }, (i, r) => r + 1),
+                  items: Array.from({ length: 12 }, (i, l) => l + 1),
                   handleTimeSelect: t,
                   state: o.state,
                   stateValue: "hour",
@@ -1756,7 +1820,7 @@ function xe({ handleTimeSelect: t }) {
                 }),
                 // Minutes column
                 $({
-                  items: Array.from({ length: 60 }, (i, r) => r),
+                  items: Array.from({ length: 60 }, (i, l) => l),
                   handleTimeSelect: t,
                   state: o.state,
                   stateValue: "minute",
@@ -1783,11 +1847,11 @@ 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, i, , r] = s, l = parseInt(o, 10), d = parseInt(i, 10);
-  return l < 0 || l > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && l < 12 ? l += 12 : r === "AM" && l === 12 && (l = 12)) : l === 0 ? (r = "AM", l = 12) : l < 12 ? r = "AM" : l === 12 ? r = "PM" : (r = "PM", l -= 12), {
-    hour: l.toString().padStart(2, "0"),
+  let [, o, i, , l] = s, r = parseInt(o, 10), d = parseInt(i, 10);
+  return r < 0 || r > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && r < 12 ? r += 12 : l === "AM" && r === 12 && (r = 12)) : r === 0 ? (l = "AM", r = 12) : r < 12 ? l = "AM" : r === 12 ? l = "PM" : (l = "PM", r -= 12), {
+    hour: r.toString().padStart(2, "0"),
     minute: d.toString().padStart(2, "0"),
-    meridian: r
+    meridian: l
   });
 }
 const is = v(
@@ -1845,7 +1909,7 @@ const is = v(
         minute: o.minute,
         meridian: o.meridian,
         selectedTime: o.formattedTime
-      }), this.input.value = o.formattedTime, p.trigger("change", this.input), typeof this.change == "function" && this.change(o.formattedTime)), t.target.value = s;
+      }), this.input.value = o.formattedTime, g.trigger("change", this.input), typeof this.change == "function" && this.change(o.formattedTime)), t.target.value = s;
     },
     /**
      * Handles input focus - select all text for easy editing.
@@ -1863,7 +1927,7 @@ const is = v(
     handleTimeSelect({ hour: t, minute: e, meridian: s }) {
       if (t && (this.state.hour = t), e && (this.state.minute = e), s && (this.state.meridian = s), this.state.hour && this.state.minute && this.state.meridian) {
         const o = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-        this.state.selectedTime = o, this.state.open = !1, this.input.value = o, p.trigger("change", this.input), typeof this.change == "function" && this.change(o);
+        this.state.selectedTime = o, this.state.open = !1, this.input.value = o, g.trigger("change", this.input), typeof this.change == "function" && this.change(o);
       }
     },
     /**
@@ -1888,11 +1952,19 @@ const is = v(
           })
         ]
       );
+    },
+    /**
+     * Cleanup before destroying the component.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.input = null, this.timeInput = null, this.dropdown = null;
     }
   }
 ), 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" }, [
+  p({ size: "lg" }, t)
+]), we = ({ title: t }) => T({ class: "flex flex-auto items-center" }, [
   S({ class: "text-lg font-semibold" }, t)
 ]), Ce = c((t, e) => it(
   {
@@ -1960,10 +2032,10 @@ class Se extends w {
   render() {
     const e = (d) => {
       d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: i } = R[this.type] || R.default, r = `${this.getMainClass()} ${o} ${s}`, l = this.title || "Dialog Title";
+    }, { borderColor: s, bgColor: o, iconColor: i } = R[this.type] || R.default, l = `${this.getMainClass()} ${o} ${s}`, r = this.title || "Dialog Title";
     return Ce({
-      class: r,
-      title: l,
+      class: l,
+      title: r,
       click: e,
       icon: this.icon,
       iconColor: i,
@@ -2016,7 +2088,7 @@ class Se extends w {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class rs extends Se {
+class ls extends Se {
   /**
    * This will declare the props for the compiler.
    *
@@ -2046,15 +2118,15 @@ class rs extends Se {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const ls = c((t, e = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
+const rs = c((t, e = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
   K({ class: "flex flex-auto flex-col" }, [
     n({ class: "flex flex-auto flex-col gap-y-4" }, [
       n({ class: "flex flex-auto items-center justify-center" }, [
         t.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
-          g(t.icon)
+          p(t.icon)
         ])
       ]),
-      I({ class: "py-4 text-center" }, [
+      T({ class: "py-4 text-center" }, [
         S({ class: "text-xl font-bold" }, t.title),
         b({ class: "pb-8 text-muted-foreground" }, t.description || ""),
         ...e
@@ -2068,7 +2140,7 @@ export {
   He as C,
   Oe as D,
   es as E,
-  Tt as F,
+  It as F,
   ss as G,
   os as H,
   Ke as I,
@@ -2077,17 +2149,17 @@ export {
   Qe as L,
   At as M,
   Ve as N,
-  rs as O,
+  ls as O,
   se as P,
   Ce as Q,
   Se as R,
   Re as S,
   Ge as T,
-  ls as U,
+  rs as U,
   Ct as a,
   Ae as b,
   St as c,
-  It as d,
+  Tt as d,
   Bt as e,
   Ft as f,
   Ye as g,

package/dist/index.es.js

@@ -1,14 +1,14 @@
-import { B as s, C as o, F as t, L as r, P as n, R as l, S as i, a as p, T as m } from "./tooltip-Czvqmxt3.js";
+import { B as s, C as o, F as t, L as r, P as n, R as l, S as i, a as p, T as m } from "./tooltip-BFch3OOj.js";
 import { B as u, I as g, L as C } from "./buttons-CfwtbIR-.js";
 import { C as T, F as b } from "./form-group-BB7dLJir.js";
-import { C as D, d as S, D as F, c as B, E as P, F as k, H as M, I as x, M as f, N as v, P as N, R as y, T as h, a as U, b as L, U as W, W as w } from "./inputs-9udyzkHR.js";
+import { C as D, d as S, D as F, c as B, E as P, F as k, H as M, I as x, M as f, N as v, P as N, R as y, T as h, a as U, b as L, U as W, W as w } from "./inputs-ByrGuC40.js";
 import { I as R, V as A, a as G } from "./image-BB__4s0g.js";
 import { Icons as E } from "./icons.es.js";
-import { A as j, B as q, C as J, x as z, O as K, z as Q, E as _, G as X, H as Y, D as Z, m as $, n as aa, R as ea, Q as sa, w as oa, o as ta, c as ra, a as na, b as la, U as ia, l as pa, g as ma, i as da, h as ua, j as ga, e as Ca, k as ca, F as Ta, d as ba, f as Ia, I as Da, L as Sa, y as Fa, M as Ba, p as Pa, N as ka, P as Ma, t as xa, u as fa, S as va, r as Na, s as ya, T as ha, J as Ua, K as La, q as Wa, v as wa } from "./empty-state-CNuWXebM.js";
+import { A as j, B as q, C as J, x as z, O as K, z as Q, E as _, G as X, H as Y, D as Z, m as $, n as aa, R as ea, Q as sa, w as oa, o as ta, c as ra, a as na, b as la, U as ia, l as pa, g as ma, i as da, h as ua, j as ga, e as Ca, k as ca, F as Ta, d as ba, f as Ia, I as Da, L as Sa, y as Fa, M as Ba, p as Pa, N as ka, P as Ma, t as xa, u as fa, S as va, r as Na, s as ya, T as ha, J as Ua, K as La, q as Wa, v as wa } from "./empty-state-03NScfF6.js";
 import { A as Ra, b as Aa, C as Ga, D as Oa, a as Ea, F as Va, M as ja, P as qa, R as Ja, c as za, g as Ka, p as Qa } from "./range-calendar-CAwPjNM3.js";
-import { B as Xa, p as Ya, C as Za, j as $a, D as ae, m as ee, k as se, H as oe, I as te, N as re, O as ne, P as le, S as ie, n as pe, o as me, x as de, s as ue, q as ge, r as Ce, T as ce, t as Te, w as be, u as Ie, v as De, l as Se, U as Fe, W as Be, f as Pe, h as ke, i as Me, c as xe, d as fe, b as ve, e as Ne, a as ye, g as he } from "./signature-panel-C5pdGkvG.js";
-import { B as Le, I as We, M as we, d as He, e as Re, g as Ae, N as Ge, b as Oe, a as Ee, f as Ve, P as je, c as qe, S as Je, T as ze } from "./mobile-nav-wrapper-jUpomqyU.js";
-import { B as Qe, a as _e, C as Xe, F as Ye, b as Ze, c as $e, M as as, P as es, S as ss } from "./sidebar-menu-page-D6r7Pr21.js";
+import { B as Xa, p as Ya, C as Za, j as $a, D as ae, m as ee, k as se, H as oe, I as te, N as re, O as ne, P as le, S as ie, n as pe, o as me, x as de, s as ue, q as ge, r as Ce, T as ce, t as Te, w as be, u as Ie, v as De, l as Se, U as Fe, W as Be, f as Pe, h as ke, i as Me, c as xe, d as fe, b as ve, e as Ne, a as ye, g as he } from "./signature-panel-MJqtMCfj.js";
+import { B as Le, I as We, M as we, d as He, e as Re, g as Ae, N as Ge, b as Oe, a as Ee, f as Ve, P as je, c as qe, S as Je, T as ze } from "./mobile-nav-wrapper-C4KmFFjr.js";
+import { B as Qe, a as _e, C as Xe, F as Ye, b as Ze, c as $e, M as as, P as es, S as ss } from "./sidebar-menu-page-qV7cJA3f.js";
 import { A as ts, F as rs, M as ns, a as ls, T as is } from "./aside-template-sUm-F2f0.js";
 import { B as ms } from "./bside-template-do_hXebn.js";
 import { F as us, c as gs } from "./format-BmrNQptv.js";

package/dist/{inputs-9udyzkHR.js → inputs-ByrGuC40.js}

@@ -98,6 +98,14 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
         // @ts-ignore
         this.label && T({ id: e, label: this.label, clickHandler: c })
       ]);
+    },
+    /**
+     * This will clear cached references before destroying the component.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.checkbox = null;
     }
   }
 ), H = (e) => {

package/dist/{mobile-nav-wrapper-jUpomqyU.js → mobile-nav-wrapper-C4KmFFjr.js}

@@ -154,6 +154,14 @@ class m extends n {
   update(e) {
     this.link.update(e);
   }
+  /**
+   * This will clear references before destroying the component.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.link = null;
+  }
 }
 const E = i(({ map: s }, e) => o({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: s }, [
   C({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, e)
@@ -363,7 +371,7 @@ const V = ({ title: s, options: e, class: t = "", mobileBorder: a = !1, sticky:
   ]),
   new c({ options: e, mobileBorder: a, class: u ? "sticky top-0" : "" }),
   w
-]), j = (s) => h({ class: "text-lg ml-2" }, s), U = (s) => l({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
+]), j = (s) => h({ class: "text-lg ml-2" }, s), D = (s) => l({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
   x({
     variant: "icon",
     class: "m-2",
@@ -371,14 +379,14 @@ const V = ({ title: s, options: e, class: t = "", mobileBorder: a = !1, sticky:
     icon: r.arrows.left
   }),
   s.title && j(s.title)
-]), Y = () => l({
+]), U = () => l({
   class: `
 			absolute inset-0 bg-black/40 z-[-1] fadeIn
 			transition-opacity duration-200
 		`,
   click: (s, { state: e }) => e.open = !1
 });
-class D extends n {
+class Y extends n {
   /**
    * This will declare the props for the compiler.
    *
@@ -397,7 +405,7 @@ class D extends n {
       class: "fixed inset-0 z-50",
       style: "[[typeClass]]"
     }, [
-      Y(),
+      U(),
       // Popover Content
       l({
         class: `
@@ -406,7 +414,7 @@ class D extends n {
         dataSet: ["open", ["expanded", !0, "true"]]
       }, [
         l({ class: "flex flex-auto flex-col w-full h-full overflow-y-auto max-h-[85vh] rounded-md bg-popover border" }, [
-          U({ title: this.title }),
+          D({ title: this.title }),
           l({ class: "flex flex-auto flex-col" }, this.children)
         ])
       ])
@@ -444,31 +452,31 @@ class D extends n {
     this.container = app.root;
   }
 }
-const v = (s) => x({ class: "m-2", variant: "ghost", addState() {
+const k = (s) => x({ class: "m-2", variant: "ghost", addState() {
   return {
     open: !1
   };
 }, click: (e, { state: t }) => t.toggle("open") }, [
   f(r.bar.three)
 ]), R = (s) => h({ class: "text-lg ml-2" }, s), q = (s) => l({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
-  v(),
+  k(),
   s.title && R(s.title)
-]), g = (s, e) => {
+]), v = (s, e) => {
   s.forEach((t) => {
     if (t.options) {
-      g(t.options, e);
+      v(t.options, e);
       return;
     }
     t.callBack = e;
   });
-}, k = (s) => l({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
+}, g = (s) => l({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
   I(
     "open",
     (e) => e ? [
-      new D({ title: s.title }, [
+      new Y({ title: s.title }, [
         $(({ state: t }) => {
           const a = (u) => t.open = !1;
-          return g(s.options, a), new c(
+          return v(s.options, a), new c(
             {
               options: s.options
             }
@@ -479,21 +487,21 @@ const v = (s) => x({ class: "m-2", variant: "ghost", addState() {
   )
 ]), X = i((s) => l({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
   l([
-    v(),
-    k(s)
+    k(),
+    g(s)
   ])
 ])), Z = i((s) => l({ cache: "mobileNav", class: "flex flex-auto flex-col w-full relative lg:hidden" }, [
   l({ class: "flex flex-auto flex-col w-full" }, [
     q(s),
-    k(s)
+    g(s)
   ])
 ]));
 export {
-  Y as B,
+  U as B,
   c as I,
   m as M,
   M as N,
-  U as P,
+  D as P,
   W as S,
   q as T,
   E as a,
@@ -501,6 +509,6 @@ export {
   V as c,
   X as d,
   Z as e,
-  D as f,
-  v as g
+  Y as f,
+  k as g
 };

package/dist/molecules.es.js

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

package/dist/organisms.es.js

@@ -1,6 +1,6 @@
-import { B as s, p as n, C as t, j as o, D as r, m as l, k as i, H as d, I as b, N as u, O as v, P as g, S as p, n as T, o as D, x as N, s as k, q as C, r as c, T as B, t as M, w as m, u as y, v as W, l as h, U as S, W as H, f as P, h as U, i as x, c as I, d as f, b as L, e as O, a as F, g as G } from "./signature-panel-C5pdGkvG.js";
+import { B as s, p as n, C as t, j as o, D as r, m as l, k as i, H as d, I as b, N as u, O as v, P as g, S as p, n as T, o as D, x as N, s as k, q as C, r as c, T as B, t as M, w as m, u as y, v as W, l as h, U as S, W as H, f as P, h as U, i as x, c as I, d as f, b as L, e as O, a as F, g as G } from "./signature-panel-MJqtMCfj.js";
 import { b as R, C as j, D as q, a as z, F as A, M as E, R as J, c as K, p as Q } from "./range-calendar-CAwPjNM3.js";
-import { B as X, I as Y, M as Z, d as _, e as $, g as aa, N as ea, b as sa, a as na, f as ta, P as oa, c as ra, S as la, T as ia } from "./mobile-nav-wrapper-jUpomqyU.js";
+import { B as X, I as Y, M as Z, d as _, e as $, g as aa, N as ea, b as sa, a as na, f as ta, P as oa, c as ra, S as la, T as ia } from "./mobile-nav-wrapper-C4KmFFjr.js";
 export {
   s as BackButton,
   X as Backdrop,

package/dist/pages.es.js

@@ -1,4 +1,4 @@
-import { B as s, a as P, C as g, F as n, b as l, c as i, M as r, P as c, S as o } from "./sidebar-menu-page-D6r7Pr21.js";
+import { B as s, a as P, C as g, F as n, b as l, c as i, M as r, P as c, S as o } from "./sidebar-menu-page-qV7cJA3f.js";
 export {
   s as BasicPage,
   P as BlankPage,

package/dist/{sidebar-menu-page-D6r7Pr21.js → sidebar-menu-page-qV7cJA3f.js}

@@ -1,7 +1,7 @@
 import { Div as t, Header as n, H1 as d, P as o } from "@base-framework/atoms";
 import { F as l, A as x } from "./aside-template-sUm-F2f0.js";
 import { Component as h, Atom as i } from "@base-framework/base";
-import { c as u, e as p } from "./mobile-nav-wrapper-jUpomqyU.js";
+import { c as u, e as p } from "./mobile-nav-wrapper-C4KmFFjr.js";
 class c extends h {
   /**
    * This will declare the props for the compiler.

package/dist/{signature-panel-C5pdGkvG.js → signature-panel-MJqtMCfj.js}

@@ -1,9 +1,9 @@
-import { Button as w, Div as o, On as C, Span as L, Th as N, UseParent as E, I as Q, Thead as V, Tr as G, Table as B, P as v, Li as y, Time as X, Nav as m, Ul as f, Section as I, Canvas as q } from "@base-framework/atoms";
+import { Button as y, Div as o, On as C, Span as L, Th as N, UseParent as E, I as Q, Thead as V, Tr as G, Table as B, P as v, Li as w, Time as X, Nav as m, Ul as f, Section as I, Canvas as q } from "@base-framework/atoms";
 import { Atom as d, Component as p, Data as T, DateTime as K, router as k, NavLink as M, DataTracker as U, Jot as _, base as O, Dom as W } from "@base-framework/base";
 import { B as P, I as J } from "./buttons-CfwtbIR-.js";
 import { Icons as S } from "./icons.es.js";
 import { TableBody as Z, DataTableBody as ee, ScrollableTableBody as te, List as se, IntervalTimer as ae } from "@base-framework/organisms";
-import { C as ie, I as ne, H as oe } from "./inputs-9udyzkHR.js";
+import { C as ie, I as ne, H as oe } from "./inputs-ByrGuC40.js";
 import { A as le, P as re } from "./range-calendar-CAwPjNM3.js";
 import { V as g } from "./image-BB__4s0g.js";
 d((t, e) => ({
@@ -11,7 +11,7 @@ d((t, e) => ({
   ...t,
   children: e
 }));
-d(({ value: t, label: e }) => w({
+d(({ value: t, label: e }) => y({
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-md px-8 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
   onState: ["performance", { active: t }],
   dataSet: ["performance", ["state", t, "active"]],
@@ -83,7 +83,7 @@ const ce = (t) => {
   return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
 }, ge = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
   const n = fe(t, e, s);
-  return w({
+  return y({
     text: t || "",
     disabled: !t,
     class: `
@@ -302,7 +302,7 @@ const xe = (t, e) => {
   e.state.checked = !s;
 }, ke = (t) => N({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
   E((e) => new ie({ class: "mr-2", onChange: (s, a) => xe(e, a) }))
-]), we = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
+]), ye = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
   return N({
     class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
@@ -318,7 +318,7 @@ const xe = (t, e) => {
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? ke({ toggle: t.toggle }) : we({
+      (e) => e.label === "checkbox" ? ke({ toggle: t.toggle }) : ye({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -327,7 +327,7 @@ const xe = (t, e) => {
       })
     ]
   })
-]), ye = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new Z({
+]), we = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new Z({
   cache: "list",
   key: t,
   items: e,
@@ -423,7 +423,7 @@ class j extends p {
           this.headers && R({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          ye({
+          we({
             // @ts-ignore
             key: this.key,
             // @ts-ignore
@@ -499,7 +499,7 @@ class j extends p {
    * @returns {void}
    */
   beforeDestroy() {
-    this.data.selectedRows = [];
+    this.data.selectedRows = [], this.list = null;
   }
 }
 const ve = (t) => new ee({
@@ -652,7 +652,7 @@ class Ce extends j {
     this.list.refresh();
   }
 }
-const wt = d((t) => new Ce(
+const yt = d((t) => new Ce(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -684,7 +684,7 @@ const wt = d((t) => new Ce(
 ]), Te = (t, e) => t === "online" ? Ie() : Be(e), Me = d(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
   v({ class: "text-sm leading-6 m-0" }, t),
   Te(s, e)
-])), Pe = (t) => t.split(" ").map((s) => s[0]).join(""), Re = d((t) => y({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+])), Pe = (t) => t.split(" ").map((s) => s[0]).join(""), Re = d((t) => w({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
   o({ class: "flex min-w-0 gap-x-4" }, [
     le({ src: t.image, alt: t.name, fallbackText: Pe(t.name) }),
     Le({ name: t.name, email: t.email })
@@ -694,7 +694,7 @@ const wt = d((t) => new Ce(
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), yt = d((t) => new se({
+])), wt = d((t) => new se({
   cache: "list",
   key: "name",
   items: t.users,
@@ -1029,7 +1029,7 @@ class Ct extends A {
     this.container = e, this.initialize();
   }
 }
-const ze = d(({ index: t, click: e, state: s }, a) => y({
+const ze = d(({ index: t, click: e, state: s }, a) => w({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -1191,15 +1191,23 @@ const ze = d(({ index: t, click: e, state: s }, a) => y({
           selectOption: this.selectOption.bind(this)
         })
       ]);
+    },
+    /**
+     * This will destroy the component.
+     *
+     * @returns {void}
+     */
+    destroy() {
+      this.dropdown = null, this.input = null;
     }
   }
-), Ae = (t) => y(
+), Ae = (t) => w(
   {
     class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    w({
+    y({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
@@ -1295,13 +1303,13 @@ class It extends g {
     };
   }
 }
-const Ye = (t) => y(
+const Ye = (t) => w(
   {
     class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    w({
+    y({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
@@ -1504,13 +1512,13 @@ class Tt extends g {
     return s;
   }
 }
-const Ke = (t) => y(
+const Ke = (t) => w(
   {
     class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    w({
+    y({
       class: "flex flex-auto justify-center items-center px-4 py-3 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
@@ -1597,13 +1605,13 @@ class Mt extends g {
     };
   }
 }
-const Ze = (t) => y(
+const Ze = (t) => w(
   {
     class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    w({
+    y({
       class: "flex flex-auto justify-center items-center px-4 py-3 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
@@ -2109,17 +2117,25 @@ class Ot extends p {
     if (this.canvasLayer)
       return this.canvasLayer.reset();
   }
+  /**
+   * Cleans up references before destroying the component.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.canvasLayer = null, this.hiddenInput = null;
+  }
 }
 export {
   Dt as B,
   ke as C,
-  ye as D,
-  we as H,
+  we as D,
+  ye as H,
   Ct as I,
   vt as N,
   A as O,
   mt as P,
-  wt as S,
+  yt as S,
   R as T,
   Re as U,
   xt as W,
@@ -2134,7 +2150,7 @@ export {
   be as i,
   j,
   kt as k,
-  yt as l,
+  wt as l,
   St as m,
   Lt as n,
   Ue as o,

package/dist/{tooltip-Czvqmxt3.js → tooltip-BFch3OOj.js}

@@ -1,7 +1,7 @@
 import { Span as c, Legend as b, Fieldset as p, Div as l, UseParent as u, Input as C } from "@base-framework/atoms";
 import { Atom as s, Html as x } from "@base-framework/base";
 import { a as d } from "./image-BB__4s0g.js";
-import { f as h, e as y, g as k } from "./inputs-9udyzkHR.js";
+import { f as h, e as y, g as k } from "./inputs-ByrGuC40.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",

package/dist/types/components/molecules/dropdowns/dropdown-menu.d.ts

@@ -56,6 +56,8 @@ export class DropdownMenu extends Component {
      * @returns {object}
      */
     render(): object;
+    button: any;
+    dropdown: any;
 }
 import { Component } from '@base-framework/base';
 import { Data } from '@base-framework/base';

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

@@ -26,6 +26,7 @@ export class NotificationContainer extends Component {
      * @returns {void}
      */
     removeNotice(notice: object): void;
+    list: any;
 }
 export default NotificationContainer;
 import { Component } from "@base-framework/base";

package/dist/types/components/organisms/lists/data-table.d.ts

@@ -99,6 +99,7 @@ export class DataTable extends Component {
      * @returns {void}
      */
     public prepend(items: any[] | object): void;
+    list: any;
 }
 import { CheckboxCol } from './table-header.js';
 import { HeaderCol } from './table-header.js';

package/dist/types/components/organisms/signature/signature-panel.d.ts

@@ -45,6 +45,7 @@ export class SignaturePanel extends Component {
      * @returns {void}
      */
     reset(e?: Event): void;
+    hiddenInput: any;
 }
 export default SignaturePanel;
 import { Component } from "@base-framework/base";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {