@base-framework/ui 1.0.5 → 1.0.7

package/dist/{signature-SUQkOThQ.js → signature-panel-DCDay7u0.js}

@@ -1,22 +1,22 @@
-import { Button as v, Div as o, On as U, Span as y, Th as O, UseParent as Y, I as E, Thead as F, Tr as H, Table as Q, P as m, Li as D, Time as X, Nav as S, Ul as b, Section as P } from "@base-framework/atoms";
+import { Button as v, Div as o, On as U, Span as y, Th as P, UseParent as Y, I as E, Thead as F, Tr as H, Table as Q, P as m, Li as D, Time as X, Nav as S, Ul as b, Section as O } from "@base-framework/atoms";
 import { Atom as u, Component as g, Data as L, DateTime as q, Jot as R, router as k, NavLink as M, base as B, Dom as I } from "@base-framework/base";
 import { B as C, I as z } from "./icon-B9QUT2NY.js";
 import { Icons as w } from "./icons.es.js";
 import { TableBody as K, List as _, IntervalTimer as G } from "@base-framework/organisms";
 import { C as V, I as J, H as Z } from "./inputs-O_WkdbI3.js";
-import { A as ee, P as te } from "./calendar-B5TK6tLi.js";
-u((t, e) => ({
+import { A as tt, P as et } from "./calendar-B5TK6tLi.js";
+u((e, t) => ({
   class: "flex items-center px-4 py-2",
-  ...t,
-  children: e
+  ...e,
+  children: t
 }));
-u(({ value: t, label: e }) => v({
+u(({ 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 Ke extends g {
+  onState: ["performance", { active: e }],
+  dataSet: ["performance", ["state", e, "active"]],
+  click: (s, { state: a }) => a.performance = e
+}, t));
+class Kt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -34,57 +34,57 @@ class Ke extends g {
     return o({ class: this.class || "" }, this.children);
   }
 }
-const se = (t) => {
-  const e = new Date(t, 11, 31), s = new Date(t, 0, 1);
-  return e.getDay() === 4 || // December 31 is a Thursday
+const st = (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;
-}, ae = (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);
+}, at = (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 && !se(a) ? {
+  const i = Math.ceil((t - n) / 6048e5) + 1;
+  return i > 52 && !st(a) ? {
     weekNumber: 1,
     year: a + 1
   } : {
     weekNumber: i,
     year: a
   };
-}, ne = (t, e, s) => {
+}, nt = (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)
   );
-}, ie = (t, e, s) => Array.from({ length: s }, (a, n) => new Date(t, e + 1, n + 1)), T = (t, e) => {
-  const s = new Date(e, 0, 4), a = (s.getDay() + 6) % 7, n = new Date(s);
+}, it = (e, t, s) => Array.from({ length: s }, (a, n) => new Date(e, t + 1, n + 1)), T = (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;
-}, _e = (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;
+}, _t = (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 d = new Date(t, e, l);
+    const d = new Date(e, t, l);
     i.push(l > 0 ? d : null), (i.length === 7 || l === a) && (n.push([...i]), i = []);
   }
   return n;
-}, Ge = (t, e) => {
-  const s = new Date(t, e + 1, 0).getDate(), a = [];
+}, Gt = (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;
-}, oe = (t, e, s) => {
+}, ot = (e, t, s) => {
   const a = /* @__PURE__ */ new Date();
-  return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
-}, le = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: n }) => {
-  const i = oe(t, e, s);
+  return a.getDate() === e && a.getMonth() === t && a.getFullYear() === s;
+}, lt = ({ day: e, month: t, year: s, weekNumber: a, selectWeek: n }) => {
+  const i = ot(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,10 +92,10 @@ const se = (t) => {
         `,
     click: () => n(a, s)
   });
-}, re = (t, e) => {
-  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), n = ne(t, e, s), i = Array.from({ length: a }, (r, p) => new Date(t, e, p + 1)), l = (n.length + i.length) % 7, d = l === 0 ? 0 : 7 - l, c = ie(t, e, d), h = [...n, ...i, ...c], f = [];
+}, rt = (e, t) => {
+  const s = new Date(e, t, 1).getDay(), a = new Date(e, t + 1, 0).getDate(), n = nt(e, t, s), i = Array.from({ length: a }, (r, p) => new Date(e, t, p + 1)), l = (n.length + i.length) % 7, d = l === 0 ? 0 : 7 - l, c = it(e, t, d), h = [...n, ...i, ...c], f = [];
   for (let r = 0; r < h.length; r += 7) {
-    const p = h.slice(r, r + 7), x = p.find((j) => j) || new Date(t, e, 1), { weekNumber: $, year: A } = ae(x);
+    const p = h.slice(r, r + 7), x = p.find((j) => j) || new Date(e, t, 1), { weekNumber: $, year: A } = at(x);
     f.push({
       weekNumber: $,
       year: A,
@@ -103,8 +103,8 @@ const se = (t) => {
     });
   }
   return f;
-}, ce = ({ selectWeek: t }) => U("month", (e, s, { data: a }) => {
-  const { year: n, month: i, currentDate: l } = a, d = re(n, i);
+}, ct = ({ selectWeek: e }) => U("month", (t, s, { data: a }) => {
+  const { year: n, month: i, currentDate: l } = a, d = rt(n, i);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -129,7 +129,7 @@ const se = (t) => {
           // Left column: ISO week number
           o({
             class: "font-medium text-center col-span-1 rounded-sm cursor-pointer",
-            click: () => t(c, f),
+            click: () => e(c, f),
             // If you have a 'currentWeek' state, you can highlight it with 'onSet'
             onSet: ["currentWeek", {
               "text-primary-foreground": c,
@@ -141,14 +141,14 @@ const se = (t) => {
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
             h.map(
-              (r) => le({
+              (r) => lt({
                 year: (r == null ? void 0 : r.getFullYear()) || null,
                 month: (r == null ? void 0 : r.getMonth()) || null,
                 day: (r == null ? void 0 : r.getDate()) || null,
                 week: h,
                 weekNumber: c,
                 currentDate: l,
-                selectWeek: t
+                selectWeek: e
               })
             )
           )
@@ -156,31 +156,31 @@ const se = (t) => {
       )
     ]
   );
-}), W = ({ label: t, click: e }) => C(
+}), W = ({ label: e, click: t }) => C(
   {
     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" ? w.chevron.single.left : w.chevron.single.right
   }
-), de = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+), dt = ({ next: e, previous: t }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
   y("[[monthName]] [[year]]"),
   W({
     label: "Previous",
-    click: e
+    click: t
   }),
   W({
     label: "Next",
-    click: t
+    click: e
   })
 ]);
-class Ve extends g {
+class Vt extends g {
   /**
   * This will declare the props for the compiler.
   *
@@ -195,7 +195,7 @@ class Ve extends g {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = T(s, e.getFullYear());
+    const t = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(t), a = T(s, t.getFullYear());
     return new L({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
@@ -210,8 +210,8 @@ class Ve 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());
   }
   /**
@@ -220,8 +220,8 @@ class Ve 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);
@@ -232,8 +232,8 @@ class Ve extends g {
    * @param {number} month
    * @returns {string}
    */
-  getMonthName(e) {
-    return q.monthNames[e];
+  getMonthName(t) {
+    return q.monthNames[t];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -241,8 +241,8 @@ class Ve 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);
   }
   /**
@@ -251,8 +251,8 @@ class Ve 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);
   }
   /**
@@ -263,11 +263,11 @@ class Ve 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);
   }
   /**
@@ -276,10 +276,10 @@ class Ve extends g {
    * @param {number} weekNumber
    * @returns {void}
    */
-  selectWeek(e, s) {
-    this.data.currentWeek = e;
-    const a = T(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(t, s);
+    this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(t);
   }
   /**
    * Renders the WeekCalendar component.
@@ -288,47 +288,47 @@ class Ve extends g {
    */
   render() {
     return o({ class: "week-calendar-container border rounded-md bg-background p-3" }, [
-      de({
+      dt({
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      ce({
-        selectWeek: (e, s) => this.selectWeek(e, s)
+      ct({
+        selectWeek: (t, s) => this.selectWeek(t, s)
       })
     ]);
   }
 }
-const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
-  Y((e) => new V({ class: "mr-2", onChange: () => e.toggleAllSelectedRows() }))
-]), ue = ({ align: t, sortable: e, key: s, label: a, sort: n, class: i }) => {
-  const l = t || "justify-start";
-  return O({
+const ht = (e) => P({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
+  Y((t) => new V({ class: "mr-2", onChange: () => t.toggleAllSelectedRows() }))
+]), ut = ({ align: e, sortable: t, key: s, label: a, sort: n, class: i }) => {
+  const l = e || "justify-start";
+  return P({
     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}` }, [
       y(a),
-      e && E({ class: "ml-2", html: w.arrows.upDown })
+      t && E({ class: "ml-2", html: w.arrows.upDown })
     ])
   ]);
-}, ge = (t) => F([
+}, gt = (e) => F([
   H({
     class: "text-muted-foreground border-b",
-    map: [t.headers, (e) => e.label === "checkbox" ? he({ toggle: t.toggle }) : ue({
-      align: e.align,
-      sortable: e.sortable,
-      key: e.key,
-      label: e.label,
-      sort: t.sort
+    map: [e.headers, (t) => t.label === "checkbox" ? ht({ toggle: e.toggle }) : ut({
+      align: t.align,
+      sortable: t.sortable,
+      key: t.key,
+      label: t.label,
+      sort: e.sort
     })]
   })
-]), fe = ({ key: t, rows: e, selectRow: s, rowItem: a }) => new K({
+]), ft = ({ key: e, rows: t, selectRow: s, rowItem: a }) => new K({
   cache: "table",
-  key: t,
-  items: e,
+  key: e,
+  items: t,
   rowItem: (n) => a(n, s),
   class: "divide-y divide-border"
-}), Je = R(
+}), Jt = R(
   {
     /**
      * Initializes component data.
@@ -347,8 +347,8 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @returns {void}
      */
     toggleAllSelectedRows() {
-      const t = this.table.getRows(), e = this.data.selectedRows.length === t.length, s = e ? [] : t;
-      this.data.selectedRows = s, this.updateSelected(), this.updateTable(!e);
+      const e = this.table.getRows(), t = this.data.selectedRows.length === e.length, s = t ? [] : e;
+      this.data.selectedRows = s, this.updateSelected(), this.updateTable(!t);
     },
     /**
      * This will update the selected state.
@@ -356,8 +356,8 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @returns {void}
      */
     updateSelected() {
-      const t = this.data.get("selectedRows");
-      this.data.selected = t.length > 0;
+      const e = this.data.get("selectedRows");
+      this.data.selected = e.length > 0;
     },
     /**
      * This will get the selected rows.
@@ -374,19 +374,19 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @param {boolean} selected
      * @returns {void}
      */
-    updateTable(t) {
-      const e = this.table.getRows();
-      e.forEach((s) => s.selected = t), this.table.setRows(e);
+    updateTable(e) {
+      const t = this.table.getRows();
+      t.forEach((s) => s.selected = e), this.table.setRows(t);
     },
     /**
      * Handles row selection.
      *
      * @param {object} row
      */
-    selectRow(t) {
-      const e = t.selected ?? !1;
-      t.selected = !e;
-      const s = this.data.get("selectedRows"), a = t.selected ? [...s, t] : s.filter((n) => n !== t);
+    selectRow(e) {
+      const t = e.selected ?? !1;
+      e.selected = !t;
+      const s = this.data.get("selectedRows"), a = e.selected ? [...s, e] : s.filter((n) => n !== e);
       this.data.selectedRows = a, this.updateSelected();
     },
     /**
@@ -395,18 +395,18 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @returns {object}
      */
     render() {
-      const t = this.rows, e = this.border !== !1 ? "border" : "";
+      const e = this.rows, t = this.border !== !1 ? "border" : "";
       return o({ class: "w-full" }, [
-        o({ class: `w-full rounded-md ${e} overflow-x-auto` }, [
+        o({ class: `w-full rounded-md ${t} overflow-x-auto` }, [
           Q({ class: "w-full" }, [
             // @ts-ignore
-            this.headers && ge({ headers: this.headers, sort: (s) => this.sortRows(s) }),
+            this.headers && gt({ headers: this.headers, sort: (s) => this.sortRows(s) }),
             // @ts-ignore
             this.customHeader ?? null,
-            fe({
+            ft({
               // @ts-ignore
               key: this.key,
-              rows: t,
+              rows: e,
               // @ts-ignore
               selectRow: this.selectRow.bind(this),
               // @ts-ignore
@@ -423,8 +423,8 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @param {array} items
      * @returns {void}
      */
-    remove(t) {
-      this.table.remove(t);
+    remove(e) {
+      this.table.remove(e);
     },
     /**
      * This will set the items in the list.
@@ -433,8 +433,8 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @param {array} rows
      * @returns {void}
      */
-    setRows(t) {
-      this.table.setRows(t);
+    setRows(e) {
+      this.table.setRows(e);
     },
     /**
      * This will append items to the list.
@@ -443,8 +443,8 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @param {array|object} items
      * @returns {void}
      */
-    append(t) {
-      this.table.append(t);
+    append(e) {
+      this.table.append(e);
     },
     /**
      * This will mingle the new items with the old items.
@@ -454,8 +454,8 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @param {boolean} withDelete
      * @returns {void}
      */
-    mingle(t, e = !1) {
-      this.table.mingle(t, e);
+    mingle(e, t = !1) {
+      this.table.mingle(e, t);
     },
     /**
      * This will prepend items to the list.
@@ -464,8 +464,8 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @param {array|object} items
      * @returns {void}
      */
-    prepend(t) {
-      this.table.prepend(t);
+    prepend(e) {
+      this.table.prepend(e);
     },
     /**
      * This will remove the selected rows.
@@ -476,45 +476,45 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
       this.data.selectedRows = [];
     }
   }
-), pe = u(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
-  m({ class: "text-base font-semibold leading-6 m-0" }, t),
-  m({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
-])), me = () => o({ class: "flex items-center gap-x-1.5" }, [
+), pt = u(({ name: e, email: t }) => o({ class: "min-w-0 flex-auto" }, [
+  m({ class: "text-base font-semibold leading-6 m-0" }, e),
+  m({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, t)
+])), mt = () => 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" })
   ]),
   m({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), we = (t) => m({ class: "text-xs leading-5 text-muted-foreground" }, [
+]), wt = (e) => m({ class: "text-xs leading-5 text-muted-foreground" }, [
   y("Last seen "),
-  X({ datetime: t }, "3h ago")
-]), be = (t, e) => t === "online" ? me() : we(e), xe = u(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
-  m({ class: "text-sm leading-6 m-0" }, t),
-  be(s, e)
-])), ke = (t) => t.split(" ").map((s) => s[0]).join(""), ve = u((t) => D({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  X({ datetime: e }, "3h ago")
+]), bt = (e, t) => e === "online" ? mt() : wt(t), xt = u(({ role: e, lastSeen: t, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  m({ class: "text-sm leading-6 m-0" }, e),
+  bt(s, t)
+])), kt = (e) => e.split(" ").map((s) => s[0]).join(""), vt = u((e) => D({ 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: ke(t.name) }),
-    pe({ name: t.name, email: t.email })
+    tt({ src: e.image, alt: e.name, fallbackText: kt(e.name) }),
+    pt({ name: e.name, email: e.email })
   ]),
-  xe({
-    role: t.role,
-    lastSeen: t.lastSeen,
-    status: t.status
+  xt({
+    role: e.role,
+    lastSeen: e.lastSeen,
+    status: e.status
   })
-])), Ze = u((t) => new _({
+])), Zt = u((e) => new _({
   cache: "list",
   key: "name",
-  items: t.users,
+  items: e.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: ve
-})), ye = (t, e) => e.includes(t), De = (t, e, s) => t.exact ? s === e : ye(e, s), Se = ({ text: t, href: e, exact: s, hidden: a }) => new M({
-  text: t,
-  href: e,
+  rowItem: vt
+})), yt = (e, t) => t.includes(e), Dt = (e, t, s) => e.exact ? s === t : yt(t, s), St = ({ text: e, href: t, exact: s, hidden: a }) => new M({
+  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 et extends g {
+class te extends g {
   /**
   * This will declare the props for the compiler.
   *
@@ -540,7 +540,7 @@ class et extends g {
       [
         b({
           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)
@@ -555,8 +555,8 @@ class et 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.
@@ -564,13 +564,13 @@ class et 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;
-      De(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      Dt(a, a.getLinkPath(), t) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -580,8 +580,8 @@ class et 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.
@@ -590,8 +590,8 @@ class et 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.
@@ -599,8 +599,8 @@ class et extends g {
    * @param {object} option
    * @returns {object}
    */
-  addLink({ label: e, href: s, exact: a, hidden: n }) {
-    const i = Se({ text: e, href: s, exact: a, hidden: n });
+  addLink({ label: t, href: s, exact: a, hidden: n }) {
+    const i = St({ text: t, href: s, exact: a, hidden: n });
     return this.links.push(i), i;
   }
   /**
@@ -612,9 +612,9 @@ class et extends g {
     this.links = [];
   }
 }
-const tt = u((t) => {
-  const e = t.margin || "m-4 ml-0";
-  return o({ class: `flex-none ${e}` }, [
+const ee = u((e) => {
+  const t = e.margin || "m-4 ml-0";
+  return o({ class: `flex-none ${t}` }, [
     C({
       variant: "icon",
       class: "back-button",
@@ -623,7 +623,7 @@ const tt = u((t) => {
           window.history.back();
           return;
         }
-        t.backUrl && app.navigate(t.backUrl);
+        e.backUrl && app.navigate(e.backUrl);
       }
     }, [
       z(w.arrows.left)
@@ -671,7 +671,7 @@ class N extends g {
   * @param {object} container
   * @returns {void}
   */
-  setContainer(e) {
+  setContainer(t) {
     this.container = app.root;
   }
   /**
@@ -717,7 +717,7 @@ class N extends g {
     return this.children;
   }
 }
-class st extends N {
+class se extends N {
   /**
    * This will stop presistence.
    *
@@ -732,7 +732,7 @@ class st extends N {
    * @returns {object}
    */
   render() {
-    const e = this.container;
+    const t = this.container;
     return o(
       {
         onState: [
@@ -740,7 +740,7 @@ class st extends N {
             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");
           }]
         ]
       },
@@ -763,8 +763,8 @@ class st extends N {
   * @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.
@@ -820,7 +820,7 @@ class st extends N {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class at extends N {
+class ae extends N {
   /**
    * This will get the overlay type.
    *
@@ -835,51 +835,51 @@ class at extends N {
   * @param {object} container
   * @returns {void}
   */
-  setup(e) {
-    this.container = e, this.initialize();
+  setup(t) {
+    this.container = t, this.initialize();
   }
 }
-const Le = u(({ index: t, click: e, state: s }, a) => D({
+const Lt = u(({ index: e, click: t, state: s }, a) => D({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
-      "bg-accent": t,
-      "text-white": t
+      "bg-accent": e,
+      "text-white": e
     }]
   ],
-  pointerdown: () => e(t)
-}, a)), Ce = u(({ selectOption: t, state: e }) => b({
+  pointerdown: () => t(e)
+}, a)), Ct = u(({ selectOption: e, state: t }) => b({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (s, a) => Le({ index: a, click: t, state: e }, s.label)]
-})), Be = 100, Ie = u((t) => o({ class: "relative flex items-center" }, [
+  for: ["filteredOptions", (s, a) => Lt({ index: a, click: e, state: t }, s.label)]
+})), Bt = 100, It = u((e) => o({ class: "relative flex items-center" }, [
   J({
     cache: "input",
-    placeholder: t.placeholder ?? "Search...",
-    bind: [t.state, "searchQuery"],
-    keyup: (e, s) => {
-      s.state.open = !0, typeof t.filterOptions == "function" && t.filterOptions(), s.dropdown.updatePosition();
+    placeholder: e.placeholder ?? "Search...",
+    bind: [e.state, "searchQuery"],
+    keyup: (t, s) => {
+      s.state.open = !0, typeof e.filterOptions == "function" && e.filterOptions(), s.dropdown.updatePosition();
     },
-    pointerup: (e, s) => s.toggleDropdown(),
-    blur: (e, { state: s }) => setTimeout(() => s.open = !1, Be),
-    keydown: (e) => typeof t.handleKeyDown == "function" && t.handleKeyDown(e)
+    pointerup: (t, s) => s.toggleDropdown(),
+    blur: (t, { state: s }) => setTimeout(() => s.open = !1, Bt),
+    keydown: (t) => typeof e.handleKeyDown == "function" && e.handleKeyDown(t)
   }),
-  t.icon && o({ class: "absolute right-0 mr-2" }, [
-    z(t.icon)
+  e.icon && o({ class: "absolute right-0 mr-2" }, [
+    z(e.icon)
   ])
-])), Te = (t) => o({
+])), Tt = (e) => o({
   class: "relative flex fle-auto flex-col",
-  onState: ["open", (e, s, a) => {
-    if (e)
-      return new te({
+  onState: ["open", (t, s, a) => {
+    if (t)
+      return new et({
         cache: "dropdown",
         parent: a,
         button: a.input,
         size: "xl"
       }, [
-        Ce(t)
+        Ct(e)
       ]);
   }]
-}), nt = R(
+}), ne = R(
   {
     /**
      * This will set up the data object.
@@ -887,10 +887,10 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
      * @returns {object} - The data object.
      */
     setData() {
-      const t = this.options || [];
+      const e = this.options || [];
       return new L({
-        options: t,
-        filteredOptions: t
+        options: e,
+        filteredOptions: e
       });
     },
     /**
@@ -911,10 +911,10 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
      * @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);
     },
     /**
@@ -923,14 +923,14 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
      * @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)
       );
     },
     /**
@@ -939,8 +939,8 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
      * @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.
@@ -948,10 +948,10 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
      * @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.
@@ -965,9 +965,9 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
      * @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.
@@ -976,7 +976,7 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        Ie({
+        It({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -988,7 +988,7 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        Te({
+        Tt({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -999,22 +999,22 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
       ]);
     }
   }
-), We = (t) => D(
+), Wt = (e) => D(
   {
     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",
-      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)
   ]
-), Oe = (t, e) => (t.callBack = e, We(t)), Pe = (t) => S({ 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) => Oe(e, t.callBack)] })
+), Pt = (e, t) => (e.callBack = t, Wt(e)), Ot = (e) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
+  b({ class: "flex flex-auto flex-row", map: [e.options, (t) => Pt(t, e.callBack)] })
 ]);
-class it extends g {
+class ie extends g {
   /**
   * This will declare the props for the compiler.
   *
@@ -1029,14 +1029,14 @@ class it extends g {
    * @returns {object}
    */
   render() {
-    const e = this.select.bind(this);
+    const t = this.select.bind(this);
     return o({ class: "" }, [
-      Pe({
+      Ot({
         class: this.class,
         options: this.options,
-        callBack: e
+        callBack: t
       }),
-      P({
+      O({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1048,8 +1048,8 @@ class it 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.
@@ -1057,8 +1057,8 @@ class it 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.
@@ -1066,8 +1066,8 @@ class it extends g {
    * @param {*} value
    * @returns {void}
    */
-  select(e) {
-    this.state.selected = e;
+  select(t) {
+    this.state.selected = t;
   }
   /**
    * This will update the content.
@@ -1075,13 +1075,13 @@ class it 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;
   }
@@ -1091,34 +1091,34 @@ class it 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 Re = (t) => D(
+const Rt = (e) => D(
   {
     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 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)
   ]
-), Me = (t, e) => (t.callBack = e, Re(t)), ze = (t) => S({ 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) => Me(e, t.callBack)] })
+), Mt = (e, t) => (e.callBack = t, Rt(e)), zt = (e) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
+  b({ class: "flex flex-auto flex-row", map: [e.options, (t) => Mt(t, e.callBack)] })
 ]);
-class ot extends g {
+class oe extends g {
   /**
   * This will declare the props for the compiler.
   *
@@ -1133,11 +1133,11 @@ class ot extends g {
    * @returns {object}
    */
   render() {
-    const e = this.select.bind(this);
-    return ze({
+    const t = this.select.bind(this);
+    return zt({
       class: this.class,
       options: this.options,
-      callBack: e
+      callBack: t
     });
   }
   /**
@@ -1146,8 +1146,8 @@ class ot 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.
@@ -1155,23 +1155,23 @@ class ot 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 Ne = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), $e = (t, e) => {
-  const s = t.getLinkPath();
-  return t.exact ? e === s : Ne(s, e);
-}, Ae = ({ text: t, href: e, exact: s }) => new M({
-  text: t,
-  href: e,
+const Nt = (e, t) => new RegExp(`${e}($|/|\\.).*`).test(t), $t = (e, t) => {
+  const s = e.getLinkPath();
+  return e.exact ? t === s : Nt(s, t);
+}, At = ({ text: e, href: t, exact: s }) => new M({
+  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 je extends g {
+class jt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1195,7 +1195,7 @@ class je extends g {
     return S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
       b({
         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)
@@ -1209,8 +1209,8 @@ class je 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.
@@ -1218,11 +1218,11 @@ class je 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 = $e(n, e), s === !0)) {
+      if (n.rendered !== !1 && (s = $t(n, t), s === !0)) {
         this.updateLink(n, !0);
         break;
       }
@@ -1234,8 +1234,8 @@ class je 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.
@@ -1244,8 +1244,8 @@ class je extends g {
    * @param {boolean} selected
    * @returns {void}
    */
-  updateLink(e, s) {
-    e.update(s);
+  updateLink(t, s) {
+    t.update(s);
   }
   /**
    * This will add a link.
@@ -1253,8 +1253,8 @@ class je extends g {
    * @param {object} option
    * @returns {object}
    */
-  addLink({ label: e, href: s, exact: a }) {
-    const n = Ae({ text: e, href: s, exact: a });
+  addLink({ label: t, href: s, exact: a }) {
+    const n = At({ text: t, href: s, exact: a });
     return this.links.push(n), n;
   }
   /**
@@ -1266,7 +1266,7 @@ class je extends g {
     this.links = [];
   }
 }
-class lt extends g {
+class le extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1282,11 +1282,11 @@ class lt extends g {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new je({
+      new jt({
         class: this.class,
         options: this.options
       }),
-      P({
+      O({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1298,21 +1298,21 @@ class lt 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 Ue extends g {
+class Ut extends g {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1321,8 +1321,8 @@ class Ue 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 G(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 G(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.
@@ -1360,12 +1360,12 @@ class Ue 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);
+    const t = this.panel, s = this.pointerPosition.bind(this), a = this.pointerUp.bind(this), n = this.pointerDown.bind(this), i = this.resize.bind(this);
     return [
-      ["pointermove", e, s],
-      ["pointerup", e, a],
-      ["pointerdown", e, n],
-      ["pointerout", e, a],
+      ["pointermove", t, s],
+      ["pointerup", t, a],
+      ["pointerdown", t, n],
+      ["pointerout", t, a],
       ["resize", window, i]
     ];
   }
@@ -1375,14 +1375,14 @@ class Ue 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 h = e.touches[0];
+    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;
+      s = t.x || t.clientX, a = t.y || t.clientY;
     const d = parseInt((s - l.left) * i), c = parseInt((a - l.top) * i);
     this.mouse.x = d, this.mouse.y = c;
   }
@@ -1393,8 +1393,8 @@ class Ue extends g {
    * @param {Event} e The event object.
    * @returns {void}
    */
-  pointerDown(e) {
-    e.preventDefault(), 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();
   }
@@ -1405,8 +1405,8 @@ class Ue extends g {
    * @param {Event} e The event object.
    * @returns {void}
    */
-  pointerUp(e) {
-    e.preventDefault(), 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.
@@ -1414,8 +1414,8 @@ class Ue extends g {
    * @param {Event} e The event object.
    * @returns {void}
    */
-  pointerPosition(e) {
-    this.getEventPosition(e), this.mouse.status === "down" && e.preventDefault();
+  pointerPosition(t) {
+    this.getEventPosition(t), this.mouse.status === "down" && (t.preventDefault(), t.stopPropagation());
   }
   /**
    * Resizes the canvas, preserves existing drawing by converting
@@ -1424,7 +1424,7 @@ class Ue 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 window.Image();
       B.on("load", n, function i() {
@@ -1448,8 +1448,8 @@ class Ue extends g {
    * @returns {void}
    */
   noScaleResize() {
-    const e = I.getSize(container);
-    this.width = canvas.width = e.width, this.height = canvas.height = e.height;
+    const t = I.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
@@ -1458,13 +1458,13 @@ class Ue extends g {
    * @returns {void}
    */
   scale() {
-    const e = this.canvas, s = this.container, a = I.getSize(s), n = this.targetSize, i = n.width, l = n.height;
+    const t = this.canvas, s = this.container, a = I.getSize(s), n = this.targetSize, i = n.width, l = n.height;
     let d = i + "px", c = l + "px";
-    if (this.width = e.width = i, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
+    if (this.width = t.width = i, this.height = t.height = l, a.width !== 0 && a.height !== 0) {
       const h = a.width, f = a.height, r = h / i, p = f / l, x = Math.min(r, p);
       d = i * x + "px", c = l * x + "px";
     }
-    e.style.width = d, e.style.height = c;
+    t.style.width = d, t.style.height = c;
   }
   /**
    * Main drawing loop. If the mouse is down, adds a line
@@ -1481,11 +1481,11 @@ class Ue 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.
@@ -1496,10 +1496,10 @@ class Ue 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
@@ -1509,8 +1509,8 @@ class Ue 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.
@@ -1518,8 +1518,8 @@ class Ue 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.
@@ -1538,7 +1538,7 @@ class Ue extends g {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class rt extends g {
+class re extends g {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1567,7 +1567,7 @@ class rt extends g {
           click: this.reset.bind(this)
         })
       ]),
-      new Ue({
+      new Ut({
         cache: "canvasLayer",
         margin: this.margin,
         targetSize: this.targetSize,
@@ -1611,39 +1611,39 @@ class rt 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 {
-  tt as B,
-  he as C,
-  fe as D,
-  ue as H,
-  at as I,
-  et as N,
+  ee as B,
+  ht as C,
+  ft as D,
+  ut as H,
+  ae as I,
+  te as N,
   N as O,
-  Ke as P,
-  nt as S,
-  ge as T,
-  ve as U,
-  Ve as W,
-  ie as a,
+  Kt as P,
+  ne as S,
+  gt as T,
+  vt as U,
+  Vt as W,
+  it as a,
   T as b,
-  ae as c,
-  _e as d,
-  Ge as e,
-  le as f,
-  ne as g,
-  ce as h,
-  de as i,
-  Je as j,
-  Ze as k,
-  st as l,
-  it as m,
-  ot as n,
-  je as o,
-  lt as p,
-  rt as q
+  at as c,
+  _t as d,
+  Gt as e,
+  lt as f,
+  nt as g,
+  ct as h,
+  dt as i,
+  Jt as j,
+  Zt as k,
+  se as l,
+  ie as m,
+  oe as n,
+  jt as o,
+  le as p,
+  re as q
 };