@base-framework/ui 1.0.227 → 1.0.228

package/dist/index.es.js

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

package/dist/{signature-panel-BImd7j5m.js → signature-panel-8RAhY1jM.js}

@@ -1,8 +1,8 @@
-import { Button as M, Div as o, On as w, Span as L, OnState as K, Th as H, UseParent as G, I as J, Thead as _, Tr as V, Table as P, P as x, Li as T, Time as Z, Nav as B, Ul as k, Section as U, Canvas as tt } from "@base-framework/atoms";
-import { Atom as f, Component as g, Data as R, DateTime as $, router as I, NavLink as E, DataTracker as Q, Jot as et, base as O, Dom as z } from "@base-framework/base";
+import { Button as S, Div as o, On as w, Span as C, OnState as K, Th as F, UseParent as G, I as J, Thead as _, Tr as V, Table as P, P as x, Li as I, Time as Z, Nav as M, Ul as k, Section as H, Canvas as tt } from "@base-framework/atoms";
+import { Atom as f, Component as g, Data as L, DateTime as $, router as D, NavLink as U, DataTracker as E, Jot as et, base as N, Dom as O } from "@base-framework/base";
 import { B as m, I as st } from "./buttons-Cm9etaEG.js";
 import { Icons as b } from "./icons.es.js";
