@telefonica/mistica 16.18.2 → 16.20.0

package/dist/community/blocks.js

@@ -10,22 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     HighlightedValueBlock: function() {
-        return z;
+        return E;
     },
     InformationBlock: function() {
-        return q;
+        return D;
     },
     ProgressBlock: function() {
-        return E;
+        return J;
     },
     RowBlock: function() {
-        return L;
+        return q;
     },
     SimpleBlock: function() {
-        return $;
+        return z;
     },
     ValueBlock: function() {
-        return D;
+        return F;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -44,8 +44,8 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const g = (param)=>{
-    let { title: o, description: e } = param;
+const b = (param)=>{
+    let { title: a, description: e } = param;
     const l = typeof e == "string" ? [
         e
     ] : e;
@@ -55,29 +55,29 @@ const g = (param)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                 regular: !0,
                 color: _skincontractcssmistica.vars.colors.textPrimary,
-                children: o
+                children: a
             }),
-            l && l.map((a, i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            l && l.map((c, n)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: _skincontractcssmistica.vars.colors.textSecondary,
                     as: "p",
-                    children: a
-                }, i))
+                    children: c
+                }, n))
         ]
     });
-}, L = (param)=>{
-    let { title: o, stackingGroup: e, description: l, "aria-label": a } = param;
+}, q = (param)=>{
+    let { title: a, stackingGroup: e, description: l, "aria-label": c } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        "aria-label": a,
+        "aria-label": c,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: "between",
             alignItems: "center",
             children: [
-                o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingRight: 32,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                         regular: !0,
-                        children: o
+                        children: a
                     })
                 }),
                 e || /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
@@ -90,8 +90,8 @@ const g = (param)=>{
             ]
         })
     });
-}, $ = (param)=>{
-    let { image: o, description: e, "aria-label": l, rightText: a } = param;
+}, z = (param)=>{
+    let { image: a, description: e, "aria-label": l, rightText: c } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         "aria-label": l,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -106,7 +106,7 @@ const g = (param)=>{
                             style: (0, _css.applyCssVars)({
                                 [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                             }),
-                            children: o
+                            children: a
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
@@ -115,26 +115,26 @@ const g = (param)=>{
                         })
                     ]
                 }),
-                a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _blockscssmistica.rightContent,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                         regular: !0,
                         color: _skincontractcssmistica.vars.colors.textBrand,
-                        children: a
+                        children: c
                     })
                 })
             ]
         })
     });
-}, q = (param)=>{
-    let { title: o, description: e, secondaryValue: l, value: a, valueColor: i = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": d } = param;
+}, D = (param)=>{
+    let { title: a, description: e, secondaryValue: l, value: c, valueColor: n = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": d } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
         space: "between",
         alignItems: "flex-end",
         "aria-label": d,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
-                title: o,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
+                title: a,
                 description: e
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -147,76 +147,91 @@ const g = (param)=>{
                         children: l
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
-                        color: i,
-                        children: a
+                        color: n,
+                        children: c
                     })
                 ]
             })
         ]
     });
-}, z = (param)=>{
-    let { headline: o, headings: e, title: l, description: a, "aria-label": i } = param;
+}, E = (param)=>{
+    let { headline: a, headings: e, title: l, pretitle: c, description: n, strikedValue: d, "aria-label": h } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        "aria-label": i,
+        "aria-label": h,
         children: [
-            o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingBottom: 24,
-                children: o
+                children: a
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                space: 2,
+                children: [
+                    c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        regular: !0,
+                        children: c
+                    }),
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        regular: !0,
+                        color: _skincontractcssmistica.vars.colors.textSecondary,
+                        decoration: "line-through",
+                        children: d
+                    })
+                ]
             }),
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                 space: 2,
-                children: e.map((d, u)=>/* @__PURE__ */ {
-                    var _d_valueColor;
+                children: e.map((u, y)=>/* @__PURE__ */ {
+                    var _u_valueColor;
                     return (0, _jsxruntime.jsxs)(_inline.default, {
                         space: 8,
                         alignItems: "baseline",
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                color: (_d_valueColor = d.valueColor) !== null && _d_valueColor !== void 0 ? _d_valueColor : _skincontractcssmistica.vars.colors.textPrimary,
-                                children: d.value
+                                color: (_u_valueColor = u.valueColor) !== null && _u_valueColor !== void 0 ? _u_valueColor : _skincontractcssmistica.vars.colors.textPrimary,
+                                children: u.value
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                children: d.text
+                                children: u.text
                             })
                         ]
-                    }, u);
+                    }, y);
                 })
             }),
-            l || a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            l || n ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingTop: 8,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
                     title: l,
-                    description: a
+                    description: n
                 })
             }) : null
         ]
     });
