@base-framework/ui 1.0.279 → 1.0.281

package/dist/{signature-panel-LOOJ7iLB.js → signature-panel-BEO99NlI.js}

@@ -1,22 +1,22 @@
-import { Button as v, Div as o, On as g, Span as D, Th as z, UseParent as X, I as q, Thead as K, Tr as $, Td as _, Table as C, P as p, Li as S, Time as G, Nav as I, Ul as k, 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 y, 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 x } from "./icons.es.js";
-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) => ({
+import { Button as x, Div as o, On as v, Span as D, Th as O, UseParent as F, I as E, Thead as Q, Tr as X, Table as I, P as p, Li as S, Time as q, Nav as C, Ul as w, Section as z, Canvas as K } from "@base-framework/atoms";
+import { Atom as h, Component as u, Data as L, DateTime as G, router as y, NavLink as $, DataTracker as N, Jot as V, base as M, Dom as R } from "@base-framework/base";
+import { B as T, I as _ } from "./buttons-BKLL4I6r.js";
+import { Icons as k } 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-DYxmO1rQ.js";
+import { A as oe, P as le } from "./range-calendar-DW0cMOJy.js";
+h((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-d(({ value: t, label: e }) => v({
+h(({ value: t, label: e }) => x({
   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: a }) => a.performance = t
 }, e));
-class ot extends h {
+class at extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -34,55 +34,55 @@ class ot extends h {
     return o({ class: this.class || "" }, this.children);
   }
 }
-const de = (t) => {
+const re = (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;
-}, he = (t) => {
+}, ce = (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 && !de(a) ? {
+  return n > 52 && !re(a) ? {
     weekNumber: 1,
     year: a + 1
   } : {
     weekNumber: n,
     year: a
   };
-}, ue = (t, e, s) => {
+}, de = (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)
   );
-}, fe = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), P = (t, e) => {
+}, he = (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);
   return n.setDate(i.getDate() + (t - 1) * 7), n;
-}, lt = (t, e) => {
+}, it = (t, e) => {
   const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = [];
   let n = [];
   for (let l = 1 - s; l <= a; l++) {
-    const u = new Date(t, e, l);
-    n.push(l > 0 ? u : null), (n.length === 7 || l === a) && (i.push([...n]), n = []);
+    const d = new Date(t, e, l);
+    n.push(l > 0 ? d : null), (n.length === 7 || l === a) && (i.push([...n]), n = []);
   }
   return i;
-}, rt = (t, e) => {
+}, nt = (t, e) => {
   const s = new Date(t, e + 1, 0).getDate(), a = [];
   let i = [];
   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;
-}, ge = (t, e, s) => {
+}, ue = (t, e, s) => {
   const a = /* @__PURE__ */ new Date();
   return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
-}, me = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
-  const n = ge(t, e, s);
-  return v({
+}, fe = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
+  const n = ue(t, e, s);
+  return x({
     text: t || "",
     disabled: !t,
     class: `
@@ -92,19 +92,19 @@ const de = (t) => {
 		`,
     click: () => i(a, s)
   });
-}, 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, w) => new Date(t, e, w + 1)), l = (i.length + n.length) % 7, u = l === 0 ? 0 : 7 - l, c = fe(t, e, u), f = [...i, ...n, ...c], m = [];
+}, me = (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 }, (r, g) => new Date(t, e, g + 1)), l = (i.length + n.length) % 7, d = l === 0 ? 0 : 7 - l, c = he(t, e, d), f = [...i, ...n, ...c], m = [];
   for (let r = 0; r < f.length; r += 7) {
-    const w = f.slice(r, r + 7), b = w.find((Q) => Q) || new Date(t, e, 1), { weekNumber: F, year: E } = he(b);
+    const g = f.slice(r, r + 7), b = g.find((Y) => Y) || new Date(t, e, 1), { weekNumber: H, year: U } = ce(b);
     m.push({
-      weekNumber: F,
-      year: E,
-      days: w
+      weekNumber: H,
+      year: U,
+      days: g
     });
   }
   return m;
