@telefonica/mistica 16.49.0 → 16.51.0

package/dist/counter.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Mr;
+        return Ne;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -123,34 +123,34 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const V = 20, cr = (param)=>{
-    let { value: p, defaultValue: b, min: h, max: c, onChangeValue: a } = param;
-    const s = p !== void 0, f = _react.useCallback((i)=>i === void 0 ? h : Math.max(h, Math.min(c, i)), [
-        h,
-        c
-    ]), [t, I] = _react.useState(f(b)), g = (i)=>{
-        s || I(i), a == null || a(i);
+const L = 20, ce = (param)=>{
+    let { value: v, defaultValue: b, min: m, max: h, onChangeValue: l } = param;
+    const n = v !== void 0, p = _react.useCallback((c)=>c === void 0 ? m : Math.max(m, Math.min(h, c)), [
+        m,
+        h
+    ]), [t, I] = _react.useState(p(b)), g = (c)=>{
+        n || I(c), l === null || l === void 0 ? void 0 : l(c);
     };
     return [
-        s ? f(p) : t,
+        n ? p(v) : t,
         g
     ];
-}, sr = (param)=>{
-    let { value: p, defaultValue: b, onChangeValue: h, onRemove: c, min: a, max: s, dataAttributes: f, disabled: t, removeLabel: I, increaseLabel: g, decreaseLabel: i, valueLabel: k } = param;
-    const N = (0, _themevariantcontext.useThemeVariant)(), x = _react.useId(), { texts: u, t: d, isDarkMode: A } = (0, _hooks.useTheme)(), l = a === void 0 ? 0 : a, m = Math.max(l, s === void 0 ? 999 : s), [e, B] = cr({
-        value: p,
+}, Ne = (param)=>{
+    let { value: v, defaultValue: b, onChangeValue: m, onRemove: h, min: l, max: n, dataAttributes: p, disabled: t, removeLabel: I, increaseLabel: g, decreaseLabel: c, valueLabel: P } = param;
+    const V = (0, _themevariantcontext.useThemeVariant)(), C = _react.useId(), { texts: i, t: u, isDarkMode: k } = (0, _hooks.useTheme)(), s = l === void 0 ? 0 : l, d = Math.max(s, n === void 0 ? 999 : n), [r, B] = ce({
+        value: v,
         defaultValue: b,
-        min: l,
-        max: m,
-        onChangeValue: h
-    }), o = !!c && e === l, R = ()=>I !== null && I !== void 0 ? I : u.counterRemoveLabel || d(_texttokens.counterRemoveLabel), $ = ()=>g !== null && g !== void 0 ? g : u.counterIncreaseLabel || d(_texttokens.counterIncreaseLabel), z = ()=>i !== null && i !== void 0 ? i : u.counterDecreaseLabel || d(_texttokens.counterDecreaseLabel), j = ()=>`${e}, ${k !== null && k !== void 0 ? k : u.counterQuantity || d(_texttokens.counterQuantity)}${a !== void 0 ? `, ${u.counterMinValue || d(_texttokens.counterMinValue)} ${a}` : ""}${s !== void 0 ? `, ${u.counterMaxValue || d(_texttokens.counterMaxValue)} ${s}` : ""}`;
+        min: s,
+        max: d,
+        onChangeValue: m
+    }), o = !!h && r === s, A = ()=>I !== null && I !== void 0 ? I : i.counterRemoveLabel || u(_texttokens.counterRemoveLabel), z = ()=>g !== null && g !== void 0 ? g : i.counterIncreaseLabel || u(_texttokens.counterIncreaseLabel), $ = ()=>c !== null && c !== void 0 ? c : i.counterDecreaseLabel || u(_texttokens.counterDecreaseLabel), j = ()=>`${r}, ${P !== null && P !== void 0 ? P : i.counterQuantity || u(_texttokens.counterQuantity)}${l !== void 0 ? `, ${i.counterMinValue || u(_texttokens.counterMinValue)} ${l}` : ""}${n !== void 0 ? `, ${i.counterMaxValue || u(_texttokens.counterMaxValue)} ${n}` : ""}`;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_countercssmistica.counter, {
             [_countercssmistica.disabled]: t
         })
-    }, (0, _dom.getPrefixedDataAttributes)(f, "Counter")), {
+    }, (0, _dom.getPrefixedDataAttributes)(p, "Counter")), {
         style: {
-            border: `1px solid ${(N === "brand" || N === "media" || N === "negative") && !A ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.inputBorder}`
+            border: `1px solid ${(V === "brand" || V === "media" || V === "negative") && !k ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.inputBorder}`
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 8,
@@ -159,15 +159,15 @@ const V = 20, cr = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(_countercssmistica.buttonContainer, {
                         [_countercssmistica.hasTrashIcon]: o,
-                        [_countercssmistica.isButtonDisabled]: t || !o && e === l,
-                        [_countercssmistica.disabled]: !t && !o && e === l
+                        [_countercssmistica.isButtonDisabled]: t || !o && r === s,
+                        [_countercssmistica.disabled]: !t && !o && r === s
                     }),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
                         className: _countercssmistica.button,
-                        disabled: !o && e === l || t,
-                        onPress: ()=>o ? c == null ? void 0 : c() : B(e - 1),
-                        "aria-label": o ? R() : z(),
-                        "aria-controls": x,
+                        disabled: !o && r === s || t,
+                        onPress: ()=>o ? h === null || h === void 0 ? void 0 : h() : B(r - 1),
+                        "aria-label": o ? A() : $(),
+                        "aria-controls": C,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.buttonBackground
@@ -176,15 +176,15 @@ const V = 20, cr = (param)=>{
                                 className: _countercssmistica.decreaseButtonIcon,
                                 "aria-hidden": o,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsubtractregular.default, {
-                                    size: V,
-                                    color: e === l && !o || t ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
+                                    size: L,
+                                    color: r === s && !o || t ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
                                 })
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.trashButtonIcon,
                                 "aria-hidden": !o,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_icontrashcanregular.default, {
-                                    size: V,
+                                    size: L,
                                     color: _skincontractcssmistica.vars.colors.controlError
                                 })
                             })
