@base-framework/ui 1.0.1 → 1.0.2

package/dist/index.es.js

@@ -5,7 +5,7 @@ import { V as w, a as U } from "./veil-DSQdR6CM.js";
 import { Icons as R } from "./icons.es.js";
 import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ca, p as Ta, q as ca, S as Da, n as Ia, o as Sa, T as ba, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-BqQwYCFz.js";
 import { A as Na, b as va, C as fa, D as xa, a as ha, F as ya, M as Wa, P as La, c as Aa, g as Ha, p as wa } from "./calendar-B5TK6tLi.js";
-import { B as Oa, m as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, q as Xa, p as Ya, n as Za, o as $a, T as as, k as ss, U as es, W as os, f as ts, h as rs, i as ns, c as is, d as ls, b as ps, e as us, a as ms, g as ds } from "./signature-CvAlydRI.js";
+import { B as Oa, m as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, q as Xa, p as Ya, n as Za, o as $a, T as as, k as ss, U as es, W as os, f as ts, h as rs, i as ns, c as is, d as ls, b as ps, e as us, a as ms, g as ds } from "./signature-DA-Z0xoX.js";
 import { B as Cs, I as Ts, M as cs, d as Ds, e as Is, g as Ss, N as bs, b as Bs, a as Ps, f as Fs, P as Ms, c as ks, S as Ns, T as vs } from "./mobile-nav-wrapper-CguousG5.js";
 import { B as xs, a as hs, C as ys, F as Ws, b as Ls, c as As, M as Hs, P as ws, S as Us } from "./sidebar-menu-page-22AUZwFc.js";
 import { A as Rs, F as Es, M as Gs, a as Vs, T as js } from "./aside-template-D0KANPjh.js";

package/dist/organisms.es.js

