@base-framework/ui 1.0.48 → 1.0.52

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

@@ -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: 'auto',
       toggle: (n, { state: s }) => n.newState === "closed" ? s.open = !1 : null,
       style: "top: [[position.y]]px; left: [[position.x]]px"
     }, this.children);

package/dist/{confirmation-BrFWql_V.js → confirmation-Drz3H-3y.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-PB6ymJ8S.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-zC3mmGzc.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-Drz3H-3y.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-PB6ymJ8S.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-DVFpUbvC.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-Drz3H-3y.js";
+import { A as O, P as R, g as _ } from "./calendar-PB6ymJ8S.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-zC3mmGzc.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-DVFpUbvC.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-PB6ymJ8S.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-zC3mmGzc.js → signature-panel-DVFpUbvC.js}

@@ -1,22 +1,22 @@
-import { Button as v, Div as o, On as U, Span as y, Th as P, UseParent as Y, I as F, Thead as E, Tr as H, Table as Q, P as m, Li as D, Time as X, Nav as S, Ul as b, Section as O, Canvas as q } from "@base-framework/atoms";
-import { Atom as u, Component as g, Data as L, DateTime as K, Jot as R, router as k, NavLink as M, base as B, Dom as I } from "@base-framework/base";
-import { B as C, I as z } from "./buttons-CVEwmPAi.js";
+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 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 G, List as V, IntervalTimer as _ } from "@base-framework/organisms";
-import { C as J, I as Z, H as ee } from "./inputs-CzHSmZKP.js";
-import { A as te, P as se } from "./calendar-CYExSMEO.js";
-u((t, e) => ({
+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-PB6ymJ8S.js";
+h((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-u(({ value: t, label: e }) => v({
+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 Ge extends g {
+class Ve extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -34,36 +34,36 @@ class Ge extends g {
     return o({ class: this.class || "" }, this.children);
   }
 }
-const ne = (t) => {
+const ae = (t) => {
   const e = new Date(t, 11, 31), s = new Date(t, 0, 1);
   return e.getDay() === 4 || // December 31 is a Thursday
   s.getDay() === 4;
-}, ae = (t) => {
+}, ie = (t) => {
   const e = new Date(t.valueOf()), s = (e.getDay() + 6) % 7;
   e.setDate(e.getDate() - s + 3);
   const n = e.getFullYear(), a = new Date(n, 0, 4);
   a.setDate(a.getDate() - (a.getDay() + 6) % 7);
   const i = Math.ceil((e - a) / 6048e5) + 1;
-  return i > 52 && !ne(n) ? {
+  return i > 52 && !ae(n) ? {
     weekNumber: 1,
     year: n + 1
   } : {
     weekNumber: i,
     year: n
   };
-}, ie = (t, e, s) => {
+}, oe = (t, e, s) => {
   if (s === 0) return [];
   const n = new Date(t, e, 0).getDate();
   return Array.from(
     { length: s },
     (a, i) => new Date(t, e - 1, n - s + i + 1)
   );
-}, oe = (t, e, s) => Array.from({ length: s }, (n, a) => new Date(t, e + 1, a + 1)), T = (t, e) => {
+}, le = (t, e, s) => Array.from({ length: s }, (n, a) => new Date(t, e + 1, a + 1)), T = (t, e) => {
   const s = new Date(e, 0, 4), n = (s.getDay() + 6) % 7, a = new Date(s);
   a.setDate(s.getDate() - n);
   const i = new Date(a);
   return i.setDate(a.getDate() + (t - 1) * 7), i;
-}, Ve = (t, e) => {
+}, _e = (t, e) => {
   const s = new Date(t, e, 1).getDay(), n = new Date(t, e + 1, 0).getDate(), a = [];
   let i = [];
   for (let l = 1 - s; l <= n; l++) {
@@ -71,18 +71,18 @@ const ne = (t) => {
     i.push(l > 0 ? d : null), (i.length === 7 || l === n) && (a.push([...i]), i = []);
   }
   return a;
-}, _e = (t, e) => {
+}, Je = (t, e) => {
   const s = new Date(t, e + 1, 0).getDate(), n = [];
   let a = [];
   for (let i = 1; i <= s; i++)
     a.push(new Date(t, e, i)), a.length === 7 && (n.push(a), a = []);
   return a.length > 0 && n.push(a), n;
-}, le = (t, e, s) => {
+}, re = (t, e, s) => {
   const n = /* @__PURE__ */ new Date();
   return n.getDate() === t && n.getMonth() === e && n.getFullYear() === s;
-}, re = ({ day: t, month: e, year: s, weekNumber: n, selectWeek: a }) => {
-  const i = le(t, e, s);
-  return v({
+}, ce = ({ day: t, month: e, year: s, weekNumber: n, selectWeek: a }) => {
+  const i = re(t, e, s);
+  return y({
     text: t || "",
     disabled: !t,
     class: `
@@ -92,19 +92,19 @@ const ne = (t) => {
 		`,
     click: () => a(n, s)
   });
-}, ce = (t, e) => {
-  const s = new Date(t, e, 1).getDay(), n = new Date(t, e + 1, 0).getDate(), a = ie(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 = oe(t, e, d), h = [...a, ...i, ...c], f = [];
-  for (let r = 0; r < h.length; r += 7) {
-    const p = h.slice(r, r + 7), x = p.find((A) => A) || new Date(t, e, 1), { weekNumber: $, year: j } = ae(x);
+}, 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), 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: $,
-      year: j,
+      weekNumber: j,
+      year: A,
       days: p
     });
   }
   return f;
-}, de = ({ selectWeek: t }) => U("month", (e, s, { data: n }) => {
-  const { year: a, month: i, currentDate: l } = n, d = ce(a, i);
+}, he = ({ selectWeek: t }) => Y("month", (e, s, { data: n }) => {
+  const { year: a, month: i, currentDate: l } = n, d = de(a, i);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -115,12 +115,12 @@ const ne = (t) => {
           class: "grid grid-cols-7 col-span-7 text-center text-muted-foreground items-center"
         },
         ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
-          (c) => y({ class: "px-1 py-1", text: c })
+          (c) => v({ class: "px-1 py-1", text: c })
         )
       ),
       // 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 ne = (t) => {
           // The 7 cells for each day in the row
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
-            h.map(
-              (r) => re({
+            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
               })
             )
@@ -169,8 +167,8 @@ const ne = (t) => {
     variant: "icon",
     icon: t === "Previous" ? w.chevron.single.left : w.chevron.single.right
   }
-), he = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
-  y("[[monthName]] [[year]]"),
+), ue = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+  v("[[monthName]] [[year]]"),
   W({
     label: "Previous",
     click: e
@@ -180,7 +178,7 @@ const ne = (t) => {
     click: t
   })
 ]);
-class Je extends g {
+class Ze extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -233,7 +231,7 @@ class Je extends g {
    * @returns {string}
    */
   getMonthName(e) {
-    return K.monthNames[e];
+    return G.monthNames[e];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -288,36 +286,36 @@ class Je extends g {
    */
   render() {
     return o({ class: "week-calendar-container border rounded-md bg-background p-3" }, [
-      he({
+      ue({
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      de({
+      he({
         selectWeek: (e, s) => this.selectWeek(e, s)
       })
     ]);
   }
 }
-const ue = (t, e) => {
+const ge = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, ge = (t) => P({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
-  Y((e) => new J({ class: "mr-2", onChange: (s, n) => ue(e, n) }))
-]), fe = ({ align: t, sortable: e, key: s, label: n, sort: a, class: i }) => {
+}, fe = (t) => P({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  F((e) => new Z({ class: "mr-2", onChange: (s, n) => ge(e, n) }))
+]), pe = ({ align: t, sortable: e, key: s, label: n, sort: a, class: i }) => {
   const l = t || "justify-start";
   return P({
     class: `cursor-pointer py-3 px-4 text-base ${i || ""}`,
     click: e && (() => a(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
-      y(n),
-      e && F({ class: "ml-2", html: w.arrows.upDown })
+      v(n),
+      e && E({ class: "ml-2", html: w.arrows.upDown })
     ])
   ]);
-}, pe = (t) => E([
-  H({
+}, me = (t) => H([
+  Q({
     class: "text-muted-foreground border-b",
-    map: [t.headers, (e) => e.label === "checkbox" ? ge({ toggle: t.toggle }) : fe({
+    map: [t.headers, (e) => e.label === "checkbox" ? fe({ toggle: t.toggle }) : pe({
       align: e.align,
       sortable: e.sortable,
       key: e.key,
@@ -325,13 +323,13 @@ const ue = (t, e) => {
       sort: t.sort
     })]
   })
-]), me = ({ key: t, rows: e, selectRow: s, rowItem: n }) => new G({
+]), we = ({ key: t, rows: e, selectRow: s, rowItem: n }) => new V({
   cache: "table",
   key: t,
   items: e,
   rowItem: (a) => n(a, s),
   class: "divide-y divide-border"
-}), Ze = R(
+}), et = R(
   {
     /**
      * Initializes component data.
@@ -401,12 +399,12 @@ const ue = (t, e) => {
       const t = this.rows, e = this.border !== !1 ? "border" : "";
       return o({ class: "w-full" }, [
         o({ class: `w-full rounded-md ${e} overflow-x-auto` }, [
-          Q({ class: "w-full" }, [
+          X({ class: "w-full" }, [
             // @ts-ignore
-            this.headers && pe({ headers: this.headers, sort: (s) => this.sortRows(s) }),
+            this.headers && me({ headers: this.headers, sort: (s) => this.sortRows(s) }),
             // @ts-ignore
             this.customHeader ?? null,
-            me({
+            we({
               // @ts-ignore
               key: this.key,
               rows: t,
@@ -479,45 +477,45 @@ const ue = (t, e) => {
       this.data.selectedRows = [];
     }
   }
-), we = 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)
-])), be = () => o({ class: "flex items-center gap-x-1.5" }, [
+])), ke = () => o({ class: "flex items-center gap-x-1.5" }, [
   o({ class: "flex-none rounded-full bg-emerald-500/20 p-1" }, [
     o({ class: "h-1.5 w-1.5 rounded-full bg-emerald-500" })
   ]),
   m({ class: "text-xs leading-5 text-gray-500" }, "Online")
 ]), xe = (t) => m({ class: "text-xs leading-5 text-muted-foreground" }, [
-  y("Last seen "),
-  X({ datetime: t }, "3h ago")
-]), ke = (t, e) => t === "online" ? be() : xe(e), ve = u(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  v("Last seen "),
+  q({ datetime: t }, "3h ago")
+]), 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),
-  ke(s, e)
-])), ye = (t) => t.split(" ").map((s) => s[0]).join(""), De = u((t) => D({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  ye(s, e)
+])), 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" }, [
-    te({ src: t.image, alt: t.name, fallbackText: ye(t.name) }),
-    we({ name: t.name, email: t.email })
+    se({ src: t.image, alt: t.name, fallbackText: De(t.name) }),
+    be({ name: t.name, email: t.email })
   ]),
   ve({
     role: t.role,
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), et = u((t) => new V({
+])), tt = h((t) => new _({
   cache: "list",
   key: "name",
   items: t.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: De
-})), Se = (t, e) => e.includes(t), Le = (t, e, s) => t.exact ? s === e : Se(e, s), Ce = ({ text: t, href: e, exact: s, hidden: n }) => new M({
+  rowItem: Se
+})), Le = (t, e) => e.includes(t), Ce = (t, e, s) => t.exact ? s === e : Le(e, s), Be = ({ text: t, href: e, exact: s, hidden: n }) => new M({
   text: t,
   href: e,
   exact: s,
   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 tt extends g {
+class st extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -545,7 +543,7 @@ class tt extends g {
           class: "flex space-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
-            value: ["[[path]]", k.data],
+            value: ["[[path]]", x.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -558,7 +556,7 @@ class tt extends g {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -573,7 +571,7 @@ class tt extends g {
     for (const n of this.links) {
       if (!n.rendered)
         continue;
-      Le(n, n.getLinkPath(), e) ? (this.updateLink(n, !0), s = !0) : this.updateLink(n, !1);
+      Ce(n, n.getLinkPath(), e) ? (this.updateLink(n, !0), s = !0) : this.updateLink(n, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -603,7 +601,7 @@ class tt extends g {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: n, hidden: a }) {
-    const i = Ce({ text: e, href: s, exact: n, hidden: a });
+    const i = Be({ text: e, href: s, exact: n, hidden: a });
     return this.links.push(i), i;
   }
   /**
@@ -615,7 +613,7 @@ class tt extends g {
     this.links = [];
   }
 }
-const st = u((t) => {
+const nt = h((t) => {
   const e = t.margin || "m-4 ml-0";
   return o({ class: `flex-none ${e}` }, [
     C({
@@ -629,11 +627,11 @@ const st = u((t) => {
         t.backUrl && app.navigate(t.backUrl);
       }
     }, [
-      z(w.arrows.left)
+      N(w.arrows.left)
     ])
   ]);
 });
-class N extends g {
+class $ extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -720,7 +718,13 @@ class N extends g {
     return this.children;
   }
 }
-class nt extends N {
+z.addType("dockableOverlay", (t) => {
+  if (!t)
+    return;
+  const e = t.component;
+  e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
+});
+class at extends $ {
   /**
    * This will stop presistence.
    *
@@ -786,7 +790,13 @@ class nt extends N {
    * @returns {void}
    */
   afterSetup() {
-    this.onResize();
+    z.add(
+      this.container,
+      "dockableOverlay",
+      {
+        component: this
+      }
+    ), this.onResize();
   }
   /**
    * This will setup the overlay events.
@@ -823,7 +833,7 @@ class nt extends N {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class at extends N {
+class it extends $ {
   /**
    * This will get the overlay type.
    *
@@ -842,7 +852,7 @@ class at extends N {
     this.container = e, this.initialize();
   }
 }
-const Be = 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", {
@@ -851,11 +861,11 @@ const Be = u(({ index: t, click: e, state: s }, n) => D({
     }]
   ],
   click: () => e(t)
-}, n)), Ie = 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) => Be({ index: n, click: t, state: e }, s.label)]
-})), Te = u((t) => o({ class: "relative flex items-center" }, [
-  Z({
+  for: ["filteredOptions", (s, n) => Ie({ index: n, click: t, state: e }, s.label)]
+})), We = h((t) => o({ class: "relative flex items-center" }, [
+  ee({
     cache: "input",
     placeholder: t.placeholder ?? "Search...",
     bind: [t.state, "searchQuery"],
@@ -866,22 +876,22 @@ const Be = u(({ index: t, click: e, state: s }, n) => D({
     keydown: (e) => typeof t.handleKeyDown == "function" && t.handleKeyDown(e)
   }),
   t.icon && o({ class: "absolute right-0 mr-2" }, [
-    z(t.icon)
+    N(t.icon)
   ])
-])), We = (t) => o({
+])), Pe = (t) => o({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (e, s, n) => {
     if (e)
-      return new se({
+      return new ne({
         cache: "dropdown",
         parent: n,
         button: n.input,
         size: "xl"
       }, [
-        Ie(t)
+        Te(t)
       ]);
   }]
-}), it = R(
+}), ot = R(
   {
     /**
      * This will set up the data object.
@@ -978,7 +988,7 @@ const Be = u(({ index: t, click: e, state: s }, n) => D({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        Te({
+        We({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -990,7 +1000,7 @@ const Be = u(({ index: t, click: e, state: s }, n) => D({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        We({
+        Pe({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1001,22 +1011,22 @@ const Be = u(({ index: t, click: e, state: s }, n) => D({
       ]);
     }
   }
-), Pe = (t) => D(
+), Oe = (t) => D(
   {
     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",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    v({
+    y({
       class: "flex flex-auto justify-center items-center px-3 py-1.5",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), Oe = (t, e) => (t.callBack = e, Pe(t)), Re = (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) => Oe(e, t.callBack)] })
+), 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 ot extends g {
+class lt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1033,7 +1043,7 @@ class ot extends g {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      Re({
+      Me({
         class: this.class,
         options: this.options,
         callBack: e
@@ -1104,23 +1114,23 @@ class ot extends g {
     };
   }
 }
-const Me = (t) => D(
+const ze = (t) => D(
   {
     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",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    v({
+    y({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 disabled:opacity-50 disabled:cursor-not-allowed",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
       disabled: t.disabled
     }, t.label)
   ]
-), ze = (t, e) => (t.callBack = e, Me(t)), Ne = (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) => ze(e, t.callBack)] })
+), 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 lt extends g {
+class rt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1136,7 +1146,7 @@ class lt extends g {
    */
   render() {
     const e = this.select.bind(this);
-    return Ne({
+    return $e({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1163,17 +1173,17 @@ class lt extends g {
     };
   }
 }
-const $e = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), je = (t, e) => {
+const je = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ae = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : $e(s, e);
-}, Ae = ({ text: t, href: e, exact: s }) => new M({
+  return t.exact ? e === s : je(s, e);
+}, Ue = ({ text: t, href: e, exact: s }) => new M({
   text: t,
   href: e,
   exact: s,
   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 Ue extends g {
+class Ye extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1199,7 +1209,7 @@ class Ue extends g {
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", k.data],
+          value: ["[[path]]", x.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1211,7 +1221,7 @@ class Ue extends g {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1224,7 +1234,7 @@ class Ue extends g {
     let s = !1, n = this.links[0];
     this.deactivateAllLinks();
     for (const a of this.links)
-      if (a.rendered !== !1 && (s = je(a, e), s === !0)) {
+      if (a.rendered !== !1 && (s = Ae(a, e), s === !0)) {
         this.updateLink(a, !0);
         break;
       }
@@ -1256,7 +1266,7 @@ class Ue extends g {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: n }) {
-    const a = Ae({ text: e, href: s, exact: n });
+    const a = Ue({ text: e, href: s, exact: n });
     return this.links.push(a), a;
   }
   /**
@@ -1268,7 +1278,7 @@ class Ue extends g {
     this.links = [];
   }
 }
-class rt extends g {
+class ct extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1284,7 +1294,7 @@ class rt extends g {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new Ue({
+      new Ye({
         class: this.class,
         options: this.options
       }),
@@ -1314,7 +1324,7 @@ class rt extends g {
     return s;
   }
 }
-class Ye extends g {
+class Fe extends u {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1324,7 +1334,7 @@ class Ye extends g {
   onCreated() {
     this.lineWidth = this.lineWidth || 3, this.lineColor = this.lineColor || "#000000", this.canvas = null, this.ctx = null, this.status = "stopped";
     const e = 1e3 / 60;
-    this.timer = new _(e, this.draw.bind(this)), this.width = 0, this.height = 0, this.signed = !1, this.mouse = { x: 0, y: 0, status: "up" }, this.margin = this.margin || { x: 40, y: 60 }, this.targetSize = this.targetSize || { width: 740, height: 345 }, this.baseLineWidth = this.baseLineWidth || 2, this.baseStrokeColor = this.baseStrokeColor || "#000000";
+    this.timer = new J(e, this.draw.bind(this)), this.width = 0, this.height = 0, this.signed = !1, this.mouse = { x: 0, y: 0, status: "up" }, this.margin = this.margin || { x: 40, y: 60 }, this.targetSize = this.targetSize || { width: 740, height: 345 }, this.baseLineWidth = this.baseLineWidth || 2, this.baseStrokeColor = this.baseStrokeColor || "#000000";
   }
   /**
    * Renders a <canvas> element.
@@ -1332,7 +1342,7 @@ class Ye extends g {
    * @returns {object} Layout definition for the canvas.
    */
   render() {
-    return q({
+    return K({
       style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
     });
   }
@@ -1381,8 +1391,8 @@ class Ye 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);
@@ -1463,8 +1473,8 @@ class Ye 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, x = Math.min(r, p);
-      d = i * x + "px", c = l * x + "px";
+      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;
   }
@@ -1540,7 +1550,7 @@ class Ye extends g {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class ct extends g {
+class dt extends u {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1557,7 +1567,7 @@ class ct extends g {
    */
   render() {
     return o({ class: "signature-panel relative flex flex-auto overflow-hidden select-none" }, [
-      ee({
+      te({
         cache: "hiddenInput",
         required: !0,
         bind: this.path + ".data"
@@ -1569,7 +1579,7 @@ class ct extends g {
           click: this.reset.bind(this)
         })
       ]),
-      new Ye({
+      new Fe({
         cache: "canvasLayer",
         margin: this.margin,
         targetSize: this.targetSize,
@@ -1619,33 +1629,33 @@ class ct extends g {
   }
 }
 export {
-  st as B,
-  ge as C,
-  me as D,
-  fe as H,
-  at as I,
-  tt as N,
-  N as O,
-  Ge as P,
-  it as S,
-  pe as T,
-  De as U,
-  Je as W,
-  oe as a,
+  nt as B,
+  fe as C,
+  we as D,
+  pe as H,
+  it as I,
+  st as N,
+  $ as O,
+  Ve as P,
+  ot as S,
+  me as T,
+  Se as U,
+  Ze as W,
+  le as a,
   T as b,
-  ae as c,
-  Ve as d,
-  _e as e,
-  re as f,
-  ie as g,
-  de as h,
-  he as i,
-  Ze as j,
-  et as k,
-  nt as l,
-  ot as m,
-  lt as n,
-  Ue as o,
-  rt as p,
-  ct as q
+  ie as c,
+  _e as d,
+  Je as e,
+  ce as f,
+  oe as g,
+  he as h,
+  ue as i,
+  et as j,
+  tt as k,
+  at as l,
+  lt as m,
+  rt as n,
+  Ye as o,
+  ct as p,
+  dt as q
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.48",
+	"version": "1.0.52",
 	"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": {
@@ -40,7 +40,7 @@
 		"typescript": "^5.4.2",
 		"vite": "^5.4.9"
 	},
-	"types": "dist/types/ui.d.ts",
+	"types": "./dist/types/**/*.d.ts",
 	"files": [
 		"package.json",
 		"readme.md",