@@ -194,9 +194,9 @@ const V = 20, cr = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _countercssmistica.valueContainer,
                     style: {
-                        width: `${Math.max(3, String(m).length) * 1.25}ch`
+                        width: `${Math.max(3, String(d).length) * 1.25}ch`
                     },
-                    id: x,
+                    id: C,
                     "aria-live": "polite",
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
                         variant: "default",
@@ -206,7 +206,7 @@ const V = 20, cr = (param)=>{
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                     regular: !0,
                                     color: _skincontractcssmistica.vars.colors.textPrimary,
-                                    children: e
+                                    children: r
                                 })
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
@@ -219,15 +219,15 @@ const V = 20, cr = (param)=>{
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(_countercssmistica.buttonContainer, {
-                        [_countercssmistica.isButtonDisabled]: t || e === m,
-                        [_countercssmistica.disabled]: !t && e === m
+                        [_countercssmistica.isButtonDisabled]: t || r === d,
+                        [_countercssmistica.disabled]: !t && r === d
                     }),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
                         className: _countercssmistica.button,
-                        disabled: e === m || t,
-                        onPress: ()=>B(e + 1),
-                        "aria-label": $(),
-                        "aria-controls": x,
+                        disabled: r === d || t,
+                        onPress: ()=>B(r + 1),
+                        "aria-label": z(),
+                        "aria-controls": C,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.buttonBackground
@@ -235,8 +235,8 @@ const V = 20, cr = (param)=>{
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.defaultButtonIcon,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconaddmoreregular.default, {
-                                    size: V,
-                                    color: e === m || t ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
+                                    size: L,
+                                    color: r === d || t ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
                                 })
                             })
                         ]
@@ -245,4 +245,4 @@ const V = 20, cr = (param)=>{
             ]
         })
     }));
-}, Mr = sr;
+};

package/dist/cover-hero-media.js

