@base-framework/ui 1.0.219 → 1.0.221

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

@@ -1,22 +1,22 @@
-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) => ({
+import { Button as v, Div as o, On as D, Span as S, OnState as q, Th as A, UseParent as K, I as G, Thead as J, Tr as _, Table as R, P as w, Li as C, Time as V, Nav as I, Ul as x, Section as F, Canvas as Z } from "@base-framework/atoms";
+import { Atom as f, Component as m, Data as M, DateTime as P, router as k, NavLink as H, DataTracker as U, Jot as tt, base as W, Dom as O } from "@base-framework/base";
+import { B as g, I as et } from "./buttons-Cm9etaEG.js";
+import { Icons as b } from "./icons.es.js";
+import { F as st, A as at, P as nt } from "./calendar-Bn55oWBo.js";
+import { TableBody as it, DataTableBody as ot, ScrollableTableBody as lt, List as rt, IntervalTimer as ct } from "@base-framework/organisms";
+import { C as dt, I as ht, H as ut } from "./inputs-CMjx5-IX.js";
+f((e, t) => ({
   class: "flex items-center px-4 py-2",
-  ...t,
-  children: e
+  ...e,
+  children: t
 }));
-f(({ value: t, label: e }) => v({
+f(({ value: e, label: t }) => 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 pt extends g {
+  onState: ["performance", { active: e }],
+  dataSet: ["performance", ["state", e, "active"]],
+  click: (s, { state: a }) => a.performance = e
+}, t));
+class ye extends m {
   /**
    * This will declare the props for the compiler.
    *
@@ -34,57 +34,57 @@ class pt extends g {
     return o({ class: this.class || "" }, this.children);
   }
 }
-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
+const ft = (e) => {
+  const t = new Date(e, 11, 31), s = new Date(e, 0, 1);
+  return t.getDay() === 4 || // December 31 is a Thursday
   s.getDay() === 4;
-}, fe = (t) => {
-  const e = new Date(t.valueOf()), s = (e.getDay() + 6) % 7;
-  e.setDate(e.getDate() - s + 3);
-  const a = e.getFullYear(), n = new Date(a, 0, 4);
+}, mt = (e) => {
+  const t = new Date(e.valueOf()), s = (t.getDay() + 6) % 7;
+  t.setDate(t.getDate() - s + 3);
+  const a = t.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) ? {
+  const i = Math.ceil((t - n) / 6048e5) + 1;
+  return i > 52 && !ft(a) ? {
     weekNumber: 1,
     year: a + 1
   } : {
     weekNumber: i,
     year: a
   };
-}, ge = (t, e, s) => {
+}, gt = (e, t, s) => {
   if (s === 0) return [];
-  const a = new Date(t, e, 0).getDate();
+  const a = new Date(e, t, 0).getDate();
   return Array.from(
     { length: s },
-    (n, i) => new Date(t, e - 1, a - s + i + 1)
+    (n, i) => new Date(e, t - 1, a - s + i + 1)
   );
-}, 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);
+}, pt = (e, t, s) => Array.from({ length: s }, (a, n) => new Date(e, t + 1, n + 1)), $ = (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);
-  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 = [];
+  return i.setDate(n.getDate() + (e - 1) * 7), i;
+}, be = (e, t) => {
+  const s = new Date(e, t, 1).getDay(), a = new Date(e, t + 1, 0).getDate(), n = [];
   let i = [];
   for (let l = 1 - s; l <= a; l++) {
-    const u = new Date(t, e, l);
+    const u = new Date(e, t, l);
     i.push(l > 0 ? u : null), (i.length === 7 || l === a) && (n.push([...i]), i = []);
   }
   return n;
-}, wt = (t, e) => {
-  const s = new Date(t, e + 1, 0).getDate(), a = [];
+}, we = (e, t) => {
+  const s = new Date(e, t + 1, 0).getDate(), a = [];
   let n = [];
   for (let i = 1; i <= s; i++)
-    n.push(new Date(t, e, i)), n.length === 7 && (a.push(n), n = []);
+    n.push(new Date(e, t, i)), n.length === 7 && (a.push(n), n = []);
   return n.length > 0 && a.push(n), a;
-}, pe = (t, e, s) => {
+}, yt = (e, t, s) => {
   const a = /* @__PURE__ */ new Date();
-  return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
-}, ye = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: n }) => {
-  const i = pe(t, e, s);
+  return a.getDate() === e && a.getMonth() === t && a.getFullYear() === s;
+}, bt = ({ day: e, month: t, year: s, weekNumber: a, selectWeek: n }) => {
+  const i = yt(e, t, s);
   return v({
-    text: t || "",
-    disabled: !t,
+    text: e || "",
+    disabled: !e,
     class: `
 			px-2 py-1 text-center rounded-md
 			${i ? "bg-accent text-accent-foreground" : ""}
@@ -92,19 +92,19 @@ const ue = (t) => {
 		`,
     click: () => n(a, s)
   });
-}, 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,
+}, wt = (e, t) => {
+  const s = new Date(e, t, 1).getDay(), a = new Date(e, t + 1, 0).getDate(), n = gt(e, t, s), i = Array.from({ length: a }, (d, p) => new Date(e, t, p + 1)), l = (n.length + i.length) % 7, u = l === 0 ? 0 : 7 - l, c = pt(e, t, u), h = [...n, ...i, ...c], r = [];
+  for (let d = 0; d < h.length; d += 7) {
+    const p = h.slice(d, d + 7), y = p.find((B) => B) || new Date(e, t, 1), { weekNumber: L, year: T } = mt(y);
+    r.push({
+      weekNumber: L,
+      year: T,
       days: p
     });
   }
-  return h;
-}, be = ({ selectWeek: t }) => D("month", (e, s, { data: a }) => {
-  const { year: n, month: i, currentDate: l } = a, u = we(n, i);
+  return r;
+}, xt = ({ selectWeek: e }) => D("month", (t, s, { data: a }) => {
+  const { year: n, month: i, currentDate: l } = a, u = wt(n, i);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -115,38 +115,38 @@ const ue = (t) => {
           class: "grid grid-cols-7 col-span-7 text-center text-muted-foreground items-center"
         },
         ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
-          (r) => S({ class: "px-1 py-1", text: r })
+          (c) => S({ class: "px-1 py-1", text: c })
         )
       ),
       // Render each "week" row
       ...u.map(
-        ({ weekNumber: r, days: c, year: h }) => o({
+        ({ weekNumber: c, days: h, year: r }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
-            ring: r
+            ring: c
           }]
         }, [
           // Left column: ISO week number
           o({
             class: "font-medium text-center col-span-1 rounded-sm cursor-pointer",
-            click: () => t(r, h),
+            click: () => e(c, r),
             // If you have a 'currentWeek' state, you can highlight it with 'onSet'
             onSet: ["currentWeek", {
-              "text-primary-foreground": r,
-              "bg-primary": r
+              "text-primary-foreground": c,
+              "bg-primary": c
             }],
-            text: r ? `W${r}` : ""
+            text: c ? `W${c}` : ""
           }),
           // The 7 cells for each day in the row
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
-            c.map(
-              (d) => ye({
+            h.map(
+              (d) => bt({
                 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
+                weekNumber: c,
+                selectWeek: e
               })
             )
           )
@@ -154,31 +154,31 @@ const ue = (t) => {
       )
     ]
   );
-}), z = ({ label: t, click: e }) => m(
+}), z = ({ label: e, click: t }) => g(
   {
     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"}
+			${e === "Previous" ? "left-1" : "right-1"}
 			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
 		  `,
-    click: e,
-    "aria-label": `${t} month`,
+    click: t,
+    "aria-label": `${e} month`,
     variant: "icon",
-    icon: t === "Previous" ? w.chevron.single.left : w.chevron.single.right
+    icon: e === "Previous" ? b.chevron.single.left : b.chevron.single.right
   }
-), xe = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+), kt = ({ next: e, previous: t }) => 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
+    click: t
   }),
   z({
     label: "Next",
-    click: t
+    click: e
   })
 ]);
-class bt extends g {
+class xe extends m {
   /**
    * This will declare the props for the compiler.
    *
@@ -193,8 +193,8 @@ class bt extends g {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = $(s, e.getFullYear());
-    return new L({
+    const t = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(t), a = $(s, t.getFullYear());
+    return new M({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
       month: a.getMonth(),
@@ -208,8 +208,8 @@ class bt extends g {
    * @param {Date} today
    * @returns {Date}
    */
-  getSelectedDate(e) {
-    const s = this.selectedDate ? new Date(this.selectedDate) : e;
+  getSelectedDate(t) {
+    const s = this.selectedDate ? new Date(this.selectedDate) : t;
     return new Date(s.getFullYear(), s.getMonth(), s.getDate());
   }
   /**
@@ -218,8 +218,8 @@ class bt extends g {
    * @param {Date} date
    * @returns {number}
    */
-  calculateCurrentWeek(e) {
-    const s = new Date(e.valueOf()), a = (e.getDay() + 6) % 7;
+  calculateCurrentWeek(t) {
+    const s = new Date(t.valueOf()), a = (t.getDay() + 6) % 7;
     s.setDate(s.getDate() - a + 3);
     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);
@@ -230,8 +230,8 @@ class bt extends g {
    * @param {number} month
    * @returns {string}
    */
-  getMonthName(e) {
-    return A.monthNames[e];
+  getMonthName(t) {
+    return P.monthNames[t];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -239,8 +239,8 @@ class bt extends g {
    * @returns {void}
    */
   goToPreviousMonth() {
-    const e = this.data;
-    let { year: s, month: a } = e;
+    const t = this.data;
+    let { year: s, month: a } = t;
     a === 0 ? (a = 11, s--) : a--, this.setDate(a, s);
   }
   /**
@@ -249,8 +249,8 @@ class bt extends g {
    * @returns {void}
    */
   goToNextMonth() {
-    const e = this.data;
-    let { year: s, month: a } = e;
+    const t = this.data;
+    let { year: s, month: a } = t;
     a === 11 ? (a = 0, s++) : a++, this.setDate(a, s);
   }
   /**
@@ -261,11 +261,11 @@ class bt extends g {
    * @param {number|null} [date=null]
    * @returns {void}
    */
-  setDate(e, s, a) {
+  setDate(t, s, a) {
     this.data.set({
       year: s,
-      month: e,
-      monthName: this.getMonthName(e)
+      month: t,
+      monthName: this.getMonthName(t)
     }), a && (this.data.currentDate = a);
   }
   /**
@@ -274,10 +274,10 @@ class bt extends g {
    * @param {number} weekNumber
    * @returns {void}
    */
-  selectWeek(e, s) {
-    this.data.currentWeek = e;
-    const a = $(e, s);
-    this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(e);
+  selectWeek(t, s) {
+    this.data.currentWeek = t;
+    const a = $(t, s);
+    this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(t);
   }
   /**
    * Renders the WeekCalendar component.
@@ -286,108 +286,119 @@ class bt extends g {
    */
   render() {
     return o({ class: "week-calendar-container border rounded-md bg-background p-3" }, [
-      xe({
+      kt({
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      be({
-        selectWeek: (e, s) => this.selectWeek(e, s)
+      xt({
+        selectWeek: (t, s) => this.selectWeek(t, s)
       })
     ]);
   }
 }
-const N = ({ label: t, click: e }) => m(
+const j = ({ label: e, click: t }) => g(
   {
     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"}
+			${e === "Previous" ? "left-1" : "right-1"}
 			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
 		  `,
-    click: e,
-    "aria-label": `${t} month`,
+    click: t,
+    "aria-label": `${e} 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(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 || n ? "bg-primary text-primary-foreground" : i ? "bg-muted text-foreground" : ""),
-    disabled: s,
-    click: () => !s && l(e)
-  },
-  t.toString()
-), Ce = ({ cells: t }) => o(
+    icon: e === "Previous" ? b.chevron.single.left : b.chevron.single.right
+  }
+), vt = ({ 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" }, [
+  g({ click: s, variant: "ghost", "aria-label": "Select month" }, e || "[[monthName]]"),
+  g({ click: a, variant: "ghost", "aria-label": "Select year" }, (t == null ? void 0 : t.toString()) || "[[current.year]]"),
+  j({ label: "Previous", click: i }),
+  j({ label: "Next", click: n })
+]), Dt = (e) => o({ class: "h-9 flex items-center justify-center font-medium" }, e), St = () => 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(Dt)
+), Ct = ({ day: e, iso: t, disabled: s, isStart: a, isEnd: n, isBetween: i, click: l }) => {
+  let u = "ghost", c = "";
+  return a || n ? (u = "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"), g(
+    {
+      class: `flex items-center justify-center h-9 w-9 p-0 text-sm font-medium rounded-md transition-colors ${c}`,
+      variant: u,
+      disabled: s,
+      click: () => !s && l()
+    },
+    e.toString()
+  );
+}, It = ({ cells: e }) => o(
   { class: "grid grid-cols-7 gap-1" },
-  t.map(
-    (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
+  e.map(
+    (t, s) => t ? Ct({
+      day: t.day,
+      iso: t.iso,
+      disabled: t.disabled,
+      isStart: t.isStart,
+      isEnd: t.isEnd,
+      isBetween: t.isBetween,
+      click: t.click
+    }) : o({ class: "h-9" })
   )
-), Ie = f((t, e) => o({ class: "fex flex-auto flex-col" }, [
-  ke({
-    onMonthClick: t.onMonthClick,
-    onYearClick: t.onYearClick,
-    next: t.next,
-    previous: t.previous
+), Mt = f((e, t) => o({ class: "flex flex-auto flex-col" }, [
+  vt({
+    monthName: e.monthName,
+    year: e.year,
+    onMonthClick: e.onMonthClick,
+    onYearClick: e.onYearClick,
+    next: e.next,
+    previous: e.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(
+  o({ class: "flex flex-auto flex-col w-full" }, [
+    St(),
+    It({ cells: e.cells })
+  ])
+])), Lt = ({ currentMonth: e, currentYear: t, onSelect: s }) => o(
   { class: "grid grid-cols-3 gap-2" },
-  A.monthNames.map(
-    (a, n) => m(
+  P.monthNames.map(
+    (a, n) => g(
       {
         click: (i) => {
           i.preventDefault(), i.stopPropagation(), s(n);
         },
-        variant: t === n ? "primary" : "ghost",
-        "aria-label": `Select ${a} ${e}`
+        variant: e === n ? "primary" : "ghost",
+        "aria-label": `Select ${a} ${t}`
       },
       a.substring(0, 3)
     )
   )
-), 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"
-  ),
-  m(
-    { click: n, variant: s === "end" ? "primary" : "ghost" },
-    e ? `End: ${e}` : "Select end"
-  )
-]), Be = ({ currentYear: t, onSelect: e }) => {
-  const s = t - 50, a = Array.from({ length: 101 }, (n, i) => s + i);
+), Tt = ({ start: e, end: t, selecting: s, onSelectStart: a, onSelectEnd: n }) => o({ class: "flex space-x-2 mb-4" }, [
+  g({
+    click: a,
+    variant: s === "start" ? "default" : "outline",
+    class: "flex-1 text-left justify-start px-3 py-2 text-sm font-medium rounded-md border min-h-[2.5rem] flex flex-col items-start"
+  }, [
+    o({ class: "text-xs text-muted-foreground mb-1" }, "Start"),
+    o({ class: "font-medium" }, e ? Y(e) : "Select start")
+  ]),
+  g({
+    click: n,
+    variant: s === "end" ? "default" : "outline",
+    class: "flex-1 text-left justify-start px-3 py-2 text-sm font-medium rounded-md border min-h-[2.5rem] flex flex-col items-start"
+  }, [
+    o({ class: "text-xs text-muted-foreground mb-1" }, "End"),
+    o({ class: "font-medium" }, t ? Y(t) : "Select end")
+  ])
+]), Y = (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()]}`;
+}, Bt = ({ currentYear: e, onSelect: t }) => {
+  const s = e - 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(
+      (n) => g(
         {
           click: (i) => {
-            i.preventDefault(), i.stopPropagation(), e(n);
+            i.preventDefault(), i.stopPropagation(), t(n);
           },
-          variant: n === t ? "primary" : "ghost",
+          variant: n === e ? "primary" : "ghost",
           "aria-label": `Select ${n}`
         },
         n.toString()
@@ -395,7 +406,7 @@ const N = ({ label: t, click: e }) => m(
     )
   );
 };
-class xt extends g {
+class ke extends m {
   /**
    * Declare compiler props.
    *
@@ -410,20 +421,30 @@ class xt extends g {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date();
-    return new L({
+    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 M({
       today: {
-        date: e.getDate(),
-        month: e.getMonth(),
-        year: e.getFullYear()
+        date: t.getDate(),
+        month: t.getMonth(),
+        year: t.getFullYear()
       },
+      monthName: this.getMonthName(a),
       current: {
-        date: e.getDate(),
-        month: e.getMonth(),
-        year: e.getFullYear()
+        date: t.getDate(),
+        month: a,
+        year: n
       }
     });
   }
+  /**
+   * This will get the name of the month.
+   *
+   * @param {number} month
+   * @returns {string}
+   */
+  getMonthName(t) {
+    return P.monthNames[t];
+  }
   /**
    * Initialize component state.
    *
@@ -444,8 +465,8 @@ class xt extends g {
    * @param {string} isoDate
    * @returns {void}
    */
-  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));
+  handleClick(t) {
+    this.state.selecting === "start" ? (this.state.start = t, this.state.end = null, this.state.selecting = "end") : (this.state.start && t < this.state.start ? (this.state.end = this.state.start, this.state.start = t) : this.state.end = t, this.state.selecting = "start", typeof this.onRangeSelect == "function" && this.onRangeSelect(this.state.start, this.state.end));
   }
   /**
    * Update current month/year in data.
@@ -453,9 +474,9 @@ class xt extends g {
    * @param {{month:number,year:number}} obj
    * @returns {void}
    */
-  setCurrent({ month: e, year: s }) {
+  setCurrent({ month: t, year: s }) {
     const a = this.data.current;
-    a.month = (e + 12) % 12, a.year = s + (e < 0 ? -1 : e > 11 ? 1 : 0);
+    a.month = (t + 12) % 12, a.year = s + (t < 0 ? -1 : t > 11 ? 1 : 0), this.data.monthName = this.getMonthName(a.month);
   }
   /**
    * Render the range calendar.
@@ -463,113 +484,121 @@ class xt extends g {
    * @returns {object}
    */
   render() {
-    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 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: c,
-        iso: h,
-        disabled: y,
+    const { today: t, 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(), c = [];
+    for (let h = 0; h < l; h++)
+      c.push(null);
+    for (let h = 1; h <= u; h++) {
+      const r = st(s.year, s.month, h), d = new Date(s.year, s.month, h), p = new Date(t.year, t.month, t.date), y = d < p, L = this.blockPriorDates && y, T = a === r, B = n === r, X = a && n && r > a && r < n;
+      c.push({
+        day: h,
+        iso: r,
+        disabled: L,
         isStart: T,
         isEnd: B,
-        isBetween: M,
-        click: (Q) => this.handleClick(Q)
+        isBetween: X,
+        click: () => this.handleClick(r)
       });
     }
-    return o({ class: "range-calendar p-4 rounded-md border min-w-80" }, [
-      Te({
+    return o({ class: "range-calendar bg-background border border-border rounded-lg shadow-md p-4 w-full max-w-sm" }, [
+      Tt({
         start: a,
         end: n,
         selecting: i,
         onSelectStart: () => this.state.selecting = "start",
         onSelectEnd: () => this.state.selecting = "end"
       }),
-      X("view", (c) => {
-        switch (c) {
+      q("view", (h) => {
+        switch (h) {
           case "months":
-            return Le(
+            return Lt(
               {
                 currentMonth: s.month,
                 currentYear: s.year,
-                onSelect: (h) => {
-                  this.setCurrent({ month: h, year: s.year }), this.state.view = "calendar";
+                onSelect: (r) => {
+                  this.setCurrent({ month: r, year: s.year }), this.state.view = "calendar";
                 }
               }
             );
           case "years":
-            return Be(
+            return Bt(
               {
                 currentYear: s.year,
-                onSelect: (h) => {
-                  this.setCurrent({ month: s.month, year: h }), this.state.view = "calendar";
+                onSelect: (r) => {
+                  this.setCurrent({ month: s.month, year: r }), this.state.view = "calendar";
                 }
               }
             );
           default:
-            return Ie({
+            return Mt({
+              monthName: this.data.monthName,
+              year: s.year,
               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
+              next: () => {
+                const r = this.data.current, d = r.month === 11 ? { month: 0, year: r.year + 1 } : { month: r.month + 1, year: r.year };
+                this.setCurrent(d);
+              },
+              previous: () => {
+                const r = this.data.current, d = r.month === 0 ? { month: 11, year: r.year - 1 } : { month: r.month - 1, year: r.year };
+                this.setCurrent(d);
+              },
+              cells: c
             });
         }
       })
     ]);
   }
 }
-const Me = (t, e) => {
-  const s = t.toggleAllSelectedRows();
-  e.state.checked = !s;
-}, 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 j({
+const Rt = (e, t) => {
+  const s = e.toggleAllSelectedRows();
+  t.state.checked = !s;
+}, Pt = (e) => A({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
+  K((t) => new dt({ class: "mr-2", onChange: (s, a) => Rt(t, a) }))
+]), Nt = ({ align: e, sortable: t, key: s, label: a, sort: n, class: i }) => {
+  const l = e || "justify-start";
+  return A({
     class: `cursor-pointer py-3 px-4 text-base ${i || ""}`,
-    click: e && (() => n(s))
+    click: t && (() => n(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
       S(a),
-      e && K({ class: "ml-2", html: w.arrows.upDown })
+      t && G({ class: "ml-2", html: b.arrows.upDown })
     ])
   ]);
-}, P = (t) => G([
+}, N = (e) => J([
   _({
     class: "text-muted-foreground border-b",
     map: [
-      t.headers,
-      (e) => e.label === "checkbox" ? Re({ toggle: t.toggle }) : Pe({
-        align: e.align,
-        sortable: e.sortable,
-        key: e.key,
-        label: e.label,
-        sort: t.sort
+      e.headers,
+      (t) => t.label === "checkbox" ? Pt({ toggle: e.toggle }) : Nt({
+        align: t.align,
+        sortable: t.sortable,
+        key: t.key,
+        label: t.label,
+        sort: e.sort
       })
     ]
   })
-]), We = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: n }) => new ne({
+]), Wt = ({ key: e, rows: t, selectRow: s, rowItem: a, emptyState: n }) => new it({
   cache: "list",
-  key: t,
-  items: e,
+  key: e,
+  items: t,
   rowItem: (i) => a(i, s),
   class: "divide-y divide-border",
   emptyState: n
 });
-class U extends g {
+class E extends m {
   /**
    * Initializes component data.
    *
    * @returns {Data}
    */
   setData() {
-    let e = this.rows && this.rows.length > 0;
-    return (this.loadMoreItems || this.tableData) && !e && (e = null), new L({
+    let t = this.rows && this.rows.length > 0;
+    return (this.loadMoreItems || this.tableData) && !t && (t = null), new M({
       selectedRows: [],
       // @ts-ignore
-      hasItems: e,
+      hasItems: t,
       selected: !1
     });
   }
@@ -579,7 +608,7 @@ class U extends g {
    * @returns {boolean}
    */
   toggleAllSelectedRows() {
-    const e = this.list.getRows(), s = this.data.selectedRows.length === e.length, a = s ? [] : e;
+    const t = this.list.getRows(), s = this.data.selectedRows.length === t.length, a = s ? [] : t;
     return this.data.selectedRows = a, this.updateSelected(), this.updateTable(!s), s;
   }
   /**
@@ -588,8 +617,8 @@ class U extends g {
    * @returns {void}
    */
   updateSelected() {
-    const e = this.data.get("selectedRows");
-    this.data.selected = e.length > 0;
+    const t = this.data.get("selectedRows");
+    this.data.selected = t.length > 0;
   }
   /**
    * This will get the selected rows.
@@ -606,19 +635,19 @@ class U extends g {
    * @param {boolean} selected
    * @returns {void}
    */
-  updateTable(e) {
+  updateTable(t) {
     const s = this.list.getRows();
-    s.forEach((a) => a.selected = e), this.list.setRows(s);
+    s.forEach((a) => a.selected = t), this.list.setRows(s);
   }
   /**
    * Handles row selection.
    *
    * @param {object} row
    */
-  selectRow(e) {
-    const s = e.selected ?? !1;
-    e.selected = !s;
-    const a = this.data.get("selectedRows"), n = e.selected ? [...a, e] : a.filter((i) => i !== e);
+  selectRow(t) {
+    const s = t.selected ?? !1;
+    t.selected = !s;
+    const a = this.data.get("selectedRows"), n = t.selected ? [...a, t] : a.filter((i) => i !== t);
     this.data.selectedRows = n, this.updateSelected();
   }
   /**
@@ -627,19 +656,19 @@ class U extends g {
    * @returns {object}
    */
   render() {
-    const e = this.rows, s = this.border !== !1 ? "border" : "";
+    const t = this.rows, s = this.border !== !1 ? "border" : "";
     return o({ class: "w-full flex flex-auto flex-col" }, [
       D("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${s} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
         R({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && N({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          We({
+          Wt({
             // @ts-ignore
             key: this.key,
-            rows: e,
+            rows: t,
             // @ts-ignore
             selectRow: this.selectRow.bind(this),
             // @ts-ignore
@@ -658,8 +687,8 @@ class U extends g {
    * @param {array} items
    * @returns {void}
    */
-  remove(e) {
-    this.list.remove(e);
+  remove(t) {
+    this.list.remove(t);
   }
   /**
    * This will set the items in the list.
@@ -668,8 +697,8 @@ class U extends g {
    * @param {array} rows
    * @returns {void}
    */
-  setRows(e) {
-    this.list.setRows(e);
+  setRows(t) {
+    this.list.setRows(t);
   }
   /**
    * This will append items to the list.
@@ -678,8 +707,8 @@ class U extends g {
    * @param {array|object} items
    * @returns {void}
    */
-  append(e) {
-    this.list.append(e);
+  append(t) {
+    this.list.append(t);
   }
   /**
    * This will mingle the new items with the old items.
@@ -689,8 +718,8 @@ class U extends g {
    * @param {boolean} withDelete
    * @returns {void}
    */
-  mingle(e, s = !1) {
-    this.list.mingle(e, s);
+  mingle(t, s = !1) {
+    this.list.mingle(t, s);
   }
   /**
    * This will prepend items to the list.
@@ -699,8 +728,8 @@ class U extends g {
    * @param {array|object} items
    * @returns {void}
    */
-  prepend(e) {
-    this.list.prepend(e);
+  prepend(t) {
+    this.list.prepend(t);
   }
   /**
    * This will remove the selected rows.
@@ -711,34 +740,34 @@ class U extends g {
     this.data.selectedRows = [];
   }
 }
-const Oe = (t) => new ie({
+const Ot = (e) => new ot({
   cache: "list",
-  loadMoreItems: t.loadMoreItems,
-  offset: t.offset,
-  limit: t.limit,
-  key: t.key,
-  tableData: t.tableData,
-  items: t.items,
-  rowItem: (e) => t.rowItem(e, t.selectRow),
+  loadMoreItems: e.loadMoreItems,
+  offset: e.offset,
+  limit: e.limit,
+  key: e.key,
+  tableData: e.tableData,
+  items: e.items,
+  rowItem: (t) => e.rowItem(t, e.selectRow),
   class: "divide-y divide-border"
 });
-class $e extends U {
+class $t extends E {
   /**
    * Renders the DataTable component.
    *
    * @returns {object}
    */
   render() {
-    const e = this.rows, s = this.border !== !1 ? "border" : "";
+    const t = this.rows, s = this.border !== !1 ? "border" : "";
     return o({ class: "w-full flex flex-auto flex-col" }, [
       D("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${s} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
         R({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && N({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          Oe({
+          Ot({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -751,7 +780,7 @@ class $e extends U {
             tableData: this.tableData,
             // @ts-ignore
             key: this.key,
-            items: e,
+            items: t,
             // @ts-ignore
             selectRow: this.selectRow.bind(this),
             // @ts-ignore
@@ -770,51 +799,51 @@ class $e extends U {
     this.list.refresh();
   }
 }
-const kt = f((t) => new $e(
+const ve = f((e) => new $t(
   {
-    cache: t.cache ?? "list",
-    tableData: t.data,
-    loadMoreItems: t.loadMoreItems,
-    offset: t.offset,
-    limit: t.limit,
-    class: t.class,
-    key: t.key,
-    rows: t.rows,
-    rowItem: t.rowItem,
-    headers: t.headers,
-    customHeader: t.customHeader,
-    border: t.border,
-    emptyState: t.emptyState
-  }
-)), ze = (t) => new oe({
+    cache: e.cache ?? "list",
+    tableData: e.data,
+    loadMoreItems: e.loadMoreItems,
+    offset: e.offset,
+    limit: e.limit,
+    class: e.class,
+    key: e.key,
+    rows: e.rows,
+    rowItem: e.rowItem,
+    headers: e.headers,
+    customHeader: e.customHeader,
+    border: e.border,
+    emptyState: e.emptyState
+  }
+)), zt = (e) => new lt({
   cache: "list",
-  scrollContainer: t.scrollContainer,
-  loadMoreItems: t.loadMoreItems,
-  offset: t.offset,
-  limit: t.limit,
-  key: t.key,
-  tableData: t.tableData,
-  items: t.items,
-  rowItem: (e) => t.rowItem(e, t.selectRow),
+  scrollContainer: e.scrollContainer,
+  loadMoreItems: e.loadMoreItems,
+  offset: e.offset,
+  limit: e.limit,
+  key: e.key,
+  tableData: e.tableData,
+  items: e.items,
+  rowItem: (t) => e.rowItem(t, e.selectRow),
   class: "divide-y divide-border"
 });
-class Ne extends U {
+class jt extends E {
   /**
    * Renders the DataTable component.
    *
    * @returns {object}
    */
   render() {
-    const e = this.rows, s = this.border !== !1 ? "border" : "";
+    const t = this.rows, s = this.border !== !1 ? "border" : "";
     return o({ class: "w-full flex flex-auto flex-col" }, [
       D("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${s} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
         R({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && N({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          ze({
+          zt({
             // @ts-ignore
             scrollContainer: this.scrollContainer,
             // @ts-ignore
@@ -829,7 +858,7 @@ class Ne extends U {
             tableData: this.tableData,
             // @ts-ignore
             key: this.key,
-            items: e,
+            items: t,
             // @ts-ignore
             selectRow: this.selectRow.bind(this),
             // @ts-ignore
@@ -848,62 +877,62 @@ class Ne extends U {
     this.list.refresh();
   }
 }
-const vt = f((t) => new Ne(
+const De = f((e) => new jt(
   {
-    cache: t.cache ?? "list",
-    tableData: t.data,
-    scrollContainer: t.scrollContainer,
-    loadMoreItems: t.loadMoreItems,
-    offset: t.offset,
-    limit: t.limit,
-    class: t.class,
-    key: t.key,
-    rows: t.rows,
-    rowItem: t.rowItem,
-    headers: t.headers,
-    customHeader: t.customHeader,
-    border: t.border,
-    emptyState: t.emptyState
-  }
-)), 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" }, [
+    cache: e.cache ?? "list",
+    tableData: e.data,
+    scrollContainer: e.scrollContainer,
+    loadMoreItems: e.loadMoreItems,
+    offset: e.offset,
+    limit: e.limit,
+    class: e.class,
+    key: e.key,
+    rows: e.rows,
+    rowItem: e.rowItem,
+    headers: e.headers,
+    customHeader: e.customHeader,
+    border: e.border,
+    emptyState: e.emptyState
+  }
+)), Yt = f(({ name: e, email: t }) => o({ class: "min-w-0 flex-auto" }, [
+  w({ class: "text-base font-semibold leading-6 m-0" }, e),
+  w({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, t)
+])), At = () => 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" })
   ]),
-  b({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), Ae = (t) => b({ class: "text-xs leading-5 text-muted-foreground" }, [
+  w({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), Ft = (e) => w({ class: "text-xs leading-5 text-muted-foreground" }, [
   S("Last seen "),
-  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" }, [
+  V({ datetime: e }, "3h ago")
+]), Ht = (e, t) => e === "online" ? At() : Ft(t), Ut = f(({ role: e, lastSeen: t, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  w({ class: "text-sm leading-6 m-0" }, e),
+  Ht(s, t)
+])), Et = (e) => e.split(" ").map((s) => s[0]).join(""), Qt = f((e) => 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" }, [
-    se({ src: t.image, alt: t.name, fallbackText: Ue(t.name) }),
-    je({ name: t.name, email: t.email })
+    at({ src: e.image, alt: e.name, fallbackText: Et(e.name) }),
+    Yt({ name: e.name, email: e.email })
   ]),
-  Fe({
-    role: t.role,
-    lastSeen: t.lastSeen,
-    status: t.status
+  Ut({
+    role: e.role,
+    lastSeen: e.lastSeen,
+    status: e.status
   })
-])), Dt = f((t) => new le({
+])), Se = f((e) => new rt({
   cache: "list",
   key: "name",
-  items: t.users,
+  items: e.users,
   role: "list",
   class: "divide-y divide-border",
-  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,
+  rowItem: Qt
+})), Xt = (e, t) => t.includes(e), qt = (e, t, s) => e.exact ? s === t : Xt(t, s), Kt = ({ text: e, href: t, exact: s, hidden: a }) => new H({
+  text: e,
+  href: t,
   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 St extends g {
+class Ce extends m {
   /**
    * This will declare the props for the compiler.
    *
@@ -929,7 +958,7 @@ class St extends g {
       [
         x({
           class: "flex space-x-4",
-          map: [this.options, (e) => this.addLink(e)],
+          map: [this.options, (t) => this.addLink(t)],
           watch: {
             value: ["[[path]]", k.data],
             callBack: this.updateLinks.bind(this)
@@ -944,8 +973,8 @@ class St extends g {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
-    this.updateLinks(e);
+    const t = k.data.path;
+    this.updateLinks(t);
   }
   /**
    * This will update the links based on the current path.
@@ -953,13 +982,13 @@ class St extends g {
    * @param {string} path
    * @returns {void}
    */
-  updateLinks(e) {
+  updateLinks(t) {
     let s = !1;
     this.deactivateAllLinks();
     for (const a of this.links) {
       if (!a.rendered)
         continue;
-      Xe(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      qt(a, a.getLinkPath(), t) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -969,8 +998,8 @@ class St extends g {
    * @returns {void}
    */
   deactivateAllLinks() {
-    for (const e of this.links)
-      this.updateLink(e, !1);
+    for (const t of this.links)
+      this.updateLink(t, !1);
   }
   /**
    * This will update the link's active state.
@@ -979,8 +1008,8 @@ class St extends g {
    * @param {boolean} selected
    * @returns {void}
    */
-  updateLink(e, s) {
-    e.update(s);
+  updateLink(t, s) {
+    t.update(s);
   }
   /**
    * This will add a link to the navigation.
@@ -988,8 +1017,8 @@ class St extends g {
    * @param {object} option
    * @returns {object}
    */
-  addLink({ label: e, href: s, exact: a, hidden: n }) {
-    const i = qe({ text: e, href: s, exact: a, hidden: n });
+  addLink({ label: t, href: s, exact: a, hidden: n }) {
+    const i = Kt({ text: t, href: s, exact: a, hidden: n });
     return this.links.push(i), i;
   }
   /**
@@ -1001,13 +1030,13 @@ class St extends g {
     this.links = [];
   }
 }
-const Ct = f((t) => {
-  const e = t.margin || "m-4 ml-0";
-  return t.allowHistory = t.allowHistory === !0, o({ class: `flex-none ${e}` }, [
-    m({ variant: "back", class: "ghost", ...t })
+const Ie = f((e) => {
+  const t = e.margin || "m-4 ml-0";
+  return e.allowHistory = e.allowHistory === !0, o({ class: `flex-none ${t}` }, [
+    g({ variant: "back", class: "ghost", ...e })
   ]);
 });
-class E extends g {
+class Q extends m {
   /**
    * This will declare the props for the compiler.
    *
@@ -1048,7 +1077,7 @@ class E extends g {
    * @param {object} container
    * @returns {void}
    */
-  setContainer(e) {
+  setContainer(t) {
     this.container = app.root;
   }
   /**
@@ -1094,13 +1123,13 @@ class E extends g {
     return this.children;
   }
 }
-F.addType("dockableOverlay", (t) => {
-  if (!t)
+U.addType("dockableOverlay", (e) => {
+  if (!e)
     return;
-  const e = t.component;
-  e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
+  const t = e.component;
+  t && t.rendered === !0 && t.state.docked === !1 && t.destroy();
 });
-class It extends E {
+class Me extends Q {
   /**
    * This will stop presistence.
    *
@@ -1115,7 +1144,7 @@ class It extends E {
    * @returns {object}
    */
   render() {
-    const e = this.container;
+    const t = this.container;
     return o(
       {
         onState: [
@@ -1123,7 +1152,7 @@ class It extends E {
             loading: !0
           }],
           ["docked", (s, a) => {
-            s ? (a.className = this.getDockedClassName(), e.appendChild(a), document.documentElement.style.overflowY = "auto") : (a.className = this.getClassName(), app.root.appendChild(a), document.documentElement.style.overflowY = "hidden");
+            s ? (a.className = this.getDockedClassName(), t.appendChild(a), document.documentElement.style.overflowY = "auto") : (a.className = this.getClassName(), app.root.appendChild(a), document.documentElement.style.overflowY = "hidden");
           }]
         ]
       },
@@ -1146,8 +1175,8 @@ class It extends E {
    * @param {object} container
    * @returns {void}
    */
-  setup(e) {
-    this.container = e, this.initialize();
+  setup(t) {
+    this.container = t, this.initialize();
   }
   /**
    * This will setup the overlay states.
@@ -1166,7 +1195,7 @@ class It extends E {
    * @returns {void}
    */
   afterSetup() {
-    F.add(
+    U.add(
       this.container,
       "dockableOverlay",
       {
@@ -1209,7 +1238,7 @@ class It extends E {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class Lt extends E {
+class Le extends Q {
   /**
    * This will get the overlay type.
    *
@@ -1224,55 +1253,55 @@ class Lt extends E {
    * @param {object} container
    * @returns {void}
    */
-  setup(e) {
-    this.container = e, this.initialize();
+  setup(t) {
+    this.container = t, this.initialize();
   }
 }
-const Ke = f(({ index: t, click: e, state: s }, a) => C({
+const Gt = f(({ index: e, click: t, state: s }, a) => C({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
-      "bg-accent": t,
-      "text-white": t
+      "bg-accent": e,
+      "text-white": e
     }]
   ],
-  click: () => e(t)
-}, a)), Ge = f(({ selectOption: t, state: e }) => x({
+  click: () => t(e)
+}, a)), Jt = f(({ selectOption: e, state: t }) => x({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (s, a) => Ke({ index: a, click: t, state: e }, s.label)]
-})), _e = f((t) => o({ class: "relative flex items-center" }, [
-  de({
+  for: ["filteredOptions", (s, a) => Gt({ index: a, click: e, state: t }, s.label)]
+})), _t = f((e) => o({ class: "relative flex items-center" }, [
+  ht({
     cache: "input",
-    class: t.class ?? "",
-    placeholder: t.placeholder ?? "Search...",
-    bind: t.bind ?? [t.state, "searchQuery"],
-    keyup: (e, s) => {
-      s.state && (s.state.open = !1), typeof t.filterOptions == "function" && t.filterOptions(), s.dropdown && s.dropdown.updatePosition(), t.keyup && t.keyup(e, s);
+    class: e.class ?? "",
+    placeholder: e.placeholder ?? "Search...",
+    bind: e.bind ?? [e.state, "searchQuery"],
+    keyup: (t, s) => {
+      s.state && (s.state.open = !1), typeof e.filterOptions == "function" && e.filterOptions(), s.dropdown && s.dropdown.updatePosition(), e.keyup && e.keyup(t, s);
     },
-    pointerup: (e, s) => {
+    pointerup: (t, s) => {
       typeof s.toggleDropdown == "function" && s.toggleDropdown();
     },
-    keydown: (e) => [
-      typeof t.handleKeyDown == "function" && t.handleKeyDown(e)
+    keydown: (t) => [
+      typeof e.handleKeyDown == "function" && e.handleKeyDown(t)
     ]
   }),
-  t.icon && o({ class: "absolute flex right-0 mr-2" }, [
-    ee(t.icon)
+  e.icon && o({ class: "absolute flex right-0 mr-2" }, [
+    et(e.icon)
   ])
-])), Ve = (t) => o({
+])), Vt = (e) => o({
   class: "relative flex fle-auto flex-col",
-  onState: ["open", (e, s, a) => {
-    if (e)
-      return new ae({
+  onState: ["open", (t, s, a) => {
+    if (t)
+      return new nt({
         cache: "dropdown",
         parent: a,
         button: a.input,
         size: "xl"
       }, [
-        Ge(t)
+        Jt(e)
       ]);
   }]
-}), Tt = Z(
+}), Te = tt(
   {
     /**
      * This will set up the data object.
@@ -1280,10 +1309,10 @@ const Ke = f(({ index: t, click: e, state: s }, a) => C({
      * @returns {object} - The data object.
      */
     setData() {
-      const t = this.options || [];
-      return new L({
-        options: t,
-        filteredOptions: t
+      const e = this.options || [];
+      return new M({
+        options: e,
+        filteredOptions: e
       });
     },
     /**
@@ -1304,10 +1333,10 @@ const Ke = f(({ index: t, click: e, state: s }, a) => C({
      * @returns {void}
      */
     setSelectedIndexByQuery() {
-      const t = this.data.filteredOptions;
-      let { searchQuery: e } = this.state;
-      e = e.toLowerCase();
-      const s = t.findIndex((a) => a.label.toLowerCase() === e);
+      const e = this.data.filteredOptions;
+      let { searchQuery: t } = this.state;
+      t = t.toLowerCase();
+      const s = e.findIndex((a) => a.label.toLowerCase() === t);
       s >= 0 && (this.state.selectedIndex = s);
     },
     /**
@@ -1316,14 +1345,14 @@ const Ke = f(({ index: t, click: e, state: s }, a) => C({
      * @returns {void}
      */
     filterOptions() {
-      const t = this.state.searchQuery.toLowerCase();
-      if (t === "" || t.length === 0) {
+      const e = this.state.searchQuery.toLowerCase();
+      if (e === "" || e.length === 0) {
         this.data.filteredOptions = this.data.options;
         return;
       }
-      const e = this.data.get("options");
-      this.data.filteredOptions = e.filter(
-        (s) => s.label.toLowerCase().includes(t)
+      const t = this.data.get("options");
+      this.data.filteredOptions = t.filter(
+        (s) => s.label.toLowerCase().includes(e)
       );
     },
     /**
@@ -1332,8 +1361,8 @@ const Ke = f(({ index: t, click: e, state: s }, a) => C({
      * @returns {object}
      */
     getValue() {
-      const { selectedIndex: t } = this.state;
-      return t < 0 ? null : this.data.get(`filteredOptions[${t}]`);
+      const { selectedIndex: e } = this.state;
+      return e < 0 ? null : this.data.get(`filteredOptions[${e}]`);
     },
     /**
      * This will select an option.
@@ -1341,10 +1370,10 @@ const Ke = f(({ index: t, click: e, state: s }, a) => C({
      * @param {number} index - The index of the option.
      * @returns {void}
      */
-    selectOption(t) {
-      this.state.selectedIndex = t;
-      const e = this.data.get(`filteredOptions[${t}]`);
-      this.state.searchQuery = e.label, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(e);
+    selectOption(e) {
+      this.state.selectedIndex = e;
+      const t = this.data.get(`filteredOptions[${e}]`);
+      this.state.searchQuery = t.label, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(t);
     },
     /**
      * Toggles the dropdown open state.
@@ -1358,9 +1387,9 @@ const Ke = f(({ index: t, click: e, state: s }, a) => C({
      * @param {object} event - The event object.
      * @returns {void}
      */
-    handleKeyDown(t) {
-      const e = this.data.filteredOptions, { selectedIndex: s } = this.state;
-      t.key === "ArrowDown" ? (t.preventDefault(), this.state.selectedIndex = Math.min(s + 1, e.length - 1)) : t.key === "ArrowUp" ? (t.preventDefault(), this.state.selectedIndex = Math.max(s - 1, 0)) : t.key === "Enter" && s >= 0 && (t.preventDefault(), this.selectOption(s));
+    handleKeyDown(e) {
+      const t = this.data.filteredOptions, { selectedIndex: s } = this.state;
+      e.key === "ArrowDown" ? (e.preventDefault(), this.state.selectedIndex = Math.min(s + 1, t.length - 1)) : e.key === "ArrowUp" ? (e.preventDefault(), this.state.selectedIndex = Math.max(s - 1, 0)) : e.key === "Enter" && s >= 0 && (e.preventDefault(), this.selectOption(s));
     },
     /**
      * This will render the component.
@@ -1369,7 +1398,7 @@ const Ke = f(({ index: t, click: e, state: s }, a) => C({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        _e({
+        _t({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1381,7 +1410,7 @@ const Ke = f(({ index: t, click: e, state: s }, a) => C({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        Ve({
+        Vt({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1392,22 +1421,22 @@ const Ke = f(({ index: t, click: e, state: s }, a) => C({
       ]);
     }
   }
-), Je = (t) => C(
+), Zt = (e) => 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"]]
+    dataSet: ["selected", ["state", e.value, "active"]]
   },
   [
     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)
+      onSet: ["selected", { selected: e.value }],
+      click: (t) => e.callBack(e.value)
+    }, e.label)
   ]
-), 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)] })
+), te = (e, t) => (e.callBack = t, Zt(e)), ee = (e) => I({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
+  x({ class: "flex flex-auto flex-row", map: [e.options, (t) => te(t, e.callBack)] })
 ]);
-class Bt extends g {
+class Be extends m {
   /**
    * This will declare the props for the compiler.
    *
@@ -1422,14 +1451,14 @@ class Bt extends g {
    * @returns {object}
    */
   render() {
-    const e = this.select.bind(this);
+    const t = this.select.bind(this);
     return o({ class: "" }, [
-      et({
+      ee({
         class: this.class,
         options: this.options,
-        callBack: e
+        callBack: t
       }),
-      Y({
+      F({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1441,8 +1470,8 @@ class Bt extends g {
    * @returns {*}
    */
   getFirstValue() {
-    var e;
-    return (e = this.options[0]) == null ? void 0 : e.value;
+    var t;
+    return (t = this.options[0]) == null ? void 0 : t.value;
   }
   /**
    * This will update the component.
@@ -1450,8 +1479,8 @@ class Bt extends g {
    * @returns {void}
    */
   update() {
-    const e = this.state.get("selected");
-    this.select(null), this.select(e);
+    const t = this.state.get("selected");
+    this.select(null), this.select(t);
   }
   /**
    * This will select a value.
@@ -1459,8 +1488,8 @@ class Bt extends g {
    * @param {*} value
    * @returns {void}
    */
-  select(e) {
-    this.state.selected = e;
+  select(t) {
+    this.state.selected = t;
   }
   /**
    * This will update the content.
@@ -1468,13 +1497,13 @@ class Bt extends g {
    * @param {*} value
    * @returns {object}
    */
-  updateContent(e) {
+  updateContent(t) {
     const s = this.options;
     if (!s || s.length < 1)
       return;
     const a = s[0];
     for (const n of s)
-      if (n.value === e)
+      if (n.value === t)
         return n.layout;
     return a.layout;
   }
@@ -1484,34 +1513,34 @@ class Bt extends g {
    * @returns {object}
    */
   setupStates() {
-    const e = this.callBack, s = typeof e;
+    const t = this.callBack, s = typeof t;
     return {
       selected: {
         state: this.getFirstValue(),
         callBack(a) {
-          s === "function" && e(a);
+          s === "function" && t(a);
         }
       }
     };
   }
 }
-const tt = (t) => C(
+const se = (e) => 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"]]
+    dataSet: ["selected", ["state", e.value, "active"]]
   },
   [
     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)
+      onSet: ["selected", { selected: e.value }],
+      click: (t) => e.callBack(e.value),
+      disabled: e.disabled
+    }, e.label)
   ]
-), 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)] })
+), ae = (e, t) => (e.callBack = t, se(e)), ne = (e) => I({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
+  x({ class: "flex flex-auto flex-row", map: [e.options, (t) => ae(t, e.callBack)] })
 ]);
-class Mt extends g {
+class Re extends m {
   /**
    * This will declare the props for the compiler.
    *
@@ -1526,11 +1555,11 @@ class Mt extends g {
    * @returns {object}
    */
   render() {
-    const e = this.select.bind(this);
-    return at({
+    const t = this.select.bind(this);
+    return ne({
       class: this.class,
       options: this.options,
-      callBack: e
+      callBack: t
     });
   }
   /**
@@ -1539,8 +1568,8 @@ class Mt extends g {
    * @param {*} value
    * @returns {void}
    */
-  select(e) {
-    this.state.selected = e, typeof this.onSelect == "function" && this.onSelect(e, this.parent);
+  select(t) {
+    this.state.selected = t, typeof this.onSelect == "function" && this.onSelect(t, this.parent);
   }
   /**
    * This will setup the states.
@@ -1548,23 +1577,23 @@ class Mt extends g {
    * @returns {object}
    */
   setupStates() {
-    var e;
+    var t;
     return {
-      selected: ((e = this.options[0]) == null ? void 0 : e.value) || null
+      selected: ((t = this.options[0]) == null ? void 0 : t.value) || null
     };
   }
 }
-const nt = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), it = (t, e) => {
-  const s = t.getLinkPath();
-  return t.exact ? e === s : nt(s, e);
-}, ot = ({ text: t, href: e, exact: s }) => new H({
-  text: t,
-  href: e,
+const ie = (e, t) => new RegExp(`${e}($|/|\\.).*`).test(t), oe = (e, t) => {
+  const s = e.getLinkPath();
+  return e.exact ? t === s : ie(s, t);
+}, le = ({ text: e, href: t, exact: s }) => new H({
+  text: e,
+  href: t,
   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 lt extends g {
+class re extends m {
   /**
    * This will declare the props for the compiler.
    *
@@ -1588,7 +1617,7 @@ class lt extends g {
     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)],
+        map: [this.options, (t) => this.addLink(t)],
         watch: {
           value: ["[[path]]", k.data],
           callBack: this.updateLinks.bind(this)
@@ -1602,8 +1631,8 @@ class lt extends g {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
-    this.updateLinks(e);
+    const t = k.data.path;
+    this.updateLinks(t);
   }
   /**
    * This will update the links.
@@ -1611,11 +1640,11 @@ class lt extends g {
    * @param {string} value
    * @returns {void}
    */
-  updateLinks(e) {
+  updateLinks(t) {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
     for (const n of this.links)
-      if (n.rendered !== !1 && (s = it(n, e), s === !0)) {
+      if (n.rendered !== !1 && (s = oe(n, t), s === !0)) {
         this.updateLink(n, !0);
         break;
       }
@@ -1627,8 +1656,8 @@ class lt extends g {
    * @returns {void}
    */
   deactivateAllLinks() {
-    for (const e of this.links)
-      this.updateLink(e, !1);
+    for (const t of this.links)
+      this.updateLink(t, !1);
   }
   /**
    * This will update the link.
@@ -1637,8 +1666,8 @@ class lt extends g {
    * @param {boolean} selected
    * @returns {void}
    */
-  updateLink(e, s) {
-    e.update(s);
+  updateLink(t, s) {
+    t.update(s);
   }
   /**
    * This will add a link.
@@ -1646,8 +1675,8 @@ class lt extends g {
    * @param {object} option
    * @returns {object}
    */
-  addLink({ label: e, href: s, exact: a }) {
-    const n = ot({ text: e, href: s, exact: a });
+  addLink({ label: t, href: s, exact: a }) {
+    const n = le({ text: t, href: s, exact: a });
     return this.links.push(n), n;
   }
   /**
@@ -1659,7 +1688,7 @@ class lt extends g {
     this.links = [];
   }
 }
-class Rt extends g {
+class Pe extends m {
   /**
    * This will declare the props for the compiler.
    *
@@ -1675,11 +1704,11 @@ class Rt extends g {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new lt({
+      new re({
         class: this.class,
         options: this.options
       }),
-      Y({
+      F({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1691,21 +1720,21 @@ class Rt extends g {
    * @returns {array}
    */
   addGroup() {
-    let e;
+    let t;
     const s = [], a = this.options;
     for (let n = 0, i = a.length; n < i; n++)
-      e = a[n], s.push(
+      t = a[n], s.push(
         {
-          uri: e.uri || e.href,
-          component: e.component,
-          title: e.title || null,
+          uri: t.uri || t.href,
+          component: t.component,
+          title: t.title || null,
           persist: !0
         }
       );
     return s;
   }
 }
-class rt extends g {
+class ce extends m {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1714,8 +1743,8 @@ class rt 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 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";
+    const t = 1e3 / 60;
+    this.timer = new ct(t, 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.
@@ -1723,7 +1752,7 @@ class rt extends g {
    * @returns {object} Layout definition for the canvas.
    */
   render() {
-    return J({
+    return Z({
       style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
     });
   }
@@ -1753,12 +1782,12 @@ class rt 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), n = this.pointerDown.bind(this), i = this.resize.bind(this), l = { passive: !1 };
+    const t = 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, n, l],
-      ["pointerout", e, a],
+      ["pointermove", t, s, l],
+      ["pointerup", t, a],
+      ["pointerdown", t, n, l],
+      ["pointerout", t, a],
       ["resize", globalThis, i]
     ];
   }
@@ -1768,16 +1797,16 @@ class rt extends g {
    * @param {Event} e The event object (mouse or touch).
    * @returns {void}
    */
-  getEventPosition(e) {
+  getEventPosition(t) {
     let s, a;
     const n = this.canvas, i = n.width / parseInt(n.style.width), l = n.getBoundingClientRect();
-    if (e.touches && e.touches.length) {
-      const c = e.touches[0];
-      s = c.clientX, a = c.clientY;
+    if (t.touches && t.touches.length) {
+      const h = t.touches[0];
+      s = h.clientX, a = h.clientY;
     } else
-      s = e.x || e.clientX, a = e.y || e.clientY;
-    const u = parseInt((s - l.left) * i), r = parseInt((a - l.top) * i);
-    this.mouse.x = u, this.mouse.y = r;
+      s = t.x || t.clientX, a = t.y || t.clientY;
+    const u = parseInt((s - l.left) * i), c = parseInt((a - l.top) * i);
+    this.mouse.x = u, this.mouse.y = c;
   }
   /**
    * Called when the pointer goes down on the canvas.
@@ -1786,8 +1815,8 @@ class rt extends g {
    * @param {Event} e The event object.
    * @returns {void}
    */
-  pointerDown(e) {
-    e.preventDefault(), e.stopPropagation(), this.getEventPosition(e);
+  pointerDown(t) {
+    t.preventDefault(), t.stopPropagation(), this.getEventPosition(t);
     const { ctx: s, mouse: a } = this;
     s.beginPath(), s.moveTo(a.x, a.y), a.status = "down", this.startTimer();
   }
@@ -1798,8 +1827,8 @@ class rt extends g {
    * @param {Event} e The event object.
    * @returns {void}
    */
-  pointerUp(e) {
-    e.preventDefault(), e.stopPropagation(), this.ctx.closePath(), this.mouse.status = "up", this.stopTimer();
+  pointerUp(t) {
+    t.preventDefault(), t.stopPropagation(), this.ctx.closePath(), this.mouse.status = "up", this.stopTimer();
   }
   /**
    * Tracks pointer movement, updates position in real time.
@@ -1807,8 +1836,8 @@ class rt extends g {
    * @param {Event} e The event object.
    * @returns {void}
    */
-  pointerPosition(e) {
-    this.getEventPosition(e), this.mouse.status === "down" && (e.preventDefault(), e.stopPropagation());
+  pointerPosition(t) {
+    this.getEventPosition(t), this.mouse.status === "down" && (t.preventDefault(), t.stopPropagation());
   }
   /**
    * Resizes the canvas, preserves existing drawing by converting
@@ -1817,7 +1846,7 @@ class rt extends g {
    * @returns {void}
    */
   resize() {
-    const { canvas: e, ctx: s } = this, a = e.toDataURL();
+    const { canvas: t, ctx: s } = this, a = t.toDataURL();
     if (this.scale(), this.setupBackground(s), a !== "data:,") {
       const n = new globalThis.Image();
       W.on("load", n, function i() {
@@ -1841,8 +1870,8 @@ class rt extends g {
    * @returns {void}
    */
   noScaleResize() {
-    const e = O.getSize(container);
-    this.width = canvas.width = e.width, this.height = canvas.height = e.height;
+    const t = O.getSize(container);
+    this.width = canvas.width = t.width, this.height = canvas.height = t.height;
   }
   /**
    * Scales the canvas to fit within its container, preserving aspect ratio
@@ -1851,13 +1880,13 @@ class rt extends g {
    * @returns {void}
    */
   scale() {
-    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";
+    const t = this.canvas, s = this.container, a = O.getSize(s), n = this.targetSize, i = n.width, l = n.height;
+    let u = i + "px", c = l + "px";
+    if (this.width = t.width = i, this.height = t.height = l, a.width !== 0 && a.height !== 0) {
+      const h = a.width, r = a.height, d = h / i, p = r / l, y = Math.min(d, p);
+      u = i * y + "px", c = l * y + "px";
     }
-    e.style.width = u, e.style.height = r;
+    t.style.width = u, t.style.height = c;
   }
   /**
    * Main drawing loop. If the mouse is down, adds a line
@@ -1874,11 +1903,11 @@ class rt extends g {
    * @param {CanvasRenderingContext2D} ctx The canvas 2D context.
    * @returns {void}
    */
-  drawBottomLine(e) {
+  drawBottomLine(t) {
     const s = this.canvas;
-    e.globalAlpha = 1, e.shadowBlur = 0;
+    t.globalAlpha = 1, t.shadowBlur = 0;
     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();
+    t.beginPath(), t.moveTo(a, n), t.lineTo(s.width - this.margin.x, n), t.lineWidth = this.baseLineWidth, t.strokeStyle = this.baseStrokeColor, t.stroke(), t.closePath();
   }
   /**
    * Adds a line to the current path, updating the 'signed' status.
@@ -1889,10 +1918,10 @@ class rt extends g {
    * @param {string} color The stroke color.
    * @returns {void}
    */
-  addLine(e, s, a, n) {
+  addLine(t, s, a, n) {
     this.signed || (this.signed = !0);
     const i = Math.round(s), l = Math.round(a);
-    e.lineWidth = this.lineWidth, e.strokeStyle = n, e.lineTo(i, l), e.stroke();
+    t.lineWidth = this.lineWidth, t.strokeStyle = n, t.lineTo(i, l), t.stroke();
   }
   /**
    * Clears the canvas, sets signed to false, and re-initializes
@@ -1902,8 +1931,8 @@ class rt extends g {
    */
   reset() {
     this.signed = !1;
-    const { ctx: e } = this;
-    e.clearRect(0, 0, this.width, this.height), this.setupBackground(e);
+    const { ctx: t } = this;
+    t.clearRect(0, 0, this.width, this.height), this.setupBackground(t);
   }
   /**
    * Fills the canvas background with white and draws the baseline.
@@ -1911,8 +1940,8 @@ class rt extends g {
    * @param {CanvasRenderingContext2D} ctx The canvas context.
    * @returns {void}
    */
-  setupBackground(e) {
-    e.fillStyle = "transparent", e.fillRect(0, 0, this.width, this.height), this.drawBottomLine(e);
+  setupBackground(t) {
+    t.fillStyle = "transparent", t.fillRect(0, 0, this.width, this.height), this.drawBottomLine(t);
   }
   /**
    * Starts the drawing timer so new lines can be added as pointer moves.
@@ -1931,7 +1960,7 @@ class rt extends g {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class Pt extends g {
+class Ne extends m {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1948,19 +1977,19 @@ class Pt extends g {
    */
   render() {
     return o({ class: "signature-panel relative flex flex-auto overflow-hidden select-none" }, [
-      he({
+      ut({
         cache: "hiddenInput",
         required: !0,
         bind: this.path + ".data"
       }),
       o({ class: "absolute top-2 right-2" }, [
-        m({
+        g({
           variant: "icon",
-          icon: w.circleX,
+          icon: b.circleX,
           click: this.reset.bind(this)
         })
       ]),
-      new rt({
+      new ce({
         cache: "canvasLayer",
         margin: this.margin,
         targetSize: this.targetSize,
@@ -2004,43 +2033,43 @@ class Pt extends g {
    * @param {Event} [e] The event object (if called by a click event).
    * @returns {void}
    */
-  reset(e) {
+  reset(t) {
     if (this.canvasLayer)
       return this.canvasLayer.reset();
   }
 }
 export {
-  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,
-  Ee as U,
-  bt as W,
-  me as a,
+  Ie as B,
+  Pt as C,
+  Wt as D,
+  Nt as H,
+  Le as I,
+  Ce as N,
+  Q as O,
+  ye as P,
+  ke as R,
+  De as S,
+  N as T,
+  Qt as U,
+  xe as W,
+  pt 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
+  mt as c,
+  be as d,
+  we as e,
+  bt as f,
+  gt as g,
+  xt as h,
+  kt as i,
+  E as j,
+  ve as k,
+  Se as l,
+  Me as m,
+  Te as n,
+  _t as o,
+  Be as p,
+  Re as q,
+  re as r,
+  Pe as s,
+  Ne as t
 };