-}, D = (param)=>{
-    let { title: o, value: e, description: l, valueColor: a = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": i } = param;
+}, F = (param)=>{
+    let { title: a, value: e, description: l, valueColor: c = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        "aria-label": i,
+        "aria-label": n,
         className: _blockscssmistica.column,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                 regular: !0,
                 color: _skincontractcssmistica.vars.colors.textPrimary,
-                children: o
+                children: a
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                color: a,
+                color: c,
                 children: e
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
                 description: l
             })
         ]
     });
-}, E = (param)=>{
-    let { title: o, stackingGroup: e, progressPercent: l, reverse: a, heading: i, description: d, "aria-label": u } = param;
+}, J = (param)=>{
+    let { title: a, stackingGroup: e, progressPercent: l, reverse: c, heading: n, description: d, "aria-label": h } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        "aria-label": u,
+        "aria-label": h,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
             space: 8,
             children: [
@@ -228,7 +243,7 @@ const g = (param)=>{
                             paddingRight: 32,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                 regular: !0,
-                                children: o
+                                children: a
                             })
                         }),
                         e
@@ -237,20 +252,20 @@ const g = (param)=>{
                 l !== void 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_progressbar.ProgressBar, {
                     "aria-hidden": !0,
                     progressPercent: l,
-                    reverse: a
+                    reverse: c
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                     space: 8,
                     alignItems: "baseline",
                     children: [
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                            color: i.valueColor || _skincontractcssmistica.vars.colors.textPrimary,
-                            children: i.value
+                            color: n.valueColor || _skincontractcssmistica.vars.colors.textPrimary,
+                            children: n.value
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
-                            children: i.text
+                            children: n.text
                         })
                     ]
                 }),

package/dist/community/example-component.css-mistica.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "example", {
     }
 });
 require("./example-component.css.ts.vanilla.css-mistica.js");
-var m = "v16_18_2_jbmjs60";
+var m = "v16_20_jbmjs60";

package/dist/counter.css-mistica.js

@@ -45,4 +45,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./counter.css.ts.vanilla.css-mistica.js");
-var n = "v16_18_2_rijsns8 v16_18_2_1y2v1nf8c v16_18_2_1y2v1nfl2 v16_18_2_1y2v1nfif v16_18_2_1y2v1nfji v16_18_2_1y2v1nfjy", r = "v16_18_2_rijsnse v16_18_2_1y2v1nfjh v16_18_2_1y2v1nfjx v16_18_2_1y2v1nfif v16_18_2_1y2v1nfl9 v16_18_2_1y2v1nf75", s = "v16_18_2_rijsns6", i = "v16_18_2_rijsns3 v16_18_2_1y2v1nfl9 v16_18_2_1y2v1nf48 v16_18_2_1y2v1nfil v16_18_2_1y2v1nfll", f = "v16_18_2_rijsnsc v16_18_2_rijsnsa v16_18_2_1y2v1nfif", a = "v16_18_2_rijsnsa v16_18_2_1y2v1nfif", t = "v16_18_2_rijsns4", y = "v16_18_2_rijsns0", o = "v16_18_2_rijsns1", j = "v16_18_2_rijsnsb v16_18_2_rijsnsa v16_18_2_1y2v1nfif", e = "v16_18_2_1y2v1nfie v16_18_2_1y2v1nfik v16_18_2_1y2v1nfit";
+var n = "v16_20_rijsns8 v16_20_1y2v1nf8c v16_20_1y2v1nfl2 v16_20_1y2v1nfif v16_20_1y2v1nfji v16_20_1y2v1nfjy", r = "v16_20_rijsnse v16_20_1y2v1nfjh v16_20_1y2v1nfjx v16_20_1y2v1nfif v16_20_1y2v1nfl9 v16_20_1y2v1nf75", s = "v16_20_rijsns6", i = "v16_20_rijsns3 v16_20_1y2v1nfl9 v16_20_1y2v1nf48 v16_20_1y2v1nfil v16_20_1y2v1nfll", f = "v16_20_rijsnsc v16_20_rijsnsa v16_20_1y2v1nfif", a = "v16_20_rijsnsa v16_20_1y2v1nfif", t = "v16_20_rijsns4", y = "v16_20_rijsns0", o = "v16_20_rijsns1", j = "v16_20_rijsnsb v16_20_rijsnsa v16_20_1y2v1nfif", e = "v16_20_1y2v1nfie v16_20_1y2v1nfik v16_20_1y2v1nfit";

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