@@ -19,23 +19,27 @@ function _interop_require_default(obj) {
     };
 }
 const j = (param)=>{
-    let { backgroundVideo: o, backgroundImage: e, poster: t, backgroundVideoRef: s } = param;
-    const { video: m, videoAction: r } = (0, _cardinternal.useVideoWithControls)(o, t, s);
+    let { backgroundVideo: o, backgroundImage: r, poster: t, backgroundVideoRef: s } = param;
+    const { video: m, videoAction: e } = (0, _cardinternal.useVideoWithControls)({
+        src: o,
+        poster: t,
+        ref: s
+    });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _coverherocssmistica.mediaLayer,
         children: [
-            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
+            r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.default, {
                 width: "100%",
                 height: "100%",
-                src: e
+                src: r
             }),
             o && m,
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _coverherocssmistica.mediaOverlay
             }),
-            r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_cardinternal.TopActions, {
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_cardinternal.TopActions, {
                 actions: [
-                    r
+                    e
                 ],
                 variant: "media"
             })

package/dist/cover-hero.css-mistica.js

@@ -49,10 +49,6 @@ _export(exports, {
         return m;
     }
 });
-require("./sprinkles.css.ts.vanilla.css-mistica.js");
-require("./responsive-layout.css.ts.vanilla.css-mistica.js");
-require("./carousel.css.ts.vanilla.css-mistica.js");
-require("./cover-hero.css.ts.vanilla.css-mistica.js");
-var i = {
-    aspectRatio: "var(--v16_49_moeazi0)"
-}, n = "v16_49_moeazi2 v16_49_moeazi1 v16_49_1y2v1nfpg v16_49_1y2v1nfpm v16_49_1y2v1nfps v16_49_1y2v1nfpv v16_49_1y2v1nfq9 v16_49_1y2v1nfsw v16_49_1y2v1nfu5", o = "v16_49_moeazi4 v16_49_moeazi3 v16_49_1y2v1nfpg v16_49_1y2v1nfpm v16_49_1y2v1nfq9", m = "v16_49_moeazi5", r = "v16_49_moeazi6", f = "v16_49_moeazi7", y = "v16_49_moeazi9 v16_49_moeazi8 v16_49_1y2v1nfq1", p = "v16_49_moeazia v16_49_1y2v1nfph v16_49_1y2v1nfuk v16_49_1y2v1nfq9 v16_49_1y2v1nfqq", t = "v16_49_moeazic v16_49_moeazib v16_49_1y2v1nfph v16_49_1y2v1nfsw v16_49_1y2v1nftb v16_49_1y2v1nfq9 v16_49_1y2v1nfqq", z = "v16_49_moeazid v16_49_1y2v1nfpg", s = "v16_49_moeazie", q = "v16_49_moeazif v16_49_1y2v1nfpg", c = "v16_49_moeazig v16_49_1y2v1nfpm v16_49_1y2v1nfps";
+/* empty css                                     */ /* empty css                                             */ /* empty css                                    */ /* empty css                                      */ var i = {
+    aspectRatio: "var(--v16_51_moeazi0)"
+}, n = "v16_51_moeazi2 v16_51_moeazi1 v16_51_1y2v1nfpg v16_51_1y2v1nfpm v16_51_1y2v1nfps v16_51_1y2v1nfpv v16_51_1y2v1nfq9 v16_51_1y2v1nfsw v16_51_1y2v1nfu5", o = "v16_51_moeazi4 v16_51_moeazi3 v16_51_1y2v1nfpg v16_51_1y2v1nfpm v16_51_1y2v1nfq9", m = "v16_51_moeazi5", r = "v16_51_moeazi6", f = "v16_51_moeazi7", y = "v16_51_moeazi9 v16_51_moeazi8 v16_51_1y2v1nfq1", p = "v16_51_moeazia v16_51_1y2v1nfph v16_51_1y2v1nfuk v16_51_1y2v1nfq9 v16_51_1y2v1nfqq", t = "v16_51_moeazic v16_51_moeazib v16_51_1y2v1nfph v16_51_1y2v1nfsw v16_51_1y2v1nftb v16_51_1y2v1nfq9 v16_51_1y2v1nfqq", z = "v16_51_moeazid v16_51_1y2v1nfpg", s = "v16_51_moeazie", q = "v16_51_moeazif v16_51_1y2v1nfpg", c = "v16_51_moeazig v16_51_1y2v1nfpm v16_51_1y2v1nfps";

