@base-framework/ui 1.0.217 → 1.0.219

package/dist/{signature-panel-Cb3wM-a4.js → signature-panel-MKOoxJSP.js}

@@ -1,22 +1,22 @@
-import { Button as D, Div as o, On as v, Span as S, Th as N, UseParent as E, I as Q, Thead as X, Tr as q, Table as M, P as w, Li as I, Time as K, Nav as C, Ul as b, Section as j, Canvas as G } from "@base-framework/atoms";
-import { Atom as f, Component as g, Data as L, DateTime as V, router as x, NavLink as A, DataTracker as Y, Jot as _, base as W, Dom as O } from "@base-framework/base";
-import { B as y, I as J } from "./buttons-Cm9etaEG.js";
-import { Icons as k } from "./icons.es.js";
-import { F as Z, A as ee, P as te } from "./calendar-Bn55oWBo.js";
-import { TableBody as se, DataTableBody as ae, ScrollableTableBody as ie, List as ne, IntervalTimer as oe } from "@base-framework/organisms";
-import { C as le, I as re, H as ce } from "./inputs-CMjx5-IX.js";
+import { Button as v, Div as o, On as D, Span as S, OnState as X, Th as j, UseParent as q, I as K, Thead as G, Tr as _, Table as R, P as b, Li as C, Time as V, Nav as I, Ul as x, Section as Y, Canvas as J } from "@base-framework/atoms";
+import { Atom as f, Component as g, Data as L, DateTime as A, router as k, NavLink as H, DataTracker as F, Jot as Z, base as W, Dom as O } from "@base-framework/base";
+import { B as m, I as ee } from "./buttons-Cm9etaEG.js";
+import { Icons as w } from "./icons.es.js";
+import { F as te, A as se, P as ae } from "./calendar-Bn55oWBo.js";
+import { TableBody as ne, DataTableBody as ie, ScrollableTableBody as oe, List as le, IntervalTimer as re } from "@base-framework/organisms";
+import { C as ce, I as de, H as he } from "./inputs-CMjx5-IX.js";
 f((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-f(({ value: t, label: e }) => D({
+f(({ value: t, label: e }) => v({
   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 dt extends g {
+class pt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -34,77 +34,77 @@ class dt extends g {
     return o({ class: this.class || "" }, this.children);
   }
 }
-const de = (t) => {
+const ue = (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) => {
+}, fe = (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) ? {
+  const a = e.getFullYear(), n = new Date(a, 0, 4);
+  n.setDate(n.getDate() - (n.getDay() + 6) % 7);
+  const i = Math.ceil((e - n) / 6048e5) + 1;
+  return i > 52 && !ue(a) ? {
     weekNumber: 1,
     year: a + 1
   } : {
-    weekNumber: n,
+    weekNumber: i,
     year: a
   };
-}, ue = (t, e, s) => {
+}, ge = (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)
+    (n, i) => new Date(t, e - 1, a - s + i + 1)
   );
-}, fe = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), z = (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;
-}, ht = (t, e) => {
-  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = [];
-  let n = [];
+}, me = (t, e, s) => Array.from({ length: s }, (a, n) => new Date(t, e + 1, n + 1)), $ = (t, e) => {
+  const s = new Date(e, 0, 4), a = (s.getDay() + 6) % 7, n = new Date(s);
+  n.setDate(s.getDate() - a);
+  const i = new Date(n);
+  return i.setDate(n.getDate() + (t - 1) * 7), i;
+}, yt = (t, e) => {
+  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), n = [];
+  let i = [];
   for (let l = 1 - s; l <= a; l++) {
-    const h = new Date(t, e, l);
-    n.push(l > 0 ? h : null), (n.length === 7 || l === a) && (i.push([...n]), n = []);
+    const u = new Date(t, e, l);
+    i.push(l > 0 ? u : null), (i.length === 7 || l === a) && (n.push([...i]), i = []);
   }
-  return i;
-}, ut = (t, e) => {
+  return n;
+}, wt = (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) => {
+  let n = [];
+  for (let i = 1; i <= s; i++)
+    n.push(new Date(t, e, i)), n.length === 7 && (a.push(n), n = []);
+  return n.length > 0 && a.push(n), a;
+}, pe = (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 D({
+}, ye = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: n }) => {
+  const i = pe(t, e, s);
+  return v({
     text: t || "",
     disabled: !t,
     class: `
 			px-2 py-1 text-center rounded-md
-			${n ? "bg-accent text-accent-foreground" : ""}
+			${i ? "bg-accent text-accent-foreground" : ""}
 			hover:bg-primary hover:text-primary-foreground
 		`,
-    click: () => i(a, s)
+    click: () => n(a, s)
   });
-}, pe = (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 }, (c, m) => new Date(t, e, m + 1)), l = (i.length + n.length) % 7, h = l === 0 ? 0 : 7 - l, r = fe(t, e, h), d = [...i, ...n, ...r], u = [];
-  for (let c = 0; c < d.length; c += 7) {
-    const m = d.slice(c, c + 7), p = m.find((R) => R) || new Date(t, e, 1), { weekNumber: T, year: B } = he(p);
-    u.push({
+}, we = (t, e) => {
+  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), n = ge(t, e, s), i = Array.from({ length: a }, (d, p) => new Date(t, e, p + 1)), l = (n.length + i.length) % 7, u = l === 0 ? 0 : 7 - l, r = me(t, e, u), c = [...n, ...i, ...r], h = [];
+  for (let d = 0; d < c.length; d += 7) {
+    const p = c.slice(d, d + 7), y = p.find((M) => M) || new Date(t, e, 1), { weekNumber: T, year: B } = fe(y);
+    h.push({
       weekNumber: T,
       year: B,
-      days: m
+      days: p
     });
   }
-  return u;
-}, ye = ({ selectWeek: t }) => v("month", (e, s, { data: a }) => {
-  const { year: i, month: n, currentDate: l } = a, h = pe(i, n);
+  return h;
+}, be = ({ selectWeek: t }) => D("month", (e, s, { data: a }) => {
+  const { year: n, month: i, currentDate: l } = a, u = we(n, i);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -119,8 +119,8 @@ const de = (t) => {
         )
       ),
       // Render each "week" row
-      ...h.map(
-        ({ weekNumber: r, days: d, year: u }) => o({
+      ...u.map(
+        ({ weekNumber: r, days: c, year: h }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
             ring: r
@@ -129,7 +129,7 @@ const de = (t) => {
           // Left column: ISO week number
           o({
             class: "font-medium text-center col-span-1 rounded-sm cursor-pointer",
-            click: () => t(r, u),
+            click: () => t(r, h),
             // If you have a 'currentWeek' state, you can highlight it with 'onSet'
             onSet: ["currentWeek", {
               "text-primary-foreground": r,
@@ -140,11 +140,11 @@ const de = (t) => {
           // The 7 cells for each day in the row
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
-            d.map(
-              (c) => me({
-                year: (c == null ? void 0 : c.getFullYear()) || null,
-                month: (c == null ? void 0 : c.getMonth()) || null,
-                day: (c == null ? void 0 : c.getDate()) || null,
+            c.map(
+              (d) => ye({
+                year: (d == null ? void 0 : d.getFullYear()) || null,
+                month: (d == null ? void 0 : d.getMonth()) || null,
+                day: (d == null ? void 0 : d.getDate()) || null,
                 weekNumber: r,
                 selectWeek: t
               })
@@ -154,7 +154,7 @@ const de = (t) => {
       )
     ]
   );
-}), $ = ({ label: t, click: e }) => y(
+}), z = ({ label: t, click: e }) => m(
   {
     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" ? k.chevron.single.left : k.chevron.single.right
+    icon: t === "Previous" ? w.chevron.single.left : w.chevron.single.right
   }
-), we = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+), xe = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
   S("[[monthName]] [[year]]"),
-  $({
+  z({
     label: "Previous",
     click: e
   }),
-  $({
+  z({
     label: "Next",
     click: t
   })
 ]);
-class ft extends g {
+class bt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -193,7 +193,7 @@ class ft extends g {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = z(s, e.getFullYear());
+    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = $(s, e.getFullYear());
     return new L({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
@@ -221,8 +221,8 @@ class ft extends g {
   calculateCurrentWeek(e) {
     const s = new Date(e.valueOf()), a = (e.getDay() + 6) % 7;
     s.setDate(s.getDate() - a + 3);
-    const i = s.valueOf();
-    return s.setMonth(0, 1), s.getDay() !== 4 && s.setMonth(0, 1 + (4 - s.getDay() + 7) % 7), 1 + Math.ceil((i - s) / 6048e5);
+    const n = s.valueOf();
+    return s.setMonth(0, 1), s.getDay() !== 4 && s.setMonth(0, 1 + (4 - s.getDay() + 7) % 7), 1 + Math.ceil((n - s) / 6048e5);
   }
   /**
    * Gets the name of the month.
@@ -231,7 +231,7 @@ class ft extends g {
    * @returns {string}
    */
   getMonthName(e) {
-    return V.monthNames[e];
+    return A.monthNames[e];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -276,7 +276,7 @@ class ft extends g {
    */
   selectWeek(e, s) {
     this.data.currentWeek = e;
-    const a = z(e, s);
+    const a = $(e, s);
     this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(e);
   }
   /**
@@ -286,52 +286,116 @@ class ft extends g {
    */
   render() {
     return o({ class: "week-calendar-container border rounded-md bg-background p-3" }, [
-      we({
+      xe({
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      ye({
+      be({
         selectWeek: (e, s) => this.selectWeek(e, s)
       })
     ]);
   }
 }
-const be = (t) => o({ class: "py-1" }, t), xe = () => o(
+const N = ({ label: t, click: e }) => m(
+  {
+    class: `
+			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
+			opacity-50 hover:opacity-100 text-muted-foreground absolute
+			${t === "Previous" ? "left-1" : "right-1"}
+			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+		  `,
+    click: e,
+    "aria-label": `${t} month`,
+    variant: "icon",
+    icon: t === "Previous" ? w.chevron.single.left : w.chevron.single.right
+  }
+), ke = ({ onMonthClick: t, onYearClick: e, next: s, previous: a }) => o({ class: "flex items-center justify-center space-x-2 relative min-h-12 text-sm font-medium" }, [
+  m({ click: t, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+  m({ click: e, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
+  N({ label: "Previous", click: a }),
+  N({ label: "Next", click: s })
+]), ve = (t) => o({ class: "py-1" }, t), De = () => o(
   { class: "grid grid-cols-7 text-center text-sm font-medium text-muted-foreground mb-1" },
-  ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(be)
-), ke = ({ day: t, iso: e, disabled: s, isStart: a, isEnd: i, isBetween: n, onClick: l }) => y(
+  ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(ve)
+), Se = ({ day: t, iso: e, disabled: s, isStart: a, isEnd: n, isBetween: i, click: l }) => m(
   {
-    class: "flex items-center justify-center h-9 p-0 text-sm rounded-md " + (a || i ? "bg-primary text-primary-foreground" : n ? "bg-muted text-foreground" : ""),
+    class: "flex items-center justify-center h-9 p-0 text-sm rounded-md " + (a || n ? "bg-primary text-primary-foreground" : i ? "bg-muted text-foreground" : ""),
     disabled: s,
     click: () => !s && l(e)
   },
   t.toString()
-), De = ({ cells: t }) => o(
+), Ce = ({ cells: t }) => o(
   { class: "grid grid-cols-7 gap-1" },
   t.map(
-    (e) => e === null ? o() : ke(
+    (e) => e ? Se({
+      day: e.day,
+      iso: e.iso,
+      disabled: e.disabled,
+      isStart: e.isStart,
+      isEnd: e.isEnd,
+      isBetween: e.isBetween,
+      click: e.click
+    }) : null
+  )
+), Ie = f((t, e) => o({ class: "fex flex-auto flex-col" }, [
+  ke({
+    onMonthClick: t.onMonthClick,
+    onYearClick: t.onYearClick,
+    next: t.next,
+    previous: t.previous
+  }),
+  o({
+    class: "flex flex-auto flex-col w-full",
+    onSet: [
+      "currentDate",
+      () => [
+        De(),
+        Ce({ cells: t.cells })
+      ]
+    ]
+  })
+])), Le = ({ currentMonth: t, currentYear: e, onSelect: s }) => o(
+  { class: "grid grid-cols-3 gap-2" },
+  A.monthNames.map(
+    (a, n) => m(
       {
-        day: e.day,
-        iso: e.iso,
-        disabled: e.disabled,
-        isStart: e.isStart,
-        isEnd: e.isEnd,
-        isBetween: e.isBetween,
-        onClick: e.onClick
-      }
+        click: (i) => {
+          i.preventDefault(), i.stopPropagation(), s(n);
+        },
+        variant: t === n ? "primary" : "ghost",
+        "aria-label": `Select ${a} ${e}`
+      },
+      a.substring(0, 3)
     )
   )
-), ve = ({ start: t, end: e, selecting: s, onSelectStart: a, onSelectEnd: i }) => o({ class: "flex space-x-2 mb-3" }, [
-  y(
+), Te = ({ start: t, end: e, selecting: s, onSelectStart: a, onSelectEnd: n }) => o({ class: "flex space-x-2 mb-3" }, [
+  m(
     { click: a, variant: s === "start" ? "primary" : "ghost" },
     t ? `Start: ${t}` : "Select start"
   ),
-  y(
-    { click: i, variant: s === "end" ? "primary" : "ghost" },
+  m(
+    { click: n, variant: s === "end" ? "primary" : "ghost" },
     e ? `End: ${e}` : "Select end"
   )
-]);
-class gt extends g {
+]), Be = ({ currentYear: t, onSelect: e }) => {
+  const s = t - 50, a = Array.from({ length: 101 }, (n, i) => s + i);
+  return o(
+    { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
+    a.map(
+      (n) => m(
+        {
+          click: (i) => {
+            i.preventDefault(), i.stopPropagation(), e(n);
+          },
+          variant: n === t ? "primary" : "ghost",
+          "aria-label": `Select ${n}`
+        },
+        n.toString()
+      )
+    )
+  );
+};
+class xt extends g {
   /**
    * Declare compiler props.
    *
@@ -363,10 +427,12 @@ class gt extends g {
   /**
    * Initialize component state.
    *
-   * @returns {{selecting:string,start:string|null,end:string|null}}
+   * @returns {{view:string,selecting:string,start:string|null,end:string|null}}
    */
   setupStates() {
     return {
+      view: "calendar",
+      // 'calendar', 'months', or 'years'
       selecting: "start",
       start: this.startDate,
       end: this.endDate
@@ -381,62 +447,101 @@ class gt extends g {
   handleClick(e) {
     this.state.selecting === "start" ? (this.state.start = e, this.state.end = null, this.state.selecting = "end") : (this.state.end = e, this.state.selecting = "start", typeof this.onRangeSelect == "function" && this.onRangeSelect(this.state.start, this.state.end));
   }
+  /**
+   * Update current month/year in data.
+   *
+   * @param {{month:number,year:number}} obj
+   * @returns {void}
+   */
+  setCurrent({ month: e, year: s }) {
+    const a = this.data.current;
+    a.month = (e + 12) % 12, a.year = s + (e < 0 ? -1 : e > 11 ? 1 : 0);
+  }
   /**
    * Render the range calendar.
    *
    * @returns {object}
    */
   render() {
-    const { today: e, current: s } = this.data, { start: a, end: i, selecting: n } = this.state, l = new Date(s.year, s.month, 1).getDay(), h = new Date(s.year, s.month + 1, 0).getDate(), r = [];
-    for (let d = 0; d < l; d++)
+    const { today: e, current: s } = this.data, { start: a, end: n, selecting: i } = this.state, l = new Date(s.year, s.month, 1).getDay(), u = new Date(s.year, s.month + 1, 0).getDate(), r = [];
+    for (let c = 0; c < l; c++)
       r.push(null);
-    for (let d = 1; d <= h; d++) {
-      const u = Z(s.year, s.month, d), m = /* @__PURE__ */ new Date(u + "T00:00:00") < new Date(e.year, e.month, e.date), p = this.blockPriorDates && m, T = a === u, B = i === u, R = a && i && u > a && u < i;
+    for (let c = 1; c <= u; c++) {
+      const h = te(s.year, s.month, c), p = /* @__PURE__ */ new Date(h + "T00:00:00") < new Date(e.year, e.month, e.date), y = this.blockPriorDates && p, T = a === h, B = n === h, M = a && n && h > a && h < n;
       r.push({
-        day: d,
-        iso: u,
-        disabled: p,
+        day: c,
+        iso: h,
+        disabled: y,
         isStart: T,
         isEnd: B,
-        isBetween: R,
-        onClick: (U) => this.handleClick(U)
+        isBetween: M,
+        click: (Q) => this.handleClick(Q)
       });
     }
     return o({ class: "range-calendar p-4 rounded-md border min-w-80" }, [
-      ve({
+      Te({
         start: a,
-        end: i,
-        selecting: n,
+        end: n,
+        selecting: i,
         onSelectStart: () => this.state.selecting = "start",
         onSelectEnd: () => this.state.selecting = "end"
       }),
-      xe(),
-      De({ cells: r })
+      X("view", (c) => {
+        switch (c) {
+          case "months":
+            return Le(
+              {
+                currentMonth: s.month,
+                currentYear: s.year,
+                onSelect: (h) => {
+                  this.setCurrent({ month: h, year: s.year }), this.state.view = "calendar";
+                }
+              }
+            );
+          case "years":
+            return Be(
+              {
+                currentYear: s.year,
+                onSelect: (h) => {
+                  this.setCurrent({ month: s.month, year: h }), this.state.view = "calendar";
+                }
+              }
+            );
+          default:
+            return Ie({
+              onMonthClick: () => this.state.view = "months",
+              onYearClick: () => this.state.view = "years",
+              next: () => this.setCurrent({ month: s.month + 1, year: s.year }),
+              previous: () => this.setCurrent({ month: s.month - 1, year: s.year }),
+              cells: r
+            });
+        }
+      })
     ]);
   }
 }
-const Se = (t, e) => {
+const Me = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, Ie = (t) => N({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
-  E((e) => new le({ class: "mr-2", onChange: (s, a) => Se(e, a) }))
-]), Ce = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
+}, Re = (t) => j({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  q((e) => new ce({ class: "mr-2", onChange: (s, a) => Me(e, a) }))
+]), Pe = ({ align: t, sortable: e, key: s, label: a, sort: n, class: i }) => {
   const l = t || "justify-start";
-  return N({
-    class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
-    click: e && (() => i(s))
+  return j({
+    class: `cursor-pointer py-3 px-4 text-base ${i || ""}`,
+    click: e && (() => n(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
       S(a),
-      e && Q({ class: "ml-2", html: k.arrows.upDown })
+      e && K({ class: "ml-2", html: w.arrows.upDown })
     ])
   ]);
-}, P = (t) => X([
-  q({
+}, P = (t) => G([
+  _({
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? Ie({ toggle: t.toggle }) : Ce({
+      (e) => e.label === "checkbox" ? Re({ toggle: t.toggle }) : Pe({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -445,15 +550,15 @@ const Se = (t, e) => {
       })
     ]
   })
-]), Le = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i }) => new se({
+]), We = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: n }) => new ne({
   cache: "list",
   key: t,
   items: e,
-  rowItem: (n) => a(n, s),
+  rowItem: (i) => a(i, s),
   class: "divide-y divide-border",
-  emptyState: i
+  emptyState: n
 });
-class F extends g {
+class U extends g {
   /**
    * Initializes component data.
    *
@@ -513,8 +618,8 @@ class F extends g {
   selectRow(e) {
     const s = e.selected ?? !1;
     e.selected = !s;
-    const a = this.data.get("selectedRows"), i = e.selected ? [...a, e] : a.filter((n) => n !== e);
-    this.data.selectedRows = i, this.updateSelected();
+    const a = this.data.get("selectedRows"), n = e.selected ? [...a, e] : a.filter((i) => i !== e);
+    this.data.selectedRows = n, this.updateSelected();
   }
   /**
    * Renders the DataTable component.
@@ -524,14 +629,14 @@ class F extends g {
   render() {
     const e = this.rows, s = this.border !== !1 ? "border" : "";
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      D("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${s} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        M({ class: "w-full" }, [
+        R({ class: "w-full" }, [
           // @ts-ignore
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          Le({
+          We({
             // @ts-ignore
             key: this.key,
             rows: e,
@@ -606,7 +711,7 @@ class F extends g {
     this.data.selectedRows = [];
   }
 }
-const Te = (t) => new ae({
+const Oe = (t) => new ie({
   cache: "list",
   loadMoreItems: t.loadMoreItems,
   offset: t.offset,
@@ -617,7 +722,7 @@ const Te = (t) => new ae({
   rowItem: (e) => t.rowItem(e, t.selectRow),
   class: "divide-y divide-border"
 });
-class Be extends F {
+class $e extends U {
   /**
    * Renders the DataTable component.
    *
@@ -626,14 +731,14 @@ class Be extends F {
   render() {
     const e = this.rows, s = this.border !== !1 ? "border" : "";
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      D("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${s} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        M({ class: "w-full" }, [
+        R({ class: "w-full" }, [
           // @ts-ignore
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          Te({
+          Oe({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -665,7 +770,7 @@ class Be extends F {
     this.list.refresh();
   }
 }
-const mt = f((t) => new Be(
+const kt = f((t) => new $e(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -681,7 +786,7 @@ const mt = f((t) => new Be(
     border: t.border,
     emptyState: t.emptyState
   }
-)), Re = (t) => new ie({
+)), ze = (t) => new oe({
   cache: "list",
   scrollContainer: t.scrollContainer,
   loadMoreItems: t.loadMoreItems,
@@ -693,7 +798,7 @@ const mt = f((t) => new Be(
   rowItem: (e) => t.rowItem(e, t.selectRow),
   class: "divide-y divide-border"
 });
-class Me extends F {
+class Ne extends U {
   /**
    * Renders the DataTable component.
    *
@@ -702,14 +807,14 @@ class Me extends F {
   render() {
     const e = this.rows, s = this.border !== !1 ? "border" : "";
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      D("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${s} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        M({ class: "w-full" }, [
+        R({ class: "w-full" }, [
           // @ts-ignore
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          Re({
+          ze({
             // @ts-ignore
             scrollContainer: this.scrollContainer,
             // @ts-ignore
@@ -743,7 +848,7 @@ class Me extends F {
     this.list.refresh();
   }
 }
-const pt = f((t) => new Me(
+const vt = f((t) => new Ne(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -760,45 +865,45 @@ const pt = f((t) => new Me(
     border: t.border,
     emptyState: t.emptyState
   }
-)), Pe = f(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
-  w({ class: "text-base font-semibold leading-6 m-0" }, t),
-  w({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
-])), We = () => o({ class: "flex items-center gap-x-1.5" }, [
+)), je = f(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+  b({ class: "text-base font-semibold leading-6 m-0" }, t),
+  b({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
+])), Ye = () => 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" })
   ]),
-  w({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), Oe = (t) => w({ class: "text-xs leading-5 text-muted-foreground" }, [
+  b({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), Ae = (t) => b({ class: "text-xs leading-5 text-muted-foreground" }, [
   S("Last seen "),
-  K({ datetime: t }, "3h ago")
-]), ze = (t, e) => t === "online" ? We() : Oe(e), $e = f(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
-  w({ class: "text-sm leading-6 m-0" }, t),
-  ze(s, e)
-])), Ne = (t) => t.split(" ").map((s) => s[0]).join(""), je = f((t) => I({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  V({ datetime: t }, "3h ago")
+]), He = (t, e) => t === "online" ? Ye() : Ae(e), Fe = f(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  b({ class: "text-sm leading-6 m-0" }, t),
+  He(s, e)
+])), Ue = (t) => t.split(" ").map((s) => s[0]).join(""), Ee = f((t) => C({ 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" }, [
-    ee({ src: t.image, alt: t.name, fallbackText: Ne(t.name) }),
-    Pe({ name: t.name, email: t.email })
+    se({ src: t.image, alt: t.name, fallbackText: Ue(t.name) }),
+    je({ name: t.name, email: t.email })
   ]),
-  $e({
+  Fe({
     role: t.role,
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), yt = f((t) => new ne({
+])), Dt = f((t) => new le({
   cache: "list",
   key: "name",
   items: t.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: je
-})), Ae = (t, e) => e.includes(t), Ye = (t, e, s) => t.exact ? s === e : Ae(e, s), Fe = ({ text: t, href: e, exact: s, hidden: a }) => new A({
+  rowItem: Ee
+})), Qe = (t, e) => e.includes(t), Xe = (t, e, s) => t.exact ? s === e : Qe(e, s), qe = ({ text: t, href: e, exact: s, hidden: a }) => new H({
   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 wt extends g {
+class St extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -819,14 +924,14 @@ class wt extends g {
    * @returns {object}
    */
   render() {
-    return C(
+    return I(
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
-        b({
+        x({
           class: "flex space-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
-            value: ["[[path]]", x.data],
+            value: ["[[path]]", k.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -839,7 +944,7 @@ class wt extends g {
    * @returns {void}
    */
   afterSetup() {
-    const e = x.data.path;
+    const e = k.data.path;
     this.updateLinks(e);
   }
   /**
@@ -854,7 +959,7 @@ class wt extends g {
     for (const a of this.links) {
       if (!a.rendered)
         continue;
-      Ye(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      Xe(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -883,9 +988,9 @@ class wt extends g {
    * @param {object} option
    * @returns {object}
    */
-  addLink({ label: e, href: s, exact: a, hidden: i }) {
-    const n = Fe({ text: e, href: s, exact: a, hidden: i });
-    return this.links.push(n), n;
+  addLink({ label: e, href: s, exact: a, hidden: n }) {
+    const i = qe({ text: e, href: s, exact: a, hidden: n });
+    return this.links.push(i), i;
   }
   /**
    * This will clear the links.
@@ -896,13 +1001,13 @@ class wt extends g {
     this.links = [];
   }
 }
-const bt = f((t) => {
+const Ct = f((t) => {
   const e = t.margin || "m-4 ml-0";
   return t.allowHistory = t.allowHistory === !0, o({ class: `flex-none ${e}` }, [
-    y({ variant: "back", class: "ghost", ...t })
+    m({ variant: "back", class: "ghost", ...t })
   ]);
 });
-class H extends g {
+class E extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -989,13 +1094,13 @@ class H extends g {
     return this.children;
   }
 }
-Y.addType("dockableOverlay", (t) => {
+F.addType("dockableOverlay", (t) => {
   if (!t)
     return;
   const e = t.component;
   e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
 });
-class xt extends H {
+class It extends E {
   /**
    * This will stop presistence.
    *
@@ -1061,7 +1166,7 @@ class xt extends H {
    * @returns {void}
    */
   afterSetup() {
-    Y.add(
+    F.add(
       this.container,
       "dockableOverlay",
       {
@@ -1104,7 +1209,7 @@ class xt extends H {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class kt extends H {
+class Lt extends E {
   /**
    * This will get the overlay type.
    *
@@ -1123,7 +1228,7 @@ class kt extends H {
     this.container = e, this.initialize();
   }
 }
-const He = f(({ index: t, click: e, state: s }, a) => I({
+const Ke = f(({ index: t, click: e, state: s }, a) => C({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -1132,11 +1237,11 @@ const He = f(({ index: t, click: e, state: s }, a) => I({
     }]
   ],
   click: () => e(t)
-}, a)), Ue = f(({ selectOption: t, state: e }) => b({
+}, a)), Ge = f(({ selectOption: t, state: e }) => x({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (s, a) => He({ index: a, click: t, state: e }, s.label)]
-})), Ee = f((t) => o({ class: "relative flex items-center" }, [
-  re({
+  for: ["filteredOptions", (s, a) => Ke({ index: a, click: t, state: e }, s.label)]
+})), _e = f((t) => o({ class: "relative flex items-center" }, [
+  de({
     cache: "input",
     class: t.class ?? "",
     placeholder: t.placeholder ?? "Search...",
@@ -1152,22 +1257,22 @@ const He = f(({ index: t, click: e, state: s }, a) => I({
     ]
   }),
   t.icon && o({ class: "absolute flex right-0 mr-2" }, [
-    J(t.icon)
+    ee(t.icon)
   ])
-])), Qe = (t) => o({
+])), Ve = (t) => o({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (e, s, a) => {
     if (e)
-      return new te({
+      return new ae({
         cache: "dropdown",
         parent: a,
         button: a.input,
         size: "xl"
       }, [
-        Ue(t)
+        Ge(t)
       ]);
   }]
-}), Dt = _(
+}), Tt = Z(
   {
     /**
      * This will set up the data object.
@@ -1264,7 +1369,7 @@ const He = f(({ index: t, click: e, state: s }, a) => I({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        Ee({
+        _e({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1276,7 +1381,7 @@ const He = f(({ index: t, click: e, state: s }, a) => I({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        Qe({
+        Ve({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1287,22 +1392,22 @@ const He = f(({ index: t, click: e, state: s }, a) => I({
       ]);
     }
   }
-), Xe = (t) => I(
+), Je = (t) => C(
   {
     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"]]
   },
   [
-    D({
+    v({
       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)
   ]
-), qe = (t, e) => (t.callBack = e, Xe(t)), Ke = (t) => C({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => qe(e, t.callBack)] })
+), Ze = (t, e) => (t.callBack = e, Je(t)), et = (t) => I({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  x({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ze(e, t.callBack)] })
 ]);
-class vt extends g {
+class Bt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1319,12 +1424,12 @@ class vt extends g {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      Ke({
+      et({
         class: this.class,
         options: this.options,
         callBack: e
       }),
-      j({
+      Y({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1368,9 +1473,9 @@ class vt extends g {
     if (!s || s.length < 1)
       return;
     const a = s[0];
-    for (const i of s)
-      if (i.value === e)
-        return i.layout;
+    for (const n of s)
+      if (n.value === e)
+        return n.layout;
     return a.layout;
   }
   /**
@@ -1390,23 +1495,23 @@ class vt extends g {
     };
   }
 }
-const Ge = (t) => I(
+const tt = (t) => C(
   {
     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"]]
   },
   [
-    D({
+    v({
       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)
   ]
-), Ve = (t, e) => (t.callBack = e, Ge(t)), _e = (t) => C({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ve(e, t.callBack)] })
+), st = (t, e) => (t.callBack = e, tt(t)), at = (t) => I({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  x({ class: "flex flex-auto flex-row", map: [t.options, (e) => st(e, t.callBack)] })
 ]);
-class St extends g {
+class Mt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1422,7 +1527,7 @@ class St extends g {
    */
   render() {
     const e = this.select.bind(this);
-    return _e({
+    return at({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1449,17 +1554,17 @@ class St extends g {
     };
   }
 }
-const Je = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ze = (t, e) => {
+const nt = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), it = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : Je(s, e);
-}, et = ({ text: t, href: e, exact: s }) => new A({
+  return t.exact ? e === s : nt(s, e);
+}, ot = ({ text: t, href: e, exact: s }) => new H({
   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 tt extends g {
+class lt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1480,12 +1585,12 @@ class tt extends g {
    * @returns {object}
    */
   render() {
-    return C({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
-      b({
+    return I({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
+      x({
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", x.data],
+          value: ["[[path]]", k.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1497,7 +1602,7 @@ class tt extends g {
    * @returns {void}
    */
   afterSetup() {
-    const e = x.data.path;
+    const e = k.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1509,9 +1614,9 @@ class tt extends g {
   updateLinks(e) {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
-    for (const i of this.links)
-      if (i.rendered !== !1 && (s = Ze(i, e), s === !0)) {
-        this.updateLink(i, !0);
+    for (const n of this.links)
+      if (n.rendered !== !1 && (s = it(n, e), s === !0)) {
+        this.updateLink(n, !0);
         break;
       }
     s !== !0 && a && this.updateLink(a, !0);
@@ -1542,8 +1647,8 @@ class tt extends g {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a }) {
-    const i = et({ text: e, href: s, exact: a });
-    return this.links.push(i), i;
+    const n = ot({ text: e, href: s, exact: a });
+    return this.links.push(n), n;
   }
   /**
    * This will remove all the links.
@@ -1554,7 +1659,7 @@ class tt extends g {
     this.links = [];
   }
 }
-class It extends g {
+class Rt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1570,11 +1675,11 @@ class It extends g {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new tt({
+      new lt({
         class: this.class,
         options: this.options
       }),
-      j({
+      Y({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1588,8 +1693,8 @@ class It extends g {
   addGroup() {
     let e;
     const s = [], a = this.options;
-    for (let i = 0, n = a.length; i < n; i++)
-      e = a[i], s.push(
+    for (let n = 0, i = a.length; n < i; n++)
+      e = a[n], s.push(
         {
           uri: e.uri || e.href,
           component: e.component,
@@ -1600,7 +1705,7 @@ class It extends g {
     return s;
   }
 }
-class st extends g {
+class rt extends g {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1610,7 +1715,7 @@ class st extends g {
   onCreated() {
     this.lineWidth = this.lineWidth || 3, this.lineColor = this.lineColor || "#000000", this.canvas = null, this.ctx = null, this.status = "stopped";
     const e = 1e3 / 60;
-    this.timer = new oe(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 re(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.
@@ -1618,7 +1723,7 @@ class st extends g {
    * @returns {object} Layout definition for the canvas.
    */
   render() {
-    return G({
+    return J({
       style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
     });
   }
@@ -1648,13 +1753,13 @@ class st extends g {
    * @returns {Array} An array of [eventName, element, callback] definitions.
    */
   setupEvents() {
-    const e = this.panel, s = this.pointerPosition.bind(this), a = this.pointerUp.bind(this), i = this.pointerDown.bind(this), n = this.resize.bind(this), l = { passive: !1 };
+    const e = this.panel, s = this.pointerPosition.bind(this), a = this.pointerUp.bind(this), n = this.pointerDown.bind(this), i = this.resize.bind(this), l = { passive: !1 };
     return [
       ["pointermove", e, s, l],
       ["pointerup", e, a],
-      ["pointerdown", e, i, l],
+      ["pointerdown", e, n, l],
       ["pointerout", e, a],
-      ["resize", globalThis, n]
+      ["resize", globalThis, i]
     ];
   }
   /**
@@ -1665,14 +1770,14 @@ class st extends g {
    */
   getEventPosition(e) {
     let s, a;
-    const i = this.canvas, n = i.width / parseInt(i.style.width), l = i.getBoundingClientRect();
+    const n = this.canvas, i = n.width / parseInt(n.style.width), l = n.getBoundingClientRect();
     if (e.touches && e.touches.length) {
-      const d = e.touches[0];
-      s = d.clientX, a = d.clientY;
+      const c = e.touches[0];
+      s = c.clientX, a = c.clientY;
     } else
       s = e.x || e.clientX, a = e.y || e.clientY;
-    const h = parseInt((s - l.left) * n), r = parseInt((a - l.top) * n);
-    this.mouse.x = h, this.mouse.y = r;
+    const u = parseInt((s - l.left) * i), r = parseInt((a - l.top) * i);
+    this.mouse.x = u, this.mouse.y = r;
   }
   /**
    * Called when the pointer goes down on the canvas.
@@ -1714,10 +1819,10 @@ class st extends g {
   resize() {
     const { canvas: e, ctx: s } = this, a = e.toDataURL();
     if (this.scale(), this.setupBackground(s), a !== "data:,") {
-      const i = new globalThis.Image();
-      W.on("load", i, function n() {
-        s.drawImage(i, 0, 0), W.off("load", i, n);
-      }), i.src = a;
+      const n = new globalThis.Image();
+      W.on("load", n, function i() {
+        s.drawImage(n, 0, 0), W.off("load", n, i);
+      }), n.src = a;
     }
     this.draw();
   }
@@ -1746,13 +1851,13 @@ class st extends g {
    * @returns {void}
    */
   scale() {
-    const e = this.canvas, s = this.container, a = O.getSize(s), i = this.targetSize, n = i.width, l = i.height;
-    let h = n + "px", r = l + "px";
-    if (this.width = e.width = n, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
-      const d = a.width, u = a.height, c = d / n, m = u / l, p = Math.min(c, m);
-      h = n * p + "px", r = l * p + "px";
+    const e = this.canvas, s = this.container, a = O.getSize(s), n = this.targetSize, i = n.width, l = n.height;
+    let u = i + "px", r = l + "px";
+    if (this.width = e.width = i, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
+      const c = a.width, h = a.height, d = c / i, p = h / l, y = Math.min(d, p);
+      u = i * y + "px", r = l * y + "px";
     }
-    e.style.width = h, e.style.height = r;
+    e.style.width = u, e.style.height = r;
   }
   /**
    * Main drawing loop. If the mouse is down, adds a line
@@ -1772,8 +1877,8 @@ class st extends g {
   drawBottomLine(e) {
     const s = this.canvas;
     e.globalAlpha = 1, e.shadowBlur = 0;
-    const a = this.margin.x, i = this.height - this.margin.y;
-    e.beginPath(), e.moveTo(a, i), e.lineTo(s.width - this.margin.x, i), e.lineWidth = this.baseLineWidth, e.strokeStyle = this.baseStrokeColor, e.stroke(), e.closePath();
+    const a = this.margin.x, n = this.height - this.margin.y;
+    e.beginPath(), e.moveTo(a, n), e.lineTo(s.width - this.margin.x, n), e.lineWidth = this.baseLineWidth, e.strokeStyle = this.baseStrokeColor, e.stroke(), e.closePath();
   }
   /**
    * Adds a line to the current path, updating the 'signed' status.
@@ -1784,10 +1889,10 @@ class st extends g {
    * @param {string} color The stroke color.
    * @returns {void}
    */
-  addLine(e, s, a, i) {
+  addLine(e, s, a, n) {
     this.signed || (this.signed = !0);
-    const n = Math.round(s), l = Math.round(a);
-    e.lineWidth = this.lineWidth, e.strokeStyle = i, e.lineTo(n, l), e.stroke();
+    const i = Math.round(s), l = Math.round(a);
+    e.lineWidth = this.lineWidth, e.strokeStyle = n, e.lineTo(i, l), e.stroke();
   }
   /**
    * Clears the canvas, sets signed to false, and re-initializes
@@ -1826,7 +1931,7 @@ class st extends g {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class Ct extends g {
+class Pt extends g {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1843,19 +1948,19 @@ class Ct extends g {
    */
   render() {
     return o({ class: "signature-panel relative flex flex-auto overflow-hidden select-none" }, [
-      ce({
+      he({
         cache: "hiddenInput",
         required: !0,
         bind: this.path + ".data"
       }),
       o({ class: "absolute top-2 right-2" }, [
-        y({
+        m({
           variant: "icon",
-          icon: k.circleX,
+          icon: w.circleX,
           click: this.reset.bind(this)
         })
       ]),
-      new st({
+      new rt({
         cache: "canvasLayer",
         margin: this.margin,
         targetSize: this.targetSize,
@@ -1905,37 +2010,37 @@ class Ct extends g {
   }
 }
 export {
-  bt as B,
-  Ie as C,
-  Le as D,
-  Ce as H,
-  kt as I,
-  wt as N,
-  H as O,
-  dt as P,
-  gt as R,
-  pt as S,
+  Ct as B,
+  Re as C,
+  We as D,
+  Pe as H,
+  Lt as I,
+  St as N,
+  E as O,
+  pt as P,
+  xt as R,
+  vt as S,
   P as T,
-  je as U,
-  ft as W,
-  fe as a,
-  z as b,
-  he as c,
-  ht as d,
-  ut as e,
-  me as f,
-  ue as g,
-  ye as h,
-  we as i,
-  F as j,
-  mt as k,
-  yt as l,
-  xt as m,
-  Dt as n,
-  Ee as o,
-  vt as p,
-  St as q,
-  tt as r,
-  It as s,
-  Ct as t
+  Ee as U,
+  bt as W,
+  me as a,
+  $ as b,
+  fe as c,
+  yt as d,
+  wt as e,
+  ye as f,
+  ge as g,
+  be as h,
+  xe as i,
+  U as j,
+  kt as k,
+  Dt as l,
+  It as m,
+  Tt as n,
+  _e as o,
+  Bt as p,
+  Mt as q,
+  lt as r,
+  Rt as s,
+  Pt as t
 };