@base-framework/ui 1.0.274 → 1.0.275

package/dist/index.es.js

@@ -5,7 +5,7 @@ import { C as b, d as F, D as P, c as B, E as k, F as M, H as f, I as x, M as N,
 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 la, i as ia, h as pa, j as ma, e as ua, k as da, F as ga, d as Ca, f as ca, L as Ta, x as Da, M as Ia, o as Sa, N as ba, P as Fa, s as Pa, t as Ba, S as ka, q as Ma, r as fa, T as xa, H as Na, I as va, p as ya, u as ha } from "./empty-state-CPWpkmxa.js";
 import { A as Wa, b as Ha, C as Aa, D as Ra, a as wa, F as Ua, M as Ga, P as Oa, R as Ea, c as Va, g as ja, p as qa } from "./range-calendar-DW0cMOJy.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, t as le, s as ie, q as pe, r as me, T as ue, l as de, U as ge, W as Ce, f as ce, h as Te, i as De, c as Ie, d as Se, b as be, e as Fe, a as Pe, g as Be } from "./signature-panel-0LEOmHrf.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, t as le, s as ie, q as pe, r as me, T as ue, l as de, U as ge, W as Ce, f as ce, h as Te, i as De, c as Ie, d as Se, b as be, e as Fe, a as Pe, g as Be } from "./signature-panel-D00yXjos.js";
 import { B as Me, I as fe, M as xe, d as Ne, e as ve, g as ye, N as he, b as Le, a as We, f as He, P as Ae, c as Re, S as we, T as Ue } from "./mobile-nav-wrapper-C7RyGC5a.js";
 import { B as Oe, a as Ee, C as Ve, F as je, b as qe, c as Je, M as ze, P as Ke, S as Qe } from "./sidebar-menu-page-BtUJdw-T.js";
 import { A as Xe, F as Ye, M as Ze, a as $e, T as as } from "./aside-template-McEj_Gxc.js";

package/dist/organisms.es.js

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

package/dist/{signature-panel-0LEOmHrf.js → signature-panel-D00yXjos.js}

@@ -1,8 +1,8 @@
-import { Button as x, Div as o, On as v, Span as D, Th as O, UseParent as E, I as Q, Thead as X, Tr as z, Td as q, Table as C, P as p, Li as S, Time as K, Nav as I, Ul as w, Section as $, Canvas as _ } from "@base-framework/atoms";
-import { Atom as d, Component as h, Data as L, DateTime as G, router as k, NavLink as N, DataTracker as A, Jot as V, base as R, Dom as M } from "@base-framework/base";
-import { B as T, I as J } from "./buttons-BKLL4I6r.js";
+import { Button as x, Div as o, On as v, Span as D, Th as z, UseParent as X, I as q, Thead as K, Tr as $, Td as _, Table as C, P as w, Li as S, Time as G, Nav as I, Ul as p, Section as N, Canvas as V } from "@base-framework/atoms";
+import { Atom as d, Component as h, Data as L, DateTime as J, router as k, NavLink as A, DataTracker as j, Jot as Z, base as M, Dom as W } from "@base-framework/base";
+import { B as T, I as ee } from "./buttons-BKLL4I6r.js";
 import { Icons as y } from "./icons.es.js";