package/dist/cover-hero.js

@@ -155,7 +155,7 @@ const dt = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
         "16:9": 16 / 9,
         "7:10": 7 / 10,
         "4:3": 9 / 10
-    })[e], lt = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
+    })[e], Nt = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
     var { headline: e, pretitle: p, pretitleLinesMax: V, pretitleAs: h, title: d, titleLinesMax: j, titleAs: f = "h1", description: b, descriptionLinesMax: z, extra: g, sideExtra: a, button: G, secondaryButton: L, buttonLink: M, minHeight: R, aspectRatio: c = "auto", variant: v, centered: i, noPaddingY: k, dataAttributes: D, "aria-label": F } = _param, l = _object_without_properties(_param, [
         "headline",
         "pretitle",
@@ -337,4 +337,4 @@ const dt = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
             ]
         })
     }));
-}), Nt = lt;
+});

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return J;
+        return G;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -135,39 +135,39 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const N = (_param)=>{
-    var { inputRef: m, defaultValue: s, value: l } = _param, c = _object_without_properties(_param, [
+const K = (_param)=>{
+    var { inputRef: d, defaultValue: u, value: l } = _param, i = _object_without_properties(_param, [
         "inputRef",
         "defaultValue",
         "value"
     ]);
-    const { texts: f, t: g } = (0, _hooks.useTheme)(), i = _react.useRef(""), u = (r)=>{
-        if (r.length === 2 && i.current === "Backspace") return r[0];
+    const { texts: m, t: f } = (0, _hooks.useTheme)(), s = _react.useRef(""), c = (r)=>{
+        if (r.length === 2 && s.current === "Backspace") return r[0];
         let e = "";
         return [
             ...r
-        ].forEach((C)=>{
-            e = (e + C).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");
+        ].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;
-    }, x = (r)=>{
-        i.current = r.key;
+    }, g = (r)=>{
+        s.current = r.key;
     };
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, c), {
-        placeholder: f.expirationDatePlaceholder || g(_texttokens.expirationDatePlaceholder),
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, i), {
+        placeholder: m.expirationDatePlaceholder || f(_texttokens.expirationDatePlaceholder),
         type: "text",
         inputMode: "decimal",
         maxLength: "5",
-        onKeyDown: x,
+        onKeyDown: g,
         onInput: (r)=>{
-            const e = u(r.currentTarget.value);
+            const e = c(r.currentTarget.value);
             r.currentTarget.value = e;
         },
-        value: l === void 0 ? void 0 : u(l),
-        defaultValue: s === void 0 ? void 0 : u(s),
-        ref: m
+        value: l === void 0 ? void 0 : c(l),
+        defaultValue: u === void 0 ? void 0 : c(u),
+        ref: d
     }));
-}, L = (_param)=>{
-    var { disabled: m, error: s, helperText: l, name: c, label: f, optional: g, validate: i, validateOnBlurInsideForm: u, onChange: x, onChangeValue: r, onBlur: e, value: C, autoComplete: I = "cc-exp", defaultValue: M, dataAttributes: Y } = _param, k = _object_without_properties(_param, [
+}, G = (_param)=>{
+    var { disabled: d, error: u, helperText: l, name: i, label: m, optional: f, validate: s, validateOnBlurInsideForm: c, onChange: g, onChangeValue: r, onBlur: e, value: x, autoComplete: T = "cc-exp", defaultValue: I, dataAttributes: M } = _param, P = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -184,51 +184,51 @@ const N = (_param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: h, t: E } = (0, _hooks.useTheme)(), { setFormError: v, jumpToNext: R } = (0, _formcontext.useForm)(), p = (t, n)=>{
+    const { texts: h, t: C } = (0, _hooks.useTheme)(), { setFormError: Y, jumpToNext: k } = (0, _formcontext.useForm)(), v = (t, n)=>{
         const { month: a, year: o } = t;
-        if (!a || !o) return h.formCreditCardExpirationError || E(_texttokens.formCreditCardExpirationError);
-        const d = /* @__PURE__ */ new Date(), V = d.getMonth() + 1, $ = d.getFullYear();
-        return o < $ ? h.formCreditCardExpirationError || E(_texttokens.formCreditCardExpirationError) : o === $ && a < V ? h.formCreditCardExpirationError || E(_texttokens.formCreditCardExpirationError) : i == null ? void 0 : i(t, n);
+        if (!a || !o) return h.formCreditCardExpirationError || C(_texttokens.formCreditCardExpirationError);
+        const p = /* @__PURE__ */ new Date(), R = p.getMonth() + 1, F = p.getFullYear();
+        return o < F ? h.formCreditCardExpirationError || C(_texttokens.formCreditCardExpirationError) : o === F && a < R ? h.formCreditCardExpirationError || C(_texttokens.formCreditCardExpirationError) : s === null || s === void 0 ? void 0 : s(t, n);
     }, y = (t)=>{
-        const [n, a] = String(t).split("/").map((d)=>parseInt(d)), o = Number.isInteger(a) ? 2e3 + a : null;
+        const [n, a] = String(t).split("/").map((p)=>parseInt(p)), o = Number.isInteger(a) ? 2e3 + a : null;
         return {
             month: n || null,
             year: o,
             raw: t
         };
     }, D = (0, _formcontext.useFieldProps)({
-        name: c,
-        label: f,
-        value: C,
-        defaultValue: M,
+        name: i,
+        label: m,
+        value: x,
+        defaultValue: I,
         processValue: y,
         helperText: l,
-        optional: g,
-        error: s,
-        disabled: m,
+        optional: f,
+        error: u,
+        disabled: d,
         onBlur: e,
-        validate: p,
-        validateOnBlurInsideForm: u,
-        onChange: x,
+        validate: v,
+        validateOnBlurInsideForm: c,
+        onChange: g,
         onChangeValue: r
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, k, D), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, P, D), {
         onChange: (t)=>{
             D.onChange(t);
             const n = t.currentTarget.value, a = y(n);
             if (n.length === 5) {
-                const o = p == null ? void 0 : p(a, n);
-                o ? v({
-                    name: c,
+                const o = v === null || v === void 0 ? void 0 : v(a, n);
+                o ? Y({
+                    name: i,
                     error: o
-                }) : R(c);
+                }) : k(i);
             }
         },
-        autoComplete: I,
-        inputComponent: N,
+        autoComplete: T,
+        inputComponent: K,
         dataAttributes: _object_spread({
             "component-name": "CreditCardExpirationField",
             testid: "CreditCardExpirationField"
-        }, Y)
+        }, M)
     }));
-}, J = L;
+};

