@base-framework/ui 1.0.248 → 1.0.249

package/dist/{empty-state-aIT29dVl.js → empty-state-Dct3Y9SD.js}

@@ -1,10 +1,10 @@
-import { Div as n, H5 as G, P as b, I as m, Li as V, Span as a, Ul as U, Button as f, OnState as x, Label as q, Form as K, H2 as D, Header as I, Footer as L, A as H, H3 as Q, Checkbox as X, Input as w, Img as Z, Nav as ee, UseParent as R, Time as te, Dialog as se } from "@base-framework/atoms";
-import { Atom as c, Component as v, Html as P, Dom as oe, base as ne, Data as $, Builder as Y, Jot as C, Events as le, DateTime as A } from "@base-framework/base";
-import { P as k, b as re, R as ie } from "./range-calendar-k0B4ZWJq.js";
+import { Div as n, H5 as G, P as b, I as m, Li as V, Span as i, Ul as U, Button as f, OnState as x, Label as q, Form as K, H2 as D, Header as I, Footer as L, A as H, H3 as Q, Checkbox as X, Input as w, Img as Z, Nav as ee, UseParent as R, Time as te, Dialog as se } from "@base-framework/atoms";
+import { Atom as c, Component as y, Html as P, Dom as oe, base as ne, Data as $, Builder as Y, Jot as C, Events as le, DateTime as A } from "@base-framework/base";
+import { P as k, b as re, R as ae } from "./range-calendar-k0B4ZWJq.js";
 import { B as h, I as p } from "./buttons-Cm9etaEG.js";
 import { Icons as u } from "./icons.es.js";
-import { Timer as ae, List as ce, DynamicTime as de } from "@base-framework/organisms";
-import { a as y } from "./veil-D4dRxILB.js";
+import { Timer as ie, List as ce, DynamicTime as de } from "@base-framework/organisms";
+import { a as v } from "./veil-D4dRxILB.js";
 import { F } from "./format-DnofNaaz.js";
 const M = {
   info: {
@@ -34,18 +34,18 @@ const M = {
   }
 }, ue = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   m({ html: e })
-]), he = (e) => G({ class: "font-semibold" }, e), fe = (e) => b({ class: "text-sm text-muted-foreground" }, e), vt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: l, bgColor: r, iconColor: i } = M[o] || M.default;
+]), he = (e) => G({ class: "font-semibold" }, e), fe = (e) => b({ class: "text-sm text-muted-foreground" }, e), yt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: l, bgColor: r, iconColor: a } = M[o] || M.default;
   return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
     // Icon and content
-    s && ue(s, i),
+    s && ue(s, a),
     n({ class: "flex flex-col" }, [
       he(e),
       fe(t)
     ])
   ]);
 });
-class me extends v {
+class me extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -69,7 +69,7 @@ class me extends v {
     oe.addClass(t, s), ne.on("animationend", t, (o) => P.removeElement(t));
   }
 }
-const pe = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), ge = (e) => a({ class: "flex w-4 h-4", html: e }), be = (e) => a({ class: "flex-auto" }, e), xe = (e, t) => V({
+const pe = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), ge = (e) => i({ class: "flex w-4 h-4", html: e }), be = (e) => i({ class: "flex-auto" }, e), xe = (e, t) => V({
   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)
 }, [
@@ -78,19 +78,19 @@ const pe = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
   e.shortcut && pe(e.shortcut)
 ]), we = (e, t) => U({ class: "grid gap-2" }, [
   e.map((s) => xe(s, t))
-]), ye = (e) => n({ class: "w-full z-10" }, [
+]), ve = (e) => n({ class: "w-full z-10" }, [
   n({
     class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
     for: ["groups", (t) => we(t, e)]
   })
-]), ve = ({ label: e, icon: t, toggleDropdown: s }) => f({
+]), ye = ({ label: e, icon: t, toggleDropdown: s }) => f({
   cache: "button",
   class: `inline-flex items-center justify-between rounded-md border border-input
 			bg-background px-2 py-2 text-sm font-medium hover:bg-muted
 			focus:outline-none transition duration-150 ease-in-out`,
   click: s
 }, [
-  e && a(e),
+  e && i(e),
   t && m({ html: t })
 ]), Ce = ({ onSelect: e }) => n([
   x(
@@ -100,11 +100,11 @@ const pe = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
       parent: o,
       button: o.button
     }, [
-      ye(e)
+      ve(e)
     ]) : null
   )
 ]);