-import { F as at, p as C, A as nt, P as it } from "./calendar-Bn55oWBo.js";
+import { F as at, p as v, A as nt, P as it } from "./calendar-Bn55oWBo.js";
 import { TableBody as ot, DataTableBody as lt, ScrollableTableBody as rt, List as ct, IntervalTimer as dt } from "@base-framework/organisms";
 import { C as ht, I as ut, H as ft } from "./inputs-CMjx5-IX.js";
 f((e, t) => ({
@@ -10,7 +10,7 @@ f((e, t) => ({
   ...e,
   children: t
 }));
-f(({ value: e, label: t }) => M({
+f(({ value: e, label: t }) => S({
   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: e }],
   dataSet: ["performance", ["state", e, "active"]],
@@ -58,7 +58,7 @@ const gt = (e) => {
     { length: s },
     (n, i) => new Date(e, t - 1, a - s + i + 1)
   );
-}, yt = (e, t, s) => Array.from({ length: s }, (a, n) => new Date(e, t + 1, n + 1)), Y = (e, t) => {
+}, yt = (e, t, s) => Array.from({ length: s }, (a, n) => new Date(e, t + 1, n + 1)), z = (e, t) => {
   const s = new Date(t, 0, 4), a = (s.getDay() + 6) % 7, n = new Date(s);
   n.setDate(s.getDate() - a);
   const i = new Date(n);
@@ -82,7 +82,7 @@ const gt = (e) => {
   return a.getDate() === e && a.getMonth() === t && a.getFullYear() === s;
 }, bt = ({ day: e, month: t, year: s, weekNumber: a, selectWeek: n }) => {
   const i = wt(e, t, s);
-  return M({
+  return S({
     text: e || "",
     disabled: !e,
     class: `
@@ -95,10 +95,10 @@ const gt = (e) => {
 }, xt = (e, t) => {
   const s = new Date(e, t, 1).getDay(), a = new Date(e, t + 1, 0).getDate(), n = pt(e, t, s), i = Array.from({ length: a }, (h, p) => new Date(e, t, p + 1)), l = (n.length + i.length) % 7, r = l === 0 ? 0 : 7 - l, c = yt(e, t, r), d = [...n, ...i, ...c], u = [];
   for (let h = 0; h < d.length; h += 7) {
-    const p = d.slice(h, h + 7), y = p.find((S) => S) || new Date(e, t, 1), { weekNumber: v, year: D } = mt(y);
+    const p = d.slice(h, h + 7), y = p.find((R) => R) || new Date(e, t, 1), { weekNumber: T, year: B } = mt(y);
     u.push({
-      weekNumber: v,
-      year: D,
+      weekNumber: T,
+      year: B,
       days: p
     });
   }
@@ -115,7 +115,7 @@ const gt = (e) => {
           class: "grid grid-cols-7 col-span-7 text-center text-muted-foreground items-center"
         },
         ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
-          (c) => L({ class: "px-1 py-1", text: c })
+          (c) => C({ class: "px-1 py-1", text: c })
         )
       ),
       // Render each "week" row
@@ -154,7 +154,7 @@ const gt = (e) => {
       )
     ]
   );
-}), j = ({ label: e, click: t }) => m(
+}), Y = ({ label: e, click: t }) => m(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -168,12 +168,12 @@ const gt = (e) => {
     icon: e === "Previous" ? b.chevron.single.left : b.chevron.single.right
   }
 ), vt = ({ next: e, previous: t }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
-  L("[[monthName]] [[year]]"),
-  j({
+  C("[[monthName]] [[year]]"),
+  Y({
     label: "Previous",
     click: t
   }),
-  j({
+  Y({
     label: "Next",
     click: e
   })
@@ -193,8 +193,8 @@ class ve extends g {
    * @returns {Data}
    */
   setData() {
-    const t = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(t), a = Y(s, t.getFullYear());
-    return new R({
+    const t = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(t), a = z(s, t.getFullYear());
+    return new L({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
       month: a.getMonth(),
@@ -276,7 +276,7 @@ class ve extends g {
    */
   selectWeek(t, s) {
     this.data.currentWeek = t;
-    const a = Y(t, s);
+    const a = z(t, s);
     this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(t);
   }
   /**
@@ -296,7 +296,7 @@ class ve extends g {
     ]);
   }
 }
-const A = ({ label: e, click: t }) => m(
+const j = ({ label: e, click: t }) => m(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -312,8 +312,8 @@ const A = ({ label: e, click: t }) => m(
 ), Dt = ({ monthName: e, year: t, onMonthClick: s, onYearClick: a, next: n, previous: i }) => o({ class: "flex items-center justify-center space-x-2 relative min-h-12 text-sm font-medium" }, [
   m({ click: s, variant: "ghost", "aria-label": "Select month" }, e || "[[monthName]]"),
   m({ click: a, variant: "ghost", "aria-label": "Select year" }, (t == null ? void 0 : t.toString()) || "[[current.year]]"),
-  A({ label: "Previous", click: i }),
-  A({ label: "Next", click: n })
+  j({ label: "Previous", click: i }),
+  j({ label: "Next", click: n })
 ]), St = (e) => o({ class: "h-9 flex items-center justify-center font-medium" }, e), Ct = () => o(
   { class: "grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground mb-2" },
   ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(St)
@@ -321,7 +321,7 @@ const A = ({ label: e, click: t }) => m(
   let r = "ghost", c = "";
   return a || n ? (r = "default", c = "bg-primary text-primary-foreground hover:bg-primary/90") : i && (c = "bg-accent text-accent-foreground hover:bg-accent/80"), s && (c += " opacity-50 cursor-not-allowed"), m(
     {
-      class: `flex items-center justify-center h-9 w-9 p-0 text-sm font-medium rounded-md transition-colors ${c}`,
+      class: `flex items-center justify-center p-0 text-sm font-medium rounded-md transition-colors ${c}`,
       variant: r,
       disabled: s,
       click: () => {
@@ -335,22 +335,14 @@ const A = ({ label: e, click: t }) => m(
   for (let d = 0; d < l; d++)
     c.push(null);
   for (let d = 1; d <= r; d++) {
-    const u = at(t.year, t.month, d), h = new Date(t.year, t.month, d), p = new Date(e.year, e.month, e.date), y = h < p, v = s && y, D = n === u, S = i === u, N = n && i && u > n && u < i;
-    console.log({
+    const u = at(t.year, t.month, d), h = new Date(t.year, t.month, d), p = new Date(e.year, e.month, e.date), y = h < p, T = s && y, B = n === u, R = i === u, q = n && i && u > n && u < i;
+    c.push({
       day: d,
       iso: u,
-      disabled: v,
-      isStart: D,
-      isEnd: S,
-      isBetween: N,
-      click: () => a(u)
-    }), c.push({
-      day: d,
-      iso: u,
-      disabled: v,
-      isStart: D,
-      isEnd: S,
-      isBetween: N,
+      disabled: T,
+      isStart: B,
+      isEnd: R,
+      isBetween: q,
       click: () => a(u)
     });
   }
@@ -412,16 +404,16 @@ const A = ({ label: e, click: t }) => m(
     variant: i === "start" ? "primary" : "outline",
     class: "flex-1"
   }, [
-    o({ class: "font-medium" }, F("current.start", "Start Date"))
+    o({ class: "font-medium" }, A("current.start", "Start Date"))
   ])),
   w("selecting", (i) => m({
     click: n,
     variant: i === "end" ? "primary" : "outline",
     class: "flex-1"
   }, [
-    o({ class: "font-medium" }, F("current.end", "End Date"))
+    o({ class: "font-medium" }, A("current.end", "End Date"))
   ]))
-]), F = (e, t) => [`[[${e}]]`, (s) => s == null ? t : Rt(s)], Rt = (e) => {
+]), A = (e, t) => [`[[${e}]]`, (s) => s == null ? t : Rt(s)], Rt = (e) => {
   const t = /* @__PURE__ */ new Date(e + "T00:00:00"), s = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], a = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   return `${s[t.getDay()]}, ${t.getDate()} ${a[t.getMonth()]}`;
 }, Pt = ({ currentYear: e, onSelect: t }) => {
@@ -458,14 +450,14 @@ class De extends g {
    */
   setData() {
     const t = /* @__PURE__ */ new Date(), s = this.startDate ? /* @__PURE__ */ new Date(this.startDate + "T00:00:00") : t, a = s.getMonth(), n = s.getFullYear();
-    return new R({
+    return new L({
       today: {
         date: t.getDate(),
         month: t.getMonth(),
         year: t.getFullYear()
       },
       monthName: this.getMonthName(a),
-      currentData: `${s.getFullYear()}-${C(s.getMonth() + 1)}-${C(s.getDate())}`,
+      currentData: `${s.getFullYear()}-${v(s.getMonth() + 1)}-${v(s.getDate())}`,
       current: {
         date: t.getDate(),
         month: a,
@@ -506,7 +498,7 @@ class De extends g {
     if (this.data.selecting === "start") {
       this.data.current.start = t, this.data.current.end = null, this.data.selecting = "end";
       const s = new Date(t);
-      this.setContext({
+      this.setCurrent({
         month: s.getMonth(),
         year: s.getFullYear(),
         date: s.getDate()
@@ -514,7 +506,7 @@ class De extends g {
     } else {
       this.data.current.start && t < this.data.current.start ? (this.data.current.end = this.data.current.start, this.data.current.start = t) : this.data.current.end = t, this.data.selecting = "start";
       const s = new Date(t);
-      this.setContext({
+      this.setCurrent({
         month: s.getMonth(),
         year: s.getFullYear(),
         date: s.getDate()
@@ -529,7 +521,7 @@ class De extends g {
    */
   setCurrent({ month: t, year: s, date: a = null }) {
     const n = this.data.current;
-    n.month = (t + 12) % 12, n.year = s + (t < 0 ? -1 : t > 11 ? 1 : 0), a !== null && (n.date = a), this.data.monthName = this.getMonthName(n.month), this.data.currentDate = `${s}-${C(t + 1)}-${C(n.date)}`;
+    n.month = (t + 12) % 12, n.year = s + (t < 0 ? -1 : t > 11 ? 1 : 0), a !== null && (n.date = a), this.data.monthName = this.getMonthName(n.month), this.data.currentDate = `${s}-${v(t + 1)}-${v(n.date)}`;
   }
   /**
    * Render the range calendar.
@@ -594,16 +586,16 @@ class De extends g {
 const $t = (e, t) => {
   const s = e.toggleAllSelectedRows();
   t.state.checked = !s;
-}, Wt = (e) => H({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
+}, Wt = (e) => F({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
   G((t) => new ht({ class: "mr-2", onChange: (s, a) => $t(t, a) }))
 ]), Nt = ({ align: e, sortable: t, key: s, label: a, sort: n, class: i }) => {
   const l = e || "justify-start";
-  return H({
+  return F({
     class: `cursor-pointer py-3 px-4 text-base ${i || ""}`,
     click: t && (() => n(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
-      L(a),
+      C(a),
       t && J({ class: "ml-2", html: b.arrows.upDown })
     ])
   ]);
@@ -629,7 +621,7 @@ const $t = (e, t) => {
   class: "divide-y divide-border",
   emptyState: n
 });
-class X extends g {
+class Q extends g {
   /**
    * Initializes component data.
    *
@@ -637,7 +629,7 @@ class X extends g {
    */
   setData() {
     let t = this.rows && this.rows.length > 0;
-    return (this.loadMoreItems || this.tableData) && !t && (t = null), new R({
+    return (this.loadMoreItems || this.tableData) && !t && (t = null), new L({
       selectedRows: [],
       // @ts-ignore
       hasItems: t,
@@ -793,7 +785,7 @@ const zt = (e) => new lt({
   rowItem: (t) => e.rowItem(t, e.selectRow),
   class: "divide-y divide-border"
 });
-class Yt extends X {
+class Yt extends Q {
   /**
    * Renders the DataTable component.
    *
@@ -869,7 +861,7 @@ const Se = f((e) => new Yt(
   rowItem: (t) => e.rowItem(t, e.selectRow),
   class: "divide-y divide-border"
 });
-class At extends X {
+class At extends Q {
   /**
    * Renders the DataTable component.
    *
@@ -945,12 +937,12 @@ const Ce = f((e) => new At(
   ]),
   x({ class: "text-xs leading-5 text-gray-500" }, "Online")
 ]), Ut = (e) => x({ class: "text-xs leading-5 text-muted-foreground" }, [
-  L("Last seen "),
+  C("Last seen "),
   Z({ datetime: e }, "3h ago")
 ]), Et = (e, t) => e === "online" ? Ht() : Ut(t), Qt = f(({ role: e, lastSeen: t, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
   x({ class: "text-sm leading-6 m-0" }, e),
   Et(s, t)
-])), Xt = (e) => e.split(" ").map((s) => s[0]).join(""), qt = f((e) => T({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+])), Xt = (e) => e.split(" ").map((s) => s[0]).join(""), qt = f((e) => I({ 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" }, [
     nt({ src: e.image, alt: e.name, fallbackText: Xt(e.name) }),
     Ft({ name: e.name, email: e.email })
@@ -967,7 +959,7 @@ const Ce = f((e) => new At(
   role: "list",
   class: "divide-y divide-border",
   rowItem: qt
-})), Kt = (e, t) => t.includes(e), Gt = (e, t, s) => e.exact ? s === t : Kt(t, s), Jt = ({ text: e, href: t, exact: s, hidden: a }) => new E({
+})), Kt = (e, t) => t.includes(e), Gt = (e, t, s) => e.exact ? s === t : Kt(t, s), Jt = ({ text: e, href: t, exact: s, hidden: a }) => new U({
   text: e,
   href: t,
   exact: s,
@@ -995,14 +987,14 @@ class Me extends g {
    * @returns {object}
    */
   render() {
-    return B(
+    return M(
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
         k({
           class: "flex space-x-4",
           map: [this.options, (t) => this.addLink(t)],
           watch: {
-            value: ["[[path]]", I.data],
+            value: ["[[path]]", D.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -1015,7 +1007,7 @@ class Me extends g {
    * @returns {void}
    */
   afterSetup() {
-    const t = I.data.path;
+    const t = D.data.path;
     this.updateLinks(t);
   }
   /**
@@ -1078,7 +1070,7 @@ const Le = f((e) => {
     m({ variant: "back", class: "ghost", ...e })
   ]);
 });
-class q extends g {
+class X extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1165,13 +1157,13 @@ class q extends g {
     return this.children;
   }
 }
-Q.addType("dockableOverlay", (e) => {
+E.addType("dockableOverlay", (e) => {
   if (!e)
     return;
   const t = e.component;
   t && t.rendered === !0 && t.state.docked === !1 && t.destroy();
 });
-class Te extends q {
+class Te extends X {
   /**
    * This will stop presistence.
    *
@@ -1237,7 +1229,7 @@ class Te extends q {
    * @returns {void}
    */
   afterSetup() {
-    Q.add(
+    E.add(
       this.container,
       "dockableOverlay",
       {
@@ -1280,7 +1272,7 @@ class Te extends q {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class Be extends q {
+class Be extends X {
   /**
    * This will get the overlay type.
    *
@@ -1299,7 +1291,7 @@ class Be extends q {
     this.container = t, this.initialize();
   }
 }
-const _t = f(({ index: e, click: t, state: s }, a) => T({
+const _t = f(({ index: e, click: t, state: s }, a) => I({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -1352,7 +1344,7 @@ const _t = f(({ index: e, click: t, state: s }, a) => T({
      */
     setData() {
       const e = this.options || [];
-      return new R({
+      return new L({
         options: e,
         filteredOptions: e
       });
@@ -1463,19 +1455,19 @@ const _t = f(({ index: e, click: t, state: s }, a) => T({
       ]);
     }
   }
-), ee = (e) => T(
+), ee = (e) => I(
   {
     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", e.value, "active"]]
   },
   [
-    M({
+    S({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md",
       onSet: ["selected", { selected: e.value }],
       click: (t) => e.callBack(e.value)
     }, e.label)
   ]
-), se = (e, t) => (e.callBack = t, ee(e)), ae = (e) => B({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
+), se = (e, t) => (e.callBack = t, ee(e)), ae = (e) => M({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
   k({ class: "flex flex-auto flex-row", map: [e.options, (t) => se(t, e.callBack)] })
 ]);
 class Pe extends g {
@@ -1500,7 +1492,7 @@ class Pe extends g {
         options: this.options,
         callBack: t
       }),
-      U({
+      H({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1566,20 +1558,20 @@ class Pe extends g {
     };
   }
 }
-const ne = (e) => T(
+const ne = (e) => I(
   {
     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", e.value, "active"]]
   },
   [
-    M({
+    S({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
       onSet: ["selected", { selected: e.value }],
       click: (t) => e.callBack(e.value),
       disabled: e.disabled
     }, e.label)
   ]
-), ie = (e, t) => (e.callBack = t, ne(e)), oe = (e) => B({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
+), ie = (e, t) => (e.callBack = t, ne(e)), oe = (e) => M({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
   k({ class: "flex flex-auto flex-row", map: [e.options, (t) => ie(t, e.callBack)] })
 ]);
 class $e extends g {
@@ -1628,7 +1620,7 @@ class $e extends g {
 const le = (e, t) => new RegExp(`${e}($|/|\\.).*`).test(t), re = (e, t) => {
   const s = e.getLinkPath();
   return e.exact ? t === s : le(s, t);
-}, ce = ({ text: e, href: t, exact: s }) => new E({
+}, ce = ({ text: e, href: t, exact: s }) => new U({
   text: e,
   href: t,
   exact: s,
@@ -1656,12 +1648,12 @@ class de extends g {
    * @returns {object}
    */
   render() {
-    return B({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
+    return M({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
       k({
         class: "flex flex-auto flex-row",
         map: [this.options, (t) => this.addLink(t)],
         watch: {
-          value: ["[[path]]", I.data],
+          value: ["[[path]]", D.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1673,7 +1665,7 @@ class de extends g {
    * @returns {void}
    */
   afterSetup() {
-    const t = I.data.path;
+    const t = D.data.path;
     this.updateLinks(t);
   }
   /**
@@ -1750,7 +1742,7 @@ class We extends g {
         class: this.class,
         options: this.options
       }),
-      U({
+      H({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1891,8 +1883,8 @@ class he extends g {
     const { canvas: t, ctx: s } = this, a = t.toDataURL();
     if (this.scale(), this.setupBackground(s), a !== "data:,") {
       const n = new globalThis.Image();
-      O.on("load", n, function i() {
-        s.drawImage(n, 0, 0), O.off("load", n, i);
+      N.on("load", n, function i() {
+        s.drawImage(n, 0, 0), N.off("load", n, i);
       }), n.src = a;
     }
     this.draw();
@@ -1912,7 +1904,7 @@ class he extends g {
    * @returns {void}
    */
   noScaleResize() {
-    const t = z.getSize(container);
+    const t = O.getSize(container);
     this.width = canvas.width = t.width, this.height = canvas.height = t.height;
   }
   /**
@@ -1922,7 +1914,7 @@ class he extends g {
    * @returns {void}
    */
   scale() {
-    const t = this.canvas, s = this.container, a = z.getSize(s), n = this.targetSize, i = n.width, l = n.height;
+    const t = this.canvas, s = this.container, a = O.getSize(s), n = this.targetSize, i = n.width, l = n.height;
     let r = i + "px", c = l + "px";
     if (this.width = t.width = i, this.height = t.height = l, a.width !== 0 && a.height !== 0) {
       const d = a.width, u = a.height, h = d / i, p = u / l, y = Math.min(h, p);
@@ -2087,7 +2079,7 @@ export {
   Nt as H,
   Be as I,
   Me as N,
-  q as O,
+  X as O,
   be as P,
   De as R,
   Ce as S,
@@ -2095,7 +2087,7 @@ export {
   qt as U,
   ve as W,
   yt as a,
-  Y as b,
+  z as b,
   mt as c,
   xe as d,
   ke as e,
@@ -2103,7 +2095,7 @@ export {
   pt as g,
   kt as h,
   vt as i,
-  X as j,
+  Q as j,
   Se as k,
   Ie as l,
   Te as m,

package/package.json

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