-}, pe = ({ selectWeek: t }) => g("month", (e, s, { data: a }) => {
-  const { year: i, month: n, currentDate: l } = a, u = we(i, n);
+}, ge = ({ selectWeek: t }) => v("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" },
     [
@@ -119,7 +119,7 @@ const de = (t) => {
         )
       ),
       // Render each "week" row
-      ...u.map(
+      ...d.map(
         ({ weekNumber: c, days: f, year: m }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
@@ -141,7 +141,7 @@ const de = (t) => {
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
             f.map(
-              (r) => me({
+              (r) => fe({
                 year: (r == null ? void 0 : r.getFullYear()) || null,
                 month: (r == null ? void 0 : r.getMonth()) || null,
                 day: (r == null ? void 0 : r.getDate()) || null,
@@ -154,7 +154,7 @@ const de = (t) => {
       )
     ]
   );
-}), O = ({ label: t, click: e }) => T(
+}), P = ({ label: t, click: e }) => T(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -165,20 +165,20 @@ const de = (t) => {
     click: e,
     "aria-label": `${t} month`,
     variant: "icon",
-    icon: t === "Previous" ? x.chevron.single.left : x.chevron.single.right
+    icon: t === "Previous" ? k.chevron.single.left : k.chevron.single.right
   }
-), ke = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+), pe = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
   D("[[monthName]] [[year]]"),
-  O({
+  P({
     label: "Previous",
     click: e
   }),
-  O({
+  P({
     label: "Next",
     click: t
   })
 ]);
-class ct extends h {
+class ot extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -193,7 +193,7 @@ class ct extends h {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = P(s, e.getFullYear());
+    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = W(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 J.monthNames[e];
+    return G.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 = P(e, s);
+    const a = W(e, s);
     this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(e);
   }
   /**
@@ -286,38 +286,38 @@ class ct extends h {
    */
   render() {
     return o({ class: "week-calendar-container border rounded-md p-3" }, [
-      ke({
+      pe({
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      pe({
+      ge({
         selectWeek: (e, s) => this.selectWeek(e, s)
       })
     ]);
   }
 }
-const be = (t, e) => {
+const we = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, 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) => be(e, a) }))
-]), xe = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
+}, be = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  F((e) => new ae({ class: "mr-2", onChange: (s, a) => we(e, a) }))
+]), ye = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
-  return z({
+  return O({
     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: x.arrows.upDown })
+      e && E({ class: "ml-2", html: k.arrows.upDown })
     ])
   ]);
-}, R = (t) => K([
-  $({
+}, B = (t) => Q([
+  X({
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? ye({ toggle: t.toggle }) : xe({
+      (e) => e.label === "checkbox" ? be({ toggle: t.toggle }) : ye({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -326,28 +326,17 @@ const be = (t, e) => {
       })
     ]
   })
-]), ve = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i }) => new B({
+]), ke = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new J({
   cache: "list",
   key: t,
   items: e,
-  rowItem: (n) => a(n, s),
+  rowItem: (d) => a(d, s),
   class: "divide-y divide-border",
-  emptyState: i
-}), De = ({ columnCount: t = 3, customCell: e, key: s }) => {
-  const a = (i) => {
-    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 _({ class: "px-6 py-4" }, [
-      ne({ width: l, height: "h-4" })
-    ]);
-  };
-  return $({
-    class: "border-b",
-    key: s
-  }, Array.from({ length: t }, (i, n) => a(n)));
-};
-class Y extends h {
+  emptyState: i,
+  skeleton: n,
+  columnCount: l
+});
+class j extends u {
   /**
    * Initializes component data.
    *
@@ -355,15 +344,11 @@ class Y extends h {
    */
   setData() {
     let e = this.rows && this.rows.length > 0;
-    (this.loadMoreItems || this.tableData) && !e && (e = null);
-    const s = this.skeleton && !e;
-    return new L({
+    return (this.loadMoreItems || this.tableData) && !e && (e = null), new L({
       selectedRows: [],
       // @ts-ignore
-      hasItems: s ? !0 : e,
-      selected: !1,
-      // @ts-ignore
-      showSkeleton: s
+      hasItems: e,
+      selected: !1
     });
   }
   /**
@@ -384,33 +369,6 @@ class Y extends h {
     const e = this.data.get("selectedRows");
     this.data.selected = e.length > 0;
   }
-  /**
-   * Generates skeleton rows for the table.
-   *
-   * @returns {Array}
-   */
-  generateSkeletonRows() {
-    const e = this.skeleton;
-    let s = 5, a = null;
-    typeof e == "object" && (s = e.number || 5, a = e.row || null);
-    const i = this.headers ? this.headers.length : 3;
-    return Array.from({ length: s }, (n, l) => a && typeof a == "function" ? a(l, i) : De({
-      columnCount: i,
-      key: `skeleton-${l}`
-    }));
-  }
-  /**
-   * Removes skeleton rows and shows real content.
-   *
-   * @returns {void}
-   */
-  removeSkeleton() {
-    if (this.data.showSkeleton) {
-      this.data.showSkeleton = !1;
-      const e = this.rows && this.rows.length > 0;
-      this.data.hasItems = e;
-    }
-  }
   /**
    * This will get the selected rows.
    *
@@ -441,40 +399,49 @@ class Y extends h {
     const a = this.data.get("selectedRows"), i = e.selected ? [...a, e] : a.filter((n) => n !== e);
     this.data.selectedRows = i, this.updateSelected();
   }
+  /**
+   * Gets the number of header columns.
+   *
+   * @returns {number}
+   */
+  getHeaderColCount() {
+    var e;
+    if (this.customHeader) {
+      const s = this.customHeader, a = s == null ? void 0 : s.children[0];
+      return (e = a == null ? void 0 : a.children) == null ? void 0 : e.length;
+    }
+    return this.headers ? this.headers.length : 3;
+  }
   /**
    * Renders the DataTable component.
    *
    * @returns {object}
    */
   render() {
-    const s = this.data.get("showSkeleton") ? this.generateSkeletonRows() : this.rows, a = this.border !== !1 ? "border" : "";
+    const e = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      g("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" }, [
+      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      o({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+        I({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && R({ headers: this.headers, sort: (i) => this.sortRows(i) }),
+          this.headers && B({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          g("showSkeleton", (i) => i ? new B({
-            cache: "list",
+          ke({
             // @ts-ignore
             key: this.key,
-            items: s,
-            rowItem: (n) => n,
-            // Skeleton rows are already complete components
-            class: "divide-y divide-border"
-          }) : ve({
             // @ts-ignore
-            key: this.key,
-            rows: s,
+            rows: this.rows,
             // @ts-ignore
             selectRow: this.selectRow.bind(this),
             // @ts-ignore
             rowItem: this.rowItem,
             // @ts-ignore
-            emptyState: this.emptyState
-          }))
+            emptyState: this.emptyState,
+            // @ts-ignore
+            skeleton: this.skeleton,
+            columnCount: s
+          })
         ])
       ])
     ]);
@@ -497,7 +464,7 @@ class Y extends h {
    * @returns {void}
    */
   setRows(e) {
-    this.removeSkeleton(), this.list.setRows(e);
+    this.list.setRows(e);
   }
   /**
    * This will append items to the list.
@@ -507,7 +474,7 @@ class Y extends h {
    * @returns {void}
    */
   append(e) {
-    this.removeSkeleton(), this.list.append(e);
+    this.list.append(e);
   }
   /**
    * This will mingle the new items with the old items.
@@ -528,7 +495,7 @@ class Y extends h {
    * @returns {void}
    */
   prepend(e) {
-    this.removeSkeleton(), this.list.prepend(e);
+    this.list.prepend(e);
   }
   /**
    * This will remove the selected rows.
@@ -539,7 +506,7 @@ class Y extends h {
     this.data.selectedRows = [];
   }
 }
-const Se = (t) => new te({
+const xe = (t) => new Z({
   cache: "list",
   loadMoreItems: t.loadMoreItems,
   offset: t.offset,
@@ -548,33 +515,27 @@ const Se = (t) => new te({
   tableData: t.tableData,
   items: t.items,
   rowItem: (e) => t.rowItem(e, t.selectRow),
-  class: "divide-y divide-border"
+  class: "divide-y divide-border",
+  skeleton: t.skeleton,
+  columnCount: t.columnCount
 });
-class Ie extends Y {
+class ve extends j {
   /**
    * Renders the DataTable component.
    *
    * @returns {object}
    */
   render() {
-    const s = this.data.showSkeleton ? this.generateSkeletonRows() : this.rows, a = this.border !== !1 ? "border" : "";
+    const e = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      g("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" }, [
+      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      o({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+        I({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && R({ headers: this.headers, sort: (i) => this.sortRows(i) }),
+          this.headers && B({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          g("showSkeleton", (i) => i ? new B({
-            cache: "list",
-            // @ts-ignore
-            key: this.key,
-            items: s,
-            rowItem: (n) => n,
-            // Skeleton rows are already complete components
-            class: "divide-y divide-border"
-          }) : Se({
+          xe({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -587,12 +548,16 @@ class Ie extends Y {
             tableData: this.tableData,
             // @ts-ignore
             key: this.key,
-            items: s,
+            // @ts-ignore
+            items: this.rows,
             // @ts-ignore
             selectRow: this.selectRow.bind(this),
             // @ts-ignore
-            rowItem: this.rowItem
-          }))
+            rowItem: this.rowItem,
+            // @ts-ignore
+            skeleton: this.skeleton,
+            columnCount: s
+          })
         ])
       ])
     ]);
@@ -606,7 +571,7 @@ class Ie extends Y {
     this.list.refresh();
   }
 }
-const dt = d((t) => new Ie(
+const lt = h((t) => new ve(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -623,7 +588,7 @@ const dt = d((t) => new Ie(
     emptyState: t.emptyState,
     skeleton: t.skeleton
   }
-)), Ce = (t) => new U({
+)), De = (t) => new ee({
   cache: "list",
   scrollContainer: t.scrollContainer,
   loadMoreItems: t.loadMoreItems,
@@ -633,33 +598,27 @@ const dt = d((t) => new Ie(
   tableData: t.tableData,
   items: t.items,
   rowItem: (e) => t.rowItem(e, t.selectRow),
-  class: "divide-y divide-border"
+  class: "divide-y divide-border",
+  skeleton: t.skeleton,
+  columnCount: t.columnCount
 });
-class Le extends Y {
+class Se extends j {
   /**
    * Renders the DataTable component.
    *
    * @returns {object}
    */
   render() {
-    const s = this.data.get("showSkeleton") ? this.generateSkeletonRows() : this.rows, a = this.border !== !1 ? "border" : "";
+    const e = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      g("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" }, [
+      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      o({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+        I({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && R({ headers: this.headers, sort: (i) => this.sortRows(i) }),
+          this.headers && B({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          g("showSkeleton", (i) => i ? new U({
-            cache: "list",
-            // @ts-ignore
-            key: this.key,
-            items: s,
-            rowItem: (n) => n,
-            // Skeleton rows are already complete components
-            class: "divide-y divide-border"
-          }) : Ce({
+          De({
             // @ts-ignore
             scrollContainer: this.scrollContainer,
             // @ts-ignore
@@ -674,12 +633,16 @@ class Le extends Y {
             tableData: this.tableData,
             // @ts-ignore
             key: this.key,
-            items: s,
+            // @ts-ignore
+            items: this.rows,
             // @ts-ignore
             selectRow: this.selectRow.bind(this),
             // @ts-ignore
-            rowItem: this.rowItem
-          }))
+            rowItem: this.rowItem,
+            // @ts-ignore
+            skeleton: this.skeleton,
+            columnCount: s
+          })
         ])
       ])
     ]);
@@ -693,7 +656,7 @@ class Le extends Y {
     this.list.refresh();
   }
 }
-const ht = d((t) => new Le(
+const rt = h((t) => new Se(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -711,45 +674,45 @@ const ht = d((t) => new Le(
     emptyState: t.emptyState,
     skeleton: t.skeleton
   }
-)), Te = d(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+)), Ce = h(({ 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)
-])), Be = () => 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" })
   ]),
   p({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), Re = (t) => p({ class: "text-xs leading-5 text-muted-foreground" }, [
+]), Le = (t) => p({ class: "text-xs leading-5 text-muted-foreground" }, [
   D("Last seen "),
-  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" }, [
+  q({ datetime: t }, "3h ago")
+]), Te = (t, e) => t === "online" ? Ie() : Le(e), Be = h(({ 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),
-  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" }, [
+  Te(s, e)
+])), Me = (t) => t.split(" ").map((s) => s[0]).join(""), Re = h((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" }, [
-    re({ src: t.image, alt: t.name, fallbackText: Pe(t.name) }),
-    Te({ name: t.name, email: t.email })
+    oe({ src: t.image, alt: t.name, fallbackText: Me(t.name) }),
+    Ce({ name: t.name, email: t.email })
   ]),
-  We({
+  Be({
     role: t.role,
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), ut = d((t) => new se({
+])), ct = h((t) => new te({
   cache: "list",
   key: "name",
   items: t.users,
   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 A({
+  rowItem: Re
+})), We = (t, e) => e.includes(t), Pe = (t, e, s) => t.exact ? s === e : We(e, s), Oe = ({ text: t, href: e, exact: s, hidden: a }) => new $({
   text: t,
   href: e,
   exact: s,
   dataSet: ["selected", ["state", !0, "active"]],
   class: `${a ? "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 ft extends h {
+class dt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -770,10 +733,10 @@ class ft extends h {
    * @returns {object}
    */
   render() {
-    return I(
+    return C(
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
-        k({
+        w({
           class: "flex space-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
@@ -805,7 +768,7 @@ class ft extends h {
     for (const a of this.links) {
       if (!a.rendered)
         continue;
-      $e(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      Pe(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -835,7 +798,7 @@ class ft extends h {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a, hidden: i }) {
-    const n = Ne({ text: e, href: s, exact: a, hidden: i });
+    const n = Oe({ text: e, href: s, exact: a, hidden: i });
     return this.links.push(n), n;
   }
   /**
@@ -847,13 +810,13 @@ class ft extends h {
     this.links = [];
   }
 }
-const gt = d((t) => {
+const ht = h((t) => {
   const e = t.margin || "m-4 ml-0";
   return t.allowHistory = t.allowHistory === !0, o({ class: `flex-none ${e}` }, [
     T({ variant: "back", class: "ghost", ...t })
   ]);
 });
-class H extends h {
+class A extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -940,13 +903,13 @@ class H extends h {
     return this.children;
   }
 }
-j.addType("dockableOverlay", (t) => {
+N.addType("dockableOverlay", (t) => {
   if (!t)
     return;
   const e = t.component;
   e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
 });
-class mt extends H {
+class ut extends A {
   /**
    * This will stop presistence.
    *
@@ -1012,7 +975,7 @@ class mt extends H {
    * @returns {void}
    */
   afterSetup() {
-    j.add(
+    N.add(
       this.container,
       "dockableOverlay",
       {
@@ -1055,7 +1018,7 @@ class mt extends H {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class wt extends H {
+class ft extends A {
   /**
    * This will get the overlay type.
    *
@@ -1074,7 +1037,7 @@ class wt extends H {
     this.container = e, this.initialize();
   }
 }
-const Ae = d(({ index: t, click: e, state: s }, a) => S({
+const ze = h(({ index: t, click: e, state: s }, a) => S({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -1083,11 +1046,11 @@ const Ae = d(({ index: t, click: e, state: s }, a) => S({
     }]
   ],
   click: () => e(t)
-}, a)), je = d(({ selectOption: t, state: e }) => k({
+}, a)), $e = h(({ selectOption: t, state: e }) => w({
   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" }, [
-  oe({
+  for: ["filteredOptions", (s, a) => ze({ index: a, click: t, state: e }, s.label)]
+})), Ne = h((t) => o({ class: "relative flex items-center" }, [
+  ie({
     cache: "input",
     class: t.class ?? "",
     placeholder: t.placeholder ?? "Search...",
@@ -1103,22 +1066,22 @@ const Ae = d(({ index: t, click: e, state: s }, a) => S({
     ]
   }),
   t.icon && o({ class: "absolute flex right-0 mr-2" }, [
-    ee(t.icon)
+    _(t.icon)
   ])
-])), Ye = (t) => o({
+])), je = (t) => o({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (e, s, a) => {
     if (e)
-      return new ce({
+      return new le({
         cache: "dropdown",
         parent: a,
         button: a.input,
         size: "xl"
       }, [
-        je(t)
+        $e(t)
       ]);
   }]
-}), pt = Z(
+}), mt = V(
   {
     /**
      * This will set up the data object.
@@ -1215,7 +1178,7 @@ const Ae = d(({ index: t, click: e, state: s }, a) => S({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        Ue({
+        Ne({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1227,7 +1190,7 @@ const Ae = d(({ index: t, click: e, state: s }, a) => S({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        Ye({
+        je({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1238,22 +1201,22 @@ const Ae = d(({ index: t, click: e, state: s }, a) => S({
       ]);
     }
   }
-), He = (t) => S(
+), Ae = (t) => S(
   {
     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({
+    x({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
     }, 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}` }, [
-  k({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
+), He = (t, e) => (t.callBack = e, Ae(t)), Ue = (t) => C({ 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) => He(e, t.callBack)] })
 ]);
-class kt extends h {
+class gt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1270,12 +1233,12 @@ class kt extends h {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      Ee({
+      Ue({
         class: this.class,
         options: this.options,
         callBack: e
       }),
-      N({
+      z({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1341,23 +1304,23 @@ class kt extends h {
     };
   }
 }
-const Qe = (t) => S(
+const Ye = (t) => S(
   {
     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({
+    x({
       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: t.value }],
       click: (e) => t.callBack(t.value),
       disabled: t.disabled
     }, 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}` }, [
-  k({ class: "flex flex-auto flex-row", map: [t.options, (e) => Xe(e, t.callBack)] })
+), Fe = (t, e) => (t.callBack = e, Ye(t)), Ee = (t) => C({ 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)] })
 ]);
-class bt extends h {
+class pt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1373,7 +1336,7 @@ class bt extends h {
    */
   render() {
     const e = this.select.bind(this);
-    return qe({
+    return Ee({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1400,17 +1363,17 @@ class bt extends h {
     };
   }
 }
-const Ke = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), _e = (t, e) => {
+const Qe = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Xe = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : Ke(s, e);
-}, Ge = ({ text: t, href: e, exact: s }) => new A({
+  return t.exact ? e === s : Qe(s, e);
+}, qe = ({ text: t, href: e, exact: s }) => new $({
   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 Ve extends h {
+class Ke extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1431,8 +1394,8 @@ class Ve extends h {
    * @returns {object}
    */
   render() {
-    return I({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
-      k({
+    return C({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
+      w({
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
@@ -1461,7 +1424,7 @@ class Ve extends h {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
     for (const i of this.links)
-      if (i.rendered !== !1 && (s = _e(i, e), s === !0)) {
+      if (i.rendered !== !1 && (s = Xe(i, e), s === !0)) {
         this.updateLink(i, !0);
         break;
       }
@@ -1493,7 +1456,7 @@ class Ve extends h {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a }) {
-    const i = Ge({ text: e, href: s, exact: a });
+    const i = qe({ text: e, href: s, exact: a });
     return this.links.push(i), i;
   }
   /**
@@ -1505,7 +1468,7 @@ class Ve extends h {
     this.links = [];
   }
 }
-class yt extends h {
+class wt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1521,11 +1484,11 @@ class yt extends h {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new Ve({
+      new Ke({
         class: this.class,
         options: this.options
       }),
-      N({
+      z({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1551,7 +1514,7 @@ class yt extends h {
     return s;
   }
 }
-class Je extends h {
+class Ge extends u {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1561,7 +1524,7 @@ class Je extends h {
   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 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";
+    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";
   }
   /**
    * Renders a <canvas> element.
@@ -1569,7 +1532,7 @@ class Je extends h {
    * @returns {object} Layout definition for the canvas.
    */
   render() {
-    return V({
+    return K({
       style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
     });
   }
@@ -1622,8 +1585,8 @@ class Je extends h {
       s = f.clientX, a = f.clientY;
     } else
       s = e.x || e.clientX, a = e.y || e.clientY;
-    const u = parseInt((s - l.left) * n), c = parseInt((a - l.top) * n);
-    this.mouse.x = u, this.mouse.y = c;
+    const d = parseInt((s - l.left) * n), c = parseInt((a - l.top) * n);
+    this.mouse.x = d, this.mouse.y = c;
   }
   /**
    * Called when the pointer goes down on the canvas.
@@ -1687,7 +1650,7 @@ class Je extends h {
    * @returns {void}
    */
   noScaleResize() {
-    const e = W.getSize(container);
+    const e = R.getSize(container);
     this.width = canvas.width = e.width, this.height = canvas.height = e.height;
   }
   /**
@@ -1697,13 +1660,13 @@ class Je extends h {
    * @returns {void}
    */
   scale() {
-    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";
+    const e = this.canvas, s = this.container, a = R.getSize(s), i = this.targetSize, n = i.width, l = i.height;
+    let d = 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, m = a.height, r = f / n, w = m / l, b = Math.min(r, w);
-      u = n * b + "px", c = l * b + "px";
+      const f = a.width, m = a.height, r = f / n, g = m / l, b = Math.min(r, g);
+      d = n * b + "px", c = l * b + "px";
     }
-    e.style.width = u, e.style.height = c;
+    e.style.width = d, e.style.height = c;
   }
   /**
    * Main drawing loop. If the mouse is down, adds a line
@@ -1777,7 +1740,7 @@ class Je extends h {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class xt extends h {
+class bt extends u {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1794,7 +1757,7 @@ class xt extends h {
    */
   render() {
     return o({ class: "signature-panel relative flex flex-auto overflow-hidden select-none" }, [
-      le({
+      ne({
         cache: "hiddenInput",
         required: !0,
         bind: this.path + ".data"
@@ -1802,11 +1765,11 @@ class xt extends h {
       o({ class: "absolute top-2 right-2" }, [
         T({
           variant: "icon",
-          icon: x.circleX,
+          icon: k.circleX,
           click: this.reset.bind(this)
         })
       ]),
-      new Je({
+      new Ge({
         cache: "canvasLayer",
         margin: this.margin,
         targetSize: this.targetSize,
@@ -1856,36 +1819,36 @@ class xt extends h {
   }
 }
 export {
-  gt as B,
-  ye as C,
-  ve as D,
-  xe as H,
-  wt as I,
-  ft as N,
-  H as O,
-  ot as P,
-  ht as S,
-  R as T,
-  Oe as U,
-  ct as W,
-  fe as a,
-  P as b,
-  he as c,
-  lt as d,
-  rt as e,
-  me as f,
-  ue as g,
-  pe as h,
-  ke as i,
-  Y as j,
-  dt as k,
-  ut as l,
-  mt as m,
-  pt as n,
-  Ue as o,
-  kt as p,
-  bt as q,
-  Ve as r,
-  yt as s,
-  xt as t
+  ht as B,
+  be as C,
+  ke as D,
+  ye as H,
+  ft as I,
+  dt as N,
+  A as O,
+  at as P,
+  rt as S,
+  B as T,
+  Re as U,
+  ot as W,
+  he as a,
+  W as b,
+  ce as c,
+  it as d,
+  nt as e,
+  fe as f,
+  de as g,
+  ge as h,
+  pe as i,
+  j,
+  lt as k,
+  ct as l,
+  ut as m,
+  mt as n,
+  Ne as o,
+  gt as p,
+  pt as q,
+  Ke as r,
+  wt as s,
+  bt as t
 };