-class Ct extends v {
+class Ct extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -158,7 +158,7 @@ class Ct extends v {
    */
   render() {
     return n({ class: "relative" }, [
-      ve({
+      ye({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
@@ -184,7 +184,7 @@ const ke = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
     ...e,
     class: "w-full"
   }, l);
-}), kt = y(
+}), kt = v(
   {
     /**
      * The initial state of the FormField.
@@ -231,16 +231,16 @@ const ke = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   e.title && D({ class: "font-semibold" }, e.title),
   ...t
 ])), It = (e, t) => n({ class: "flex justify-between" }, [
-  a({ class: "text-muted-foreground" }, e),
-  a(t)
+  i({ class: "text-muted-foreground" }, e),
+  i(t)
 ]), $t = (e, t) => n({ class: "flex" }, [
-  a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
-  a(t)
+  i({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
+  i(t)
 ]), Ae = ({ 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, i) => i.close() }),
+  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, a) => a.close() }),
   /**
    * Icon
    */
@@ -268,7 +268,7 @@ const ke = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, 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)
   ])
 ])), Pe = (e) => Y.render(e, app.root);
-class Tt extends v {
+class Tt extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -504,7 +504,7 @@ class Ne extends me {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new ae(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new ie(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -565,7 +565,7 @@ class Ne extends me {
   }
 }
 let Ee = 0;
-class Bt extends v {
+class Bt extends y {
   /**
    * This will render the component.
    *
@@ -609,7 +609,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   }
 }, [
   p(s),
-  a(t)
+  i(t)
 ])), je = (e) => {
   var o;
   const t = document.documentElement;
@@ -646,7 +646,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       };
     }
   }
-), Lt = y(
+), Lt = v(
   {
     /**
      * The initial state of the Toggle.
@@ -691,7 +691,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
           bind: this.bind,
           required: this.required
         }),
-        a({
+        i({
           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 }]
         })
@@ -738,7 +738,9 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", le.trigger("click", e));
+      e && (e.value = "", le.trigger("click", e, {
+        bubbles: !1
+      }));
     },
     /**
      * Render the component.
@@ -748,9 +750,10 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     render() {
       const e = "logo-upload", t = this.onChange || null;
       return n({
-        class: "relative w-32 h-32 rounded-full border border-muted-foreground flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group",
-        // @ts-ignore
-        click: () => this.openFileBrowse()
+        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();
+        }
       }, [
         w({
           id: e,
@@ -788,13 +791,13 @@ const N = 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"
   },
-  [a(t)]
+  [i(t)]
 ), Ue = () => p({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
 }, u.chevron.single.right), qe = (e) => n({ class: "flex items-center" }, [
-  e.href ? Ve(e.href, e.label) : a(e.label),
+  e.href ? Ve(e.href, e.label) : i(e.label),
   e.separator && Ue()
 ]), zt = C(
   {
@@ -845,7 +848,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
 }, He = (e) => E[e] || E.default, Re = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
-  a({
+  i({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
       "bg-primary": e,
@@ -896,7 +899,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     click: e
   },
   [
-    a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    i({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
     m({ html: u.chevron.upDown })
   ]
 ), We = (e, t, s) => V({
@@ -904,8 +907,8 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   click: () => t(e),
   onState: [s, "selectedValue", { "bg-secondary": e.value }]
 }, [
-  e.icon && a({ class: "mr-2 flex items-baseline" }, [p({ size: "xs" }, e.icon)]),
-  a({ class: "text-base font-normal" }, e.label)
+  e.icon && i({ class: "mr-2 flex items-baseline" }, [p({ size: "xs" }, e.icon)]),
+  i({ class: "text-base font-normal" }, e.label)
 ]), Je = (e, t) => n({ class: "w-full border rounded-md" }, [
   U({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => We(s, e, t)] })
 ]), Ge = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
@@ -1038,9 +1041,9 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
 }), Xe = ({ bind: e, min: t, max: s, readonly: o = !1 }) => R(({ state: l }) => w({
   value: ["[[count]]", l],
   bind: e,
-  blur: (r, { state: i }) => {
+  blur: (r, { state: a }) => {
     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)), i.count = d;
+    isNaN(d) && (d = t ?? 0), t !== void 0 && (d = Math.max(d, t)), s !== void 0 && (d = Math.min(d, s)), a.count = d;
   },
   class: "flex flex-auto text-lg font-medium bg-transparent text-center border min-w-0",
   readonly: o,
@@ -1048,7 +1051,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), jt = y(
+})), jt = v(
   {
     /**
      * Initial state for the counter component.
@@ -1092,7 +1095,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   click: s
 }, [
   Ze({ bind: e, required: t }),
-  a({
+  i({
     onState: ["selectedDate", (o) => o ? A.format("standard", o) : "Pick a date"]
   }),
   m({ html: u.calendar.days })
@@ -1110,7 +1113,7 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       blockPriorDates: t
     })
   ]) : null
-), Ot = y(
+), Ot = v(
   {
     /**
      * The initial state of the DatePicker.
@@ -1165,9 +1168,9 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
 }, [
   st({ bind: e, required: t }),
   R(({ state: o }) => [
-    a(F.date(["[[start]]", o], "Start Date")),
-    a(" - "),
-    a(F.date(["[[end]]", o], "End Date"))
+    i(F.date(["[[start]]", o], "Start Date")),
+    i(" - "),
+    i(F.date(["[[end]]", o], "End Date"))
   ]),
   m({ html: u.calendar.days })
 ]), nt = ({ handleDateSelect: e, blockPriorDates: t }) => x(
@@ -1178,14 +1181,14 @@ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     button: l.panel,
     size: "xl"
   }, [
-    new ie({
+    new ae({
       startDate: l.state.start,
       endDate: l.state.end,
       onRangeSelect: e,
       blockPriorDates: t
     })
   ]) : null
-), Vt = y(
+), Vt = v(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1258,7 +1261,7 @@ function rt({ bind: e, required: t, toggleOpen: s }) {
     },
     [
       lt({ bind: e, required: t }),
-      a({
+      i({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
       m({ html: u.clock })
@@ -1269,17 +1272,17 @@ 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 i = l ? r.toString().padStart(2, "0") : r.toString();
+      let a = l ? r.toString().padStart(2, "0") : r.toString();
       return f({
-        text: i,
+        text: a,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
-        click: () => t({ [o]: i }),
-        onState: [s, o, { "bg-muted": i }]
+        click: () => t({ [o]: a }),
+        onState: [s, o, { "bg-muted": a }]
       });
     })
   );
 }
-function it({ handleTimeSelect: e }) {
+function at({ handleTimeSelect: e }) {
   return n(
     { class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" },
     [
@@ -1338,14 +1341,14 @@ 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, 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"),
+  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"),
     minute: d.toString().padStart(2, "0"),
     meridian: r
   });
 }
-const qt = y(
+const qt = v(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1398,14 +1401,14 @@ const qt = y(
             bind: this.bind,
             required: this.required
           }),
-          it({
+          at({
             handleTimeSelect: t
           })
         ]
       );
     }
   }
-), at = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+), it = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
   p({ size: "lg" }, e)
 ]), ct = ({ title: e }) => I({ class: "flex flex-auto items-center" }, [
   D({ class: "text-lg font-semibold" }, e)
@@ -1420,7 +1423,7 @@ const qt = y(
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && at(e.icon, e.iconColor),
+      e.icon && it(e.icon, e.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
         n({ class: "flex flex-auto flex-col space-y-2" }, [
           ct(e),
@@ -1458,7 +1461,7 @@ const qt = y(
     iconColor: "text-muted-foreground"
   }
 };
-class ht extends v {
+class ht extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -1475,10 +1478,10 @@ class ht extends v {
   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}`, i = this.title || "Dialog Title";
+    }, { borderColor: s, bgColor: o, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${o} ${s}`, a = this.title || "Dialog Title";
     return dt({
       class: r,
-      title: i,
+      title: a,
       click: t,
       icon: this.icon,
       iconColor: l,
@@ -1578,7 +1581,7 @@ const Rt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
   ])
 ]));
 export {
-  vt as A,
+  yt as A,
   zt as B,
   $t as C,
   me as D,
@@ -1596,7 +1599,7 @@ export {
   At as T,
   xe as a,
   Ct as b,
-  ye as c,
+  ve as c,
   Se as d,
   De as e,
   Ie as f,

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { B as c, I as C, L as T } from "./buttons-Cm9etaEG.js";
 import { C as b, d as I, D as S, c as P, E as B, F, H as k, I as M, M as f, N as x, P as N, R as v, T as y, a as h, b as L, U as W, W as H } from "./inputs-CMjx5-IX.js";
 import { V as R, a as w } from "./veil-D4dRxILB.js";
 import { Icons as E } from "./icons.es.js";
-import { A as O, B as V, C as j, t as q, G as J, v as z, w as _, x as K, y as Q, D as X, j as Y, k as Z, I as $, H as aa, s as ea, c as sa, a as oa, b as ta, J as ra, i as na, g as la, e as ia, h as pa, F as ma, d as ua, f as da, L as ga, u as ca, M as Ca, l as Ta, N as Da, P as ba, p as Ia, q as Sa, S as Pa, n as Ba, o as Fa, T as ka, z as Ma, E as fa, m as xa, r as Na } from "./empty-state-aIT29dVl.js";
+import { A as O, B as V, C as j, t as q, G as J, v as z, w as _, x as K, y as Q, D as X, j as Y, k as Z, I as $, H as aa, s as ea, c as sa, a as oa, b as ta, J as ra, i as na, g as la, e as ia, h as pa, F as ma, d as ua, f as da, L as ga, u as ca, M as Ca, l as Ta, N as Da, P as ba, p as Ia, q as Sa, S as Pa, n as Ba, o as Fa, T as ka, z as Ma, E as fa, m as xa, r as Na } from "./empty-state-Dct3Y9SD.js";
 import { A as ya, b as ha, C as La, D as Wa, a as Ha, F as Aa, M as Ra, P as wa, R as Ua, c as Ea, g as Ga, p as Oa } from "./range-calendar-k0B4ZWJq.js";
 import { B as ja, p as qa, C as Ja, j as za, D as _a, m as Ka, k as Qa, H as Xa, I as Ya, N as Za, O as $a, P as ae, S as ee, n as se, o as oe, t as te, s as re, q as ne, r as le, T as ie, l as pe, U as me, W as ue, f as de, h as ge, i as ce, c as Ce, d as Te, b as De, e as be, a as Ie, g as Se } from "./signature-panel-Cj_uAlDW.js";
 import { B as Be, I as Fe, M as ke, d as Me, e as fe, g as xe, N as Ne, b as ve, a as ye, f as he, P as Le, c as We, S as He, T as Ae } from "./mobile-nav-wrapper-Dj67Pb8l.js";

package/dist/molecules.es.js

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

package/package.json

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