tcce-design-system 0.1.5 → 0.1.6

package/dist/tcce-design-system-components.js

@@ -1,6 +1,6 @@
 import * as _n from "react";
 import x, { useDebugValue as no, createElement as Xs, useRef as ft, useContext as ct, createContext as ge, useLayoutEffect as Nc, useEffect as Ot, useId as Xt, useInsertionEffect as qs, useMemo as Ft, useCallback as Hn, Children as Lc, isValidElement as Bc, useState as Wt, Fragment as Zs, forwardRef as zt, Component as Oc } from "react";
-import { jsx as p, Fragment as Js, jsxs as R } from "react/jsx-runtime";
+import { jsx as p, Fragment as Js, jsxs as I } from "react/jsx-runtime";
 import jc, { createPortal as Fc } from "react-dom";
 import { useField as zc } from "formik";
 var bt = function() {
@@ -1065,23 +1065,23 @@ function Yu(t, e, n) {
   var g = new Ku(n, h, r ? i.componentStyle : void 0);
   function w(A, T) {
     return (function(S, C, E) {
-      var M = S.attrs, _ = S.componentStyle, D = S.defaultProps, K = S.foldedComponentIds, U = S.styledComponentId, Tt = S.target, et = x.useContext(wa), O = go(), V = S.shouldForwardProp || O.shouldForwardProp;
+      var M = S.attrs, z = S.componentStyle, D = S.defaultProps, K = S.foldedComponentIds, U = S.styledComponentId, Tt = S.target, et = x.useContext(wa), O = go(), V = S.shouldForwardProp || O.shouldForwardProp;
       process.env.NODE_ENV !== "production" && no(U);
-      var F = hu(C, et, D) || Ie, I = (function(Y, st, $t) {
+      var F = hu(C, et, D) || Ie, R = (function(Y, st, $t) {
         for (var H, yt = bt(bt({}, st), { className: void 0, theme: $t }), qt = 0; qt < Y.length; qt += 1) {
           var _t = Ne(H = Y[qt]) ? H(yt) : H;
           for (var pt in _t) yt[pt] = pt === "className" ? le(yt[pt], _t[pt]) : pt === "style" ? bt(bt({}, yt[pt]), _t[pt]) : _t[pt];
         }
         return st.className && (yt.className = le(yt.className, st.className)), yt;
-      })(M, C, F), j = I.as || Tt, nt = {};
-      for (var rt in I) I[rt] === void 0 || rt[0] === "$" || rt === "as" || rt === "theme" && I.theme === F || (rt === "forwardedAs" ? nt.as = I.forwardedAs : V && !V(rt, j) || (nt[rt] = I[rt], V || process.env.NODE_ENV !== "development" || Uc(rt) || bo.has(rt) || !Er.has(j) || (bo.add(rt), console.warn('styled-components: it looks like an unknown prop "'.concat(rt, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
+      })(M, C, F), j = R.as || Tt, nt = {};
+      for (var rt in R) R[rt] === void 0 || rt[0] === "$" || rt === "as" || rt === "theme" && R.theme === F || (rt === "forwardedAs" ? nt.as = R.forwardedAs : V && !V(rt, j) || (nt[rt] = R[rt], V || process.env.NODE_ENV !== "development" || Uc(rt) || bo.has(rt) || !Er.has(j) || (bo.add(rt), console.warn('styled-components: it looks like an unknown prop "'.concat(rt, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
       var B = (function(Y, st) {
         var $t = go(), H = Y.generateAndInjectStyles(st, $t.styleSheet, $t.stylis);
         return process.env.NODE_ENV !== "production" && no(H), H;
-      })(_, I);
+      })(z, R);
       process.env.NODE_ENV !== "production" && S.warnTooManyClasses && S.warnTooManyClasses(B);
       var G = le(K, U);
-      return B && (G += " " + B), I.className && (G += " " + I.className), nt[lr(j) && !Er.has(j) ? "class" : "className"] = G, E && (nt.ref = E), Xs(j, nt);
+      return B && (G += " " + B), R.className && (G += " " + R.className), nt[lr(j) && !Er.has(j) ? "class" : "className"] = G, E && (nt.ref = E), Xs(j, nt);
     })(v, A, T);
   }
   w.displayName = c;
@@ -1253,7 +1253,7 @@ const Ta = {
         font-weight: 400;
         line-height: 161.76%;
     `
-}, z = {
+}, _ = {
   80: P`
         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         font-size: 5rem;
@@ -1333,7 +1333,7 @@ const Ta = {
     margin: 0;
     color: ${({ color: t }) => t || "var(--color-main-blue-primary)"};
 `, li = k.span`
-    ${({ size: t = 16 }) => z[t]}
+    ${({ size: t = 16 }) => _[t]}
     margin: 0;
     color: ${({ color: t }) => t || "var(--color-main-blue-primary)"};
 `, Xu = k.span`
@@ -1949,8 +1949,8 @@ function Br({ keyframes: t, velocity: e = 0, power: n = 0.8, timeConstant: r = 3
   const b = c + y, g = o === void 0 ? b : o(b);
   g !== b && (y = g - c);
   const w = (E) => -y * Math.exp(-E / r), v = (E) => g + w(E), A = (E) => {
-    const M = w(E), _ = v(E);
-    h.done = Math.abs(M) <= u, h.value = h.done ? g : _;
+    const M = w(E), z = v(E);
+    h.done = Math.abs(M) <= u, h.value = h.done ? g : z;
   };
   let T, S;
   const C = (E) => {
@@ -2116,8 +2116,8 @@ class Ai extends Pi {
     let v = this.currentTime, A = r;
     if (c) {
       const E = Math.min(this.currentTime, i) / a;
-      let M = Math.floor(E), _ = E % 1;
-      !_ && E >= 1 && (_ = 1), _ === 1 && M--, M = Math.min(M, c + 1), !!(M % 2) && (h === "reverse" ? (_ = 1 - _, f && (_ -= f / a)) : h === "mirror" && (A = o)), v = Kt(0, 1, _) * a;
+      let M = Math.floor(E), z = E % 1;
+      !z && E >= 1 && (z = 1), z === 1 && M--, M = Math.min(M, c + 1), !!(M % 2) && (h === "reverse" ? (z = 1 - z, f && (z -= f / a)) : h === "mirror" && (A = o)), v = Kt(0, 1, z) * a;
     }
     const T = w ? { done: !1, value: d[0] } : A.next(v);
     s && (T.value = s(T.value));
@@ -3353,10 +3353,10 @@ const Zn = ({ children: t, custom: e, initial: n = !0, onExitComplete: r, presen
         y.set(C, !0);
       else
         return;
-      let _ = !0;
+      let z = !0;
       y.forEach((D) => {
-        D || (_ = !1);
-      }), _ && (T?.(), v(m.current), o && d?.(), r && r());
+        D || (z = !1);
+      }), z && (T?.(), v(m.current), o && d?.(), r && r());
     };
     return p(qh, { isPresent: E, initial: !f.current || n ? void 0 : !1, custom: e, presenceAffectsLayout: i, mode: s, root: l, onExitComplete: E ? void 0 : M, anchorX: a, children: S }, C);
   }) });
@@ -3827,7 +3827,7 @@ function gr(t, { forwardMotionProps: e = !1 } = {}, n, r) {
       const m = Df(d);
       u = m.MeasureLayout, h.visualElement = kf(t, f, d, r, m.ProjectionNode);
     }
-    return R(Jn.Provider, { value: h, children: [u && h.visualElement ? p(u, { visualElement: h.visualElement, ...d }) : null, yf(t, a, Tf(f, h.visualElement, l), f, c, e)] });
+    return I(Jn.Provider, { value: h, children: [u && h.visualElement ? p(u, { visualElement: h.visualElement, ...d }) : null, yf(t, a, Tf(f, h.visualElement, l), f, c, e)] });
   }
   s.displayName = `motion.${typeof t == "string" ? t : `create(${t.displayName ?? t.name ?? ""})`}`;
   const o = zt(s);
@@ -4548,8 +4548,8 @@ function cm(t) {
       let E = C || // If we're making this variant active, we want to always make it active
       g === l && w.isActive && !S && A || // If we removed a higher-priority variant (i is in reverse order)
       b > m && A, M = !1;
-      const _ = Array.isArray(v) ? v : [v];
-      let D = _.reduce(i(g), {});
+      const z = Array.isArray(v) ? v : [v];
+      let D = z.reduce(i(g), {});
       T === !1 && (D = {});
       const { prevResolvedValues: K = {} } = w, U = {
         ...K,
@@ -4560,21 +4560,21 @@ function cm(t) {
         F && (F.liveStyle = !1);
       };
       for (const V in U) {
-        const F = D[V], I = K[V];
+        const F = D[V], R = K[V];
         if (f.hasOwnProperty(V))
           continue;
         let j = !1;
-        qr(F) && qr(I) ? j = !Fl(F, I) : j = F !== I, j ? F != null ? Tt(V) : h.add(V) : F !== void 0 && h.has(V) ? Tt(V) : w.protectedKeys[V] = !0;
+        qr(F) && qr(R) ? j = !Fl(F, R) : j = F !== R, j ? F != null ? Tt(V) : h.add(V) : F !== void 0 && h.has(V) ? Tt(V) : w.protectedKeys[V] = !0;
       }
       w.prevProp = v, w.prevResolvedValues = D, w.isActive && (f = { ...f, ...D }), r && t.blockInitialAnimation && (E = !1);
       const et = S && C;
-      E && (!et || M) && c.push(..._.map((V) => {
+      E && (!et || M) && c.push(...z.map((V) => {
         const F = { type: g };
         if (typeof V == "string" && r && !et && t.manuallyAnimateOnMount && t.parent) {
-          const { parent: I } = t, j = De(I, V);
-          if (I.enteringChildren && j) {
+          const { parent: R } = t, j = De(R, V);
+          if (R.enteringChildren && j) {
             const { delayChildren: nt } = j.transition || {};
-            F.delay = jl(I.enteringChildren, t, nt);
+            F.delay = jl(R.enteringChildren, t, nt);
           }
         }
         return {
@@ -6202,7 +6202,7 @@ const Ep = {
     min-height: 12.5rem;
     width: 100%;
 `, Np = k(ye.p)`
-    ${z[16]}
+    ${_[16]}
     ${({ $color: t = "primary" }) => nc[t]}
     margin: 0;
 `, Hi = ({
@@ -6213,8 +6213,8 @@ const Ep = {
   title: i,
   variant: s = "rotate"
 }) => {
-  const o = /* @__PURE__ */ R(Rp, { children: [
-    /* @__PURE__ */ R(Vp, { $size: t, $color: e, $variant: s, children: [
+  const o = /* @__PURE__ */ I(Rp, { children: [
+    /* @__PURE__ */ I(Vp, { $size: t, $color: e, $variant: s, children: [
       /* @__PURE__ */ p(
         ye.svg,
         {
@@ -6293,7 +6293,7 @@ const Ep = {
     ${Ta[30]}
     color: var(--color-main-blue-primary);
     margin: 0;
-`, Jy = ({ message: t = "Loading...", color: e = "primary", variant: n = "rotate" }) => /* @__PURE__ */ R(Lp, { role: "status", "aria-live": "polite", children: [
+`, Jy = ({ message: t = "Loading...", color: e = "primary", variant: n = "rotate" }) => /* @__PURE__ */ I(Lp, { role: "status", "aria-live": "polite", children: [
   /* @__PURE__ */ p(Bp, { children: /* @__PURE__ */ p(
     Hi,
     {
@@ -6376,17 +6376,17 @@ const Ep = {
   sm: P`
         padding: 0.375rem 0.75rem;
         min-height: 2.75rem;
-        ${z[12]}
+        ${_[12]}
     `,
   md: P`
         padding: 0.625rem 1.25rem;
         min-height: 3.175rem;
-        ${z[16]}
+        ${_[16]}
     `,
   lg: P`
         padding: 0.75rem 1.5rem;
         min-height: 3.5rem;
-        ${z[20]}
+        ${_[20]}
     `
 }, Up = k.button`
     borden: none;
@@ -6420,7 +6420,7 @@ const Ep = {
   iconSize: a = "md",
   iconColor: l = "currentColor",
   ...u
-}) => /* @__PURE__ */ R(
+}) => /* @__PURE__ */ I(
   Up,
   {
     $variant: e,
@@ -6723,7 +6723,7 @@ function mg(t) {
 }
 const pg = (t) => {
   var e, n, r, i, s, o, a, l, u;
-  const { invert: d, toast: c, unstyled: h, interacting: f, setHeights: m, visibleToasts: y, heights: b, index: g, toasts: w, expanded: v, removeToast: A, defaultRichColors: T, closeButton: S, style: C, cancelButtonStyle: E, actionButtonStyle: M, className: _ = "", descriptionClassName: D = "", duration: K, position: U, gap: Tt, expandByDefault: et, classNames: O, icons: V, closeButtonAriaLabel: F = "Close toast" } = t, [I, j] = x.useState(null), [nt, rt] = x.useState(null), [B, G] = x.useState(!1), [Y, st] = x.useState(!1), [$t, H] = x.useState(!1), [yt, qt] = x.useState(!1), [_t, pt] = x.useState(!1), [Tc, rr] = x.useState(0), [Cc, Yi] = x.useState(0), Ye = x.useRef(c.duration || K || js), Gi = x.useRef(null), Ht = x.useRef(null), kc = g === 0, Pc = g + 1 <= y, wt = c.type, be = c.dismissible !== !1, Ac = c.className || "", Ec = c.descriptionClassName || "", fn = x.useMemo(() => b.findIndex((N) => N.toastId === c.id) || 0, [
+  const { invert: d, toast: c, unstyled: h, interacting: f, setHeights: m, visibleToasts: y, heights: b, index: g, toasts: w, expanded: v, removeToast: A, defaultRichColors: T, closeButton: S, style: C, cancelButtonStyle: E, actionButtonStyle: M, className: z = "", descriptionClassName: D = "", duration: K, position: U, gap: Tt, expandByDefault: et, classNames: O, icons: V, closeButtonAriaLabel: F = "Close toast" } = t, [R, j] = x.useState(null), [nt, rt] = x.useState(null), [B, G] = x.useState(!1), [Y, st] = x.useState(!1), [$t, H] = x.useState(!1), [yt, qt] = x.useState(!1), [_t, pt] = x.useState(!1), [Tc, rr] = x.useState(0), [Cc, Yi] = x.useState(0), Ye = x.useRef(c.duration || K || js), Gi = x.useRef(null), Ht = x.useRef(null), kc = g === 0, Pc = g + 1 <= y, wt = c.type, be = c.dismissible !== !1, Ac = c.className || "", Ec = c.descriptionClassName || "", fn = x.useMemo(() => b.findIndex((N) => N.toastId === c.id) || 0, [
     b,
     c.id
   ]), Dc = x.useMemo(() => {
@@ -6846,7 +6846,7 @@ const pg = (t) => {
   return /* @__PURE__ */ x.createElement("li", {
     tabIndex: 0,
     ref: Ht,
-    className: Lt(_, Ac, O?.toast, c == null || (e = c.classNames) == null ? void 0 : e.toast, O?.default, O?.[wt], c == null || (n = c.classNames) == null ? void 0 : n[wt]),
+    className: Lt(z, Ac, O?.toast, c == null || (e = c.classNames) == null ? void 0 : e.toast, O?.default, O?.[wt], c == null || (n = c.classNames) == null ? void 0 : n[wt]),
     "data-sonner-toast": "",
     "data-rich-colors": (Qi = c.richColors) != null ? Qi : T,
     "data-styled": !(c.jsx || c.unstyled || h),
@@ -6889,9 +6889,9 @@ const pg = (t) => {
       var N, at, ht;
       if (yt || !be) return;
       we.current = null;
-      const St = Number(((N = Ht.current) == null ? void 0 : N.style.getPropertyValue("--swipe-amount-x").replace("px", "")) || 0), mn = Number(((at = Ht.current) == null ? void 0 : at.style.getPropertyValue("--swipe-amount-y").replace("px", "")) || 0), ut = (/* @__PURE__ */ new Date()).getTime() - ((ht = Gi.current) == null ? void 0 : ht.getTime()), Ct = I === "x" ? St : mn, pn = Math.abs(Ct) / ut;
+      const St = Number(((N = Ht.current) == null ? void 0 : N.style.getPropertyValue("--swipe-amount-x").replace("px", "")) || 0), mn = Number(((at = Ht.current) == null ? void 0 : at.style.getPropertyValue("--swipe-amount-y").replace("px", "")) || 0), ut = (/* @__PURE__ */ new Date()).getTime() - ((ht = Gi.current) == null ? void 0 : ht.getTime()), Ct = R === "x" ? St : mn, pn = Math.abs(Ct) / ut;
       if (Math.abs(Ct) >= hg || pn > 0.11) {
-        rr(xe.current), c.onDismiss == null || c.onDismiss.call(c, c), rt(I === "x" ? St > 0 ? "right" : "left" : mn > 0 ? "down" : "up"), Zt(), qt(!0);
+        rr(xe.current), c.onDismiss == null || c.onDismiss.call(c, c), rt(R === "x" ? St > 0 ? "right" : "left" : mn > 0 ? "down" : "up"), Zt(), qt(!0);
         return;
       } else {
         var Mt, Vt;
@@ -6905,13 +6905,13 @@ const pg = (t) => {
       const ut = N.clientY - we.current.y, Ct = N.clientX - we.current.x;
       var pn;
       const Mt = (pn = t.swipeDirections) != null ? pn : mg(U);
-      !I && (Math.abs(Ct) > 1 || Math.abs(ut) > 1) && j(Math.abs(Ct) > Math.abs(ut) ? "x" : "y");
+      !R && (Math.abs(Ct) > 1 || Math.abs(ut) > 1) && j(Math.abs(Ct) > Math.abs(ut) ? "x" : "y");
       let Vt = {
         x: 0,
         y: 0
       };
       const eo = (re) => 1 / (1.5 + Math.abs(re) / 20);
-      if (I === "y") {
+      if (R === "y") {
         if (Mt.includes("top") || Mt.includes("bottom"))
           if (Mt.includes("top") && ut < 0 || Mt.includes("bottom") && ut > 0)
             Vt.y = ut;
@@ -6919,7 +6919,7 @@ const pg = (t) => {
             const re = ut * eo(ut);
             Vt.y = Math.abs(re) < Math.abs(ut) ? re : ut;
           }
-      } else if (I === "x" && (Mt.includes("left") || Mt.includes("right")))
+      } else if (R === "x" && (Mt.includes("left") || Mt.includes("right")))
         if (Mt.includes("left") && Ct < 0 || Mt.includes("right") && Ct > 0)
           Vt.x = Ct;
         else {
@@ -7011,7 +7011,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   ].concat(E.filter((B) => B.position).map((B) => B.position)))), [
     E,
     s
-  ]), [_, D] = x.useState([]), [K, U] = x.useState(!1), [Tt, et] = x.useState(!1), [O, V] = x.useState(h !== "system" ? h : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"), F = x.useRef(null), I = o.join("+").replace(/Key/g, "").replace(/Digit/g, ""), j = x.useRef(null), nt = x.useRef(!1), rt = x.useCallback((B) => {
+  ]), [z, D] = x.useState([]), [K, U] = x.useState(!1), [Tt, et] = x.useState(!1), [O, V] = x.useState(h !== "system" ? h : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"), F = x.useRef(null), R = o.join("+").replace(/Key/g, "").replace(/Digit/g, ""), j = x.useRef(null), nt = x.useRef(!1), rt = x.useCallback((B) => {
     C((G) => {
       var Y;
       return (Y = G.find((st) => st.id === B.id)) != null && Y.delete || vt.dismiss(B.id), G.filter(({ id: st }) => st !== B.id);
@@ -7097,7 +7097,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   ]), // Remove item from normal navigation flow, only available via hotkey
   /* @__PURE__ */ x.createElement("section", {
     ref: n,
-    "aria-label": `${T} ${I}`,
+    "aria-label": `${T} ${R}`,
     tabIndex: -1,
     "aria-live": "polite",
     "aria-relevant": "additions text",
@@ -7117,7 +7117,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       "data-y-position": st,
       "data-x-position": $t,
       style: {
-        "--front-toast-height": `${((Y = _[0]) == null ? void 0 : Y.height) || 0}px`,
+        "--front-toast-height": `${((Y = z[0]) == null ? void 0 : Y.height) || 0}px`,
         "--width": `${ug}px`,
         "--gap": `${v}px`,
         ...y,
@@ -7165,7 +7165,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
         closeButtonAriaLabel: g?.closeButtonAriaLabel,
         removeToast: rt,
         toasts: E.filter((pt) => pt.position == H.position),
-        heights: _.filter((pt) => pt.position == H.position),
+        heights: z.filter((pt) => pt.position == H.position),
         setHeights: D,
         expandByDefault: a,
         gap: v,
@@ -7330,13 +7330,13 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   ...e
 }) => /* @__PURE__ */ p(kg, { ...e, children: t }), Pg = {
   sm: P`
-        ${z[12]}
+        ${_[12]}
     `,
   md: P`
-        ${z[16]}
+        ${_[16]}
     `,
   lg: P`
-        ${z[18]}
+        ${_[18]}
     `
 }, Ag = k.div`
     color: var(--color-main-warning-state);
@@ -7353,13 +7353,13 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   ...r
 }) => /* @__PURE__ */ p(Ag, { className: e, $size: n, ...r, children: t }), Eg = {
   sm: P`
-        ${z[16]}
+        ${_[16]}
     `,
   md: P`
-        ${z[24]}
+        ${_[24]}
     `,
   lg: P`
-        ${z[30]}
+        ${_[30]}
     `
 }, Dg = k.label`
     color: var(--color-main-blue-primary);
@@ -7377,7 +7377,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   disabled: i = !1,
   size: s = "md",
   ...o
-}) => /* @__PURE__ */ R(
+}) => /* @__PURE__ */ I(
   Dg,
   {
     className: n,
@@ -7653,17 +7653,17 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   sm: P`
         padding: 0.5rem 1rem;
         height: 2.5rem;
-        ${z[18]}
+        ${_[18]}
     `,
   md: P`
         padding: 0.5rem 1rem;
         height: 2.75rem;
-        ${z[20]}
+        ${_[20]}
     `,
   lg: P`
         padding: 0.5rem 1rem;
         height: 3rem;
-        ${z[20]}
+        ${_[20]}
     `
 }, nr = P`
     display: flex;
@@ -7692,7 +7692,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     iconColor: l = "currentColor",
     className: u,
     ...d
-  }, c) => /* @__PURE__ */ R(
+  }, c) => /* @__PURE__ */ I(
     Ig,
     {
       $size: t,
@@ -7754,7 +7754,7 @@ const Lg = ({ color: t = "currentColor", size: e = 24, className: n, ...r }) =>
   ...l
 }) => {
   const [u, d] = Wt(!1), c = () => d((h) => !h);
-  return /* @__PURE__ */ R(
+  return /* @__PURE__ */ I(
     Wg,
     {
       $size: t,
@@ -7895,13 +7895,13 @@ const Lg = ({ color: t = "currentColor", size: e = 24, className: n, ...r }) =>
     color: ${({ $disabled: t }) => t ? "var(--color-dark-200)" : "var(--color-main-blue-primary)"};
 `, s0 = {
   sm: P`
-        ${z[16]}
+        ${_[16]}
     `,
   md: P`
-        ${z[18]}
+        ${_[18]}
     `,
   lg: P`
-        ${z[18]}
+        ${_[18]}
     `
 }, oc = zt(
   ({
@@ -7939,7 +7939,7 @@ const Lg = ({ color: t = "currentColor", size: e = 24, className: n, ...r }) =>
       D.disabled || (s?.(D), o && o(Zg(D.value, l)), A(!1), S(-1));
     }, M = (D) => {
       n || (D.key === "ArrowDown" || D.key === "ArrowUp" ? (D.preventDefault(), A(!0)) : (D.key === "Enter" || D.key === " ") && (D.preventDefault(), A((K) => !K)));
-    }, _ = (D) => {
+    }, z = (D) => {
       if (D.key === "Escape") {
         D.preventDefault(), A(!1), S(-1);
         return;
@@ -7954,7 +7954,7 @@ const Lg = ({ color: t = "currentColor", size: e = 24, className: n, ...r }) =>
         K && !K.disabled && E(K);
       } else D.key === "Home" ? (D.preventDefault(), S(ic(r))) : D.key === "End" && (D.preventDefault(), S(Xg(r)));
     };
-    return /* @__PURE__ */ R(t0, { ref: m, className: u, children: [
+    return /* @__PURE__ */ I(t0, { ref: m, className: u, children: [
       l && /* @__PURE__ */ p("input", { type: "hidden", name: l, value: C?.value ?? "" }),
       /* @__PURE__ */ p(
         n0,
@@ -8015,7 +8015,7 @@ const Lg = ({ color: t = "currentColor", size: e = 24, className: n, ...r }) =>
             duration: 0.25,
             ease: [0.4, 0, 0.2, 1]
           },
-          onKeyDown: _,
+          onKeyDown: z,
           children: /* @__PURE__ */ p(i0, { ref: b, className: c, children: r.map((D, K) => {
             const U = K === T;
             return /* @__PURE__ */ p(
@@ -8048,7 +8048,7 @@ const a0 = k.textarea`
     ${({ $size: t }) => l0[t]}
     ${({ $hasError: t }) => t && Ke}
     ${({ $disabled: t }) => t && ve}
-    ${z[20]}
+    ${_[20]}
     
     resize: ${({ $resize: t }) => t};
 
@@ -8063,19 +8063,19 @@ const a0 = k.textarea`
     }
 `, l0 = {
   sm: `
-        ${z[20]}
+        ${_[20]}
         height: 6rem;
         max-height: 12rem;
         padding: 1rem 1.25rem;
     `,
   md: `
-        ${z[24]}
+        ${_[24]}
         height: 8rem;
         max-height: 16rem;
         padding: 1rem 1.25rem;
     `,
   lg: `
-        ${z[24]}
+        ${_[24]}
         height:12rem;
         max-height: 20rem;
         padding: 1rem 1.25rem;
@@ -8132,7 +8132,7 @@ const c0 = k.div`
   placeholder: s = "Buscar...",
   onSearch: o,
   className: a
-}) => /* @__PURE__ */ R(c0, { $size: t, className: a, children: [
+}) => /* @__PURE__ */ I(c0, { $size: t, className: a, children: [
   e && /* @__PURE__ */ p(q, { component: e, size: r, color: i }),
   /* @__PURE__ */ p(u0, { placeholder: s, onChange: (u) => {
     o?.(u.target.value);
@@ -8220,7 +8220,7 @@ const c0 = k.div`
     );
     return Ot(() => {
       m.current && (m.current.indeterminate = !!e);
-    }, [e]), /* @__PURE__ */ R(h0, { className: s, children: [
+    }, [e]), /* @__PURE__ */ I(h0, { className: s, children: [
       /* @__PURE__ */ p(
         f0,
         {
@@ -8237,7 +8237,7 @@ const c0 = k.div`
           ...f
         }
       ),
-      /* @__PURE__ */ R(
+      /* @__PURE__ */ I(
         m0,
         {
           $checked: !!c || !!e,
@@ -8305,7 +8305,7 @@ const v0 = ({
     ...c
   }, h) => {
     const f = Xt(), m = c.id ?? f;
-    return /* @__PURE__ */ R(b0, { className: l, children: [
+    return /* @__PURE__ */ I(b0, { className: l, children: [
       /* @__PURE__ */ p(
         ac,
         {
@@ -8388,19 +8388,19 @@ const x0 = k.div`
         padding: 0.375rem;
         width: 2.5rem;
         height: 2.5rem;
-        ${z[24]}
+        ${_[24]}
     `,
   md: `
         padding: 0.625rem;
         width: 3rem;
         height: 3.5rem;
-        ${z[30]}
+        ${_[30]}
     `,
   lg: `
         padding: 0.75rem;
         width: 3.5rem;
         height: 4rem;
-        ${z[40]}
+        ${_[40]}
     `
 }, lc = zt(
   ({
@@ -8593,7 +8593,7 @@ const D0 = k.div`
     ...o
   }, a) => {
     const l = Xt(), u = o.id ?? l, d = !!e, { size: c, ...h } = o;
-    return /* @__PURE__ */ R(D0, { className: i, children: [
+    return /* @__PURE__ */ I(D0, { className: i, children: [
       /* @__PURE__ */ p(
         $0,
         {
@@ -8651,7 +8651,7 @@ const I0 = k.section`
     ...u
   }, d) => {
     const c = Xt(), h = u.id ?? c;
-    return /* @__PURE__ */ R(I0, { className: o, children: [
+    return /* @__PURE__ */ I(I0, { className: o, children: [
       /* @__PURE__ */ p(
         uc,
         {
@@ -8718,18 +8718,23 @@ const Us = k.div`
   onChange: E,
   ...M
 }) => {
-  const [_, D, K] = zc(e), U = !!(D.touched && D.error), Tt = U ? D.error : void 0, et = t?.toString?.() || e, O = {
+  const [z, D, K] = zc(e), U = !!(D.touched && D.error), Tt = U ? D.error : void 0, et = t?.toString?.() || e, O = {
     required: a || void 0,
     "aria-required": a || void 0,
     "aria-invalid": U || void 0,
     "aria-describedby": U ? `${et}-error` : void 0
-  }, V = (I) => {
-    if (E) return E(I);
-    _.onChange(I);
+  }, V = (R) => {
+    if (E) return E(R);
+    z.onChange(R);
   };
   let F;
   switch (r) {
     case "textarea": {
+      const R = (j) => {
+        E ? E(
+          j
+        ) : z.onChange(j);
+      };
       F = /* @__PURE__ */ p(
         sc,
         {
@@ -8738,13 +8743,10 @@ const Us = k.div`
           className: m,
           hasError: U,
           disabled: o,
+          value: z.value ?? "",
           size: i,
           placeholder: s,
-          onChange: (j) => {
-            E ? E(
-              j
-            ) : _.onChange(j);
-          },
+          onChange: R,
           ...M,
           ...O
         }
@@ -8761,11 +8763,11 @@ const Us = k.div`
           hasError: U,
           disabled: o,
           size: i,
-          value: _.value ?? "",
-          onChange: (I) => {
-            _.onChange(I);
+          value: z.value ?? "",
+          onChange: (R) => {
+            z.onChange(R);
             const j = l.find(
-              (nt) => String(nt.value) === I.target.value
+              (nt) => String(nt.value) === R.target.value
             );
             j && T?.(j);
           },
@@ -8787,10 +8789,10 @@ const Us = k.div`
           hasError: U,
           disabled: o,
           size: i,
-          checked: !!_.value,
+          checked: !!z.value,
           label: u,
-          onChange: (I) => {
-            K.setValue(I.target.checked);
+          onChange: (R) => {
+            K.setValue(R.target.checked);
           },
           ...M,
           ...O
@@ -8808,7 +8810,7 @@ const Us = k.div`
           size: i,
           hasError: U,
           disabled: o,
-          checked: _.value === j.value,
+          checked: z.value === j.value,
           onChange: (nt) => {
             const rt = nt.target.value, B = typeof j.value == "number" ? Number(rt) : rt;
             K.setValue(B), S?.(nt);
@@ -8827,9 +8829,9 @@ const Us = k.div`
           type: h,
           size: i,
           hasError: U,
-          onChange: (I) => K.setValue(I),
-          onComplete: (I) => {
-            K.setValue(I), C?.(I);
+          onChange: (R) => K.setValue(R),
+          onComplete: (R) => {
+            K.setValue(R), C?.(R);
           },
           ...M,
           ...O
@@ -8838,7 +8840,7 @@ const Us = k.div`
       break;
     }
     case "password": {
-      const { rightIcon: I, ...j } = M;
+      const { rightIcon: R, ...j } = M;
       F = /* @__PURE__ */ p(
         Gg,
         {
@@ -8902,14 +8904,14 @@ const Us = k.div`
           rightIcon: w,
           iconSize: v,
           iconColor: A,
-          value: _.value ?? "",
+          value: z.value ?? "",
           onChange: V,
           ...M,
           ...O
         }
       );
   }
-  return r === "checkbox" ? /* @__PURE__ */ R(Us, { className: f, children: [
+  return r === "checkbox" ? /* @__PURE__ */ I(Us, { className: f, children: [
     F,
     U && /* @__PURE__ */ p(
       zs,
@@ -8920,7 +8922,7 @@ const Us = k.div`
         children: Tt
       }
     )
-  ] }) : /* @__PURE__ */ R(Us, { className: f, children: [
+  ] }) : /* @__PURE__ */ I(Us, { className: f, children: [
     n && /* @__PURE__ */ p(
       Ui,
       {
@@ -9090,7 +9092,7 @@ const Us = k.div`
       window.clearTimeout(w), document.removeEventListener("keydown", A), f.current && f.current.focus();
     };
   }, [t]);
-  const y = /* @__PURE__ */ p(Zn, { children: t && /* @__PURE__ */ p(O0, { ...fc, onClick: m, children: /* @__PURE__ */ R(
+  const y = /* @__PURE__ */ p(Zn, { children: t && /* @__PURE__ */ p(O0, { ...fc, onClick: m, children: /* @__PURE__ */ I(
     j0,
     {
       ...L0,
@@ -9261,7 +9263,7 @@ const Us = k.div`
   const S = (C) => {
     T(C), v?.(C);
   };
-  return /* @__PURE__ */ R(
+  return /* @__PURE__ */ I(
     z0,
     {
       isOpen: t,
@@ -9275,12 +9277,12 @@ const Us = k.div`
       className: `${m} !h-fit !max-w-[60rem]`,
       children: [
         /* @__PURE__ */ p(H0, { showDivider: !0, className: y, children: /* @__PURE__ */ p(ai, { id: "tac-title", size: 20, children: r }) }),
-        /* @__PURE__ */ R(W0, { padded: !0, showBottomDivider: !0, className: b, children: [
+        /* @__PURE__ */ I(W0, { padded: !0, showBottomDivider: !0, className: b, children: [
           i && /* @__PURE__ */ p(li, { id: "tac-subtitle", size: 16, children: i }),
           s,
           o
         ] }),
-        /* @__PURE__ */ R(Y0, { showDivider: !0, align: "space-between", className: g, children: [
+        /* @__PURE__ */ I(Y0, { showDivider: !0, align: "space-between", className: g, children: [
           /* @__PURE__ */ p(
             Ki,
             {
@@ -9289,7 +9291,7 @@ const Us = k.div`
               onChange: (C) => S(C.target.checked)
             }
           ),
-          /* @__PURE__ */ R("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ I("div", { style: { display: "flex", gap: "0.5rem" }, children: [
             /* @__PURE__ */ p(Os, { variant: "secondary", onClick: n, children: u }),
             /* @__PURE__ */ p(Os, { variant: "primary", onClick: e, disabled: !A, children: l })
           ] })
@@ -9390,8 +9392,8 @@ const Us = k.div`
     [e, t.permissions]
   )) return null;
   const d = l.length > 0, c = !!(t.path && i && i.startsWith(t.path));
-  return /* @__PURE__ */ R(Q0, { $level: n, children: [
-    /* @__PURE__ */ R(
+  return /* @__PURE__ */ I(Q0, { $level: n, children: [
+    /* @__PURE__ */ I(
       X0,
       {
         onClick: () => {
@@ -9403,7 +9405,7 @@ const Us = k.div`
         $expanded: s && d,
         title: a ? t.label : "",
         children: [
-          /* @__PURE__ */ R(q0, { children: [
+          /* @__PURE__ */ I(q0, { children: [
             n > 0 && !a && /* @__PURE__ */ p(ty, {}),
             t.icon && /* @__PURE__ */ p(
               q,
@@ -9543,10 +9545,10 @@ const Us = k.div`
   const { isCollapsed: o, setIsCollapsed: a, isMobileOpen: l, setIsMobileOpen: u } = pc(), d = (c) => {
     n(c), typeof window < "u" && window.innerWidth < 768 && u(!1);
   };
-  return /* @__PURE__ */ R(Js, { children: [
+  return /* @__PURE__ */ I(Js, { children: [
     /* @__PURE__ */ p(Zn, { children: l && /* @__PURE__ */ p(ny, { ...fc, onClick: () => u(!1) }) }),
-    /* @__PURE__ */ R(ry, { $collapsed: l ? !1 : o, $open: l, children: [
-      /* @__PURE__ */ R(iy, { $collapsed: o, children: [
+    /* @__PURE__ */ I(ry, { $collapsed: l ? !1 : o, $open: l, children: [
+      /* @__PURE__ */ I(iy, { $collapsed: o, children: [
         /* @__PURE__ */ p(oy, { children: o ? s : i }),
         /* @__PURE__ */ p(
           ay,
@@ -9672,15 +9674,15 @@ const cy = {
 `, dy = {
   sm: P`
         gap: 0.25rem;
-        ${z[14]}
+        ${_[14]}
     `,
   md: P`
         gap: 0.5rem;
-        ${z[16]}
+        ${_[16]}
     `,
   lg: P`
         gap: 0.75rem;
-        ${z[20]}
+        ${_[20]}
     `
 }, hy = k.a`
     display: inline-flex;
@@ -9748,7 +9750,7 @@ const cy = {
       tabIndex: l ? -1 : u ?? 0,
       ...w
     };
-    return /* @__PURE__ */ R(
+    return /* @__PURE__ */ I(
       hy,
       {
         id: t,
@@ -9858,15 +9860,15 @@ const py = {
 `, vy = {
   sm: P`
         ${$e.sm}
-        ${z[16]}
+        ${_[16]}
     `,
   md: P`
         ${$e.md}
-        ${z[20]}
+        ${_[20]}
     `,
   lg: P`
         ${$e.lg}
-        ${z[24]}
+        ${_[24]}
     `
 }, by = k.th`
     background-color: var(--color-main-blue-primary);
@@ -9953,17 +9955,17 @@ const py = {
       scope: "col",
       "aria-sort": h ? r === "none" ? "none" : r === "asc" ? "ascending" : "descending" : void 0,
       ...f,
-      children: h || d ? /* @__PURE__ */ R(wy, { onClick: () => h?.(m), "aria-label": `Sort ${m}`, children: [
-        /* @__PURE__ */ R(Ks, { children: [
+      children: h || d ? /* @__PURE__ */ I(wy, { onClick: () => h?.(m), "aria-label": `Sort ${m}`, children: [
+        /* @__PURE__ */ I(Ks, { children: [
           i && /* @__PURE__ */ p(q, { component: i, size: o, color: a }),
           /* @__PURE__ */ p(Ty, { size: e === "sm" ? 16 : e === "md" ? 20 : 24, children: t })
         ] }),
-        /* @__PURE__ */ R(Ys, { children: [
+        /* @__PURE__ */ I(Ys, { children: [
           /* @__PURE__ */ p(Sy, { $dir: r, children: /* @__PURE__ */ p(q, { component: Lg, size: o, color: a }) }),
           s && /* @__PURE__ */ p(q, { component: s, size: o, color: a })
         ] })
-      ] }) : /* @__PURE__ */ R(xy, { $align: l, children: [
-        /* @__PURE__ */ R(Ks, { children: [
+      ] }) : /* @__PURE__ */ I(xy, { $align: l, children: [
+        /* @__PURE__ */ I(Ks, { children: [
           i && /* @__PURE__ */ p(q, { component: i, size: o, color: a }),
           /* @__PURE__ */ p(
             ai,
@@ -9989,15 +9991,15 @@ xc.displayName = "TableHeaderCell";
 const Cy = {
   sm: P`
         ${$e.sm}
-        ${z[14]}
+        ${_[14]}
     `,
   md: P`
         ${$e.md}
-        ${z[14]}
+        ${_[14]}
     `,
   lg: P`
         ${$e.lg}
-        ${z[16]}
+        ${_[16]}
     `
 }, ky = k.td`
     vertical-align: middle;
@@ -10051,7 +10053,7 @@ const Cy = {
     $variant: s,
     className: o,
     ...c,
-    children: a || l ? /* @__PURE__ */ R(Py, { $align: n, children: [
+    children: a || l ? /* @__PURE__ */ I(Py, { $align: n, children: [
       a && /* @__PURE__ */ p(Gs, { children: /* @__PURE__ */ p(q, { component: a, size: u, color: d }) }),
       /* @__PURE__ */ p(Ay, { children: t }),
       l && /* @__PURE__ */ p(Gs, { children: /* @__PURE__ */ p(q, { component: l, size: u, color: d }) })
@@ -10105,7 +10107,7 @@ const Ey = k.table`
   const l = (u, d) => (c) => {
     u.onSort?.(c), a?.({ columnId: u.id ?? String(d), direction: c });
   };
-  return /* @__PURE__ */ p($y, { className: i, children: /* @__PURE__ */ R(Ey, { $variant: r, className: s, children: [
+  return /* @__PURE__ */ p($y, { className: i, children: /* @__PURE__ */ I(Ey, { $variant: r, className: s, children: [
     /* @__PURE__ */ p(Dy, { $sticky: o, children: /* @__PURE__ */ p("tr", { children: t.map((u, d) => /* @__PURE__ */ p(
       xc,
       {
@@ -10272,10 +10274,10 @@ const Vy = k.header`
   children: o
 }) => {
   const a = (h) => h.split(" ").map((f) => f[0]).join("").toUpperCase().slice(0, 2), l = (r ?? 0) > 0 || n, u = r && r > 0 ? r : void 0, d = u ? `${u} notification${u === 1 ? "" : "s"}` : l ? "New notifications" : "No notifications", c = `Notifications: ${d}`;
-  return /* @__PURE__ */ R(Vy, { $sidebarCollapsed: t, children: [
+  return /* @__PURE__ */ I(Vy, { $sidebarCollapsed: t, children: [
     /* @__PURE__ */ p(Ry, { children: o }),
-    /* @__PURE__ */ R(Iy, { children: [
-      /* @__PURE__ */ R(
+    /* @__PURE__ */ I(Iy, { children: [
+      /* @__PURE__ */ I(
         Ny,
         {
           onClick: i,
@@ -10295,7 +10297,7 @@ const Vy = k.header`
           ]
         }
       ),
-      e && /* @__PURE__ */ R(
+      e && /* @__PURE__ */ I(
         By,
         {
           onClick: s,
@@ -10313,7 +10315,7 @@ const Vy = k.header`
                 style: { width: "100%", height: "100%", borderRadius: "50%" }
               }
             ) : a(e.name) }),
-            /* @__PURE__ */ R(jy, { children: [
+            /* @__PURE__ */ I(jy, { children: [
               /* @__PURE__ */ p(Fy, { children: e.name }),
               /* @__PURE__ */ p(zy, { children: e.role })
             ] })
@@ -10358,7 +10360,7 @@ const _y = k.div`
   contentClassName: u,
   logoImgCollapsed: d,
   logoImgExpanded: c
-}) => /* @__PURE__ */ R(_y, { children: [
+}) => /* @__PURE__ */ I(_y, { children: [
   /* @__PURE__ */ p(
     yc,
     {
@@ -10432,7 +10434,7 @@ export {
   We as baseFieldStyles,
   Wi as baseInputStyles,
   $e as baseTableCellsSizes,
-  z as bodyTextStyles,
+  _ as bodyTextStyles,
   av as createFieldConfig,
   A0 as createInputRefs,
   ve as disabledStyles,

package/dist/tcce-design-system-components.umd.cjs

@@ -946,7 +946,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[kn]+=1);const yr={80:P`
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-`,k0=({id:e,name:t,label:n,type:r="text",size:o="md",placeholder:i,disabled:s=!1,required:a=!1,options:l=[],checkboxLabel:d,radioName:u,pinLength:c=6,pinType:h="number",className:p,inputClassName:g,labelClassName:v,messageErrorClassName:w,leftIcon:y,rightIcon:x,iconSize:b,iconColor:E,onOptionSelect:T,onRadioChange:S,onPinComplete:C,onChange:D,...I})=>{const[_,M,K]=Vc.useField(t),W=!!(M.touched&&M.error),Pe=W?M.error:void 0,re=e?.toString?.()||t,F={required:a||void 0,"aria-required":a||void 0,"aria-invalid":W||void 0,"aria-describedby":W?`${re}-error`:void 0},N=V=>{if(D)return D(V);_.onChange(V)};let R;switch(r){case"textarea":{const V=j=>{D?D(j):_.onChange(j)};R=m.jsx(zo,{id:re,name:t,className:g,hasError:W,disabled:s,size:o,placeholder:i,onChange:V,...I,...F});break}case"select":{R=m.jsx(Ro,{id:re,name:t,className:g,hasError:W,disabled:s,size:o,value:_.value??"",onChange:V=>{_.onChange(V);const j=l.find(oe=>String(oe.value)===V.target.value);j&&T?.(j)},options:l,placeholder:i||"Selecciona una opción",...I,...F});break}case"checkbox":{R=m.jsx(qn,{id:re,name:t,className:g,hasError:W,disabled:s,size:o,checked:!!_.value,label:d,onChange:V=>{K.setValue(V.target.checked)},...I,...F});break}case"radio":{const V=l;R=m.jsx(C0,{children:V.map(j=>m.jsx(Yo,{name:u||t,value:j.value,label:j.label,size:o,hasError:W,disabled:s,checked:_.value===j.value,onChange:oe=>{const se=oe.target.value,O=typeof j.value=="number"?Number(se):se;K.setValue(O),S?.(oe)},...F},j.value))});break}case"pin":{R=m.jsx(Uo,{length:c,type:h,size:o,hasError:W,onChange:V=>K.setValue(V),onComplete:V=>{K.setValue(V),C?.(V)},...I,...F});break}case"password":{const{rightIcon:V,...j}=I;R=m.jsx(Jl,{id:re,name:t,className:g,hasError:W,disabled:s,size:o,placeholder:i,leftIcon:y,iconSize:b,iconColor:E,onChange:N,...j,...F});break}case"search":{R=m.jsx(ec,{className:g,size:o,placeholder:i,leftIcon:y,rightIcon:x,iconSize:b,iconColor:E,onSearch:I.onSearch,...F});break}default:R=m.jsx(jo,{id:re,name:t,className:g,hasError:W,disabled:s,size:o,placeholder:i,type:["text","email","number","tel","url","date","date","datetime-local","time"].includes(r)?r:"text",leftIcon:y,rightIcon:x,iconSize:b,iconColor:E,value:_.value??"",onChange:N,...I,...F})}return r==="checkbox"?m.jsxs(ic,{className:p,children:[R,W&&m.jsx(Fo,{id:`${re}-error`,size:o,className:w,children:Pe})]}):m.jsxs(ic,{className:p,children:[n&&m.jsx(Gn,{htmlFor:re,size:o,required:a,disabled:s,className:v,children:n}),R,W&&m.jsx(Fo,{id:`${re}-error`,size:o,className:w,children:Pe})]})},P0={initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.2,ease:"easeInOut"},layout:!1},ac={initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeInOut"}},E0={initial:{height:0,opacity:0,y:-6},animate:{height:"auto",opacity:1,y:0},exit:{height:0,opacity:0,y:-6},transition:{duration:.2,ease:"easeInOut"}},A0=k(ct.div)`
+`,k0=({id:e,name:t,label:n,type:r="text",size:o="md",placeholder:i,disabled:s=!1,required:a=!1,options:l=[],checkboxLabel:d,radioName:u,pinLength:c=6,pinType:h="number",className:p,inputClassName:g,labelClassName:v,messageErrorClassName:w,leftIcon:y,rightIcon:x,iconSize:b,iconColor:E,onOptionSelect:T,onRadioChange:S,onPinComplete:C,onChange:D,...I})=>{const[_,M,K]=Vc.useField(t),W=!!(M.touched&&M.error),Pe=W?M.error:void 0,re=e?.toString?.()||t,F={required:a||void 0,"aria-required":a||void 0,"aria-invalid":W||void 0,"aria-describedby":W?`${re}-error`:void 0},N=V=>{if(D)return D(V);_.onChange(V)};let R;switch(r){case"textarea":{const V=j=>{D?D(j):_.onChange(j)};R=m.jsx(zo,{id:re,name:t,className:g,hasError:W,disabled:s,value:_.value??"",size:o,placeholder:i,onChange:V,...I,...F});break}case"select":{R=m.jsx(Ro,{id:re,name:t,className:g,hasError:W,disabled:s,size:o,value:_.value??"",onChange:V=>{_.onChange(V);const j=l.find(oe=>String(oe.value)===V.target.value);j&&T?.(j)},options:l,placeholder:i||"Selecciona una opción",...I,...F});break}case"checkbox":{R=m.jsx(qn,{id:re,name:t,className:g,hasError:W,disabled:s,size:o,checked:!!_.value,label:d,onChange:V=>{K.setValue(V.target.checked)},...I,...F});break}case"radio":{const V=l;R=m.jsx(C0,{children:V.map(j=>m.jsx(Yo,{name:u||t,value:j.value,label:j.label,size:o,hasError:W,disabled:s,checked:_.value===j.value,onChange:oe=>{const se=oe.target.value,O=typeof j.value=="number"?Number(se):se;K.setValue(O),S?.(oe)},...F},j.value))});break}case"pin":{R=m.jsx(Uo,{length:c,type:h,size:o,hasError:W,onChange:V=>K.setValue(V),onComplete:V=>{K.setValue(V),C?.(V)},...I,...F});break}case"password":{const{rightIcon:V,...j}=I;R=m.jsx(Jl,{id:re,name:t,className:g,hasError:W,disabled:s,size:o,placeholder:i,leftIcon:y,iconSize:b,iconColor:E,onChange:N,...j,...F});break}case"search":{R=m.jsx(ec,{className:g,size:o,placeholder:i,leftIcon:y,rightIcon:x,iconSize:b,iconColor:E,onSearch:I.onSearch,...F});break}default:R=m.jsx(jo,{id:re,name:t,className:g,hasError:W,disabled:s,size:o,placeholder:i,type:["text","email","number","tel","url","date","date","datetime-local","time"].includes(r)?r:"text",leftIcon:y,rightIcon:x,iconSize:b,iconColor:E,value:_.value??"",onChange:N,...I,...F})}return r==="checkbox"?m.jsxs(ic,{className:p,children:[R,W&&m.jsx(Fo,{id:`${re}-error`,size:o,className:w,children:Pe})]}):m.jsxs(ic,{className:p,children:[n&&m.jsx(Gn,{htmlFor:re,size:o,required:a,disabled:s,className:v,children:n}),R,W&&m.jsx(Fo,{id:`${re}-error`,size:o,className:w,children:Pe})]})},P0={initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.2,ease:"easeInOut"},layout:!1},ac={initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeInOut"}},E0={initial:{height:0,opacity:0,y:-6},animate:{height:"auto",opacity:1,y:0},exit:{height:0,opacity:0,y:-6},transition:{duration:.2,ease:"easeInOut"}},A0=k(ct.div)`
     position: fixed;
     inset: 0;
     z-index: 50;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.1.5",
+    "version": "0.1.6",
     "description": "This package provides reusable UI components to ensure consistency across all CRM frontend applications",
     "author": "BizAppsTotal <bizapps@tcce.biz>",
     "type": "module",