@telefonica/mistica 15.20.1 → 16.0.0

package/dist/counter.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return vr;
+        return Lr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -24,6 +24,7 @@ const _icontrashcanregular = /*#__PURE__*/ _interop_require_default(require("./g
 const _hooks = require("./hooks.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -122,34 +123,34 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const C = 20, Y = (param)=>{
-    let { value: h, defaultValue: b, min: m, max: s, onChangeValue: a } = param;
-    const i = h !== void 0, p = _react.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
-        m,
-        s
-    ]), [e, v] = _react.useState(p(b)), f = (n)=>{
-        i || v(n), a == null || a(n);
+const V = 20, nr = (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);
     };
     return [
-        i ? p(h) : e,
-        f
+        s ? f(p) : t,
+        g
     ];
-}, rr = (param)=>{
-    let { value: h, defaultValue: b, onChangeValue: m, onRemove: s, min: a, max: i, dataAttributes: p, disabled: e, removeLabel: v, increaseLabel: f, decreaseLabel: n, valueLabel: T } = param;
-    const D = (0, _themevariantcontext.useThemeVariant)(), g = (0, _hooks.useAriaId)(), { texts: u } = (0, _hooks.useTheme)(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, V] = Y({
-        value: h,
+}, cr = (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: A } = param;
+    const M = (0, _themevariantcontext.useThemeVariant)(), N = _react.useId(), { texts: u, t: d } = (0, _hooks.useTheme)(), l = a === void 0 ? 0 : a, m = Math.max(l, s === void 0 ? 999 : s), [e, T] = nr({
+        value: p,
         defaultValue: b,
         min: l,
-        max: d,
-        onChangeValue: m
-    }), o = !!s && t === l, $ = ()=>v === void 0 ? u.counterRemoveLabel : v, k = ()=>f === void 0 ? u.counterIncreaseLabel : f, z = ()=>n === void 0 ? u.counterDecreaseLabel : n, L = ()=>`${t}, ${T === void 0 ? u.counterQuantity : T}${a !== void 0 ? `, ${u.counterMinValue} ${a}` : ""}${i !== void 0 ? `, ${u.counterMaxValue} ${i}` : ""}`;
+        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), k = ()=>i !== null && i !== void 0 ? i : u.counterDecreaseLabel || d(_texttokens.counterDecreaseLabel), z = ()=>`${e}, ${A !== null && A !== void 0 ? A : u.counterQuantity || d(_texttokens.counterQuantity)}${a !== void 0 ? `, ${u.counterMinValue || d(_texttokens.counterMinValue)} ${a}` : ""}${s !== void 0 ? `, ${u.counterMaxValue || d(_texttokens.counterMaxValue)} ${s}` : ""}`;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_countercssmistica.counter, {
-            [_countercssmistica.disabled]: e
+            [_countercssmistica.disabled]: t
         })
-    }, (0, _dom.getPrefixedDataAttributes)(p, "Counter")), {
+    }, (0, _dom.getPrefixedDataAttributes)(f, "Counter")), {
         style: {
-            border: `1px solid ${D === "inverse" ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.border}`
+            border: `1px solid ${M === "inverse" || M === "media" ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.border}`
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 8,
@@ -158,15 +159,15 @@ const C = 20, Y = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(_countercssmistica.buttonContainer, {
                         [_countercssmistica.hasTrashIcon]: o,
-                        [_countercssmistica.isButtonDisabled]: e || !o && t === l,
-                        [_countercssmistica.disabled]: !e && !o && t === l
+                        [_countercssmistica.isButtonDisabled]: t || !o && e === l,
+                        [_countercssmistica.disabled]: !t && !o && e === l
                     }),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
                         className: _countercssmistica.button,
-                        disabled: !o && t === l || e,
-                        onPress: ()=>o ? s == null ? void 0 : s() : V(t - 1),
-                        "aria-label": o ? $() : z(),
-                        "aria-controls": g,
+                        disabled: !o && e === l || t,
+                        onPress: ()=>o ? c == null ? void 0 : c() : T(e - 1),
+                        "aria-label": o ? R() : k(),
+                        "aria-controls": N,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.buttonBackground
@@ -175,15 +176,15 @@ const C = 20, Y = (param)=>{
                                 className: _countercssmistica.decreaseButtonIcon,
                                 "aria-hidden": o,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsubtractregular.default, {
-                                    size: C,
-                                    color: t === l && !o || e ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
+                                    size: V,
+                                    color: e === l && !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: C,
+                                    size: V,
                                     color: _skincontractcssmistica.vars.colors.controlError
                                 })
                             })
