@telefonica/mistica 14.32.1 → 14.34.0

package/dist-es/carousel.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -65,16 +66,16 @@ import { listenResize as le, getPrefixedDataAttributes as Ce } from "./utils/dom
 import { isAndroid as ne, isIos as Le, isRunningAcceptanceTest as Re } from "./utils/platform.js";
 import { useDocumentVisibility as Ae } from "./utils/document-visibility.js";
 import { slideshowContainer as Me, slideshowPrevArrowButton as Be, slideshow as Ee, slideshowItem as Te, slideshowNextArrowButton as ye, slideshowBullets as We, bulletActiveInverse as Oe, bulletInverse as De, bulletActive as Ve, bullet as ze, carouselContainer as _e, carouselPrevArrowButton as je, carousel as Fe, centeredCarousel as Ue, carouselWithScroll as qe, vars as L, carouselItem as Ke, carouselNextArrowButton as Ye, carouselBullets as Ge } from "./carousel.css-mistica.js";
-import { assignInlineVars as He } from "@vanilla-extract/dynamic";
-import { sprinkles as Je } from "./sprinkles.css-mistica.js";
-import { useDesktopContainerType as Qe } from "./desktop-container-type-context.js";
-import { VIVO_NEW_SKIN as Xe } from "./skins/constants.js";
+import { sprinkles as He } from "./sprinkles.css-mistica.js";
+import { useDesktopContainerType as Je } from "./desktop-container-type-context.js";
+import { VIVO_NEW_SKIN as Qe } from "./skins/constants.js";
+import { applyCssVars as Xe } from "./utils/css.js";
 const ce = (e, r)=>{
     const t = Ae();
     return xe(r, !1) && t && !!e;
 }, ie = (param)=>{
-    let { currentIndex: e , numPages: r , onPress: t  } = param;
-    const o = ke(), { isDesktopOrBigger: f  } = oe(), m = (b)=>{
+    let { currentIndex: e, numPages: r, onPress: t } = param;
+    const o = ke(), { isDesktopOrBigger: f } = oe(), m = (b)=>{
         const d = b === e;
         return o ? d ? Oe : De : d ? Ve : ze;
     };
@@ -87,7 +88,7 @@ const ce = (e, r)=>{
         children: Array.from({
             length: r
         }, (b, d)=>/* @__PURE__ */ s(E, {
-                className: Je({
+                className: He({
                     display: "block",
                     padding: 0,
                     border: "none",
@@ -133,18 +134,18 @@ const ce = (e, r)=>{
     for(let o = t.length - 1; o >= 0; o--)if (e - t[o] >= -1) return o;
     return 0;
 }, ae = 5e3, ue = (param)=>{
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: f , initialActiveItem: m , itemsPerPage: b , itemsToScroll: d , mobilePageOffset: g , gap: N , free: R , centered: A , autoplay: v , onPageChange: P , dataAttributes: F  } = param;
-    const { texts: T , platformOverrides: x , skinName: y  } = re(), c = Qe(), i = Ze(c || "large", b), { isDesktopOrBigger: w , isTablet: C  } = oe(), U = C ? i.tablet : i.mobile, I = Math.max(Math.floor(w ? i.desktop : U), 1), p = n.useRef(null), S = Math.ceil(e.length / I), [{ scrollLeft: H , scrollRight: q  }, de] = n.useState({
+    let { items: e, itemStyle: r, itemClassName: t, withBullets: o, renderBullets: f, initialActiveItem: m, itemsPerPage: b, itemsToScroll: d, mobilePageOffset: p, gap: N, free: R, centered: A, autoplay: v, onPageChange: P, dataAttributes: F } = param;
+    const { texts: T, platformOverrides: x, skinName: y } = re(), c = Je(), i = Ze(c || "large", b), { isDesktopOrBigger: w, isTablet: C } = oe(), U = C ? i.tablet : i.mobile, I = Math.max(Math.floor(w ? i.desktop : U), 1), g = n.useRef(null), S = Math.ceil(e.length / I), [{ scrollLeft: H, scrollRight: q }, de] = n.useState({
         scrollLeft: 0,
         scrollRight: 0
     }), [K, he] = n.useState([]), W = n.useMemo(()=>ee(K, S), [
         K,
         S
-    ]), O = d ? ee(K, Math.ceil(e.length / d)) : W, me = q !== 0, ge = H !== 0;
+    ]), O = d ? ee(K, Math.ceil(e.length / d)) : W, me = q !== 0, pe = H !== 0;
     n.useEffect(()=>{
-        if (p.current) {
-            const l = p.current, a = ()=>{
-                const { scrollWidth: z , clientWidth: M  } = l, _ = Math.round(l.scrollLeft), j = Math.round(z - (_ + M));
+        if (g.current) {
+            const l = g.current, a = ()=>{
+                const { scrollWidth: z, clientWidth: M } = l, _ = Math.round(l.scrollLeft), j = Math.round(z - (_ + M));
                 de({
                     scrollLeft: _,
                     scrollRight: j
@@ -178,7 +179,7 @@ const ce = (e, r)=>{
     ]);
     const D = n.useCallback(function(l) {
         let a = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-        const u = p.current;
+        const u = g.current;
         if (u) {
             const h = W[l];
             u.scrollTo({
@@ -188,10 +189,10 @@ const ce = (e, r)=>{
         }
     }, [
         W
-    ]), pe = n.useCallback(()=>{
-        const l = p.current;
+    ]), ge = n.useCallback(()=>{
+        const l = g.current;
         if (l) {
-            const { scrollLeft: a  } = l, u = [
+            const { scrollLeft: a } = l, u = [
                 ...O
             ].reverse().find((h)=>h - a < -1);
             l.scrollTo({
@@ -202,9 +203,9 @@ const ce = (e, r)=>{
     }, [
         O
     ]), Y = n.useCallback(()=>{
-        const l = p.current;
+        const l = g.current;
         if (l) {
-            const { scrollLeft: a  } = l, u = O.find((h)=>h - a > 1);
+            const { scrollLeft: a } = l, u = O.find((h)=>h - a > 1);
             l.scrollTo({
                 left: u,
                 behavior: "smooth"
@@ -212,7 +213,7 @@ const ce = (e, r)=>{
         }
     }, [
         O
-    ]), J = ce(!!v, p);
+    ]), J = ce(!!v, g);
     n.useEffect(()=>{
         m !== void 0 && D(Math.floor(m / I), !1);
     }, [
@@ -223,7 +224,7 @@ const ce = (e, r)=>{
         if (J && v) {
             const l = typeof v == "boolean" ? ae : v.time, a = typeof v == "object" && v.loop, u = setInterval(()=>{
                 var h;
-                q !== 0 ? Y() : a && ((h = p.current) == null || h.scrollTo({
+                q !== 0 ? Y() : a && ((h = g.current) == null || h.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
@@ -281,8 +282,8 @@ const ce = (e, r)=>{
                         children: /* @__PURE__ */ s(E, {
                             className: je,
                             "aria-label": T.carouselPrevButton,
-                            onPress: pe,
-                            disabled: !ge,
+                            onPress: ge,
+                            disabled: !pe,
                             children: /* @__PURE__ */ s(te, {})
                         })
                     }),
@@ -291,13 +292,13 @@ const ce = (e, r)=>{
                             [Ue]: A,
                             [qe]: S > 1
                         }),
-                        style: _object_spread_props(_object_spread({}, He(_object_spread({
+                        style: _object_spread_props(_object_spread({}, Xe(_object_spread({
                             [L.itemsPerPageDesktop]: String(i.desktop),
                             [L.itemsPerPageTablet]: String(i.tablet),
                             [L.itemsPerPageMobile]: String(i.mobile)
-                        }, g === "large" ? {
+                        }, p === "large" ? {
                             [L.mobilePageOffset]: be
-                        } : y === Xe ? {
+                        } : y === Qe ? {
                             [L.mobilePageOffset]: ve
                         } : {}, N !== void 0 ? {
                             [L.gap]: String(N)
@@ -310,7 +311,7 @@ const ce = (e, r)=>{
                             // slides border:
                             paddingBottom: Le(x) && !Re(x) ? 0.5 : void 0
                         }),
-                        ref: p,
+                        ref: g,
                         children: e.map((l, a)=>/* @__PURE__ */ s("div", {
                                 className: Z(Ke, t),
                                 style: _object_spread_props(_object_spread({}, r), {
@@ -339,7 +340,7 @@ const ce = (e, r)=>{
         ]
     });
 }, It = (e)=>/* @__PURE__ */ s(ue, _object_spread({}, e)), Pt = (param)=>/* @__PURE__ */ {
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: f , initialActiveItem: m , onPageChange: b , dataAttributes: d  } = param;
+    let { items: e, itemStyle: r, itemClassName: t, withBullets: o, renderBullets: f, initialActiveItem: m, onPageChange: b, dataAttributes: d } = param;
     return s(ue, {
         items: e,
         itemStyle: r,
@@ -359,37 +360,37 @@ const ce = (e, r)=>{
         dataAttributes: d
     });
 }, fe = /*#__PURE__*/ n.createContext(!1), xt = ()=>n.useContext(fe), et = (param)=>/* @__PURE__ */ {
-    let { children: e  } = param;
+    let { children: e } = param;
     return s(fe.Provider, {
         value: !0,
         children: e
     });
 }, wt = (param)=>{
-    let { items: e , withBullets: r , autoplay: t , onPageChange: o , dataAttributes: f , inverseBullets: m = !0  } = param;
-    const { texts: b , platformOverrides: d  } = re(), g = n.useRef(null), [{ scrollLeft: N , scrollRight: R  }, A] = n.useState({
+    let { items: e, withBullets: r, autoplay: t, onPageChange: o, dataAttributes: f, inverseBullets: m = !0 } = param;
+    const { texts: b, platformOverrides: d } = re(), p = n.useRef(null), [{ scrollLeft: N, scrollRight: R }, A] = n.useState({
         scrollLeft: 0,
         scrollRight: 0
     }), v = n.useCallback(()=>{
-        const c = g.current;
+        const c = p.current;
         c && c.scrollBy({
             left: -c.clientWidth,
             behavior: "smooth"
         });
     }, []), P = n.useCallback(()=>{
-        const c = g.current;
+        const c = p.current;
         c && c.scrollBy({
             left: c.clientWidth,
             behavior: "smooth"
         });
-    }, []), F = R !== 0, T = N !== 0, x = g.current ? Math.floor((N + g.current.clientWidth / 2) / g.current.clientWidth) : 0;
+    }, []), F = R !== 0, T = N !== 0, x = p.current ? Math.floor((N + p.current.clientWidth / 2) / p.current.clientWidth) : 0;
     n.useLayoutEffect(()=>{
-        const c = g.current;
+        const c = p.current;
         if (c) {
             const i = ()=>{
-                const { scrollWidth: C , clientWidth: U  } = c, I = Math.round(c.scrollLeft), p = Math.round(C - (I + U));
+                const { scrollWidth: C, clientWidth: U } = c, I = Math.round(c.scrollLeft), g = Math.round(C - (I + U));
                 A({
                     scrollLeft: I,
-                    scrollRight: p
+                    scrollRight: g
                 });
             };
             i(), c.addEventListener("scroll", i);
@@ -401,12 +402,12 @@ const ce = (e, r)=>{
     }, [
         e.length
     ]);
-    const y = ce(!!t, g);
+    const y = ce(!!t, p);
     return n.useEffect(()=>{
         if (y && t) {
             const c = typeof t == "boolean" ? ae : t.time, i = typeof t == "object" && t.loop, w = setInterval(()=>{
                 var C;
-                R !== 0 ? P() : i && ((C = g.current) == null || C.scrollTo({
+                R !== 0 ? P() : i && ((C = p.current) == null || C.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
@@ -442,7 +443,7 @@ const ce = (e, r)=>{
                     value: !1,
                     children: /* @__PURE__ */ s("div", {
                         className: Ee,
-                        ref: g,
+                        ref: p,
                         children: e.map((c, i)=>/* @__PURE__ */ s("div", {
                                 className: Te,
                                 style: {

package/dist-es/checkbox.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -63,8 +64,8 @@ import { checkboxContainerDisabled as E, checkboxContainer as V, disabled as x,
 import { vars as v } from "./skins/skin-contract.css-mistica.js";
 import { combineRefs as z } from "./utils/common.js";
 const B = (param)=>{
-    let { isChecked: e , disabled: c  } = param;
-    const { isIos: o  } = R(), l = o ? /* @__PURE__ */ a("svg", {
+    let { isChecked: e, disabled: c } = param;
+    const { isIos: o } = R(), l = o ? /* @__PURE__ */ a("svg", {
         viewBox: "0 0 10 8",
         width: "10",
         height: "8",
@@ -94,7 +95,7 @@ const B = (param)=>{
         children: l
     });
 }, K = /*#__PURE__*/ m.forwardRef((e, c)=>{
-    const o = P(e["aria-labelledby"]), l = e["aria-label"], C = l || e["aria-labelledby"], { defaultValue: g , value: t , onChange: s , focusableRef: w , disabled: i  } = L({
+    const o = P(e["aria-labelledby"]), l = e["aria-label"], C = l || e["aria-labelledby"], { defaultValue: g, value: t, onChange: s, focusableRef: w, disabled: i } = L({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,

package/dist-es/chip.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -65,7 +66,7 @@ import { getPrefixedDataAttributes as g } from "./utils/dom.js";
 import { useThemeVariant as W } from "./theme-variant-context.js";
 import { BaseTouchable as v } from "./touchable.js";
 const F = (e)=>{
-    const { Icon: c , children: P , id: k , dataAttributes: l , active: s , badge: r , onClose: d  } = e, { texts: T , isDarkMode: A , textPresets: I  } = N(), m = W() === "alternative", { isTabletOrSmaller: a  } = V(), f = c ? a ? 16 : 8 : a ? 20 : 12, R = a ? 20 : 12, b = a ? 16 : 8, w = ()=>r ? /* @__PURE__ */ t(C, {
+    const { Icon: c, children: P, id: k, dataAttributes: l, active: s, badge: r, onClose: d } = e, { texts: T, isDarkMode: A, textPresets: I } = N(), m = W() === "alternative", { isTabletOrSmaller: a } = V(), f = c ? a ? 16 : 8 : a ? 20 : 12, R = a ? 20 : 12, b = a ? 16 : 8, w = ()=>r ? /* @__PURE__ */ t(C, {
             children: r === !0 ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ t(x, {
                 value: r
             })

package/dist-es/circle.js

@@ -55,7 +55,7 @@ import { circle as a } from "./circle.css-mistica.js";
 import { vars as d } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as f } from "./utils/dom.js";
 const n = (param)=>{
-    let { children: e , backgroundColor: i , backgroundImage: o , size: t , border: r = !1 , dataAttributes: s  } = param;
+    let { children: e, backgroundColor: i, backgroundImage: o, size: t, border: r = !1, dataAttributes: s } = param;
     const l = r === !0 ? d.colors.border : r, c = r ? `1px solid ${l}` : void 0;
     return /* @__PURE__ */ m("div", _object_spread_props(_object_spread({
         className: a,

package/dist-es/community/advanced-data-card.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -94,7 +95,7 @@ import { useTheme as pe } from "../hooks.js";
 import { getPrefixedDataAttributes as ue } from "../utils/dom.js";
 import ge from "../inline.js";
 const fe = (_param)=>{
-    var { headline: a , pretitle: i , pretitleAs: s = "p" , pretitleLinesMax: p , title: d , titleAs: c = "h3" , titleLinesMax: l , subtitle: h , subtitleLinesMax: o , description: t , descriptionLinesMax: u , ariaLabel: x  } = _param, n = _object_without_properties(_param, [
+    var { headline: a, pretitle: i, pretitleAs: s = "p", pretitleLinesMax: p, title: d, titleAs: c = "h3", titleLinesMax: l, subtitle: h, subtitleLinesMax: o, description: t, descriptionLinesMax: u, ariaLabel: x } = _param, n = _object_without_properties(_param, [
         "headline",
         "pretitle",
         "pretitleAs",
@@ -108,7 +109,7 @@ const fe = (_param)=>{
         "descriptionLinesMax",
         "ariaLabel"
     ]);
-    const { textPresets: y  } = pe();
+    const { textPresets: y } = pe();
     return /* @__PURE__ */ r(j, {
         space: 4,
         children: [
@@ -159,7 +160,7 @@ const fe = (_param)=>{
         ]
     });
 }, ve = (param)=>{
-    let { button: a , footerImage: i , footerText: s , footerTextLinesMax: p , buttonLink: d  } = param;
+    let { button: a, footerImage: i, footerText: s, footerTextLinesMax: p, buttonLink: d } = param;
     const c = !!a, l = !!i, h = !!s, o = !!d, t = c && (l || h) && o, u = o && !t ? "178px" : "";
     return /* @__PURE__ */ r(P, {
         children: [
@@ -209,7 +210,7 @@ const fe = (_param)=>{
         ]
     });
 }, Ne = /*#__PURE__*/ U.forwardRef((_param, _)=>{
-    var { stackingGroup: a , headline: i , pretitle: s , pretitleAs: p , pretitleLinesMax: d , title: c , titleAs: l , titleLinesMax: h , subtitle: o , subtitleLinesMax: t , description: u , descriptionLinesMax: x , extra: n , extraDividerPadding: y = 24 , button: A , footerImage: b , footerText: B , footerTextLinesMax: z , buttonLink: S , dataAttributes: H , actions: g , "aria-label": w , onClose: D  } = _param, f = _object_without_properties(_param, [
+    var { stackingGroup: a, headline: i, pretitle: s, pretitleAs: p, pretitleLinesMax: d, title: c, titleAs: l, titleLinesMax: h, subtitle: o, subtitleLinesMax: t, description: u, descriptionLinesMax: x, extra: n, extraDividerPadding: y = 24, button: A, footerImage: b, footerText: B, footerTextLinesMax: z, buttonLink: S, dataAttributes: H, actions: g, "aria-label": w, onClose: D } = _param, f = _object_without_properties(_param, [
         "stackingGroup",
         "headline",
         "pretitle",

package/dist-es/community/blocks.js

@@ -8,7 +8,7 @@ import u from "../box.js";
 import { ProgressBar as S } from "../progress-bar.js";
 import B from "classnames";
 const g = (param)=>{
-    let { title: o , description: e  } = param;
+    let { title: o, description: e } = param;
     const l = typeof e == "string" ? [
         e
     ] : e;
@@ -29,7 +29,7 @@ const g = (param)=>{
         ]
     });
 }, L = (param)=>/* @__PURE__ */ {
-    let { title: o , stackingGroup: e , description: l , "aria-label": t  } = param;
+    let { title: o, stackingGroup: e, description: l, "aria-label": t } = param;
     return r("div", {
         "aria-label": t,
         children: /* @__PURE__ */ a(s, {
@@ -52,7 +52,7 @@ const g = (param)=>{
         })
     });
 }, V = (param)=>/* @__PURE__ */ {
-    let { image: o , description: e , "aria-label": l  } = param;
+    let { image: o, description: e, "aria-label": l } = param;
     return r("div", {
         "aria-label": l,
         children: /* @__PURE__ */ a(s, {
@@ -69,7 +69,7 @@ const g = (param)=>{
         })
     });
 }, q = (param)=>/* @__PURE__ */ {
-    let { title: o , description: e , secondaryValue: l , value: t , valueColor: i = c.colors.textPrimary , "aria-label": d  } = param;
+    let { title: o, description: e, secondaryValue: l, value: t, valueColor: i = c.colors.textPrimary, "aria-label": d } = param;
     return a(s, {
         space: "between",
         alignItems: "flex-end",
@@ -97,7 +97,7 @@ const g = (param)=>{
         ]
     });
 }, z = (param)=>/* @__PURE__ */ {
-    let { headline: o , mainHeading: e , secondHeading: l , secondaryValue: t , title: i , description: d , valueColor: m = c.colors.textPrimary , "aria-label": b  } = param;
+    let { headline: o, mainHeading: e, secondHeading: l, secondaryValue: t, title: i, description: d, valueColor: m = c.colors.textPrimary, "aria-label": b } = param;
     return a("div", {
         "aria-label": b,
         children: [
@@ -154,7 +154,7 @@ const g = (param)=>{
         ]
     });
 }, A = (param)=>/* @__PURE__ */ {
-    let { title: o , value: e , description: l , valueColor: t = c.colors.textPrimary , "aria-label": i  } = param;
+    let { title: o, value: e, description: l, valueColor: t = c.colors.textPrimary, "aria-label": i } = param;
     return a("div", {
         "aria-label": i,
         className: x,
@@ -174,7 +174,7 @@ const g = (param)=>{
         ]
     });
 }, D = (param)=>/* @__PURE__ */ {
-    let { title: o , stackingGroup: e , progressPercent: l , reverse: t , heading: i , description: d , "aria-label": m  } = param;
+    let { title: o, stackingGroup: e, progressPercent: l, reverse: t, heading: i, description: d, "aria-label": m } = param;
     return r("div", {
         "aria-label": m,
         children: /* @__PURE__ */ a(p, {

package/dist-es/counter.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -66,7 +67,7 @@ import { useTheme as K } from "./hooks.js";
 import N from "classnames";
 import U from "./screen-reader-only.js";
 const x = 20, W = (param)=>{
-    let { value: h , defaultValue: b , min: m , max: s , onChangeValue: a  } = param;
+    let { value: h, defaultValue: b, min: m, max: s, onChangeValue: a } = param;
     const i = h !== void 0, f = V.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
         m,
         s
@@ -78,8 +79,8 @@ const x = 20, W = (param)=>{
         v
     ];
 }, X = (param)=>{
-    let { value: h , defaultValue: b , onChangeValue: m , onRemove: s , min: a , max: i , dataAttributes: f , disabled: e , removeLabel: p , increaseLabel: v , decreaseLabel: n , valueLabel: C  } = param;
-    const A = _(), { texts: u  } = K(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, T] = W({
+    let { value: h, defaultValue: b, onChangeValue: m, onRemove: s, min: a, max: i, dataAttributes: f, disabled: e, removeLabel: p, increaseLabel: v, decreaseLabel: n, valueLabel: C } = param;
+    const A = _(), { texts: u } = K(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, T] = W({
         value: h,
         defaultValue: b,
         min: l,

package/dist-es/credit-card-expiration-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -77,37 +78,44 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as y } from "react/jsx-runtime";
-import * as v from "react";
-import { useForm as V, useFieldProps as j } from "./form-context.js";
-import { useTheme as D } from "./hooks.js";
-import { TextFieldBaseAutosuggest as w } from "./text-field-base.js";
-const N = (_param)=>{
-    var { inputRef: x , defaultValue: p , value: a  } = _param, u = _object_without_properties(_param, [
+import { jsx as F } from "react/jsx-runtime";
+import * as Y from "react";
+import { useForm as k, useFieldProps as v } from "./form-context.js";
+import { useTheme as $ } from "./hooks.js";
+import { TextFieldBaseAutosuggest as R } from "./text-field-base.js";
+const j = (_param)=>{
+    var { inputRef: g, defaultValue: s, value: l } = _param, u = _object_without_properties(_param, [
         "inputRef",
         "defaultValue",
         "value"
     ]);
-    const { texts: f  } = D(), s = v.useRef(a || ""), c = (i)=>{
-        let r = i.replace(/[^\d/]/g, "").replace(/\/+/g, "/");
-        const [l, m] = r.split("/");
-        return m && (r = `${l}/${m}`), String(s.current).length >= r.length || (r === "/" ? r = "" : r.length === 1 && parseInt(r) >= 2 ? r = `0${r}/` : r.length === 2 && (r[1] === "/" ? r = `0${r}` : parseInt(l) > 12 || parseInt(l) < 1 ? r = r[0] : r = `${r}/`)), r;
+    const { texts: p } = $(), c = Y.useRef(""), i = (r)=>{
+        if (r.length === 2 && c.current === "Backspace") return r[0];
+        let e = "";
+        return [
+            ...r
+        ].forEach((x)=>{
+            e = (e + x).replace(/[^0-9]/g, "").replace(/^([2-9])$/g, "0$1").replace(/^(1{1})([3-9]{1})$/g, "0$1/$2").replace(/^0{1,}/g, "0").replace(/^([0-1]{1}[0-9]{1})([0-9]{1,2}).*/g, "$1/$2");
+        }), e.length === 2 ? e + "/" : e;
+    }, h = (r)=>{
+        c.current = r.key;
     };
-    return /* @__PURE__ */ y("input", _object_spread_props(_object_spread({}, u), {
-        placeholder: f.expirationDatePlaceholder,
+    return /* @__PURE__ */ F("input", _object_spread_props(_object_spread({}, u), {
+        placeholder: p.expirationDatePlaceholder,
         type: "text",
         inputMode: "decimal",
         maxLength: "5",
-        onInput: (i)=>{
-            const r = c(i.currentTarget.value);
-            s.current = r, i.currentTarget.value = r;
+        onKeyDown: h,
+        onInput: (r)=>{
+            const e = i(r.currentTarget.value);
+            r.currentTarget.value = e;
         },
-        value: a === void 0 ? void 0 : c(a),
-        defaultValue: p === void 0 ? void 0 : c(p),
-        ref: x
+        value: l === void 0 ? void 0 : i(l),
+        defaultValue: s === void 0 ? void 0 : i(s),
+        ref: g
     }));
-}, R = (_param)=>{
-    var { disabled: x , error: p , helperText: a , name: u , optional: f , validate: s , onChange: c , onChangeValue: i , onBlur: r , value: l , autoComplete: m = "cc-exp" , defaultValue: C  } = _param, T = _object_without_properties(_param, [
+}, B = (_param)=>{
+    var { disabled: g, error: s, helperText: l, name: u, optional: p, validate: c, onChange: i, onChangeValue: h, onBlur: r, value: e, autoComplete: x = "cc-exp", defaultValue: D } = _param, T = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -121,47 +129,47 @@ const N = (_param)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: d  } = D(), { setFormError: $ , jumpToNext: M  } = V(), g = (e, t)=>{
-        if (!t) return f ? "" : d.formFieldErrorIsMandatory;
-        const { month: o , year: n  } = e;
-        if (!o || !n) return d.formCreditCardExpirationError;
-        const h = /* @__PURE__ */ new Date(), Y = h.getMonth() + 1, I = h.getFullYear();
-        return n < I || n === I && o < Y ? d.formCreditCardExpirationError : s == null ? void 0 : s(e, t);
-    }, E = (e)=>{
-        const [t, o] = String(e).split("/").map((h)=>parseInt(h)), n = Number.isInteger(o) ? 2e3 + o : null;
+    const { texts: f } = $(), { setFormError: w, jumpToNext: I } = k(), m = (t, n)=>{
+        if (!n) return p ? "" : f.formFieldErrorIsMandatory;
+        const { month: a, year: o } = t;
+        if (!a || !o) return f.formCreditCardExpirationError;
+        const d = /* @__PURE__ */ new Date(), M = d.getMonth() + 1, y = d.getFullYear();
+        return o < y || o === y && a < M ? f.formCreditCardExpirationError : c == null ? void 0 : c(t, n);
+    }, C = (t)=>{
+        const [n, a] = String(t).split("/").map((d)=>parseInt(d)), o = Number.isInteger(a) ? 2e3 + a : null;
         return {
-            month: t || null,
-            year: n,
-            raw: e
+            month: n || null,
+            year: o,
+            raw: t
         };
-    }, F = j({
+    }, E = v({
         name: u,
-        value: l,
-        defaultValue: C,
-        processValue: E,
-        helperText: a,
-        optional: f,
-        error: p,
-        disabled: x,
+        value: e,
+        defaultValue: D,
+        processValue: C,
+        helperText: l,
+        optional: p,
+        error: s,
+        disabled: g,
         onBlur: r,
-        validate: g,
-        onChange: c,
-        onChangeValue: i
+        validate: m,
+        onChange: i,
+        onChangeValue: h
     });
-    return /* @__PURE__ */ y(w, _object_spread_props(_object_spread({}, T, F), {
-        onChange: (e)=>{
-            F.onChange(e);
-            const t = e.currentTarget.value, o = E(t);
-            if (t.length === 5) {
-                const n = g == null ? void 0 : g(o, t);
-                n ? $({
+    return /* @__PURE__ */ F(R, _object_spread_props(_object_spread({}, T, E), {
+        onChange: (t)=>{
+            E.onChange(t);
+            const n = t.currentTarget.value, a = C(n);
+            if (n.length === 5) {
+                const o = m == null ? void 0 : m(a, n);
+                o ? w({
                     name: u,
-                    error: n
-                }) : M(u);
+                    error: o
+                }) : I(u);
             }
         },
-        autoComplete: m,
-        inputComponent: N
+        autoComplete: x,
+        inputComponent: j
     }));
-}, L = R;
-export { L as default };
+}, A = B;
+export { A as default };

package/dist-es/credit-card-fields.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { useForm as C } from "./form-context.js";
 import { useTheme as n } from "./hooks.js";
@@ -8,8 +9,8 @@ import p from "./credit-card-expiration-field.js";
 import v from "./credit-card-number-field.js";
 import u from "./cvv-field.js";
 const b = (param)=>{
-    let { numberFieldName: t = "ccNum" , expirationFieldName: m = "ccExp" , cvvFieldName: a = "ccCvv" , acceptedCards: o  } = param;
-    const { values: d  } = C(), { texts: r  } = n(), l = s(String(d[t]));
+    let { numberFieldName: t = "ccNum", expirationFieldName: m = "ccExp", cvvFieldName: a = "ccCvv", acceptedCards: o } = param;
+    const { values: d } = C(), { texts: r } = n(), l = s(String(d[t]));
     return /* @__PURE__ */ i(f, {
         space: 16,
         children: [

package/dist-es/credit-card-number-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -98,7 +99,7 @@ const W = (r)=>{
     var _ref;
     return (_ref = (t = i.match(/.{1,4}/g)) == null ? void 0 : t.join(" ")) !== null && _ref !== void 0 ? _ref : i;
 }, X = (_param)=>{
-    var { inputRef: r , value: i , defaultValue: t , onChange: e  } = _param, a = _object_without_properties(_param, [
+    var { inputRef: r, value: i, defaultValue: t, onChange: e } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
@@ -128,7 +129,7 @@ const W = (r)=>{
     animationTarget: /* @__PURE__ */ o(V, {}),
     isAnimating: !1
 }, v = (r, param)=>{
-    let { type: i , value: t  } = param;
+    let { type: i, value: t } = param;
     if (i === "INPUT") {
         const e = Y(t);
         if (e && !r.showBackface) return {
@@ -149,8 +150,8 @@ const W = (r)=>{
         isAnimating: !1
     }) : r;
 }, rr = (param)=>{
-    let { value: r  } = param;
-    const [{ showBackface: i , animationTarget: t , isAnimating: e  }, a] = l.useReducer(v, Z);
+    let { value: r } = param;
+    const [{ showBackface: i, animationTarget: t, isAnimating: e }, a] = l.useReducer(v, Z);
     return l.useEffect(()=>{
         a({
             type: "INPUT",
@@ -180,11 +181,11 @@ const W = (r)=>{
         })
     });
 }, er = (_param)=>{
-    var { disabled: r , error: i , helperText: t , name: e , optional: a , validate: c , onChange: N , onChangeValue: m , onBlur: f , acceptedCards: u = {
+    var { disabled: r, error: i, helperText: t, name: e, optional: a, validate: c, onChange: N, onChangeValue: m, onBlur: f, acceptedCards: u = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    } , value: p , autoComplete: d = "cc-number" , defaultValue: g  } = _param, w = _object_without_properties(_param, [
+    }, value: p, autoComplete: d = "cc-number", defaultValue: g } = _param, w = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -199,7 +200,7 @@ const W = (r)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: E  } = D(), { jumpToNext: R , rawValues: F , setFormError: S  } = M(), h = (n, C)=>{
+    const { texts: E } = D(), { jumpToNext: R, rawValues: F, setFormError: S } = M(), h = (n, C)=>{
         const s = E.formCreditCardNumberError;
         return n ? I(n) && !u.americanExpress || x(n) && !u.visa || A(n) && !u.masterCard || !L(n) || T(n) !== n.length ? s : c == null ? void 0 : c(n, C) : a ? "" : E.formFieldErrorIsMandatory;
     }, b = (n)=>n.replace(/\s/g, ""), k = j({