@base-framework/ui 1.0.171 → 1.0.173

package/dist/{confirmation-DY9zk34b.js → confirmation-RwpuUtXL.js}

@@ -34,8 +34,8 @@ const P = {
 }, le = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   g({ html: e })
 ]), ie = (e) => _({ class: "font-semibold" }, e), ae = (e) => b({ class: "text-sm text-muted-foreground" }, e), mt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: r, bgColor: l, iconColor: i } = P[o] || P.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${l} ${r}` }, [
+  const { borderColor: l, bgColor: r, iconColor: i } = P[o] || P.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
     // Icon and content
     s && le(s, i),
     n({ class: "flex flex-col" }, [
@@ -70,9 +70,7 @@ class ce extends p {
 }
 const de = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), ue = (e) => a({ class: "flex w-4 h-4", html: e }), he = (e) => a({ class: "flex-auto" }, e), me = (e, t) => O({
   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: (s, o) => {
-    e.click && e.click(s, o), t(e);
-  }
+  click: () => t(e)
 }, [
   e.icon && ue(e.icon),
   he(e.label),
@@ -176,15 +174,15 @@ const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   invalid: s,
   input: t
 } : o)), ke = c((e, t) => {
-  const r = U(t, (l) => {
-    l.target.checkValidity() && e.setError(null);
-  }, (l) => {
-    e.setError(l.target.validationMessage);
+  const l = U(t, (r) => {
+    r.target.checkValidity() && e.setError(null);
+  }, (r) => {
+    e.setError(r.target.validationMessage);
   });
   return n({
     ...e,
     class: "w-full"
-  }, r);
+  }, l);
 }), gt = w(
   {
     /**
@@ -206,8 +204,8 @@ const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
      * @returns {object}
      */
     render() {
-      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, r = (l) => {
-        this.state.error = l, this.state.hasError = !!l;
+      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, l = (r) => {
+        this.state.error = r, this.state.hasError = !!r;
       };
       return n({ class: "flex flex-auto space-y-4" }, [
         xe([
@@ -216,10 +214,10 @@ const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
             id: t,
             name: e,
             value: this.state.value,
-            setError: r
+            setError: l
           }, this.children),
           o && ye({ id: this.getId("description") }, o),
-          n({ onState: ["error", (l) => l && ve(l)] })
+          n({ onState: ["error", (r) => r && ve(r)] })
         ])
       ]);
     }
@@ -237,11 +235,11 @@ const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
 ]), wt = (e, t) => n({ class: "flex" }, [
   a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
   a(t)
-]), Ie = ({ title: e, description: t, back: s, icon: o, options: r = [] }) => B({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), Ie = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => B({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
-  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (l, i) => i.close() }),
+  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, i) => i.close() }),
   /**
    * Icon
    */
@@ -254,7 +252,7 @@ const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
       A({ class: "text-lg font-semibold m-0 truncate" }, e),
       t && n({ class: "text-sm text-muted-foreground truncate" }, t)
     ]),
-    ...r
+    ...l
   ])
 ]), Te = c((e, t) => n({
   popover: "manual",
@@ -292,8 +290,9 @@ class yt extends p {
         description: o,
         options: this.headerOptions(),
         buttons: this.getButtons(),
-        onSubmit: (r) => {
-          this.onSubmit && this.onSubmit(r), this.destroy();
+        onSubmit: (l) => {
+          let r = !0;
+          this.onSubmit && (r = this.onSubmit(l)), r !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -401,6 +400,14 @@ class yt extends p {
   open() {
     $e(this), this.showModal();
   }
+  /**
+   * This will destroy the modal.
+   *
+   * @returns {void}
+   */
+  close() {
+    this.destroy();
+  }
   /**
    * This will show the modal.
    *
@@ -480,14 +487,14 @@ class Le extends ce {
    * @returns {object}
    */
   render() {
-    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, l = this.getChildren(o);
-    return r ? Be({
-      href: r,
+    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(o);
+    return l ? Be({
+      href: l,
       class: `${t} ${s}`
-    }, l) : Me({
+    }, r) : Me({
       close: this.close.bind(this),
       class: `${t} ${s}`
-    }, l);
+    }, r);
   }
   /**
    * This will be called after the component is set up.
@@ -596,8 +603,8 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
-  click: (o, { state: r }) => {
-    r.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Fe(e);
+  click: (o, { state: l }) => {
+    l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Fe(e);
   }
 }, [
   x(s),
@@ -669,7 +676,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
         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;
+          s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, t, this);
         }
       }, [
         J({
@@ -780,8 +787,8 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       "bg-primary": e,
       "shadow-md": e
     }],
-    click: (s, { data: o, onClick: r }) => {
-      o.activeIndex = e, r && r(e);
+    click: (s, { data: o, onClick: l }) => {
+      o.activeIndex = e, l && l(e);
     }
   })
 ]), Ye = (e, t) => Array.from({ length: e }, (s, o) => Ve({
@@ -840,10 +847,10 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
 ]), _e = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
   v(
     "open",
-    (s, o, r) => s ? new D({
+    (s, o, l) => s ? new D({
       cache: "dropdown",
-      parent: r,
-      button: r.button
+      parent: l,
+      button: l.button
     }, [
       qe(e, t)
     ]) : null
@@ -964,11 +971,11 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   icon: u.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), Ge = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Q(({ state: r }) => C({
-  value: ["[[count]]", r],
+}), Ge = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Q(({ state: l }) => C({
+  value: ["[[count]]", l],
   bind: e,
-  blur: (l, { state: i }) => {
-    let d = parseInt(l.target.value, 10);
+  blur: (r, { state: i }) => {
+    let d = parseInt(r.target.value, 10);
     isNaN(d) && (d = t ?? 0), t !== void 0 && (d = Math.max(d, t)), s !== void 0 && (d = Math.min(d, s)), i.count = d;
   },
   class: "flex flex-auto text-lg font-medium bg-transparent text-center border min-w-0",
@@ -1027,14 +1034,14 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   g({ html: u.calendar.days })
 ]), Qe = ({ handleDateSelect: e, blockPriorDates: t }) => v(
   "open",
-  (s, o, r) => s ? new D({
+  (s, o, l) => s ? new D({
     cache: "dropdown",
-    parent: r,
-    button: r.panel,
+    parent: l,
+    button: l.panel,
     size: "fit"
   }, [
     new se({
-      selectedDate: r.state.selectedDate,
+      selectedDate: l.state.selectedDate,
       selectedCallBack: e,
       blockPriorDates: t
     })
@@ -1087,8 +1094,8 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   new re({
     dateTime: e,
     filter: s || ((o) => {
-      const r = $.getLocalTime(o, !0, !1, t);
-      return $.getTimeFrame(r);
+      const l = $.getLocalTime(o, !0, !1, t);
+      return $.getTimeFrame(l);
     })
   })
 ]);
@@ -1115,11 +1122,11 @@ function Ze({ bind: e, required: t, toggleOpen: s }) {
     ]
   );
 }
-function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: r = !1 }) {
+function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1 }) {
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
-    e.map((l) => {
-      let i = r ? l.toString().padStart(2, "0") : l.toString();
+    e.map((r) => {
+      let i = l ? r.toString().padStart(2, "0") : r.toString();
       return m({
         text: i,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
@@ -1151,7 +1158,7 @@ function et({ handleTimeSelect: e }) {
                   [
                     // Hours column
                     T({
-                      items: Array.from({ length: 12 }, (r, l) => l + 1),
+                      items: Array.from({ length: 12 }, (l, r) => r + 1),
                       handleTimeSelect: e,
                       state: o.state,
                       stateValue: "hour",
@@ -1159,7 +1166,7 @@ function et({ handleTimeSelect: e }) {
                     }),
                     // Minutes column
                     T({
-                      items: Array.from({ length: 60 }, (r, l) => l),
+                      items: Array.from({ length: 60 }, (l, r) => r),
                       handleTimeSelect: e,
                       state: o.state,
                       stateValue: "minute",
@@ -1188,11 +1195,11 @@ function E(e) {
   const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
   if (!s)
     return { hour: null, minute: null, meridian: null };
-  let [, o, r, , l] = s, i = parseInt(o, 10), d = parseInt(r, 10);
-  return i < 0 || i > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && i < 12 ? i += 12 : l === "AM" && i === 12 && (i = 12)) : i === 0 ? (l = "AM", i = 12) : i < 12 ? l = "AM" : i === 12 ? l = "PM" : (l = "PM", i -= 12), {
+  let [, o, l, , r] = s, i = parseInt(o, 10), d = parseInt(l, 10);
+  return i < 0 || i > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && i < 12 ? i += 12 : r === "AM" && i === 12 && (i = 12)) : i === 0 ? (r = "AM", i = 12) : i < 12 ? r = "AM" : i === 12 ? r = "PM" : (r = "PM", i -= 12), {
     hour: i.toString().padStart(2, "0"),
     minute: d.toString().padStart(2, "0"),
-    meridian: l
+    meridian: r
   });
 }
 const Lt = w(
@@ -1234,10 +1241,10 @@ const Lt = w(
      * @returns {object}
      */
     render() {
-      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: r }) => {
-        if (s && (this.state.hour = s), o && (this.state.minute = o), r && (this.state.meridian = r), this.state.hour && this.state.minute && this.state.meridian) {
-          const l = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-          this.state.selectedTime = l, this.state.open = !1, this.input.value = l, typeof this.change == "function" && this.change(l);
+      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: l }) => {
+        if (s && (this.state.hour = s), o && (this.state.minute = o), l && (this.state.meridian = l), this.state.hour && this.state.minute && this.state.meridian) {
+          const r = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
+          this.state.selectedTime = r, this.state.open = !1, this.input.value = r, typeof this.change == "function" && this.change(r);
         }
       };
       return n(
@@ -1325,13 +1332,13 @@ class rt extends p {
   render() {
     const t = (d) => {
       d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: r } = j[this.type] || j.default, l = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
+    }, { borderColor: s, bgColor: o, iconColor: l } = j[this.type] || j.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
     return ot({
-      class: l,
+      class: r,
       title: i,
       click: t,
       icon: this.icon,
-      iconColor: r,
+      iconColor: l,
       description: this.description,
       buttons: this.getButtons()
     }, this.children);

package/dist/index.es.js

@@ -3,9 +3,9 @@ import { B as g, I as T, L as c } from "./buttons-Cm9etaEG.js";
 import { C as D, d as b, D as S, c as I, E as B, F as P, H as F, I as M, M as k, N, P as v, R as f, S as x, T as y, a as h, b as W, U as H, W as L } from "./inputs-Dmu4Z-7-.js";
 import { V as w, a as U } from "./veil-D4dRxILB.js";
 import { Icons as O } from "./icons.es.js";
-import { A as G, B as V, C as j, t as q, E as z, v as J, w as _, x as K, D as Q, j as X, k as Y, H as Z, G as $, s as aa, c as sa, a as ea, b as oa, i as ta, g as ra, e as na, h as ia, F as la, d as pa, f as ua, u as ma, M as da, l as ga, N as Ta, P as ca, p as Ca, q as Da, S as ba, n as Sa, o as Ia, T as Ba, y as Pa, z as Fa, m as Ma, r as ka } from "./confirmation-DY9zk34b.js";
+import { A as G, B as V, C as j, t as q, E as z, v as J, w as _, x as K, D as Q, j as X, k as Y, H as Z, G as $, s as aa, c as sa, a as ea, b as oa, i as ta, g as ra, e as na, h as ia, F as la, d as pa, f as ua, u as ma, M as da, l as ga, N as Ta, P as ca, p as Ca, q as Da, S as ba, n as Sa, o as Ia, T as Ba, y as Pa, z as Fa, m as Ma, r as ka } from "./confirmation-RwpuUtXL.js";
 import { A as va, b as fa, C as xa, D as ya, a as ha, F as Wa, M as Ha, P as La, c as Aa, g as wa, p as Ua } from "./calendar-DQXME-2u.js";
-import { B as Oa, o as Ea, C as Ga, j as Va, D as ja, m as qa, k as za, H as Ja, I as _a, N as Ka, O as Qa, P as Xa, S as Ya, n as Za, s as $a, r as as, p as ss, q as es, T as os, l as ts, U as rs, W as ns, f as is, h as ls, i as ps, c as us, d as ms, b as ds, e as gs, a as Ts, g as cs } from "./signature-panel-BMKPAG1c.js";
+import { B as Oa, o as Ea, C as Ga, j as Va, D as ja, m as qa, k as za, H as Ja, I as _a, N as Ka, O as Qa, P as Xa, S as Ya, n as Za, s as $a, r as as, p as ss, q as es, T as os, l as ts, U as rs, W as ns, f as is, h as ls, i as ps, c as us, d as ms, b as ds, e as gs, a as Ts, g as cs } from "./signature-panel-xXbYWejE.js";
 import { B as Ds, I as bs, M as Ss, d as Is, e as Bs, g as Ps, N as Fs, b as Ms, a as ks, f as Ns, P as vs, c as fs, S as xs, T as ys } from "./mobile-nav-wrapper-Dj67Pb8l.js";
 import { B as Ws, a as Hs, C as Ls, F as As, b as ws, c as Us, M as Rs, P as Os, S as Es } from "./sidebar-menu-page-BVryQj2Z.js";
 import { A as Vs, F as js, M as qs, a as zs, T as Js } from "./aside-template-McEj_Gxc.js";

package/dist/molecules.es.js

@@ -1,4 +1,4 @@
-import { A as o, B as t, C as e, t as i, E as r, v as n, w as m, x as l, D as S, j as u, k as D, H as c, G as C, s as d, c as g, a as p, b as F, i as T, g as A, e as P, h as f, F as w, d as b, f as B, u as I, M, l as x, N as y, P as k, p as v, q as N, S as h, n as E, o as L, T as R, y as U, z as j, m as q, r as z } from "./confirmation-DY9zk34b.js";
+import { A as o, B as t, C as e, t as i, E as r, v as n, w as m, x as l, D as S, j as u, k as D, H as c, G as C, s as d, c as g, a as p, b as F, i as T, g as A, e as P, h as f, F as w, d as b, f as B, u as I, M, l as x, N as y, P as k, p as v, q as N, S as h, n as E, o as L, T as R, y as U, z as j, m as q, r as z } from "./confirmation-RwpuUtXL.js";
 import { A as H, P as O, g as _ } from "./calendar-DQXME-2u.js";
 export {
   o as Alert,

package/dist/organisms.es.js

@@ -1,4 +1,4 @@
-import { B as s, o as t, C as o, j as r, D as l, m as n, k as i, H as b, I as d, N as v, O as D, P as g, S as p, n as u, s as N, r as k, p as C, q as T, T as c, l as M, U as m, W as y, f as B, h as W, i as h, c as H, d as P, b as S, e as f, a as x, g as I } from "./signature-panel-BMKPAG1c.js";
+import { B as s, o as t, C as o, j as r, D as l, m as n, k as i, H as b, I as d, N as v, O as D, P as g, S as p, n as u, s as N, r as k, p as C, q as T, T as c, l as M, U as m, W as y, f as B, h as W, i as h, c as H, d as P, b as S, e as f, a as x, g as I } from "./signature-panel-xXbYWejE.js";
 import { b as O, C as F, D as U, a as G, F as j, M as q, c as w, p as z } from "./calendar-DQXME-2u.js";
 import { B as E, I as J, M as K, d as Q, e as R, g as V, N as X, b as Y, a as Z, f as _, P as $, c as aa, S as ea, T as sa } from "./mobile-nav-wrapper-Dj67Pb8l.js";
 export {

package/dist/{signature-panel-BMKPAG1c.js → signature-panel-xXbYWejE.js}

@@ -1,4 +1,4 @@
-import { Button as x, Div as o, On as H, Span as v, Th as P, UseParent as F, I as E, Thead as Q, Tr as X, Table as I, P as p, Li as D, Time as q, Nav as S, Ul as w, Section as O, Canvas as K } from "@base-framework/atoms";
+import { Button as x, Div as o, On as H, Span as v, Th as P, UseParent as F, I as E, Thead as Q, Tr as X, Table as I, P as p, Li as D, Time as q, Nav as S, Ul as b, Section as O, Canvas as K } from "@base-framework/atoms";
 import { Atom as d, Component as h, Data as L, DateTime as G, router as y, NavLink as z, DataTracker as $, Jot as V, base as B, Dom as M } from "@base-framework/base";
 import { B as C, I as _ } from "./buttons-Cm9etaEG.js";
 import { Icons as k } from "./icons.es.js";
@@ -95,7 +95,7 @@ const re = (t) => {
 }, ge = (t, e) => {
   const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = de(t, e, s), n = Array.from({ length: a }, (r, m) => new Date(t, e, m + 1)), l = (i.length + n.length) % 7, u = l === 0 ? 0 : 7 - l, c = he(t, e, u), f = [...i, ...n, ...c], g = [];
   for (let r = 0; r < f.length; r += 7) {
-    const m = f.slice(r, r + 7), b = m.find((Y) => Y) || new Date(t, e, 1), { weekNumber: A, year: U } = ce(b);
+    const m = f.slice(r, r + 7), w = m.find((Y) => Y) || new Date(t, e, 1), { weekNumber: A, year: U } = ce(w);
     g.push({
       weekNumber: A,
       year: U,
@@ -296,11 +296,11 @@ class ot extends h {
     ]);
   }
 }
-const we = (t, e) => {
+const be = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, be = (t) => P({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
-  F((e) => new ae({ class: "mr-2", onChange: (s, a) => we(e, a) }))
+}, we = (t) => P({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  F((e) => new ae({ class: "mr-2", onChange: (s, a) => be(e, a) }))
 ]), ye = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
   return P({
@@ -317,7 +317,7 @@ const we = (t, e) => {
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? be({ toggle: t.toggle }) : ye({
+      (e) => e.label === "checkbox" ? we({ toggle: t.toggle }) : ye({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -692,7 +692,7 @@ class dt extends h {
     return S(
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
-        w({
+        b({
           class: "flex space-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
@@ -805,7 +805,7 @@ class j extends h {
    * @returns {string}
    */
   getClassName() {
-    return "overlay fixed top-[0px] left-0 bottom-0 right-0 flex-col bg-background z-20 lg:z-10 flex flex-auto lg:left-[64px] lg:top-0 overflow-y-auto will-change-contents " + (this.class || "");
+    return "overlay absolute top-[0px] left-0 bottom-0 right-0 flex-col bg-background z-20 lg:z-10 flex flex-auto lg:left-[64px] lg:top-0 overflow-y-visible will-change-contents " + (this.class || "");
   }
   /**
    * This will setup and render the component.
@@ -1002,7 +1002,7 @@ const ze = d(({ index: t, click: e, state: s }, a) => D({
     }]
   ],
   click: () => e(t)
-}, a)), $e = d(({ selectOption: t, state: e }) => w({
+}, a)), $e = d(({ selectOption: t, state: e }) => b({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
   for: ["filteredOptions", (s, a) => ze({ index: a, click: t, state: e }, s.label)]
 })), Ne = d((t) => o({ class: "relative flex items-center" }, [
@@ -1165,7 +1165,7 @@ const ze = d(({ index: t, click: e, state: s }, a) => D({
     }, t.label)
   ]
 ), Ue = (t, e) => (t.callBack = e, Ae(t)), Ye = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  w({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ue(e, t.callBack)] })
+  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ue(e, t.callBack)] })
 ]);
 class mt extends h {
   /**
@@ -1269,7 +1269,7 @@ const He = (t) => D(
     }, t.label)
   ]
 ), Fe = (t, e) => (t.callBack = e, He(t)), Ee = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  w({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
+  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
 ]);
 class pt extends h {
   /**
@@ -1346,7 +1346,7 @@ class Ke extends h {
    */
   render() {
     return S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
-      w({
+      b({
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
@@ -1419,7 +1419,7 @@ class Ke extends h {
     this.links = [];
   }
 }
-class wt extends h {
+class bt extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -1614,8 +1614,8 @@ class Ge extends h {
     const e = this.canvas, s = this.container, a = M.getSize(s), i = this.targetSize, n = i.width, l = i.height;
     let u = n + "px", c = l + "px";
     if (this.width = e.width = n, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
-      const f = a.width, g = a.height, r = f / n, m = g / l, b = Math.min(r, m);
-      u = n * b + "px", c = l * b + "px";
+      const f = a.width, g = a.height, r = f / n, m = g / l, w = Math.min(r, m);
+      u = n * w + "px", c = l * w + "px";
     }
     e.style.width = u, e.style.height = c;
   }
@@ -1691,7 +1691,7 @@ class Ge extends h {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class bt extends h {
+class wt extends h {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1771,7 +1771,7 @@ class bt extends h {
 }
 export {
   ht as B,
-  be as C,
+  we as C,
   ke as D,
   ye as H,
   ft as I,
@@ -1799,6 +1799,6 @@ export {
   mt as o,
   pt as p,
   Ke as q,
-  wt as r,
-  bt as s
+  bt as r,
+  wt as s
 };

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

@@ -113,6 +113,12 @@ export class Modal extends Component {
      * @returns {void}
      */
     open(): void;
+    /**
+     * This will destroy the modal.
+     *
+     * @returns {void}
+     */
+    close(): void;
     /**
      * This will show the modal.
      *

package/package.json

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