@base-framework/ui 1.0.50 → 1.0.53

package/dist/{calendar-CYExSMEO.js → calendar-B1Xo1swq.js}

@@ -3,8 +3,8 @@ import { Component as N, Data as z, Atom as k, DateTime as j } from "@base-frame
 import { B as A } from "./buttons-CVEwmPAi.js";
 import { Icons as P } from "./icons.es.js";
 const W = (e, t) => {
-  const n = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, s = t.getBoundingClientRect(), o = 10, r = window.scrollX, l = window.scrollY;
-  let c = n.left + r, f = n.bottom + l;
+  const n = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, s = t.getBoundingClientRect(), o = 10, a = window.scrollX, l = window.scrollY;
+  let c = n.left + a, f = n.bottom + l;
   const h = window.innerHeight - n.bottom, d = n.top;
   return c + s.width > window.innerWidth && (c = window.innerWidth - s.width - o), h < s.height && d > h ? f = n.top + l - s.height - o : h < s.height && (f = n.bottom + l - (s.height - h) - o), { x: c, y: f };
 };
@@ -52,7 +52,7 @@ class lt extends N {
     const t = this.getSize();
     return i({
       class: `absolute inset-auto fadeIn mt-2 rounded-md p-0 shadow-lg bg-popover min-h-12 backdrop:bg-transparent text-inherit r z-30 ${t}`,
-      popover: "auto",
+      popover: "manual",
       toggle: (n, { state: s }) => n.newState === "closed" ? s.open = !1 : null,
       style: "top: [[position.y]]px; left: [[position.x]]px"
     }, this.children);
@@ -173,10 +173,10 @@ const H = k(({ src: e, alt: t }) => e ? I({
     ]
   );
 }, ct = k(({ src: e, alt: t, fallbackText: n, watcherFallback: s, size: o }) => {
-  const r = E(o);
+  const a = E(o);
   return i(
     {
-      class: `relative flex items-center justify-center ${r}`
+      class: `relative flex items-center justify-center ${a}`
     },
     [
       H({ src: e, alt: t }),
@@ -192,7 +192,7 @@ const H = k(({ src: e, alt: t }) => e ? I({
     currentDate: n,
     date: s,
     isToday: o,
-    isOutsideMonth: r,
+    isOutsideMonth: a,
     select: l,
     disabled: c
   } = e;
@@ -200,7 +200,7 @@ const H = k(({ src: e, alt: t }) => e ? I({
     {
       class: `
 				flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md
-				${V(o, n, r, s)}
+				${V(o, n, a, s)}
 				hover:bg-muted/50 hover:text-muted-foreground focus:z-10
                 disabled:pointer-events-none disabled:opacity-50
 			`,
@@ -212,9 +212,9 @@ const H = k(({ src: e, alt: t }) => e ? I({
     t.toString()
   );
 }, b = (e, t, n, s) => e === s.date && t === s.month && n === s.year, Z = (e, t, n, s = !1) => {
-  const { year: o, month: r } = e, l = p(o, r, e.date), c = new Date(o, r, 1).getDay(), f = new Date(o, r + 1, 0).getDate(), h = new Date(o, r, 0).getDate(), d = [], D = r === 0 ? 11 : r - 1, w = r === 0 ? o - 1 : o;
-  for (let a = c - 1; a >= 0; a--) {
-    const u = h - a, g = b(u, D, w, t), m = new Date(w, D, u) < new Date(t.year, t.month, t.date), F = s && m;
+  const { year: o, month: a } = e, l = p(o, a, e.date), c = new Date(o, a, 1).getDay(), f = new Date(o, a + 1, 0).getDate(), h = new Date(o, a, 0).getDate(), d = [], D = a === 0 ? 11 : a - 1, w = a === 0 ? o - 1 : o;
+  for (let r = c - 1; r >= 0; r--) {
+    const u = h - r, g = b(u, D, w, t), m = new Date(w, D, u) < new Date(t.year, t.month, t.date), F = s && m;
     d.push(
       C({
         day: u,
@@ -227,13 +227,13 @@ const H = k(({ src: e, alt: t }) => e ? I({
       })
     );
   }
-  for (let a = 1; a <= f; a++) {
-    const u = b(a, r, o, t), g = new Date(o, r, a) < new Date(t.year, t.month, t.date), m = s && g;
+  for (let r = 1; r <= f; r++) {
+    const u = b(r, a, o, t), g = new Date(o, a, r) < new Date(t.year, t.month, t.date), m = s && g;
     d.push(
       C({
-        day: a,
+        day: r,
         currentDate: l,
-        date: p(o, r, a),
+        date: p(o, a, r),
         isToday: u,
         isOutsideMonth: !1,
         select: n,
@@ -241,14 +241,14 @@ const H = k(({ src: e, alt: t }) => e ? I({
       })
     );
   }
-  const y = r === 11 ? 0 : r + 1, v = r === 11 ? o + 1 : o, O = (7 - d.length % 7) % 7;
-  for (let a = 1; a <= O; a++) {
-    const u = b(a, y, v, t), g = new Date(v, y, a) < new Date(t.year, t.month, t.date), m = s && g;
+  const y = a === 11 ? 0 : a + 1, v = a === 11 ? o + 1 : o, O = (7 - d.length % 7) % 7;
+  for (let r = 1; r <= O; r++) {
+    const u = b(r, y, v, t), g = new Date(v, y, r) < new Date(t.year, t.month, t.date), m = s && g;
     d.push(
       C({
-        day: a,
+        day: r,
         currentDate: l,
-        date: p(v, y, a),
+        date: p(v, y, r),
         isToday: u,
         isOutsideMonth: !0,
         select: n,

package/dist/{confirmation-BrFWql_V.js → confirmation-Cg0cRcMv.js}

@@ -1,6 +1,6 @@
-import { Div as n, I as f, H5 as _, P as b, Li as O, Span as a, Ul as V, Button as h, OnState as v, Label as R, Form as W, H2 as B, Footer as $, Header as M, A as Y, H3 as G, Checkbox as J, Nav as K, Input as C, Time as Q, Dialog as X } from "@base-framework/atoms";
+import { Div as n, H5 as _, P as b, I as f, Li as O, Span as a, Ul as V, Button as h, OnState as v, Label as R, Form as W, H2 as B, Header as $, Footer as M, A as Y, H3 as G, Checkbox as J, Nav as K, Input as C, Time as Q, Dialog as X } from "@base-framework/atoms";
 import { Atom as c, Component as p, Html as L, Dom as Z, base as ee, Data as k, Builder as q, Jot as S, DateTime as A } from "@base-framework/base";
-import { P as D, b as te } from "./calendar-CYExSMEO.js";
+import { P as D, b as te } from "./calendar-B1Xo1swq.js";
 import { B as u, I as x } from "./buttons-CVEwmPAi.js";
 import { Icons as d } from "./icons.es.js";
 import { a as w } from "./veil-gN57SpXV.js";
@@ -232,7 +232,7 @@ const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
 ])), pt = (e, t) => n({ class: "flex justify-between" }, [
   a({ class: "text-muted-foreground" }, e),
   a(t)
-]), De = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => M({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), De = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => $({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
@@ -261,7 +261,7 @@ const pe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   Se({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s) => e.onSubmit && e.onSubmit() }, [
     De(e),
     n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
-    $({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
+    M({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
 ])), Te = (e) => q.render(e, app.root);
 class xt extends p {
@@ -439,7 +439,7 @@ const z = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Ae = (e) => M({ class: "flex justify-center" }, [
+}, Ae = (e) => $({ class: "flex justify-center" }, [
   G({ class: "text-lg font-bold mb-0" }, e)
 ]), Be = c(({ href: e, class: t }, s) => Y({
   class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
@@ -528,7 +528,7 @@ class Me extends ae {
             this.title && Ae(this.title)
           ]),
           b({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
-          (this.primary || this.secondary) && $({ class: "margin-top-24 flex align-center" }, this.getButtons())
+          (this.primary || this.secondary) && M({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
       u({
@@ -1222,7 +1222,7 @@ const $t = w(
   }
 ), et = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
   x({ size: "lg" }, e)
-]), tt = ({ title: e }) => M({ class: "flex flex-auto items-center" }, [
+]), tt = ({ title: e }) => $({ class: "flex flex-auto items-center" }, [
   B({ class: "text-lg font-semibold" }, e)
 ]), st = c((e, t) => X(
   {
@@ -1242,7 +1242,7 @@ const $t = w(
           e.description && b({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
           n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
-        e.buttons && $({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
+        e.buttons && M({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
       ])
     ])
   ]

package/dist/index.es.js

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

package/dist/molecules.es.js

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

package/dist/organisms.es.js

@@ -1,5 +1,5 @@
-import { B as s, m as o, C as t, j as r, D as n, l, H as i, I as d, N as b, O as v, P as g, S as p, q as u, p as N, n as k, o as C, T as D, k as M, U as T, W as c, f as B, h as m, i as y, c as W, d as h, b as H, e as P, a as S, g as f } from "./signature-panel-CoHRfAjg.js";
-import { b as I, C as L, D as O, a as F, F as U, M as G, c as j, p as q } from "./calendar-CYExSMEO.js";
+import { B as s, m as o, C as t, j as r, D as n, l, H as i, I as d, N as b, O as v, P as g, S as p, q as u, p as N, n as k, o as C, T as D, k as M, U as T, W as c, f as B, h as m, i as y, c as W, d as h, b as H, e as P, a as S, g as f } from "./signature-panel-B3v8V9MU.js";
+import { b as I, C as L, D as O, a as F, F as U, M as G, c as j, p as q } from "./calendar-B1Xo1swq.js";
 import { B as z, I as A, M as E, d as J, e as K, g as Q, N as R, b as V, a as X, f as Y, P as Z, c as _, S as $, T as aa } from "./mobile-nav-wrapper-BE_hr65B.js";
 export {
   s as BackButton,

package/dist/{signature-panel-CoHRfAjg.js → signature-panel-B3v8V9MU.js}

@@ -1,22 +1,22 @@
 import { Button as y, Div as o, On as Y, Span as v, Th as P, UseParent as F, I as E, Thead as H, Tr as Q, Table as X, P as m, 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 u, Component as g, Data as L, DateTime as G, Jot as R, router as x, NavLink as M, DataTracker as z, base as B, Dom as I } from "@base-framework/base";
+import { Atom as h, Component as u, Data as L, DateTime as G, Jot as R, router as x, NavLink as M, DataTracker as z, base as B, Dom as I } from "@base-framework/base";
 import { B as C, I as N } from "./buttons-CVEwmPAi.js";
 import { Icons as w } from "./icons.es.js";
 import { TableBody as V, List as _, IntervalTimer as J } from "@base-framework/organisms";
 import { C as Z, I as ee, H as te } from "./inputs-CzHSmZKP.js";
-import { A as se, P as ne } from "./calendar-CYExSMEO.js";
-u((t, e) => ({
+import { A as se, P as ne } from "./calendar-B1Xo1swq.js";
+h((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-u(({ value: t, label: e }) => y({
+h(({ 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"]],
   click: (s, { state: n }) => n.performance = t
 }, e));
-class Ve extends g {
+class Ve extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -93,9 +93,9 @@ const ae = (t) => {
     click: () => a(n, s)
   });
 }, de = (t, e) => {
-  const s = new Date(t, e, 1).getDay(), n = new Date(t, e + 1, 0).getDate(), a = oe(t, e, s), i = Array.from({ length: n }, (r, p) => new Date(t, e, p + 1)), l = (a.length + i.length) % 7, d = l === 0 ? 0 : 7 - l, c = le(t, e, d), h = [...a, ...i, ...c], f = [];
-  for (let r = 0; r < h.length; r += 7) {
-    const p = h.slice(r, r + 7), k = p.find((U) => U) || new Date(t, e, 1), { weekNumber: j, year: A } = ie(k);
+  const s = new Date(t, e, 1).getDay(), n = new Date(t, e + 1, 0).getDate(), a = oe(t, e, s), i = Array.from({ length: n }, (r, p) => new Date(t, e, p + 1)), l = (a.length + i.length) % 7, d = l === 0 ? 0 : 7 - l, c = le(t, e, d), g = [...a, ...i, ...c], f = [];
+  for (let r = 0; r < g.length; r += 7) {
+    const p = g.slice(r, r + 7), k = p.find((U) => U) || new Date(t, e, 1), { weekNumber: j, year: A } = ie(k);
     f.push({
       weekNumber: j,
       year: A,
@@ -120,7 +120,7 @@ const ae = (t) => {
       ),
       // Render each "week" row
       ...d.map(
-        ({ weekNumber: c, days: h, year: f }) => o({
+        ({ weekNumber: c, days: g, year: f }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
             ring: c
@@ -140,14 +140,12 @@ const ae = (t) => {
           // The 7 cells for each day in the row
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
-            h.map(
+            g.map(
               (r) => ce({
                 year: (r == null ? void 0 : r.getFullYear()) || null,
                 month: (r == null ? void 0 : r.getMonth()) || null,
                 day: (r == null ? void 0 : r.getDate()) || null,
-                week: h,
                 weekNumber: c,
-                currentDate: l,
                 selectWeek: t
               })
             )
@@ -180,7 +178,7 @@ const ae = (t) => {
     click: t
   })
 ]);
-class Ze extends g {
+class Ze extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -479,7 +477,7 @@ const ge = (t, e) => {
       this.data.selectedRows = [];
     }
   }
-), be = u(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+), be = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
   m({ class: "text-base font-semibold leading-6 m-0" }, t),
   m({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
 ])), ke = () => o({ class: "flex items-center gap-x-1.5" }, [
@@ -490,10 +488,10 @@ const ge = (t, e) => {
 ]), xe = (t) => m({ class: "text-xs leading-5 text-muted-foreground" }, [
   v("Last seen "),
   q({ datetime: t }, "3h ago")
-]), ye = (t, e) => t === "online" ? ke() : xe(e), ve = u(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+]), ye = (t, e) => t === "online" ? ke() : xe(e), ve = h(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
   m({ class: "text-sm leading-6 m-0" }, t),
   ye(s, e)
-])), De = (t) => t.split(" ").map((s) => s[0]).join(""), Se = u((t) => D({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+])), De = (t) => t.split(" ").map((s) => s[0]).join(""), Se = h((t) => D({ 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" }, [
     se({ src: t.image, alt: t.name, fallbackText: De(t.name) }),
     be({ name: t.name, email: t.email })
@@ -503,7 +501,7 @@ const ge = (t, e) => {
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), tt = u((t) => new _({
+])), tt = h((t) => new _({
   cache: "list",
   key: "name",
   items: t.users,
@@ -517,7 +515,7 @@ const ge = (t, e) => {
   dataSet: ["selected", ["state", !0, "active"]],
   class: `${n ? "hidden" : "inline-flex"} items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring focus-visible:ring-offset-background hover:bg-primary hover:text-primary-foreground disabled:opacity-50 disabled:pointer-events-none data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm`
 });
-class st extends g {
+class st extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -615,7 +613,7 @@ class st extends g {
     this.links = [];
   }
 }
-const nt = u((t) => {
+const nt = h((t) => {
   const e = t.margin || "m-4 ml-0";
   return o({ class: `flex-none ${e}` }, [
     C({
@@ -633,7 +631,7 @@ const nt = u((t) => {
     ])
   ]);
 });
-class $ extends g {
+class $ extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -854,7 +852,7 @@ class it extends $ {
     this.container = e, this.initialize();
   }
 }
-const Ie = u(({ index: t, click: e, state: s }, n) => D({
+const Ie = h(({ index: t, click: e, state: s }, n) => D({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -863,10 +861,10 @@ const Ie = u(({ index: t, click: e, state: s }, n) => D({
     }]
   ],
   click: () => e(t)
-}, n)), Te = u(({ selectOption: t, state: e }) => b({
+}, n)), Te = h(({ selectOption: t, state: e }) => b({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
   for: ["filteredOptions", (s, n) => Ie({ index: n, click: t, state: e }, s.label)]
-})), We = u((t) => o({ class: "relative flex items-center" }, [
+})), We = h((t) => o({ class: "relative flex items-center" }, [
   ee({
     cache: "input",
     placeholder: t.placeholder ?? "Search...",
@@ -1028,7 +1026,7 @@ const Ie = u(({ index: t, click: e, state: s }, n) => D({
 ), Re = (t, e) => (t.callBack = e, Oe(t)), Me = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
   b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Re(e, t.callBack)] })
 ]);
-class lt extends g {
+class lt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1132,7 +1130,7 @@ const ze = (t) => D(
 ), Ne = (t, e) => (t.callBack = e, ze(t)), $e = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
   b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ne(e, t.callBack)] })
 ]);
-class rt extends g {
+class rt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1185,7 +1183,7 @@ const je = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ae = (t, e) => {
   dataSet: ["selected", ["state", !0, "active"]],
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 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"
 });
-class Ye extends g {
+class Ye extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1280,7 +1278,7 @@ class Ye extends g {
     this.links = [];
   }
 }
-class ct extends g {
+class ct extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1326,7 +1324,7 @@ class ct extends g {
     return s;
   }
 }
-class Fe extends g {
+class Fe extends u {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1393,8 +1391,8 @@ class Fe extends g {
     let s, n;
     const a = this.canvas, i = a.width / parseInt(a.style.width), l = a.getBoundingClientRect();
     if (e.touches && e.touches.length) {
-      const h = e.touches[0];
-      s = h.clientX, n = h.clientY;
+      const g = e.touches[0];
+      s = g.clientX, n = g.clientY;
     } else
       s = e.x || e.clientX, n = e.y || e.clientY;
     const d = parseInt((s - l.left) * i), c = parseInt((n - l.top) * i);
@@ -1475,7 +1473,7 @@ class Fe extends g {
     const e = this.canvas, s = this.container, n = I.getSize(s), a = this.targetSize, i = a.width, l = a.height;
     let d = i + "px", c = l + "px";
     if (this.width = e.width = i, this.height = e.height = l, n.width !== 0 && n.height !== 0) {
-      const h = n.width, f = n.height, r = h / i, p = f / l, k = Math.min(r, p);
+      const g = n.width, f = n.height, r = g / i, p = f / l, k = Math.min(r, p);
       d = i * k + "px", c = l * k + "px";
     }
     e.style.width = d, e.style.height = c;
@@ -1552,7 +1550,7 @@ class Fe extends g {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class dt extends g {
+class dt extends u {
   /**
    * Sets up default properties for the signature panel.
    *

package/package.json

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