@base-framework/ui 1.0.304 → 1.0.306

package/dist/{signature-panel-CEqzd6Sa.js → signature-panel-fsF3hz3L.js}

@@ -1,22 +1,22 @@
-import { Button as x, Div as o, On as v, Span as D, Th as O, UseParent as F, I as E, Thead as Q, Tr as X, Table as I, P as p, Li as S, Time as q, Nav as C, Ul as w, Section as z, Canvas as K } from "@base-framework/atoms";
-import { Atom as d, Component as u, Data as L, DateTime as G, router as b, NavLink as $, DataTracker as N, Jot as V, base as M, Dom as R } from "@base-framework/base";
-import { B as T, I as _ } from "./buttons-CHEs54Wl.js";
-import { Icons as k } from "./icons.es.js";
+import { Button as k, Div as o, On as S, Span as I, Th as z, UseParent as F, I as E, Thead as G, Tr as Q, Table as L, P as y, Li as w, Time as X, Nav as m, Ul as g, Section as C, Canvas as q } from "@base-framework/atoms";
+import { Atom as h, Component as c, Data as B, DateTime as K, router as x, NavLink as T, DataTracker as N, Jot as V, base as R, Dom as W } from "@base-framework/base";
+import { B as M, I as _ } from "./buttons-CHEs54Wl.js";
+import { Icons as D } from "./icons.es.js";
 import { TableBody as J, DataTableBody as Z, ScrollableTableBody as ee, List as te, IntervalTimer as se } from "@base-framework/organisms";
 import { C as ae, I as ie, H as ne } from "./inputs-9udyzkHR.js";
 import { A as oe, P as le } from "./range-calendar-CnBylqhu.js";