@@ -193,9 +194,9 @@ const C = 20, Y = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _countercssmistica.valueContainer,
                     style: {
-                        width: `${Math.max(3, String(d).length) * 1.25}ch`
+                        width: `${Math.max(3, String(m).length) * 1.25}ch`
                     },
-                    id: g,
+                    id: N,
                     "aria-live": "polite",
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
                         variant: "default",
@@ -205,12 +206,12 @@ const C = 20, Y = (param)=>{
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                     regular: !0,
                                     color: _skincontractcssmistica.vars.colors.textPrimary,
-                                    children: t
+                                    children: e
                                 })
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                                    children: L()
+                                    children: z()
                                 })
                             })
                         ]
@@ -218,15 +219,15 @@ const C = 20, Y = (param)=>{
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(_countercssmistica.buttonContainer, {
-                        [_countercssmistica.isButtonDisabled]: e || t === d,
-                        [_countercssmistica.disabled]: !e && t === d
+                        [_countercssmistica.isButtonDisabled]: t || e === m,
+                        [_countercssmistica.disabled]: !t && e === m
                     }),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
                         className: _countercssmistica.button,
-                        disabled: t === d || e,
-                        onPress: ()=>V(t + 1),
-                        "aria-label": k(),
-                        "aria-controls": g,
+                        disabled: e === m || t,
+                        onPress: ()=>T(e + 1),
+                        "aria-label": $(),
+                        "aria-controls": N,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.buttonBackground
@@ -234,8 +235,8 @@ const C = 20, Y = (param)=>{
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _countercssmistica.defaultButtonIcon,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconaddmoreregular.default, {
-                                    size: C,
-                                    color: t === d || e ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
+                                    size: V,
+                                    color: e === m || t ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
                                 })
                             })
                         ]
@@ -244,4 +245,4 @@ const C = 20, Y = (param)=>{
             ]
         })
     }));
-}, vr = rr;
+}, Lr = cr;

package/dist/cover-hero-media.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "CoverHeroMedia", {
     enumerable: true,
     get: function() {
-        return y;
+        return C;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -18,26 +18,26 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const y = (param)=>{
-    let { backgroundVideo: o, backgroundImage: e, poster: t, backgroundVideoRef: s } = param;
-    const { video: m, videoAction: r } = (0, _card.useVideoWithControls)(o, t, s);
+const C = (param)=>{
+    let { backgroundVideo: o, backgroundImage: r, poster: t, backgroundVideoRef: s } = param;
+    const { video: m, videoAction: e } = (0, _card.useVideoWithControls)(o, t, 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)(_card.CardActionsGroup, {
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_card.CardActionsGroup, {
                 actions: [
-                    r
+                    e
                 ],
-                type: "media"
+                variant: "media"
             })
         ]
     });

package/dist/cover-hero.js

@@ -179,8 +179,9 @@ const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
     const a = l.backgroundVideo || l.backgroundImage, V = a ? "none" : l.background || ({
         default: _skincontractcssmistica.vars.colors.background,
         inverse: _skincontractcssmistica.vars.colors.backgroundBrand,
-        alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
-    })[p !== null && p !== void 0 ? p : "default"], s = a ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, h = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
+        media: "none"
+    })[p !== null && p !== void 0 ? p : "default"], m = a ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, h = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _coverherocssmistica.mainContent,
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -202,14 +203,14 @@ const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                     regular: !0,
                                     truncate: H,
-                                    textShadow: s,
+                                    textShadow: m,
                                     children: d
                                 })
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
                                 as: N,
                                 truncate: B,
-                                textShadow: s,
+                                textShadow: m,
                                 children: y
                             })
                         ]
@@ -221,7 +222,7 @@ const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
                             regular: !0,
                             truncate: S,
                             color: a ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
-                            textShadow: s,
+                            textShadow: m,
                             children: u
                         })
                     })
