@telefonica/mistica 14.14.0 → 14.16.0

package/dist-es/carousel.css-mistica.js

@@ -2,10 +2,10 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./grid-layout.css.ts.vanilla.css-mistica.js";
 import "./carousel.css.ts.vanilla.css-mistica.js";
-var y = "_1abcu71 _1y2v1nf8g _1y2v1nf8v _1y2v1nfa3 _1y2v1nf44", f = "_1abcu72 _1abcu71 _1y2v1nf8g _1y2v1nf8v _1y2v1nfa3 _1y2v1nf45", r = "_1abcu72 _1abcu71 _1y2v1nf8g _1y2v1nf8v _1y2v1nfa3 _1y2v1nf4k", e = "_1abcu75 _1abcu71 _1y2v1nf8g _1y2v1nf8v _1y2v1nfa3", u = "_1abcu7l _1abcu7b _1y2v1nf64 _1y2v1nf96", b = "_1y2v1nf64 _1y2v1nf6d", c = "_1y2v1nf9i _1y2v1nf5z", l = "_1abcu7o", t = "_1abcu7s _1abcu7q _1abcu7d _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfa3 _1y2v1nf31 _1y2v1nf8l _1y2v1nf90 _1y2v1nfa1 _1y2v1nf60", o = "_1abcu7r _1abcu7q _1abcu7d _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfa3 _1y2v1nf31 _1y2v1nf8l _1y2v1nf90 _1y2v1nfa1 _1y2v1nf60", s = "_1abcu7m", i = "_1abcu7n", d = "_1abcu7v _1abcu7b _1y2v1nf64 _1y2v1nf96", m = "_1abcu713 _1y2v1nf60 _1y2v1nfby _1y2v1nf64 _1y2v1nf6d _1y2v1nf8b", w = "_1y2v1nf5z", g = "_1abcu7x _1y2v1nf8b _1y2v1nf6m", h = "_1abcu711 _1abcu7q _1abcu7d _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfa3 _1y2v1nf31 _1y2v1nf8l _1y2v1nf90 _1y2v1nfa1 _1y2v1nf60 _1y2v1nfbk", P = "_1abcu7z _1abcu7q _1abcu7d _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfa3 _1y2v1nf31 _1y2v1nf8l _1y2v1nf90 _1y2v1nfa1 _1y2v1nf60 _1y2v1nfb6", p = {
+var f = "_1abcu71 _1y2v1nf8k _1y2v1nf90 _1y2v1nfab _1y2v1nf44", y = "_1abcu72 _1abcu71 _1y2v1nf8k _1y2v1nf90 _1y2v1nfab _1y2v1nf45", r = "_1abcu72 _1abcu71 _1y2v1nf8k _1y2v1nf90 _1y2v1nfab _1y2v1nf4k", b = "_1abcu75 _1abcu71 _1y2v1nf8k _1y2v1nf90 _1y2v1nfab", e = "_1abcu7l _1abcu7b _1y2v1nf64 _1y2v1nf9c", u = "_1y2v1nf64 _1y2v1nf6d", c = "_1y2v1nf9p _1y2v1nf5z", t = "_1abcu7o", o = "_1abcu7s _1abcu7q _1abcu7d _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab _1y2v1nf31 _1y2v1nf8q _1y2v1nf96 _1y2v1nfa9 _1y2v1nf60", l = "_1abcu7r _1abcu7q _1abcu7d _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab _1y2v1nf31 _1y2v1nf8q _1y2v1nf96 _1y2v1nfa9 _1y2v1nf60", s = "_1abcu7m", i = "_1abcu7n", d = "_1abcu7v _1abcu7b _1y2v1nf64 _1y2v1nf9c", m = "_1abcu713 _1y2v1nf60 _1y2v1nfca _1y2v1nf64 _1y2v1nf6d _1y2v1nf8f", w = "_1y2v1nf5z", h = "_1abcu7x _1y2v1nf8f _1y2v1nf6m", p = "_1abcu711 _1abcu7q _1abcu7d _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab _1y2v1nf31 _1y2v1nf8q _1y2v1nf96 _1y2v1nfa9 _1y2v1nf60 _1y2v1nfbv", q = "_1abcu7z _1abcu7q _1abcu7d _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab _1y2v1nf31 _1y2v1nf8q _1y2v1nf96 _1y2v1nfa9 _1y2v1nf60 _1y2v1nfbg", P = {
     itemsPerPageMobile: "var(--_1abcu7g)",
     itemsPerPageTablet: "var(--_1abcu7h)",
     itemsPerPageDesktop: "var(--_1abcu7i)",
     gap: "var(--_1abcu7j)"
 };
-export { y as bullet, f as bulletActive, r as bulletActiveInverse, e as bulletInverse, u as carousel, b as carouselBullets, c as carouselContainer, l as carouselItem, t as carouselNextArrowButton, o as carouselPrevArrowButton, s as carouselWithScroll, i as centeredCarousel, d as slideshow, m as slideshowBullets, w as slideshowContainer, g as slideshowItem, h as slideshowNextArrowButton, P as slideshowPrevArrowButton, p as vars };
+export { f as bullet, y as bulletActive, r as bulletActiveInverse, b as bulletInverse, e as carousel, u as carouselBullets, c as carouselContainer, t as carouselItem, o as carouselNextArrowButton, l as carouselPrevArrowButton, s as carouselWithScroll, i as centeredCarousel, d as slideshow, m as slideshowBullets, w as slideshowContainer, h as slideshowItem, p as slideshowNextArrowButton, q as slideshowPrevArrowButton, P as vars };

package/dist-es/checkbox.css-mistica.js

@@ -1,8 +1,8 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./checkbox.css.ts.vanilla.css-mistica.js";
 var n = {
-    ios: "_1rz9b15 _1rz9b14 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfae _1y2v1nf30",
-    rest: "_1rz9b16 _1rz9b14 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfae _1y2v1nf30",
-    checked: "_1rz9b17 _1rz9b14 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfae _1y2v1nf30"
-}, r = "_1rz9b19 _1y2v1nf66", f = "_1rz9b1a", y = "_1rz9b11 _1y2v1nf67", b = "_1rz9b12", e = "_1rz9b1b";
-export { n as boxVariant, r as check, f as checkChecked, y as checkboxContainer, b as checkboxContainerDisabled, e as disabled };
+    ios: "_1rz9b16 _1rz9b15 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfam _1y2v1nf30",
+    rest: "_1rz9b17 _1rz9b15 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfam _1y2v1nf30",
+    checked: "_1rz9b18 _1rz9b15 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6m _1y2v1nfam _1y2v1nf30"
+}, r = "_1rz9b1a _1y2v1nf66", f = "_1rz9b1b", y = "_1rz9b12 _1rz9b11 _1y2v1nf67", b = "_1rz9b13 _1rz9b11 _1y2v1nf67", a = "_1rz9b1c";
+export { n as boxVariant, r as check, f as checkChecked, y as checkboxContainer, b as checkboxContainerDisabled, a as disabled };

