@base-framework/ui 1.0.307 → 1.0.308

package/dist/index.es.js

@@ -5,7 +5,7 @@ import { C as F, d as B, D as P, c as k, E as M, F as v, H as x, I as N, M as f,
 import { Icons as G } from "./icons.es.js";
 import { A as E, B as V, C as j, w as q, J, y as z, z as K, E as Q, G as _, D as X, m as Y, n as Z, O as $, K as aa, v as ea, c as sa, a as oa, b as ta, Q as ra, l as na, g as ia, i as la, h as pa, j as da, e as ua, k as ma, F as ga, d as Ca, f as ca, L as Ta, x as ba, M as Da, o as Ia, N as Sa, P as Fa, s as Ba, t as Pa, S as ka, q as Ma, r as va, T as xa, H as Na, I as fa, p as ya, u as ha } from "./empty-state-vu_Mhyk4.js";
 import { A as Ua, b as Wa, C as Ha, D as wa, a as Aa, F as Ra, M as Ga, P as Oa, R as Ea, c as Va, g as ja, p as qa } from "./range-calendar-CnBylqhu.js";
-import { B as za, p as Ka, C as Qa, j as _a, D as Xa, m as Ya, k as Za, H as $a, I as ae, N as ee, O as se, P as oe, S as te, n as re, o as ne, x as ie, s as le, q as pe, r as de, T as ue, t as me, w as ge, u as Ce, v as ce, l as Te, U as be, W as De, f as Ie, h as Se, i as Fe, c as Be, d as Pe, b as ke, e as Me, a as ve, g as xe } from "./signature-panel-DWBWqY8V.js";
+import { B as za, p as Ka, C as Qa, j as _a, D as Xa, m as Ya, k as Za, H as $a, I as ae, N as ee, O as se, P as oe, S as te, n as re, o as ne, x as ie, s as le, q as pe, r as de, T as ue, t as me, w as ge, u as Ce, v as ce, l as Te, U as be, W as De, f as Ie, h as Se, i as Fe, c as Be, d as Pe, b as ke, e as Me, a as ve, g as xe } from "./signature-panel-CEQCcUUN.js";
 import { B as fe, I as ye, M as he, d as Le, e as Ue, g as We, N as He, b as we, a as Ae, f as Re, P as Ge, c as Oe, S as Ee, T as Ve } from "./mobile-nav-wrapper-CWqhZ0qz.js";
 import { B as qe, a as Je, C as ze, F as Ke, b as Qe, c as _e, M as Xe, P as Ye, S as Ze } from "./sidebar-menu-page-UmKsAvjb.js";
 import { A as as, F as es, M as ss, a as os, T as ts } from "./aside-template-sUm-F2f0.js";

package/dist/organisms.es.js

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

package/dist/{signature-panel-DWBWqY8V.js → signature-panel-CEQCcUUN.js}

@@ -1,10 +1,10 @@
-import { Button as w, Div as o, On as S, Span as C, Th as z, UseParent as F, I as E, Thead as Q, Tr as G, Table as I, P as x, Li as y, Time as X, Nav as m, Ul as g, Section as L, Canvas as q } from "@base-framework/atoms";
-import { Atom as h, Component as c, Data as B, DateTime as K, router as k, NavLink as T, DataTracker as N, Jot as V, base as R, Dom as O } from "@base-framework/base";
-import { B as M, I as _ } from "./buttons-CHEs54Wl.js";
+import { Button as w, Div as o, On as S, Span as C, Th as N, UseParent as E, I as Q, Thead as G, Tr as X, Table as I, P as x, Li as y, Time as q, Nav as m, Ul as g, Section as L, Canvas as K } from "@base-framework/atoms";
+import { Atom as h, Component as c, Data as B, DateTime as V, router as k, NavLink as T, DataTracker as U, Jot as _, base as R, Dom as O } from "@base-framework/base";
+import { B as M, I as J } from "./buttons-CHEs54Wl.js";
 import { Icons as D } from "./icons.es.js";
-import { TableBody as J, DataTableBody as Z, ScrollableTableBody as ee, List as te, IntervalTimer as se } from "@base-framework/organisms";
-import { C as ae, I as ie, H as ne } from "./inputs-9udyzkHR.js";
-import { A as oe, P as le } from "./range-calendar-CnBylqhu.js";
+import { TableBody as Z, DataTableBody as ee, ScrollableTableBody as te, List as se, IntervalTimer as ae } from "@base-framework/organisms";
+import { C as ie, I as ne, H as oe } from "./inputs-9udyzkHR.js";
+import { A as le, P as re } from "./range-calendar-CnBylqhu.js";
 h((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
@@ -34,31 +34,31 @@ class ft extends c {
     return o({ class: this.class || "" }, this.children);
   }
 }
-const re = (t) => {
+const ce = (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;
-}, ce = (t) => {
+}, de = (t) => {
   const e = new Date(t.valueOf()), s = (e.getDay() + 6) % 7;
   e.setDate(e.getDate() - s + 3);
   const a = e.getFullYear(), i = new Date(a, 0, 4);
   i.setDate(i.getDate() - (i.getDay() + 6) % 7);
   const n = Math.ceil((e - i) / 6048e5) + 1;
-  return n > 52 && !re(a) ? {
+  return n > 52 && !ce(a) ? {
     weekNumber: 1,
     year: a + 1
   } : {
     weekNumber: n,
     year: a
   };
-}, de = (t, e, s) => {
+}, he = (t, e, s) => {
   if (s === 0) return [];
   const a = new Date(t, e, 0).getDate();
   return Array.from(
     { length: s },
     (i, n) => new Date(t, e - 1, a - s + n + 1)
   );
-}, he = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), W = (t, e) => {
+}, ue = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), W = (t, e) => {
   const s = new Date(e, 0, 4), a = (s.getDay() + 6) % 7, i = new Date(s);
   i.setDate(s.getDate() - a);
   const n = new Date(i);
@@ -77,11 +77,11 @@ const re = (t) => {
   for (let n = 1; n <= s; n++)
     i.push(new Date(t, e, n)), i.length === 7 && (a.push(i), i = []);
   return i.length > 0 && a.push(i), a;
-}, ue = (t, e, s) => {
+}, fe = (t, e, s) => {
   const a = /* @__PURE__ */ new Date();
   return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
-}, fe = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
-  const n = ue(t, e, s);
+}, ge = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
+  const n = fe(t, e, s);
   return w({
     text: t || "",
     disabled: !t,
@@ -92,19 +92,19 @@ const re = (t) => {
 		`,
     click: () => i(a, s)
   });
-}, 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 }, (u, b) => new Date(t, e, b + 1)), l = (i.length + n.length) % 7, d = l === 0 ? 0 : 7 - l, r = he(t, e, d), f = [...i, ...n, ...r], p = [];
+}, me = (t, e) => {
+  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = he(t, e, s), n = Array.from({ length: a }, (u, b) => new Date(t, e, b + 1)), l = (i.length + n.length) % 7, d = l === 0 ? 0 : 7 - l, r = ue(t, e, d), f = [...i, ...n, ...r], p = [];
   for (let u = 0; u < f.length; u += 7) {
-    const b = f.slice(u, u + 7), v = b.find((Y) => Y) || new Date(t, e, 1), { weekNumber: A, year: H } = ce(v);
+    const b = f.slice(u, u + 7), v = b.find((F) => F) || new Date(t, e, 1), { weekNumber: H, year: Y } = de(v);
     p.push({
-      weekNumber: A,
-      year: H,
+      weekNumber: H,
+      year: Y,
       days: b
     });
   }
   return p;
-}, me = ({ selectWeek: t }) => S("month", (e, s, { data: a }) => {
-  const { year: i, month: n, currentDate: l } = a, d = ge(i, n);
+}, pe = ({ selectWeek: t }) => S("month", (e, s, { data: a }) => {
+  const { year: i, month: n, currentDate: l } = a, d = me(i, n);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -141,7 +141,7 @@ const re = (t) => {
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
             f.map(
-              (u) => fe({
+              (u) => ge({
                 year: u?.getFullYear() || null,
                 month: u?.getMonth() || null,
                 day: u?.getDate() || null,
@@ -167,7 +167,7 @@ const re = (t) => {
     variant: "icon",
     icon: t === "Previous" ? D.chevron.single.left : D.chevron.single.right
   }
-), pe = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+), be = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
   C("[[monthName]] [[year]]"),
   $({
     label: "Previous",
@@ -231,7 +231,7 @@ class pt extends c {
    * @returns {string}
    */
   getMonthName(e) {
-    return K.monthNames[e];
+    return V.monthNames[e];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -286,38 +286,38 @@ class pt extends c {
    */
   render() {
     return o({ class: "week-calendar-container border rounded-md p-3" }, [
-      pe({
+      be({
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      me({
+      pe({
         selectWeek: (e, s) => this.selectWeek(e, s)
       })
     ]);
   }
 }
-const be = (t, e) => {
+const ke = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, ke = (t) => z({ 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) }))
-]), we = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
+}, we = (t) => N({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  E((e) => new ie({ class: "mr-2", onChange: (s, a) => ke(e, a) }))
+]), ye = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
-  return z({
+  return N({
     class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
     click: e && (() => i(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
       C(a),
-      e && E({ class: "ml-2", html: D.arrows.upDown })
+      e && Q({ class: "ml-2", html: D.arrows.upDown })
     ])
   ]);
-}, P = (t) => Q([
-  G({
+}, P = (t) => G([
+  X({
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? ke({ toggle: t.toggle }) : we({
+      (e) => e.label === "checkbox" ? we({ toggle: t.toggle }) : ye({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -326,7 +326,7 @@ const be = (t, e) => {
       })
     ]
   })
-]), ye = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new J({
+]), xe = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new Z({
   cache: "list",
   key: t,
   items: e,
@@ -336,7 +336,7 @@ const be = (t, e) => {
   skeleton: n,
   columnCount: l
 });
-class U extends c {
+class j extends c {
   /**
    * Initializes component data.
    *
@@ -422,7 +422,7 @@ class U extends c {
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          ye({
+          xe({
             // @ts-ignore
             key: this.key,
             // @ts-ignore
@@ -501,7 +501,7 @@ class U extends c {
     this.data.selectedRows = [];
   }
 }
-const xe = (t) => new Z({
+const ve = (t) => new ee({
   cache: "list",
   loadMoreItems: t.loadMoreItems,
   offset: t.offset,
@@ -514,7 +514,7 @@ const xe = (t) => new Z({
   skeleton: t.skeleton,
   columnCount: t.columnCount
 });
-class ve extends U {
+class De extends j {
   /**
    * Renders the DataTable component.
    *
@@ -530,7 +530,7 @@ class ve extends U {
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          xe({
+          ve({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -566,7 +566,7 @@ class ve extends U {
     this.list.refresh();
   }
 }
-const bt = h((t) => new ve(
+const bt = h((t) => new De(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -583,7 +583,7 @@ const bt = h((t) => new ve(
     emptyState: t.emptyState,
     skeleton: t.skeleton
   }
-)), De = (t) => new ee({
+)), Se = (t) => new te({
   cache: "list",
   scrollContainer: t.scrollContainer,
   loadMoreItems: t.loadMoreItems,
@@ -597,7 +597,7 @@ const bt = h((t) => new ve(
   skeleton: t.skeleton,
   columnCount: t.columnCount
 });
-class Se extends U {
+class Ce extends j {
   /**
    * Renders the DataTable component.
    *
@@ -613,7 +613,7 @@ class Se extends U {
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          De({
+          Se({
             // @ts-ignore
             scrollContainer: this.scrollContainer,
             // @ts-ignore
@@ -651,7 +651,7 @@ class Se extends U {
     this.list.refresh();
   }
 }
-const kt = h((t) => new Se(
+const kt = h((t) => new Ce(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -669,38 +669,38 @@ const kt = h((t) => new Se(
     emptyState: t.emptyState,
     skeleton: t.skeleton
   }
-)), Ce = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+)), Le = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
   x({ class: "text-base font-semibold leading-6 m-0" }, t),
   x({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
-])), Le = () => o({ class: "flex items-center gap-x-1.5" }, [
+])), Ie = () => 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" })
   ]),
   x({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), Ie = (t) => x({ class: "text-xs leading-5 text-muted-foreground" }, [
+]), Be = (t) => x({ class: "text-xs leading-5 text-muted-foreground" }, [
   C("Last seen "),
-  X({ datetime: t }, "3h ago")
-]), Be = (t, e) => t === "online" ? Le() : Ie(e), Te = h(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  q({ datetime: t }, "3h ago")
+]), Te = (t, e) => t === "online" ? Ie() : Be(e), Me = h(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
   x({ class: "text-sm leading-6 m-0" }, t),
-  Be(s, e)
-])), Me = (t) => t.split(" ").map((s) => s[0]).join(""), Pe = h((t) => y({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  Te(s, e)
+])), Pe = (t) => t.split(" ").map((s) => s[0]).join(""), Re = h((t) => y({ 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" }, [
-    oe({ src: t.image, alt: t.name, fallbackText: Me(t.name) }),
-    Ce({ name: t.name, email: t.email })
+    le({ src: t.image, alt: t.name, fallbackText: Pe(t.name) }),
+    Le({ name: t.name, email: t.email })
   ]),
-  Te({
+  Me({
     role: t.role,
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), wt = h((t) => new te({
+])), wt = h((t) => new se({
   cache: "list",
   key: "name",
   items: t.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: Pe
-})), Re = (t, e) => e.includes(t), Oe = (t, e, s) => t.exact ? s === e : Re(e, s), We = ({ text: t, href: e, exact: s, hidden: a }) => new T({
+  rowItem: Re
+})), Oe = (t, e) => e.includes(t), We = (t, e, s) => t.exact ? s === e : Oe(e, s), $e = ({ text: t, href: e, exact: s, hidden: a }) => new T({
   text: t,
   href: e,
   exact: s,
@@ -763,7 +763,7 @@ class yt extends c {
     for (const a of this.links) {
       if (!a.rendered)
         continue;
-      Oe(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      We(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -793,7 +793,7 @@ class yt extends c {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a, hidden: i }) {
-    const n = We({ text: e, href: s, exact: a, hidden: i });
+    const n = $e({ text: e, href: s, exact: a, hidden: i });
     return this.links.push(n), n;
   }
   /**
@@ -811,7 +811,7 @@ const xt = h((t) => {
     M({ variant: "back", class: "ghost", ...t })
   ]);
 });
-class j extends c {
+class A extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -898,13 +898,13 @@ class j extends c {
     return this.children;
   }
 }
-N.addType("dockableOverlay", (t) => {
+U.addType("dockableOverlay", (t) => {
   if (!t)
     return;
   const e = t.component;
   e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
 });
-class vt extends j {
+class vt extends A {
   /**
    * This will stop presistence.
    *
@@ -970,7 +970,7 @@ class vt extends j {
    * @returns {void}
    */
   afterSetup() {
-    N.add(
+    U.add(
       this.container,
       "dockableOverlay",
       {
@@ -1013,7 +1013,7 @@ class vt extends j {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class Dt extends j {
+class Dt extends A {
   /**
    * This will get the overlay type.
    *
@@ -1032,7 +1032,7 @@ class Dt extends j {
     this.container = e, this.initialize();
   }
 }
-const $e = h(({ index: t, click: e, state: s }, a) => y({
+const ze = h(({ index: t, click: e, state: s }, a) => y({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -1041,11 +1041,11 @@ const $e = h(({ index: t, click: e, state: s }, a) => y({
     }]
   ],
   click: () => e(t)
-}, a)), ze = h(({ selectOption: t, state: e }) => g({
+}, a)), Ne = h(({ selectOption: t, state: e }) => g({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (s, a) => $e({ index: a, click: t, state: e }, s.label)]
-})), Ne = h((t) => o({ class: "relative flex items-center" }, [
-  ie({
+  for: ["filteredOptions", (s, a) => ze({ index: a, click: t, state: e }, s.label)]
+})), Ue = h((t) => o({ class: "relative flex items-center" }, [
+  ne({
     cache: "input",
     class: t.class ?? "",
     placeholder: t.placeholder ?? "Search...",
@@ -1061,22 +1061,22 @@ const $e = h(({ index: t, click: e, state: s }, a) => y({
     ]
   }),
   t.icon && o({ class: "absolute flex right-0 mr-2" }, [
-    _(t.icon)
+    J(t.icon)
   ])
-])), Ue = (t) => o({
+])), je = (t) => o({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (e, s, a) => {
     if (e)
-      return new le({
+      return new re({
         cache: "dropdown",
         parent: a,
         button: a.input,
         size: "xl"
       }, [
-        ze(t)
+        Ne(t)
       ]);
   }]
-}), St = V(
+}), St = _(
   {
     /**
      * This will set up the data object.
@@ -1173,7 +1173,7 @@ const $e = h(({ index: t, click: e, state: s }, a) => y({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        Ne({
+        Ue({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1185,7 +1185,7 @@ const $e = h(({ index: t, click: e, state: s }, a) => y({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        Ue({
+        je({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1196,7 +1196,7 @@ const $e = h(({ index: t, click: e, state: s }, a) => y({
       ]);
     }
   }
-), je = (t) => y(
+), Ae = (t) => y(
   {
     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"]]
@@ -1208,8 +1208,8 @@ const $e = h(({ index: t, click: e, state: s }, a) => y({
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), Ae = (t, e) => (t.callBack = e, je(t)), He = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  g({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ae(e, t.callBack)] })
+), He = (t, e) => (t.callBack = e, Ae(t)), Ye = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  g({ class: "flex flex-auto flex-row", map: [t.options, (e) => He(e, t.callBack)] })
 ]);
 class Ct extends c {
   /**
@@ -1228,7 +1228,7 @@ class Ct extends c {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      He({
+      Ye({
         class: this.class,
         options: this.options,
         callBack: e
@@ -1298,7 +1298,7 @@ class Ct extends c {
     };
   }
 }
-const Ye = (t) => y(
+const Fe = (t) => y(
   {
     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"]]
@@ -1311,8 +1311,8 @@ const Ye = (t) => y(
       disabled: t.disabled
     }, t.label)
   ]
-), Fe = (t, e) => (t.callBack = e, Ye(t)), Ee = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  g({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
+), Ee = (t, e) => (t.callBack = e, Fe(t)), Qe = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  g({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ee(e, t.callBack)] })
 ]);
 class Lt extends c {
   /**
@@ -1330,7 +1330,7 @@ class Lt extends c {
    */
   render() {
     const e = this.select.bind(this);
-    return Ee({
+    return Qe({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1356,17 +1356,17 @@ class Lt extends c {
     };
   }
 }
-const Qe = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ge = (t, e) => {
+const Ge = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Xe = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : Qe(s, e);
-}, Xe = ({ text: t, href: e, exact: s }) => new T({
+  return t.exact ? e === s : Ge(s, e);
+}, qe = ({ text: t, href: e, exact: s }) => new T({
   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 qe extends c {
+class Ke extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -1417,7 +1417,7 @@ class qe extends c {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
     for (const i of this.links)
-      if (i.rendered !== !1 && (s = Ge(i, e), s === !0)) {
+      if (i.rendered !== !1 && (s = Xe(i, e), s === !0)) {
         this.updateLink(i, !0);
         break;
       }
@@ -1449,7 +1449,7 @@ class qe extends c {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a }) {
-    const i = Xe({ text: e, href: s, exact: a });
+    const i = qe({ text: e, href: s, exact: a });
     return this.links.push(i), i;
   }
   /**
@@ -1477,7 +1477,7 @@ class It extends c {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new qe({
+      new Ke({
         class: this.class,
         options: this.options
       }),
@@ -1507,7 +1507,7 @@ class It extends c {
     return s;
   }
 }
-const Ke = (t) => y(
+const Ve = (t) => y(
   {
     class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
     dataSet: ["selected", ["state", t.value, "active"]]
@@ -1519,8 +1519,8 @@ const Ke = (t) => y(
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), Ve = (t, e) => (t.callBack = e, Ke(t)), _e = (t) => m({ class: `border-b border-border ${t.class}` }, [
-  g({ class: "flex flex-row items-center", map: [t.options, (e) => Ve(e, t.callBack)] })
+), _e = (t, e) => (t.callBack = e, Ve(t)), Je = (t) => m({ class: `border-b border-border ${t.class}` }, [
+  g({ class: "flex flex-row items-center", map: [t.options, (e) => _e(e, t.callBack)] })
 ]);
 class Bt extends c {
   /**
@@ -1539,7 +1539,7 @@ class Bt extends c {
   render() {
     const e = this.select.bind(this);
     return o({ class: "underlined-button-tab-panel" }, [
-      _e({
+      Je({
         class: this.class,
         options: this.options,
         callBack: e
@@ -1600,7 +1600,7 @@ class Bt extends c {
     };
   }
 }
-const Je = (t) => y(
+const Ze = (t) => y(
   {
     class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
     dataSet: ["selected", ["state", t.value, "active"]]
@@ -1613,8 +1613,8 @@ const Je = (t) => y(
       disabled: t.disabled
     }, t.label)
   ]
-), Ze = (t, e) => (t.callBack = e, Je(t)), et = (t) => m({ class: `border-b border-border ${t.class}` }, [
-  g({ class: "flex flex-row items-center", map: [t.options, (e) => Ze(e, t.callBack)] })
+), et = (t, e) => (t.callBack = e, Ze(t)), tt = (t) => m({ class: `border-b border-border ${t.class}` }, [
+  g({ class: "flex flex-row items-center", map: [t.options, (e) => et(e, t.callBack)] })
 ]);
 class Tt extends c {
   /**
@@ -1632,7 +1632,7 @@ class Tt extends c {
    */
   render() {
     const e = this.select.bind(this);
-    return et({
+    return tt({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1658,9 +1658,9 @@ class Tt extends c {
     };
   }
 }
-const tt = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), st = (t, e) => {
+const z = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), st = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : tt(s, e);
+  return console.log(s, e === s, t.exact, z(s, e)), t.exact ? e === s : z(s, e);
 }, at = ({ text: t, href: e, exact: s }) => new T({
   text: t,
   href: e,
@@ -1717,7 +1717,7 @@ class it extends c {
    */
   updateLinks(e) {
     let s = !1, a = this.links[0];
-    this.deactivateAllLinks();
+    this.deactivateAllLinks(), console.log(e);
     for (const i of this.links)
       if (i.rendered !== !1 && (s = st(i, e), s === !0)) {
         this.updateLink(i, !0);
@@ -1819,7 +1819,7 @@ class nt extends c {
   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 se(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 ae(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.
@@ -1827,7 +1827,7 @@ class nt extends c {
    * @returns {object} Layout definition for the canvas.
    */
   render() {
-    return q({
+    return K({
       style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
     });
   }
@@ -2052,7 +2052,7 @@ class Pt extends c {
    */
   render() {
     return o({ class: "signature-panel relative flex flex-auto overflow-hidden select-none" }, [
-      ne({
+      oe({
         cache: "hiddenInput",
         required: !0,
         bind: this.path + ".data"
@@ -2115,35 +2115,35 @@ class Pt extends c {
 }
 export {
   xt as B,
-  ke as C,
-  ye as D,
-  we as H,
+  we as C,
+  xe as D,
+  ye as H,
   Dt as I,
   yt as N,
-  j as O,
+  A as O,
   ft as P,
   kt as S,
   P as T,
-  Pe as U,
+  Re as U,
   pt as W,
-  he as a,
+  ue as a,
   W as b,
-  ce as c,
+  de as c,
   gt as d,
   mt as e,
-  fe as f,
-  de as g,
-  me as h,
-  pe as i,
-  U as j,
+  ge as f,
+  he as g,
+  pe as h,
+  be as i,
+  j,
   bt as k,
   wt as l,
   vt as m,
   St as n,
-  Ne as o,
+  Ue as o,
   Ct as p,
   Lt as q,
-  qe as r,
+  Ke as r,
   It as s,
   Bt as t,
   Tt as u,

package/package.json

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