@base-framework/ui 1.0.301 → 1.0.302

package/dist/atoms.es.js

@@ -1,7 +1,7 @@
-import { B as e, C as t, F as o, L as n, P as r, R as p, S as u, a as I, T as i } from "./tooltip-fLU0qdFi.js";
+import { B as e, C as t, F as o, L as n, P as r, R as p, S as u, a as I, T as i } from "./tooltip-EO3J6QFR.js";
 import { B as d, I as m, L as C } from "./buttons-CHEs54Wl.js";
-import { C as x, F as B, V as F, a as c } from "./veil-B1pwIy-D.js";
-import { C as f, d as L, D as P, c as R, E as S, F as b, H as h, I as k, M as D, N as V, P as E, R as G, T as H, a as M, b as N, U, W } from "./inputs-DYxmO1rQ.js";
+import { C as x, F as B, V as F, a as c } from "./veil-fLMV40Wv.js";
+import { C as f, d as L, D as P, c as R, E as S, F as b, H as h, I as k, M as D, N as V, P as E, R as G, T as H, a as M, b as N, U, W } from "./inputs-9udyzkHR.js";
 export {
   e as Badge,
   d as Button,

package/dist/{empty-state-9BzsaWJW.js → empty-state-BunnaSN9.js}

@@ -1,8 +1,8 @@
-import { Div as n, H5 as Q, P as m, I as p, Li as V, Span as a, Ul as q, Button as f, OnState as A, Label as H, H2 as v, Form as X, Header as D, Footer as L, A as Y, H3 as Z, Checkbox as ee, Input as x, Img as te, Nav as se, UseParent as _, OnStateOpen as P, Time as oe, Dialog as ne } from "@base-framework/atoms";
-import { Atom as c, Component as w, Html as M, Dom as le, base as re, Data as I, Builder as W, Jot as C, Events as $, DateTime as F } from "@base-framework/base";
-import { P as k, b as ie, R as ae } from "./range-calendar-UXMh98a5.js";
-import { C as ce, F as ue, a as y } from "./veil-B1pwIy-D.js";
-import { B as h, I as g } from "./buttons-CHEs54Wl.js";
+import { Div as l, H5 as Q, P as m, I as g, Li as V, Span as a, Ul as q, Button as f, OnState as A, Label as H, H2 as v, Form as X, Header as D, Footer as L, A as Y, H3 as Z, Checkbox as ee, Input as x, Img as te, Nav as se, UseParent as _, OnStateOpen as P, Time as oe, Dialog as le } from "@base-framework/atoms";
+import { Atom as c, Component as w, Html as M, Dom as ne, base as re, Data as I, Builder as W, Jot as C, Events as $, DateTime as F } from "@base-framework/base";
+import { P as k, b as ie, R as ae } from "./range-calendar-CnBylqhu.js";
+import { C as ce, F as ue, a as y } from "./veil-fLMV40Wv.js";
+import { B as h, I as p } from "./buttons-CHEs54Wl.js";
 import { Icons as d } from "./icons.es.js";
 import { Timer as de, List as he, DynamicTime as fe } from "@base-framework/organisms";
 import { F as E } from "./format-DnofNaaz.js";
@@ -32,16 +32,16 @@ const N = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, me = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
-  p({ html: e })
-]), pe = (e) => Q({ class: "font-semibold" }, e), ge = (e) => m({ class: "text-sm text-muted-foreground" }, e), kt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: l, bgColor: r, iconColor: i } = N[o] || N.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
+}, me = (e, t) => l({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+  g({ html: e })
+]), ge = (e) => Q({ class: "font-semibold" }, e), pe = (e) => m({ class: "text-sm text-muted-foreground" }, e), kt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: n, bgColor: r, iconColor: i } = N[o] || N.default;
+  return l({ class: `flex items-start p-4 border rounded-lg ${r} ${n}` }, [
     // Icon and content
     s && me(s, i),
-    n({ class: "flex flex-col" }, [
-      pe(e),
-      ge(t)
+    l({ class: "flex flex-col" }, [
+      ge(e),
+      pe(t)
     ])
   ]);
 });
@@ -66,7 +66,7 @@ class St extends w {
       M.removeElement(t);
       return;
     }
