@telefonica/mistica 16.0.0 → 16.1.0

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

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

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

@@ -78,76 +78,76 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as o, jsxs as j } from "react/jsx-runtime";
+import { jsx as o, jsxs as D } from "react/jsx-runtime";
 import * as l from "react";
-import { useForm as D, useFieldProps as L } from "./form-context.js";
-import { useTheme as O } from "./hooks.js";
-import { getCreditCardNumberLength as I, isAmericanExpress as b, isVisa as A, isMasterCard as E, isValidCreditCardNumber as U } from "./utils/credit-card.js";
-import { TextFieldBaseAutosuggest as _ } from "./text-field-base.js";
-import w from "./generated/mistica-icons/icon-credit-card-visa-regular.js";
-import P from "./icons/icon-visa.js";
-import $ from "./icons/icon-mastercard.js";
-import q from "./icons/icon-amex.js";
-import { useRifm as G } from "rifm";
-import { createChangeEvent as H } from "./utils/dom.js";
-import { combineRefs as J } from "./utils/common.js";
-import { flip as K, variants as Q, flipFront as W, flipBack as X } from "./credit-card-number-field.css-mistica.js";
-import { vars as Y } from "./skins/skin-contract.css-mistica.js";
+import { useForm as L, useFieldProps as O } from "./form-context.js";
+import { useTheme as U } from "./hooks.js";
+import { getCreditCardNumberLength as b, isAmericanExpress as A, isVisa as x, isMasterCard as I, isValidCreditCardNumber as _ } from "./utils/credit-card.js";
+import { TextFieldBaseAutosuggest as P } from "./text-field-base.js";
+import V from "./generated/mistica-icons/icon-credit-card-visa-regular.js";
+import $ from "./icons/icon-visa.js";
+import q from "./icons/icon-mastercard.js";
+import G from "./icons/icon-amex.js";
+import { useRifm as H } from "rifm";
+import { createChangeEvent as J } from "./utils/dom.js";
+import { combineRefs as K } from "./utils/common.js";
+import { flip as Q, variants as W, flipFront as X, flipBack as Y } from "./credit-card-number-field.css-mistica.js";
+import { vars as Z } from "./skins/skin-contract.css-mistica.js";
 import { iconSize as p } from "./icon-button.css-mistica.js";
-import { formCreditCardNumberError as Z, formFieldErrorIsMandatory as v } from "./text-tokens.js";
+import { formCreditCardNumberError as v } from "./text-tokens.js";
 const rr = (r)=>{
-    var t;
+    var i;
     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;
+    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: t, onChange: e } = _param, a = _object_without_properties(_param, [
+    var { inputRef: r, value: n, defaultValue: i, onChange: e } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange"
     ]);
