@base-framework/ui 1.1.11 → 1.1.12

package/dist/{signature-panel-Dm0Tfe2w.js → signature-panel-CwIxZG8m.js}

@@ -1,23 +1,23 @@
-import { Button as y, Div as o, On as C, Span as L, Th as N, UseParent as E, I as Q, Thead as V, Tr as G, Table as B, P as v, Li as w, Time as X, Nav as m, Ul as f, Section as I, Canvas as q } from "@base-framework/atoms";
-import { Atom as d, Component as p, Data as T, DateTime as K, router as k, NavLink as M, DataTracker as U, Jot as _, base as O, Dom as W } from "@base-framework/base";
-import { B as P, I as J } from "./buttons-Dr-bViom.js";
-import { Icons as S } from "./icons.es.js";
-import { TableBody as Z, DataTableBody as ee, ScrollableTableBody as te, List as se, IntervalTimer as ae } from "@base-framework/organisms";
-import { C as ie, I as ne, H as oe } from "./inputs-CcimrM1k.js";
-import { A as le, P as re } from "./range-calendar-BZW1R_D_.js";
+import { Button as k, Div as o, On as C, Span as I, Th as N, UseParent as Q, I as G, Thead as V, Tr as X, Table as B, P as v, Li as w, Time as q, Nav as m, Ul as f, Input as K, Section as L, Canvas as _ } from "@base-framework/atoms";
+import { Atom as c, Component as p, Data as T, DateTime as J, router as y, NavLink as M, DataTracker as U, Jot as Z, base as $, Dom as O } from "@base-framework/base";
+import { B as P, I as j } from "./buttons-Dr-bViom.js";
+import { Icons as D } from "./icons.es.js";
+import { TableBody as ee, DataTableBody as te, ScrollableTableBody as se, List as ae, IntervalTimer as ie } from "@base-framework/organisms";
+import { C as ne, I as oe, H as le } from "./inputs-CcimrM1k.js";
+import { A as re, P as ce } from "./range-calendar-BZW1R_D_.js";
 import { V as g } from "./image-BB__4s0g.js";