-d((t, e) => ({
+h((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-d(({ value: t, label: e }) => x({
+h(({ value: t, label: e }) => k({
   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 at extends u {
+class ft extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -58,20 +58,20 @@ const re = (t) => {
     { length: s },
     (i, n) => new Date(t, e - 1, a - s + n + 1)
   );
-}, he = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), W = (t, e) => {
+}, he = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), O = (t, e) => {
   const s = new Date(e, 0, 4), a = (s.getDay() + 6) % 7, i = new Date(s);
   i.setDate(s.getDate() - a);
   const n = new Date(i);
   return n.setDate(i.getDate() + (t - 1) * 7), n;
-}, it = (t, e) => {
+}, gt = (t, e) => {
   const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = [];
   let n = [];
   for (let l = 1 - s; l <= a; l++) {
-    const c = new Date(t, e, l);
-    n.push(l > 0 ? c : null), (n.length === 7 || l === a) && (i.push([...n]), n = []);
+    const d = new Date(t, e, l);
+    n.push(l > 0 ? d : null), (n.length === 7 || l === a) && (i.push([...n]), n = []);
   }
   return i;
-}, nt = (t, e) => {
+}, mt = (t, e) => {
   const s = new Date(t, e + 1, 0).getDate(), a = [];
   let i = [];
   for (let n = 1; n <= s; n++)
@@ -82,7 +82,7 @@ const re = (t) => {
   return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
 }, fe = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
   const n = ue(t, e, s);
-  return x({
+  return k({
     text: t || "",
     disabled: !t,
     class: `
@@ -92,19 +92,19 @@ const re = (t) => {
 		`,
     click: () => i(a, s)
   });
-}, me = (t, e) => {
-  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = de(t, e, s), n = Array.from({ length: a }, (h, g) => new Date(t, e, g + 1)), l = (i.length + n.length) % 7, c = l === 0 ? 0 : 7 - l, r = he(t, e, c), f = [...i, ...n, ...r], m = [];
-  for (let h = 0; h < f.length; h += 7) {
-    const g = f.slice(h, h + 7), y = g.find((Y) => Y) || new Date(t, e, 1), { weekNumber: A, year: U } = ce(y);
-    m.push({
+}, ge = (t, e) => {
+  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = de(t, e, s), n = Array.from({ length: a }, (u, b) => new Date(t, e, b + 1)), l = (i.length + n.length) % 7, d = l === 0 ? 0 : 7 - l, r = he(t, e, d), f = [...i, ...n, ...r], p = [];
+  for (let u = 0; u < f.length; u += 7) {
+    const b = f.slice(u, u + 7), v = b.find((Y) => Y) || new Date(t, e, 1), { weekNumber: A, year: H } = ce(v);
+    p.push({
       weekNumber: A,
-      year: U,
-      days: g
+      year: H,
+      days: b
     });
   }
-  return m;
-}, ge = ({ selectWeek: t }) => v("month", (e, s, { data: a }) => {
-  const { year: i, month: n, currentDate: l } = a, c = me(i, n);
+  return p;
+}, me = ({ selectWeek: t }) => S("month", (e, s, { data: a }) => {
+  const { year: i, month: n, currentDate: l } = a, d = ge(i, n);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -115,12 +115,12 @@ const re = (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) => D({ class: "px-1 py-1", text: r })
+          (r) => I({ class: "px-1 py-1", text: r })
         )
       ),
       // Render each "week" row
-      ...c.map(
-        ({ weekNumber: r, days: f, year: m }) => o({
+      ...d.map(
+        ({ weekNumber: r, days: f, year: p }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
             ring: r
@@ -129,7 +129,7 @@ const re = (t) => {
           // Left column: ISO week number
           o({
             class: "font-medium text-center col-span-1 rounded-sm cursor-pointer",
-            click: () => t(r, m),
+            click: () => t(r, p),
             // If you have a 'currentWeek' state, you can highlight it with 'onSet'
             onSet: ["currentWeek", {
               "text-primary-foreground": r,
@@ -141,10 +141,10 @@ const re = (t) => {
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
             f.map(
-              (h) => fe({
-                year: h?.getFullYear() || null,
-                month: h?.getMonth() || null,
-                day: h?.getDate() || null,
+              (u) => fe({
+                year: u?.getFullYear() || null,
+                month: u?.getMonth() || null,
+                day: u?.getDate() || null,
                 weekNumber: r,
                 selectWeek: t
               })
@@ -154,7 +154,7 @@ const re = (t) => {
       )
     ]
   );
-}), P = ({ label: t, click: e }) => T(
+}), $ = ({ label: t, click: e }) => M(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -165,20 +165,20 @@ const re = (t) => {
     click: e,
     "aria-label": `${t} month`,
     variant: "icon",
-    icon: t === "Previous" ? k.chevron.single.left : k.chevron.single.right
+    icon: t === "Previous" ? D.chevron.single.left : D.chevron.single.right
   }
 ), pe = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
-  D("[[monthName]] [[year]]"),
-  P({
+  I("[[monthName]] [[year]]"),
+  $({
     label: "Previous",
     click: e
   }),
-  P({
+  $({
     label: "Next",
     click: t
   })
 ]);
-class ot extends u {
+class pt extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -193,8 +193,8 @@ class ot extends u {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = W(s, e.getFullYear());
-    return new L({
+    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = O(s, e.getFullYear());
+    return new B({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
       month: a.getMonth(),
@@ -231,7 +231,7 @@ class ot extends u {
    * @returns {string}
    */
   getMonthName(e) {
-    return G.monthNames[e];
+    return K.monthNames[e];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -276,7 +276,7 @@ class ot extends u {
    */
   selectWeek(e, s) {
     this.data.currentWeek = e;
-    const a = W(e, s);
+    const a = O(e, s);
     this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(e);
   }
   /**
@@ -290,34 +290,34 @@ class ot extends u {
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      ge({
+      me({
         selectWeek: (e, s) => this.selectWeek(e, s)
       })
     ]);
   }
 }
-const we = (t, e) => {
+const be = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, ye = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
-  F((e) => new ae({ class: "mr-2", onChange: (s, a) => we(e, a) }))
-]), be = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
+}, xe = (t) => z({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  F((e) => new ae({ class: "mr-2", onChange: (s, a) => be(e, a) }))
+]), ke = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
-  return O({
+  return z({
     class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
     click: e && (() => i(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
-      D(a),
-      e && E({ class: "ml-2", html: k.arrows.upDown })
+      I(a),
+      e && E({ class: "ml-2", html: D.arrows.upDown })
     ])
   ]);
-}, B = (t) => Q([
-  X({
+}, P = (t) => G([
+  Q({
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? ye({ toggle: t.toggle }) : be({
+      (e) => e.label === "checkbox" ? xe({ toggle: t.toggle }) : ke({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -326,17 +326,17 @@ const we = (t, e) => {
       })
     ]
   })
-]), ke = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new J({
+]), we = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new J({
   cache: "list",
   key: t,
   items: e,
-  rowItem: (c) => a(c, s),
+  rowItem: (d) => a(d, s),
   class: "divide-y divide-border",
   emptyState: i,
   skeleton: n,
   columnCount: l
 });
-class H extends u {
+class U extends c {
   /**
    * Initializes component data.
    *
@@ -344,7 +344,7 @@ class H extends u {
    */
   setData() {
     let e = this.rows && this.rows.length > 0;
-    return (this.loadMoreItems || this.tableData) && !e && (e = null), new L({
+    return (this.loadMoreItems || this.tableData) && !e && (e = null), new B({
       selectedRows: [],
       // @ts-ignore
       hasItems: e,
@@ -415,14 +415,14 @@ class H extends u {
   render() {
     const e = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      S("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        I({ class: "w-full" }, [
+        L({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && B({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          ke({
+          we({
             // @ts-ignore
             key: this.key,
             // @ts-ignore
@@ -501,7 +501,7 @@ class H extends u {
     this.data.selectedRows = [];
   }
 }
-const xe = (t) => new Z({
+const ye = (t) => new Z({
   cache: "list",
   loadMoreItems: t.loadMoreItems,
   offset: t.offset,
@@ -514,7 +514,7 @@ const xe = (t) => new Z({
   skeleton: t.skeleton,
   columnCount: t.columnCount
 });
-class ve extends H {
+class ve extends U {
   /**
    * Renders the DataTable component.
    *
@@ -523,14 +523,14 @@ class ve extends H {
   render() {
     const e = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      S("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        I({ class: "w-full" }, [
+        L({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && B({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          xe({
+          ye({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -566,7 +566,7 @@ class ve extends H {
     this.list.refresh();
   }
 }
-const lt = d((t) => new ve(
+const bt = h((t) => new ve(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -597,7 +597,7 @@ const lt = d((t) => new ve(
   skeleton: t.skeleton,
   columnCount: t.columnCount
 });
-class Se extends H {
+class Se extends U {
   /**
    * Renders the DataTable component.
    *
@@ -606,11 +606,11 @@ class Se extends H {
   render() {
     const e = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
     return o({ class: "w-full flex flex-auto flex-col" }, [
-      v("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      S("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        I({ class: "w-full" }, [
+        L({ class: "w-full" }, [
           // @ts-ignore
-          this.headers && B({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
           De({
@@ -651,7 +651,7 @@ class Se extends H {
     this.list.refresh();
   }
 }
-const rt = d((t) => new Se(
+const xt = h((t) => new Se(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -669,45 +669,45 @@ const rt = d((t) => new Se(
     emptyState: t.emptyState,
     skeleton: t.skeleton
   }
-)), Ce = d(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
-  p({ class: "text-base font-semibold leading-6 m-0" }, t),
-  p({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
-])), Ie = () => o({ class: "flex items-center gap-x-1.5" }, [
+)), Ie = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+  y({ class: "text-base font-semibold leading-6 m-0" }, t),
+  y({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
+])), Ce = () => o({ class: "flex items-center gap-x-1.5" }, [
   o({ class: "flex-none rounded-full bg-emerald-500/20 p-1" }, [
     o({ class: "h-1.5 w-1.5 rounded-full bg-emerald-500" })
   ]),
-  p({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), Le = (t) => p({ class: "text-xs leading-5 text-muted-foreground" }, [
-  D("Last seen "),
-  q({ datetime: t }, "3h ago")
-]), Te = (t, e) => t === "online" ? Ie() : Le(e), Be = d(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
-  p({ class: "text-sm leading-6 m-0" }, t),
-  Te(s, e)
-])), Me = (t) => t.split(" ").map((s) => s[0]).join(""), Re = d((t) => S({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  y({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), Le = (t) => y({ class: "text-xs leading-5 text-muted-foreground" }, [
+  I("Last seen "),
+  X({ datetime: t }, "3h ago")
+]), Be = (t, e) => t === "online" ? Ce() : Le(e), Te = h(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  y({ class: "text-sm leading-6 m-0" }, t),
+  Be(s, e)
+])), Me = (t) => t.split(" ").map((s) => s[0]).join(""), Pe = h((t) => w({ 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" }, [
     oe({ src: t.image, alt: t.name, fallbackText: Me(t.name) }),
-    Ce({ name: t.name, email: t.email })
+    Ie({ name: t.name, email: t.email })
   ]),
-  Be({
+  Te({
     role: t.role,
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), ct = d((t) => new te({
+])), kt = h((t) => new te({
   cache: "list",
   key: "name",
   items: t.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: Re
-})), We = (t, e) => e.includes(t), Pe = (t, e, s) => t.exact ? s === e : We(e, s), Oe = ({ text: t, href: e, exact: s, hidden: a }) => new $({
+  rowItem: Pe
+})), Re = (t, e) => e.includes(t), We = (t, e, s) => t.exact ? s === e : Re(e, s), Oe = ({ text: t, href: e, exact: s, hidden: a }) => new T({
   text: t,
   href: e,
   exact: s,
   dataSet: ["selected", ["state", !0, "active"]],
   class: `${a ? "hidden" : "inline-flex"} items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring focus-visible:ring-offset-background hover:bg-primary hover:text-primary-foreground disabled:opacity-50 disabled:pointer-events-none data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm`
 });
-class dt extends u {
+class wt extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -728,14 +728,14 @@ class dt extends u {
    * @returns {object}
    */
   render() {
-    return C(
+    return m(
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
-        w({
+        g({
           class: "flex gap-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
-            value: ["[[path]]", b.data],
+            value: ["[[path]]", x.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -748,7 +748,7 @@ class dt extends u {
    * @returns {void}
    */
   afterSetup() {
-    const e = b.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -763,7 +763,7 @@ class dt extends u {
     for (const a of this.links) {
       if (!a.rendered)
         continue;
-      Pe(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      We(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -805,13 +805,13 @@ class dt extends u {
     this.links = [];
   }
 }
-const ht = d((t) => {
+const yt = h((t) => {
   const e = t.margin || "m-4 ml-0";
   return t.allowHistory = t.allowHistory === !0, o({ class: `flex-none ${e}` }, [
-    T({ variant: "back", class: "ghost", ...t })
+    M({ variant: "back", class: "ghost", ...t })
   ]);
 });
-class j extends u {
+class j extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -904,7 +904,7 @@ N.addType("dockableOverlay", (t) => {
   const e = t.component;
   e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
 });
-class ut extends j {
+class vt extends j {
   /**
    * This will stop presistence.
    *
@@ -1013,7 +1013,7 @@ class ut extends j {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class ft extends j {
+class Dt extends j {
   /**
    * This will get the overlay type.
    *
@@ -1032,7 +1032,7 @@ class ft extends j {
     this.container = e, this.initialize();
   }
 }
-const ze = d(({ index: t, click: e, state: s }, a) => S({
+const $e = h(({ index: t, click: e, state: s }, a) => w({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -1041,10 +1041,10 @@ const ze = d(({ index: t, click: e, state: s }, a) => S({
     }]
   ],
   click: () => e(t)
-}, a)), $e = d(({ selectOption: t, state: e }) => w({
+}, a)), ze = h(({ selectOption: t, state: e }) => g({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (s, a) => ze({ index: a, click: t, state: e }, s.label)]
-})), Ne = d((t) => o({ class: "relative flex items-center" }, [
+  for: ["filteredOptions", (s, a) => $e({ index: a, click: t, state: e }, s.label)]
+})), Ne = h((t) => o({ class: "relative flex items-center" }, [
   ie({
     cache: "input",
     class: t.class ?? "",
@@ -1063,7 +1063,7 @@ const ze = d(({ index: t, click: e, state: s }, a) => S({
   t.icon && o({ class: "absolute flex right-0 mr-2" }, [
     _(t.icon)
   ])
-])), He = (t) => o({
+])), Ue = (t) => o({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (e, s, a) => {
     if (e)
@@ -1073,10 +1073,10 @@ const ze = d(({ index: t, click: e, state: s }, a) => S({
         button: a.input,
         size: "xl"
       }, [
-        $e(t)
+        ze(t)
       ]);
   }]
-}), mt = V(
+}), St = V(
   {
     /**
      * This will set up the data object.
@@ -1085,7 +1085,7 @@ const ze = d(({ index: t, click: e, state: s }, a) => S({
      */
     setData() {
       const t = this.options || [];
-      return new L({
+      return new B({
         options: t,
         filteredOptions: t
       });
@@ -1185,7 +1185,7 @@ const ze = d(({ index: t, click: e, state: s }, a) => S({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        He({
+        Ue({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1196,22 +1196,22 @@ const ze = d(({ index: t, click: e, state: s }, a) => S({
       ]);
     }
   }
-), je = (t) => S(
+), je = (t) => w(
   {
     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"]]
   },
   [
-    x({
+    k({
       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)
   ]
-), Ae = (t, e) => (t.callBack = e, je(t)), Ue = (t) => C({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  w({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ae(e, t.callBack)] })
+), Ae = (t, e) => (t.callBack = e, je(t)), He = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  g({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ae(e, t.callBack)] })
 ]);
-class gt extends u {
+class It extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -1228,12 +1228,12 @@ class gt extends u {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      Ue({
+      He({
         class: this.class,
         options: this.options,
         callBack: e
       }),
-      z({
+      C({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1298,23 +1298,23 @@ class gt extends u {
     };
   }
 }
-const Ye = (t) => S(
+const Ye = (t) => w(
   {
     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"]]
   },
   [
-    x({
+    k({
       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)
   ]
-), Fe = (t, e) => (t.callBack = e, Ye(t)), Ee = (t) => C({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  w({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
+), Fe = (t, e) => (t.callBack = e, Ye(t)), Ee = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  g({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
 ]);
-class pt extends u {
+class Ct extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -1356,17 +1356,17 @@ class pt extends u {
     };
   }
 }
-const Qe = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Xe = (t, e) => {
+const Ge = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Qe = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : Qe(s, e);
-}, qe = ({ text: t, href: e, exact: s }) => new $({
+  return t.exact ? e === s : Ge(s, e);
+}, Xe = ({ text: t, href: e, exact: s }) => new T({
   text: t,
   href: e,
   exact: s,
   dataSet: ["selected", ["state", !0, "active"]],
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm"
 });
-class Ke extends u {
+class qe extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -1387,12 +1387,12 @@ class Ke extends u {
    * @returns {object}
    */
   render() {
-    return C({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
-      w({
+    return m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
+      g({
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", b.data],
+          value: ["[[path]]", x.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1404,7 +1404,7 @@ class Ke extends u {
    * @returns {void}
    */
   afterSetup() {
-    const e = b.data.path;
+    const e = x.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1417,7 +1417,7 @@ class Ke extends u {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
     for (const i of this.links)
-      if (i.rendered !== !1 && (s = Xe(i, e), s === !0)) {
+      if (i.rendered !== !1 && (s = Qe(i, e), s === !0)) {
         this.updateLink(i, !0);
         break;
       }
@@ -1449,7 +1449,7 @@ class Ke extends u {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a }) {
-    const i = qe({ text: e, href: s, exact: a });
+    const i = Xe({ text: e, href: s, exact: a });
     return this.links.push(i), i;
   }
   /**
@@ -1461,7 +1461,7 @@ class Ke extends u {
     this.links = [];
   }
 }
-class wt extends u {
+class Lt extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -1477,11 +1477,11 @@ class wt extends u {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new Ke({
+      new qe({
         class: this.class,
         options: this.options
       }),
-      z({
+      C({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1507,7 +1507,348 @@ class wt extends u {
     return s;
   }
 }
-class Ge extends u {
+const Ke = (t) => w(
+  {
+    class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground 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]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
+    dataSet: ["selected", ["state", t.value, "active"]]
+  },
+  [
+    k({
+      class: "flex flex-auto justify-center items-center px-4 py-3",
+      onSet: ["selected", { selected: t.value }],
+      click: (e) => t.callBack(t.value)
+    }, t.label)
+  ]
+), Ve = (t, e) => (t.callBack = e, Ke(t)), _e = (t) => m({ class: `border-b border-border ${t.class}` }, [
+  g({ class: "flex flex-row items-center", map: [t.options, (e) => Ve(e, t.callBack)] })
+]);
+class Bt extends c {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.select.bind(this);
+    return o({ class: "underlined-button-tab-panel" }, [
+      _e({
+        class: this.class,
+        options: this.options,
+        callBack: e
+      }),
+      C({
+        class: "tab-content pt-6",
+        switch: this.addGroup()
+      })
+    ]);
+  }
+  /**
+   * This will set up the component.
+   *
+   * @returns {void}
+   */
+  beforeSetup() {
+    this.selectedIndex = 0, this.setSelectedIndex();
+  }
+  /**
+   * This will set the selected index.
+   *
+   * @returns {void}
+   */
+  setSelectedIndex() {
+    const e = this.options;
+    for (let s = 0, a = e.length; s < a; s++)
+      if (e[s].selected === !0) {
+        this.selectedIndex = s;
+        break;
+      }
+  }
+  /**
+   * This will select an option.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  select(e) {
+    this.setSelected(e), this.onSelect && this.onSelect(e, this.selectedIndex);
+  }
+  /**
+   * This will set the selected option.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  setSelected(e) {
+    const s = this.options;
+    for (let a = 0, i = s.length; a < i; a++)
+      if (s[a].value === e) {
+        this.selectedIndex = a;
+        break;
+      }
+  }
+  /**
+   * This will add the group.
+   *
+   * @returns {array}
+   */
+  addGroup() {
+    let e;
+    const s = [], a = this.options;
+    for (let i = 0, n = a.length; i < n; i++)
+      e = a[i], s.push(
+        {
+          uri: e.value,
+          component: e.component,
+          title: e.title || null,
+          persist: !0
+        }
+      );
+    return s;
+  }
+}
+const Je = (t) => w(
+  {
+    class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground 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]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
+    dataSet: ["selected", ["state", t.value, "active"]]
+  },
+  [
+    k({
+      class: "flex flex-auto justify-center items-center px-4 py-3 disabled:opacity-50 disabled:cursor-not-allowed",
+      onSet: ["selected", { selected: t.value }],
+      click: (e) => t.callBack(t.value),
+      disabled: t.disabled
+    }, t.label)
+  ]
+), Ze = (t, e) => (t.callBack = e, Je(t)), et = (t) => m({ class: `border-b border-border ${t.class}` }, [
+  g({ class: "flex flex-row items-center", map: [t.options, (e) => Ze(e, t.callBack)] })
+]);
+class Tt extends c {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.select.bind(this);
+    return et({
+      class: this.class,
+      options: this.options,
+      callBack: e
+    });
+  }
+  /**
+   * This will set up the component.
+   *
+   * @returns {void}
+   */
+  beforeSetup() {
+    this.selectedIndex = 0, this.setSelectedIndex();
+  }
+  /**
+   * This will set the selected index.
+   *
+   * @returns {void}
+   */
+  setSelectedIndex() {
+    const e = this.options;
+    for (let s = 0, a = e.length; s < a; s++)
+      if (e[s].selected === !0) {
+        this.selectedIndex = s;
+        break;
+      }
+  }
+  /**
+   * This will select an option.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  select(e) {
+    this.setSelected(e), this.onSelect && this.onSelect(e, this.selectedIndex);
+  }
+  /**
+   * This will set the selected option.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  setSelected(e) {
+    const s = this.options;
+    for (let a = 0, i = s.length; a < i; a++)
+      if (s[a].value === e) {
+        this.selectedIndex = a;
+        break;
+      }
+  }
+}
+const tt = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), st = (t, e) => {
+  const s = t.getLinkPath();
+  return t.exact ? e === s : tt(s, e);
+}, at = ({ text: t, href: e, exact: s }) => new T({
+  text: t,
+  href: e,
+  exact: s,
+  dataSet: ["selected", ["state", !0, "active"]],
+  class: "relative inline-flex items-center justify-center whitespace-nowrap px-4 py-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground 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]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100"
+});
+class it extends c {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
+  }
+  /**
+   * This will configure the links.
+   */
+  beforeSetup() {
+    this.links = [];
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return m({ class: `border-b border-border ${this.class}` }, [
+      g({
+        class: "flex flex-row items-center",
+        map: [this.options, (e) => this.addLink(e)],
+        watch: {
+          value: ["[[path]]", x.data],
+          callBack: this.updateLinks.bind(this)
+        }
+      })
+    ]);
+  }
+  /**
+   * This will update the links.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const e = x.data.path;
+    this.updateLinks(e);
+  }
+  /**
+   * This will update the links.
+   *
+   * @param {string} value
+   * @returns {void}
+   */
+  updateLinks(e) {
+    let s = !1, a = this.links[0];
+    this.deactivateAllLinks();
+    for (const i of this.links)
+      if (i.rendered !== !1 && (s = st(i, e), s === !0)) {
+        this.updateLink(i, !0);
+        break;
+      }
+    s !== !0 && a && this.updateLink(a, !0);
+  }
+  /**
+   * This will deactivate all links.
+   *
+   * @returns {void}
+   */
+  deactivateAllLinks() {
+    for (const e of this.links)
+      this.updateLink(e, !1);
+  }
+  /**
+   * This will update the link.
+   *
+   * @param {object} link
+   * @param {boolean} selected
+   * @returns {void}
+   */
+  updateLink(e, s) {
+    e.update(s);
+  }
+  /**
+   * This will add a link.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink({ label: e, href: s, exact: a }) {
+    const i = at({ text: e, href: s, exact: a });
+    return this.links.push(i), i;
+  }
+  /**
+   * This will remove all the links.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.links = [];
+  }
+}
+class Mt extends c {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "";
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return o({ class: "underlined-tab-panel" }, [
+      new it({
+        class: this.class,
+        options: this.options
+      }),
+      C({
+        class: "tab-content pt-6",
+        switch: this.addGroup()
+      })
+    ]);
+  }
+  /**
+   * This will add the group.
+   *
+   * @returns {array}
+   */
+  addGroup() {
+    let e;
+    const s = [], a = this.options;
+    for (let i = 0, n = a.length; i < n; i++)
+      e = a[i], s.push(
+        {
+          uri: e.uri || e.href,
+          component: e.component,
+          title: e.title || null,
+          persist: !0
+        }
+      );
+    return s;
+  }
+}
+class nt extends c {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1525,7 +1866,7 @@ class Ge extends u {
    * @returns {object} Layout definition for the canvas.
    */
   render() {
-    return K({
+    return q({
       style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
     });
   }
@@ -1578,8 +1919,8 @@ class Ge extends u {
       s = f.clientX, a = f.clientY;
     } else
       s = e.x || e.clientX, a = e.y || e.clientY;
-    const c = parseInt((s - l.left) * n), r = parseInt((a - l.top) * n);
-    this.mouse.x = c, this.mouse.y = r;
+    const d = parseInt((s - l.left) * n), r = parseInt((a - l.top) * n);
+    this.mouse.x = d, this.mouse.y = r;
   }
   /**
    * Called when the pointer goes down on the canvas.
@@ -1622,8 +1963,8 @@ class Ge extends u {
     const { canvas: e, ctx: s } = this, a = e.toDataURL();
     if (this.scale(), this.setupBackground(s), a !== "data:,") {
       const i = new globalThis.Image();
-      M.on("load", i, function n() {
-        s.drawImage(i, 0, 0), M.off("load", i, n);
+      R.on("load", i, function n() {
+        s.drawImage(i, 0, 0), R.off("load", i, n);
       }), i.src = a;
     }
     this.draw();
@@ -1643,7 +1984,7 @@ class Ge extends u {
    * @returns {void}
    */
   noScaleResize() {
-    const e = R.getSize(container);
+    const e = W.getSize(container);
     this.width = canvas.width = e.width, this.height = canvas.height = e.height;
   }
   /**
@@ -1653,13 +1994,13 @@ class Ge extends u {
    * @returns {void}
    */
   scale() {
-    const e = this.canvas, s = this.container, a = R.getSize(s), i = this.targetSize, n = i.width, l = i.height;
-    let c = n + "px", r = l + "px";
+    const e = this.canvas, s = this.container, a = W.getSize(s), i = this.targetSize, n = i.width, l = i.height;
+    let d = n + "px", r = l + "px";
     if (this.width = e.width = n, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
-      const f = a.width, m = a.height, h = f / n, g = m / l, y = Math.min(h, g);
-      c = n * y + "px", r = l * y + "px";
+      const f = a.width, p = a.height, u = f / n, b = p / l, v = Math.min(u, b);
+      d = n * v + "px", r = l * v + "px";
     }
-    e.style.width = c, e.style.height = r;
+    e.style.width = d, e.style.height = r;
   }
   /**
    * Main drawing loop. If the mouse is down, adds a line
@@ -1733,7 +2074,7 @@ class Ge extends u {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class yt extends u {
+class Pt extends c {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1756,13 +2097,13 @@ class yt extends u {
         bind: this.path + ".data"
       }),
       o({ class: "absolute top-2 right-2" }, [
-        T({
+        M({
           variant: "icon",
-          icon: k.circleX,
+          icon: D.circleX,
           click: this.reset.bind(this)
         })
       ]),
-      new Ge({
+      new nt({
         cache: "canvasLayer",
         margin: this.margin,
         targetSize: this.targetSize,
@@ -1812,36 +2153,40 @@ class yt extends u {
   }
 }
 export {
-  ht as B,
-  ye as C,
-  ke as D,
-  be as H,
-  ft as I,
-  dt as N,
+  yt as B,
+  xe as C,
+  we as D,
+  ke as H,
+  Dt as I,
+  wt as N,
   j as O,
-  at as P,
-  rt as S,
-  B as T,
-  Re as U,
-  ot as W,
+  ft as P,
+  xt as S,
+  P as T,
+  Pe as U,
+  pt as W,
   he as a,
-  W as b,
+  O as b,
   ce as c,
-  it as d,
-  nt as e,
+  gt as d,
+  mt as e,
   fe as f,
   de as g,
-  ge as h,
+  me as h,
   pe as i,
-  H as j,
-  lt as k,
-  ct as l,
-  ut as m,
-  mt as n,
+  U as j,
+  bt as k,
+  kt as l,
+  vt as m,
+  St as n,
   Ne as o,
-  gt as p,
-  pt as q,
-  Ke as r,
-  wt as s,
-  yt as t
+  It as p,
+  Ct as q,
+  qe as r,
+  Lt as s,
+  Bt as t,
+  Tt as u,
+  it as v,
+  Mt as w,
+  Pt as x
 };