-    le.addClass(t, s), re.on("animationend", t, (o) => M.removeElement(t));
+    ne.addClass(t, s), re.on("animationend", t, (o) => M.removeElement(t));
   }
 }
 const be = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), xe = (e) => a({ class: "flex w-4 h-4", html: e }), we = (e) => a({ class: "flex-auto" }, e), ye = (e, t) => V({
@@ -78,8 +78,8 @@ const be = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
   e.shortcut && be(e.shortcut)
 ]), ve = (e, t) => q({ class: "grid gap-2" }, [
   e.map((s) => ye(s, t))
-]), Ce = (e) => n({ class: "w-full z-10" }, [
-  n({
+]), Ce = (e) => l({ class: "w-full z-10" }, [
+  l({
     class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
     for: ["groups", (t) => ve(t, e)]
   })
@@ -91,8 +91,8 @@ const be = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
   click: s
 }, [
   e && a(e),
-  t && p({ html: t })
-]), Se = ({ onSelect: e }) => n([
+  t && g({ html: t })
+]), Se = ({ onSelect: e }) => l([
   A(
     "open",
     (t, s, o) => t ? new k({
@@ -157,7 +157,7 @@ class Dt extends w {
    * @returns {object}
    */
   render() {
-    return n({ class: "relative" }, [
+    return l({ class: "relative" }, [
       ke({
         label: this.label,
         icon: this.icon,
@@ -167,15 +167,15 @@ class Dt extends w {
     ]);
   }
 }
-const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ie = c((e, t) => H({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), $e = c((e, t) => m({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Te = c((e, t) => m({ ...e, class: "text-sm text-destructive" }, t)), It = c((e, t = []) => ce({ class: "space-y-0", margin: "m-0", padding: "p-0" }, [
+const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Ie = c((e, t) => H({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), $e = c((e, t) => m({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Te = c((e, t) => m({ ...e, class: "text-sm text-destructive" }, t)), It = c((e, t = []) => ce({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
   e.title && v({ class: "text-lg font-semibold py-4 px-6" }, e.title),
   e.description && m({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
   ...t
 ])), $t = c((e, t = []) => ue({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
-  n({ class: "flex flex-col space-y-6" }, t)
+  l({ class: "flex flex-col gap-y-6" }, t)
 ])), Tt = c((e, t = []) => {
   const s = e.border ? "border-t" : "";
-  return n({ ...e, class: `flex flex-col pb-4 px-6 space-y-4 ${s} ${e.class || ""}` }, t);
+  return l({ ...e, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${e.class || ""}` }, t);
 }), Be = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", G = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = G(o.children, t, s)), !o.required) ? o : Be(o) ? {
   ...o,
   aria: {
@@ -184,15 +184,15 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   invalid: s,
   input: t
 } : o), Fe = c((e, t) => {
-  const l = G(t, (r) => {
+  const n = G(t, (r) => {
     r.target.checkValidity() && e.setError(null);
   }, (r) => {
     e.setError(r.target.validationMessage);
   });
-  return n({
+  return l({
     ...e,
     class: "w-full"
-  }, l);
+  }, n);
 }), Bt = y(
   {
     /**
@@ -214,20 +214,20 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
      * @returns {object}
      */
     render() {
-      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, l = (r) => {
+      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, n = (r) => {
         this.state.error = r, this.state.hasError = !!r;
       };
-      return n({ class: "flex flex-auto space-y-4" }, [
+      return l({ class: "flex flex-auto gap-y-4" }, [
         De([
           Ie({ htmlFor: t }, s),
           Fe({
             id: t,
             name: e,
             value: this.state.value,
-            setError: l
+            setError: n
           }, this.children),
           o && $e({ id: this.getId("description") }, o),
-          n({ onState: ["error", (r) => r && Te(r)] })
+          l({ onState: ["error", (r) => r && Te(r)] })
         ])
       ]);
     }
@@ -236,16 +236,16 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
 }, J = c(
   (e, t) => X({ ...e, submit: (s, o) => Ae(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), Ft = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), At = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
+), Ft = c((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), At = c((e, t = []) => l({ class: "flex flex-auto flex-col gap-y-3 py-4" }, [
   e.title && v({ class: "font-semibold" }, e.title),
   ...t
-])), Lt = (e, t) => n({ class: "flex justify-between" }, [
+])), Lt = (e, t) => l({ class: "flex justify-between" }, [
   a({ class: "text-muted-foreground" }, e),
   a(t)
-]), Pt = (e, t) => n({ class: "flex" }, [
+]), Pt = (e, t) => l({ class: "flex" }, [
   a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
   a(t)
-]), Le = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => D({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), Le = ({ title: e, description: t, back: s, icon: o, options: n = [] }) => D({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
@@ -253,27 +253,27 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   /**
    * Icon
    */
-  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [g(o)]),
+  o && l({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [p(o)]),
   /**
    * Title and Description
    */
-  n({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
-    n({ class: "flex flex-auto flex-col" }, [
+  l({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
+    l({ class: "flex flex-auto flex-col" }, [
       v({ class: "text-lg font-semibold m-0 truncate" }, e),
-      t && n({ class: "text-sm text-muted-foreground truncate" }, t)
+      t && l({ class: "text-sm text-muted-foreground truncate" }, t)
     ]),
-    ...l
+    ...n
   ])
-]), Pe = c((e, t) => n({
+]), Pe = c((e, t) => l({
   popover: "manual",
   class: `modal m-auto top-0 right-0 bottom-0 left-0 fixed z-20 grid w-full h-full max-h-screen gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 ${e.class}`,
   click: (s, o) => {
     s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
   }
 }, [
-  J({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
+  J({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
     Le(e),
-    n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
+    l({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
     L({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
   ])
 ])), Me = (e) => W.render(e, app.root);
@@ -300,9 +300,9 @@ class Mt extends w {
         description: o,
         options: this.headerOptions(),
         buttons: this.getButtons(),
-        onSubmit: (l) => {
+        onSubmit: (n) => {
           let r = !0;
-          this.onSubmit && (r = this.onSubmit(l)), r !== !1 && this.destroy();
+          this.onSubmit && (r = this.onSubmit(n)), r !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -471,7 +471,7 @@ const z = {
   animateIn: "pullRightIn",
   animateOut: "pullRight",
   role: "alert"
-}, s)), ze = c(({ close: e, class: t }, s) => n({
+}, s)), ze = c(({ close: e, class: t }, s) => l({
   class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
   click: () => e(),
   animateIn: "pullRightIn",
@@ -501,9 +501,9 @@ class je extends w {
    * @returns {object}
    */
   render() {
-    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(o);
-    return l ? Ne({
-      href: l,
+    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), n = this.href || null, r = this.getChildren(o);
+    return n ? Ne({
+      href: n,
       class: `${t} ${s}`
     }, r) : ze({
       close: this.close.bind(this),
@@ -535,7 +535,7 @@ class je extends w {
    */
   getButtons() {
     return [
-      n({ class: "flex flex-row mt-6 gap-2" }, [
+      l({ class: "flex flex-row mt-6 gap-2" }, [
         this.secondary && h({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
         this.primary && h({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
       ])
@@ -549,10 +549,10 @@ class je extends w {
    */
   getChildren(t) {
     return [
-      n({ class: "flex items-start" }, [
-        this.icon && p({ class: `mr-4 ${t}`, html: this.icon }),
-        n({ class: "flex flex-auto flex-col" }, [
-          n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
+      l({ class: "flex items-start" }, [
+        this.icon && g({ class: `mr-4 ${t}`, html: this.icon }),
+        l({ class: "flex flex-auto flex-col" }, [
+          l({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
             this.title && Ee(this.title)
           ]),
           m({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
@@ -585,7 +585,7 @@ class Et extends w {
    * @returns {object}
    */
   render() {
-    return n({ class: "notification-container pointer-events-none inset-auto bg-transparent backdrop:bg-transparent overflow-visible fixed bottom-[80px] right-0 z-50 p-5", popover: "manual" }, [
+    return l({ class: "notification-container pointer-events-none inset-auto bg-transparent backdrop:bg-transparent overflow-visible fixed bottom-[80px] right-0 z-50 p-5", popover: "manual" }, [
       new he({
         cache: "list",
         key: "id",
@@ -617,11 +617,11 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
-  click: (o, { state: l }) => {
-    l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ue(e);
+  click: (o, { state: n }) => {
+    n.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ue(e);
   }
 }, [
-  g(s),
+  p(s),
   a(t)
 ])), Ue = (e) => {
   const t = document.documentElement;
@@ -639,8 +639,8 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      * @returns {object}
      */
     render() {
-      return n({ class: "flex flex-auto flex-col" }, [
-        n({ class: "grid grid-cols-3 gap-4" }, [
+      return l({ class: "flex flex-auto flex-col" }, [
+        l({ class: "grid grid-cols-3 gap-4" }, [
           T({ label: "System", value: "system", icon: d.adjustments.horizontal }),
           T({ label: "Light", value: "light", icon: d.sun }),
           T({ label: "Dark", value: "dark", icon: d.moon })
@@ -720,9 +720,9 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Re = (e = "") => (e = e.toUpperCase(), b[e] || b.OFFLINE), jt = (e) => n({
+}, Re = (e = "") => (e = e.toUpperCase(), b[e] || b.OFFLINE), jt = (e) => l({
   class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Re(e)}`
-}), Ot = ({ propName: e = "status" } = {}) => n({
+}), Ot = ({ propName: e = "status" } = {}) => l({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
     [b.ONLINE]: S.ONLINE,
@@ -768,7 +768,7 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      */
     render() {
       const e = "logo-upload", t = this.onChange || null;
-      return n({ class: "flex-none items-center" }, [
+      return l({ class: "flex-none items-center" }, [
         x({
           id: e,
           cache: "input",
@@ -780,7 +780,7 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
             o && t && (this.state.loaded = !1, t(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
           }
         }),
-        n({
+        l({
           class: "relative w-32 h-32 rounded-full border flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group",
           click: (s) => {
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
@@ -796,8 +796,8 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
               htmlFor: e,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
-              g(d.upload),
-              n("Upload logo")
+              p(d.upload),
+              l("Upload logo")
             ])
           )
         ])
@@ -812,11 +812,11 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
   [a(t)]
-), qe = () => g({
+), qe = () => p({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, d.chevron.single.right), He = (e) => n({ class: "flex items-center" }, [
+}, d.chevron.single.right), He = (e) => l({ class: "flex items-center" }, [
   e.href ? Ve(e.href, e.label) : a(e.label),
   e.separator && qe()
 ]), Rt = C(
@@ -842,10 +842,10 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       return se(
         {
           "aria-label": "Breadcrumb",
-          class: "flex items-center space-x-1 text-sm"
+          class: "flex items-center gap-x-1 text-sm"
         },
         [
-          n({
+          l({
             role: "list",
             class: "flex items-center",
             for: ["items", (t, s) => He({
@@ -867,15 +867,15 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, Ye = (e) => O[e] || O.default, _e = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+}, Ye = (e) => O[e] || O.default, _e = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
   a({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
       "bg-primary": e,
       "shadow-md": e
     }],
-    click: (s, { data: o, onClick: l }) => {
-      o.activeIndex = e, l && l(e);
+    click: (s, { data: o, onClick: n }) => {
+      o.activeIndex = e, n && n(e);
     }
   })
 ]), We = (e, t) => Array.from({ length: e }, (s, o) => _e({
@@ -904,10 +904,10 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      */
     render() {
       const e = this.gap || "gap-2", t = Ye(this.size || "sm"), s = We(this.data.count, t);
-      return n(
+      return l(
         { class: "flex justify-center items-center py-2" },
         [
-          n({ class: `flex ${e}` }, s)
+          l({ class: `flex ${e}` }, s)
         ]
       );
     }
@@ -920,24 +920,24 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   },
   [
     a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
-    p({ html: d.chevron.upDown })
+    g({ html: d.chevron.upDown })
   ]
 ), Je = (e, t, s) => V({
   class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
   click: () => t(e),
   onState: [s, "selectedValue", { "bg-secondary": e.value }]
 }, [
-  e.icon && a({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, e.icon)]),
+  e.icon && a({ class: "mr-2 flex items-baseline" }, [p({ size: "xs" }, e.icon)]),
   a({ class: "text-base font-normal" }, e.label)
-]), Ke = (e, t) => n({ class: "w-full border rounded-md" }, [
+]), Ke = (e, t) => l({ class: "w-full border rounded-md" }, [
   q({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Je(s, e, t)] })
-]), Qe = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
+]), Qe = ({ onSelect: e, state: t }) => l({ class: "flex flex-auto flex-col" }, [
   A(
     "open",
-    (s, o, l) => s ? new k({
+    (s, o, n) => s ? new k({
       cache: "dropdown",
-      parent: l,
-      button: l.button
+      parent: n,
+      button: n.button
     }, [
       Ke(e, t)
     ]) : null
@@ -1021,7 +1021,7 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      */
     render() {
       const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
-      return n({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
+      return l({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
         // @ts-ignore
         Ge({ toggleDropdown: this.toggleDropdown.bind(this) }),
         Qe({
@@ -1058,8 +1058,8 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   icon: d.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => _(({ state: l }) => x({
-  value: ["[[count]]", l],
+}), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => _(({ state: n }) => x({
+  value: ["[[count]]", n],
   bind: e,
   blur: (r, { state: i }) => {
     let u = parseInt(r.target.value, 10);
@@ -1093,7 +1093,7 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      */
     render() {
       const e = this.class ?? "";
-      return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
+      return l({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${e}` }, [
         Xe({ click: () => this.state.decrement("count") }),
         et({
           bind: this.bind,
@@ -1118,16 +1118,16 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   a({
     onState: ["selectedDate", (o) => o ? F.format("standard", o) : "Pick a date"]
   }),
-  p({ html: d.calendar.days })
+  g({ html: d.calendar.days })
 ]), ot = ({ handleDateSelect: e, blockPriorDates: t }) => P(
-  (s, o, l) => new k({
+  (s, o, n) => new k({
     cache: "dropdown",
-    parent: l,
-    button: l.panel,
+    parent: n,
+    button: n.panel,
     size: "fit"
   }, [
     new ie({
-      selectedDate: l.state.selectedDate,
+      selectedDate: n.state.selectedDate,
       selectedCallBack: e,
       blockPriorDates: t
     })
@@ -1163,7 +1163,7 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       const e = (s, { state: o }) => o.toggle("open"), t = (s) => {
         this.state.selectedDate = s, this.state.open = !1, this.input.value = s, $.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(s);
       };
-      return n({ class: "relative w-full max-w-[320px]" }, [
+      return l({ class: "relative w-full max-w-[320px]" }, [
         st({
           toggleOpen: e,
           bind: this.bind,
@@ -1176,31 +1176,31 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       ]);
     }
   }
-), nt = ({ bind: e, required: t }) => x({
+), lt = ({ bind: e, required: t }) => x({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), lt = ({ bind: e, required: t, toggleOpen: s }) => f({
+}), nt = ({ bind: e, required: t, toggleOpen: s }) => f({
   class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 px-4 py-2",
   click: s
 }, [
-  nt({ bind: e, required: t }),
+  lt({ bind: e, required: t }),
   _(({ state: o }) => [
     a(E.date(["[[start]]", o], "Start Date")),
     a(" - "),
     a(E.date(["[[end]]", o], "End Date"))
   ]),
-  p({ html: d.calendar.days })
-]), rt = ({ handleDateSelect: e, blockPriorDates: t }) => P((s, o, l) => new k({
+  g({ html: d.calendar.days })
+]), rt = ({ handleDateSelect: e, blockPriorDates: t }) => P((s, o, n) => new k({
   cache: "dropdown",
-  parent: l,
-  button: l.panel,
+  parent: n,
+  button: n.panel,
   size: "xl"
 }, [
   new ae({
-    startDate: l.state.start,
-    endDate: l.state.end,
+    startDate: n.state.start,
+    endDate: n.state.end,
     onRangeSelect: e,
     blockPriorDates: t
   })
@@ -1239,8 +1239,8 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       const e = (s, { state: o }) => o.toggle("open"), t = (s, o) => {
         this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, $.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
       };
-      return n({ class: "relative w-full max-w-[320px]" }, [
-        lt({
+      return l({ class: "relative w-full max-w-[320px]" }, [
+        nt({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
@@ -1256,8 +1256,8 @@ const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   new fe({
     dateTime: e,
     filter: s || ((o) => {
-      const l = F.getLocalTime(o, !0, !1, t);
-      return F.getTimeFrame(l);
+      const n = F.getLocalTime(o, !0, !1, t);
+      return F.getTimeFrame(n);
     })
   })
 ]);
@@ -1280,15 +1280,15 @@ function at({ bind: e, required: t, toggleOpen: s }) {
       a({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
-      p({ html: d.clock })
+      g({ html: d.clock })
     ]
   );
 }
-function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1 }) {
-  return n(
+function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: n = !1 }) {
+  return l(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
     e.map((r) => {
-      let i = l ? r.toString().padStart(2, "0") : r.toString();
+      let i = n ? r.toString().padStart(2, "0") : r.toString();
       return f({
         text: i,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
@@ -1308,15 +1308,15 @@ function ct({ handleTimeSelect: e }) {
         size: "fit"
       },
       [
-        n(
+        l(
           { class: "flex flex-auto flex-col border rounded-md shadow-md" },
           [
-            n(
+            l(
               { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
               [
                 // Hours column
                 B({
-                  items: Array.from({ length: 12 }, (l, r) => r + 1),
+                  items: Array.from({ length: 12 }, (n, r) => r + 1),
                   handleTimeSelect: e,
                   state: o.state,
                   stateValue: "hour",
@@ -1324,7 +1324,7 @@ function ct({ handleTimeSelect: e }) {
                 }),
                 // Minutes column
                 B({
-                  items: Array.from({ length: 60 }, (l, r) => r),
+                  items: Array.from({ length: 60 }, (n, r) => r),
                   handleTimeSelect: e,
                   state: o.state,
                   stateValue: "minute",
@@ -1351,7 +1351,7 @@ function U(e) {
   const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
   if (!s)
     return { hour: null, minute: null, meridian: null };
-  let [, o, l, , r] = s, i = parseInt(o, 10), u = parseInt(l, 10);
+  let [, o, n, , r] = s, i = parseInt(o, 10), u = parseInt(n, 10);
   return i < 0 || i > 23 || u < 0 || u > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && i < 12 ? i += 12 : r === "AM" && i === 12 && (i = 12)) : i === 0 ? (r = "AM", i = 12) : i < 12 ? r = "AM" : i === 12 ? r = "PM" : (r = "PM", i -= 12), {
     hour: i.toString().padStart(2, "0"),
     minute: u.toString().padStart(2, "0"),
@@ -1397,13 +1397,13 @@ const Gt = y(
      * @returns {object}
      */
     render() {
-      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: l }) => {
-        if (s && (this.state.hour = s), o && (this.state.minute = o), l && (this.state.meridian = l), this.state.hour && this.state.minute && this.state.meridian) {
+      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: n }) => {
+        if (s && (this.state.hour = s), o && (this.state.minute = o), n && (this.state.meridian = n), this.state.hour && this.state.minute && this.state.meridian) {
           const r = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
           this.state.selectedTime = r, this.state.open = !1, this.input.value = r, $.trigger("change", this.input), typeof this.change == "function" && this.change(r);
         }
       };
-      return n(
+      return l(
         { class: "relative w-full max-w-[320px]" },
         [
           at({
@@ -1418,11 +1418,11 @@ const Gt = y(
       );
     }
   }
-), ut = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
-  g({ size: "lg" }, e)
+), ut = (e, t) => l({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+  p({ size: "lg" }, e)
 ]), dt = ({ title: e }) => D({ class: "flex flex-auto items-center" }, [
   v({ class: "text-lg font-semibold" }, e)
-]), ht = c((e, t) => ne(
+]), ht = c((e, t) => le(
   {
     class: `fixed pullUpIn z-30 w-[98%] border md:w-full max-w-lg bg-popover text-foreground shadow-lg duration-200
 				rounded-lg flex flex-auto flex-col
@@ -1431,16 +1431,16 @@ const Gt = y(
     aria: { expanded: ["open"] }
   },
   [
-    n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
+    l({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
       e.icon && ut(e.icon, e.iconColor),
-      n({ class: "flex flex-auto flex-col gap-4" }, [
-        n({ class: "flex flex-auto flex-col space-y-2" }, [
+      l({ class: "flex flex-auto flex-col gap-4" }, [
+        l({ class: "flex flex-auto flex-col gap-y-2" }, [
           dt(e),
           e.description && m({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
-          n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
+          l({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
-        e.buttons && L({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
+        e.buttons && L({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
       ])
     ])
   ]
@@ -1488,13 +1488,13 @@ class mt extends w {
   render() {
     const t = (u) => {
       u.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: l } = R[this.type] || R.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
+    }, { borderColor: s, bgColor: o, iconColor: n } = R[this.type] || R.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
     return ht({
       class: r,
       title: i,
       click: t,
       icon: this.icon,
-      iconColor: l,
+      iconColor: n,
       description: this.description,
       buttons: this.getButtons()
     }, this.children);
@@ -1574,12 +1574,12 @@ class Jt extends mt {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const Kt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
+const Kt = c((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
   J({ class: "flex flex-auto flex-col" }, [
-    n({ class: "flex flex-auto flex-col space-y-4" }, [
-      n({ class: "flex flex-auto items-center justify-center" }, [
-        e.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
-          g(e.icon)
+    l({ class: "flex flex-auto flex-col gap-y-4" }, [
+      l({ class: "flex flex-auto items-center justify-center" }, [
+        e.icon && l({ class: "w-16 h-16 mb-2 text-primary" }, [
+          p(e.icon)
         ])
       ]),
       D({ class: "py-4 text-center" }, [

package/dist/index.es.js

@@ -1,11 +1,11 @@
-import { B as s, C as o, F as t, L as r, P as n, R as l, S as i, a as p, T as m } from "./tooltip-fLU0qdFi.js";
+import { B as s, C as o, F as t, L as r, P as n, R as l, S as i, a as p, T as m } from "./tooltip-EO3J6QFR.js";
 import { B as d, I as g, L as C } from "./buttons-CHEs54Wl.js";
-import { C as T, F as D, V as I, a as b } from "./veil-B1pwIy-D.js";
-import { C as F, d as P, D as B, c as k, E as M, F as f, H as x, I as N, M as v, N as y, P as h, R as L, T as W, a as H, b as A, U as R, W as w } from "./inputs-DYxmO1rQ.js";
+import { C as T, F as D, V as I, a as b } from "./veil-fLMV40Wv.js";
+import { C as F, d as P, D as B, c as k, E as M, F as f, H as x, I as N, M as v, N as y, P as h, R as L, T as W, a as H, b as A, U as R, W as w } from "./inputs-9udyzkHR.js";
 import { Icons as G } from "./icons.es.js";
-import { A as E, B as V, C as j, w as q, J, y as z, z as K, E as Q, G as _, D as X, m as Y, n as Z, O as $, K as aa, v as ea, c as sa, a as oa, b as ta, Q as ra, l as na, g as la, i as ia, h as pa, j as ma, e as ua, k as da, F as ga, d as Ca, f as ca, L as Ta, x as Da, M as Ia, o as ba, N as Sa, P as Fa, s as Pa, t as Ba, S as ka, q as Ma, r as fa, T as xa, H as Na, I as va, p as ya, u as ha } from "./empty-state-9BzsaWJW.js";
-import { A as Wa, b as Ha, C as Aa, D as Ra, a as wa, F as Ua, M as Ga, P as Oa, R as Ea, c as Va, g as ja, p as qa } from "./range-calendar-UXMh98a5.js";
-import { B as za, p as Ka, C as Qa, j as _a, D as Xa, m as Ya, k as Za, H as $a, I as ae, N as ee, O as se, P as oe, S as te, n as re, o as ne, t as le, s as ie, q as pe, r as me, T as ue, l as de, U as ge, W as Ce, f as ce, h as Te, i as De, c as Ie, d as be, b as Se, e as Fe, a as Pe, g as Be } from "./signature-panel-vkcc6Dnu.js";
+import { A as E, B as V, C as j, w as q, J, y as z, z as K, E as Q, G as _, D as X, m as Y, n as Z, O as $, K as aa, v as ea, c as sa, a as oa, b as ta, Q as ra, l as na, g as la, i as ia, h as pa, j as ma, e as ua, k as da, F as ga, d as Ca, f as ca, L as Ta, x as Da, M as Ia, o as ba, N as Sa, P as Fa, s as Pa, t as Ba, S as ka, q as Ma, r as fa, T as xa, H as Na, I as va, p as ya, u as ha } from "./empty-state-BunnaSN9.js";
+import { A as Wa, b as Ha, C as Aa, D as Ra, a as wa, F as Ua, M as Ga, P as Oa, R as Ea, c as Va, g as ja, p as qa } from "./range-calendar-CnBylqhu.js";
+import { B as za, p as Ka, C as Qa, j as _a, D as Xa, m as Ya, k as Za, H as $a, I as ae, N as ee, O as se, P as oe, S as te, n as re, o as ne, t as le, s as ie, q as pe, r as me, T as ue, l as de, U as ge, W as Ce, f as ce, h as Te, i as De, c as Ie, d as be, b as Se, e as Fe, a as Pe, g as Be } from "./signature-panel-CEqzd6Sa.js";
 import { B as Me, I as fe, M as xe, d as Ne, e as ve, g as ye, N as he, b as Le, a as We, f as He, P as Ae, c as Re, S as we, T as Ue } from "./mobile-nav-wrapper-CWqhZ0qz.js";
 import { B as Oe, a as Ee, C as Ve, F as je, b as qe, c as Je, M as ze, P as Ke, S as Qe } from "./sidebar-menu-page-UmKsAvjb.js";
 import { A as Xe, F as Ye, M as Ze, a as $e, T as as } from "./aside-template-sUm-F2f0.js";

package/dist/{inputs-DYxmO1rQ.js → inputs-9udyzkHR.js}

@@ -83,7 +83,7 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
      */
     render() {
       const e = this.getId(), c = (t) => this.clickHandler(t);
-      return u({ class: `flex items-center space-x-2 cursor-pointer ${this.class || ""}` }, [
+      return u({ class: `flex items-center gap-x-2 cursor-pointer ${this.class || ""}` }, [
         w({
           id: e,
           // @ts-ignore
@@ -128,7 +128,7 @@ const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-bo
   ...e,
   as: "textarea",
   class: `flex w-full h-24 px-3 py-2 text-sm ${n} ${o} ${l} ${a} ${e.class || ""}`.trim()
-})), R = (e = {}) => u({ class: "flex items-center space-x-2" }, [
+})), R = (e = {}) => u({ class: "flex items-center gap-x-2" }, [
   r({
     ...e,
     type: "radio",

package/dist/molecules.es.js

@@ -1,5 +1,5 @@
-import { A as s, B as t, C as r, w as e, J as i, y as n, z as m, E as l, G as C, D as d, m as S, n as p, O as u, K as D, v as c, c as g, a as F, b as T, Q as P, l as A, g as f, i as w, h as I, j as b, e as y, k as B, F as M, d as k, f as x, L, x as v, M as E, o as N, N as R, P as U, s as h, t as G, S as O, q as j, r as q, T as z, H, I as J, p as K, u as Q } from "./empty-state-9BzsaWJW.js";
-import { A as V, P as W, g as X } from "./range-calendar-UXMh98a5.js";
+import { A as s, B as t, C as r, w as e, J as i, y as n, z as m, E as l, G as C, D as d, m as S, n as p, O as u, K as D, v as c, c as g, a as F, b as T, Q as P, l as A, g as f, i as w, h as I, j as b, e as y, k as B, F as M, d as k, f as x, L, x as v, M as E, o as N, N as R, P as U, s as h, t as G, S as O, q as j, r as q, T as z, H, I as J, p as K, u as Q } from "./empty-state-BunnaSN9.js";
+import { A as V, P as W, g as X } from "./range-calendar-CnBylqhu.js";
 export {
   s as Alert,
   V as Avatar,

package/dist/organisms.es.js

@@ -1,5 +1,5 @@
-import { B as s, p as t, C as o, j as r, D as n, m as l, k as i, H as b, I as d, N as g, O as p, P as u, S as v, n as D, o as N, t as k, s as C, q as c, r as T, T as M, l as m, U as y, W as B, f as W, h, i as S, c as H, d as P, b as I, e as f, a as x, g as L } from "./signature-panel-vkcc6Dnu.js";
-import { b as F, C as U, D as G, a as R, F as j, M as q, R as w, c as z, p as A } from "./range-calendar-UXMh98a5.js";
+import { B as s, p as t, C as o, j as r, D as n, m as l, k as i, H as b, I as d, N as g, O as p, P as u, S as v, n as D, o as N, t as k, s as C, q as c, r as T, T as M, l as m, U as y, W as B, f as W, h, i as S, c as H, d as P, b as I, e as f, a as x, g as L } from "./signature-panel-CEqzd6Sa.js";
+import { b as F, C as U, D as G, a as R, F as j, M as q, R as w, c as z, p as A } from "./range-calendar-CnBylqhu.js";
 import { B as J, I as K, M as Q, d as V, e as X, g as Y, N as Z, b as _, a as $, f as aa, P as ea, c as sa, S as ta, T as oa } from "./mobile-nav-wrapper-CWqhZ0qz.js";
 export {
   s as BackButton,

package/dist/{range-calendar-UXMh98a5.js → range-calendar-CnBylqhu.js}

@@ -3,10 +3,10 @@ import { Component as O, Data as B, Atom as j, DateTime as T } from "@base-frame
 import { B as f } from "./buttons-CHEs54Wl.js";
 import { Icons as P } from "./icons.es.js";
 const U = (n, t) => {
-  const e = n ? n.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, a = t.getBoundingClientRect(), s = 10, r = globalThis.scrollX, c = globalThis.scrollY;
-  let i = e.left + r, d = e.bottom + c;
+  const e = n ? n.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, a = t.getBoundingClientRect(), s = 10, r = globalThis.scrollX, l = globalThis.scrollY;
+  let i = e.left + r, d = e.bottom + l;
   const g = globalThis.innerHeight - e.bottom, m = e.top;
-  return i + a.width > globalThis.innerWidth && (i = globalThis.innerWidth - a.width - s), g < a.height && m > g ? d = e.top + c - a.height - s : g < a.height && (d = e.bottom + c - (a.height - g) - s), { x: i, y: d };
+  return i + a.width > globalThis.innerWidth && (i = globalThis.innerWidth - a.width - s), g < a.height && m > g ? d = e.top + l - a.height - s : g < a.height && (d = e.bottom + l - (a.height - g) - s), { x: i, y: d };
 };
 class Pt extends O {
   /**
@@ -215,7 +215,7 @@ const q = j(({ src: n, alt: t }) => n ? _({
     date: a,
     isToday: s,
     isOutsideMonth: r,
-    select: c,
+    select: l,
     disabled: i
   } = n;
   return L(
@@ -229,18 +229,18 @@ const q = j(({ src: n, alt: t }) => n ? _({
       disabled: i || t === null,
       "aria-label": t ? `Day ${t}` : null,
       // Only call select if it's not disabled.
-      click: () => !i && c(a)
+      click: () => !i && l(a)
     },
     t.toString()
   );
-}, Y = (n, t, e, a) => n === a.date && t === a.month && e === a.year, ct = (n, t, e, a = !1) => {
-  const { year: s, month: r } = n, c = w(s, r, n.date), i = new Date(s, r, 1).getDay(), d = new Date(s, r + 1, 0).getDate(), g = new Date(s, r, 0).getDate(), m = [], C = r === 0 ? 11 : r - 1, v = r === 0 ? s - 1 : s;
+}, Y = (n, t, e, a) => n === a.date && t === a.month && e === a.year, lt = (n, t, e, a = !1) => {
+  const { year: s, month: r } = n, l = w(s, r, n.date), i = new Date(s, r, 1).getDay(), d = new Date(s, r + 1, 0).getDate(), g = new Date(s, r, 0).getDate(), m = [], C = r === 0 ? 11 : r - 1, v = r === 0 ? s - 1 : s;
   for (let o = i - 1; o >= 0; o--) {
     const u = g - o, p = Y(u, C, v, t), y = new Date(v, C, u) < new Date(t.year, t.month, t.date), x = a && y;
     m.push(
       N({
         day: u,
-        currentDate: c,
+        currentDate: l,
         date: w(v, C, u),
         isToday: p,
         isOutsideMonth: !0,
@@ -254,7 +254,7 @@ const q = j(({ src: n, alt: t }) => n ? _({
     m.push(
       N({
         day: o,
-        currentDate: c,
+        currentDate: l,
         date: w(s, r, o),
         isToday: u,
         isOutsideMonth: !1,
@@ -263,13 +263,13 @@ const q = j(({ src: n, alt: t }) => n ? _({
       })
     );
   }
-  const b = r === 11 ? 0 : r + 1, $ = r === 11 ? s + 1 : s, l = (7 - m.length % 7) % 7;
-  for (let o = 1; o <= l; o++) {
+  const b = r === 11 ? 0 : r + 1, $ = r === 11 ? s + 1 : s, c = (7 - m.length % 7) % 7;
+  for (let o = 1; o <= c; o++) {
     const u = Y(o, b, $, t), p = new Date($, b, o) < new Date(t.year, t.month, t.date), y = a && p;
     m.push(
       N({
         day: o,
-        currentDate: c,
+        currentDate: l,
         date: w($, b, o),
         isToday: u,
         isOutsideMonth: !0,
@@ -292,7 +292,7 @@ const q = j(({ src: n, alt: t }) => n ? _({
     variant: "icon",
     icon: n === "Previous" ? P.chevron.single.left : P.chevron.single.right
   }
-), lt = ({ onMonthClick: n, onYearClick: t, next: e, previous: a }) => h({ class: "flex items-center justify-center space-x-2 relative min-h-12 text-sm font-medium" }, [
+), ct = ({ onMonthClick: n, onYearClick: t, next: e, previous: a }) => h({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
   f({ click: n, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
   f({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
   R({ label: "Previous", click: a }),
@@ -300,8 +300,8 @@ const q = j(({ src: n, alt: t }) => n ? _({
 ]), ht = (n) => h(
   { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
   n
-), ut = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(ht), dt = (n) => h({ class: "rdp w-full space-y-1" }, [
-  lt({
+), ut = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(ht), dt = (n) => h({ class: "rdp flex flex-auto flex-col w-full gap-y-1" }, [
+  ct({
     onMonthClick: n.onMonthClick,
     onYearClick: n.onYearClick,
     next: n.next,
@@ -315,7 +315,7 @@ const q = j(({ src: n, alt: t }) => n ? _({
         h({ class: "grid grid-cols-7" }, ut()),
         h(
           { class: "grid grid-cols-7" },
-          ct(
+          lt(
             n.current,
             n.today,
             n.select,
@@ -326,14 +326,14 @@ const q = j(({ src: n, alt: t }) => n ? _({
     ]
   })
 ]), gt = ({ currentMonth: n, currentYear: t, onSelect: e }) => {
-  const a = t - 50, s = Array.from({ length: 101 }, (r, c) => a + c);
+  const a = t - 50, s = Array.from({ length: 101 }, (r, l) => a + l);
   return h(
     { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
     s.map(
       (r) => f(
         {
-          click: (c) => {
-            c.preventDefault(), c.stopPropagation(), e(r);
+          click: (l) => {
+            l.preventDefault(), l.stopPropagation(), e(r);
           },
           variant: r === t ? "primary" : "ghost",
           "aria-label": `Select ${r}`
@@ -508,7 +508,7 @@ const W = ({ label: n, click: t }) => f(
     variant: "icon",
     icon: n === "Previous" ? P.chevron.single.left : P.chevron.single.right
   }
-), mt = ({ onMonthClick: n, onYearClick: t, next: e, previous: a }) => h({ class: "flex items-center justify-center space-x-2 relative min-h-12 text-sm font-medium" }, [
+), mt = ({ onMonthClick: n, onYearClick: t, next: e, previous: a }) => h({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
   f({ click: n, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
   f({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
   W({ label: "Previous", click: a }),
@@ -516,9 +516,9 @@ const W = ({ label: n, click: t }) => f(
 ]), ft = (n) => h({ class: "h-9 flex items-center justify-center font-medium" }, n), pt = () => h(
   { class: "grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground mb-2" },
   ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(ft)
-), yt = ({ day: n, iso: t, disabled: e, isStart: a, isEnd: s, isBetween: r, isOtherMonth: c, click: i }) => {
+), yt = ({ day: n, iso: t, disabled: e, isStart: a, isEnd: s, isBetween: r, isOtherMonth: l, click: i }) => {
   let d = "ghost", g = "";
-  return a || s ? (d = "default", g = "bg-primary text-primary-foreground hover:bg-primary/90") : r && (g = "bg-accent text-accent-foreground hover:bg-accent/80"), e && (g += " opacity-50 cursor-not-allowed"), c && (g += " text-muted-foreground opacity-50"), f(
+  return a || s ? (d = "default", g = "bg-primary text-primary-foreground hover:bg-primary/90") : r && (g = "bg-accent text-accent-foreground hover:bg-accent/80"), e && (g += " opacity-50 cursor-not-allowed"), l && (g += " text-muted-foreground opacity-50"), f(
     {
       class: `flex items-center justify-center p-0 text-sm font-medium rounded-md transition-colors ${g}`,
       variant: d,
@@ -530,9 +530,9 @@ const W = ({ label: n, click: t }) => f(
     n.toString()
   );
 }, Dt = ({ today: n, current: t, blockPriorDates: e, onDateClick: a }) => {
-  const { start: s, end: r } = t, c = new Date(t.year, t.month, 1).getDay(), i = new Date(t.year, t.month + 1, 0).getDate(), d = [], g = t.month === 0 ? 11 : t.month - 1, m = t.month === 0 ? t.year - 1 : t.year, C = new Date(m, g + 1, 0).getDate(), v = t.month === 11 ? 0 : t.month + 1, b = t.month === 11 ? t.year + 1 : t.year;
-  for (let l = c - 1; l >= 0; l--) {
-    const o = C - l, u = w(m, g, o), p = new Date(m, g, o), y = new Date(n.year, n.month, n.date), x = p < y, M = e && x, S = s === u, k = r === u, X = s && r && u > s && u < r;
+  const { start: s, end: r } = t, l = new Date(t.year, t.month, 1).getDay(), i = new Date(t.year, t.month + 1, 0).getDate(), d = [], g = t.month === 0 ? 11 : t.month - 1, m = t.month === 0 ? t.year - 1 : t.year, C = new Date(m, g + 1, 0).getDate(), v = t.month === 11 ? 0 : t.month + 1, b = t.month === 11 ? t.year + 1 : t.year;
+  for (let c = l - 1; c >= 0; c--) {
+    const o = C - c, u = w(m, g, o), p = new Date(m, g, o), y = new Date(n.year, n.month, n.date), x = p < y, M = e && x, S = s === u, k = r === u, X = s && r && u > s && u < r;
     d.push({
       day: o,
       iso: u,
@@ -544,10 +544,10 @@ const W = ({ label: n, click: t }) => f(
       click: () => a(u)
     });
   }
-  for (let l = 1; l <= i; l++) {
-    const o = w(t.year, t.month, l), u = new Date(t.year, t.month, l), p = new Date(n.year, n.month, n.date), y = u < p, x = e && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
+  for (let c = 1; c <= i; c++) {
+    const o = w(t.year, t.month, c), u = new Date(t.year, t.month, c), p = new Date(n.year, n.month, n.date), y = u < p, x = e && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
     d.push({
-      day: l,
+      day: c,
       iso: o,
       disabled: x,
       isStart: M,
@@ -560,10 +560,10 @@ const W = ({ label: n, click: t }) => f(
     });
   }
   const F = (7 - d.length % 7) % 7;
-  for (let l = 1; l <= F; l++) {
-    const o = w(b, v, l), u = new Date(b, v, l), p = new Date(n.year, n.month, n.date), y = u < p, x = e && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
+  for (let c = 1; c <= F; c++) {
+    const o = w(b, v, c), u = new Date(b, v, c), p = new Date(n.year, n.month, n.date), y = u < p, x = e && y, M = s === o, S = r === o, k = s && r && o > s && o < r;
     d.push({
-      day: l,
+      day: c,
       iso: o,
       disabled: x,
       isStart: M,
@@ -576,15 +576,15 @@ const W = ({ label: n, click: t }) => f(
   return h(
     { class: "grid grid-cols-7 gap-1" },
     d.map(
-      (l, o) => yt({
-        day: l.day,
-        iso: l.iso,
-        disabled: l.disabled,
-        isStart: l.isStart,
-        isEnd: l.isEnd,
-        isBetween: l.isBetween,
-        isOtherMonth: l.isOtherMonth,
-        click: l.click
+      (c, o) => yt({
+        day: c.day,
+        iso: c.iso,
+        disabled: c.disabled,
+        isStart: c.isStart,
+        isEnd: c.isEnd,
+        isBetween: c.isBetween,
+        isOtherMonth: c.isOtherMonth,
+        click: c.click
       })
     )
   );
@@ -624,7 +624,7 @@ const W = ({ label: n, click: t }) => f(
       a.substring(0, 3)
     )
   )
-), vt = ({ start: n, end: t, selecting: e, onSelectStart: a, onSelectEnd: s }) => h({ class: "flex space-x-2 mb-4" }, [
+), vt = ({ start: n, end: t, selecting: e, onSelectStart: a, onSelectEnd: s }) => h({ class: "flex gap-x-2 mb-4" }, [
   z("selecting", (r) => f({
     click: a,
     variant: r === "start" ? "primary" : "outline",
@@ -761,15 +761,15 @@ class Yt extends O {
         start: s,
         end: r,
         selecting: a,
-        onSelectStart: (c) => {
-          c.preventDefault(), c.stopPropagation(), this.data.selecting = "start";
+        onSelectStart: (l) => {
+          l.preventDefault(), l.stopPropagation(), this.data.selecting = "start";
         },
-        onSelectEnd: (c) => {
-          c.preventDefault(), c.stopPropagation(), this.data.selecting = "end";
+        onSelectEnd: (l) => {
+          l.preventDefault(), l.stopPropagation(), this.data.selecting = "end";
         }
       }),
-      J("view", (c) => {
-        switch (c) {
+      J("view", (l) => {
+        switch (l) {
           case "months":
             return wt(
               {
@@ -819,7 +819,7 @@ class Yt extends O {
 }
 export {
   Tt as A,
-  ct as C,
+  lt as C,
   N as D,
   w as F,
   dt as M,

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

@@ -3,8 +3,8 @@ import { Atom as d, Component as u, Data as L, DateTime as G, router as b, NavLi
 import { B as T, I as _ } from "./buttons-CHEs54Wl.js";
 import { Icons as k } from "./icons.es.js";
 import { TableBody as J, DataTableBody as Z, ScrollableTableBody as ee, List as te, IntervalTimer as se } from "@base-framework/organisms";
-import { C as ae, I as ie, H as ne } from "./inputs-DYxmO1rQ.js";
-import { A as oe, P as le } from "./range-calendar-UXMh98a5.js";
+import { C as ae, I as ie, H as ne } from "./inputs-9udyzkHR.js";
+import { A as oe, P as le } from "./range-calendar-CnBylqhu.js";
 d((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
@@ -732,7 +732,7 @@ class dt extends u {
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
         w({
-          class: "flex space-x-4",
+          class: "flex gap-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
             value: ["[[path]]", b.data],

package/dist/{tooltip-fLU0qdFi.js → tooltip-EO3J6QFR.js}

@@ -1,7 +1,7 @@
 import { Span as c, Legend as b, Fieldset as p, Div as l, UseParent as u, Input as C } from "@base-framework/atoms";
 import { Atom as s, Html as x } from "@base-framework/base";
-import { a as d } from "./veil-B1pwIy-D.js";
-import { f as h, e as y, g as k } from "./inputs-DYxmO1rQ.js";
+import { a as d } from "./veil-fLMV40Wv.js";
+import { f as h, e as y, g as k } from "./inputs-9udyzkHR.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -94,7 +94,7 @@ const a = {
     class: `p-6 ${r} ${t.class || ""}`
   }, [
     t.legend && v(t.legend),
-    l({ class: "flex flex-auto flex-col space-y-6" }, e)
+    l({ class: "flex flex-auto flex-col gap-y-6" }, e)
   ]);
 }), I = d(
   {

package/dist/{veil-B1pwIy-D.js → veil-fLMV40Wv.js}

@@ -1,12 +1,12 @@
-import { Div as s, H4 as l, P as d } from "@base-framework/atoms";
-import { Atom as r, Jot as o, Component as c } from "@base-framework/base";
-const u = r((t, a) => {
-  const e = t.margin ?? "my-5 mx-5", n = t.padding ?? "p-4";
+import { Div as s, H4 as n, P as o } from "@base-framework/atoms";
+import { Atom as l, Jot as d, Component as c } from "@base-framework/base";
+const g = l((t, a) => {
+  const e = t.margin ?? "my-5 mx-5", r = t.padding ?? "p-4";
   return t.hover && (t.class += " hover:shadow-lg hover:bg-muted/50"), s({
     ...t,
-    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${n} ${t.class || ""}`
+    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${r} ${t.class || ""}`
   }, a);
-}), x = r((t, a) => {
+}), u = l((t, a) => {
   const e = t.border === !0 ? "border-t" : "";
   return s({
     ...t,
@@ -14,13 +14,13 @@ const u = r((t, a) => {
   }, [
     t.label && s({
       ...t.labelProps,
-      class: `space-y-1 ${t.labelProps?.class || ""}`
+      class: `flex flex-auto flex-col gap-y-1 ${t.labelProps?.class || ""}`
     }, [
-      l({ class: "text-base" }, t.label),
-      t.description && d({ class: "text-sm text-muted-foreground" }, t.description)
+      n({ class: "text-base" }, t.label),
+      t.description && o({ class: "text-sm text-muted-foreground" }, t.description)
     ]),
     // Controls container: grows to fill remaining space, spacing between items
-    s({ class: "flex flex-col space-y-4" }, a)
+    s({ class: "flex flex-col gap-y-4" }, a)
   ]);
 });
 class i extends c {
@@ -37,10 +37,10 @@ class i extends c {
     return e ? { data: e } : null;
   }
 }
-const b = (t) => o(t, i);
+const f = (t) => d(t, i);
 export {
-  u as C,
-  x as F,
+  g as C,
+  u as F,
   i as V,
-  b as a
+  f as a
 };

package/package.json

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