@base-framework/ui 1.1.21 → 1.1.22

package/dist/atoms.es.js

@@ -1,6 +1,6 @@
-import { B as e, C as t, a as o, F as n, b as r, L as p, P as I, R as i, S as u, T as l } from "./tooltip-BmvjA9XQ.js";
+import { B as e, C as t, a as o, F as n, b as r, L as p, P as I, R as i, S as u, T as l } from "./tooltip-C8OUlZKV.js";
 import { B as m, I as c, L as T, M as g, U as x, i as B, a as C } from "./buttons-BY-KDbOv.js";
-import { C as F, a as M, D as S, b, E as L, F as P, H as R, I as U, c as h, M as k, N as D, P as H, R as V, T as E, d as G, e as N, U as W, V as v, f as w, W as J } from "./image-BhZbKYDj.js";
+import { C as F, a as M, D as S, b, E as L, F as P, H as R, I as U, c as h, M as k, N as D, P as H, R as V, T as E, d as G, e as N, U as W, V as v, f as w, W as J } from "./image-gf8yyrt3.js";
 import { S as q } from "./skeleton-BlY3opxG.js";
 export {
   e as Badge,

package/dist/{empty-state-BYGAQBoC.js → empty-state-accxIvGO.js}

@@ -1,13 +1,13 @@
 import { Atom as c, Component as y, Html as A, Dom as Z, base as tt, Data as k, Builder as H, Jot as w, Events as g, DateTime as M } from "@base-framework/base";
 import { Div as n, H5 as et, P as b, Li as q, Span as a, Ul as V, Button as p, I as T, OnState as I, Label as P, H2 as v, Form as st, Header as B, Footer as L, A as G, H3 as ot, Checkbox as nt, Input as f, Img as W, Nav as it, UseParent as _, OnStateOpen as O, Time as rt, Dialog as lt } from "@base-framework/atoms";
-import { P as S, C as at, R as ct } from "./simple-search-input-DBixzLjf.js";
+import { P as S, C as at, R as ct } from "./simple-search-input-Cf5rRhJE.js";
 import { U as m, B as h, I as dt } from "./buttons-BY-KDbOv.js";
 import { Timer as ut, List as ht, DynamicTime as mt } from "@base-framework/organisms";
-import { C as ft, b as pt } from "./tooltip-BmvjA9XQ.js";
-import { f as C } from "./image-BhZbKYDj.js";
+import { C as ft, b as pt } from "./tooltip-C8OUlZKV.js";
+import { f as C } from "./image-gf8yyrt3.js";
 import { Icons as u } from "./icons.es.js";
 import { F as z } from "./format-DE4rFWuD.js";
-import "./mobile-nav-wrapper-BU2y9igN.js";
+import "./mobile-nav-wrapper-gNWndUx9.js";
 import "./aside-template-BDvEMLnk.js";
 import "./full-page-DccgwWsM.js";
 import "./bside-template-BCP2pJWN.js";
@@ -75,7 +75,7 @@ class Ee extends y {
   }
 }
 const yt = (t) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, t), wt = (t) => a({ class: "flex w-4 h-4", html: t }), Ct = (t) => a({ class: "flex-auto" }, t), vt = (t, e) => q({
-  class: "relative flex cursor-pointer hover:bg-muted/50 select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  class: "relative flex cursor-pointer hover:bg-muted/50 select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   click: () => e(t)
 }, [
   t.icon && wt(t.icon),
@@ -277,19 +277,19 @@ const It = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
   const s = t.class?.includes("drawer");
   return n({
     popover: "manual",
-    class: `modal ${s ? "" : "m-auto top-0 right-0 bottom-0 left-0"} ${s ? "" : "h-full max-h-screen"} fixed z-20 grid w-full gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 overflow-y-auto ${t.class}`,
+    class: `modal ${s ? "" : "m-auto top-0 right-0 bottom-0 left-0"} ${s ? "" : "h-full max-h-screen"} fixed z-20 grid w-full gap-2 lg:border bg-background text-foreground shadow-xl wrap-break-words p-0 overflow-y-auto ${t.class}`,
     click: (r, l) => {
       r.target === l.panel && (r.preventDefault(), r.stopPropagation(), l.state.open = !1);
     }
   }, [
     K({
-      class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4 min-w-0",
+      class: "modal-content relative bg-background z-1 flex flex-auto flex-col gap-y-4 min-w-0",
       submit: (r, l) => t.onSubmit && t.onSubmit(l),
       cache: "modalContent",
       ...t.gestureHandlers
     }, [
       Ot(t),
-      n({ class: "modal-body flex flex-grow flex-col py-0 px-6 z-0", cache: "modalBody" }, e),
+      n({ class: "modal-body flex grow flex-col py-0 px-6 z-0", cache: "modalBody" }, e),
       !t.hideFooter && L({ class: "modal-footer sticky bottom-0 bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, t.buttons)
     ])
   ]);
@@ -672,8 +672,11 @@ class Je extends zt {
    */
   showModal() {
     super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new Yt({
+      // @ts-ignore
       modal: this.panel,
+      // @ts-ignore
       modalContent: this.modalContent,
+      // @ts-ignore
       modalBody: this.modalBody,
       closeThreshold: this.closeThreshold,
       snapThreshold: this.snapThreshold,
@@ -1381,7 +1384,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => p({
         // Hidden required input for form validation
         // @ts-ignore
         this.required && f({
-          class: "opacity-0 absolute top-0 left-0 z-[1]",
+          class: "opacity-0 absolute top-0 left-0 z-1",
           type: "text",
           // @ts-ignore
           name: this.name,
@@ -1482,7 +1485,7 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => p({
     ae({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
     p(
       {
-        class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
+        class: "shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
         click: s
       },
       [
@@ -1717,7 +1720,7 @@ function xe({ bind: t, required: e, toggleOpen: s, handleInputChange: o, handleI
       be({ placeholder: r, handleInputChange: o, handleInputFocus: i }),
       p(
         {
-          class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
+          class: "shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
           click: s
         },
         [
@@ -1985,7 +1988,7 @@ class De extends y {
   /**
    * This will get the buttons for the modal.
    *
-   * @returns {array}
+   * @returns {array|null}
    */
   getButtons() {
     return this.hideFooter ? null : this.buttons ? this.buttons : [

package/dist/{image-BhZbKYDj.js → image-gf8yyrt3.js}

@@ -1,7 +1,7 @@
-import { Div as h, Label as f, Checkbox as m, Span as p, OnState as x, I as k, Input as n, Textarea as g, Img as y } from "@base-framework/atoms";
-import { Jot as b, Atom as s, Component as I } from "@base-framework/base";
+import { Div as h, Label as f, Checkbox as m, Span as $, OnState as p, I as x, Input as n, Textarea as k, Img as g } from "@base-framework/atoms";
+import { Jot as y, Atom as s, Component as I } from "@base-framework/base";
 import { Icons as C } from "./icons.es.js";
-const v = "flex h-10 w-full px-3 py-2 text-sm", r = "rounded-md border border-border bg-input", l = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", c = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", o = "placeholder:text-muted-foreground", $ = `${v} ${r} ${l} ${o} ${c}`, w = ({ id: e, checked: a, bind: t, required: d }) => m({
+const v = "flex h-10 w-full px-3 py-2 text-sm", r = "rounded-md border border-border bg-input", l = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", c = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", o = "placeholder:text-muted-foreground", b = `${v} ${r} ${l} ${o} ${c}`, w = ({ id: e, checked: a, bind: t, required: d }) => m({
   id: e,
   cache: "checkbox",
   class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
@@ -11,10 +11,10 @@ const v = "flex h-10 w-full px-3 py-2 text-sm", r = "rounded-md border border-bo
   required: d,
   checked: a,
   bind: t
-}), T = () => p({ class: "absolute text-xs pointer-events-none" }, [
-  x(
+}), T = () => $({ class: "absolute text-xs pointer-events-none" }, [
+  p(
     "checked",
-    (e) => e ? k({
+    (e) => e ? x({
       class: "w-2 h-2 pointer-events-none",
       html: C.check
     }) : null
@@ -45,7 +45,7 @@ const v = "flex h-10 w-full px-3 py-2 text-sm", r = "rounded-md border border-bo
   class: "text-base cursor-pointer",
   htmlFor: e,
   click: t
-}, a), V = b(
+}, a), S = y(
   {
     /**
      * This will initialize the state of the checkbox.
@@ -109,8 +109,8 @@ const v = "flex h-10 w-full px-3 py-2 text-sm", r = "rounded-md border border-bo
   t && (a.value = t);
 }, i = s((e) => n({
   ...e,
-  class: `${$} ${e.class || ""}`.trim()
-})), j = s((e) => i({
+  class: `${b} ${e.class || ""}`.trim()
+})), V = s((e) => i({
   ...e,
   type: "tel",
   name: e.name || "Phone",
@@ -118,47 +118,47 @@ const v = "flex h-10 w-full px-3 py-2 text-sm", r = "rounded-md border border-bo
   placeholder: "(555) 555-5555",
   pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
   keyup: P
-})), q = s((e) => i({
+})), j = s((e) => i({
   ...e,
   type: "email",
   name: e.name || "Email",
   label: e.label || "Email",
   placeholder: "Email address"
-})), J = s((e) => g({
+})), q = s((e) => k({
   ...e,
   as: "textarea",
   class: `flex w-full h-24 px-3 py-2 text-sm ${r} ${l} ${o} ${c} ${e.class || ""}`.trim()
-})), N = (e = {}) => h({ class: "flex items-center gap-x-2" }, [
+})), J = (e = {}) => h({ class: "flex items-center gap-x-2" }, [
   n({
     ...e,
     type: "radio",
     class: "cursor-pointer appearance-none h-4 w-4 border rounded-full checked:border-primary checked:bg-primary focus:ring focus:ring-primary".trim()
   }),
   e.label && f({ forHTML: e.value, class: "cursor-pointer" }, e.label)
-]), R = s((e) => n({
+]), N = s((e) => n({
   ...e,
   type: "date",
   class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), U = s((e) => n({
+})), R = s((e) => n({
   ...e,
   type: "time",
   class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), W = s((e) => n({
+})), U = s((e) => n({
   ...e,
   type: "datetime-local",
   class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), z = s((e) => n({
+})), W = s((e) => n({
   ...e,
   type: "month",
   class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), A = s((e) => n({
+})), z = s((e) => n({
   ...e,
   type: "week",
   class: `${r} ${l} ${o} ${c} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
-})), B = s((e) => i({
+})), A = s((e) => i({
   ...e,
   type: "number"
-})), G = s((e) => i({
+})), B = s((e) => i({
   ...e,
   type: "password"
 }));
@@ -166,13 +166,13 @@ s((e) => i({
   ...e,
   type: "search"
 }));
-const K = s((e) => i({
+const G = s((e) => i({
   ...e,
   type: "url"
-})), Q = s((e) => i({
+})), K = s((e) => i({
   ...e,
   type: "hidden"
-})), X = s((e) => n({
+})), Q = s((e) => n({
   ...e,
   type: "color",
   class: `${r} text-foreground p-0 ${c} ${e.class || ""}`.trim()
@@ -181,12 +181,12 @@ s((e) => m({
   ...e,
   class: `flex h-4 w-4 text-foreground ${r} ${l} ${c} ${e.class || ""}`.trim()
 }));
-const F = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", Y = s((e) => n({
+const F = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", X = s((e) => n({
   ...e,
   type: "file",
-  class: `${$} ${F} ${e.class || ""}`.trim()
+  class: `${b} ${F} ${e.class || ""}`.trim()
 }));
-class L extends I {
+class Y extends I {
   /**
    * This will set the component context.
    *
@@ -200,7 +200,11 @@ class L extends I {
     return t ? { data: t } : null;
   }
 }
-const Z = (e) => b(e, L), _ = s(({ src: e, alt: a, class: t, checkPath: d = !0 }) => !e || (t = t || "", d && e.indexOf(".") === -1 && e.indexOf("[[") === -1) ? null : y({
+const Z = (e) => {
+  ({
+    ...e
+  });
+}, _ = s(({ src: e, alt: a, class: t, checkPath: d = !0 }) => !e || (t = t || "", d && e.indexOf(".") === -1 && e.indexOf("[[") === -1) ? null : g({
   class: `absolute w-full h-full object-cover fadeIn ${t}`,
   src: e,
   alt: a,
@@ -211,27 +215,27 @@ const Z = (e) => b(e, L), _ = s(({ src: e, alt: a, class: t, checkPath: d = !0 }
   error: (u) => u.target.style.visibility = "hidden"
 }));
 export {
-  V as C,
-  R as D,
-  q as E,
-  Y as F,
-  Q as H,
+  S as C,
+  N as D,
+  j as E,
+  X as F,
+  K as H,
   _ as I,
-  z as M,
-  B as N,
-  G as P,
-  N as R,
-  j as T,
-  K as U,
-  L as V,
-  A as W,
-  X as a,
-  W as b,
+  W as M,
+  A as N,
+  B as P,
+  J as R,
+  V as T,
+  G as U,
+  Y as V,
+  z as W,
+  Q as a,
+  U as b,
   i as c,
-  J as d,
-  U as e,
+  q as d,
+  R as e,
   Z as f,
   l as g,
   c as h,
-  $ as i
+  b as i
 };

package/dist/index.es.js

@@ -1,15 +1,15 @@
-import { B as s, C as o, a as t, F as r, b as n, L as i, P as l, R as p, S as m, T as d } from "./tooltip-BmvjA9XQ.js";
+import { B as s, C as o, a as t, F as r, b as n, L as i, P as l, R as p, S as m, T as d } from "./tooltip-C8OUlZKV.js";
 import { B as c, I as g, L as T, M as C, U as I, i as S, a as b } from "./buttons-BY-KDbOv.js";
-import { C as B, a as F, D as P, b as M, E as f, F as k, H as x, I as v, c as N, M as U, N as h, P as y, R as L, T as W, d as H, e as R, U as w, V as A, f as G, W as O } from "./image-BhZbKYDj.js";
+import { C as B, a as F, D as P, b as M, E as f, F as k, H as x, I as v, c as N, M as U, N as h, P as y, R as L, T as W, d as H, e as R, U as w, V as A, f as G, W as O } from "./image-gf8yyrt3.js";
 import { S as j } from "./skeleton-BlY3opxG.js";
 import { Icons as J, MaterialSymbols as q } from "./icons.es.js";
-import { A as K, B as Q, C as _, a as X, b as Y, c as Z, d as $, D as aa, e as ea, f as sa, g as oa, h as ta, i as ra, j as na, k as ia, l as la, m as pa, n as ma, o as da, E as ua, F as ca, p as ga, q as Ta, r as Ca, s as Ia, t as Sa, u as ba, v as Da, w as Ba, x as Fa, I as Pa, L as Ma, M as fa, y as ka, N as xa, z as va, P as Na, S as Ua, G as ha, H as ya, J as La, K as Wa, T as Ha, O as Ra, Q as wa, R as Aa, U as Ga } from "./empty-state-BYGAQBoC.js";
-import { A as Ea, B as ja, C as Va, a as Ja, b as qa, D as za, c as Ka, d as Qa, e as _a, f as Xa, g as Ya, F as Za, H as $a, M as ae, O as ee, P as se, R as oe, S as te, h as re, i as ne, j as ie, T as le, U as pe, k as me, l as de, m as ue, p as ce } from "./simple-search-input-DBixzLjf.js";
-import { B as Te, I as Ce, N as Ie, P as Se, S as be, T as De, a as Be, b as Fe, U as Pe, c as Me, d as fe, e as ke, W as xe, f as ve, g as Ne, h as Ue, i as he, j as ye, k as Le, l as We, m as He, n as Re } from "./signature-panel-oy08dzmN.js";
-import { B as Ae, I as Ge, M as Oe, a as Ee, b as je, N as Ve, c as Je, d as qe, e as ze, f as Ke, P as Qe, S as _e, T as Xe } from "./mobile-nav-wrapper-BU2y9igN.js";
-import { S as Ze } from "./sidebar-menu-DrtfWyhW.js";
+import { A as K, B as Q, C as _, a as X, b as Y, c as Z, d as $, D as aa, e as ea, f as sa, g as oa, h as ta, i as ra, j as na, k as ia, l as la, m as pa, n as ma, o as da, E as ua, F as ca, p as ga, q as Ta, r as Ca, s as Ia, t as Sa, u as ba, v as Da, w as Ba, x as Fa, I as Pa, L as Ma, M as fa, y as ka, N as xa, z as va, P as Na, S as Ua, G as ha, H as ya, J as La, K as Wa, T as Ha, O as Ra, Q as wa, R as Aa, U as Ga } from "./empty-state-accxIvGO.js";
+import { A as Ea, B as ja, C as Va, a as Ja, b as qa, D as za, c as Ka, d as Qa, e as _a, f as Xa, g as Ya, F as Za, H as $a, M as ae, O as ee, P as se, R as oe, S as te, h as re, i as ne, j as ie, T as le, U as pe, k as me, l as de, m as ue, p as ce } from "./simple-search-input-Cf5rRhJE.js";
+import { B as Te, I as Ce, N as Ie, P as Se, S as be, T as De, a as Be, b as Fe, U as Pe, c as Me, d as fe, e as ke, W as xe, f as ve, g as Ne, h as Ue, i as he, j as ye, k as Le, l as We, m as He, n as Re } from "./signature-panel-CuOUv4V2.js";
+import { B as Ae, I as Ge, M as Oe, a as Ee, b as je, N as Ve, c as Je, d as qe, e as ze, f as Ke, P as Qe, S as _e, T as Xe } from "./mobile-nav-wrapper-gNWndUx9.js";
+import { S as Ze } from "./sidebar-menu-9uhT3f6A.js";
 import { B as as, F as es, M as ss, P as os } from "./full-page-DccgwWsM.js";
-import { B as rs, C as ns, F as is, a as ls, S as ps } from "./sidebar-menu-page-B8SDcyYE.js";
+import { B as rs, C as ns, F as is, a as ls, S as ps } from "./sidebar-menu-page-DxH5thLp.js";
 import { A as ds, F as us, M as cs, T as gs, a as Ts } from "./aside-template-BDvEMLnk.js";
 import { B as Is } from "./bside-template-BCP2pJWN.js";
 import { F as bs, c as Ds } from "./format-DE4rFWuD.js";

package/dist/{mobile-nav-wrapper-BU2y9igN.js → mobile-nav-wrapper-gNWndUx9.js}

@@ -1,6 +1,6 @@
-import { Button as g, Div as l, Label as b, Span as w, Ul as r, H4 as S, Nav as d, H3 as h, OnState as B, UseParent as N } from "@base-framework/atoms";
-import { Component as n, Atom as i, NavLink as L, router as u } from "@base-framework/base";
-import { U as o, B as p } from "./buttons-BY-KDbOv.js";
+import { Button as k, Div as l, Label as g, Span as b, Ul as r, H4 as w, Nav as u, H3 as d, OnState as S, UseParent as B } from "@base-framework/atoms";
+import { Component as n, Atom as i, NavLink as N, router as L } from "@base-framework/base";
+import { U as o, B as h } from "./buttons-BY-KDbOv.js";
 import { Icons as c } from "./icons.es.js";
 class C extends n {
   /**
@@ -19,7 +19,7 @@ class C extends n {
    */
   render() {
     const e = this.state;
-    return g({
+    return k({
       class: this.class || "",
       onState: [
         ["selected", {
@@ -79,8 +79,8 @@ const y = i(({ options: s, click: e }, t) => ({
   }, [
     o({ size: "sm" }, e)
   ]),
-  b({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, s),
-  t && w(
+  g({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, s),
+  t && b(
     {
       class: "flex justify-center items-center px-1 transition-all text-muted-foreground mr-2",
       onState: [
@@ -97,7 +97,7 @@ const y = i(({ options: s, click: e }, t) => ({
     ]
   )
 ];
-class f extends n {
+class p extends n {
   /**
    * This will declare the props for the compiler.
    *
@@ -129,7 +129,7 @@ class f extends n {
    */
   addLink() {
     const e = this.options && this.options.length > 0, t = this.content || P(this.label, this.icon, e);
-    return this.href ? new L(
+    return this.href ? new N(
       {
         class: "flex flex-auto flex-row rounded-md transition-all overflow-x-hidden",
         cache: "link",
@@ -157,7 +157,7 @@ class f extends n {
   }
 }
 const I = i(({ map: s }, e) => r({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: s }, [
-  S({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, e)
+  w({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, e)
 ]));
 class $ extends n {
   /**
@@ -175,7 +175,7 @@ class $ extends n {
    */
   render() {
     const e = this.mapOptions(this.options), t = this.class || "", a = this.mobileBorder ? "border md:border-0 rounded-md" : "";
-    return d({ class: `navigation flex flex-auto flex-col ${t}` }, [
+    return u({ class: `navigation flex flex-auto flex-col ${t}` }, [
       r({
         class: `relative group flex flex-col gap-2 py-2 px-2 list-none m-0 ${a}`,
         map: e
@@ -217,10 +217,10 @@ class $ extends n {
    * @returns {object}
    */
   addLink(e) {
-    return new f(e);
+    return new p(e);
   }
 }
-class x extends $ {
+class f extends $ {
   onCreated() {
     this.links = [];
   }
@@ -255,7 +255,7 @@ class x extends $ {
    * @returns {object}
    */
   addLink(e) {
-    const t = new f(e);
+    const t = new p(e);
     if (this.links.push(t), !t.options)
       return t;
     const a = this.addSubNav(t);
@@ -270,7 +270,7 @@ const z = (s, e) => new RegExp(`${s}($|/|\\.).*`).test(e), M = (s, e) => {
   const t = s.link.panel.pathname;
   return !t && s.isSelected() ? !0 : s.exact ? e === t : z(t, e);
 };
-class O extends x {
+class O extends f {
   /**
    * This will declare the props for the compiler.
    *
@@ -286,7 +286,7 @@ class O extends x {
    */
   render() {
     const e = `navigation flex flex-auto flex-col sub ${this.mainClassName || ""}`, t = this.mapOptions(this.options);
-    return d({ class: e, onState: this.onState() }, [
+    return u({ class: e, onState: this.onState() }, [
       r({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...t, ...this.addSubs(), this.addWatcher()])
     ]);
   }
@@ -299,7 +299,7 @@ class O extends x {
   addWatcher() {
     return {
       watch: {
-        value: ["[[path]]", u.data],
+        value: ["[[path]]", L.data],
         callBack: this.updateLinks.bind(this)
       }
     };
@@ -340,8 +340,7 @@ class O extends x {
    * @returns {void}
    */
   afterSetup() {
-    const e = u.data.get("path");
-    this.updateLinks(e);
+    this.updateLinks(path);
   }
   /**
    * This will update the links.
@@ -357,8 +356,8 @@ class O extends x {
     this.parentLink.update(t);
   }
 }
-const E = (s) => h({ class: "text-lg ml-2" }, s), H = (s) => l({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
-  p({
+const E = (s) => d({ class: "text-lg ml-2" }, s), H = (s) => l({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
+  h({
     variant: "icon",
     class: "m-2",
     click: (e, { state: t }) => t.toggle("open"),
@@ -438,31 +437,31 @@ class U extends n {
     this.container = app.root;
   }
 }
-const m = () => p({ class: "m-2", variant: "ghost", addState() {
+const x = () => h({ class: "m-2", variant: "ghost", addState() {
   return {
     open: !1
   };
 }, click: (s, { state: e }) => e.toggle("open") }, [
   o({}, c.bar.three)
-]), A = (s) => h({ class: "text-lg ml-2" }, s), G = (s) => l({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
-  m(),
+]), A = (s) => d({ class: "text-lg ml-2" }, s), G = (s) => l({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
+  x(),
   s.title && A(s.title)
-]), v = (s, e) => {
+]), m = (s, e) => {
   s.forEach((t) => {
     if (t.options) {
-      v(t.options, e);
+      m(t.options, e);
       return;
     }
     t.callBack = e;
   });
-}, k = (s) => l({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
-  B(
+}, v = (s) => l({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
+  S(
     "open",
     (e) => e ? [
       new U({ title: s.title }, [
-        N(({ state: t }) => {
+        B(({ state: t }) => {
           const a = (W) => t.open = !1;
-          return v(s.options, a), new x(
+          return m(s.options, a), new f(
             {
               options: s.options
             }
@@ -473,20 +472,20 @@ const m = () => p({ class: "m-2", variant: "ghost", addState() {
   )
 ]), q = i((s) => l({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
   l([
-    m(),
-    k(s)
+    x(),
+    v(s)
   ])
 ])), F = i((s) => l({ cache: "mobileNav", class: "flex flex-auto flex-col w-full relative lg:hidden" }, [
   l({ class: "flex flex-auto flex-col w-full" }, [
     G(s),
-    k(s)
+    v(s)
   ])
 ]));
 export {
   T as B,
-  x as I,
-  f as M,
-  m as N,
+  f as I,
+  p as M,
+  x as N,
   H as P,
   O as S,
   G as T,

package/dist/molecules.es.js

@@ -1,5 +1,5 @@
-import { A as s, B as t, C as r, a as e, b as i, c as n, d as m, D as l, e as d, f as C, g as p, h as D, i as S, j as u, k as c, l as g, m as F, n as T, o as P, E as w, F as A, p as I, q as f, r as b, s as y, t as B, u as M, v as U, w as k, x, I as L, L as R, M as v, y as E, N, z as h, P as G, S as O, G as j, H as q, J as z, K as H, T as J, O as K, Q, R as _, U as V } from "./empty-state-BYGAQBoC.js";
-import { A as X, P as Y, m as Z } from "./simple-search-input-DBixzLjf.js";
+import { A as s, B as t, C as r, a as e, b as i, c as n, d as m, D as l, e as d, f as C, g as p, h as D, i as S, j as u, k as c, l as g, m as F, n as T, o as P, E as w, F as A, p as I, q as f, r as b, s as y, t as B, u as M, v as U, w as k, x, I as L, L as R, M as v, y as E, N, z as h, P as G, S as O, G as j, H as q, J as z, K as H, T as J, O as K, Q, R as _, U as V } from "./empty-state-accxIvGO.js";
+import { A as X, P as Y, m as Z } from "./simple-search-input-Cf5rRhJE.js";
 export {
   s as Alert,
   X as Avatar,

package/dist/organisms.es.js

@@ -1,7 +1,7 @@
-import { B as s, C as n, a as t, b as r, D as o, c as l, d as i, e as d, f as b, g as p, F as u, H as T, M as g, O as v, R as N, S as k, h as D, i as c, j as C, T as m, U as B, k as S, l as M, p as h } from "./simple-search-input-DBixzLjf.js";
-import { B as W, I as U, N as f, P as H, S as I, T as P, a as x, b as L, U as O, c as F, d as G, e as j, W as R, f as w, g as q, h as z, i as A, j as E, k as J, l as K, m as Q, n as V } from "./signature-panel-oy08dzmN.js";
-import { B as Y, I as Z, M as _, a as $, b as aa, N as ea, c as sa, d as na, e as ta, f as ra, P as oa, S as la, T as ia } from "./mobile-nav-wrapper-BU2y9igN.js";
-import { S as ba } from "./sidebar-menu-DrtfWyhW.js";
+import { B as s, C as n, a as t, b as r, D as o, c as l, d as i, e as d, f as b, g as p, F as u, H as T, M as g, O as v, R as N, S as k, h as D, i as c, j as C, T as m, U as B, k as S, l as M, p as h } from "./simple-search-input-Cf5rRhJE.js";
+import { B as W, I as U, N as f, P as H, S as I, T as P, a as x, b as L, U as O, c as F, d as G, e as j, W as R, f as w, g as q, h as z, i as A, j as E, k as J, l as K, m as Q, n as V } from "./signature-panel-CuOUv4V2.js";
+import { B as Y, I as Z, M as _, a as $, b as aa, N as ea, c as sa, d as na, e as ta, f as ra, P as oa, S as la, T as ia } from "./mobile-nav-wrapper-gNWndUx9.js";
+import { S as ba } from "./sidebar-menu-9uhT3f6A.js";
 export {
   s as BackButton,
   Y as Backdrop,

package/dist/pages.es.js

@@ -1,5 +1,5 @@
 import { B as s, F as P, M as g, P as n } from "./full-page-DccgwWsM.js";
-import { B as r, C as o, F as i, a as t, S as F } from "./sidebar-menu-page-B8SDcyYE.js";
+import { B as r, C as o, F as i, a as t, S as F } from "./sidebar-menu-page-DxH5thLp.js";
 export {
   s as BasicPage,
   r as BlankPage,

package/dist/{sidebar-menu-DrtfWyhW.js → sidebar-menu-9uhT3f6A.js}

@@ -1,5 +1,5 @@
 import { Div as r, Header as x, H1 as c } from "@base-framework/atoms";
-import { I as n } from "./mobile-nav-wrapper-BU2y9igN.js";
+import { I as n } from "./mobile-nav-wrapper-gNWndUx9.js";
 const g = ({ title: l, options: s, class: a = "", mobileBorder: t = !1, sticky: e = !1, topNav: o = null, bottomNav: p = null }) => r({ class: `pb-12 p-4 pt-0 lg:p-6 lg:border-r w-full lg:max-w-[300px] flex-auto flex-col ${a}` }, [
   o,
   l && x({ class: "pb-4 md:pb-2 px-6 flex" }, [

package/dist/{sidebar-menu-page-B8SDcyYE.js → sidebar-menu-page-DxH5thLp.js}

@@ -1,8 +1,8 @@
 import { Div as s } from "@base-framework/atoms";
 import { B as a, M as i, P as r } from "./full-page-DccgwWsM.js";
 import { F as l, A as n } from "./aside-template-BDvEMLnk.js";
-import { b as d } from "./mobile-nav-wrapper-BU2y9igN.js";
-import { S as o } from "./sidebar-menu-DrtfWyhW.js";
+import { b as d } from "./mobile-nav-wrapper-gNWndUx9.js";
+import { S as o } from "./sidebar-menu-9uhT3f6A.js";
 class p extends a {
   /**
    * This will render the page.

package/dist/{signature-panel-oy08dzmN.js → signature-panel-CuOUv4V2.js}

@@ -2,8 +2,8 @@ import { Div as l, Button as b, On as j, Span as T, Nav as f, Ul as p, Section a
 import { Component as k, Data as I, DateTime as U, router as v, NavLink as S, base as L, Dom as B } from "@base-framework/base";
 import { B as C } from "./buttons-BY-KDbOv.js";
 import { Icons as D } from "./icons.es.js";
-import { O as A } from "./simple-search-input-DBixzLjf.js";
-import { V as u, H as F } from "./image-BhZbKYDj.js";
+import { O as A } from "./simple-search-input-Cf5rRhJE.js";
+import { V as u, H as F } from "./image-gf8yyrt3.js";
 import { IntervalTimer as O } from "@base-framework/organisms";
 class Pt extends k {
   /**

package/dist/{simple-search-input-DBixzLjf.js → simple-search-input-Cf5rRhJE.js}

@@ -3,7 +3,7 @@ import { Component as R, Data as P, Atom as m, DateTime as H, DataTracker as _,
 import { B as y, U as q } from "./buttons-BY-KDbOv.js";
 import { Icons as S } from "./icons.es.js";
 import { TableBody as ct, DataTableBody as dt, ScrollableTableBody as ht, List as ut } from "@base-framework/organisms";
-import { I as ft, C as mt, c as gt } from "./image-BhZbKYDj.js";
+import { I as ft, C as mt, c as gt } from "./image-gf8yyrt3.js";
 const yt = (t, e) => {
   const s = t ? t.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, a = e.getBoundingClientRect(), n = 10, o = globalThis.scrollX, c = globalThis.scrollY;
   let l = s.left + o, u = s.bottom + c;
@@ -166,7 +166,7 @@ const xt = m(({ src: t, alt: e }) => !t || t.indexOf(".") === -1 && t.indexOf("[
   "4xl": "text-5xl",
   default: "text-base"
 }, pt = (t) => L[t] || L.default, vt = (t) => U[t] || U.default, kt = (t, e = null, s = "md") => {
-  const a = V(t), n = vt(s);
+  const a = V(String(t)), n = vt(s);
   return r(
     {
       class: `
@@ -428,7 +428,7 @@ class De extends R {
    *
    * @param {number} month
    * @param {number} year
-   * @param {number} [date=null]
+   * @param {number|null} [date=null]
    * @returns {void}
    */
   setCurrentDate(e, s, a = null) {
@@ -457,7 +457,9 @@ class De extends R {
           case "months":
             return Ct(
               {
+                // @ts-ignore
                 currentMonth: this.data.current.month,
+                // @ts-ignore
                 currentYear: this.data.current.year,
                 onSelect: (s) => {
                   this.setCurrentDate(s, this.data.current.year), this.state.view = "calendar";
@@ -467,7 +469,9 @@ class De extends R {
           case "years":
             return zt(
               {
+                // @ts-ignore
                 currentMonth: this.data.current.month,
+                // @ts-ignore
                 currentYear: this.data.current.year,
                 onSelect: (s) => {
                   this.setCurrentDate(this.data.current.month, s), this.state.view = "calendar";
@@ -476,7 +480,9 @@ class De extends R {
             );
           default:
             return Yt({
+              // @ts-ignore
               current: this.data.current,
+              // @ts-ignore
               today: this.data.today,
               select: (s) => this.selectDate(s),
               next: () => this.goToNextMonth(),
@@ -790,6 +796,7 @@ class pe extends R {
             );
           default:
             return Et({
+              // @ts-ignore
               monthName: this.data.monthName,
               year: s.year,
               today: e,
@@ -1256,9 +1263,9 @@ class ce extends R {
       {
         class: this.getClassName(),
         // @ts-ignore
-        animateIn: this.animateIn ?? null,
-        // @ts-ignore
-        animateOut: this.animateOut ?? null,
+        // animateIn: this.animateIn ?? null,
+        // // @ts-ignore
+        // animateOut: this.animateOut ?? null,
         onSet: ["loading", {
           loading: !0
         }]

package/dist/{tooltip-BmvjA9XQ.js → tooltip-C8OUlZKV.js}

@@ -1,6 +1,6 @@
 import { Span as c, Div as o, Legend as f, Fieldset as x, H4 as C, P as h, UseParent as u, Input as y } from "@base-framework/atoms";
 import { Atom as s, Html as p } from "@base-framework/base";
-import { f as d, g as k, h as w, i as $ } from "./image-BhZbKYDj.js";
+import { f as d, g as k, h as w, i as $ } from "./image-gf8yyrt3.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -312,7 +312,7 @@ const a = {
   "bottom-left": "top-full right-full transform translate-x-1 mt-2",
   left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
   right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
-}, F = (r) => g[r] || g.top, H = s(({ position: r = "top", content: e }, t) => {
+}, F = (r) => g[String(r)] || g.top, H = s(({ position: r = "top", content: e }, t) => {
   const l = F(r);
   return Array.isArray(t) === !1 && (t = [t]), o({ class: "relative group inline-block" }, [
     ...t,

package/dist/types/components/atoms/form/inputs/range-slider.d.ts

@@ -3,8 +3,7 @@
  *
  * Creates a range slider with a custom style matching the provided design.
  *
- * @type {typeof Veil}
+ * @returns {Component|null}
  */
-export const RangeSlider: typeof Veil;
+export const RangeSlider: any;
 export default RangeSlider;
-import { Veil } from '../../veil.js';

package/dist/types/components/atoms/progress/progress-bar.d.ts

@@ -3,7 +3,6 @@
  *
  * This will create a progress bar component.
  *
- * @type {typeof Veil}
+ * @returns {Component|null}
  */
-export const ProgressBar: typeof Veil;
-import { Veil } from '../veil.js';
+export const ProgressBar: any;

package/dist/types/components/atoms/veil.d.ts

@@ -17,5 +17,5 @@ export class Veil extends Component {
      */
     setContext(context: object | null): object | null;
 }
-export function VeilJot(props: any): typeof Veil;
+export function VeilJot(config: any): any;
 import { Component } from "@base-framework/base";

package/dist/types/components/molecules/breadcrumb/dots-indicator.d.ts

@@ -3,7 +3,7 @@
  *
  * Renders a row of circular dots, one of which is "active."
  *
- * @type {typeof Component}
+ * @returns {Component|null}
  * @example
  *   new DotsIndicator({ count: 4, activeIndex: 0 })
  */

package/dist/types/components/molecules/combobox/combobox.d.ts

@@ -11,7 +11,7 @@
  * @property {boolean} required
  * @property {boolean} selectFirst
  * @property {function} onSelect
- * @type {typeof Component}
+ * @returns {Component|null}
  */
 export const Combobox: typeof Component;
 import { Component } from '@base-framework/base';

package/dist/types/components/molecules/counters/counter.d.ts

@@ -3,8 +3,7 @@
  *
  * This creates a counter component with an input for count and buttons to increment and decrement.
  *
- * @type {typeof Veil}
+ * @returns {Component|null}
  */
-export const Counter: typeof Veil;
+export const Counter: any;
 export default Counter;
-import { Veil } from '../../atoms/veil.js';

package/dist/types/components/molecules/date-time/date-picker.d.ts

@@ -3,8 +3,7 @@
  *
  * This will create a date picker component.
  *
- * @type {typeof Veil}
+ * @returns {Component|null}
  */
-export const DatePicker: typeof Veil;
+export const DatePicker: any;
 export default DatePicker;
-import { Veil } from '../../atoms/veil.js';

package/dist/types/components/molecules/date-time/date-range-picker.d.ts

@@ -3,8 +3,7 @@
  *
  * This will create a date picker component.
  *
- * @type {typeof Veil}
+ * @returns {Component|null}
  */
-export const DateRangePicker: typeof Veil;
+export const DateRangePicker: any;
 export default DateRangePicker;
-import { Veil } from '../../atoms/veil.js';

package/dist/types/components/molecules/date-time/time-picker.d.ts

@@ -3,8 +3,7 @@
  *
  * This will create a time picker component.
  *
- * @type {typeof Veil}
+ * @returns {Component|null}
  */
-export const TimePicker: typeof Veil;
+export const TimePicker: any;
 export default TimePicker;
-import { Veil } from '../../atoms/veil.js';

package/dist/types/components/molecules/dialogs/dialog.d.ts

@@ -47,9 +47,9 @@ export class Dialog extends Component {
     /**
      * This will get the buttons for the modal.
      *
-     * @returns {array}
+     * @returns {array|null}
      */
-    getButtons(): any[];
+    getButtons(): any[] | null;
     /**
      * This will setup the states.
      *

package/dist/types/components/molecules/form/form-field.d.ts

@@ -2,8 +2,5 @@
  * FormField Component
  *
  * Handles controlled form fields with accessibility.
- *
- * @type {typeof Veil}
  */
-export const FormField: typeof Veil;
-import { Veil } from "../../atoms/veil.js";
+export const FormField: any;

package/dist/types/components/molecules/popover.d.ts

@@ -47,6 +47,12 @@ export class PopOver extends Component {
      * @returns {boolean}
      */
     isOutsideClick(element: object): boolean;
+    /**
+     * This will set up the events.
+     *
+     * @returns {array}
+     */
+    setupEvents(): any[];
     /**
      * This will override the set up to use the app shell.
      *

package/dist/types/components/molecules/toggle/toggle.d.ts

@@ -2,9 +2,6 @@
  * Toggle
  *
  * This will create a toggle switch component.
- *
- * @type {typeof Veil}
  */
-export const Toggle: typeof Veil;
+export const Toggle: any;
 export default Toggle;
-import { Veil } from '../../atoms/veil.js';

package/dist/types/components/organisms/calendar/calendar.d.ts

@@ -68,10 +68,10 @@ export class Calendar extends Component {
      *
      * @param {number} month
      * @param {number} year
-     * @param {number} [date=null]
+     * @param {number|null} [date=null]
      * @returns {void}
      */
-    setCurrentDate(month: number, year: number, date?: number): void;
+    setCurrentDate(month: number, year: number, date?: number | null): void;
     /**
      * This will select a date.
      *

package/dist/types/components/organisms/overlays/dockable-overlay.d.ts

@@ -21,6 +21,12 @@ export class DockableOverlay extends Overlay {
      * @returns {void}
      */
     setup(container: object): void;
+    /**
+     * This will setup the overlay events.
+     *
+     * @returns {Array<object>}
+     */
+    setupEvents(): Array<object>;
     /**
      * This will check if the overlay can dock.
      *

package/dist/types/components/organisms/signature/signature-canvas.d.ts

@@ -10,7 +10,7 @@
 export class SignatureCanvas extends Component {
     lineWidth: any;
     lineColor: any;
-    canvas: any;
+    canvas: object;
     ctx: any;
     status: string;
     timer: IntervalTimer;
@@ -32,6 +32,12 @@ export class SignatureCanvas extends Component {
      * @returns {object} Layout definition for the canvas.
      */
     render(): object;
+    /**
+     * Defines the DOM events to set up for this canvas component.
+     *
+     * @returns {Array} An array of [eventName, element, callback] definitions.
+     */
+    setupEvents(): any[];
     /**
      * Calculates and saves the current pointer position in canvas coordinates.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.1.21",
+	"version": "1.1.22",
 	"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": {