@telefonica/mistica 14.1.0 → 14.3.0

package/dist/header.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    Header: ()=>J,
-    HeaderLayout: ()=>N,
-    MainSectionHeader: ()=>K,
-    MainSectionHeaderLayout: ()=>Q
+    Header: ()=>N,
+    HeaderLayout: ()=>U,
+    MainSectionHeader: ()=>Q,
+    MainSectionHeaderLayout: ()=>W
 });
 const _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 const _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
@@ -109,33 +109,33 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const J = (param)=>{
-    let { pretitle: i , title: e , description: o , dataAttributes: n , preamount: c , amount: s , button: a , subtitle: g , isErrorAmount: H , secondaryButton: x  } = param;
-    const { isTabletOrSmaller: L  } = (0, _hooksJs.useScreenSize)(), O = (0, _themeVariantContextJs.useIsInverseVariant)(), f = (m, y)=>{
-        if (typeof m == "string") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
+const N = (param)=>{
+    let { pretitle: l , title: e , description: t , dataAttributes: i , preamount: c , amount: m , button: h , subtitle: a , isErrorAmount: s , secondaryButton: y  } = param;
+    const { isTabletOrSmaller: L  } = (0, _hooksJs.useScreenSize)(), O = (0, _themeVariantContextJs.useIsInverseVariant)(), u = (g, S)=>{
+        if (typeof g == "string") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, y), {
-            children: m
+        }, S), {
+            children: g
         }));
-        const { text: M  } = m, I = _objectWithoutProperties(m, [
+        const { text: G  } = g, k = _objectWithoutProperties(g, [
             "text"
         ]);
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, y, I), {
-            children: m.text
+        }, S, k), {
+            children: g.text
         }));
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: L ? 24 : 32,
-        dataAttributes: n,
+        dataAttributes: i,
         children: [
-            (e || i || o) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            (e || l || t) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 16,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 8,
                     children: [
-                        i && f(i, {
+                        l && u(l, {
                             color: _skinContractCssMisticaJs.vars.colors.textPrimary
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
@@ -143,121 +143,129 @@ const J = (param)=>{
                             "aria-level": 2,
                             children: e
                         }),
-                        o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                        t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                             regular: !0,
                             color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                            children: o
+                            children: t
                         })
                     ]
                 })
             }),
-            (c || s || a || g) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+            (c || m || h || a) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
                 children: [
-                    (c || s) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                    (c || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                         space: 8,
                         children: [
-                            c && f(c, {
+                            c && u(c, {
                                 color: _skinContractCssMisticaJs.vars.colors.textPrimary
                             }),
                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text8, {
-                                color: H && !O ? _skinContractCssMisticaJs.vars.colors.highlight : _skinContractCssMisticaJs.vars.colors.textPrimary,
-                                children: s
+                                color: s && !O ? _skinContractCssMisticaJs.vars.colors.highlight : _skinContractCssMisticaJs.vars.colors.textPrimary,
+                                children: m
                             })
                         ]
                     }),
-                    (a || x) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                        primaryButton: a,
-                        secondaryButton: x
+                    (h || y) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                        primaryButton: h,
+                        secondaryButton: y
                     }),
-                    g && f(g, {})
+                    a && u(a, {})
                 ]
             })
         ]
     });
-}, K = (param)=>{
-    let { title: i , description: e , button: o  } = param;
-    const { isTabletOrSmaller: n  } = (0, _hooksJs.useScreenSize)();
+}, Q = (param)=>{
+    let { title: l , description: e , button: t  } = param;
+    const { isTabletOrSmaller: i  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 32,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                space: n ? 12 : 16,
+                space: i ? 12 : 16,
                 children: [
-                    i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text7, {
+                    l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text7, {
                         role: "heading",
                         "aria-level": 1,
-                        children: i
+                        children: l
                     }),
                     e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                         children: e
                     })
                 ]
             }),
-            o
+            t
         ]
     });