package/dist-es/checkbox.js

@@ -52,18 +52,18 @@ function _object_spread_props(target, source) {
 }
 import { jsx as a, jsxs as w } from "react/jsx-runtime";
 import * as I from "react";
-import { SPACE as N } from "./utils/key-codes.js";
-import { useControlProps as A } from "./form-context.js";
-import D from "./inline.js";
+import { SPACE as A } from "./utils/key-codes.js";
+import { useControlProps as D } from "./form-context.js";
+import L from "./inline.js";
 import { Text3 as m } from "./text.js";
-import { useAriaId as L, useTheme as P } from "./hooks.js";
+import { useAriaId as N, useTheme as P } from "./hooks.js";
 import n from "classnames";
 import { getPrefixedDataAttributes as S } from "./utils/dom.js";
-import { checkboxContainer as E, checkboxContainerDisabled as V, disabled as k, check as f, checkChecked as u, boxVariant as j } from "./checkbox.css-mistica.js";
-import { vars as v } from "./skins/skin-contract.css-mistica.js";
+import { checkboxContainerDisabled as E, checkboxContainer as V, disabled as v, check as f, checkChecked as u, boxVariant as j } from "./checkbox.css-mistica.js";
+import { vars as k } from "./skins/skin-contract.css-mistica.js";
 const z = (param)=>{
     let { isChecked: e , disabled: o  } = param;
-    const { isIos: l  } = P(), c = l ? /* @__PURE__ */ a("svg", {
+    const { isIos: l  } = P(), r = l ? /* @__PURE__ */ a("svg", {
         viewBox: "0 0 10 8",
         width: "10",
         height: "8",
@@ -72,7 +72,7 @@ const z = (param)=>{
         }),
         children: /* @__PURE__ */ a("path", {
             d: "M2.659 7.724c.33.366.92.368 1.254.005L9.79 1.336A.782.782 0 009.719.202a.858.858 0 00-1.178.069l-5.236 5.72-1.841-2.038a.857.857 0 00-1.177-.078.782.782 0 00-.082 1.133l2.454 2.716z",
-            fill: v.colors.inverse
+            fill: k.colors.inverse
         })
     }) : /* @__PURE__ */ a("svg", {
         viewBox: "0 0 14 10",
@@ -83,17 +83,17 @@ const z = (param)=>{
         }),
         children: /* @__PURE__ */ a("path", {
             d: "M5 10L0 5.192l1.4-1.346L5 7.308 12.6 0 14 1.346z",
-            fill: v.colors.inverse
+            fill: k.colors.inverse
         })
     });
     return /* @__PURE__ */ a("div", {
         className: n(j[e ? "checked" : l ? "ios" : "rest"], {
-            [k]: o
+            [v]: o
         }),
-        children: c
+        children: r
     });
 }, B = (e)=>{
-    const o = L(e["aria-labelledby"]), l = e["aria-label"], c = l || e["aria-labelledby"], { defaultValue: x , value: t , onChange: s , focusableRef: C , disabled: i  } = A({
+    const o = N(e["aria-labelledby"]), l = e["aria-label"], r = l || e["aria-labelledby"], { defaultValue: x , value: t , onChange: s , focusableRef: C , disabled: i  } = D({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
@@ -101,8 +101,8 @@ const z = (param)=>{
         disabled: e.disabled
     }), [d, g] = I.useState(!!x), h = ()=>{
         t === void 0 ? (g(!d), s(!d)) : s(!t);
-    }, y = (r)=>{
-        r.keyCode === N && (r.preventDefault(), r.stopPropagation(), h());
+    }, y = (c)=>{
+        c.keyCode === A && (c.preventDefault(), c.stopPropagation(), h());
     }, b = /* @__PURE__ */ a(z, {
         disabled: i,
         isChecked: t !== null && t !== void 0 ? t : d
@@ -114,10 +114,12 @@ const z = (param)=>{
         role: "checkbox",
         "aria-checked": t !== null && t !== void 0 ? t : d,
         onKeyDown: i ? void 0 : y,
-        onClick: i ? void 0 : h,
+        onClick: (c)=>{
+            c.stopPropagation(), i || h();
+        },
         tabIndex: i ? void 0 : 0,
         ref: C,
-        className: E,
+        className: i ? E : V,
         "aria-label": l,
         "aria-labelledby": l ? void 0 : o,
         "aria-disabled": i
@@ -127,9 +129,8 @@ const z = (param)=>{
             labelId: o,
             checked: t !== null && t !== void 0 ? t : d,
             disabled: !!i
-        }) : /* @__PURE__ */ w(D, {
+        }) : /* @__PURE__ */ w(L, {
             space: 16,
-            className: i ? V : "",
             children: [
                 /* @__PURE__ */ a(m, {
                     regular: !0,
@@ -146,9 +147,9 @@ const z = (param)=>{
                     regular: !0,
                     as: "div",
                     id: o,
-                    role: c ? "presentation" : void 0,
+                    role: r ? "presentation" : void 0,
                     children: /* @__PURE__ */ a("span", {
-                        className: i ? k : "",
+                        className: i ? v : "",
                         children: e.children
                     })
                 })

package/dist-es/chip.css-mistica.js

@@ -1,11 +1,11 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./chip.css.ts.vanilla.css-mistica.js";
-var c = "_1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nfa2 _1y2v1nf5y", t = {
+var c = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nfaa _1y2v1nf5y", t = {
     light: "cc7htnb cc7htn9",
     dark: "cc7htnc cc7htn9"
 }, f = {
-    default: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa1 _1y2v1nf31 _1y2v1nf1w",
-    overAlternative: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa1 _1y2v1nf38 _1y2v1nf1w",
-    active: "cc7htn8 cc7htn2 cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa1 _1y2v1nf16 _1y2v1nf5k"
+    default: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa9 _1y2v1nf31 _1y2v1nf1w",
+    overAlternative: "cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa9 _1y2v1nf38 _1y2v1nf1w",
+    active: "cc7htn8 cc7htn2 cc7htn1 _1y2v1nf65 _1y2v1nf6d _1y2v1nf6j _1y2v1nfa9 _1y2v1nf16 _1y2v1nf5k"
 }, y = "cc7htnd", _ = "cc7htne";
 export { c as button, t as chipInteractiveVariants, f as chipVariants, y as icon, _ as iconActive };

package/dist-es/chip.js

@@ -50,88 +50,104 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as u, Fragment as k, jsx as t } from "react/jsx-runtime";
-import P from "classnames";
-import { useTheme as T } from "./hooks.js";
+import { jsxs as u, Fragment as C, jsx as t } from "react/jsx-runtime";
+import E from "classnames";
+import { useTheme as N, useScreenSize as V } from "./hooks.js";
+import x from "./badge.js";
 import n from "./box.js";
-import { Text2 as A } from "./text.js";
-import E from "./icon-button.js";
-import I from "./generated/mistica-icons/icon-close-regular.js";
-import { pxToRem as V } from "./utils/css.js";
-import { iconActive as w, icon as y, chipVariants as a, button as B, chipInteractiveVariants as N } from "./chip.css-mistica.js";
-import { vars as R } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as h } from "./utils/dom.js";
-import { useThemeVariant as j } from "./theme-variant-context.js";
-import { BaseTouchable as c } from "./touchable.js";
-const z = (e)=>{
-    const { Icon: i , children: v , id: g , dataAttributes: l , active: o , onClose: s  } = e, { texts: b , isDarkMode: C  } = T(), m = j() === "alternative", d = /* @__PURE__ */ u(k, {
+import { Text2 as y } from "./text.js";
+import z from "./icon-button.js";
+import j from "./generated/mistica-icons/icon-close-regular.js";
+import { pxToRem as p } from "./utils/css.js";
+import { iconActive as O, icon as S, chipVariants as i, button as D, chipInteractiveVariants as L } from "./chip.css-mistica.js";
+import { vars as M } from "./skins/skin-contract.css-mistica.js";
+import { getPrefixedDataAttributes as g } from "./utils/dom.js";
+import { useThemeVariant as W } from "./theme-variant-context.js";
+import { BaseTouchable as v } from "./touchable.js";
+const F = (e)=>{
+    const { Icon: c , children: P , id: k , dataAttributes: l , active: s , badge: r , onClose: d  } = e, { texts: T , isDarkMode: A , textPresets: I  } = N(), m = W() === "alternative", { isTabletOrSmaller: a  } = V(), f = c ? a ? 16 : 8 : a ? 20 : 12, R = a ? 20 : 12, b = a ? 16 : 8, w = ()=>r ? /* @__PURE__ */ t(C, {
+            children: r === !0 ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ t(x, {
+                value: r
+            })
+        }) : null, h = /* @__PURE__ */ u(C, {
         children: [
-            i && /* @__PURE__ */ t(n, {
+            c && /* @__PURE__ */ t(n, {
                 paddingRight: 4,
-                className: o ? w : y,
-                children: /* @__PURE__ */ t(i, {
+                className: s ? O : S,
+                children: /* @__PURE__ */ t(c, {
                     color: "currentColor",
-                    size: V(16)
+                    size: p(16)
                 })
             }),
-            /* @__PURE__ */ t(A, {
-                id: g,
-                medium: !0,
-                truncate: 1,
-                color: "currentColor",
-                children: v
+            /* @__PURE__ */ t(n, {
+                paddingRight: r ? 8 : d ? 4 : 0,
+                children: /* @__PURE__ */ t(y, {
+                    id: k,
+                    weight: I.indicator.weight,
+                    truncate: 1,
+                    color: "currentColor",
+                    children: P
+                })
             })
         ]
-    }), f = i ? 8 : 12;
-    if (s) return /* @__PURE__ */ u(n, _object_spread_props(_object_spread({
-        className: m ? a.overAlternative : a.default,
-        paddingLeft: f
-    }, h(l, "Chip")), {
+    });
+    if (r) return /* @__PURE__ */ u(n, _object_spread_props(_object_spread({
+        className: m ? i.overAlternative : i.default,
+        paddingLeft: f,
+        paddingRight: b
+    }, g(l, "Chip")), {
         children: [
-            d,
-            /* @__PURE__ */ t(n, {
-                paddingLeft: 4,
-                children: /* @__PURE__ */ t(E, {
-                    size: 24,
-                    style: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center"
-                    },
-                    "aria-label": b.closeButtonLabel,
-                    onPress: ()=>s(),
-                    children: /* @__PURE__ */ t(I, {
-                        size: 16,
-                        color: R.colors.neutralMedium
-                    })
+            h,
+            w()
+        ]
+    }));
+    if (d) return /* @__PURE__ */ u(n, _object_spread_props(_object_spread({
+        className: m ? i.overAlternative : i.default,
+        paddingLeft: f,
+        paddingRight: b
+    }, g(l, "Chip")), {
+        children: [
+            h,
+            /* @__PURE__ */ t(z, {
+                size: 24,
+                style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                },
+                "aria-label": T.closeButtonLabel,
+                onPress: ()=>d(),
+                children: /* @__PURE__ */ t(j, {
+                    size: 16,
+                    color: M.colors.neutralMedium
                 })
             })
         ]
     }));
-    const x = o !== void 0 || e.href || e.onPress || e.to, r = ()=>/* @__PURE__ */ t(n, _object_spread_props(_object_spread({
-            className: P(a[o ? "active" : m ? "overAlternative" : "default"], {
-                [N[C ? "dark" : "light"]]: x
+    const B = s !== void 0 || e.href || e.onPress || e.to, o = ()=>/* @__PURE__ */ t(n, _object_spread_props(_object_spread({
+            className: E(i[s ? "active" : m ? "overAlternative" : "default"], {
+                [L[A ? "dark" : "light"]]: B
             }),
             paddingLeft: f,
-            paddingRight: 12
-        }, h(l, "Chip")), {
-            children: d
+            paddingRight: R
+        }, g(l, "Chip")), {
+            children: h
         }));
-    return e.onPress ? /* @__PURE__ */ t(c, {
-        className: B,
+    return e.onPress ? /* @__PURE__ */ t(v, {
+        className: D,
         trackingEvent: e.trackingEvent,
         onPress: e.onPress,
-        children: r()
-    }) : e.to ? /* @__PURE__ */ t(c, {
+        children: o()
+    }) : e.to ? /* @__PURE__ */ t(v, {
         trackingEvent: e.trackingEvent,
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView,
-        children: r()
-    }) : e.href ? /* @__PURE__ */ t(c, {
+        children: o()
+    }) : e.href ? /* @__PURE__ */ t(v, {
         trackingEvent: e.trackingEvent,
         href: e.href,
         newTab: e.newTab,
-        children: r()
-    }) : r();
-}, S = z;
-export { S as default };
+        children: o()
+    }) : o();
+}, re = F;
+export { re as default };

package/dist-es/circle.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./circle.css.ts.vanilla.css-mistica.js";
-var r = "_1wpwyyp1 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfa3";
+var r = "_1wpwyyp1 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6d _1y2v1nfab";
 export { r as circle };

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

@@ -79,11 +79,11 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as o, jsxs as y } from "react/jsx-runtime";
 import * as l from "react";
-import { useForm as j, useFieldProps as M } from "./form-context.js";
+import { useForm as M, useFieldProps as j } from "./form-context.js";
 import { useTheme as D } from "./hooks.js";
 import { getCreditCardNumberLength as T, isAmericanExpress as I, isVisa as x, isMasterCard as A, isValidCreditCardNumber as L } from "./utils/credit-card.js";
 import { TextFieldBaseAutosuggest as O } from "./text-field-base.js";
-import V from "./icons/icon-creditcard.js";
+import V from "./generated/mistica-icons/icon-credit-card-visa-regular.js";
 import U from "./icons/icon-visa.js";
 import _ from "./icons/icon-mastercard.js";
 import z from "./icons/icon-amex.js";
@@ -91,12 +91,13 @@ import { useRifm as P } from "rifm";
 import { createChangeEvent as $ } from "./utils/dom.js";
 import { combineRefs as q } from "./utils/common.js";
 import { flip as G, variants as H, flipFront as J, flipBack as K } from "./credit-card-number-field.css-mistica.js";
-const Q = (r)=>{
+import { vars as Q } from "./skins/skin-contract.css-mistica.js";
+const W = (r)=>{
     var t;
     const i = 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;
-}, W = (_param)=>{
+}, X = (_param)=>{
     var { inputRef: r , value: i , defaultValue: t , onChange: e  } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
@@ -109,7 +110,7 @@ const Q = (r)=>{
         f,
         e
     ]), d = P({
-        format: Q,
+        format: W,
         value: u,
         onChange: p,
         accept: /[\d]+/g
@@ -122,14 +123,14 @@ const Q = (r)=>{
         value: d.value,
         ref: q(r, m)
     }));
-}, X = (r)=>x(r) ? /* @__PURE__ */ o(U, {}) : A(r) ? /* @__PURE__ */ o(_, {}) : I(r) ? /* @__PURE__ */ o(z, {}) : null, Y = {
+}, Y = (r)=>x(r) ? /* @__PURE__ */ o(U, {}) : A(r) ? /* @__PURE__ */ o(_, {}) : I(r) ? /* @__PURE__ */ o(z, {}) : null, Z = {
     showBackface: !1,
     animationTarget: /* @__PURE__ */ o(V, {}),
     isAnimating: !1
-}, Z = (r, param)=>{
+}, v = (r, param)=>{
     let { type: i , value: t  } = param;
     if (i === "INPUT") {
-        const e = X(t);
+        const e = Y(t);
         if (e && !r.showBackface) return {
             animationTarget: e,
             showBackface: !0,
@@ -147,9 +148,9 @@ const Q = (r)=>{
     return i === "TRANSITION_END" ? _object_spread_props(_object_spread({}, r), {
         isAnimating: !1
     }) : r;
-}, v = (param)=>{
+}, rr = (param)=>{
     let { value: r  } = param;
-    const [{ showBackface: i , animationTarget: t , isAnimating: e  }, a] = l.useReducer(Z, Y);
+    const [{ showBackface: i , animationTarget: t , isAnimating: e  }, a] = l.useReducer(v, Z);
     return l.useEffect(()=>{
         a({
             type: "INPUT",
@@ -167,7 +168,9 @@ const Q = (r)=>{
             children: [
                 /* @__PURE__ */ o("div", {
                     className: J,
-                    children: /* @__PURE__ */ o(V, {})
+                    children: /* @__PURE__ */ o(V, {
+                        color: Q.colors.neutralMedium
+                    })
                 }),
                 /* @__PURE__ */ o("div", {
                     className: K,
@@ -176,7 +179,7 @@ const Q = (r)=>{
             ]
         })
     });
-}, rr = (_param)=>{
+}, er = (_param)=>{
     var { disabled: r , error: i , helperText: t , name: e , optional: a , validate: c , onChange: N , onChangeValue: m , onBlur: f , acceptedCards: u = {
         americanExpress: !0,
         visa: !0,
@@ -196,10 +199,10 @@ const Q = (r)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: E  } = D(), { jumpToNext: F , rawValues: R , setFormError: S  } = j(), h = (n, C)=>{
+    const { texts: E  } = D(), { jumpToNext: R , rawValues: F , setFormError: S  } = M(), h = (n, C)=>{
         const s = E.formCreditCardNumberError;
         return n ? I(n) && !u.americanExpress || x(n) && !u.visa || A(n) && !u.masterCard || !L(n) || T(n) !== n.length ? s : c == null ? void 0 : c(n, C) : a ? "" : E.formFieldErrorIsMandatory;
-    }, b = (n)=>n.replace(/\s/g, ""), k = M({
+    }, b = (n)=>n.replace(/\s/g, ""), k = j({
         name: e,
         value: p,
         defaultValue: g,
@@ -223,14 +226,14 @@ const Q = (r)=>{
                 B ? S({
                     name: e,
                     error: B
-                }) : F(e);
+                }) : R(e);
             }
         },
-        inputComponent: W,
+        inputComponent: X,
         autoComplete: d,
-        endIcon: /* @__PURE__ */ o(v, {
-            value: (_ref = p !== null && p !== void 0 ? p : R[e]) !== null && _ref !== void 0 ? _ref : ""
+        endIcon: /* @__PURE__ */ o(rr, {
+            value: (_ref = p !== null && p !== void 0 ? p : F[e]) !== null && _ref !== void 0 ? _ref : ""
         })
     }));
-}, pr = rr;
-export { pr as default };
+}, hr = er;
+export { hr as default };