package/dist/credit-card-fields.js

@@ -24,14 +24,14 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const F = (param)=>{
-    let { numberFieldName: o = "ccNum", expirationFieldName: a = "ccExp", cvvFieldName: d = "ccCvv", acceptedCards: i } = param;
-    const { values: C } = (0, _formcontext.useForm)(), { texts: r, t: e } = (0, _hooks.useTheme)(), l = (0, _creditcard.getCvvLength)(String(C[o]));
+const q = (param)=>{
+    let { numberFieldName: o = "ccNum", expirationFieldName: a = "ccExp", cvvFieldName: d = "ccCvv", acceptedCards: m } = param;
+    const { values: l } = (0, _formcontext.useForm)(), { texts: r, t: e } = (0, _hooks.useTheme)(), C = (0, _creditcard.getCvvLength)(String(l[o]));
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 16,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_creditcardnumberfield.default, {
-                acceptedCards: i,
+                acceptedCards: m,
                 name: o,
                 label: r.formCreditCardNumberLabel || e(_texttokens.formCreditCardNumberLabel)
             }),
@@ -43,13 +43,13 @@ const F = (param)=>{
                         label: r.formCreditCardExpirationLabel || e(_texttokens.formCreditCardExpirationLabel)
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_cvvfield.default, {
-                        acceptedCards: i,
+                        acceptedCards: m,
                         name: d,
                         label: r.formCreditCardCvvLabel || e(_texttokens.formCreditCardCvvLabel),
-                        maxLength: l
+                        maxLength: C
                     })
                 ]
             })
         ]
     });