-import { TableBody as Z, DataTableBody as ee, ScrollableTableBody as te, List as se, IntervalTimer as ae } from "@base-framework/organisms";
+import { TableBody as B, DataTableBody as te, ScrollableTableBody as U, List as se, IntervalTimer as ae } from "@base-framework/organisms";
 import { C as ie, S as ne, I as oe, H as le } from "./skeleton-CLm2c9Bc.js";
 import { A as re, P as ce } from "./range-calendar-DW0cMOJy.js";
 d((t, e) => ({
@@ -58,7 +58,7 @@ const de = (t) => {
     { length: s },
     (i, n) => new Date(t, e - 1, a - s + n + 1)
   );
-}, fe = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), W = (t, e) => {
+}, fe = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), P = (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);
@@ -92,19 +92,19 @@ const de = (t) => {
 		`,
     click: () => i(a, s)
   });
-}, pe = (t, e) => {
+}, we = (t, e) => {
   const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = ue(t, e, s), n = Array.from({ length: a }, (r, m) => new Date(t, e, m + 1)), l = (i.length + n.length) % 7, u = l === 0 ? 0 : 7 - l, c = fe(t, e, u), f = [...i, ...n, ...c], g = [];
   for (let r = 0; r < f.length; r += 7) {
-    const m = f.slice(r, r + 7), b = m.find((F) => F) || new Date(t, e, 1), { weekNumber: Y, year: H } = he(b);
+    const m = f.slice(r, r + 7), b = m.find((Q) => Q) || new Date(t, e, 1), { weekNumber: F, year: E } = he(b);
     g.push({
-      weekNumber: Y,
-      year: H,
+      weekNumber: F,
+      year: E,
       days: m
     });
   }
   return g;
-}, we = ({ selectWeek: t }) => v("month", (e, s, { data: a }) => {
-  const { year: i, month: n, currentDate: l } = a, u = pe(i, n);
+}, pe = ({ selectWeek: t }) => v("month", (e, s, { data: a }) => {
+  const { year: i, month: n, currentDate: l } = a, u = we(i, n);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -154,7 +154,7 @@ const de = (t) => {
       )
     ]
   );
-}), P = ({ label: t, click: e }) => T(
+}), O = ({ label: t, click: e }) => T(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -169,11 +169,11 @@ const de = (t) => {
   }
 ), be = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
   D("[[monthName]] [[year]]"),
-  P({
+  O({
     label: "Previous",
     click: e
   }),
-  P({
+  O({
     label: "Next",
     click: t
   })
@@ -193,7 +193,7 @@ class ct extends h {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = W(s, e.getFullYear());
+    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = P(s, e.getFullYear());
     return new L({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
@@ -231,7 +231,7 @@ class ct extends h {
    * @returns {string}
    */
   getMonthName(e) {
-    return G.monthNames[e];
+    return J.monthNames[e];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -276,7 +276,7 @@ class ct extends h {
    */
   selectWeek(e, s) {
     this.data.currentWeek = e;
-    const a = W(e, s);
+    const a = P(e, s);
     this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(e);
   }
   /**
@@ -290,7 +290,7 @@ class ct extends h {
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      we({
+      pe({
         selectWeek: (e, s) => this.selectWeek(e, s)
       })
     ]);
@@ -299,21 +299,21 @@ class ct extends h {
 const ke = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, ye = (t) => O({ 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 = (t) => z({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  X((e) => new ie({ class: "mr-2", onChange: (s, a) => ke(e, a) }))
 ]), xe = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
-  return O({
+  return z({
     class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
     click: e && (() => i(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
       D(a),
-      e && Q({ class: "ml-2", html: y.arrows.upDown })
+      e && q({ class: "ml-2", html: y.arrows.upDown })
     ])
   ]);
-}, B = (t) => X([
-  z({
+}, R = (t) => K([
+  $({
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
@@ -326,7 +326,7 @@ const ke = (t, e) => {
       })
     ]
   })
-]), ve = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i }) => new Z({
+]), ve = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i }) => new B({
   cache: "list",
   key: t,
   items: e,
@@ -338,17 +338,17 @@ const ke = (t, e) => {
     if (e && typeof e == "function")
       return e(i);
     const n = ["w-3/4", "w-1/2", "w-full", "w-2/3", "w-5/6"], l = n[i % n.length];
-    return q({ class: "px-6 py-4" }, [
+    return _({ class: "px-6 py-4" }, [
       ne({ width: l, height: "h-4" })
     ]);
   };
-  return z({
+  return $({
     class: "border-b",
     key: s,
     children: Array.from({ length: t }, (i, n) => a(n))
   });
 };
-class j extends h {
+class Y extends h {
   /**
    * Initializes component data.
    *
@@ -406,7 +406,7 @@ class j extends h {
    * @returns {void}
    */
   removeSkeleton() {
-    if (this.data.get("showSkeleton")) {
+    if (this.data.showSkeleton) {
       this.data.showSkeleton = !1;
       const e = this.rows && this.rows.length > 0;
       this.data.hasItems = e;
@@ -448,19 +448,27 @@ class j extends h {
    * @returns {object}
    */
   render() {
-    const e = this.data.get("showSkeleton") ? this.generateSkeletonRows() : this.rows, s = this.border !== !1 ? "border" : "";
+    const e = this.data.get("showSkeleton"), s = e ? this.generateSkeletonRows() : this.rows, a = this.border !== !1 ? "border" : "";
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
-      o({ class: `w-full rounded-md ${s} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+      v("hasItems", (i) => i === !1 && this.emptyState ? this.emptyState() : null),
+      o({ class: `w-full rounded-md ${a} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
         C({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && B({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && R({ headers: this.headers, sort: (i) => this.sortRows(i) }),
           // @ts-ignore
           this.customHeader ?? null,
-          ve({
+          e ? new B({
+            cache: "list",
+            // @ts-ignore
+            key: this.key,
+            items: s,
+            rowItem: (i) => i,
+            // Skeleton rows are already complete components
+            class: "divide-y divide-border"
+          }) : ve({
             // @ts-ignore
             key: this.key,
-            rows: e,
+            rows: s,
             // @ts-ignore
             selectRow: this.selectRow.bind(this),
             // @ts-ignore
@@ -532,7 +540,7 @@ class j extends h {
     this.data.selectedRows = [];
   }
 }
-const Se = (t) => new ee({
+const Se = (t) => new te({
   cache: "list",
   loadMoreItems: t.loadMoreItems,
   offset: t.offset,
@@ -543,23 +551,31 @@ const Se = (t) => new ee({
   rowItem: (e) => t.rowItem(e, t.selectRow),
   class: "divide-y divide-border"
 });
-class Ie extends j {
+class Ie extends Y {
   /**
    * Renders the DataTable component.
    *
    * @returns {object}
    */
   render() {
-    const e = this.data.showSkeleton ? this.generateSkeletonRows() : this.rows, s = this.border !== !1 ? "border" : "";
+    const e = this.data.showSkeleton, s = e ? this.generateSkeletonRows() : this.rows, a = this.border !== !1 ? "border" : "";
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
-      o({ class: `w-full rounded-md ${s} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+      v("hasItems", (i) => i === !1 && this.emptyState ? this.emptyState() : null),
+      o({ class: `w-full rounded-md ${a} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
         C({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && B({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && R({ headers: this.headers, sort: (i) => this.sortRows(i) }),
           // @ts-ignore
           this.customHeader ?? null,
-          Se({
+          e ? new B({
+            cache: "list",
+            // @ts-ignore
+            key: this.key,
+            items: s,
+            rowItem: (i) => i,
+            // Skeleton rows are already complete components
+            class: "divide-y divide-border"
+          }) : Se({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -572,7 +588,7 @@ class Ie extends j {
             tableData: this.tableData,
             // @ts-ignore
             key: this.key,
-            items: e,
+            items: s,
             // @ts-ignore
             selectRow: this.selectRow.bind(this),
             // @ts-ignore
@@ -608,7 +624,7 @@ const dt = d((t) => new Ie(
     emptyState: t.emptyState,
     skeleton: t.skeleton
   }
-)), Ce = (t) => new te({
+)), Ce = (t) => new U({
   cache: "list",
   scrollContainer: t.scrollContainer,
   loadMoreItems: t.loadMoreItems,
@@ -620,23 +636,31 @@ const dt = d((t) => new Ie(
   rowItem: (e) => t.rowItem(e, t.selectRow),
   class: "divide-y divide-border"
 });
-class Le extends j {
+class Le extends Y {
   /**
    * Renders the DataTable component.
    *
    * @returns {object}
    */
   render() {
-    const e = this.data.get("showSkeleton") ? this.generateSkeletonRows() : this.rows, s = this.border !== !1 ? "border" : "";
+    const e = this.data.get("showSkeleton"), s = e ? this.generateSkeletonRows() : this.rows, a = this.border !== !1 ? "border" : "";
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
-      o({ class: `w-full rounded-md ${s} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+      v("hasItems", (i) => i === !1 && this.emptyState ? this.emptyState() : null),
+      o({ class: `w-full rounded-md ${a} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
         C({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && B({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && R({ headers: this.headers, sort: (i) => this.sortRows(i) }),
           // @ts-ignore
           this.customHeader ?? null,
-          Ce({
+          e ? new U({
+            cache: "list",
+            // @ts-ignore
+            key: this.key,
+            items: s,
+            rowItem: (i) => i,
+            // Skeleton rows are already complete components
+            class: "divide-y divide-border"
+          }) : Ce({
             // @ts-ignore
             scrollContainer: this.scrollContainer,
             // @ts-ignore
@@ -651,7 +675,7 @@ class Le extends j {
             tableData: this.tableData,
             // @ts-ignore
             key: this.key,
-            items: e,
+            items: s,
             // @ts-ignore
             selectRow: this.selectRow.bind(this),
             // @ts-ignore
@@ -689,18 +713,18 @@ const ht = d((t) => new Le(
     skeleton: t.skeleton
   }
 )), Te = d(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
-  p({ class: "text-base font-semibold leading-6 m-0" }, t),
-  p({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
+  w({ class: "text-base font-semibold leading-6 m-0" }, t),
+  w({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
 ])), Be = () => 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" })
   ]),
-  p({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), Re = (t) => p({ class: "text-xs leading-5 text-muted-foreground" }, [
+  w({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), Re = (t) => w({ class: "text-xs leading-5 text-muted-foreground" }, [
   D("Last seen "),
-  K({ datetime: t }, "3h ago")
+  G({ datetime: t }, "3h ago")
 ]), Me = (t, e) => t === "online" ? Be() : Re(e), We = d(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
-  p({ class: "text-sm leading-6 m-0" }, t),
+  w({ class: "text-sm leading-6 m-0" }, t),
   Me(s, e)
 ])), Pe = (t) => t.split(" ").map((s) => s[0]).join(""), Oe = d((t) => S({ 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" }, [
@@ -719,7 +743,7 @@ const ht = d((t) => new Le(
   role: "list",
   class: "divide-y divide-border",
   rowItem: Oe
-})), ze = (t, e) => e.includes(t), $e = (t, e, s) => t.exact ? s === e : ze(e, s), Ne = ({ text: t, href: e, exact: s, hidden: a }) => new N({
+})), ze = (t, e) => e.includes(t), $e = (t, e, s) => t.exact ? s === e : ze(e, s), Ne = ({ text: t, href: e, exact: s, hidden: a }) => new A({
   text: t,
   href: e,
   exact: s,
@@ -750,7 +774,7 @@ class ft extends h {
     return I(
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
-        w({
+        p({
           class: "flex space-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
@@ -830,7 +854,7 @@ const gt = d((t) => {
     T({ variant: "back", class: "ghost", ...t })
   ]);
 });
-class U extends h {
+class H extends h {
   /**
    * This will declare the props for the compiler.
    *
@@ -917,13 +941,13 @@ class U extends h {
     return this.children;
   }
 }
-A.addType("dockableOverlay", (t) => {
+j.addType("dockableOverlay", (t) => {
   if (!t)
     return;
   const e = t.component;
   e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
 });
-class mt extends U {
+class mt extends H {
   /**
    * This will stop presistence.
    *
@@ -989,7 +1013,7 @@ class mt extends U {
    * @returns {void}
    */
   afterSetup() {
-    A.add(
+    j.add(
       this.container,
       "dockableOverlay",
       {
@@ -1032,7 +1056,7 @@ class mt extends U {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class pt extends U {
+class wt extends H {
   /**
    * This will get the overlay type.
    *
@@ -1060,7 +1084,7 @@ const Ae = d(({ index: t, click: e, state: s }, a) => S({
     }]
   ],
   click: () => e(t)
-}, a)), je = d(({ selectOption: t, state: e }) => w({
+}, a)), je = d(({ selectOption: t, state: e }) => p({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
   for: ["filteredOptions", (s, a) => Ae({ index: a, click: t, state: e }, s.label)]
 })), Ue = d((t) => o({ class: "relative flex items-center" }, [
@@ -1080,7 +1104,7 @@ const Ae = d(({ index: t, click: e, state: s }, a) => S({
     ]
   }),
   t.icon && o({ class: "absolute flex right-0 mr-2" }, [
-    J(t.icon)
+    ee(t.icon)
   ])
 ])), Ye = (t) => o({
   class: "relative flex fle-auto flex-col",
@@ -1095,7 +1119,7 @@ const Ae = d(({ index: t, click: e, state: s }, a) => S({
         je(t)
       ]);
   }]
-}), wt = V(
+}), pt = Z(
   {
     /**
      * This will set up the data object.
@@ -1228,7 +1252,7 @@ const Ae = d(({ index: t, click: e, state: s }, a) => S({
     }, t.label)
   ]
 ), Fe = (t, e) => (t.callBack = e, He(t)), Ee = (t) => I({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  w({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
+  p({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
 ]);
 class bt extends h {
   /**
@@ -1252,7 +1276,7 @@ class bt extends h {
         options: this.options,
         callBack: e
       }),
-      $({
+      N({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1332,7 +1356,7 @@ const Qe = (t) => S(
     }, t.label)
   ]
 ), Xe = (t, e) => (t.callBack = e, Qe(t)), qe = (t) => I({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  w({ class: "flex flex-auto flex-row", map: [t.options, (e) => Xe(e, t.callBack)] })
+  p({ class: "flex flex-auto flex-row", map: [t.options, (e) => Xe(e, t.callBack)] })
 ]);
 class kt extends h {
   /**
@@ -1380,7 +1404,7 @@ class kt extends h {
 const Ke = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), _e = (t, e) => {
   const s = t.getLinkPath();
   return t.exact ? e === s : Ke(s, e);
-}, Ge = ({ text: t, href: e, exact: s }) => new N({
+}, Ge = ({ text: t, href: e, exact: s }) => new A({
   text: t,
   href: e,
   exact: s,
@@ -1409,7 +1433,7 @@ class Ve extends h {
    */
   render() {
     return I({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
-      w({
+      p({
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
@@ -1502,7 +1526,7 @@ class yt extends h {
         class: this.class,
         options: this.options
       }),
-      $({
+      N({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1546,7 +1570,7 @@ class Je extends h {
    * @returns {object} Layout definition for the canvas.
    */
   render() {
-    return _({
+    return V({
       style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
     });
   }
@@ -1643,8 +1667,8 @@ class Je extends h {
     const { canvas: e, ctx: s } = this, a = e.toDataURL();
     if (this.scale(), this.setupBackground(s), a !== "data:,") {
       const i = new globalThis.Image();
-      R.on("load", i, function n() {
-        s.drawImage(i, 0, 0), R.off("load", i, n);
+      M.on("load", i, function n() {
+        s.drawImage(i, 0, 0), M.off("load", i, n);
       }), i.src = a;
     }
     this.draw();
@@ -1664,7 +1688,7 @@ class Je extends h {
    * @returns {void}
    */
   noScaleResize() {
-    const e = M.getSize(container);
+    const e = W.getSize(container);
     this.width = canvas.width = e.width, this.height = canvas.height = e.height;
   }
   /**
@@ -1674,7 +1698,7 @@ class Je extends h {
    * @returns {void}
    */
   scale() {
-    const e = this.canvas, s = this.container, a = M.getSize(s), i = this.targetSize, n = i.width, l = i.height;
+    const e = this.canvas, s = this.container, a = W.getSize(s), i = this.targetSize, n = i.width, l = i.height;
     let u = n + "px", c = l + "px";
     if (this.width = e.width = n, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
       const f = a.width, g = a.height, r = f / n, m = g / l, b = Math.min(r, m);
@@ -1837,28 +1861,28 @@ export {
   ye as C,
   ve as D,
   xe as H,
-  pt as I,
+  wt as I,
   ft as N,
-  U as O,
+  H as O,
   ot as P,
   ht as S,
-  B as T,
+  R as T,
   Oe as U,
   ct as W,
   fe as a,
-  W as b,
+  P as b,
   he as c,
   lt as d,
   rt as e,
   me as f,
   ue as g,
-  we as h,
+  pe as h,
   be as i,
-  j,
+  Y as j,
   dt as k,
   ut as l,
   mt as m,
-  wt as n,
+  pt as n,
   Ue as o,
   bt as p,
   kt as q,

package/package.json

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