@base-framework/ui 1.1.0 → 1.1.2

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

@@ -1,5 +1,5 @@
-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 { 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 { 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";
@@ -36,8 +36,8 @@ const z = {
 }, 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 } = z[o] || z.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${i} ${r}` }, [
+  const { borderColor: i, bgColor: r, iconColor: l } = z[o] || z.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${i}` }, [
     // Icon and content
     s && gt(s, l),
     n({ class: "flex flex-col" }, [
@@ -67,7 +67,7 @@ class Oe extends w {
       A.removeElement(e);
       return;
     }
-    it.addClass(e, s), lt.on("animationend", e, (o) => A.removeElement(e));
+    rt.addClass(e, s), lt.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({
@@ -185,15 +185,15 @@ 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 r = J(e, (i) => {
-    i.target.checkValidity() && t.setError(null);
-  }, (i) => {
-    t.setError(i.target.validationMessage);
+  const i = J(e, (r) => {
+    r.target.checkValidity() && t.setError(null);
+  }, (r) => {
+    t.setError(r.target.validationMessage);
   });
   return n({
     ...t,
     class: "w-full"
-  }, r);
+  }, i);
 }), Ee = v(
   {
     /**
@@ -215,8 +215,8 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
      * @returns {object}
      */
     render() {
-      const t = this.name, e = this.getId(`${t}`), { label: s, description: o } = this, r = (i) => {
-        this.state.error = i, this.state.hasError = !!i;
+      const t = this.name, e = this.getId(`${t}`), { label: s, description: o } = this, i = (r) => {
+        this.state.error = r, this.state.hasError = !!r;
       };
       return n({ class: "flex flex-auto gap-y-4" }, [
         Tt([
@@ -225,10 +225,10 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
             id: e,
             name: t,
             value: this.state.value,
-            setError: r
+            setError: i
           }, this.children),
           o && Bt({ id: this.getId("description") }, o),
-          n({ onState: ["error", (i) => i && Ft(i)] })
+          n({ onState: ["error", (r) => r && Ft(r)] })
         ])
       ]);
     }
@@ -246,7 +246,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: 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" }, [
+]), 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" }, [
   /**
    * Back Button (Mobile Only)
    */
@@ -254,7 +254,7 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
     variant: "icon",
     icon: u.arrows.left,
     class: "mr-2 p-0 flex sm:hidden",
-    click: (i, l) => l.close()
+    click: (r, l) => l.close()
   }),
   /**
    * Icon Container
@@ -270,20 +270,20 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
       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)
+    n({ class: "flex flex-none items-center gap-2" }, i)
   ])
 ])), Q = c((t, e) => {
   const s = t.class?.includes("drawer");
   return n({
     popover: "manual",
     class: `modal ${s ? "" : "m-auto top-0 right-0 bottom-0 left-0"} ${s ? "" : "h-full max-h-screen"} fixed z-20 grid w-full gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 overflow-y-auto ${t.class}`,
-    click: (i, l) => {
-      i.target === l.panel && (i.preventDefault(), i.stopPropagation(), l.state.open = !1);
+    click: (r, l) => {
+      r.target === l.panel && (r.preventDefault(), r.stopPropagation(), l.state.open = !1);
     }
   }, [
     K({
       class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4 min-w-0",
-      submit: (i, l) => t.onSubmit && t.onSubmit(l),
+      submit: (r, l) => t.onSubmit && t.onSubmit(l),
       cache: "modalContent",
       ...t.gestureHandlers
     }, [
@@ -317,9 +317,9 @@ class At extends w {
         options: this.headerOptions(),
         buttons: this.getButtons(),
         hideFooter: this.hideFooter,
-        onSubmit: (r) => {
-          let i = !0;
-          this.onSubmit && (i = this.onSubmit(r)), i !== !1 && this.destroy();
+        onSubmit: (i) => {
+          let r = !0;
+          this.onSubmit && (r = this.onSubmit(i)), r !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -453,7 +453,7 @@ class At extends w {
    * @returns {void}
    */
   beforeDestroy() {
-    this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
+    this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto", this.modalContent = null, this.modalBody = null;
   }
 }
 class Yt {
@@ -472,12 +472,12 @@ class Yt {
     const {
       modal: s = null,
       modalContent: o = null,
-      modalBody: r = null,
-      closeThreshold: i = 150,
+      modalBody: i = null,
+      closeThreshold: r = 150,
       snapThreshold: l = 50,
       onClose: d = null
     } = e;
-    this.modal = s, this.modalContent = o, this.modalBody = r, this.closeThreshold = i, this.snapThreshold = l, this.onClose = d, this.reset();
+    this.modal = s, this.modalContent = o, this.modalBody = i, this.closeThreshold = r, this.snapThreshold = l, this.onClose = d, this.reset();
   }
   /**
    * Resets the drag state to initial values
@@ -527,10 +527,10 @@ class Yt {
     const o = this.getDeltaY();
     if (!this.state.isDragging && this.state.canDrag && o > 0 && this.modalBody.scrollTop === 0 && (this.state.isDragging = !0), this.state.isDragging && o > 0) {
       e.preventDefault();
-      const r = this.calculateTranslateY(o);
-      this.modalContent.style.transform = `translateY(${r}px)`, this.modalContent.style.transition = "none";
-      const i = this.calculateBackdropOpacity(o);
-      this.updateBackdropOpacity(i);
+      const i = this.calculateTranslateY(o);
+      this.modalContent.style.transform = `translateY(${i}px)`, this.modalContent.style.transition = "none";
+      const r = this.calculateBackdropOpacity(o);
+      this.updateBackdropOpacity(r);
     } else this.modalBody.scrollTop > 0 && (this.state.canDrag = !1);
   }
   /**
@@ -642,7 +642,7 @@ class qe extends At {
    * @returns {object}
    */
   render() {
-    const e = this.getMainClass(), s = this.title || "", o = this.description || null, r = this.getContainerProps();
+    const e = this.getMainClass(), s = this.title || "", o = this.description || null, i = this.getContainerProps();
     return Q(
       {
         class: e,
@@ -651,14 +651,14 @@ class qe extends At {
         options: this.headerOptions(),
         buttons: this.getButtons(),
         hideFooter: this.hideFooter,
-        onSubmit: (i) => {
+        onSubmit: (r) => {
           let l = !0;
-          this.onSubmit && (l = this.onSubmit(i)), l !== !1 && this.destroy();
+          this.onSubmit && (l = this.onSubmit(r)), l !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
         aria: { expanded: ["open"] },
-        ...r
+        ...i
       },
       this.children
     );
@@ -767,14 +767,14 @@ class Nt extends w {
    * @returns {object}
    */
   render() {
-    const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, i = this.getChildren(o);
-    return r ? jt({
-      href: r,
+    const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), i = this.href || null, r = this.getChildren(o);
+    return i ? jt({
+      href: i,
       class: `${e} ${s}`
-    }, i) : Et({
+    }, r) : Et({
       close: this.close.bind(this),
       class: `${e} ${s}`
-    }, i);
+    }, r);
   }
   /**
    * This will be called after the component is set up.
@@ -883,8 +883,8 @@ 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',
   onState: ["method", { active: t }],
   dataSet: ["method", ["state", t, "active"]],
-  click: (o, { state: r }) => {
-    r.method = t, localStorage.setItem("theme", t), t === "system" && localStorage.removeItem("theme"), Rt(t);
+  click: (o, { state: i }) => {
+    i.method = t, localStorage.setItem("theme", t), t === "system" && localStorage.removeItem("theme"), Rt(t);
   }
 }, [
   g(s),
@@ -1211,8 +1211,8 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
       "bg-primary": t,
       "shadow-md": t
     }],
-    click: (s, { data: o, onClick: r }) => {
-      o.activeIndex = t, r && r(t);
+    click: (s, { data: o, onClick: i }) => {
+      o.activeIndex = t, i && i(t);
     }
   })
 ]), Kt = (t, e) => Array.from({ length: t }, (s, o) => Jt({
@@ -1271,10 +1271,10 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
 ]), te = ({ onSelect: t, state: e }) => n({ class: "flex flex-auto flex-col" }, [
   T(
     "open",
-    (s, o, r) => s ? new D({
+    (s, o, i) => s ? new D({
       cache: "dropdown",
-      parent: r,
-      button: r.button
+      parent: i,
+      button: i.button
     }, [
       Zt(t, e)
     ]) : null
@@ -1395,11 +1395,11 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   icon: u.circlePlus,
   click: t,
   ariaLabel: "Increment"
-}), oe = ({ bind: t, min: e, max: s, readonly: o = !1 }) => W(({ state: r }) => m({
-  value: ["[[count]]", r],
+}), oe = ({ bind: t, min: e, max: s, readonly: o = !1 }) => W(({ state: i }) => m({
+  value: ["[[count]]", i],
   bind: t,
-  blur: (i, { state: l }) => {
-    let d = parseInt(i.target.value, 10);
+  blur: (r, { state: l }) => {
+    let d = parseInt(r.target.value, 10);
     isNaN(d) && (d = e ?? 0), e !== void 0 && (d = Math.max(d, e)), s !== void 0 && (d = Math.min(d, s)), l.count = d;
   },
   class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
@@ -1445,12 +1445,12 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
 ), 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) => {
+}, ie = (t) => {
   if (t.length !== 8)
     return null;
   const e = parseInt(t.substring(0, 2), 10), s = parseInt(t.substring(2, 4), 10), o = parseInt(t.substring(4, 8), 10);
   return e >= 1 && e <= 12 && s >= 1 && s <= 31 && o >= 1900 ? `${o}-${e.toString().padStart(2, "0")}-${s.toString().padStart(2, "0")}` : null;
-}, ie = ({ bind: t, required: e }) => m({
+}, re = ({ bind: t, required: e }) => m({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: t,
@@ -1462,13 +1462,13 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   input: e,
   focus: s,
   onState: ["selectedDate", (o) => o ? M.format("standard", o) : ""]
-}), ae = ({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: i }) => n(
+}), ae = ({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: r }) => n(
   {
     class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
   },
   [
-    ie({ bind: t, required: e }),
-    le({ placeholder: i, handleInputChange: o, handleInputFocus: r }),
+    re({ bind: t, required: e }),
+    le({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
     f(
       {
         class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
@@ -1480,14 +1480,14 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     )
   ]
 ), ce = ({ handleDateSelect: t, blockPriorDates: e }) => O(
-  (s, o, r) => new D({
+  (s, o, i) => new D({
     cache: "dropdown",
-    parent: r,
-    button: r.panel,
+    parent: i,
+    button: i.panel,
     size: "fit"
   }, [
     new at({
-      selectedDate: r.state.selectedDate,
+      selectedDate: i.state.selectedDate,
       selectedCallBack: t,
       blockPriorDates: e
     })
@@ -1522,7 +1522,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     handleInputChange(t) {
       const s = t.target.value.replace(/\D/g, "");
       t.target.value = ne(s);
-      const o = re(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));
     },
     /**
@@ -1591,15 +1591,15 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
     a(Y.date(["[[end]]", o], "End Date"))
   ]),
   x({ html: u.calendar.days })
-]), he = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, r) => new D({
+]), he = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, i) => new D({
   cache: "dropdown",
-  parent: r,
-  button: r.panel,
+  parent: i,
+  button: i.panel,
   size: "xl"
 }, [
   new ct({
-    startDate: r.state.start,
-    endDate: r.state.end,
+    startDate: i.state.start,
+    endDate: i.state.end,
     onRangeSelect: t,
     blockPriorDates: e
   })
@@ -1655,8 +1655,8 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   new ft({
     dateTime: t,
     filter: s || ((o) => {
-      const r = M.getLocalTime(o, !0, !1, e);
-      return M.getTimeFrame(r);
+      const i = M.getLocalTime(o, !0, !1, e);
+      return M.getTimeFrame(i);
     })
   })
 ]);
@@ -1670,12 +1670,12 @@ function fe(t) {
   const e = parseInt(t.substring(0, 2), 10), s = parseInt(t.substring(2, 4), 10);
   if (e < 0 || e > 23 || s < 0 || s > 59)
     return { formattedTime: null, hour: null, minute: null, meridian: null };
-  let o = e, r = "AM";
-  return e === 0 ? o = 12 : e > 12 ? (o = e - 12, r = "PM") : e === 12 && (r = "PM"), {
-    formattedTime: `${o.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")} ${r}`,
+  let o = e, i = "AM";
+  return e === 0 ? o = 12 : e > 12 ? (o = e - 12, i = "PM") : e === 12 && (i = "PM"), {
+    formattedTime: `${o.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")} ${i}`,
     hour: o.toString().padStart(2, "0"),
     minute: s.toString().padStart(2, "0"),
-    meridian: r
+    meridian: i
   };
 }
 function ge({ bind: t, required: e }) {
@@ -1696,14 +1696,14 @@ function pe({ placeholder: t, handleInputChange: e, handleInputFocus: s }) {
     onState: ["selectedTime", (o) => o || ""]
   });
 }
-function be({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: i }) {
+function be({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleInputFocus: i, placeholder: r }) {
   return n(
     {
       class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
     },
     [
       ge({ bind: t, required: e }),
-      pe({ placeholder: i, handleInputChange: o, handleInputFocus: r }),
+      pe({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
       f(
         {
           class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
@@ -1716,11 +1716,11 @@ function be({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleI
     ]
   );
 }
-function $({ items: t, handleTimeSelect: e, state: s, stateValue: o, pad: r = !1 }) {
+function $({ items: t, handleTimeSelect: e, state: s, stateValue: o, pad: i = !1 }) {
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
-    t.map((i) => {
-      let l = r ? i.toString().padStart(2, "0") : i.toString();
+    t.map((r) => {
+      let l = i ? r.toString().padStart(2, "0") : r.toString();
       return f({
         text: l,
         class: "hover:bg-muted/50 rounded-md pr-2 py-1",
@@ -1748,7 +1748,7 @@ function xe({ handleTimeSelect: t }) {
               [
                 // Hours column
                 $({
-                  items: Array.from({ length: 12 }, (r, i) => i + 1),
+                  items: Array.from({ length: 12 }, (i, r) => r + 1),
                   handleTimeSelect: t,
                   state: o.state,
                   stateValue: "hour",
@@ -1756,7 +1756,7 @@ function xe({ handleTimeSelect: t }) {
                 }),
                 // Minutes column
                 $({
-                  items: Array.from({ length: 60 }, (r, i) => i),
+                  items: Array.from({ length: 60 }, (i, r) => r),
                   handleTimeSelect: t,
                   state: o.state,
                   stateValue: "minute",
@@ -1783,14 +1783,14 @@ function U(t) {
   const e = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = t.match(e);
   if (!s)
     return { hour: null, minute: null, meridian: null };
-  let [, o, r, , i] = s, l = parseInt(o, 10), d = parseInt(r, 10);
-  return l < 0 || l > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (i ? (i = i.toUpperCase(), i === "PM" && l < 12 ? l += 12 : i === "AM" && l === 12 && (l = 12)) : l === 0 ? (i = "AM", l = 12) : l < 12 ? i = "AM" : l === 12 ? i = "PM" : (i = "PM", l -= 12), {
+  let [, o, i, , r] = s, l = parseInt(o, 10), d = parseInt(i, 10);
+  return l < 0 || l > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && l < 12 ? l += 12 : r === "AM" && l === 12 && (l = 12)) : l === 0 ? (r = "AM", l = 12) : l < 12 ? r = "AM" : l === 12 ? r = "PM" : (r = "PM", l -= 12), {
     hour: l.toString().padStart(2, "0"),
     minute: d.toString().padStart(2, "0"),
-    meridian: i
+    meridian: r
   });
 }
-const rs = v(
+const is = v(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1894,7 +1894,7 @@ const rs = v(
   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(
+]), Ce = c((t, e) => it(
   {
     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
@@ -1960,13 +1960,13 @@ class Se extends w {
   render() {
     const e = (d) => {
       d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: r } = R[this.type] || R.default, i = `${this.getMainClass()} ${o} ${s}`, l = this.title || "Dialog Title";
+    }, { borderColor: s, bgColor: o, iconColor: i } = R[this.type] || R.default, r = `${this.getMainClass()} ${o} ${s}`, l = this.title || "Dialog Title";
     return Ce({
-      class: i,
+      class: r,
       title: l,
       click: e,
       icon: this.icon,
-      iconColor: r,
+      iconColor: i,
       description: this.description,
       buttons: this.getButtons()
     }, this.children);
@@ -2016,7 +2016,7 @@ class Se extends w {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class is extends Se {
+class rs extends Se {
   /**
    * This will declare the props for the compiler.
    *
@@ -2073,11 +2073,11 @@ export {
   os as H,
   Ke as I,
   ns as J,
-  rs as K,
+  is as K,
   Qe as L,
   At as M,
   Ve as N,
-  is as O,
+  rs as O,
   se as P,
   Ce as Q,
   Se as R,

package/dist/index.es.js

@@ -4,11 +4,11 @@ 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 { 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-DdZZgWGr.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 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-Dldug2Ff.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 { 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/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-DdZZgWGr.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-CNuWXebM.js";
 import { A as X, P as Y, g as Z } from "./range-calendar-CAwPjNM3.js";
 export {
   s as Alert,

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-Dldug2Ff.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-D6r7Pr21.js";
 export {
   s as BasicPage,
   P as BlankPage,

package/dist/{sidebar-menu-page-Dldug2Ff.js → sidebar-menu-page-D6r7Pr21.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 f } from "./mobile-nav-wrapper-jUpomqyU.js";
+import { c as u, e as p } from "./mobile-nav-wrapper-jUpomqyU.js";
 class c extends h {
   /**
    * This will declare the props for the compiler.
@@ -19,15 +19,6 @@ class c extends h {
   render() {
     return t({ class: `${this.class || ""}` }, this.children);
   }
-  /**
-   * This will be called before the component
-   * is destroyed.
-   *
-   * @returns {void}
-   */
-  beforeDestroy() {
-    super.beforeDestroy();
-  }
 }
 class a extends c {
   /**
@@ -83,11 +74,11 @@ class w extends a {
     ]);
   }
 }
-const p = i(({ title: e, description: s }) => n({ class: "sm:py-8 px-6 md:px-5 flex flex-col" }, [
+const f = i(({ title: e, description: s }) => n({ class: "sm:py-8 px-6 md:px-5 flex flex-col" }, [
   d({ class: "scroll-m-20 text-3xl font-bold tracking-tight" }, e),
   s && o({ class: "text-base text-muted-foreground py-2 max-w-[700px]" }, s)
 ]));
-class y extends a {
+class F extends a {
   /**
    * This will declare the props for the compiler.
    *
@@ -103,7 +94,7 @@ class y extends a {
    */
   render() {
     return r([
-      p({
+      f({
         title: this.title,
         description: this.description
       }),
@@ -111,7 +102,7 @@ class y extends a {
     ]);
   }
 }
-class F extends c {
+class B extends c {
   /**
    * This will render the page.
    *
@@ -122,7 +113,7 @@ class F extends c {
     return t({ class: `flex flex-col flex-auto ${s}` }, this.children);
   }
 }
-class B extends a {
+class M extends a {
   /**
    * This will declare the props for the compiler.
    *
@@ -201,7 +192,7 @@ class B extends a {
           class: "hidden lg:flex"
         }
       ),
-      f({ title: this.title, options: s })
+      p({ title: this.title, options: s })
     ];
   }
   /**
@@ -219,8 +210,8 @@ export {
   w as F,
   r as M,
   c as P,
-  B as S,
+  M as S,
   S as a,
-  y as b,
-  F as c
+  F as b,
+  B as c
 };

package/dist/types/components/molecules/modals/drawer/drawer.d.ts

@@ -39,16 +39,6 @@ export class Drawer extends Modal {
      * @private
      */
     private gesture;
-    /**
-     * Cached reference to modal content element (set via cache property)
-     * @type {HTMLElement|null}
-     */
-    modalContent: HTMLElement | null;
-    /**
-     * Cached reference to modal body element (set via cache property)
-     * @type {HTMLElement|null}
-     */
-    modalBody: HTMLElement | null;
     /**
      * Gets extra props to pass to ModalContainer
      *

package/dist/types/components/molecules/modals/modal.d.ts

@@ -133,5 +133,7 @@ export class Modal extends Component {
      * @returns {void}
      */
     protected showModal(): void;
+    modalContent: any;
+    modalBody: any;
 }
 import { Component } from "@base-framework/base";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.1.0",
+	"version": "1.1.2",
 	"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": {