@@ -253,8 +254,7 @@ const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
             children: [
                 a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_coverheromedia.CoverHeroMedia, _object_spread({}, l)) : null,
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                    variant: a ? "inverse" : p,
-                    backgroundColor: "none",
+                    variant: a ? "media" : p,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingY: f ? 0 : {
                             desktop: 56,

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

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

package/dist/credit-card-fields.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return k;
+        return q;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -18,37 +18,38 @@ const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _creditcardexpirationfield = /*#__PURE__*/ _interop_require_default(require("./credit-card-expiration-field.js"));
 const _creditcardnumberfield = /*#__PURE__*/ _interop_require_default(require("./credit-card-number-field.js"));
 const _cvvfield = /*#__PURE__*/ _interop_require_default(require("./cvv-field.js"));
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const b = (param)=>{
-    let { numberFieldName: t = "ccNum", expirationFieldName: m = "ccExp", cvvFieldName: a = "ccCvv", acceptedCards: o } = param;
-    const { values: d } = (0, _formcontext.useForm)(), { texts: r } = (0, _hooks.useTheme)(), l = (0, _creditcard.getCvvLength)(String(d[t]));
+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]));
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 16,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_creditcardnumberfield.default, {
-                acceptedCards: o,
-                name: t,
-                label: r.formCreditCardNumberLabel
+                acceptedCards: i,
+                name: o,
+                label: r.formCreditCardNumberLabel || e(_texttokens.formCreditCardNumberLabel)
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_doublefield.default, {
                 layout: "60/40",
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_creditcardexpirationfield.default, {
-                        name: m,
-                        label: r.formCreditCardExpirationLabel
+                        name: a,
+                        label: r.formCreditCardExpirationLabel || e(_texttokens.formCreditCardExpirationLabel)
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_cvvfield.default, {
-                        acceptedCards: o,
-                        name: a,
-                        label: r.formCreditCardCvvLabel,
+                        acceptedCards: i,
+                        name: d,
+                        label: r.formCreditCardCvvLabel || e(_texttokens.formCreditCardCvvLabel),
                         maxLength: l
                     })
                 ]
             })
         ]
     });
-}, k = b;
+}, q = F;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Tr;
+        return Er;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,6 +25,7 @@ const _common = require("./utils/common.js");
 const _creditcardnumberfieldcssmistica = require("./credit-card-number-field.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -150,12 +151,12 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Y = (r)=>{
+const rr = (r)=>{
     var t;
     const n = String(r !== null && r !== void 0 ? r : "").replace(/[^\d]/g, "");
     var _ref;
     return (_ref = (t = n.match(/.{1,4}/g)) == null ? void 0 : t.join(" ")) !== null && _ref !== void 0 ? _ref : n;
-}, Z = (_param)=>{
+}, er = (_param)=>{
     var { inputRef: r, value: n, defaultValue: t, onChange: e } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
@@ -168,7 +169,7 @@ const Y = (r)=>{
         f,
         e
     ]), d = (0, _rifm.useRifm)({
-        format: Y,
+        format: rr,
         value: u,
         onChange: g,
         accept: /[\d]+/g
@@ -181,22 +182,22 @@ const Y = (r)=>{
         value: d.value,
         ref: (0, _common.combineRefs)(r, m)
     }));
-}, v = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {
+}, tr = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {
         size: _iconbuttoncssmistica.iconSize.default
     }) : (0, _creditcard.isMasterCard)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconmastercard.default, {
         size: _iconbuttoncssmistica.iconSize.default
     }) : (0, _creditcard.isAmericanExpress)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconamex.default, {
         size: _iconbuttoncssmistica.iconSize.default
-    }) : null, rr = {
+    }) : null, ir = {
     showBackface: !1,
     animationTarget: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {
         size: _iconbuttoncssmistica.iconSize.default
     }),
     isAnimating: !1
-}, er = (r, param)=>{
+}, nr = (r, param)=>{
     let { type: n, value: t } = param;
     if (n === "INPUT") {
-        const e = v(t);
+        const e = tr(t);
         if (e && !r.showBackface) return {
             animationTarget: e,
             showBackface: !0,
@@ -214,9 +215,9 @@ const Y = (r)=>{
     return n === "TRANSITION_END" ? _object_spread_props(_object_spread({}, r), {
         isAnimating: !1
     }) : r;
-}, tr = (param)=>{
+}, or = (param)=>{
     let { value: r } = param;
-    const [{ showBackface: n, animationTarget: t, isAnimating: e }, a] = _react.useReducer(er, rr);
+    const [{ showBackface: n, animationTarget: t, isAnimating: e }, a] = _react.useReducer(nr, ir);
     return _react.useEffect(()=>{
         a({
             type: "INPUT",
@@ -246,12 +247,12 @@ const Y = (r)=>{
             ]
         })
     });
-}, ir = (_param)=>{
+}, sr = (_param)=>{
     var { disabled: r, error: n, helperText: t, name: e, optional: a, validate: c, onChange: T, onChangeValue: m, onBlur: f, acceptedCards: u = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    }, value: g, autoComplete: d = "cc-number", defaultValue: C, dataAttributes: F } = _param, R = _object_without_properties(_param, [
+    }, value: g, autoComplete: d = "cc-number", defaultValue: C, dataAttributes: R } = _param, z = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -267,14 +268,14 @@ const Y = (r)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: E } = (0, _hooks.useTheme)(), { jumpToNext: z, rawValues: S, setFormError: y } = (0, _formcontext.useForm)(), h = (i, N)=>{
-        const s = E.formCreditCardNumberError;
-        return i ? (0, _creditcard.isAmericanExpress)(i) && !u.americanExpress || (0, _creditcard.isVisa)(i) && !u.visa || (0, _creditcard.isMasterCard)(i) && !u.masterCard || !(0, _creditcard.isValidCreditCardNumber)(i) || (0, _creditcard.getCreditCardNumberLength)(i) !== i.length ? s : c == null ? void 0 : c(i, N) : a ? "" : E.formFieldErrorIsMandatory;
-    }, k = (i)=>i.replace(/\s/g, ""), B = (0, _formcontext.useFieldProps)({
+    const { texts: x, t: k } = (0, _hooks.useTheme)(), { jumpToNext: S, rawValues: y, setFormError: M } = (0, _formcontext.useForm)(), h = (i, N)=>{
+        const s = x.formCreditCardNumberError || k(_texttokens.formCreditCardNumberError);
+        return i ? (0, _creditcard.isAmericanExpress)(i) && !u.americanExpress || (0, _creditcard.isVisa)(i) && !u.visa || (0, _creditcard.isMasterCard)(i) && !u.masterCard || !(0, _creditcard.isValidCreditCardNumber)(i) || (0, _creditcard.getCreditCardNumberLength)(i) !== i.length ? s : c == null ? void 0 : c(i, N) : a ? "" : x.formFieldErrorIsMandatory || k(_texttokens.formFieldErrorIsMandatory);
+    }, B = (i)=>i.replace(/\s/g, ""), V = (0, _formcontext.useFieldProps)({
         name: e,
         value: g,
         defaultValue: C,
-        processValue: k,
+        processValue: B,
         helperText: t,
         optional: a,
         error: n,
@@ -285,25 +286,25 @@ const Y = (r)=>{
         onChangeValue: m
     });
     var _ref;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, R, B), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, z, V), {
         onChange: (i)=>{
-            B.onChange(i);
-            const N = i.currentTarget.value, s = k(N);
+            V.onChange(i);
+            const N = i.currentTarget.value, s = B(N);
             if (s.length >= (0, _creditcard.getCreditCardNumberLength)(s)) {
-                const V = h == null ? void 0 : h(s, N);
-                V ? y({
+                const F = h == null ? void 0 : h(s, N);
+                F ? M({
                     name: e,
-                    error: V
-                }) : z(e);
+                    error: F
+                }) : S(e);
             }
         },
-        inputComponent: Z,
+        inputComponent: er,
         autoComplete: d,
-        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(tr, {
-            value: (_ref = g !== null && g !== void 0 ? g : S[e]) !== null && _ref !== void 0 ? _ref : ""
+        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(or, {
+            value: (_ref = g !== null && g !== void 0 ? g : y[e]) !== null && _ref !== void 0 ? _ref : ""
         }),
         dataAttributes: _object_spread({
             "component-name": "CreditCardNumberField"
-        }, F)
+        }, R)
     }));
-}, Tr = ir;
+}, Er = sr;