@@ -54,6 +54,6 @@ require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./grid-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 e = "v16_18_2_moeazi9 v16_18_2_1y2v1nfiz", r = "v16_18_2_moeazi2 v16_18_2_1y2v1nfie v16_18_2_1y2v1nfik v16_18_2_1y2v1nfiq v16_18_2_1y2v1nfit v16_18_2_1y2v1nfj7 v16_18_2_1y2v1nflr v16_18_2_1y2v1nfn0", f = "v16_18_2_moeazi4 v16_18_2_1y2v1nfie v16_18_2_1y2v1nfik v16_18_2_1y2v1nfj7", o = "v16_18_2_1y2v1nfik v16_18_2_1y2v1nfiq", y = "v16_18_2_moeazi7", m = "v16_18_2_1y2v1nfie", t = "v16_18_2_1y2v1nfif v16_18_2_1y2v1nfnf v16_18_2_1y2v1nfj7 v16_18_2_1y2v1nfjo", z = "v16_18_2_moeazic v16_18_2_1y2v1nfif v16_18_2_1y2v1nflr v16_18_2_1y2v1nfm6 v16_18_2_1y2v1nfj7 v16_18_2_1y2v1nfjo", p = "v16_18_2_moeazi6", s = "v16_18_2_1y2v1nfie", c = "v16_18_2_moeazie", j = {
-    aspectRatio: "var(--v16_18_2_moeazi0)"
-}, l = "v16_18_2_moeazi5";
+var e = "v16_20_moeazi9 v16_20_1y2v1nfiz", r = "v16_20_moeazi2 v16_20_1y2v1nfie v16_20_1y2v1nfik v16_20_1y2v1nfiq v16_20_1y2v1nfit v16_20_1y2v1nfj7 v16_20_1y2v1nflr v16_20_1y2v1nfn0", f = "v16_20_moeazi4 v16_20_1y2v1nfie v16_20_1y2v1nfik v16_20_1y2v1nfj7", o = "v16_20_1y2v1nfik v16_20_1y2v1nfiq", y = "v16_20_moeazi7", m = "v16_20_1y2v1nfie", t = "v16_20_1y2v1nfif v16_20_1y2v1nfnf v16_20_1y2v1nfj7 v16_20_1y2v1nfjo", z = "v16_20_moeazic v16_20_1y2v1nfif v16_20_1y2v1nflr v16_20_1y2v1nfm6 v16_20_1y2v1nfj7 v16_20_1y2v1nfjo", p = "v16_20_moeazi6", s = "v16_20_1y2v1nfie", c = "v16_20_moeazie", j = {
+    aspectRatio: "var(--v16_20_moeazi0)"
+}, l = "v16_20_moeazi5";

package/dist/credit-card-expiration-field.d.ts

@@ -9,5 +9,5 @@ export interface CreditCardExpirationFieldProps extends CommonFormFieldProps {
     validate?: (value: ExpirationDateValue | undefined, rawValue: string) => string | undefined;
     onChangeValue?: (value: ExpirationDateValue) => void;
 }
-declare const CreditCardExpirationField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue, onBlur, value, autoComplete, defaultValue, dataAttributes, ...rest }: CreditCardExpirationFieldProps) => JSX.Element;
+declare const CreditCardExpirationField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, validateOnBlurInsideForm, onChange, onChangeValue, onBlur, value, autoComplete, defaultValue, dataAttributes, ...rest }: CreditCardExpirationFieldProps) => JSX.Element;
 export default CreditCardExpirationField;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return H;
+        return J;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -135,7 +135,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const K = (_param)=>{
+const N = (_param)=>{
     var { inputRef: m, defaultValue: s, value: l } = _param, c = _object_without_properties(_param, [
         "inputRef",
         "defaultValue",
@@ -166,8 +166,8 @@ const K = (_param)=>{
         defaultValue: s === void 0 ? void 0 : u(s),
         ref: m
     }));
-}, N = (_param)=>{
-    var { disabled: m, error: s, helperText: l, name: c, label: f, optional: g, validate: i, onChange: u, onChangeValue: x, onBlur: r, value: e, autoComplete: C = "cc-exp", defaultValue: I, dataAttributes: M } = _param, Y = _object_without_properties(_param, [
+}, 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, [
         "disabled",
         "error",
         "helperText",
@@ -175,6 +175,7 @@ const K = (_param)=>{
         "label",
         "optional",
         "validate",
+        "validateOnBlurInsideForm",
         "onChange",
         "onChangeValue",
         "onBlur",
@@ -183,11 +184,11 @@ const K = (_param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: h, t: E } = (0, _hooks.useTheme)(), { setFormError: k, jumpToNext: v } = (0, _formcontext.useForm)(), p = (t, n)=>{
+    const { texts: h, t: E } = (0, _hooks.useTheme)(), { setFormError: v, jumpToNext: R } = (0, _formcontext.useForm)(), p = (t, n)=>{
         const { month: a, year: o } = t;
         if (!a || !o) return h.formCreditCardExpirationError || E(_texttokens.formCreditCardExpirationError);
-        const d = /* @__PURE__ */ new Date(), R = d.getMonth() + 1, $ = d.getFullYear();
-        return o < $ ? h.formCreditCardExpirationError || E(_texttokens.formCreditCardExpirationError) : o === $ && a < R ? h.formCreditCardExpirationError || E(_texttokens.formCreditCardExpirationError) : i == null ? void 0 : i(t, n);
+        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);
     }, y = (t)=>{
         const [n, a] = String(t).split("/").map((d)=>parseInt(d)), o = Number.isInteger(a) ? 2e3 + a : null;
         return {
@@ -198,35 +199,36 @@ const K = (_param)=>{
     }, D = (0, _formcontext.useFieldProps)({
         name: c,
         label: f,
-        value: e,
-        defaultValue: I,
+        value: C,
+        defaultValue: M,
         processValue: y,
         helperText: l,
         optional: g,
         error: s,
         disabled: m,
-        onBlur: r,
+        onBlur: e,
         validate: p,
-        onChange: u,
-        onChangeValue: x
+        validateOnBlurInsideForm: u,
+        onChange: x,
+        onChangeValue: r
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, Y, D), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, k, 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 ? k({
+                o ? v({
                     name: c,
                     error: o
-                }) : v(c);
+                }) : R(c);
             }
         },
-        autoComplete: C,
-        inputComponent: K,
+        autoComplete: I,
+        inputComponent: N,
         dataAttributes: _object_spread({
             "component-name": "CreditCardExpirationField",
             testid: "CreditCardExpirationField"
-        }, M)
+        }, Y)
     }));
-}, H = N;
+}, J = L;

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