-    const [c, T] = l.useState(t !== null && t !== void 0 ? t : ""), m = l.useRef(null), f = typeof n < "u", u = f ? n : c, g = l.useCallback((C)=>{
-        f || T(C), m.current && (e == null || e(H(m.current, C)));
+    const [N, m] = l.useState(i !== null && i !== void 0 ? i : ""), f = l.useRef(null), u = typeof n < "u", T = u ? n : N, d = l.useCallback((g)=>{
+        u || m(g), f.current && (e == null || e(J(f.current, g)));
     }, [
-        f,
+        u,
         e
-    ]), d = G({
+    ]), c = H({
         format: rr,
-        value: u,
-        onChange: g,
+        value: T,
+        onChange: d,
         accept: /[\d]+/g
     });
     return /* @__PURE__ */ o("input", _object_spread_props(_object_spread({}, a), {
         type: "text",
         inputMode: "decimal",
-        maxLength: I(d.value) + 3,
-        onChange: d.onChange,
-        value: d.value,
-        ref: J(r, m)
+        maxLength: b(c.value) + 3,
+        onChange: c.onChange,
+        value: c.value,
+        ref: K(r, f)
     }));
-}, tr = (r)=>A(r) ? /* @__PURE__ */ o(P, {
+}, tr = (r)=>x(r) ? /* @__PURE__ */ o($, {
         size: p.default
-    }) : E(r) ? /* @__PURE__ */ o($, {
+    }) : I(r) ? /* @__PURE__ */ o(q, {
         size: p.default
-    }) : b(r) ? /* @__PURE__ */ o(q, {
+    }) : A(r) ? /* @__PURE__ */ o(G, {
         size: p.default
     }) : null, ir = {
     showBackface: !1,
-    animationTarget: /* @__PURE__ */ o(w, {
+    animationTarget: /* @__PURE__ */ o(V, {
         size: p.default
     }),
     isAnimating: !1
 }, nr = (r, param)=>{
-    let { type: n, value: t } = param;
+    let { type: n, value: i } = param;
     if (n === "INPUT") {
-        const e = tr(t);
+        const e = tr(i);
         if (e && !r.showBackface) return {
             animationTarget: e,
             showBackface: !0,
             isAnimating: !0
         };
-        if (!A(t) && !E(t) && !b(t) && r.showBackface) return {
+        if (!x(i) && !I(i) && !A(i) && r.showBackface) return {
             animationTarget: r.animationTarget,
             showBackface: !1,
             isAnimating: !0
@@ -161,7 +161,7 @@ const rr = (r)=>{
     }) : r;
 }, or = (param)=>{
     let { value: r } = param;
-    const [{ showBackface: n, animationTarget: t, isAnimating: e }, a] = l.useReducer(nr, ir);
+    const [{ showBackface: n, animationTarget: i, isAnimating: e }, a] = l.useReducer(nr, ir);
     return l.useEffect(()=>{
         a({
             type: "INPUT",
@@ -170,37 +170,38 @@ const rr = (r)=>{
     }, [
         r
     ]), /* @__PURE__ */ o("div", {
-        className: K,
-        children: /* @__PURE__ */ j("div", {
-            className: Q[n ? "backface" : "default"],
+        className: Q,
+        children: /* @__PURE__ */ D("div", {
+            className: W[n ? "backface" : "default"],
             onTransitionEnd: ()=>e && a({
                     type: "TRANSITION_END"
                 }),
             children: [
                 /* @__PURE__ */ o("div", {
-                    className: W,
-                    children: /* @__PURE__ */ o(w, {
+                    className: X,
+                    children: /* @__PURE__ */ o(V, {
                         size: p.default,
-                        color: Y.colors.neutralMedium
+                        color: Z.colors.neutralMedium
                     })
                 }),
                 /* @__PURE__ */ o("div", {
-                    className: X,
-                    children: t
+                    className: Y,
+                    children: i
                 })
             ]
         })
     });
 }, sr = (_param)=>{
-    var { disabled: r, error: n, helperText: t, name: e, optional: a, validate: c, onChange: T, onChangeValue: m, onBlur: f, acceptedCards: u = {
+    var { disabled: r, error: n, helperText: i, name: e, label: a, optional: N, validate: m, onChange: f, onChangeValue: u, onBlur: T, acceptedCards: d = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    }, value: g, autoComplete: d = "cc-number", defaultValue: C, dataAttributes: R } = _param, z = _object_without_properties(_param, [
+    }, value: c, autoComplete: g = "cc-number", defaultValue: w, dataAttributes: R } = _param, z = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -212,44 +213,45 @@ const rr = (r)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: x, t: k } = O(), { jumpToNext: S, rawValues: y, setFormError: M } = D(), h = (i, N)=>{
-        const s = x.formCreditCardNumberError || k(Z);
-        return i ? b(i) && !u.americanExpress || A(i) && !u.visa || E(i) && !u.masterCard || !U(i) || I(i) !== i.length ? s : c == null ? void 0 : c(i, N) : a ? "" : x.formFieldErrorIsMandatory || k(v);
-    }, B = (i)=>i.replace(/\s/g, ""), V = L({
+    const { texts: F, t: S } = U(), { jumpToNext: j, rawValues: y, setFormError: M } = L(), C = (t, h)=>{
+        const s = F.formCreditCardNumberError || S(v);
+        return A(t) && !d.americanExpress || x(t) && !d.visa || I(t) && !d.masterCard || !_(t) || b(t) !== (t == null ? void 0 : t.length) ? s : m == null ? void 0 : m(t, h);
+    }, E = (t)=>t.replace(/\s/g, ""), k = O({
         name: e,
-        value: g,
-        defaultValue: C,
-        processValue: B,
-        helperText: t,
-        optional: a,
+        label: a,
+        value: c,
+        defaultValue: w,
+        processValue: E,
+        helperText: i,
+        optional: N,
         error: n,
         disabled: r,
-        onBlur: f,
-        validate: h,
-        onChange: T,
-        onChangeValue: m
+        onBlur: T,
+        validate: C,
+        onChange: f,
+        onChangeValue: u
     });
     var _ref;
-    return /* @__PURE__ */ o(_, _object_spread_props(_object_spread({}, z, V), {
-        onChange: (i)=>{
-            V.onChange(i);
-            const N = i.currentTarget.value, s = B(N);
-            if (s.length >= I(s)) {
-                const F = h == null ? void 0 : h(s, N);
-                F ? M({
+    return /* @__PURE__ */ o(P, _object_spread_props(_object_spread({}, z, k), {
+        onChange: (t)=>{
+            k.onChange(t);
+            const h = t.currentTarget.value, s = E(h);
+            if (s.length >= b(s)) {
+                const B = C == null ? void 0 : C(s, h);
+                B ? M({
                     name: e,
-                    error: F
-                }) : S(e);
+                    error: B
+                }) : j(e);
             }
         },
         inputComponent: er,
-        autoComplete: d,
+        autoComplete: g,
         endIcon: /* @__PURE__ */ o(or, {
-            value: (_ref = g !== null && g !== void 0 ? g : y[e]) !== null && _ref !== void 0 ? _ref : ""
+            value: (_ref = c !== null && c !== void 0 ? c : y[e]) !== null && _ref !== void 0 ? _ref : ""
         }),
         dataAttributes: _object_spread({
             "component-name": "CreditCardNumberField"
         }, R)
     }));
-}, Er = sr;
-export { Er as default };
+}, Ir = sr;
+export { Ir as default };

package/dist-es/cvv-field.js

@@ -78,77 +78,77 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as r, Fragment as R, jsxs as C } from "react/jsx-runtime";
-import * as H from "react";
-import { useTheme as V } from "./hooks.js";
-import k from "./icons/icon-cvv-visa-mc.js";
-import D from "./icons/icon-cvv-amex.js";
-import N from "./popover.js";
-import q from "./generated/mistica-icons/icon-information-regular.js";
-import { useForm as G, useFieldProps as J } from "./form-context.js";
-import { TextFieldBaseAutosuggest as K } from "./text-field-base.js";
-import { IntegerInput as P } from "./integer-field.js";
-import F from "./inline.js";
-import Q from "./stack.js";
-import U from "./box.js";
-import W from "./divider.js";
-import M from "./text.js";
-import { vars as X } from "./skins/skin-contract.css-mistica.js";
-import { pxToRem as Y } from "./utils/css.js";
-import { iconButtonSize as c } from "./text-field-base.css-mistica.js";
-import Z from "./touchable.js";
-import { formCreditCardCvvTooltipVisaMcButtonClose as _, formCreditCardCvvTooltipVisaMcButtonOpen as L, formCreditCardCvvTooltipVisaMc as rr, formCreditCardCvvTooltipAmex as or, formFieldErrorIsMandatory as tr, formCreditCardCvvError as er } from "./text-tokens.js";
-const ir = (param)=>{
+import { jsx as o, Fragment as H, jsxs as d } from "react/jsx-runtime";
+import * as k from "react";
+import { useTheme as F } from "./hooks.js";
+import D from "./icons/icon-cvv-visa-mc.js";
+import N from "./icons/icon-cvv-amex.js";
+import q from "./popover.js";
+import G from "./generated/mistica-icons/icon-information-regular.js";
+import { useForm as J, useFieldProps as K } from "./form-context.js";
+import { TextFieldBaseAutosuggest as P } from "./text-field-base.js";
+import { IntegerInput as Q } from "./integer-field.js";
+import I from "./inline.js";
+import U from "./stack.js";
+import W from "./box.js";
+import X from "./divider.js";
+import V from "./text.js";
+import { vars as Y } from "./skins/skin-contract.css-mistica.js";
+import { pxToRem as Z } from "./utils/css.js";
+import { iconButtonSize as m } from "./text-field-base.css-mistica.js";
+import _ from "./touchable.js";
+import { formCreditCardCvvTooltipVisaMcButtonClose as L, formCreditCardCvvTooltipVisaMcButtonOpen as oo, formCreditCardCvvTooltipVisaMc as ro, formCreditCardCvvTooltipAmex as to, formCreditCardCvvError as eo } from "./text-tokens.js";
+const io = (param)=>{
     let { acceptedCards: t } = param;
-    const { texts: i, t: n } = V();
-    return /* @__PURE__ */ r(R, {
-        children: /* @__PURE__ */ r(U, {
+    const { texts: i, t: n } = F();
+    return /* @__PURE__ */ o(H, {
+        children: /* @__PURE__ */ o(W, {
             padding: 8,
-            children: /* @__PURE__ */ C(Q, {
+            children: /* @__PURE__ */ d(U, {
                 space: 8,
                 children: [
-                    /* @__PURE__ */ C(F, {
+                    /* @__PURE__ */ d(I, {
                         space: 16,
                         alignItems: "center",
                         children: [
-                            /* @__PURE__ */ r(k, {
+                            /* @__PURE__ */ o(D, {
                                 size: 48,
                                 role: "img"
                             }),
-                            /* @__PURE__ */ r(M, {
-                                children: i.formCreditCardCvvTooltipVisaMc || n(rr)
+                            /* @__PURE__ */ o(V, {
+                                children: i.formCreditCardCvvTooltipVisaMc || n(ro)
                             })
                         ]
                     }),
-                    /* @__PURE__ */ r(W, {}),
-                    (t == null ? void 0 : t.americanExpress) && /* @__PURE__ */ C(F, {
+                    /* @__PURE__ */ o(X, {}),
+                    (t == null ? void 0 : t.americanExpress) && /* @__PURE__ */ d(I, {
                         space: 16,
                         alignItems: "center",
                         children: [
-                            /* @__PURE__ */ r(D, {
+                            /* @__PURE__ */ o(N, {
                                 size: 48,
                                 role: "img"
                             }),
-                            /* @__PURE__ */ r(M, {
-                                children: i.formCreditCardCvvTooltipAmex || n(or)
-                            }),
-                            ")"
+                            /* @__PURE__ */ o(V, {
+                                children: i.formCreditCardCvvTooltipAmex || n(to)
+                            })
                         ]
                     })
                 ]
             })
         })
     });
-}, nr = (_param)=>{
-    var { disabled: t, error: i, helperText: n, name: a, optional: v, validate: p, onChange: B, onChangeValue: E, onBlur: y, acceptedCards: z = {
+}, no = (_param)=>{
+    var { disabled: t, error: i, helperText: n, name: l, label: M, optional: B, validate: c, onChange: z, onChangeValue: A, onBlur: E, acceptedCards: $ = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    }, maxLength: f = 4, value: A, autoComplete: $ = "cc-csc", defaultValue: j, dataAttributes: O } = _param, S = _object_without_properties(_param, [
+    }, maxLength: p = 4, value: j, autoComplete: y = "cc-csc", defaultValue: O, dataAttributes: S } = _param, b = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
         "name",
+        "label",
         "optional",
         "validate",
         "onChange",
@@ -161,70 +161,71 @@ const ir = (param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const { texts: s, t: m } = V(), { setFormError: b, jumpToNext: w } = G(), [d, u] = H.useState(!1), h = (o, l)=>o ? o.length !== f ? s.formCreditCardCvvError || m(er) : p == null ? void 0 : p(o, l) : v ? "" : s.formFieldErrorIsMandatory || m(tr), g = (o)=>o, T = J({
-        name: a,
-        value: A,
-        defaultValue: j,
-        processValue: g,
+    const { texts: a, t: C } = F(), { setFormError: w, jumpToNext: R } = J(), [f, v] = k.useState(!1), u = (r, s)=>r.length !== p ? a.formCreditCardCvvError || C(eo) : c == null ? void 0 : c(r, s), h = (r)=>r, g = K({
+        name: l,
+        label: M,
+        value: j,
+        defaultValue: O,
+        processValue: h,
         helperText: n,
-        optional: v,
+        optional: B,
         error: i,
         disabled: t,
-        onBlur: y,
-        validate: h,
-        onChange: B,
-        onChangeValue: E
-    }), e = Y(16);
-    return /* @__PURE__ */ r(K, _object_spread_props(_object_spread({}, S, T), {
-        maxLength: f,
-        onChange: (o)=>{
-            T.onChange(o);
-            const l = o.currentTarget.value, x = g(l);
-            if (x.length === f) {
-                const I = h(x, l);
-                I ? b({
-                    name: a,
-                    error: I
-                }) : w(a);
+        onBlur: E,
+        validate: u,
+        onChange: z,
+        onChangeValue: A
+    }), e = Z(16);
+    return /* @__PURE__ */ o(P, _object_spread_props(_object_spread({}, b, g), {
+        maxLength: p,
+        onChange: (r)=>{
+            g.onChange(r);
+            const s = r.currentTarget.value, T = h(s);
+            if (T.length === p) {
+                const x = u(T, s);
+                x ? w({
+                    name: l,
+                    error: x
+                }) : R(l);
             }
         },
-        endIcon: /* @__PURE__ */ r(N, {
+        endIcon: /* @__PURE__ */ o(q, {
             position: "top",
-            open: d,
-            children: /* @__PURE__ */ r(ir, {
-                acceptedCards: z
+            open: f,
+            children: /* @__PURE__ */ o(io, {
+                acceptedCards: $
             }),
-            onClose: ()=>u(!1),
-            target: /* @__PURE__ */ r("div", {
+            onClose: ()=>v(!1),
+            target: /* @__PURE__ */ o("div", {
                 style: {
                     width: e,
                     height: e
                 },
-                children: /* @__PURE__ */ r(Z, {
+                children: /* @__PURE__ */ o(_, {
                     style: {
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "center",
-                        width: c,
-                        height: c,
+                        width: m,
+                        height: m,
                         position: "relative",
-                        left: `calc(-1 * (${c} - ${e}) / 2)`,
-                        top: `calc(-1 * (${c} - ${e}) / 2)`
+                        left: `calc(-1 * (${m} - ${e}) / 2)`,
+                        top: `calc(-1 * (${m} - ${e}) / 2)`
                     },
-                    onPress: ()=>u(!d),
-                    "aria-label": d ? s.formCreditCardCvvTooltipVisaMcButtonClose || m(_) : s.formCreditCardCvvTooltipVisaMcButtonOpen || m(L),
-                    children: /* @__PURE__ */ r(q, {
+                    onPress: ()=>v(!f),
+                    "aria-label": f ? a.formCreditCardCvvTooltipVisaMcButtonClose || C(L) : a.formCreditCardCvvTooltipVisaMcButtonOpen || C(oo),
+                    children: /* @__PURE__ */ o(G, {
                         size: e,
-                        color: X.colors.neutralMedium
+                        color: Y.colors.neutralMedium
                     })
                 })
             })
         }),
-        autoComplete: $,
-        inputComponent: P,
+        autoComplete: y,
+        inputComponent: Q,
         dataAttributes: _object_spread({
             "component-name": "CvvField"
-        }, O)
+        }, S)
     }));
-}, Br = nr;
-export { Br as default };
+}, zo = no;
+export { zo as default };