-}, q = F;
+};

package/dist/credit-card-number-field.css-mistica.js

@@ -22,9 +22,7 @@ _export(exports, {
         return f;
     }
 });
-require("./sprinkles.css.ts.vanilla.css-mistica.js");
-require("./credit-card-number-field.css.ts.vanilla.css-mistica.js");
-var y = "v16_49_yvyo3q0", q = "v16_49_yvyo3q4 v16_49_yvyo3q2 v16_49_yvyo3q1 v16_49_1y2v1nfpm v16_49_1y2v1nfq1 v16_49_1y2v1nfpv v16_49_1y2v1nfqq v16_49_yvyo3q3 v16_49_1y2v1nfph", o = "v16_49_yvyo3q5 v16_49_yvyo3q2 v16_49_yvyo3q1 v16_49_1y2v1nfpm v16_49_1y2v1nfq1 v16_49_1y2v1nfpv v16_49_1y2v1nfqq", f = {
-    default: "v16_49_yvyo3qa v16_49_yvyo3q7 v16_49_yvyo3q6 v16_49_1y2v1nfpg v16_49_yvyo3q8",
-    backface: "v16_49_yvyo3qb v16_49_yvyo3q7 v16_49_yvyo3q6 v16_49_1y2v1nfpg v16_49_yvyo3q9"
+/* empty css                                     */ /* empty css                                                    */ var y = "v16_51_yvyo3q0", q = "v16_51_yvyo3q4 v16_51_yvyo3q2 v16_51_yvyo3q1 v16_51_1y2v1nfpm v16_51_1y2v1nfq1 v16_51_1y2v1nfpv v16_51_1y2v1nfqq v16_51_yvyo3q3 v16_51_1y2v1nfph", o = "v16_51_yvyo3q5 v16_51_yvyo3q2 v16_51_yvyo3q1 v16_51_1y2v1nfpm v16_51_1y2v1nfq1 v16_51_1y2v1nfpv v16_51_1y2v1nfqq", f = {
+    default: "v16_51_yvyo3qa v16_51_yvyo3q7 v16_51_yvyo3q6 v16_51_1y2v1nfpg v16_51_yvyo3q8",
+    backface: "v16_51_yvyo3qb v16_51_yvyo3q7 v16_51_yvyo3q6 v16_51_1y2v1nfpg v16_51_yvyo3q9"
 };

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Er;
+        return Ir;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -152,35 +152,35 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const er = (r)=>{
-    var i;
-    const n = String(r !== null && r !== void 0 ? r : "").replace(/[^\d]/g, "");
-    var _ref;
-    return (_ref = (i = n.match(/.{1,4}/g)) == null ? void 0 : i.join(" ")) !== null && _ref !== void 0 ? _ref : n;
+    var _t_match;
+    const t = String(r !== null && r !== void 0 ? r : "").replace(/[^\d]/g, "");
+    var _t_match_join;
+    return (_t_match_join = (_t_match = t.match(/.{1,4}/g)) === null || _t_match === void 0 ? void 0 : _t_match.join(" ")) !== null && _t_match_join !== void 0 ? _t_match_join : t;
 }, tr = (_param)=>{
-    var { inputRef: r, value: n, defaultValue: i, onChange: e } = _param, c = _object_without_properties(_param, [
+    var { inputRef: r, value: t, defaultValue: o, onChange: e } = _param, c = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange"
     ]);
-    const [N, m] = _react.useState(i !== null && i !== void 0 ? i : ""), f = _react.useRef(null), u = typeof n < "u", h = u ? n : N, T = _react.useCallback((d)=>{
-        u || m(d), f.current && (e == null || e((0, _dom.createChangeEvent)(f.current, d)));
+    const [g, C] = _react.useState(o !== null && o !== void 0 ? o : ""), m = _react.useRef(null), f = typeof t < "u", h = f ? t : g, N = _react.useCallback((u)=>{
+        f || C(u), m.current && (e === null || e === void 0 ? void 0 : e((0, _dom.createChangeEvent)(m.current, u)));
     }, [
-        u,
+        f,
         e
-    ]), a = (0, _rifm.useRifm)({
+    ]), s = (0, _rifm.useRifm)({
         format: er,
         value: h,
-        onChange: T,
+        onChange: N,
         accept: /[\d]+/g
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, c), {
         type: "text",
         inputMode: "decimal",
-        maxLength: (0, _creditcard.getCreditCardNumberLength)(a.value) + 3,
-        onChange: a.onChange,
-        value: a.value,
-        ref: (0, _common.combineRefs)(r, f)
+        maxLength: (0, _creditcard.getCreditCardNumberLength)(s.value) + 3,
+        onChange: s.onChange,
+        value: s.value,
+        ref: (0, _common.combineRefs)(r, m)
     }));
 }, ir = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {
         size: _iconbuttoncssmistica.iconSize.default
@@ -195,15 +195,15 @@ const er = (r)=>{
     }),
     isAnimating: !1
 }, or = (r, param)=>{
-    let { type: n, value: i } = param;
-    if (n === "INPUT") {
-        const e = ir(i);
+    let { type: t, value: o } = param;
+    if (t === "INPUT") {
+        const e = ir(o);
         if (e && !r.showBackface) return {
             animationTarget: e,
             showBackface: !0,
             isAnimating: !0
         };
-        if (!(0, _creditcard.isVisa)(i) && !(0, _creditcard.isMasterCard)(i) && !(0, _creditcard.isAmericanExpress)(i) && r.showBackface) return {
+        if (!(0, _creditcard.isVisa)(o) && !(0, _creditcard.isMasterCard)(o) && !(0, _creditcard.isAmericanExpress)(o) && r.showBackface) return {
             animationTarget: r.animationTarget,
             showBackface: !1,
             isAnimating: !0
@@ -212,12 +212,12 @@ const er = (r)=>{
             animationTarget: e
         });
     }
-    return n === "TRANSITION_END" ? _object_spread_props(_object_spread({}, r), {
+    return t === "TRANSITION_END" ? _object_spread_props(_object_spread({}, r), {
         isAnimating: !1
     }) : r;
-}, sr = (param)=>{
+}, ar = (param)=>{
     let { value: r } = param;
-    const [{ showBackface: n, animationTarget: i, isAnimating: e }, c] = _react.useReducer(or, nr);
+    const [{ showBackface: t, animationTarget: o, isAnimating: e }, c] = _react.useReducer(or, nr);
     return _react.useEffect(()=>{
         c({
             type: "INPUT",
@@ -228,7 +228,7 @@ const er = (r)=>{
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _creditcardnumberfieldcssmistica.flip,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-            className: _creditcardnumberfieldcssmistica.variants[n ? "backface" : "default"],
+            className: _creditcardnumberfieldcssmistica.variants[t ? "backface" : "default"],
             onTransitionEnd: ()=>e && c({
                     type: "TRANSITION_END"
                 }),
@@ -242,17 +242,17 @@ const er = (r)=>{
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _creditcardnumberfieldcssmistica.flipBack,
-                    children: i
+                    children: o
                 })
             ]
         })
     });
-}, ar = (_param)=>{
-    var { disabled: r, error: n, helperText: i, name: e, label: c, optional: N, validate: m, validateOnBlurInsideForm: f, onChange: u, onChangeValue: h, onBlur: T, acceptedCards: a = {
+}, Ir = (_param)=>{
+    var { disabled: r, error: t, helperText: o, name: e, label: c, optional: g, validate: C, validateOnBlurInsideForm: m, onChange: f, onChangeValue: h, onBlur: N, acceptedCards: s = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    }, value: d, autoComplete: w = "cc-number", defaultValue: F, dataAttributes: R } = _param, z = _object_without_properties(_param, [
+    }, value: u, autoComplete: w = "cc-number", defaultValue: R, dataAttributes: z } = _param, F = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -270,46 +270,46 @@ const er = (r)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: S, t: j } = (0, _hooks.useTheme)(), { jumpToNext: y, rawValues: M, setFormError: D } = (0, _formcontext.useForm)(), g = (t, C)=>{
-        const s = S.formCreditCardNumberError || j(_texttokens.formCreditCardNumberError);
-        return (0, _creditcard.isAmericanExpress)(t) && !a.americanExpress || (0, _creditcard.isVisa)(t) && !a.visa || (0, _creditcard.isMasterCard)(t) && !a.masterCard || !(0, _creditcard.isValidCreditCardNumber)(t) || (0, _creditcard.getCreditCardNumberLength)(t) !== (t == null ? void 0 : t.length) ? s : m == null ? void 0 : m(t, C);
-    }, E = (t)=>t.replace(/\s/g, ""), k = (0, _formcontext.useFieldProps)({
+    const { texts: S, t: P } = (0, _hooks.useTheme)(), { jumpToNext: j, rawValues: y, setFormError: M } = (0, _formcontext.useForm)(), I = (i, p)=>{
+        const a = S.formCreditCardNumberError || P(_texttokens.formCreditCardNumberError);
+        return (0, _creditcard.isAmericanExpress)(i) && !s.americanExpress || (0, _creditcard.isVisa)(i) && !s.visa || (0, _creditcard.isMasterCard)(i) && !s.masterCard || !(0, _creditcard.isValidCreditCardNumber)(i) || (0, _creditcard.getCreditCardNumberLength)(i) !== (i === null || i === void 0 ? void 0 : i.length) ? a : C === null || C === void 0 ? void 0 : C(i, p);
+    }, E = (i)=>i.replace(/\s/g, ""), k = (0, _formcontext.useFieldProps)({
         name: e,
         label: c,
-        value: d,
-        defaultValue: F,
+        value: u,
+        defaultValue: R,
         processValue: E,
-        helperText: i,
-        optional: N,
-        error: n,
+        helperText: o,
+        optional: g,
+        error: t,
         disabled: r,
-        onBlur: T,
-        validate: g,
-        validateOnBlurInsideForm: f,
-        onChange: u,
+        onBlur: N,
+        validate: I,
+        validateOnBlurInsideForm: m,
+        onChange: f,
         onChangeValue: h
     });
     var _ref;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, z, k), {
-        onChange: (t)=>{
-            k.onChange(t);
-            const C = t.currentTarget.value, s = E(C);
-            if (s.length >= (0, _creditcard.getCreditCardNumberLength)(s)) {
-                const B = g == null ? void 0 : g(s, C);
-                B ? D({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, F, k), {
+        onChange: (i)=>{
+            k.onChange(i);
+            const p = i.currentTarget.value, a = E(p);
+            if (a.length >= (0, _creditcard.getCreditCardNumberLength)(a)) {
+                const B = I === null || I === void 0 ? void 0 : I(a, p);
+                B ? M({
                     name: e,
                     error: B
-                }) : y(e);
+                }) : j(e);
             }
         },
         inputComponent: tr,
         autoComplete: w,
-        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(sr, {
-            value: (_ref = d !== null && d !== void 0 ? d : M[e]) !== null && _ref !== void 0 ? _ref : ""
+        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(ar, {
+            value: (_ref = u !== null && u !== void 0 ? u : y[e]) !== null && _ref !== void 0 ? _ref : ""
         }),
         dataAttributes: _object_spread({
             "component-name": "CreditCardNumberField",
             testid: "CreditCardNumberField"
-        }, R)
+        }, z)
     }));
-}, Er = ar;
+};