@base-framework/ui 1.0.268 → 1.0.270

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-05O5vIt1.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-Cok_NM7z.js";
 import { B as d, I as m, L as C } from "./buttons-BKLL4I6r.js";
 import { C as x, F as B, V as F, a as c } from "./veil-tVDPinrr.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-CGtqFgi8.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";
 export {
   e as Badge,
   d as Button,

package/dist/{empty-state-D-3YYs2T.js → empty-state-qfZvAfRD.js}

@@ -1,7 +1,7 @@
-import { Div as n, H5 as J, P as m, I as p, Li as U, Span as i, Ul as V, Button as f, OnState as x, Label as R, H2 as v, Form as K, Header as I, Footer as A, A as q, H3 as Q, Checkbox as X, Input as w, Img as Z, Nav as ee, UseParent as H, Time as te, Dialog as se } from "@base-framework/atoms";
+import { Div as n, H5 as J, P as m, I as p, Li as U, Span as a, Ul as V, Button as f, OnState as x, Label as R, H2 as v, Form as K, Header as I, Footer as A, A as q, H3 as Q, Checkbox as X, Input as w, Img as Z, Nav as ee, UseParent as H, Time as te, Dialog as se } from "@base-framework/atoms";
 import { Atom as c, Component as C, Html as L, Dom as oe, base as ne, Data as $, Builder as Y, Jot as k, Events as le, DateTime as F } from "@base-framework/base";
-import { P as S, b as re, R as ae } from "./range-calendar-DW0cMOJy.js";
-import { C as ie, F as ce, a as y } from "./veil-tVDPinrr.js";
+import { P as S, b as re, R as ie } from "./range-calendar-DW0cMOJy.js";
+import { C as ae, F as ce, a as y } from "./veil-tVDPinrr.js";
 import { B as h, I as g } from "./buttons-BKLL4I6r.js";
 import { Icons as u } from "./icons.es.js";
 import { Timer as de, List as ue, DynamicTime as he } from "@base-framework/organisms";
@@ -35,10 +35,10 @@ const M = {
 }, fe = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   p({ html: e })
 ]), me = (e) => J({ 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: l, bgColor: r, iconColor: a } = M[o] || M.default;
+  const { borderColor: l, bgColor: r, iconColor: i } = M[o] || M.default;
   return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
     // Icon and content
-    s && fe(s, a),
+    s && fe(s, i),
     n({ class: "flex flex-col" }, [
       me(e),
       pe(t)
@@ -69,7 +69,7 @@ class ge extends C {
     oe.addClass(t, s), ne.on("animationend", t, (o) => L.removeElement(t));
   }
 }
-const be = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), xe = (e) => i({ class: "flex w-4 h-4", html: e }), we = (e) => i({ class: "flex-auto" }, e), ye = (e, t) => U({
+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) => U({
   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: () => t(e)
 }, [
@@ -90,7 +90,7 @@ const be = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
 			focus:outline-none transition duration-150 ease-in-out`,
   click: s
 }, [
-  e && i(e),
+  e && a(e),
   t && p({ html: t })
 ]), Se = ({ onSelect: e }) => n([
   x(
@@ -167,7 +167,7 @@ class St extends C {
     ]);
   }
 }
-const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ie = c((e, t) => R({ ...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)), Dt = c((e, t = []) => ie({ class: "space-y-0", margin: "m-0", padding: "p-0" }, [
+const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ie = c((e, t) => R({ ...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)), Dt = c((e, t = []) => ae({ class: "space-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
@@ -240,16 +240,16 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   e.title && v({ class: "font-semibold" }, e.title),
   ...t
 ])), At = (e, t) => n({ class: "flex justify-between" }, [
-  i({ class: "text-muted-foreground" }, e),
-  i(t)
+  a({ class: "text-muted-foreground" }, e),
+  a(t)
 ]), Lt = (e, t) => n({ class: "flex" }, [
-  i({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
-  i(t)
+  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 = [] }) => I({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
-  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, a) => a.close() }),
+  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, i) => i.close() }),
   /**
    * Icon
    */
@@ -618,7 +618,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   }
 }, [
   g(s),
-  i(t)
+  a(t)
 ])), Ue = (e) => {
   var o;
   const t = document.documentElement;
@@ -700,7 +700,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
           bind: this.bind,
           required: this.required
         }),
-        i({
+        a({
           class: "absolute h-5 w-5 bg-background rounded-full shadow-md transform transition-transform",
           onState: ["active", { "translate-x-[22px]": !0, "translate-x-[2px]": !1 }]
         })
@@ -809,13 +809,13 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [i(t)]
+  [a(t)]
 ), qe = () => g({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
 }, u.chevron.single.right), He = (e) => n({ class: "flex items-center" }, [
-  e.href ? Re(e.href, e.label) : i(e.label),
+  e.href ? Re(e.href, e.label) : a(e.label),
   e.separator && qe()
 ]), Ut = k(
   {
@@ -866,7 +866,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
 }, Ye = (e) => E[e] || E.default, _e = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
-  i({
+  a({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
       "bg-primary": e,
@@ -917,7 +917,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     click: e
   },
   [
-    i({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
     p({ html: u.chevron.upDown })
   ]
 ), Je = (e, t, s) => U({
@@ -925,8 +925,8 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   click: () => t(e),
   onState: [s, "selectedValue", { "bg-secondary": e.value }]
 }, [
-  e.icon && i({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, e.icon)]),
-  i({ class: "text-base font-normal" }, e.label)
+  e.icon && a({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, e.icon)]),
+  a({ class: "text-base font-normal" }, e.label)
 ]), Ke = (e, t) => n({ class: "w-full border rounded-md" }, [
   V({ 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" }, [
@@ -1059,9 +1059,9 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
 }), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => H(({ state: l }) => w({
   value: ["[[count]]", l],
   bind: e,
-  blur: (r, { state: a }) => {
+  blur: (r, { state: i }) => {
     let d = parseInt(r.target.value, 10);
-    isNaN(d) && (d = t ?? 0), t !== void 0 && (d = Math.max(d, t)), s !== void 0 && (d = Math.min(d, s)), a.count = d;
+    isNaN(d) && (d = t ?? 0), t !== void 0 && (d = Math.max(d, t)), s !== void 0 && (d = Math.min(d, s)), i.count = d;
   },
   class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
   readonly: o,
@@ -1113,7 +1113,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   click: s
 }, [
   tt({ bind: e, required: t }),
-  i({
+  a({
     onState: ["selectedDate", (o) => o ? F.format("standard", o) : "Pick a date"]
   }),
   p({ html: u.calendar.days })
@@ -1186,9 +1186,9 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
 }, [
   nt({ bind: e, required: t }),
   H(({ state: o }) => [
-    i(P.date(["[[start]]", o], "Start Date")),
-    i(" - "),
-    i(P.date(["[[end]]", o], "End Date"))
+    a(P.date(["[[start]]", o], "Start Date")),
+    a(" - "),
+    a(P.date(["[[end]]", o], "End Date"))
   ]),
   p({ html: u.calendar.days })
 ]), rt = ({ handleDateSelect: e, blockPriorDates: t }) => x(
@@ -1199,7 +1199,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     button: l.panel,
     size: "xl"
   }, [
-    new ae({
+    new ie({
       startDate: l.state.start,
       endDate: l.state.end,
       onRangeSelect: e,
@@ -1263,7 +1263,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     })
   })
 ]);
-function at({ bind: e, required: t }) {
+function it({ bind: e, required: t }) {
   return w({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
@@ -1271,15 +1271,15 @@ function at({ bind: e, required: t }) {
     required: t
   });
 }
-function it({ bind: e, required: t, toggleOpen: s }) {
+function at({ bind: e, required: t, toggleOpen: s }) {
   return f(
     {
-      class: "relative flex items-center gap-2 w-full justify-between border bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
+      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
     },
     [
-      at({ bind: e, required: t }),
-      i({
+      it({ bind: e, required: t }),
+      a({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
       p({ html: u.clock })
@@ -1290,12 +1290,12 @@ function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
     e.map((r) => {
-      let a = l ? r.toString().padStart(2, "0") : r.toString();
+      let i = l ? r.toString().padStart(2, "0") : r.toString();
       return f({
-        text: a,
+        text: i,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
-        click: () => t({ [o]: a }),
-        onState: [s, o, { "bg-muted": a }]
+        click: () => t({ [o]: i }),
+        onState: [s, o, { "bg-muted": i }]
       });
     })
   );
@@ -1354,9 +1354,9 @@ function j(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, a = parseInt(o, 10), d = parseInt(l, 10);
-  return a < 0 || a > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && a < 12 ? a += 12 : r === "AM" && a === 12 && (a = 12)) : a === 0 ? (r = "AM", a = 12) : a < 12 ? r = "AM" : a === 12 ? r = "PM" : (r = "PM", a -= 12), {
-    hour: a.toString().padStart(2, "0"),
+  let [, o, l, , r] = s, i = parseInt(o, 10), d = parseInt(l, 10);
+  return i < 0 || i > 23 || d < 0 || d > 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: d.toString().padStart(2, "0"),
     meridian: r
   });
@@ -1409,7 +1409,7 @@ const Wt = y(
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          it({
+          at({
             toggleOpen: e,
             bind: this.bind,
             required: this.required
@@ -1491,10 +1491,10 @@ class mt extends C {
   render() {
     const t = (d) => {
       d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${o} ${s}`, a = this.title || "Dialog Title";
+    }, { borderColor: s, bgColor: o, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
     return ht({
       class: r,
-      title: a,
+      title: i,
       click: t,
       icon: this.icon,
       iconColor: l,

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-05O5vIt1.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-Cok_NM7z.js";
 import { B as d, I as g, L as C } from "./buttons-BKLL4I6r.js";
 import { C as T, F as D, V as I, a as b } from "./veil-tVDPinrr.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-CGtqFgi8.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 { 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-D-3YYs2T.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-qfZvAfRD.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-DW0cMOJy.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-7O22-IGI.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-BXbbFwMm.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-C7RyGC5a.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-BtUJdw-T.js";
 import { A as Xe, F as Ye, M as Ze, a as $e, T as as } from "./aside-template-McEj_Gxc.js";

package/dist/{inputs-CGtqFgi8.js → inputs-DYxmO1rQ.js}

@@ -1,29 +1,29 @@
-import { Div as l, Label as d, Checkbox as u, Span as m, OnState as g, I as p, Input as r, Textarea as x } from "@base-framework/atoms";
-import { Jot as k, Atom as s } from "@base-framework/base";
+import { Div as u, Label as h, Checkbox as m, Span as $, OnState as p, I as x, Input as r, Textarea as k } from "@base-framework/atoms";
+import { Jot as g, Atom as s } from "@base-framework/base";
 import { Icons as y } from "./icons.es.js";
-const v = "flex h-10 w-full px-3 py-2 text-sm", $ = "rounded-md border border-border bg-input", n = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", i = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", b = "placeholder:text-muted-foreground", f = `${v} ${$} ${n} ${b} ${i}`, I = ({ id: e, checked: o, bind: t, required: a }) => u({
+const I = "flex h-10 w-full px-3 py-2 text-sm", n = "rounded-md border border-border bg-input", o = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", a = "disabled:cursor-not-allowed disabled:opacity-50 [&:user-invalid]:border-destructive", l = "placeholder:text-muted-foreground", f = `${I} ${n} ${o} ${l} ${a}`, C = ({ id: e, checked: c, bind: t, required: d }) => m({
   id: e,
   cache: "checkbox",
   class: "absolute opacity-0 w-full h-full cursor-pointer pointer-events-none",
   aria: {
     checked: ["checked"]
   },
-  required: a,
-  checked: o,
+  required: d,
+  checked: c,
   bind: t
-}), C = () => m({ class: "absolute text-xs pointer-events-none" }, [
-  g(
+}), v = () => $({ class: "absolute text-xs pointer-events-none" }, [
+  p(
     "checked",
-    (e) => e ? p({
+    (e) => e ? x({
       class: "w-2 h-2 pointer-events-none",
       html: y.check
     }) : null
   )
-]), w = ({ id: e, bind: o, checked: t, required: a, clickHandler: h }) => l({
+]), w = ({ id: e, bind: c, checked: t, required: d, clickHandler: b }) => u({
   class: `relative flex items-center justify-center w-5 h-5 transition-colors duration-200 hover:border-accent-foreground
 			rounded-md border
-			${n}
-			${i}`.trim(),
+			${o}
+			${a}`.trim(),
   onState: [
     "checked",
     {
@@ -37,15 +37,15 @@ const v = "flex h-10 w-full px-3 py-2 text-sm", $ = "rounded-md border border-bo
     checked: ["checked"]
   },
   tabIndex: 0,
-  click: h
+  click: b
 }, [
-  I({ bind: o, checked: t, id: e, required: a }),
-  C()
-]), T = ({ id: e, label: o, clickHandler: t }) => d({
+  C({ bind: c, checked: t, id: e, required: d }),
+  v()
+]), T = ({ id: e, label: c, clickHandler: t }) => h({
   class: "text-base cursor-pointer",
   htmlFor: e,
   click: t
-}, o), L = k(
+}, c), L = g(
   {
     /**
      * This will initialize the state of the checkbox.
@@ -82,8 +82,8 @@ const v = "flex h-10 w-full px-3 py-2 text-sm", $ = "rounded-md border border-bo
      * @returns {object}
      */
     render() {
-      const e = this.getId(), o = (t) => this.clickHandler(t);
-      return l({ class: `flex items-center space-x-2 cursor-pointer ${this.class || ""}` }, [
+      const e = this.getId(), c = (t) => this.clickHandler(t);
+      return u({ class: `flex items-center space-x-2 cursor-pointer ${this.class || ""}` }, [
         w({
           id: e,
           // @ts-ignore
@@ -93,10 +93,10 @@ const v = "flex h-10 w-full px-3 py-2 text-sm", $ = "rounded-md border border-bo
           // @ts-ignore
           required: this.required,
           // @ts-ignore
-          clickHandler: o
+          clickHandler: c
         }),
         // @ts-ignore
-        this.label && T({ id: e, label: this.label, clickHandler: o })
+        this.label && T({ id: e, label: this.label, clickHandler: c })
       ]);
     }
   }
@@ -105,12 +105,12 @@ const v = "flex h-10 w-full px-3 py-2 text-sm", $ = "rounded-md border border-bo
   const t = e.replace(/\D/g, "").match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
   return t ? t[2] ? `(${t[1]}) ${t[2]}${t[3] ? "-" + t[3] : ""}` : t[1] || "" : e;
 }, D = (e) => {
-  const o = e.target, t = H(o.value);
-  t && (o.value = t);
-}, c = s((e) => r({
+  const c = e.target, t = H(c.value);
+  t && (c.value = t);
+}, i = s((e) => r({
   ...e,
   class: `${f} ${e.class || ""}`.trim()
-})), M = s((e) => c({
+})), M = s((e) => i({
   ...e,
   type: "tel",
   name: e.name || "Phone",
@@ -118,68 +118,68 @@ const v = "flex h-10 w-full px-3 py-2 text-sm", $ = "rounded-md border border-bo
   placeholder: "(555) 555-5555",
   pattern: e.pattern || "\\(\\d{3}\\) \\d{3}-\\d{4}",
   keyup: D
-})), S = s((e) => c({
+})), S = s((e) => i({
   ...e,
   type: "email",
   name: e.name || "Email",
   label: e.label || "Email",
   placeholder: "Email address"
-})), q = s((e) => x({
+})), q = s((e) => k({
   ...e,
   as: "textarea",
-  class: `flex w-full h-24 px-3 py-2 text-sm rounded-md border bg-input ${n} ${b} ${i} ${e.class || ""}`.trim()
-})), R = (e = {}) => l({ class: "flex items-center space-x-2" }, [
+  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,
     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 && d({ forHTML: e.value, class: "cursor-pointer" }, e.label)
+  e.label && h({ forHTML: e.value, class: "cursor-pointer" }, e.label)
 ]), U = s((e) => r({
   ...e,
   type: "date",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
 })), W = s((e) => r({
   ...e,
   type: "time",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
 })), j = s((e) => r({
   ...e,
   type: "datetime-local",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
 })), z = s((e) => r({
   ...e,
   type: "month",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
 })), A = s((e) => r({
   ...e,
   type: "week",
-  class: `rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
-})), B = s((e) => c({
+  class: `${n} ${o} ${l} ${a} px-3 py-2 text-sm ring-offset-background ${e.class || ""}`.trim()
+})), B = s((e) => i({
   ...e,
   type: "number"
-})), J = s((e) => c({
+})), J = s((e) => i({
   ...e,
   type: "password"
 }));
-s((e) => c({
+s((e) => i({
   ...e,
   type: "search"
 }));
-const O = s((e) => c({
+const O = s((e) => i({
   ...e,
   type: "url"
-})), G = s((e) => c({
+})), G = s((e) => i({
   ...e,
   type: "hidden"
 })), K = s((e) => r({
   ...e,
   type: "color",
-  class: `border rounded-md bg-input text-foreground p-0 disabled:cursor-not-allowed disabled:opacity-50 ${e.class || ""}`.trim()
+  class: `${n} text-foreground p-0 ${a} ${e.class || ""}`.trim()
 }));
-s((e) => u({
+s((e) => m({
   ...e,
-  class: `flex h-4 w-4 rounded-md border bg-input text-foreground ${n} ${i} ${e.class || ""}`.trim()
+  class: `flex h-4 w-4 text-foreground ${n} ${o} ${a} ${e.class || ""}`.trim()
 }));
 const E = "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", Q = s((e) => r({
   ...e,
@@ -192,7 +192,7 @@ export {
   S as E,
   Q as F,
   G as H,
-  c as I,
+  i as I,
   z as M,
   B as N,
   J as P,
@@ -204,7 +204,7 @@ export {
   W as b,
   j as c,
   K as d,
-  i as e,
-  n as f,
+  a as e,
+  o as f,
   f as g
 };

package/dist/molecules.es.js

@@ -1,4 +1,4 @@
-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-D-3YYs2T.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-qfZvAfRD.js";
 import { A as V, P as W, g as X } from "./range-calendar-DW0cMOJy.js";
 export {
   s as Alert,

package/dist/organisms.es.js

@@ -1,4 +1,4 @@
-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-7O22-IGI.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-BXbbFwMm.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-DW0cMOJy.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-C7RyGC5a.js";
 export {

package/dist/{signature-panel-7O22-IGI.js → signature-panel-BXbbFwMm.js}

@@ -3,7 +3,7 @@ import { Atom as d, Component as h, Data as C, DateTime as G, router as y, NavLi
 import { B as T, I as _ } from "./buttons-BKLL4I6r.js";
 import { Icons as x } 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-CGtqFgi8.js";
+import { C as ae, I as ie, H as ne } from "./inputs-DYxmO1rQ.js";
 import { A as oe, P as le } from "./range-calendar-DW0cMOJy.js";
 d((t, e) => ({
   class: "flex items-center px-4 py-2",

package/dist/{tooltip-05O5vIt1.js → tooltip-Cok_NM7z.js}

@@ -1,7 +1,7 @@
 import { Span as c, Legend as b, Fieldset as C, Div as l, UseParent as u, Input as x } from "@base-framework/atoms";
 import { Atom as s, Html as p } from "@base-framework/base";
 import { a as d } from "./veil-tVDPinrr.js";
-import { f as h, e as y, g as k } from "./inputs-CGtqFgi8.js";
+import { f as h, e as y, g as k } from "./inputs-DYxmO1rQ.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",

package/package.json

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