@@ -1,4 +1,4 @@
-import { B as s, m as o, C as t, j as r, D as n, l, H as i, I as d, N as b, O as v, P as g, S as p, q as u, p as N, n as k, o as C, T as D, k as M, U as T, W as c, f as B, h as m, i as y, c as W, d as h, b as H, e as P, a as S, g as f } from "./signature-CvAlydRI.js";
+import { B as s, m as o, C as t, j as r, D as n, l, H as i, I as d, N as b, O as v, P as g, S as p, q as u, p as N, n as k, o as C, T as D, k as M, U as T, W as c, f as B, h as m, i as y, c as W, d as h, b as H, e as P, a as S, g as f } from "./signature-DA-Z0xoX.js";
 import { b as I, C as L, D as O, a as F, F as U, M as G, c as j, p as q } from "./calendar-B5TK6tLi.js";
 import { B as z, I as A, M as E, d as J, e as K, g as Q, N as R, b as V, a as X, f as Y, P as Z, c as _, S as $, T as aa } from "./mobile-nav-wrapper-CguousG5.js";
 export {

package/dist/{signature-CvAlydRI.js → signature-DA-Z0xoX.js}

@@ -14,7 +14,7 @@ u(({ value: t, label: e }) => v({
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-md px-8 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
   onState: ["performance", { active: t }],
   dataSet: ["performance", ["state", t, "active"]],
-  click: (s, { state: a }) => a.performance = t
+  click: (s, { state: n }) => n.performance = t
 }, e));
 class Ke extends g {
   /**
@@ -38,49 +38,49 @@ 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
   s.getDay() === 4;
-}, ae = (t) => {
+}, ne = (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);
-  n.setDate(n.getDate() - (n.getDay() + 6) % 7);
-  const i = Math.ceil((e - n) / 6048e5) + 1;
-  return i > 52 && !se(a) ? {
+  const n = e.getFullYear(), a = new Date(n, 0, 4);
+  a.setDate(a.getDate() - (a.getDay() + 6) % 7);
+  const i = Math.ceil((e - a) / 6048e5) + 1;
+  return i > 52 && !se(n) ? {
     weekNumber: 1,
-    year: a + 1
+    year: n + 1
   } : {
     weekNumber: i,
-    year: a
+    year: n
   };
-}, ne = (t, e, s) => {
+}, ae = (t, e, s) => {
   if (s === 0) return [];
-  const a = new Date(t, e, 0).getDate();
+  const n = new Date(t, e, 0).getDate();
   return Array.from(
     { length: s },
-    (n, i) => new Date(t, e - 1, a - s + i + 1)
+    (a, i) => new Date(t, e - 1, n - 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);
-  n.setDate(s.getDate() - a);
-  const i = new Date(n);
-  return i.setDate(n.getDate() + (t - 1) * 7), i;
+}, ie = (t, e, s) => Array.from({ length: s }, (n, a) => new Date(t, e + 1, a + 1)), T = (t, e) => {
+  const s = new Date(e, 0, 4), n = (s.getDay() + 6) % 7, a = new Date(s);
+  a.setDate(s.getDate() - n);
+  const i = new Date(a);
+  return i.setDate(a.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 = [];
+  const s = new Date(t, e, 1).getDay(), n = new Date(t, e + 1, 0).getDate(), a = [];
   let i = [];
-  for (let l = 1 - s; l <= a; l++) {
+  for (let l = 1 - s; l <= n; l++) {
     const d = new Date(t, e, l);
-    i.push(l > 0 ? d : null), (i.length === 7 || l === a) && (n.push([...i]), i = []);
+    i.push(l > 0 ? d : null), (i.length === 7 || l === n) && (a.push([...i]), i = []);
   }
-  return n;
+  return a;
 }, Ge = (t, e) => {
-  const s = new Date(t, e + 1, 0).getDate(), a = [];
-  let n = [];
+  const s = new Date(t, e + 1, 0).getDate(), n = [];
+  let a = [];
   for (let i = 1; i <= s; i++)
-    n.push(new Date(t, e, i)), n.length === 7 && (a.push(n), n = []);
-  return n.length > 0 && a.push(n), a;
+    a.push(new Date(t, e, i)), a.length === 7 && (n.push(a), a = []);
+  return a.length > 0 && n.push(a), n;
 }, oe = (t, e, 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 n = /* @__PURE__ */ new Date();
+  return n.getDate() === t && n.getMonth() === e && n.getFullYear() === s;
+}, le = ({ day: t, month: e, year: s, weekNumber: n, selectWeek: a }) => {
   const i = oe(t, e, s);
   return v({
     text: t || "",
@@ -90,12 +90,12 @@ const se = (t) => {
             ${i ? "bg-accent text-accent-foreground" : ""}
             hover:bg-primary hover:text-primary-foreground
         `,
-    click: () => n(a, s)
+    click: () => a(n, 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 = [];
+  const s = new Date(t, e, 1).getDay(), n = new Date(t, e + 1, 0).getDate(), a = ae(t, e, s), i = Array.from({ length: n }, (r, p) => new Date(t, e, p + 1)), l = (a.length + i.length) % 7, d = l === 0 ? 0 : 7 - l, c = ie(t, e, d), h = [...a, ...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(t, e, 1), { weekNumber: $, year: A } = ne(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);
+}, ce = ({ selectWeek: t }) => U("month", (e, s, { data: n }) => {
+  const { year: a, month: i, currentDate: l } = n, d = re(a, i);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -195,12 +195,12 @@ class Ve extends g {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = T(s, e.getFullYear());
+    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), n = T(s, e.getFullYear());
     return new L({
-      monthName: this.getMonthName(a.getMonth()),
-      year: a.getFullYear(),
-      month: a.getMonth(),
-      currentDate: a.getDate(),
+      monthName: this.getMonthName(n.getMonth()),
+      year: n.getFullYear(),
+      month: n.getMonth(),
+      currentDate: n.getDate(),
       currentWeek: s
     });
   }
@@ -221,10 +221,10 @@ class Ve extends g {
    * @returns {number}
    */
   calculateCurrentWeek(e) {
-    const s = new Date(e.valueOf()), a = (e.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);
+    const s = new Date(e.valueOf()), n = (e.getDay() + 6) % 7;
+    s.setDate(s.getDate() - n + 3);
+    const a = s.valueOf();
+    return s.setMonth(0, 1), s.getDay() !== 4 && s.setMonth(0, 1 + (4 - s.getDay() + 7) % 7), 1 + Math.ceil((a - s) / 6048e5);
   }
   /**
    * Gets the name of the month.
@@ -242,8 +242,8 @@ class Ve extends g {
    */
   goToPreviousMonth() {
     const e = this.data;
-    let { year: s, month: a } = e;
-    a === 0 ? (a = 11, s--) : a--, this.setDate(a, s);
+    let { year: s, month: n } = e;
+    n === 0 ? (n = 11, s--) : n--, this.setDate(n, s);
   }
   /**
    * Updates the calendar to show the next month.
@@ -252,8 +252,8 @@ class Ve extends g {
    */
   goToNextMonth() {
     const e = this.data;
-    let { year: s, month: a } = e;
-    a === 11 ? (a = 0, s++) : a++, this.setDate(a, s);
+    let { year: s, month: n } = e;
+    n === 11 ? (n = 0, s++) : n++, this.setDate(n, s);
   }
   /**
    * Sets the selected date.
@@ -263,12 +263,12 @@ class Ve extends g {
    * @param {number|null} [date=null]
    * @returns {void}
    */
-  setDate(e, s, a) {
+  setDate(e, s, n) {
     this.data.set({
       year: s,
       month: e,
       monthName: this.getMonthName(e)
-    }), a && (this.data.currentDate = a);
+    }), n && (this.data.currentDate = n);
   }
   /**
    * Handles week selection.
@@ -278,8 +278,8 @@ class Ve extends g {
    */
   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);
+    const n = T(e, s);
+    this.setDate(n.getMonth(), n.getFullYear(), n.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(e);
   }
   /**
    * Renders the WeekCalendar component.
@@ -300,14 +300,14 @@ class Ve extends g {
 }
 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 }) => {
+]), ue = ({ align: t, sortable: e, key: s, label: n, sort: a, class: i }) => {
   const l = t || "justify-start";
   return O({
     class: `cursor-pointer py-3 px-4 text-base ${i || ""}`,
-    click: e && (() => n(s))
+    click: e && (() => a(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
-      y(a),
+      y(n),
       e && E({ class: "ml-2", html: w.arrows.upDown })
     ])
   ]);
@@ -322,11 +322,11 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
       sort: t.sort
     })]
   })
-]), fe = ({ key: t, rows: e, selectRow: s, rowItem: a }) => new K({
+]), fe = ({ key: t, rows: e, selectRow: s, rowItem: n }) => new K({
   cache: "table",
   key: t,
   items: e,
-  rowItem: (n) => a(n, s),
+  rowItem: (a) => n(a, s),
   class: "divide-y divide-border"
 }), Je = R(
   {
@@ -386,8 +386,8 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
     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);
-      this.data.selectedRows = a, this.updateSelected();
+      const s = this.data.get("selectedRows"), n = t.selected ? [...s, t] : s.filter((a) => a !== t);
+      this.data.selectedRows = n, this.updateSelected();
     },
     /**
      * Renders the DataTable component.
@@ -507,12 +507,12 @@ const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
   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({
+})), 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: n }) => 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: `${n ? "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 {
   /**
@@ -567,10 +567,10 @@ class et extends g {
   updateLinks(e) {
     let s = !1;
     this.deactivateAllLinks();
-    for (const a of this.links) {
-      if (!a.rendered)
+    for (const n of this.links) {
+      if (!n.rendered)
         continue;
-      De(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      De(n, n.getLinkPath(), e) ? (this.updateLink(n, !0), s = !0) : this.updateLink(n, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -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: e, href: s, exact: n, hidden: a }) {
+    const i = Se({ text: e, href: s, exact: n, hidden: a });
     return this.links.push(i), i;
   }
   /**
@@ -739,8 +739,8 @@ class st extends N {
           ["loading", {
             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");
+          ["docked", (s, n) => {
+            s ? (n.className = this.getDockedClassName(), e.appendChild(n), document.documentElement.style.overflowY = "auto") : (n.className = this.getClassName(), app.root.appendChild(n), document.documentElement.style.overflowY = "hidden");
           }]
         ]
       },
@@ -820,7 +820,7 @@ class st extends N {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class at extends N {
+class nt extends N {
   /**
    * This will get the overlay type.
    *
@@ -839,7 +839,7 @@ class at extends N {
     this.container = e, this.initialize();
   }
 }
-const Le = u(({ index: t, click: e, state: s }, a) => D({
+const Le = u(({ index: t, click: e, state: s }, n) => D({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -848,9 +848,9 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
     }]
   ],
   pointerdown: () => e(t)
-}, a)), Ce = u(({ selectOption: t, state: e }) => b({
+}, n)), Ce = u(({ selectOption: t, state: e }) => 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)]
+  for: ["filteredOptions", (s, n) => Le({ index: n, click: t, state: e }, s.label)]
 })), Be = 100, Ie = u((t) => o({ class: "relative flex items-center" }, [
   J({
     cache: "input",
@@ -868,18 +868,18 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
   ])
 ])), Te = (t) => o({
   class: "relative flex fle-auto flex-col",
-  onState: ["open", (e, s, a) => {
+  onState: ["open", (e, s, n) => {
     if (e)
       return new te({
         cache: "dropdown",
-        parent: a,
-        button: a.input,
+        parent: n,
+        button: n.input,
         size: "xl"
       }, [
         Ce(t)
       ]);
   }]
-}), nt = R(
+}), at = R(
   {
     /**
      * This will set up the data object.
@@ -914,7 +914,7 @@ const Le = u(({ index: t, click: e, state: s }, a) => D({
       const t = this.data.filteredOptions;
       let { searchQuery: e } = this.state;
       e = e.toLowerCase();
-      const s = t.findIndex((a) => a.label.toLowerCase() === e);
+      const s = t.findIndex((n) => n.label.toLowerCase() === e);
       s >= 0 && (this.state.selectedIndex = s);
     },
     /**
@@ -1079,11 +1079,11 @@ class it extends g {
     const s = this.options;
     if (!s || s.length < 1)
       return;
-    const a = s[0];
-    for (const n of s)
-      if (n.value === e)
-        return n.layout;
-    return a.layout;
+    const n = s[0];
+    for (const a of s)
+      if (a.value === e)
+        return a.layout;
+    return n.layout;
   }
   /**
    * This will setup the states.
@@ -1095,8 +1095,8 @@ class it extends g {
     return {
       selected: {
         state: this.getFirstValue(),
-        callBack(a) {
-          s === "function" && e(a);
+        callBack(n) {
+          s === "function" && e(n);
         }
       }
     };
@@ -1219,14 +1219,14 @@ class je extends g {
    * @returns {void}
    */
   updateLinks(e) {
-    let s = !1, a = this.links[0];
+    let s = !1, n = this.links[0];
     this.deactivateAllLinks();
-    for (const n of this.links)
-      if (n.rendered !== !1 && (s = $e(n, e), s === !0)) {
-        this.updateLink(n, !0);
+    for (const a of this.links)
+      if (a.rendered !== !1 && (s = $e(a, e), s === !0)) {
+        this.updateLink(a, !0);
         break;
       }
-    s !== !0 && a && this.updateLink(a, !0);
+    s !== !0 && n && this.updateLink(n, !0);
   }
   /**
       * This will deactivate all links.
@@ -1253,9 +1253,9 @@ 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 });
-    return this.links.push(n), n;
+  addLink({ label: e, href: s, exact: n }) {
+    const a = Ae({ text: e, href: s, exact: n });
+    return this.links.push(a), a;
   }
   /**
    * This will remove all the links.
@@ -1299,9 +1299,9 @@ class lt extends g {
    */
   addGroup() {
     let e;
-    const s = [], a = this.options;
-    for (let n = 0, i = a.length; n < i; n++)
-      e = a[n], s.push(
+    const s = [], n = this.options;
+    for (let a = 0, i = n.length; a < i; a++)
+      e = n[a], s.push(
         {
           uri: e.uri || e.href,
           component: e.component,
@@ -1320,7 +1320,7 @@ class Ue extends g {
    * @returns {void}
    */
   onCreated() {
-    this.lineWidth = this.lineWidth || 3, this.lineColor = this.lineColor || "#000000", this.canvas = null, this.ctx = null, this.status = "stopped";
+    console.log(this), 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";
   }
@@ -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 e = this.panel, s = this.pointerPosition.bind(this), n = this.pointerUp.bind(this), a = this.pointerDown.bind(this), i = this.resize.bind(this);
     return [
       ["pointermove", e, s],
-      ["pointerup", e, a],
-      ["pointerdown", e, n],
-      ["pointerout", e, a],
+      ["pointerup", e, n],
+      ["pointerdown", e, a],
+      ["pointerout", e, n],
       ["resize", window, i]
     ];
   }
@@ -1376,14 +1376,14 @@ class Ue extends g {
    * @returns {void}
    */
   getEventPosition(e) {
-    let s, a;
-    const n = this.canvas, i = n.width / parseInt(n.style.width), l = n.getBoundingClientRect();
+    let s, n;
+    const a = this.canvas, i = a.width / parseInt(a.style.width), l = a.getBoundingClientRect();
     if (e.touches && e.touches.length) {
       const h = e.touches[0];
-      s = h.clientX, a = h.clientY;
+      s = h.clientX, n = h.clientY;
     } else
-      s = e.x || e.clientX, a = e.y || e.clientY;
-    const d = parseInt((s - l.left) * i), c = parseInt((a - l.top) * i);
+      s = e.x || e.clientX, n = e.y || e.clientY;
+    const d = parseInt((s - l.left) * i), c = parseInt((n - l.top) * i);
     this.mouse.x = d, this.mouse.y = c;
   }
   /**
@@ -1395,8 +1395,8 @@ class Ue extends g {
    */
   pointerDown(e) {
     e.preventDefault(), this.getEventPosition(e);
-    const { ctx: s, mouse: a } = this;
-    s.beginPath(), s.moveTo(a.x, a.y), a.status = "down", this.startTimer();
+    const { ctx: s, mouse: n } = this;
+    s.beginPath(), s.moveTo(n.x, n.y), n.status = "down", this.startTimer();
   }
   /**
    * Called when the pointer goes up or leaves the canvas area.
@@ -1424,12 +1424,12 @@ class Ue extends g {
    * @returns {void}
    */
   resize() {
-    const { canvas: e, ctx: s } = this, a = e.toDataURL();
-    if (this.scale(), this.setupBackground(s), a !== "data:,") {
-      const n = new window.Image();
-      B.on("load", n, function i() {
-        s.drawImage(n, 0, 0), B.off("load", n, i);
-      }), n.src = a;
+    const { canvas: e, ctx: s } = this, n = e.toDataURL();
+    if (this.scale(), this.setupBackground(s), n !== "data:,") {
+      const a = new window.Image();
+      B.on("load", a, function i() {
+        s.drawImage(a, 0, 0), B.off("load", a, i);
+      }), a.src = n;
     }
     this.draw();
   }
@@ -1458,10 +1458,10 @@ 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 e = this.canvas, s = this.container, n = I.getSize(s), a = this.targetSize, i = a.width, l = a.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) {
-      const h = a.width, f = a.height, r = h / i, p = f / l, x = Math.min(r, p);
+    if (this.width = e.width = i, this.height = e.height = l, n.width !== 0 && n.height !== 0) {
+      const h = n.width, f = n.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;
@@ -1484,8 +1484,8 @@ class Ue extends g {
   drawBottomLine(e) {
     const s = this.canvas;
     e.globalAlpha = 1, e.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();
+    const n = this.margin.x, a = this.height - this.margin.y;
+    e.beginPath(), e.moveTo(n, a), e.lineTo(s.width - this.margin.x, a), e.lineWidth = this.baseLineWidth, e.strokeStyle = this.baseStrokeColor, e.stroke(), e.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(e, s, n, a) {
     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();
+    const i = Math.round(s), l = Math.round(n);
+    e.lineWidth = this.lineWidth, e.strokeStyle = a, e.lineTo(i, l), e.stroke();
   }
   /**
    * Clears the canvas, sets signed to false, and re-initializes
@@ -1545,7 +1545,7 @@ class rt extends g {
    * @returns {void}
    */
   setupProps() {
-    this.data = null, this.lineColor = null, this.lineWidth = null, this.baseLineWidth = null, this.baseStrokeColor = null, this.margin = null, this.targetSize = null, this.callBackData = null, this.pointerUp = null, this.path = null, this.canvasLayer = null;
+    console.log(this), this.data = null, this.lineColor = null, this.lineWidth = null, this.baseLineWidth = null, this.baseStrokeColor = null, this.margin = null, this.targetSize = null, this.callBackData = null, this.pointerUp = null, this.path = null, this.canvasLayer = null;
   }
   /**
    * Renders the main layout for the signature panel,
@@ -1554,7 +1554,7 @@ class rt extends g {
    * @returns {object} The layout object for the component.
    */
   render() {
-    return o({ class: "signature-panel relative flex flex-auto" }, [
+    return console.log(this), o({ class: "signature-panel relative flex flex-auto" }, [
       Z({
         cache: "hiddenInput",
         required: !0,
@@ -1621,21 +1621,21 @@ export {
   he as C,
   fe as D,
   ue as H,
-  at as I,
+  nt as I,
   et as N,
   N as O,
   Ke as P,
-  nt as S,
+  at as S,
   ge as T,
   ve as U,
   Ve as W,
   ie as a,
   T as b,
-  ae as c,
+  ne as c,
   _e as d,
   Ge as e,
   le as f,
-  ne as g,
+  ae as g,
   ce as h,
   de as i,
   Je as j,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {