@telefonica/mistica 14.40.0 → 14.42.0

package/dist/checkbox.css-mistica.js

@@ -10,28 +10,28 @@ function _export(target, all) {
 }
 _export(exports, {
     boxVariant: function() {
-        return n;
+        return v;
     },
     check: function() {
-        return r;
+        return n;
     },
     checkChecked: function() {
-        return y;
+        return f;
     },
     checkboxContainer: function() {
-        return f;
+        return y;
     },
     checkboxContainerDisabled: function() {
         return b;
     },
     disabled: function() {
-        return a;
+        return c;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./checkbox.css.ts.vanilla.css-mistica.js");
-var n = {
-    ios: "_1rz9b16 _1rz9b15 _1y2v1nfgh _1y2v1nfgp _1y2v1nfgv _1y2v1nfgy _1y2v1nfja _1y2v1nf35",
-    rest: "_1rz9b17 _1rz9b15 _1y2v1nfgh _1y2v1nfgp _1y2v1nfgv _1y2v1nfgy _1y2v1nfja _1y2v1nf35",
-    checked: "_1rz9b18 _1rz9b15 _1y2v1nfgh _1y2v1nfgp _1y2v1nfgv _1y2v1nfgy _1y2v1nfja _1y2v1nf35"
-}, r = "_1rz9b1a _1y2v1nfgi", y = "_1rz9b1b", f = "_1rz9b12 _1rz9b11 _1y2v1nfgj", b = "_1rz9b13 _1rz9b11 _1y2v1nfgj", a = "_1rz9b1c";
+var v = {
+    ios: "_1rz9b16 _1rz9b15 _1y2v1nfgj _1y2v1nfgr _1y2v1nfgx _1y2v1nfh0 _1y2v1nfjc _1y2v1nf36",
+    rest: "_1rz9b17 _1rz9b15 _1y2v1nfgj _1y2v1nfgr _1y2v1nfgx _1y2v1nfh0 _1y2v1nfjc _1y2v1nf36",
+    checked: "_1rz9b18 _1rz9b15 _1y2v1nfgj _1y2v1nfgr _1y2v1nfgx _1y2v1nfh0 _1y2v1nfjc _1y2v1nf36"
+}, n = "_1rz9b1a _1y2v1nfgk", f = "_1rz9b1b", y = "_1rz9b12 _1rz9b11 _1y2v1nfgl", b = "_1rz9b13 _1rz9b11 _1y2v1nfgl", c = "_1rz9b1c";

package/dist/chip.css-mistica.js

@@ -27,11 +27,11 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./chip.css.ts.vanilla.css-mistica.js");
-var c = "_1y2v1nf69 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfiy _1y2v1nf68", t = {
+var c = "_1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfj0 _1y2v1nf6a", t = {
     light: "cc7htnb cc7htn9",
     dark: "cc7htnc cc7htn9"
 }, f = {
-    default: "cc7htn1 _1y2v1nfgh _1y2v1nfgp _1y2v1nfgv _1y2v1nfix _1y2v1nf36 _1y2v1nf21",
-    overAlternative: "cc7htn1 _1y2v1nfgh _1y2v1nfgp _1y2v1nfgv _1y2v1nfix _1y2v1nf3d _1y2v1nf21",
-    active: "cc7htn8 cc7htn2 cc7htn1 _1y2v1nfgh _1y2v1nfgp _1y2v1nfgv _1y2v1nfix _1y2v1nf19 _1y2v1nf5u"
+    default: "cc7htn1 _1y2v1nfgj _1y2v1nfgr _1y2v1nfgx _1y2v1nfiz _1y2v1nf37 _1y2v1nf22",
+    overAlternative: "cc7htn1 _1y2v1nfgj _1y2v1nfgr _1y2v1nfgx _1y2v1nfiz _1y2v1nf3e _1y2v1nf22",
+    active: "cc7htn8 cc7htn2 cc7htn1 _1y2v1nfgj _1y2v1nfgr _1y2v1nfgx _1y2v1nfiz _1y2v1nf19 _1y2v1nf5w"
 }, y = "cc7htnd", _ = "cc7htne";

package/dist/circle.css-mistica.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "circle", {
     enumerable: true,
     get: function() {
-        return y;
+        return p;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./circle.css.ts.vanilla.css-mistica.js");
-var y = "_1wpwyyp1 _1y2v1nfgg _1y2v1nfgv _1y2v1nfgp _1y2v1nfiz";
+var p = "_1wpwyyp1 _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr _1y2v1nfj1";

package/dist/community/advanced-data-card.css-mistica.js

@@ -13,28 +13,28 @@ _export(exports, {
         return _;
     },
     actionsVariants: function() {
-        return v;
+        return n;
     },
     adjustButtonLink: function() {
-        return n;
+        return v;
     },
     button: function() {
         return a;
     },
     buttonMobile: function() {
-        return t;
+        return u;
     },
     cardContentStyle: function() {
-        return u;
+        return t;
     },
     dataCard: function() {
-        return y;
+        return i;
     },
     divider: function() {
         return x;
     },
     footerDirection: function() {
-        return i;
+        return y;
     },
     footerText: function() {
         return o;
@@ -46,27 +46,27 @@ _export(exports, {
         return g;
     },
     minHeight: function() {
-        return d;
+        return h;
     },
     paddingX: function() {
-        return h;
+        return d;
     },
     touchableArea: function() {
-        return l;
+        return b;
     },
     touchableCardOverlay: function() {
-        return b;
+        return l;
     },
     touchableContainer: function() {
-        return m;
+        return c;
     },
     zindex: function() {
-        return c;
+        return m;
     }
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
 require("./advanced-data-card.css.ts.vanilla.css-mistica.js");
-var _ = "_1x00fru3 _1x00fru1 _1y2v1nf96 _1y2v1nfaf _1y2v1nfgg _1y2v1nfh2 _1y2v1nfgs _1y2v1nf83", v = {
+var _ = "_1x00fru3 _1x00fru1 _1y2v1nf98 _1y2v1nfah _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgu _1y2v1nf85", n = {
     default: "_1x00fruk",
     mobile: "_1x00frul"
-}, n = "_1x00frur", a = "_1x00frun", t = "_1x00fruo _1x00frun", u = "_1x00fru9 _1x00fru1 _1y2v1nf96 _1y2v1nfaf _1y2v1nf6i _1y2v1nf83", y = "_1x00frud _1y2v1nfga _1y2v1nfgg _1y2v1nfh2 _1y2v1nfgm _1y2v1nfh3 _1y2v1nfhk _1x00frub", x = "_1x00frui", i = "_1x00fruq _1y2v1nfgg _1y2v1nfgl", o = "_1y2v1nfgg _1y2v1nfh2 _1y2v1nfgv _1y2v1nfip", e = "_1x00frum", g = "_1x00frus", d = "_1x00frub", h = "_1x00fru1 _1y2v1nf96 _1y2v1nfaf", l = "_1x00fru4", b = "_1x00fru7", m = "_1x00fru5", c = "_1x00frua";
+}, v = "_1x00frur", a = "_1x00frun", u = "_1x00fruo _1x00frun", t = "_1x00fru9 _1x00fru1 _1y2v1nf98 _1y2v1nfah _1y2v1nf6k _1y2v1nf85", i = "_1x00frud _1y2v1nfgc _1y2v1nfgi _1y2v1nfh4 _1y2v1nfgo _1y2v1nfh5 _1y2v1nfhm _1x00frub", x = "_1x00frui", y = "_1x00fruq _1y2v1nfgi _1y2v1nfgn", o = "_1y2v1nfgi _1y2v1nfh4 _1y2v1nfgx _1y2v1nfir", e = "_1x00frum", g = "_1x00frus", h = "_1x00frub", d = "_1x00fru1 _1y2v1nf98 _1y2v1nfah", b = "_1x00fru4", l = "_1x00fru7", c = "_1x00fru5", m = "_1x00frua";

package/dist/community/blocks.css-mistica.js

@@ -10,12 +10,12 @@ function _export(target, all) {
 }
 _export(exports, {
     column: function() {
-        return t;
+        return o;
     },
     rightContent: function() {
-        return o;
+        return t;
     }
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
 require("./blocks.css.ts.vanilla.css-mistica.js");
-var t = "_1y2v1nfgg _1y2v1nfgm", o = "llrsen1";
+var o = "_1y2v1nfgi _1y2v1nfgo", t = "llrsen1";

package/dist/counter.css-mistica.js

@@ -19,25 +19,25 @@ _export(exports, {
         return a;
     },
     counter: function() {
-        return t;
+        return f;
     },
     decreaseButtonIcon: function() {
-        return f;
+        return t;
     },
     defaultButtonIcon: function() {
-        return y;
+        return i;
     },
     disabled: function() {
-        return i;
+        return y;
     },
     hasTrashIcon: function() {
         return _;
     },
     isButtonDisabled: function() {
-        return o;
+        return j;
     },
     trashButtonIcon: function() {
-        return j;
+        return o;
     },
     valueContainer: function() {
         return e;
@@ -45,4 +45,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./counter.css.ts.vanilla.css-mistica.js");
-var v = "rijsns8 _1y2v1nf68 _1y2v1nfiy _1y2v1nfgb _1y2v1nfhe _1y2v1nfhu", s = "rijsnse _1y2v1nfhd _1y2v1nfht _1y2v1nfgb _1y2v1nfj5 _1y2v1nf5u", a = "rijsns6", t = "rijsns3 _1y2v1nfj5 _1y2v1nf36 _1y2v1nfgh _1y2v1nfjh", f = "rijsnsc rijsnsa _1y2v1nfgb", y = "rijsnsa _1y2v1nfgb", i = "rijsns4", _ = "rijsns0", o = "rijsns1", j = "rijsnsb rijsnsa _1y2v1nfgb", e = "_1y2v1nfga _1y2v1nfgg _1y2v1nfgp";
+var v = "rijsns8 _1y2v1nf6a _1y2v1nfj0 _1y2v1nfgd _1y2v1nfhg _1y2v1nfhw", s = "rijsnse _1y2v1nfhf _1y2v1nfhv _1y2v1nfgd _1y2v1nfj7 _1y2v1nf5w", a = "rijsns6", f = "rijsns3 _1y2v1nfj7 _1y2v1nf37 _1y2v1nfgj _1y2v1nfjj", t = "rijsnsc rijsnsa _1y2v1nfgd", i = "rijsnsa _1y2v1nfgd", y = "rijsns4", _ = "rijsns0", j = "rijsns1", o = "rijsnsb rijsnsa _1y2v1nfgd", e = "_1y2v1nfgc _1y2v1nfgi _1y2v1nfgr";

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return A;
+        return L;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -135,13 +135,13 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const j = (_param)=>{
-    var { inputRef: g, defaultValue: s, value: l } = _param, u = _object_without_properties(_param, [
+    var { inputRef: g, defaultValue: s, value: l } = _param, c = _object_without_properties(_param, [
         "inputRef",
         "defaultValue",
         "value"
     ]);
-    const { texts: p } = (0, _hooks.useTheme)(), c = _react.useRef(""), i = (r)=>{
-        if (r.length === 2 && c.current === "Backspace") return r[0];
+    const { texts: p } = (0, _hooks.useTheme)(), i = _react.useRef(""), u = (r)=>{
+        if (r.length === 2 && i.current === "Backspace") return r[0];
         let e = "";
         return [
             ...r
@@ -149,24 +149,24 @@ const j = (_param)=>{
             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;
+        i.current = r.key;
     };
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, u), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, c), {
         placeholder: p.expirationDatePlaceholder,
         type: "text",
         inputMode: "decimal",
         maxLength: "5",
         onKeyDown: h,
         onInput: (r)=>{
-            const e = i(r.currentTarget.value);
+            const e = u(r.currentTarget.value);
             r.currentTarget.value = e;
         },
-        value: l === void 0 ? void 0 : i(l),
-        defaultValue: s === void 0 ? void 0 : i(s),
+        value: l === void 0 ? void 0 : u(l),
+        defaultValue: s === void 0 ? void 0 : u(s),
         ref: g
     }));
-}, 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, [
+}, 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, [
         "disabled",
         "error",
         "helperText",
@@ -178,23 +178,24 @@ const j = (_param)=>{
         "onBlur",
         "value",
         "autoComplete",
-        "defaultValue"
+        "defaultValue",
+        "dataAttributes"
     ]);
-    const { texts: f } = (0, _hooks.useTheme)(), { setFormError: w, jumpToNext: I } = (0, _formcontext.useForm)(), m = (t, n)=>{
-        if (!n) return p ? "" : f.formFieldErrorIsMandatory;
+    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 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);
+        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((d)=>parseInt(d)), o = Number.isInteger(a) ? 2e3 + a : null;
+        const [n, a] = String(t).split("/").map((f)=>parseInt(f)), o = Number.isInteger(a) ? 2e3 + a : null;
         return {
             month: n || null,
             year: o,
             raw: t
         };
     }, E = (0, _formcontext.useFieldProps)({
-        name: u,
+        name: c,
         value: e,
         defaultValue: D,
         processValue: C,
@@ -204,22 +205,25 @@ const j = (_param)=>{
         disabled: g,
         onBlur: r,
         validate: m,
-        onChange: i,
+        onChange: u,
         onChangeValue: h
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, T, E), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, w, 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,
+                o ? I({
+                    name: c,
                     error: o
-                }) : I(u);
+                }) : M(c);
             }
         },
         autoComplete: x,
-        inputComponent: j
+        inputComponent: j,
+        dataAttributes: _object_spread({
+            "component-name": "CreditCardExpirationField"
+        }, T)
     }));
-}, A = B;
+}, L = A;

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

@@ -10,21 +10,21 @@ function _export(target, all) {
 }
 _export(exports, {
     flip: function() {
-        return a;
+        return f;
     },
     flipBack: function() {
-        return o;
+        return n;
     },
     flipFront: function() {
-        return r;
+        return o;
     },
     variants: function() {
-        return f;
+        return r;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./credit-card-number-field.css.ts.vanilla.css-mistica.js");
-var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nfgb", f = {
-    default: "yvyo3q4 _1y2v1nfga yvyo3q5",
-    backface: "yvyo3q4 _1y2v1nfga yvyo3q6"
+var f = "yvyo3q0", n = "yvyo3q5 yvyo3q2 _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr _1y2v1nfhm", o = "yvyo3q2 _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr _1y2v1nfhm _1y2v1nfgd", r = {
+    default: "yvyo3q7 _1y2v1nfgc yvyo3q8",
+    backface: "yvyo3q7 _1y2v1nfgc 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 hr;
+        return Tr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -24,6 +24,7 @@ const _dom = require("./utils/dom.js");
 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 _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -149,27 +150,27 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const W = (r)=>{
+const Y = (r)=>{
     var t;
-    const i = String(r !== null && r !== void 0 ? r : "").replace(/[^\d]/g, "");
+    const n = String(r !== null && r !== void 0 ? r : "").replace(/[^\d]/g, "");
     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, [
+    return (_ref = (t = n.match(/.{1,4}/g)) == null ? void 0 : t.join(" ")) !== null && _ref !== void 0 ? _ref : n;
+}, Z = (_param)=>{
+    var { inputRef: r, value: n, defaultValue: t, onChange: e } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange"
     ]);
-    const [c, N] = _react.useState(t !== null && t !== void 0 ? t : ""), m = _react.useRef(null), f = typeof i < "u", u = f ? i : c, p = _react.useCallback((g)=>{
-        f || N(g), m.current && (e == null || e((0, _dom.createChangeEvent)(m.current, g)));
+    const [c, T] = _react.useState(t !== null && t !== void 0 ? t : ""), m = _react.useRef(null), f = typeof n < "u", u = f ? n : c, g = _react.useCallback((C)=>{
+        f || T(C), m.current && (e == null || e((0, _dom.createChangeEvent)(m.current, C)));
     }, [
         f,
         e
     ]), d = (0, _rifm.useRifm)({
-        format: W,
+        format: Y,
         value: u,
-        onChange: p,
+        onChange: g,
         accept: /[\d]+/g
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("input", _object_spread_props(_object_spread({}, a), {
@@ -180,14 +181,22 @@ const W = (r)=>{
         value: d.value,
         ref: (0, _common.combineRefs)(r, m)
     }));
-}, Y = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {}) : (0, _creditcard.isMasterCard)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconmastercard.default, {}) : (0, _creditcard.isAmericanExpress)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconamex.default, {}) : null, Z = {
+}, v = (r)=>(0, _creditcard.isVisa)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconvisa.default, {
+        size: _textfieldbasecssmistica.iconSize
+    }) : (0, _creditcard.isMasterCard)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconmastercard.default, {
+        size: _textfieldbasecssmistica.iconSize
+    }) : (0, _creditcard.isAmericanExpress)(r) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconamex.default, {
+        size: _textfieldbasecssmistica.iconSize
+    }) : null, rr = {
     showBackface: !1,
-    animationTarget: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {}),
+    animationTarget: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {
+        size: _textfieldbasecssmistica.iconSize
+    }),
     isAnimating: !1
-}, v = (r, param)=>{
-    let { type: i, value: t } = param;
-    if (i === "INPUT") {
-        const e = Y(t);
+}, er = (r, param)=>{
+    let { type: n, value: t } = param;
+    if (n === "INPUT") {
+        const e = v(t);
         if (e && !r.showBackface) return {
             animationTarget: e,
             showBackface: !0,
@@ -202,12 +211,12 @@ const W = (r)=>{
             animationTarget: e
         });
     }
-    return i === "TRANSITION_END" ? _object_spread_props(_object_spread({}, r), {
+    return n === "TRANSITION_END" ? _object_spread_props(_object_spread({}, r), {
         isAnimating: !1
     }) : r;
-}, rr = (param)=>{
+}, tr = (param)=>{
     let { value: r } = param;
-    const [{ showBackface: i, animationTarget: t, isAnimating: e }, a] = _react.useReducer(v, Z);
+    const [{ showBackface: n, animationTarget: t, isAnimating: e }, a] = _react.useReducer(er, rr);
     return _react.useEffect(()=>{
         a({
             type: "INPUT",
@@ -218,7 +227,7 @@ const W = (r)=>{
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _creditcardnumberfieldcssmistica.flip,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-            className: _creditcardnumberfieldcssmistica.variants[i ? "backface" : "default"],
+            className: _creditcardnumberfieldcssmistica.variants[n ? "backface" : "default"],
             onTransitionEnd: ()=>e && a({
                     type: "TRANSITION_END"
                 }),
@@ -226,6 +235,7 @@ const W = (r)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _creditcardnumberfieldcssmistica.flipFront,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {
+                        size: _textfieldbasecssmistica.iconSize,
                         color: _skincontractcssmistica.vars.colors.neutralMedium
                     })
                 }),
@@ -236,12 +246,12 @@ 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 = {
+}, ir = (_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: p, autoComplete: d = "cc-number", defaultValue: g } = _param, w = _object_without_properties(_param, [
+    }, value: g, autoComplete: d = "cc-number", defaultValue: C, dataAttributes: F } = _param, R = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -254,42 +264,46 @@ const W = (r)=>{
         "acceptedCards",
         "value",
         "autoComplete",
-        "defaultValue"
+        "defaultValue",
+        "dataAttributes"
     ]);
-    const { texts: E } = (0, _hooks.useTheme)(), { jumpToNext: R, rawValues: F, setFormError: S } = (0, _formcontext.useForm)(), h = (n, C)=>{
+    const { texts: E } = (0, _hooks.useTheme)(), { jumpToNext: z, rawValues: S, setFormError: y } = (0, _formcontext.useForm)(), h = (i, N)=>{
         const s = E.formCreditCardNumberError;
-        return n ? (0, _creditcard.isAmericanExpress)(n) && !u.americanExpress || (0, _creditcard.isVisa)(n) && !u.visa || (0, _creditcard.isMasterCard)(n) && !u.masterCard || !(0, _creditcard.isValidCreditCardNumber)(n) || (0, _creditcard.getCreditCardNumberLength)(n) !== n.length ? s : c == null ? void 0 : c(n, C) : a ? "" : E.formFieldErrorIsMandatory;
-    }, b = (n)=>n.replace(/\s/g, ""), k = (0, _formcontext.useFieldProps)({
+        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)({
         name: e,
-        value: p,
-        defaultValue: g,
-        processValue: b,
+        value: g,
+        defaultValue: C,
+        processValue: k,
         helperText: t,
         optional: a,
-        error: i,
+        error: n,
         disabled: r,
         onBlur: f,
         validate: h,
-        onChange: N,
+        onChange: T,
         onChangeValue: m
     });
     var _ref;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, w, k), {
-        onChange: (n)=>{
-            k.onChange(n);
-            const C = n.currentTarget.value, s = b(C);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, R, B), {
+        onChange: (i)=>{
+            B.onChange(i);
+            const N = i.currentTarget.value, s = k(N);
             if (s.length >= (0, _creditcard.getCreditCardNumberLength)(s)) {
-                const B = h == null ? void 0 : h(s, C);
-                B ? S({
+                const V = h == null ? void 0 : h(s, N);
+                V ? y({
                     name: e,
-                    error: B
-                }) : R(e);
+                    error: V
+                }) : z(e);
             }
         },
-        inputComponent: X,
+        inputComponent: Z,
         autoComplete: d,
-        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(rr, {
-            value: (_ref = p !== null && p !== void 0 ? p : F[e]) !== null && _ref !== void 0 ? _ref : ""
-        })
+        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(tr, {
+            value: (_ref = g !== null && g !== void 0 ? g : S[e]) !== null && _ref !== void 0 ? _ref : ""
+        }),
+        dataAttributes: _object_spread({
+            "component-name": "CreditCardNumberField"
+        }, F)
     }));
-}, hr = er;
+}, Tr = ir;