-}, N = (param)=>{
-    let { isInverse: i = !0 , breadcrumbs: e , header: o , extra: n , sideBySideExtraOnDesktop: c = !1 , dataAttributes: s  } = param;
-    const { isTabletOrSmaller: a  } = (0, _hooksJs.useScreenSize)();
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
-        isInverse: i,
-        dataAttributes: _objectSpread({
-            "component-name": "HeaderLayout"
-        }, s),
+}, U = (param)=>{
+    let { isInverse: l = !0 , breadcrumbs: e , header: t , extra: i , sideBySideExtraOnDesktop: c = !1 , dataAttributes: m , bleed: h = !1  } = param;
+    const { isTabletOrSmaller: a  } = (0, _hooksJs.useScreenSize)(), s = h && l;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-            a ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                paddingTop: o ? 32 : 0,
-                paddingBottom: 24,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                    space: 24,
-                    children: [
-                        o,
-                        n
-                    ]
-                })
-            }) : c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                paddingTop: e ? 16 : 48,
-                paddingBottom: 48,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
-                    template: "6+6",
-                    left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                        space: 32,
-                        children: [
-                            e,
-                            o
-                        ]
-                    }),
-                    right: n
-                })
-            }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                paddingTop: e ? 16 : 48,
-                paddingBottom: 48,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                    space: a ? 24 : 32,
-                    children: [
-                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                            space: 32,
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
+                isInverse: l,
+                dataAttributes: _objectSpread({
+                    "component-name": "HeaderLayout"
+                }, m),
+                children: [
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+                    a ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingTop: t ? 32 : 0,
+                        paddingBottom: 24,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            space: 24,
                             children: [
-                                e,
-                                o
+                                t,
+                                !s && i
                             ]
-                        }),
-                        n
-                    ]
-                })
+                        })
+                    }) : c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingTop: e ? 16 : 48,
+                        paddingBottom: 48,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
+                            template: "6+6",
+                            left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                space: 32,
+                                children: [
+                                    e,
+                                    t
+                                ]
+                            }),
+                            right: i
+                        })
+                    }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingTop: e ? 16 : 48,
+                        paddingBottom: s ? 32 : 48,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            space: a ? 24 : 32,
+                            children: [
+                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                    space: 32,
+                                    children: [
+                                        e,
+                                        t
+                                    ]
+                                }),
+                                !s && i
+                            ]
+                        })
+                    })
+                ]
+            }),
+            s && i && (a || !c) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
+                backgroundColor: `linear-gradient(to bottom, ${_skinContractCssMisticaJs.vars.colors.backgroundBrand} 40px, ${_skinContractCssMisticaJs.vars.colors.background} 0%)`,
+                children: i
             })
         ]
     });