@@ -24,7 +24,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./credit-card-number-field.css.ts.vanilla.css-mistica.js");
-var y = "v16_18_2_yvyo3q0", f = "v16_18_2_yvyo3q5 v16_18_2_yvyo3q2 v16_18_2_1y2v1nfik v16_18_2_1y2v1nfiz v16_18_2_1y2v1nfit v16_18_2_1y2v1nfjo", i = "v16_18_2_yvyo3q2 v16_18_2_1y2v1nfik v16_18_2_1y2v1nfiz v16_18_2_1y2v1nfit v16_18_2_1y2v1nfjo v16_18_2_1y2v1nfif", o = {
-    default: "v16_18_2_yvyo3q7 v16_18_2_1y2v1nfie v16_18_2_yvyo3q8",
-    backface: "v16_18_2_yvyo3q7 v16_18_2_1y2v1nfie v16_18_2_yvyo3q9"
+var y = "v16_20_yvyo3q0", f = "v16_20_yvyo3q5 v16_20_yvyo3q2 v16_20_1y2v1nfik v16_20_1y2v1nfiz v16_20_1y2v1nfit v16_20_1y2v1nfjo", i = "v16_20_yvyo3q2 v16_20_1y2v1nfik v16_20_1y2v1nfiz v16_20_1y2v1nfit v16_20_1y2v1nfjo v16_20_1y2v1nfif", o = {
+    default: "v16_20_yvyo3q7 v16_20_1y2v1nfie v16_20_yvyo3q8",
+    backface: "v16_20_yvyo3q7 v16_20_1y2v1nfie v16_20_yvyo3q9"
 };

package/dist/credit-card-number-field.d.ts

@@ -5,5 +5,5 @@ interface CreditCardNumberFieldProps extends CommonFormFieldProps {
     acceptedCards?: CardOptions;
     onChangeValue?: (value: string, rawValue: string) => void;
 }
-declare const CreditCardNumberField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue, onBlur, acceptedCards, value, autoComplete, defaultValue, dataAttributes, ...rest }: CreditCardNumberFieldProps) => JSX.Element;
+declare const CreditCardNumberField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, validateOnBlurInsideForm, onChange, onChangeValue, onBlur, acceptedCards, value, autoComplete, defaultValue, dataAttributes, ...rest }: CreditCardNumberFieldProps) => JSX.Element;
 export default CreditCardNumberField;

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

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

package/dist/cvv-field.d.ts

@@ -5,5 +5,5 @@ export interface CvvFieldProps extends CommonFormFieldProps {
     acceptedCards?: CardOptions;
     onChangeValue?: (value: string, rawValue: string) => void;
 }
-declare const CvvField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, onChange, onChangeValue, onBlur, acceptedCards, maxLength, value, autoComplete, defaultValue, dataAttributes, ...rest }: CvvFieldProps) => JSX.Element;
+declare const CvvField: ({ disabled, error, helperText, name, label, optional, validate: validateProp, validateOnBlurInsideForm, onChange, onChangeValue, onBlur, acceptedCards, maxLength, value, autoComplete, defaultValue, dataAttributes, ...rest }: CvvFieldProps) => JSX.Element;
 export default CvvField;