-d((t, e) => ({
+c((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-d(({ value: t, label: e }) => y({
+c(({ 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 mt extends p {
+class pt extends p {
   /**
    * This will declare the props for the compiler.
    *
@@ -35,55 +35,55 @@ class mt extends p {
     return o({ class: this.class || "" }, this.children);
   }
 }
-const ce = (t) => {
+const de = (t) => {
   const e = new Date(t, 11, 31), s = new Date(t, 0, 1);
   return e.getDay() === 4 || // December 31 is a Thursday
   s.getDay() === 4;
-}, de = (t) => {
+}, he = (t) => {
   const e = new Date(t.valueOf()), s = (e.getDay() + 6) % 7;
   e.setDate(e.getDate() - s + 3);
   const a = e.getFullYear(), i = new Date(a, 0, 4);
   i.setDate(i.getDate() - (i.getDay() + 6) % 7);
   const n = Math.ceil((e - i) / 6048e5) + 1;
-  return n > 52 && !ce(a) ? {
+  return n > 52 && !de(a) ? {
     weekNumber: 1,
     year: a + 1
   } : {
     weekNumber: n,
     year: a
   };
-}, he = (t, e, s) => {
+}, ue = (t, e, s) => {
   if (s === 0) return [];
   const a = new Date(t, e, 0).getDate();
   return Array.from(
     { length: s },
     (i, n) => new Date(t, e - 1, a - s + n + 1)
   );
-}, ue = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), $ = (t, e) => {
+}, fe = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), W = (t, e) => {
   const s = new Date(e, 0, 4), a = (s.getDay() + 6) % 7, i = new Date(s);
   i.setDate(s.getDate() - a);
   const n = new Date(i);
   return n.setDate(i.getDate() + (t - 1) * 7), n;
-}, pt = (t, e) => {
+}, bt = (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;
-}, bt = (t, e) => {
+}, xt = (t, e) => {
   const s = new Date(t, e + 1, 0).getDate(), a = [];
   let i = [];
   for (let n = 1; n <= s; n++)
     i.push(new Date(t, e, n)), i.length === 7 && (a.push(i), i = []);
   return i.length > 0 && a.push(i), a;
-}, fe = (t, e, s) => {
+}, ge = (t, e, s) => {
   const a = /* @__PURE__ */ new Date();
   return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
-}, ge = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
-  const n = fe(t, e, s);
-  return y({
+}, me = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
+  const n = ge(t, e, s);
+  return k({
     text: t || "",
     disabled: !t,
     class: `
@@ -93,19 +93,19 @@ const ce = (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 = he(t, e, s), n = Array.from({ length: a }, (h, x) => new Date(t, e, x + 1)), l = (i.length + n.length) % 7, c = l === 0 ? 0 : 7 - l, r = ue(t, e, c), u = [...i, ...n, ...r], b = [];
+}, pe = (t, e) => {
+  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), i = ue(t, e, s), n = Array.from({ length: a }, (h, x) => new Date(t, e, x + 1)), l = (i.length + n.length) % 7, d = l === 0 ? 0 : 7 - l, r = fe(t, e, d), u = [...i, ...n, ...r], b = [];
   for (let h = 0; h < u.length; h += 7) {
-    const x = u.slice(h, h + 7), D = x.find((Y) => Y) || new Date(t, e, 1), { weekNumber: H, year: F } = de(D);
+    const x = u.slice(h, h + 7), S = x.find((E) => E) || new Date(t, e, 1), { weekNumber: F, year: Y } = he(S);
     b.push({
-      weekNumber: H,
-      year: F,
+      weekNumber: F,
+      year: Y,
       days: x
     });
   }
   return b;
-}, pe = ({ selectWeek: t }) => C("month", (e, s, { data: a }) => {
-  const { year: i, month: n, currentDate: l } = a, c = me(i, n);
+}, be = ({ selectWeek: t }) => C("month", (e, s, { data: a }) => {
+  const { year: i, month: n, currentDate: l } = a, d = pe(i, n);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -116,11 +116,11 @@ const ce = (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) => L({ class: "px-1 py-1", text: r })
+          (r) => I({ class: "px-1 py-1", text: r })
         )
       ),
       // Render each "week" row
-      ...c.map(
+      ...d.map(
         ({ weekNumber: r, days: u, year: b }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
@@ -142,7 +142,7 @@ const ce = (t) => {
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
             u.map(
-              (h) => ge({
+              (h) => me({
                 year: h?.getFullYear() || null,
                 month: h?.getMonth() || null,
                 day: h?.getDate() || null,
@@ -166,10 +166,10 @@ const ce = (t) => {
     click: e,
     "aria-label": `${t} month`,
     variant: "icon",
-    icon: t === "Previous" ? S.chevron.single.left : S.chevron.single.right
+    icon: t === "Previous" ? D.chevron.single.left : D.chevron.single.right
   }
-), be = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
-  L("[[monthName]] [[year]]"),
+), xe = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+  I("[[monthName]] [[year]]"),
   z({
     label: "Previous",
     click: e
@@ -179,7 +179,7 @@ const ce = (t) => {
     click: t
   })
 ]);
-class xt extends p {
+class yt extends p {
   /**
    * This will declare the props for the compiler.
    *
@@ -194,7 +194,7 @@ class xt extends p {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = $(s, e.getFullYear());
+    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = W(s, e.getFullYear());
     return new T({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
@@ -232,7 +232,7 @@ class xt extends p {
    * @returns {string}
    */
   getMonthName(e) {
-    return K.monthNames[e];
+    return J.monthNames[e];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -277,7 +277,7 @@ class xt extends p {
    */
   selectWeek(e, s) {
     this.data.currentWeek = e;
-    const a = $(e, s);
+    const a = W(e, s);
     this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(e);
   }
   /**
@@ -287,38 +287,38 @@ class xt extends p {
    */
   render() {
     return o({ class: "week-calendar-container border rounded-md p-3" }, [
-      be({
+      xe({
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      pe({
+      be({
         selectWeek: (e, s) => this.selectWeek(e, s)
       })
     ]);
   }
 }
-const xe = (t, e) => {
+const ye = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
 }, ke = (t) => N({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
-  E((e) => new ie({ class: "mr-2", onChange: (s, a) => xe(e, a) }))
-]), ye = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
+  Q((e) => new ne({ class: "mr-2", onChange: (s, a) => ye(e, a) }))
+]), we = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
   return N({
     class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
     click: e && (() => i(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
-      L(a),
-      e && Q({ class: "ml-2", html: S.arrows.upDown })
+      I(a),
+      e && G({ class: "ml-2", html: D.arrows.upDown })
     ])
   ]);
 }, R = (t) => V([
-  G({
+  X({
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? ke({ toggle: t.toggle }) : ye({
+      (e) => e.label === "checkbox" ? ke({ toggle: t.toggle }) : we({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -327,17 +327,17 @@ const xe = (t, e) => {
       })
     ]
   })
-]), we = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new Z({
+]), ve = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new ee({
   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 j extends p {
+class A extends p {
   /**
    * Initializes component data.
    *
@@ -423,7 +423,7 @@ class j extends p {
           this.headers && R({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          we({
+          ve({
             // @ts-ignore
             key: this.key,
             // @ts-ignore
@@ -502,7 +502,7 @@ class j extends p {
     this.data.selectedRows = [];
   }
 }
-const ve = (t) => new ee({
+const De = (t) => new te({
   cache: "list",
   loadMoreItems: t.loadMoreItems,
   offset: t.offset,
@@ -515,7 +515,7 @@ const ve = (t) => new ee({
   skeleton: t.skeleton,
   columnCount: t.columnCount
 });
-class De extends j {
+class Se extends A {
   /**
    * Renders the DataTable component.
    *
@@ -531,7 +531,7 @@ class De extends j {
           this.headers && R({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          ve({
+          De({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -567,7 +567,7 @@ class De extends j {
     this.list.refresh();
   }
 }
-const kt = d((t) => new De(
+const kt = c((t) => new Se(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -584,7 +584,7 @@ const kt = d((t) => new De(
     emptyState: t.emptyState,
     skeleton: t.skeleton
   }
-)), Se = (t) => new te({
+)), Ce = (t) => new se({
   cache: "list",
   scrollContainer: t.scrollContainer,
   loadMoreItems: t.loadMoreItems,
@@ -598,7 +598,7 @@ const kt = d((t) => new De(
   skeleton: t.skeleton,
   columnCount: t.columnCount
 });
-class Ce extends j {
+class Ie extends A {
   /**
    * Renders the DataTable component.
    *
@@ -614,7 +614,7 @@ class Ce extends j {
           this.headers && R({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          Se({
+          Ce({
             // @ts-ignore
             scrollContainer: this.scrollContainer,
             // @ts-ignore
@@ -652,7 +652,7 @@ class Ce extends j {
     this.list.refresh();
   }
 }
-const yt = d((t) => new Ce(
+const wt = c((t) => new Ie(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -670,45 +670,45 @@ const yt = d((t) => new Ce(
     emptyState: t.emptyState,
     skeleton: t.skeleton
   }
-)), Le = d(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+)), Le = c(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
   v({ class: "text-base font-semibold leading-6 m-0" }, t),
   v({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
-])), Ie = () => o({ class: "flex items-center gap-x-1.5" }, [
+])), Be = () => 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" })
   ]),
   v({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), Be = (t) => v({ class: "text-xs leading-5 text-muted-foreground" }, [
-  L("Last seen "),
-  X({ datetime: t }, "3h ago")
-]), Te = (t, e) => t === "online" ? Ie() : Be(e), Me = d(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+]), Te = (t) => v({ class: "text-xs leading-5 text-muted-foreground" }, [
+  I("Last seen "),
+  q({ datetime: t }, "3h ago")
+]), Me = (t, e) => t === "online" ? Be() : Te(e), Pe = c(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
   v({ class: "text-sm leading-6 m-0" }, t),
-  Te(s, e)
-])), Pe = (t) => t.split(" ").map((s) => s[0]).join(""), Re = d((t) => w({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  Me(s, e)
+])), Re = (t) => t.split(" ").map((s) => s[0]).join(""), $e = c((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" }, [
-    le({ src: t.image, alt: t.name, fallbackText: Pe(t.name) }),
+    re({ src: t.image, alt: t.name, fallbackText: Re(t.name) }),
     Le({ name: t.name, email: t.email })
   ]),
-  Me({
+  Pe({
     role: t.role,
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), wt = d((t) => new se({
+])), vt = c((t) => new ae({
   cache: "list",
   key: "name",
   items: t.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: Re
-})), Oe = (t, e) => e.includes(t), We = (t, e, s) => t.exact ? s === e : Oe(e, s), $e = ({ text: t, href: e, exact: s, hidden: a }) => new M({
+  rowItem: $e
+})), Oe = (t, e) => e.includes(t), We = (t, e, s) => t.exact ? s === e : Oe(e, s), ze = ({ text: t, href: e, exact: s, hidden: a }) => new M({
   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 vt extends p {
+class Dt extends p {
   /**
    * This will declare the props for the compiler.
    *
@@ -736,7 +736,7 @@ class vt extends p {
           class: "flex gap-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
-            value: ["[[path]]", k.data],
+            value: ["[[path]]", y.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -749,7 +749,7 @@ class vt extends p {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
+    const e = y.data.path;
     this.updateLinks(e);
   }
   /**
@@ -794,7 +794,7 @@ class vt extends p {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a, hidden: i }) {
-    const n = $e({ text: e, href: s, exact: a, hidden: i });
+    const n = ze({ text: e, href: s, exact: a, hidden: i });
     return this.links.push(n), n;
   }
   /**
@@ -806,13 +806,13 @@ class vt extends p {
     this.links = [];
   }
 }
-const Dt = d((t) => {
+const St = c((t) => {
   const e = t.margin || "m-4 ml-0";
   return t.allowHistory = t.allowHistory === !0, o({ class: `flex-none ${e}` }, [
     P({ variant: "back", class: "ghost", ...t })
   ]);
 });
-class A extends p {
+class H extends p {
   /**
    * This will declare the props for the compiler.
    *
@@ -909,7 +909,7 @@ U.addType("dockableOverlay", (t) => {
   const e = t.component;
   e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
 });
-class St extends A {
+class Ct extends H {
   /**
    * This will stop presistence.
    *
@@ -1010,7 +1010,7 @@ class St extends A {
     this.state.docked = this.canDock();
   }
 }
-class Ct extends A {
+class It extends H {
   /**
    * This will get the overlay type.
    *
@@ -1029,7 +1029,7 @@ class Ct extends A {
     this.container = e, this.initialize();
   }
 }
-const ze = d(({ index: t, click: e, state: s }, a) => w({
+const Ne = c(({ index: t, click: e, state: s }, a) => w({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -1038,11 +1038,11 @@ const ze = d(({ index: t, click: e, state: s }, a) => w({
     }]
   ],
   click: () => e(t)
-}, a)), Ne = d(({ selectOption: t, state: e }) => f({
+}, a)), Ue = c(({ selectOption: t, state: e }) => f({
   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)]
-})), Ue = d((t) => o({ class: "relative flex flex-auto items-center" }, [
-  ne({
+  for: ["filteredOptions", (s, a) => Ne({ index: a, click: t, state: e }, s.label)]
+})), je = c((t) => o({ class: "relative flex flex-auto items-center" }, [
+  oe({
     cache: "input",
     class: t.class ?? "",
     placeholder: t.placeholder ?? "Search...",
@@ -1058,22 +1058,22 @@ const ze = d(({ index: t, click: e, state: s }, a) => w({
     ]
   }),
   t.icon && o({ class: "absolute flex right-0 mr-2" }, [
-    J(t.icon)
+    j(t.icon)
   ])
-])), je = (t) => o({
+])), Ae = (t) => o({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (e, s, a) => {
     if (e)
-      return new re({
+      return new ce({
         cache: "dropdown",
         parent: a,
         button: a.input,
         size: "xl"
       }, [
-        Ne(t)
+        Ue(t)
       ]);
   }]
-}), Lt = _(
+}), Lt = Z(
   {
     /**
      * This will set up the data object.
@@ -1170,7 +1170,7 @@ const ze = d(({ index: t, click: e, state: s }, a) => w({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        Ue({
+        je({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1182,7 +1182,7 @@ const ze = d(({ index: t, click: e, state: s }, a) => w({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        je({
+        Ae({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1193,22 +1193,45 @@ const ze = d(({ index: t, click: e, state: s }, a) => w({
       ]);
     }
   }
-), Ae = (t) => w(
+), Bt = c((t) => {
+  const e = t.icon ?? D.magnifyingGlass.default;
+  return o({
+    class: `relative flex items-center w-full rounded-full bg-muted/50 border border-border focus-within:ring-2 focus-within:ring-ring focus-within:border-transparent transition-all ${t.containerClass || ""}`
+  }, [
+    o({ class: "absolute left-3 flex items-center pointer-events-none text-muted-foreground" }, [
+      j({ size: "md" }, e)
+    ]),
+    K({
+      type: "text",
+      cache: t.cache ?? "input",
+      class: `w-full bg-transparent border-none outline-none pl-10 pr-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-0 ${t.class || ""}`,
+      placeholder: t.placeholder ?? "Search...",
+      bind: t.bind,
+      value: t.value,
+      keyup: t.keyup,
+      keydown: t.keydown,
+      input: t.input,
+      change: t.change,
+      focus: t.focus,
+      blur: t.blur
+    })
+  ]);
+}), He = (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",
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    y({
+    k({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), He = (t, e) => (t.callBack = e, Ae(t)), Fe = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  f({ class: "flex flex-auto flex-row", map: [t.options, (e) => He(e, t.callBack)] })
+), Fe = (t, e) => (t.callBack = e, He(t)), Ye = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  f({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
 ]);
-class It extends g {
+class Tt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1225,12 +1248,12 @@ class It extends g {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      Fe({
+      Ye({
         class: this.class,
         options: this.options,
         callBack: e
       }),
-      I({
+      L({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1297,23 +1320,23 @@ class It extends g {
     };
   }
 }
-const Ye = (t) => w(
+const Ee = (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",
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    y({
+    k({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
       disabled: t.disabled
     }, t.label)
   ]
-), Ee = (t, e) => (t.callBack = e, Ye(t)), Qe = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  f({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ee(e, t.callBack)] })
+), Qe = (t, e) => (t.callBack = e, Ee(t)), Ge = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  f({ class: "flex flex-auto flex-row", map: [t.options, (e) => Qe(e, t.callBack)] })
 ]);
-class Bt extends g {
+class Mt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1329,7 +1352,7 @@ class Bt extends g {
    */
   render() {
     const e = this.select.bind(this);
-    return Qe({
+    return Ge({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1355,17 +1378,17 @@ class Bt extends g {
     };
   }
 }
-const Ve = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ge = (t, e) => {
+const Ve = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Xe = (t, e) => {
   const s = t.getLinkPath();
   return t.exact ? e === s : Ve(s, e);
-}, Xe = ({ text: t, href: e, exact: s }) => new M({
+}, qe = ({ text: t, href: e, exact: s }) => new M({
   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 qe extends g {
+class Ke extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1391,7 +1414,7 @@ class qe extends g {
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", k.data],
+          value: ["[[path]]", y.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1403,7 +1426,7 @@ class qe extends g {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
+    const e = y.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1416,7 +1439,7 @@ class qe extends g {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
     for (const i of this.links)
-      if (i.rendered !== !1 && (s = Ge(i, e), s === !0)) {
+      if (i.rendered !== !1 && (s = Xe(i, e), s === !0)) {
         this.updateLink(i, !0);
         break;
       }
@@ -1448,7 +1471,7 @@ class qe extends g {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a }) {
-    const i = Xe({ text: e, href: s, exact: a });
+    const i = qe({ text: e, href: s, exact: a });
     return this.links.push(i), i;
   }
   /**
@@ -1460,7 +1483,7 @@ class qe extends g {
     this.links = [];
   }
 }
-class Tt extends g {
+class Pt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1476,11 +1499,11 @@ class Tt extends g {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new qe({
+      new Ke({
         class: this.class,
         options: this.options
       }),
-      I({
+      L({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1506,22 +1529,22 @@ class Tt extends g {
     return s;
   }
 }
-const Ke = (t) => w(
+const _e = (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",
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    y({
+    k({
       class: "flex flex-auto justify-center items-center px-4 py-3 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), _e = (t, e) => (t.callBack = e, Ke(t)), Je = (t) => m({ class: `border-b border-border ${t.class}` }, [
-  f({ class: "flex flex-row items-center", map: [t.options, (e) => _e(e, t.callBack)] })
+), Je = (t, e) => (t.callBack = e, _e(t)), Ze = (t) => m({ class: `border-b border-border ${t.class}` }, [
+  f({ class: "flex flex-row items-center", map: [t.options, (e) => Je(e, t.callBack)] })
 ]);
-class Mt extends g {
+class Rt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1538,12 +1561,12 @@ class Mt extends g {
   render() {
     const e = this.select.bind(this);
     return o({ class: "underlined-button-tab-panel flex flex-auto flex-col" }, [
-      Je({
+      Ze({
         class: this.class,
         options: this.options,
         callBack: e
       }),
-      I({
+      L({
         class: "tab-content pt-6 flex flex-auto flex-col",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1601,23 +1624,23 @@ class Mt extends g {
     };
   }
 }
-const Ze = (t) => w(
+const et = (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",
     dataStateSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    y({
+    k({
       class: "flex flex-auto justify-center items-center px-4 py-3 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
       onState: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
       disabled: t.disabled
     }, t.label)
   ]
-), et = (t, e) => (t.callBack = e, Ze(t)), tt = (t) => m({ class: `border-b border-border ${t.class}` }, [
-  f({ class: "flex flex-row items-center", map: [t.options, (e) => et(e, t.callBack)] })
+), tt = (t, e) => (t.callBack = e, et(t)), st = (t) => m({ class: `border-b border-border ${t.class}` }, [
+  f({ class: "flex flex-row items-center", map: [t.options, (e) => tt(e, t.callBack)] })
 ]);
-class Pt extends g {
+class $t extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1633,7 +1656,7 @@ class Pt extends g {
    */
   render() {
     const e = this.select.bind(this);
-    return tt({
+    return st({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1659,17 +1682,17 @@ class Pt extends g {
     };
   }
 }
-const st = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), at = (t, e) => {
+const at = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), it = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : st(s, e);
-}, it = ({ text: t, href: e, exact: s }) => new M({
+  return t.exact ? e === s : at(s, e);
+}, nt = ({ text: t, href: e, exact: s }) => new M({
   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 nt extends g {
+class ot extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1695,7 +1718,7 @@ class nt extends g {
         class: "flex flex-row items-center",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", k.data],
+          value: ["[[path]]", y.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1707,7 +1730,7 @@ class nt extends g {
    * @returns {void}
    */
   afterSetup() {
-    const e = k.data.path;
+    const e = y.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1720,7 +1743,7 @@ class nt extends g {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
     for (const i of this.links)
-      if (i.rendered !== !1 && (s = at(i, e), s === !0)) {
+      if (i.rendered !== !1 && (s = it(i, e), s === !0)) {
         this.updateLink(i, !0);
         break;
       }
@@ -1752,7 +1775,7 @@ class nt extends g {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a }) {
-    const i = it({ text: e, href: s, exact: a });
+    const i = nt({ text: e, href: s, exact: a });
     return this.links.push(i), i;
   }
   /**
@@ -1764,7 +1787,7 @@ class nt extends g {
     this.links = [];
   }
 }
-class Rt extends g {
+class Ot extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1780,11 +1803,11 @@ class Rt extends g {
    */
   render() {
     return o({ class: "underlined-tab-panel flex flex-auto flex-col" }, [
-      new nt({
+      new ot({
         class: this.class,
         options: this.options
       }),
-      I({
+      L({
         class: "tab-content pt-6 flex flex-auto flex-col",
         switch: this.addGroup()
       })
@@ -1810,7 +1833,7 @@ class Rt extends g {
     return s;
   }
 }
-class ot extends p {
+class lt extends p {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1820,7 +1843,7 @@ class ot extends p {
   onCreated() {
     this.lineWidth = this.lineWidth || 3, this.lineColor = this.lineColor || "#000000", this.canvas = null, this.ctx = null, this.status = "stopped";
     const e = 1e3 / 60;
-    this.timer = new ae(e, this.draw.bind(this)), this.width = 0, this.height = 0, this.signed = !1, this.mouse = { x: 0, y: 0, status: "up" }, this.margin = this.margin || { x: 40, y: 60 }, this.targetSize = this.targetSize || { width: 740, height: 345 }, this.baseLineWidth = this.baseLineWidth || 2, this.baseStrokeColor = this.baseStrokeColor || "#000000";
+    this.timer = new ie(e, this.draw.bind(this)), this.width = 0, this.height = 0, this.signed = !1, this.mouse = { x: 0, y: 0, status: "up" }, this.margin = this.margin || { x: 40, y: 60 }, this.targetSize = this.targetSize || { width: 740, height: 345 }, this.baseLineWidth = this.baseLineWidth || 2, this.baseStrokeColor = this.baseStrokeColor || "#000000";
   }
   /**
    * Renders a <canvas> element.
@@ -1828,7 +1851,7 @@ class ot extends p {
    * @returns {object} Layout definition for the canvas.
    */
   render() {
-    return q({
+    return _({
       style: "touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;"
     });
   }
@@ -1881,8 +1904,8 @@ class ot extends p {
       s = u.clientX, a = u.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.
@@ -1925,8 +1948,8 @@ class ot extends p {
     const { canvas: e, ctx: s } = this, a = e.toDataURL();
     if (this.scale(), this.setupBackground(s), a !== "data:,") {
       const i = new globalThis.Image();
-      O.on("load", i, function n() {
-        s.drawImage(i, 0, 0), O.off("load", i, n);
+      $.on("load", i, function n() {
+        s.drawImage(i, 0, 0), $.off("load", i, n);
       }), i.src = a;
     }
     this.draw();
@@ -1946,7 +1969,7 @@ class ot extends p {
    * @returns {void}
    */
   noScaleResize() {
-    const e = W.getSize(container);
+    const e = O.getSize(container);
     this.width = canvas.width = e.width, this.height = canvas.height = e.height;
   }
   /**
@@ -1956,13 +1979,13 @@ class ot extends p {
    * @returns {void}
    */
   scale() {
-    const e = this.canvas, s = this.container, a = W.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 = O.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 u = a.width, b = a.height, h = u / n, x = b / l, D = Math.min(h, x);
-      c = n * D + "px", r = l * D + "px";
+      const u = a.width, b = a.height, h = u / n, x = b / l, S = Math.min(h, x);
+      d = n * S + "px", r = l * S + "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
@@ -2036,7 +2059,7 @@ class ot extends p {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class Ot extends p {
+class Wt extends p {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -2053,7 +2076,7 @@ class Ot extends p {
    */
   render() {
     return o({ class: "signature-panel relative flex flex-auto overflow-hidden select-none" }, [
-      oe({
+      le({
         cache: "hiddenInput",
         required: !0,
         bind: this.path + ".data"
@@ -2061,11 +2084,11 @@ class Ot extends p {
       o({ class: "absolute top-2 right-2" }, [
         P({
           variant: "icon",
-          icon: S.circleX,
+          icon: D.circleX,
           click: this.reset.bind(this)
         })
       ]),
-      new ot({
+      new lt({
         cache: "canvasLayer",
         margin: this.margin,
         targetSize: this.targetSize,
@@ -2123,40 +2146,41 @@ class Ot extends p {
   }
 }
 export {
-  Dt as B,
+  St as B,
   ke as C,
-  j as D,
-  ye as H,
-  Ct as I,
-  vt as N,
-  A as O,
-  mt as P,
-  yt as S,
-  Tt as T,
-  Mt as U,
-  xt as W,
-  It as a,
-  we as b,
-  St as c,
+  A as D,
+  we as H,
+  It as I,
+  Dt as N,
+  H as O,
+  pt as P,
+  wt as S,
+  Pt as T,
+  Rt as U,
+  yt as W,
+  Tt as a,
+  ve as b,
+  Ct as c,
   kt as d,
   Lt as e,
-  Ue as f,
-  Ot as g,
+  je as f,
+  Wt as g,
   Bt as h,
-  qe as i,
-  R as j,
-  Rt as k,
-  Pt as l,
-  nt as m,
-  wt as n,
-  Re as o,
-  ge as p,
-  pe as q,
+  Mt as i,
+  Ke as j,
+  R as k,
+  Ot as l,
+  $t as m,
+  ot as n,
+  vt as o,
+  $e as p,
+  me as q,
   be as r,
-  de as s,
-  pt as t,
-  $ as u,
-  bt as v,
-  ue as w,
-  he as x
+  xe as s,
+  he as t,
+  bt as u,
+  W as v,
+  xt as w,
+  fe as x,
+  ue as y
 };