-}, Q = (param)=>{
-    let { isInverse: i = !0 , children: e  } = param;
-    const { isTabletOrSmaller: o  } = (0, _hooksJs.useScreenSize)();
+}, W = (param)=>{
+    let { isInverse: l = !0 , children: e  } = param;
+    const { isTabletOrSmaller: t  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
-        isInverse: i,
+        isInverse: l,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-            o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingTop: 12,
                 paddingBottom: 24,
                 children: e

package/dist/highlighted-card.js

@@ -139,11 +139,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const V = /*#__PURE__*/ _react.forwardRef((e, i)=>{
-    var h;
-    const { title: a , description: r , imageUrl: o , imageFit: l  } = e, f = (0, _themeVariantContextJs.useIsInverseVariant)(), g = (h = e.isInverse) != null ? h : f, m = (0, _maybeDismissableJs.useIsDismissable)(), n = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
+const R = /*#__PURE__*/ _react.forwardRef((e, i)=>{
+    var u;
+    const { title: a , description: r , imageUrl: o , imageFit: l  } = e, h = (0, _themeVariantContextJs.useIsInverseVariant)(), f = (u = e.isInverse) != null ? u : h, m = (0, _maybeDismissableJs.useIsDismissable)(), n = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
         ref: i,
-        isInverse: g,
+        isInverse: f,
         className: _highlightedCardCssMisticaJs.container,
         dataAttributes: _objectSpread({
             "component-name": "HighlightedCard"
@@ -187,7 +187,8 @@ const V = /*#__PURE__*/ _react.forwardRef((e, i)=>{
             o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _highlightedCardCssMisticaJs.imageContent,
                 style: {
-                    background: `url(${o}) no-repeat`,
+                    backgroundImage: `url(${o})`,
+                    backgroundRepeat: "no-repeat",
                     backgroundSize: l === "fit" ? "contain" : "cover",
                     backgroundPosition: l === "fit" ? "bottom right" : `center ${l === "fill-center" ? "center" : "right"}`
                 }
@@ -221,7 +222,7 @@ const V = /*#__PURE__*/ _react.forwardRef((e, i)=>{
         onClose: i.onClose,
         "aria-label": r,
         width: i.width,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(V, _objectSpreadProps(_objectSpread({}, i), {
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(R, _objectSpreadProps(_objectSpread({}, i), {
             "aria-label": r,
             ref: a
         }))

package/dist/index.d.ts

@@ -1089,6 +1089,7 @@ export { default as IconMapRegular } from './generated/mistica-icons/icon-map-re
 export { default as IconMastFilled } from './generated/mistica-icons/icon-mast-filled';
 export { default as IconMastLight } from './generated/mistica-icons/icon-mast-light';
 export { default as IconMastRegular } from './generated/mistica-icons/icon-mast-regular';
+export { default as IconMeatballFilled } from './generated/mistica-icons/icon-meatball-filled';
 export { default as IconMedicalHistoryFilled } from './generated/mistica-icons/icon-medical-history-filled';
 export { default as IconMedicalHistoryLight } from './generated/mistica-icons/icon-medical-history-light';
 export { default as IconMedicalHistoryRegular } from './generated/mistica-icons/icon-medical-history-regular';

package/dist/index.js

@@ -1033,6 +1033,7 @@ _export(exports, {
     IconMastFilled: ()=>_iconMastFilledJs.default,
     IconMastLight: ()=>_iconMastLightJs.default,
     IconMastRegular: ()=>_iconMastRegularJs.default,
+    IconMeatballFilled: ()=>_iconMeatballFilledJs.default,
     IconMedicalHistoryFilled: ()=>_iconMedicalHistoryFilledJs.default,
     IconMedicalHistoryLight: ()=>_iconMedicalHistoryLightJs.default,
     IconMedicalHistoryRegular: ()=>_iconMedicalHistoryRegularJs.default,
@@ -2904,6 +2905,7 @@ const _iconMapRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./genera
 const _iconMastFilledJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-mast-filled.js"));
 const _iconMastLightJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-mast-light.js"));
 const _iconMastRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-mast-regular.js"));
+const _iconMeatballFilledJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-meatball-filled.js"));
 const _iconMedicalHistoryFilledJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-medical-history-filled.js"));
 const _iconMedicalHistoryLightJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-medical-history-light.js"));
 const _iconMedicalHistoryRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-medical-history-regular.js"));

package/dist/package-version.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
     enumerable: true,
     get: ()=>o
 });
-const o = "14.1.0";
+const o = "14.3.0";

package/dist/select.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>ut
+    get: ()=>ft
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
@@ -117,11 +117,11 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-const ut = (param)=>{
-    let { id: le , label: h , helperText: ae , value: _ , onChangeValue: V , name: i , fullWidth: D , options: d , optional: M , disabled: ue , error: de , onBlur: H , autoFocus: q = !1 , native: fe  } = param;
+const ft = (param)=>{
+    let { id: le , label: h , helperText: ae , value: k , onChangeValue: V , name: i , fullWidth: D , options: d , optional: M , disabled: ue , error: de , onBlur: H , autoFocus: q = !1 , native: fe  } = param;
     var ee, te, ne;
-    const g = _react.useRef(null), f = _react.useRef(null), T = _react.useRef(null), I = _react.useRef(null), N = _react.useRef(/* @__PURE__ */ new Map()), [c, pe] = _react.useState(), [F, j] = _react.useState(!1), [z, K] = _react.useState(!1), [U, y] = _react.useState(!1), [u, P] = _react.useState({}), [x, G] = _react.useState(), Z = _react.useRef(null), W = (0, _hooksJs.useAriaId)(le), { rawValues: me , setRawValue: B , setValue: L , formStatus: he , formErrors: X , setFormError: ge , register: $  } = (0, _formContextJs.useForm)(), { platformOverrides: J  } = (0, _hooksJs.useTheme)(), Te = fe || process.env.NODE_ENV === "test" || (0, _platformJs.isAndroid)(J) || (0, _platformJs.isIos)(J), E = ue || he === "sending", A = de || !!X[i], Q = X[i] || ae, o = _ != null ? _ : me[i], R = (e)=>{
-        V == null || V(e), ge({
+    const g = _react.useRef(null), f = _react.useRef(null), S = _react.useRef(null), T = _react.useRef(null), N = _react.useRef(/* @__PURE__ */ new Map()), [pe, me] = _react.useState(!0), [c, he] = _react.useState(), [F, j] = _react.useState(!1), [z, K] = _react.useState(!1), [U, y] = _react.useState(!1), [u, P] = _react.useState({}), [I, G] = _react.useState(), Z = _react.useRef(null), W = (0, _hooksJs.useAriaId)(le), { rawValues: ge , setRawValue: B , setValue: L , formStatus: Se , formErrors: X , setFormError: Te , register: $  } = (0, _formContextJs.useForm)(), { platformOverrides: J  } = (0, _hooksJs.useTheme)(), Ie = fe || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platformJs.isAndroid)(J) || (0, _platformJs.isIos)(J), E = ue || Se === "sending", v = de || !!X[i], Q = X[i] || ae, o = k != null ? k : ge[i], A = (e)=>{
+        V == null || V(e), Te({
             name: i,
             error: ""
         }), B({
@@ -131,19 +131,19 @@ const ut = (param)=>{
             name: i,
             value: e
         });
-    }, S = (e)=>{
+    }, x = (e)=>{
         if (e) {
-            if (T != null && T.current) {
-                const { top: s , width: w , left: O , height: b  } = T.current.getBoundingClientRect(), p = s + b, v = Math.min(d.length, 8) * 48 + 16;
-                if (p + v + 12 > window.innerHeight) {
-                    const Oe = window.innerHeight - p;
-                    if (s > Oe) {
-                        const ye = s - v;
+            if (S != null && S.current) {
+                const { top: r , width: w , left: O , height: R  } = S.current.getBoundingClientRect(), p = r + R, b = Math.min(d.length, 8) * 48 + 16;
+                if (p + b + 12 > window.innerHeight) {
+                    const Ce = window.innerHeight - p;
+                    if (r > Ce) {
+                        const Ne = r - b;
                         P({
                             minWidth: w,
                             left: O,
-                            top: Math.max(ye, 12),
-                            maxHeight: Math.min(s - 12, v),
+                            top: Math.max(Ne, 12),
+                            maxHeight: Math.min(r - 12, b),
                             transformOrigin: "center bottom"
                         });
                     } else P({
@@ -157,29 +157,29 @@ const ut = (param)=>{
                     minWidth: w,
                     top: p,
                     left: O,
-                    maxHeight: v,
+                    maxHeight: b,
                     transformOrigin: "center top"
                 });
             }
             j(!0), requestAnimationFrame(()=>{
-                Z.current && I.current && "scrollTop" in I.current && (I.current.scrollTop = Z.current), K(!0);
+                Z.current && T.current && "scrollTop" in T.current && (T.current.scrollTop = Z.current), K(!0);
             }), G(c != null ? c : o);
         } else K(!1), j(!1), G(void 0);
     }, Y = (e)=>{
         var t;
-        Z.current = (t = I.current) == null ? void 0 : t.scrollTop, S(!1), R && typeof e == "string" && R(e), typeof o > "u" && pe(e);
-    }, Ie = (e)=>{
+        Z.current = (t = T.current) == null ? void 0 : t.scrollTop, x(!1), A && typeof e == "string" && A(e), typeof o > "u" && he(e);
+    }, Ee = (e)=>{
         var n;
-        const t = (n = I.current) == null ? void 0 : n.getBoundingClientRect();
+        const t = (n = T.current) == null ? void 0 : n.getBoundingClientRect();
         if (t && e && N.current.has(e)) {
-            const l = N.current.get(e), s = l == null ? void 0 : l.getBoundingClientRect();
-            if (s && s.top + s.height / 2 >= t.top + t.height) {
+            const l = N.current.get(e), r = l == null ? void 0 : l.getBoundingClientRect();
+            if (r && r.top + r.height / 2 >= t.top + t.height) {
                 l == null || l.scrollIntoView();
                 return;
             }
-            s && s.top + s.height / 2 <= t.top && (l == null || l.scrollIntoView(!1));
+            r && r.top + r.height / 2 <= t.top && (l == null || l.scrollIntoView(!1));
         }
-    }, xe = f.current, Ee = g.current;
+    }, xe = f.current, we = g.current;
     _react.useEffect(()=>{
         B({
             name: i,
@@ -207,27 +207,27 @@ const ut = (param)=>{
         f,
         g,
         xe,
-        Ee
+        we
     ]), _react.useEffect(()=>{
         const e = (n)=>{
             var w, O;
-            const s = {
+            const r = {
                 [_keyCodesJs.UP]: -1,
                 [_keyCodesJs.DOWN]: 1
             }[n.keyCode];
-            if (s) {
+            if (r) {
                 (0, _domJs.cancelEvent)(n);
-                const b = (O = (w = d[d.findIndex((param)=>{
+                const R = (O = (w = d[d.findIndex((param)=>{
                     let { value: p  } = param;
-                    return p === x;
-                }) + s]) == null ? void 0 : w.value) != null ? O : x;
-                G(b), Ie(b);
+                    return p === I;
+                }) + r]) == null ? void 0 : w.value) != null ? O : I;
+                G(R), Ee(R);
             }
         }, t = (n)=>{
-            F && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && S(!1), (n.keyCode === _keyCodesJs.ENTER || n.keyCode === _keyCodesJs.SPACE) && ((0, _domJs.cancelEvent)(n), d.findIndex((param)=>{
+            F && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && x(!1), (n.keyCode === _keyCodesJs.ENTER || n.keyCode === _keyCodesJs.SPACE) && ((0, _domJs.cancelEvent)(n), d.findIndex((param)=>{
                 let { value: l  } = param;
-                return l === x;
-            }) !== -1 && x !== c && Y(x), S(!1))), z && e(n);
+                return l === I;
+            }) !== -1 && I !== c && Y(I), x(!1))), z && e(n);
         };
         return document.addEventListener("keydown", t, !1), ()=>{
             document.removeEventListener("keydown", t, !1);
@@ -236,35 +236,37 @@ const ut = (param)=>{
         q && f.current && f.current.focus();
     }, [
         q
-    ]);
-    const Se = (e)=>{
+    ]), _react.useEffect(()=>{
+        me(!1);
+    }, []);
+    const Oe = (e)=>{
         var t;
         return e ? (t = d.find((param)=>{
             let { value: n  } = param;
             return n === e;
         })) == null ? void 0 : t.text : "";
-    }, we = {
+    }, ye = {
         tabIndex: 0,
         onFocus: ()=>y(!0),
         onBlur: ()=>y(!1),
         onClick: ()=>{
-            S(!0), y(!0);
+            x(!0), y(!0);
         },
         onKeyDown: (e)=>{
-            !F && (e.keyCode === _keyCodesJs.SPACE || e.keyCode === _keyCodesJs.ENTER) && ((0, _domJs.cancelEvent)(e), S(!0));
+            !F && (e.keyCode === _keyCodesJs.SPACE || e.keyCode === _keyCodesJs.ENTER) && ((0, _domJs.cancelEvent)(e), x(!0));
         }
     };
-    return Te ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_textFieldComponentsJs.FieldContainer, {
+    return Ie || pe ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_textFieldComponentsJs.FieldContainer, {
         disabled: E,
         helperText: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.HelperText, {
-            error: A,
+            error: v,
             leftText: Q
         }),
-        fieldRef: T,
+        fieldRef: S,
         fullWidth: D,
         children: [
             h && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldComponentsJs.Label, {
-                error: A,
+                error: v,
                 forId: W,
                 inputState: U ? "focused" : ((te = o != null ? o : c) != null ? te : (ee = g.current) == null ? void 0 : ee.value) ? "filled" : "default",
                 optional: M,
@@ -273,12 +275,12 @@ const ut = (param)=>{
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("select", {
                 className: _selectCssMisticaJs.selectVariants[E ? "disabled" : "default"],
                 id: W,
-                "aria-invalid": !!A,
+                "aria-invalid": !!v,
                 value: o,
                 required: !M,
                 disabled: E,
                 onChange: (e)=>{
-                    R && R(e.target.value);
+                    A && A(e.target.value);
                 },
                 onFocus: ()=>y(!0),
                 onBlur: (e)=>{
@@ -331,7 +333,7 @@ const ut = (param)=>{
                 role: "button",
                 "aria-haspopup": "listbox",
                 ref: f
-            }, !E && we), {
+            }, !E && ye), {
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, {
                         style: {
@@ -350,22 +352,22 @@ const ut = (param)=>{
                         required: !M,
                         disabled: E,
                         id: W,
-                        error: A,
+                        error: v,
                         inputRef: g,
-                        fieldRef: T
+                        fieldRef: S
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                         className: _selectCssMisticaJs.selectTextVariants[E ? "disabled" : "default"],
                         style: {
                             top: h ? 27 : 17
                         },
-                        children: Se(o != null ? o : c)
+                        children: Oe(o != null ? o : c)
                     })
                 ]
             })),
             F && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
                 onPress: (e)=>{
-                    S(!1), (0, _domJs.cancelEvent)(e);
+                    x(!1), (0, _domJs.cancelEvent)(e);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("ul", {
@@ -379,7 +381,7 @@ const ut = (param)=>{
                     onPointerDown: _domJs.cancelEvent,
                     className: (0, _classnames.default)(_selectCssMisticaJs.optionsContainer, z ? _selectCssMisticaJs.optionsAnimationsVariants.show : _selectCssMisticaJs.optionsAnimationsVariants.hide),
                     role: "listbox",
-                    ref: I,
+                    ref: T,
                     children: d.map((param)=>/* @__PURE__ */ {
                         let { value: e , text: t  } = param;
                         return (0, _jsxRuntimeJs.jsx)("li", {
@@ -387,7 +389,7 @@ const ut = (param)=>{
                             "aria-selected": e === (c != null ? c : o),
                             "data-value": e,
                             className: (0, _classnames.default)(_selectCssMisticaJs.menuItem, {
-                                [_selectCssMisticaJs.menuItemSelected]: e === x || e === (c != null ? c : o)
+                                [_selectCssMisticaJs.menuItemSelected]: e === I || e === (c != null ? c : o)
                             }),
                             onPointerDown: _domJs.cancelEvent,
                             onClick: ()=>Y(e),

package/dist/skins/movistar.d.ts

@@ -41,7 +41,7 @@ export declare const palette: {
     readonly movistarProminentBlueLight50: "#85939C";
     readonly movistarProminentBlueLight70: "#546874";
     readonly darkModeBlack: "#061824";
-    readonly darkModeGrey: "#092130";
+    readonly darkModeGrey: "#081F2E";
     readonly darkModeGrey2: "#EAEBEE";
     readonly darkModeGrey3: "#CED4D7";
     readonly darkModeGrey4: "#85939C";

package/dist/skins/movistar.js

@@ -56,7 +56,7 @@ const e = {
     movistarProminentBlueLight50: "#85939C",
     movistarProminentBlueLight70: "#546874",
     darkModeBlack: "#061824",
-    darkModeGrey: "#092130",
+    darkModeGrey: "#081F2E",
     darkModeGrey2: "#EAEBEE",
     darkModeGrey3: "#CED4D7",
     darkModeGrey4: "#85939C",
@@ -167,12 +167,12 @@ const e = {
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
             backgroundOverlay: (0, _colorJs.applyAlpha)(e.darkModeGrey, 0.8),
-            backgroundSkeleton: e.darkModeGrey6,
-            backgroundSkeletonInverse: e.darkModeGrey6,
+            backgroundSkeleton: e.movistarBlueDark,
+            backgroundSkeletonInverse: e.movistarBlueDark,
             navigationBarBackground: e.darkModeBlack,
             backgroundAlternative: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
-            skeletonWave: e.darkModeGrey5,
+            skeletonWave: e.darkModeGrey6,
             borderHigh: e.darkModeGrey4,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
@@ -214,7 +214,7 @@ const e = {
             inverse: e.darkModeGrey2,
             neutralHigh: e.darkModeGrey2,
             neutralMedium: e.darkModeGrey5,
-            neutralLow: e.darkModeGrey6,
+            neutralLow: e.movistarBlueDark,
             textPrimary: e.darkModeGrey2,
             textPrimaryInverse: e.darkModeGrey2,
             textSecondary: e.darkModeGrey4,
@@ -225,11 +225,11 @@ const e = {
             textNavigationSearchBarText: e.darkModeGrey2,
             textAppBar: e.darkModeGrey5,
             textAppBarSelected: e.darkModeGrey2,
-            successLow: e.grey6,
-            warningLow: e.grey6,
-            errorLow: e.grey6,
-            promoLow: e.grey6,
-            brandLow: e.grey6,
+            successLow: e.movistarBlueDark,
+            warningLow: e.movistarBlueDark,
+            errorLow: e.movistarBlueDark,
+            promoLow: e.movistarBlueDark,
+            brandLow: e.movistarBlueDark,
             successHigh: e.movistarGreen40,
             warningHigh: e.egg40,
             errorHigh: e.pepper40,