@capitaltg/vero 1.13.0 → 1.14.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx as m, Fragment as Me, jsxs as T } from "react/jsx-runtime";
 import * as u from "react";
-import D, { forwardRef as Us, createElement as Ro, useId as Zt, useCallback as le, useState as be, useLayoutEffect as zs, useEffect as wt, useRef as Fe, useMemo as jt, createContext as Qf, useContext as Jf, memo as em } from "react";
+import D, { forwardRef as Us, createElement as Ro, useId as Zt, useCallback as le, useState as be, useLayoutEffect as zs, useEffect as dt, useRef as Fe, useMemo as jt, createContext as Qf, useContext as Jf, memo as em } from "react";
 import * as Dn from "react-dom";
 import tm from "react-dom";
 function js(e) {
@@ -236,7 +236,7 @@ function pm(e, ...t) {
 const pe = (e) => {
   const t = (n) => n[e] || [];
   return t.isThemeGetter = !0, t;
-}, Qs = /^\[(?:([a-z-]+):)?(.+)\]$/i, hm = /^\d+\/\d+$/, gm = /* @__PURE__ */ new Set(["px", "full", "screen"]), vm = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, ym = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, bm = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, wm = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, xm = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, it = (e) => Kt(e) || gm.has(e) || hm.test(e), ht = (e) => nn(e, "length", km), Kt = (e) => !!e && !Number.isNaN(Number(e)), ao = (e) => nn(e, "number", Kt), mn = (e) => !!e && Number.isInteger(Number(e)), Cm = (e) => e.endsWith("%") && Kt(e.slice(0, -1)), re = (e) => Qs.test(e), gt = (e) => vm.test(e), Sm = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Nm = (e) => nn(e, Sm, Js), Em = (e) => nn(e, "position", Js), Mm = /* @__PURE__ */ new Set(["image", "url"]), Rm = (e) => nn(e, Mm, Dm), Pm = (e) => nn(e, "", Im), pn = () => !0, nn = (e, t, n) => {
+}, Qs = /^\[(?:([a-z-]+):)?(.+)\]$/i, hm = /^\d+\/\d+$/, gm = /* @__PURE__ */ new Set(["px", "full", "screen"]), vm = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, ym = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, bm = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, wm = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, xm = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, it = (e) => Kt(e) || gm.has(e) || hm.test(e), gt = (e) => nn(e, "length", km), Kt = (e) => !!e && !Number.isNaN(Number(e)), ao = (e) => nn(e, "number", Kt), mn = (e) => !!e && Number.isInteger(Number(e)), Cm = (e) => e.endsWith("%") && Kt(e.slice(0, -1)), re = (e) => Qs.test(e), vt = (e) => vm.test(e), Sm = /* @__PURE__ */ new Set(["length", "size", "percentage"]), Nm = (e) => nn(e, Sm, Js), Em = (e) => nn(e, "position", Js), Mm = /* @__PURE__ */ new Set(["image", "url"]), Rm = (e) => nn(e, Mm, Dm), Pm = (e) => nn(e, "", Im), pn = () => !0, nn = (e, t, n) => {
   const r = Qs.exec(e);
   return r ? r[1] ? typeof t == "string" ? r[1] === t : t.has(r[1]) : n(r[2]) : !1;
 }, km = (e) => (
@@ -245,17 +245,17 @@ const pe = (e) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   ym.test(e) && !bm.test(e)
 ), Js = () => !1, Im = (e) => wm.test(e), Dm = (e) => xm.test(e), Om = () => {
-  const e = pe("colors"), t = pe("spacing"), n = pe("blur"), r = pe("brightness"), o = pe("borderColor"), a = pe("borderRadius"), i = pe("borderSpacing"), s = pe("borderWidth"), c = pe("contrast"), l = pe("grayscale"), d = pe("hueRotate"), f = pe("invert"), p = pe("gap"), h = pe("gradientColorStops"), y = pe("gradientColorStopPositions"), g = pe("inset"), v = pe("margin"), b = pe("opacity"), w = pe("padding"), x = pe("saturate"), S = pe("scale"), C = pe("sepia"), E = pe("skew"), N = pe("space"), M = pe("translate"), W = () => ["auto", "contain", "none"], $ = () => ["auto", "hidden", "clip", "visible", "scroll"], k = () => ["auto", re, t], I = () => [re, t], B = () => ["", it, ht], V = () => ["auto", Kt, re], q = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], F = () => ["solid", "dashed", "dotted", "double", "none"], J = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], L = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], O = () => ["", "0", re], te = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], ee = () => [Kt, re];
+  const e = pe("colors"), t = pe("spacing"), n = pe("blur"), r = pe("brightness"), o = pe("borderColor"), a = pe("borderRadius"), i = pe("borderSpacing"), s = pe("borderWidth"), c = pe("contrast"), l = pe("grayscale"), d = pe("hueRotate"), f = pe("invert"), p = pe("gap"), h = pe("gradientColorStops"), y = pe("gradientColorStopPositions"), g = pe("inset"), v = pe("margin"), b = pe("opacity"), w = pe("padding"), x = pe("saturate"), S = pe("scale"), C = pe("sepia"), E = pe("skew"), N = pe("space"), M = pe("translate"), W = () => ["auto", "contain", "none"], $ = () => ["auto", "hidden", "clip", "visible", "scroll"], k = () => ["auto", re, t], I = () => [re, t], B = () => ["", it, gt], V = () => ["auto", Kt, re], q = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], F = () => ["solid", "dashed", "dotted", "double", "none"], J = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], L = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], O = () => ["", "0", re], te = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], ee = () => [Kt, re];
   return {
     cacheSize: 500,
     separator: ":",
     theme: {
       colors: [pn],
-      spacing: [it, ht],
-      blur: ["none", "", gt, re],
+      spacing: [it, gt],
+      blur: ["none", "", vt, re],
       brightness: ee(),
       borderColor: [e],
-      borderRadius: ["none", "", "full", gt, re],
+      borderRadius: ["none", "", "full", vt, re],
       borderSpacing: I(),
       borderWidth: B(),
       contrast: ee(),
@@ -264,7 +264,7 @@ const pe = (e) => {
       invert: O(),
       gap: I(),
       gradientColorStops: [e],
-      gradientColorStopPositions: [Cm, ht],
+      gradientColorStopPositions: [Cm, gt],
       inset: k(),
       margin: k(),
       opacity: ee(),
@@ -295,7 +295,7 @@ const pe = (e) => {
        * @see https://tailwindcss.com/docs/columns
        */
       columns: [{
-        columns: [gt]
+        columns: [vt]
       }],
       /**
        * Break After
@@ -879,8 +879,8 @@ const pe = (e) => {
        */
       "max-w": [{
         "max-w": [re, t, "none", "full", "min", "max", "fit", "prose", {
-          screen: [gt]
-        }, gt]
+          screen: [vt]
+        }, vt]
       }],
       /**
        * Height
@@ -916,7 +916,7 @@ const pe = (e) => {
        * @see https://tailwindcss.com/docs/font-size
        */
       "font-size": [{
-        text: ["base", gt, ht]
+        text: ["base", vt, gt]
       }],
       /**
        * Font Smoothing
@@ -1067,7 +1067,7 @@ const pe = (e) => {
        * @see https://tailwindcss.com/docs/text-decoration-thickness
        */
       "text-decoration-thickness": [{
-        decoration: ["auto", "from-font", it, ht]
+        decoration: ["auto", "from-font", it, gt]
       }],
       /**
        * Text Underline Offset
@@ -1563,7 +1563,7 @@ const pe = (e) => {
        * @see https://tailwindcss.com/docs/outline-width
        */
       "outline-w": [{
-        outline: [it, ht]
+        outline: [it, gt]
       }],
       /**
        * Outline Color
@@ -1603,7 +1603,7 @@ const pe = (e) => {
        * @see https://tailwindcss.com/docs/ring-offset-width
        */
       "ring-offset-w": [{
-        "ring-offset": [it, ht]
+        "ring-offset": [it, gt]
       }],
       /**
        * Ring Offset Color
@@ -1618,7 +1618,7 @@ const pe = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow
        */
       shadow: [{
-        shadow: ["", "inner", "none", gt, Pm]
+        shadow: ["", "inner", "none", vt, Pm]
       }],
       /**
        * Box Shadow Color
@@ -1683,7 +1683,7 @@ const pe = (e) => {
        * @see https://tailwindcss.com/docs/drop-shadow
        */
       "drop-shadow": [{
-        "drop-shadow": ["", "none", gt, re]
+        "drop-shadow": ["", "none", vt, re]
       }],
       /**
        * Grayscale
@@ -2198,7 +2198,7 @@ const pe = (e) => {
        * @see https://tailwindcss.com/docs/stroke-width
        */
       "stroke-w": [{
-        stroke: [it, ht, ao]
+        stroke: [it, gt, ao]
       }],
       /**
        * Stroke
@@ -3319,7 +3319,7 @@ aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled
   }, y) => {
     const g = {
       ref: y,
-      className: P("space-y-2", e),
+      className: P("vero-accordion", "space-y-2", e),
       ...h
     }, v = {
       items: r,
@@ -3458,7 +3458,7 @@ const Kp = Pe(
       {
         ref: d,
         "aria-labelledby": r ? p : void 0,
-        className: P(Kp({ variant: t, size: n }), e),
+        className: P("vero-alert", Kp({ variant: t, size: n }), e),
         role: "alert",
         ...l,
         children: [
@@ -3641,7 +3641,7 @@ const ut = Pe(ce.button, {
       l,
       {
         ref: c,
-        className: P(ut({ variant: t, size: n }), e),
+        className: P("vero-button", ut({ variant: t, size: n }), e),
         ...s,
         ...d,
         children: i
@@ -3651,7 +3651,7 @@ const ut = Pe(ce.button, {
       {
         ref: c,
         "aria-busy": a,
-        className: P(ut({ variant: t, size: n }), "relative", e),
+        className: P("vero-button", ut({ variant: t, size: n }), "relative", e),
         ...s,
         ...d,
         children: a ? /* @__PURE__ */ T(Me, { children: [
@@ -3832,15 +3832,15 @@ var co = "focusScope.autoFocusOnMount", lo = "focusScope.autoFocusOnUnmount", us
       let g = function(x) {
         if (h.paused || !s) return;
         const S = x.target;
-        s.contains(S) ? f.current = S : yt(f.current, { select: !0 });
+        s.contains(S) ? f.current = S : bt(f.current, { select: !0 });
       }, v = function(x) {
         if (h.paused || !s) return;
         const S = x.relatedTarget;
-        S !== null && (s.contains(S) || yt(f.current, { select: !0 }));
+        S !== null && (s.contains(S) || bt(f.current, { select: !0 }));
       }, b = function(x) {
         if (document.activeElement === document.body)
           for (const C of x)
-            C.removedNodes.length > 0 && yt(s);
+            C.removedNodes.length > 0 && bt(s);
       };
       document.addEventListener("focusin", g), document.addEventListener("focusout", v);
       const w = new MutationObserver(b);
@@ -3854,12 +3854,12 @@ var co = "focusScope.autoFocusOnMount", lo = "focusScope.autoFocusOnUnmount", us
       const g = document.activeElement;
       if (!s.contains(g)) {
         const b = new CustomEvent(co, us);
-        s.addEventListener(co, l), s.dispatchEvent(b), b.defaultPrevented || (gh(xh(Mi(s)), { select: !0 }), document.activeElement === g && yt(s));
+        s.addEventListener(co, l), s.dispatchEvent(b), b.defaultPrevented || (gh(xh(Mi(s)), { select: !0 }), document.activeElement === g && bt(s));
       }
       return () => {
         s.removeEventListener(co, l), setTimeout(() => {
           const b = new CustomEvent(lo, us);
-          s.addEventListener(lo, d), s.dispatchEvent(b), b.defaultPrevented || yt(g ?? document.body, { select: !0 }), s.removeEventListener(lo, d), fs.remove(h);
+          s.addEventListener(lo, d), s.dispatchEvent(b), b.defaultPrevented || bt(g ?? document.body, { select: !0 }), s.removeEventListener(lo, d), fs.remove(h);
         }, 0);
       };
     }
@@ -3870,7 +3870,7 @@ var co = "focusScope.autoFocusOnMount", lo = "focusScope.autoFocusOnUnmount", us
       const v = g.key === "Tab" && !g.altKey && !g.ctrlKey && !g.metaKey, b = document.activeElement;
       if (v && b) {
         const w = g.currentTarget, [x, S] = vh(w);
-        x && S ? !g.shiftKey && b === S ? (g.preventDefault(), n && yt(x, { select: !0 })) : g.shiftKey && b === x && (g.preventDefault(), n && yt(S, { select: !0 })) : b === w && g.preventDefault();
+        x && S ? !g.shiftKey && b === S ? (g.preventDefault(), n && bt(x, { select: !0 })) : g.shiftKey && b === x && (g.preventDefault(), n && bt(S, { select: !0 })) : b === w && g.preventDefault();
       }
     },
     [n, r, h.paused]
@@ -3881,7 +3881,7 @@ Tn.displayName = hh;
 function gh(e, { select: t = !1 } = {}) {
   const n = document.activeElement;
   for (const r of e)
-    if (yt(r, { select: t }), document.activeElement !== n) return;
+    if (bt(r, { select: t }), document.activeElement !== n) return;
 }
 function vh(e) {
   const t = Mi(e), n = ds(t, e), r = ds(t.reverse(), e);
@@ -3913,7 +3913,7 @@ function yh(e, { upTo: t }) {
 function bh(e) {
   return e instanceof HTMLInputElement && "select" in e;
 }
-function yt(e, { select: t = !1 } = {}) {
+function bt(e, { select: t = !1 } = {}) {
   if (e && e.focus) {
     const n = document.activeElement;
     e.focus({ preventScroll: !0 }), e !== n && bh(e) && t && e.select();
@@ -5065,6 +5065,7 @@ const kr = u.forwardRef(
     {
       ref: n,
       className: P(
+        "vero-command",
         "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
         e
       ),
@@ -5156,6 +5157,7 @@ const Hg = u.forwardRef(({ className: e, children: t, zIndex: n, onOpenAutoFocus
       {
         ref: a,
         className: P(
+          "vero-dialog",
           `fixed left-[50%] top-[50%] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]
           gap-4 border bg-background px-6 py-6 shadow-lg duration-200 data-[state=open]:animate-in
           data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
@@ -5279,10 +5281,10 @@ const Gg = ["top", "right", "bottom", "left"], St = Math.min, Ae = Math.max, fr
 function _o(e, t, n) {
   return Ae(e, St(t, n));
 }
-function dt(e, t) {
+function ft(e, t) {
   return typeof e == "function" ? e(t) : e;
 }
-function ft(e) {
+function mt(e) {
   return e.split("-")[0];
 }
 function on(e) {
@@ -5295,7 +5297,7 @@ function va(e) {
   return e === "y" ? "height" : "width";
 }
 function Nt(e) {
-  return ["top", "bottom"].includes(ft(e)) ? "y" : "x";
+  return ["top", "bottom"].includes(mt(e)) ? "y" : "x";
 }
 function ya(e) {
   return ga(Nt(e));
@@ -5328,7 +5330,7 @@ function qg(e, t, n) {
 }
 function Xg(e, t, n, r) {
   const o = on(e);
-  let a = qg(ft(e), n === "start", r);
+  let a = qg(mt(e), n === "start", r);
   return o && (a = a.map((i) => i + "-" + o), t && (a = a.concat(a.map($o)))), a;
 }
 function mr(e) {
@@ -5374,7 +5376,7 @@ function xs(e, t, n) {
     reference: r,
     floating: o
   } = e;
-  const a = Nt(t), i = ya(t), s = va(i), c = ft(t), l = a === "y", d = r.x + r.width / 2 - o.width / 2, f = r.y + r.height / 2 - o.height / 2, p = r[s] / 2 - o[s] / 2;
+  const a = Nt(t), i = ya(t), s = va(i), c = mt(t), l = a === "y", d = r.x + r.width / 2 - o.width / 2, f = r.y + r.height / 2 - o.height / 2, p = r[s] / 2 - o[s] / 2;
   let h;
   switch (c) {
     case "top":
@@ -5494,7 +5496,7 @@ async function Nn(e, t) {
     elementContext: f = "floating",
     altBoundary: p = !1,
     padding: h = 0
-  } = dt(t, e), y = mc(h), v = s[p ? f === "floating" ? "reference" : "floating" : f], b = pr(await a.getClippingRect({
+  } = ft(t, e), y = mc(h), v = s[p ? f === "floating" ? "reference" : "floating" : f], b = pr(await a.getClippingRect({
     element: (n = await (a.isElement == null ? void 0 : a.isElement(v))) == null || n ? v : v.contextElement || await (a.getDocumentElement == null ? void 0 : a.getDocumentElement(s.floating)),
     boundary: l,
     rootBoundary: d,
@@ -5538,7 +5540,7 @@ const Jg = (e) => ({
     } = t, {
       element: l,
       padding: d = 0
-    } = dt(e, t) || {};
+    } = ft(e, t) || {};
     if (l == null)
       return {};
     const f = mc(d), p = {
@@ -5581,10 +5583,10 @@ const Jg = (e) => ({
         fallbackAxisSideDirection: y = "none",
         flipAlignment: g = !0,
         ...v
-      } = dt(e, t);
+      } = ft(e, t);
       if ((n = a.arrow) != null && n.alignmentOffset)
         return {};
-      const b = ft(o), w = Nt(s), x = ft(s) === s, S = await (c.isRTL == null ? void 0 : c.isRTL(l.floating)), C = p || (x || !g ? [mr(s)] : Kg(s)), E = y !== "none";
+      const b = mt(o), w = Nt(s), x = mt(s) === s, S = await (c.isRTL == null ? void 0 : c.isRTL(l.floating)), C = p || (x || !g ? [mr(s)] : Kg(s)), E = y !== "none";
       !p && E && C.push(...Xg(s, g, y, S));
       const N = [s, ...C], M = await Nn(t, v), W = [];
       let $ = ((r = a.flip) == null ? void 0 : r.overflows) || [];
@@ -5661,7 +5663,7 @@ const tv = function(e) {
       } = t, {
         strategy: r = "referenceHidden",
         ...o
-      } = dt(e, t);
+      } = ft(e, t);
       switch (r) {
         case "referenceHidden": {
           const a = await Nn(t, {
@@ -5698,7 +5700,7 @@ async function nv(e, t) {
     placement: n,
     platform: r,
     elements: o
-  } = e, a = await (r.isRTL == null ? void 0 : r.isRTL(o.floating)), i = ft(n), s = on(n), c = Nt(n) === "y", l = ["left", "top"].includes(i) ? -1 : 1, d = a && c ? -1 : 1, f = dt(t, e);
+  } = e, a = await (r.isRTL == null ? void 0 : r.isRTL(o.floating)), i = mt(n), s = on(n), c = Nt(n) === "y", l = ["left", "top"].includes(i) ? -1 : 1, d = a && c ? -1 : 1, f = ft(t, e);
   let {
     mainAxis: p,
     crossAxis: h,
@@ -5767,10 +5769,10 @@ const rv = function(e) {
           }
         },
         ...c
-      } = dt(e, t), l = {
+      } = ft(e, t), l = {
         x: n,
         y: r
-      }, d = await Nn(t, c), f = Nt(ft(o)), p = ga(f);
+      }, d = await Nn(t, c), f = Nt(mt(o)), p = ga(f);
       let h = l[p], y = l[f];
       if (a) {
         const v = p === "y" ? "top" : "left", b = p === "y" ? "bottom" : "right", w = h + d[v], x = h - d[b];
@@ -5812,12 +5814,12 @@ const rv = function(e) {
         offset: s = 0,
         mainAxis: c = !0,
         crossAxis: l = !0
-      } = dt(e, t), d = {
+      } = ft(e, t), d = {
         x: n,
         y: r
       }, f = Nt(o), p = ga(f);
       let h = d[p], y = d[f];
-      const g = dt(s, t), v = typeof g == "number" ? {
+      const g = ft(s, t), v = typeof g == "number" ? {
         mainAxis: g,
         crossAxis: 0
       } : {
@@ -5831,7 +5833,7 @@ const rv = function(e) {
       }
       if (l) {
         var b, w;
-        const x = p === "y" ? "width" : "height", S = ["top", "left"].includes(ft(o)), C = a.reference[f] - a.floating[x] + (S && ((b = i.offset) == null ? void 0 : b[f]) || 0) + (S ? 0 : v.crossAxis), E = a.reference[f] + a.reference[x] + (S ? 0 : ((w = i.offset) == null ? void 0 : w[f]) || 0) - (S ? v.crossAxis : 0);
+        const x = p === "y" ? "width" : "height", S = ["top", "left"].includes(mt(o)), C = a.reference[f] - a.floating[x] + (S && ((b = i.offset) == null ? void 0 : b[f]) || 0) + (S ? 0 : v.crossAxis), E = a.reference[f] + a.reference[x] + (S ? 0 : ((w = i.offset) == null ? void 0 : w[f]) || 0) - (S ? v.crossAxis : 0);
         y < C ? y = C : y > E && (y = E);
       }
       return {
@@ -5855,7 +5857,7 @@ const rv = function(e) {
         apply: c = () => {
         },
         ...l
-      } = dt(e, t), d = await Nn(t, l), f = ft(o), p = on(o), h = Nt(o) === "y", {
+      } = ft(e, t), d = await Nn(t, l), f = mt(o), p = on(o), h = Nt(o) === "y", {
         width: y,
         height: g
       } = a.floating;
@@ -6369,7 +6371,7 @@ const Nv = rv, Ev = ov, Mv = ev, Rv = sv, Pv = tv, Rs = Jg, kv = av, Iv = (e, t,
     platform: a
   });
 };
-var lr = typeof document < "u" ? zs : wt;
+var lr = typeof document < "u" ? zs : dt;
 function hr(e, t) {
   if (e === t)
     return !0;
@@ -7013,7 +7015,7 @@ const Hn = qv, Vn = Xv, Jv = Qv, cn = u.forwardRef(({ className: e, align: t = "
     {
       ref: s,
       align: t,
-      className: P(ce.popover, e),
+      className: P("vero-popover", ce.popover, e),
       sideOffset: n,
       style: { zIndex: c, ...i.style },
       ...i,
@@ -7052,9 +7054,9 @@ function ey({
   ...N
 }, M) {
   const [W, $] = be(!1), k = qe("dropdown", y), [I, B] = be(""), [V, q] = be(!1), [F, J] = be(!1), [L, O] = be([]), [te, ee] = be(!1), [R, Y] = be(void 0), U = Fe();
-  wt(() => () => {
+  dt(() => () => {
     U.current && clearTimeout(U.current);
-  }, []), wt(() => {
+  }, []), dt(() => {
     n || Y(void 0);
   }, [n]);
   const H = le(
@@ -7106,12 +7108,13 @@ function ey({
           "aria-expanded": W,
           autoFocus: w,
           className: P(
+            "vero-autocomplete",
             "w-full justify-between px-3",
             !n && "text-muted-foreground",
             c
           ),
+          "data-component": "autocomplete",
           isDisabled: g,
-          role: "combobox",
           variant: "input",
           ...N,
           onKeyDown: (Q) => {
@@ -7204,14 +7207,30 @@ const xE = el, ty = Pe(
     }
   }
 ), ny = u.forwardRef(
-  ({ className: e, variant: t, ...n }, r) => /* @__PURE__ */ m("div", { ref: r, className: P(ty({ variant: t, className: e })), ...n })
+  ({ className: e, variant: t, ...n }, r) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      className: P("vero-badge", ty({ variant: t, className: e })),
+      ...n
+    }
+  )
 );
 ny.displayName = "Badge";
 const ry = u.forwardRef(
-  ({ items: e, separator: t = /* @__PURE__ */ m(sa, { className: "h-4 w-4" }), className: n, ...r }, o) => /* @__PURE__ */ m("nav", { ref: o, "aria-label": "Breadcrumb", className: P("flex", n), ...r, children: /* @__PURE__ */ m("ol", { className: "flex flex-wrap items-center gap-1 pl-0", children: e.map((a, i) => /* @__PURE__ */ T("li", { className: "flex items-center gap-1", children: [
-    a.href ? /* @__PURE__ */ m("a", { className: P(ce.link, ce.linkNoUnderline), href: a.href, children: a.label }) : /* @__PURE__ */ m("span", { "aria-current": "page", className: "font-medium text-foreground", children: a.label }),
-    i < e.length - 1 ? /* @__PURE__ */ m("span", { className: "text-muted-foreground", children: t }) : null
-  ] }, i)) }) })
+  ({ items: e, separator: t = /* @__PURE__ */ m(sa, { className: "h-4 w-4" }), className: n, ...r }, o) => /* @__PURE__ */ m(
+    "nav",
+    {
+      ref: o,
+      "aria-label": "Breadcrumb",
+      className: P("vero-breadcrumbs", "flex", n),
+      ...r,
+      children: /* @__PURE__ */ m("ol", { className: "flex flex-wrap items-center gap-1 pl-0", children: e.map((a, i) => /* @__PURE__ */ T("li", { className: "flex items-center gap-1", children: [
+        a.href ? /* @__PURE__ */ m("a", { className: P(ce.link, ce.linkNoUnderline), href: a.href, children: a.label }) : /* @__PURE__ */ m("span", { "aria-current": "page", className: "font-medium text-foreground", children: a.label }),
+        i < e.length - 1 ? /* @__PURE__ */ m("span", { className: "text-muted-foreground", children: t }) : null
+      ] }, i)) })
+    }
+  )
 );
 ry.displayName = "Breadcrumbs";
 const bo = {}, yn = {};
@@ -7998,7 +8017,7 @@ function de(e, t) {
   const n = e < 0 ? "-" : "", r = Math.abs(e).toString().padStart(t, "0");
   return n + r;
 }
-const vt = {
+const yt = {
   // Year
   y(e, t) {
     const n = e.getFullYear(), r = n > 0 ? n : 1 - n;
@@ -8084,7 +8103,7 @@ const vt = {
       const r = e.getFullYear(), o = r > 0 ? r : 1 - r;
       return n.ordinalNumber(o, { unit: "year" });
     }
-    return vt.y(e, t);
+    return yt.y(e, t);
   },
   // Local week-numbering year
   Y: function(e, t, n, r) {
@@ -8187,7 +8206,7 @@ const vt = {
     switch (t) {
       case "M":
       case "MM":
-        return vt.M(e, t);
+        return yt.M(e, t);
       // 1st, 2nd, ..., 12th
       case "Mo":
         return n.ordinalNumber(r + 1, { unit: "month" });
@@ -8252,7 +8271,7 @@ const vt = {
   },
   // Day of the month
   d: function(e, t, n) {
-    return t === "do" ? n.ordinalNumber(e.getDate(), { unit: "date" }) : vt.d(e, t);
+    return t === "do" ? n.ordinalNumber(e.getDate(), { unit: "date" }) : yt.d(e, t);
   },
   // Day of year
   D: function(e, t, n) {
@@ -8498,11 +8517,11 @@ const vt = {
       let r = e.getHours() % 12;
       return r === 0 && (r = 12), n.ordinalNumber(r, { unit: "hour" });
     }
-    return vt.h(e, t);
+    return yt.h(e, t);
   },
   // Hour [0-23]
   H: function(e, t, n) {
-    return t === "Ho" ? n.ordinalNumber(e.getHours(), { unit: "hour" }) : vt.H(e, t);
+    return t === "Ho" ? n.ordinalNumber(e.getHours(), { unit: "hour" }) : yt.H(e, t);
   },
   // Hour [0-11]
   K: function(e, t, n) {
@@ -8516,15 +8535,15 @@ const vt = {
   },
   // Minute
   m: function(e, t, n) {
-    return t === "mo" ? n.ordinalNumber(e.getMinutes(), { unit: "minute" }) : vt.m(e, t);
+    return t === "mo" ? n.ordinalNumber(e.getMinutes(), { unit: "minute" }) : yt.m(e, t);
   },
   // Second
   s: function(e, t, n) {
-    return t === "so" ? n.ordinalNumber(e.getSeconds(), { unit: "second" }) : vt.s(e, t);
+    return t === "so" ? n.ordinalNumber(e.getSeconds(), { unit: "second" }) : yt.s(e, t);
   },
   // Fraction of second
   S: function(e, t) {
-    return vt.S(e, t);
+    return yt.S(e, t);
   },
   // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
   X: function(e, t, n) {
@@ -8788,7 +8807,7 @@ function kb(e, t) {
   const n = pl(e, t), r = Pb(e, t);
   return t.addDays(n, r * 7 - 1);
 }
-class mt {
+class pt {
   /**
    * Creates an instance of `DateLib`.
    *
@@ -8941,7 +8960,7 @@ class mt {
     return this.replaceDigits(t.toString());
   }
 }
-const at = new mt();
+const at = new pt();
 class hl {
   constructor(t, n, r = at) {
     this.date = t, this.displayMonth = n, this.outside = !!(n && !r.isSameMonth(t, n)), this.dateLib = r;
@@ -9251,11 +9270,11 @@ function lw() {
   return e;
 }
 function Cl(e, t, n) {
-  return (n ?? new mt(t)).format(e, "LLLL y");
+  return (n ?? new pt(t)).format(e, "LLLL y");
 }
 const uw = Cl;
 function dw(e, t, n) {
-  return (n ?? new mt(t)).format(e, "d");
+  return (n ?? new pt(t)).format(e, "d");
 }
 function fw(e, t = at) {
   return t.format(e, "LLLL");
@@ -9267,7 +9286,7 @@ function pw() {
   return "";
 }
 function hw(e, t, n) {
-  return (n ?? new mt(t)).format(e, "cccccc");
+  return (n ?? new pt(t)).format(e, "cccccc");
 }
 function Sl(e, t = at) {
   return t.format(e, "yyyy");
@@ -9334,15 +9353,15 @@ function Cw(e, t, n, r) {
   });
 }
 function Nl(e, t, n) {
-  return (n ?? new mt(t)).format(e, "LLLL y");
+  return (n ?? new pt(t)).format(e, "LLLL y");
 }
 const Sw = Nl;
 function Nw(e, t, n, r) {
-  let o = (r ?? new mt(n)).format(e, "PPPP");
+  let o = (r ?? new pt(n)).format(e, "PPPP");
   return t != null && t.today && (o = `Today, ${o}`), o;
 }
 function El(e, t, n, r) {
-  let o = (r ?? new mt(n)).format(e, "PPPP");
+  let o = (r ?? new pt(n)).format(e, "PPPP");
   return t.today && (o = `Today, ${o}`), t.selected && (o = `${o}, selected`), o;
 }
 const Ew = El;
@@ -9359,7 +9378,7 @@ function kw(e) {
   return "Go to the Previous Month";
 }
 function Iw(e, t, n) {
-  return (n ?? new mt(t)).format(e, "cccc");
+  return (n ?? new pt(t)).format(e, "cccc");
 }
 function Dw(e, t) {
   return `Week ${e}`;
@@ -9541,7 +9560,7 @@ function jw(e, t) {
     // initialMonth is always computed from props.month if provided
     e.month ? i : void 0
   );
-  wt(() => {
+  dt(() => {
     const E = Ls(e, t);
     c(E);
   }, [e.timeZone]);
@@ -9740,7 +9759,7 @@ function ox(e) {
   const { components: n, formatters: r, labels: o, dateLib: a, locale: i, classNames: s } = jt(() => {
     const oe = { ...ka, ...t.locale };
     return {
-      dateLib: new mt({
+      dateLib: new pt({
         locale: oe,
         weekStartsOn: t.broadcastCalendar ? 1 : t.weekStartsOn,
         firstWeekContainsDate: t.firstWeekContainsDate,
@@ -9780,7 +9799,7 @@ function ox(e) {
   }, [y, K]), Wf = le((oe, ge) => (me) => {
     H(), p == null || p(oe.date, ge, me);
   }, [H, p]), Bf = le((oe, ge) => (me) => {
-    const pt = {
+    const ht = {
       ArrowLeft: ["day", t.dir === "rtl" ? "after" : "before"],
       ArrowRight: ["day", t.dir === "rtl" ? "before" : "after"],
       ArrowDown: ["week", "after"],
@@ -9790,9 +9809,9 @@ function ox(e) {
       Home: ["startOfWeek", "before"],
       End: ["endOfWeek", "after"]
     };
-    if (pt[me.key]) {
+    if (ht[me.key]) {
       me.preventDefault(), me.stopPropagation();
-      const [Ve, Zn] = pt[me.key];
+      const [Ve, Zn] = ht[me.key];
       j(Ve, Zn);
     }
     g == null || g(oe.date, ge, me);
@@ -9801,11 +9820,11 @@ function ox(e) {
   }, [v]), Vf = le((oe, ge) => (me) => {
     b == null || b(oe.date, ge, me);
   }, [b]), Yf = le((oe) => (ge) => {
-    const me = Number(ge.target.value), pt = a.setMonth(a.startOfMonth(oe), me);
-    te(pt);
+    const me = Number(ge.target.value), ht = a.setMonth(a.startOfMonth(oe), me);
+    te(ht);
   }, [a, te]), Gf = le((oe) => (ge) => {
-    const me = Number(ge.target.value), pt = a.setYear(a.startOfMonth(oe), me);
-    te(pt);
+    const me = Number(ge.target.value), ht = a.setYear(a.startOfMonth(oe), me);
+    te(ht);
   }, [a, te]), { className: Uf, style: zf } = jt(() => ({
     className: [s[z.Root], t.className].filter(Boolean).join(" "),
     style: { ...C == null ? void 0 : C[z.Root], ...t.style }
@@ -9843,7 +9862,7 @@ function ox(e) {
         { className: s[z.Months], style: C == null ? void 0 : C[z.Months] },
         !t.hideNavigation && !d && D.createElement(n.Nav, { "data-animated-nav": t.animate ? "true" : void 0, className: s[z.Nav], style: C == null ? void 0 : C[z.Nav], "aria-label": ie(), onPreviousClick: to, onNextClick: no, previousMonth: L, nextMonth: O }),
         q.map((oe, ge) => {
-          const me = bw(oe.date, F, J, r, a), pt = Cw(F, J, r, a);
+          const me = bw(oe.date, F, J, r, a), ht = Cw(F, J, r, a);
           return D.createElement(
             n.Month,
             { "data-animated-month": t.animate ? "true" : void 0, className: s[z.Month], style: C == null ? void 0 : C[z.Month], key: ge, displayIndex: ge, calendarMonth: oe },
@@ -9856,7 +9875,7 @@ function ox(e) {
               n.DropdownNav,
               { className: s[z.Dropdowns], style: C == null ? void 0 : C[z.Dropdowns] },
               c === "dropdown" || c === "dropdown-months" ? D.createElement(n.MonthsDropdown, { className: s[z.MonthsDropdown], "aria-label": Q(), classNames: s, components: n, disabled: !!t.disableNavigation, onChange: Yf(oe.date), options: me, style: C == null ? void 0 : C[z.Dropdown], value: a.getMonth(oe.date) }) : D.createElement("span", null, M(oe.date, a)),
-              c === "dropdown" || c === "dropdown-years" ? D.createElement(n.YearsDropdown, { className: s[z.YearsDropdown], "aria-label": _f(a.options), classNames: s, components: n, disabled: !!t.disableNavigation, onChange: Gf(oe.date), options: pt, style: C == null ? void 0 : C[z.Dropdown], value: a.getYear(oe.date) }) : D.createElement("span", null, I(oe.date, a)),
+              c === "dropdown" || c === "dropdown-years" ? D.createElement(n.YearsDropdown, { className: s[z.YearsDropdown], "aria-label": _f(a.options), classNames: s, components: n, disabled: !!t.disableNavigation, onChange: Gf(oe.date), options: ht, style: C == null ? void 0 : C[z.Dropdown], value: a.getYear(oe.date) }) : D.createElement("span", null, I(oe.date, a)),
               D.createElement("span", { role: "status", "aria-live": "polite", style: {
                 border: 0,
                 clip: "rect(0 0 0 0)",
@@ -9987,7 +10006,7 @@ function Da(e, t, n) {
 }
 const ix = () => Array.from({ length: 12 }, (e, t) => new Date(0, t).toLocaleString("en-US", { month: "long" })), cx = (e) => {
   const { onSelect: t } = e, n = Fe(null);
-  return wt(() => {
+  return dt(() => {
     n.current && n.current.focus();
   }, []), /* @__PURE__ */ m(
     "div",
@@ -10020,7 +10039,7 @@ const ix = () => Array.from({ length: 12 }, (e, t) => new Date(0, t).toLocaleStr
   return a;
 }, ux = (e) => {
   const { onSelect: t, startMonth: n, endMonth: r } = e, o = Fe(null);
-  return wt(() => {
+  return dt(() => {
     o.current && o.current.focus();
   }, []), /* @__PURE__ */ m(
     "div",
@@ -10107,7 +10126,7 @@ function Rl({ className: e, classNames: t, showOutsideDays: n = !0, ...r }) {
   return /* @__PURE__ */ m(
     ox,
     {
-      className: P("min-w-80 px-3 py-3", e),
+      className: P("vero-calendar", "min-w-80 px-3 py-3", e),
       classNames: {
         months: "flex flex-col gap-4 sm:flex-row",
         month: "w-full space-y-4",
@@ -10186,7 +10205,7 @@ var Hr = "Checkbox", [fx, CE] = we(Hr), [mx, px] = fx(Hr), Pl = u.forwardRef(
         {
           type: "button",
           role: "checkbox",
-          "aria-checked": bt(b) ? "mixed" : b,
+          "aria-checked": wt(b) ? "mixed" : b,
           "aria-required": i,
           "data-state": Ol(b),
           "data-disabled": s ? "" : void 0,
@@ -10198,7 +10217,7 @@ var Hr = "Checkbox", [fx, CE] = we(Hr), [mx, px] = fx(Hr), Pl = u.forwardRef(
             S.key === "Enter" && S.preventDefault();
           }),
           onClick: A(e.onClick, (S) => {
-            w((C) => bt(C) ? !0 : !C), v && (g.current = S.isPropagationStopped(), g.current || S.stopPropagation());
+            w((C) => wt(C) ? !0 : !C), v && (g.current = S.isPropagationStopped(), g.current || S.stopPropagation());
           })
         }
       ),
@@ -10214,7 +10233,7 @@ var Hr = "Checkbox", [fx, CE] = we(Hr), [mx, px] = fx(Hr), Pl = u.forwardRef(
           disabled: s,
           form: d,
           style: { transform: "translateX(-100%)" },
-          defaultChecked: bt(a) ? !1 : a
+          defaultChecked: wt(a) ? !1 : a
         }
       )
     ] });
@@ -10224,7 +10243,7 @@ Pl.displayName = Hr;
 var kl = "CheckboxIndicator", Il = u.forwardRef(
   (e, t) => {
     const { __scopeCheckbox: n, forceMount: r, ...o } = e, a = px(kl, n);
-    return /* @__PURE__ */ m(We, { present: r || bt(a.state) || a.state === !0, children: /* @__PURE__ */ m(
+    return /* @__PURE__ */ m(We, { present: r || wt(a.state) || a.state === !0, children: /* @__PURE__ */ m(
       G.span,
       {
         "data-state": Ol(a.state),
@@ -10256,10 +10275,10 @@ var hx = "CheckboxBubbleInput", Dl = u.forwardRef(
       ).set;
       if (l !== n && g) {
         const v = new Event("click", { bubbles: r });
-        p.indeterminate = bt(n), g.call(p, bt(n) ? !1 : n), p.dispatchEvent(v);
+        p.indeterminate = wt(n), g.call(p, wt(n) ? !1 : n), p.dispatchEvent(v);
       }
     }, [l, n, r]);
-    const f = u.useRef(bt(n) ? !1 : n);
+    const f = u.useRef(wt(n) ? !1 : n);
     return /* @__PURE__ */ m(
       G.input,
       {
@@ -10282,11 +10301,11 @@ var hx = "CheckboxBubbleInput", Dl = u.forwardRef(
   }
 );
 Dl.displayName = hx;
-function bt(e) {
+function wt(e) {
   return e === "indeterminate";
 }
 function Ol(e) {
-  return bt(e) ? "indeterminate" : e ? "checked" : "unchecked";
+  return wt(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
 var Vr = Pl, gx = Il;
 const Al = u.forwardRef(
@@ -10300,6 +10319,7 @@ const Al = u.forwardRef(
       "div",
       {
         className: P(
+          "vero-checkbox",
           "relative",
           r ? P(ce.button, ut({ variant: "primary" })) : P(ce.button, ut({ variant: "input" })),
           o && "pointer-events-none cursor-not-allowed opacity-50",
@@ -10342,7 +10362,14 @@ var vx = "Label", Tl = u.forwardRef((e, t) => /* @__PURE__ */ m(
 Tl.displayName = vx;
 var _l = Tl;
 const Tt = u.forwardRef(
-  ({ className: e, ...t }, n) => /* @__PURE__ */ m(_l, { ref: n, className: P(ce.text.label, e), ...t })
+  ({ className: e, ...t }, n) => /* @__PURE__ */ m(
+    _l,
+    {
+      ref: n,
+      className: P("vero-label", ce.text.label, e),
+      ...t
+    }
+  )
 );
 Tt.displayName = _l.displayName;
 const $l = "peer h-5 w-5 shrink-0 rounded-sm border-2 border-gray-500 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary-400 data-[state=checked]:bg-primary-400 data-[state=checked]:text-white", Fl = u.forwardRef(
@@ -10356,6 +10383,7 @@ const $l = "peer h-5 w-5 shrink-0 rounded-sm border-2 border-gray-500 ring-offse
       "div",
       {
         className: P(
+          "vero-checkbox",
           "flex items-start gap-2",
           o && "cursor-not-allowed opacity-50 [&>*]:cursor-not-allowed"
         ),
@@ -10421,6 +10449,7 @@ const Ll = u.forwardRef(
       "div",
       {
         className: P(
+          "vero-checkbox",
           "relative rounded-lg border-2 border-muted bg-popover px-4 py-4",
           r && "border-primary-400",
           o ? "cursor-not-allowed opacity-50 [&_*]:cursor-not-allowed" : "cursor-pointer hover:bg-accent hover:text-accent-foreground",
@@ -10507,24 +10536,33 @@ const yx = u.forwardRef(
     ...l
   }, d) => {
     const f = ca({ variant: c, orientation: s, columns: o }), p = Zt(), h = a ?? p;
-    return /* @__PURE__ */ m("div", { ref: d, className: P(f, r), id: a, ...l, children: e.map((y) => {
-      const g = y.inputId ?? `${h}-${y.id}`;
-      return /* @__PURE__ */ m(
-        Wl,
-        {
-          description: y.description,
-          id: g,
-          isChecked: t.includes(y.id),
-          isDisabled: i || y.isDisabled,
-          label: y.label,
-          variant: c,
-          onCheckedChange: (v) => {
-            n(v ? [...t, y.id] : t.filter((b) => b !== y.id));
-          }
-        },
-        y.id
-      );
-    }) });
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: d,
+        className: P("vero-checkbox-group", f, r),
+        id: a,
+        ...l,
+        children: e.map((y) => {
+          const g = y.inputId ?? `${h}-${y.id}`;
+          return /* @__PURE__ */ m(
+            Wl,
+            {
+              description: y.description,
+              id: g,
+              isChecked: t.includes(y.id),
+              isDisabled: i || y.isDisabled,
+              label: y.label,
+              variant: c,
+              onCheckedChange: (v) => {
+                n(v ? [...t, y.id] : t.filter((b) => b !== y.id));
+              }
+            },
+            y.id
+          );
+        })
+      }
+    );
   }
 );
 yx.displayName = "CheckboxGroup";
@@ -10563,12 +10601,13 @@ const wx = D.forwardRef(
             "aria-expanded": b,
             autoFocus: y,
             className: P(
+              "vero-combobox",
               "w-full justify-between px-3",
               !t && "text-muted-foreground",
               s
             ),
+            "data-component": "combobox",
             isDisabled: f,
-            role: "combobox",
             variant: "input",
             ...g,
             children: [
@@ -10655,6 +10694,7 @@ const xx = D.forwardRef(
             "aria-required": l,
             autoFocus: d,
             className: P(
+              "vero-date-picker",
               "w-full justify-start px-3 text-left font-normal",
               !e && "text-muted-foreground",
               a
@@ -10711,7 +10751,7 @@ const Cx = u.forwardRef(
       if (v > b) return t({ from: b, to: v });
       if (v.getTime() === b.getTime()) return t({ from: void 0, to: void 0 });
     }, g = (v) => v.from ? v.to ? `${v.from.toISOString().split("T")[0]},${v.to.toISOString().split("T")[0]}` : v.from.toISOString().split("T")[0] : "";
-    return /* @__PURE__ */ T("div", { className: P("grid gap-2", r), children: [
+    return /* @__PURE__ */ T("div", { className: P("vero-date-range-picker", "grid gap-2", r), children: [
       c || l ? /* @__PURE__ */ m("input", { name: c, required: l, type: "hidden", value: g(e) }) : null,
       /* @__PURE__ */ T(Hn, { children: [
         /* @__PURE__ */ m(Vn, { asChild: !0, children: /* @__PURE__ */ T(
@@ -11753,7 +11793,7 @@ const r0 = u.forwardRef(
         nt,
         {
           ref: c,
-          className: P("flex items-center gap-1", e),
+          className: P("vero-dropdown-button", "flex items-center gap-1", e),
           isDisabled: a,
           variant: o,
           ...s,
@@ -11820,7 +11860,7 @@ const o0 = u.forwardRef(
       "div",
       {
         ref: l,
-        className: P("space-y-1", o),
+        className: P("vero-form-item", "space-y-1", o),
         ...c,
         "data-error": r ? "true" : void 0,
         children: [
@@ -11844,12 +11884,16 @@ const o0 = u.forwardRef(
 o0.displayName = "FormItem";
 const a0 = D.forwardRef(
   ({ src: e, alt: t, fallback: n, isLazy: r = !0, shape: o = "square", className: a, onError: i, ...s }, c) => {
-    const [l, d] = be(!1), [f, p] = be(!0), h = (v) => {
+    const [l, d] = be(!1), [f, p] = be(!0);
+    dt(() => {
+      d(!1), p(!0);
+    }, [e]);
+    const h = (v) => {
       d(!0), i == null || i(v);
     }, y = () => {
       p(!1);
     };
-    return /* @__PURE__ */ T("div", { className: P("relative overflow-hidden", {
+    return /* @__PURE__ */ T("div", { className: P("vero-image", "relative overflow-hidden", {
       square: "",
       rounded: "rounded-lg",
       circle: "rounded-full"
@@ -11901,7 +11945,7 @@ const s0 = u.forwardRef(
       "input",
       {
         ref: i,
-        className: P(ce.input, e),
+        className: P("vero-input", ce.input, e),
         type: t,
         onChange: c,
         ...a,
@@ -11933,7 +11977,7 @@ const i0 = D.forwardRef(
       var I;
       return ((I = e.find((B) => B.value === k)) == null ? void 0 : I.label) || k;
     }), S = _e({ isDisabled: d }), C = Fe(null), E = Fe([]);
-    wt(() => {
+    dt(() => {
       h && C.current && C.current.focus();
     }, [h]);
     const N = le(
@@ -11999,12 +12043,14 @@ const i0 = D.forwardRef(
             "aria-expanded": v,
             "aria-haspopup": "listbox",
             className: P(
+              "vero-multi-select",
               ce.button,
               ut({ variant: "input" }),
               ce.focusRing,
               "flex h-auto min-h-[2.5rem] w-full items-stretch justify-between px-3 py-1.5",
               i
             ),
+            "data-component": "multi-select",
             role: "button",
             tabIndex: 0,
             onClick: (k) => {
@@ -12460,6 +12506,7 @@ const Yu = u.forwardRef(
       "div",
       {
         className: P(
+          "vero-radio",
           "relative",
           ce.button,
           ut({ variant: "input" }),
@@ -12503,6 +12550,7 @@ const Gu = "aspect-square h-5 w-5 rounded-full border-2 border-gray-500 text-pri
       "div",
       {
         className: P(
+          "vero-radio",
           "flex items-start gap-2",
           o && "cursor-not-allowed opacity-50 [&>*]:cursor-not-allowed"
         ),
@@ -12562,6 +12610,7 @@ const zu = u.forwardRef(
       "div",
       {
         className: P(
+          "vero-radio",
           "group relative rounded-lg border-2 border-muted bg-popover px-4 py-4",
           "has-[[data-state=checked]]:border-primary-400",
           o ? "cursor-not-allowed opacity-50 [&_*]:cursor-not-allowed" : "cursor-pointer hover:bg-accent hover:text-accent-foreground",
@@ -12662,7 +12711,7 @@ const D0 = u.forwardRef(
       k0,
       {
         ref: f,
-        className: P(p, o),
+        className: P("vero-radio-group", p, o),
         id: i,
         value: n,
         onValueChange: r,
@@ -13578,6 +13627,7 @@ const kd = u.forwardRef(({ className: e, children: t, isDisabled: n = !1, hasVal
     {
       ref: a,
       className: P(
+        "vero-select",
         ce.input,
         ce.focusRing,
         `min-w-0 items-center justify-between text-left [&>span]:min-w-0 [&>span]:flex-1
@@ -13915,6 +13965,7 @@ function ES({
       ref: c,
       "aria-label": "Step indicator",
       className: P(
+        "vero-step-indicator",
         vS({ orientation: "horizontal" }),
         e
       ),
@@ -14087,7 +14138,7 @@ const DS = `peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center round
     ...i
   }, s) => {
     const c = _e({ isDisabled: a }), l = Zt(), d = n ?? l;
-    return Da("Switch", t, r), /* @__PURE__ */ T("div", { className: "flex items-center space-x-2", children: [
+    return Da("Switch", t, r), /* @__PURE__ */ T("div", { className: P("vero-switch", "flex items-center space-x-2"), children: [
       /* @__PURE__ */ m(
         Bd,
         {
@@ -14142,7 +14193,7 @@ const OS = D.forwardRef(
       },
       [n, t]
     );
-    return /* @__PURE__ */ m("div", { ref: c, className: P(l, r), ...s, children: e.map((f) => /* @__PURE__ */ m(
+    return /* @__PURE__ */ m("div", { ref: c, className: P("vero-switch-group", l, r), ...s, children: e.map((f) => /* @__PURE__ */ m(
       Hd,
       {
         id: f.id,
@@ -14638,7 +14689,15 @@ function of(e, t) {
 }
 var af = Xd, sf = Qd, cf = ef, lf = nf;
 const rN = u.forwardRef(
-  ({ ...e }, t) => /* @__PURE__ */ m(af, { ref: t, activationMode: "manual", ...e })
+  ({ ...e }, t) => /* @__PURE__ */ m(
+    af,
+    {
+      ref: t,
+      activationMode: "manual",
+      ...e,
+      className: P("vero-tabs", e.className)
+    }
+  )
 );
 rN.displayName = af.displayName;
 const oN = u.forwardRef(
@@ -14688,7 +14747,7 @@ sN.displayName = lf.displayName;
 const iN = D.forwardRef(
   ({ className: e, isDisabled: t = !1, isGrowable: n = !1, ...r }, o) => {
     const a = Fe(null), i = _e({ isDisabled: t });
-    return wt(() => {
+    return dt(() => {
       if (n && a.current) {
         const s = a.current, c = () => {
           s.style.height = "auto", s.style.height = `${s.scrollHeight}px`;
@@ -14702,6 +14761,7 @@ const iN = D.forwardRef(
           typeof o == "function" ? o(s) : o && (o.current = s), a.current = s;
         },
         className: P(
+          "vero-textarea",
           ce.input,
           "min-h-[5rem]",
           n && "resize-none overflow-hidden",
@@ -15568,7 +15628,7 @@ const iE = u.forwardRef(
             {
               ref: p,
               align: r,
-              className: P(ce.tooltip, i),
+              className: P("vero-tooltip", ce.tooltip, i),
               side: n,
               sideOffset: o,
               style: { zIndex: h, ...f.style },