@telefonica/mistica 14.1.0 → 14.2.0

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "14.1.0";
+const o = "14.2.0";
 export { o as PACKAGE_VERSION };

package/dist-es/select.js

@@ -50,26 +50,26 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-import * as r from "react";
-import oe from "classnames";
-import { useForm as Ce } from "./form-context.js";
-import { useAriaId as Ne, useTheme as Ae } from "./hooks.js";
-import { TAB as Re, ESC as be, ENTER as re, SPACE as se, UP as ve, DOWN as ke } from "./utils/key-codes.js";
-import { FieldContainer as _e, HelperText as Ve, Label as De } from "./text-field-components.js";
+import * as s from "react";
+import se from "classnames";
+import { useForm as ve } from "./form-context.js";
+import { useAriaId as Ae, useTheme as Re } from "./hooks.js";
+import { TAB as be, ESC as _e, ENTER as oe, SPACE as re, UP as ke, DOWN as Ve } from "./utils/key-codes.js";
+import { FieldContainer as De, HelperText as Me, Label as He } from "./text-field-components.js";
 import ie from "./generated/mistica-icons/icon-chevron-down-regular.js";
-import { TextFieldBaseAutosuggest as Me } from "./text-field-base.js";
-import He from "./overlay.js";
-import { isAndroid as Fe, isIos as Pe } from "./utils/platform.js";
+import { TextFieldBaseAutosuggest as Fe } from "./text-field-base.js";
+import Pe from "./overlay.js";
+import { isAndroid as Ge, isIos as Ze } from "./utils/platform.js";
 import { cancelEvent as m } from "./utils/dom.js";
-import { Text3 as Ge } from "./text.js";
-import { selectVariants as Ze, arrowDown as We, selectContainerVariants as Be, selectTextVariants as Le, vars as C, optionsContainer as $e, optionsAnimationsVariants as ce, menuItem as qe, menuItemSelected as je } from "./select.css-mistica.js";
-import { assignInlineVars as ze } from "@vanilla-extract/dynamic";
-import { jsxs as k, jsx as a, Fragment as Ke } from "./_virtual/jsx-runtime.js";
-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;
+import { Text3 as We } from "./text.js";
+import { selectVariants as Be, arrowDown as Le, selectContainerVariants as $e, selectTextVariants as qe, vars as C, optionsContainer as je, optionsAnimationsVariants as ce, menuItem as ze, menuItemSelected as Ke } from "./select.css-mistica.js";
+import { assignInlineVars as Ue } from "@vanilla-extract/dynamic";
+import { jsxs as _, jsx as a, Fragment as Xe } from "./_virtual/jsx-runtime.js";
+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 = r.useRef(null), f = r.useRef(null), T = r.useRef(null), I = r.useRef(null), N = r.useRef(/* @__PURE__ */ new Map()), [c, pe] = r.useState(), [F, j] = r.useState(!1), [z, K] = r.useState(!1), [U, y] = r.useState(!1), [u, P] = r.useState({}), [x, G] = r.useState(), Z = r.useRef(null), W = Ne(le), { rawValues: me , setRawValue: B , setValue: L , formStatus: he , formErrors: X , setFormError: ge , register: $  } = Ce(), { platformOverrides: J  } = Ae(), Te = fe || process.env.NODE_ENV === "test" || Fe(J) || Pe(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 = s.useRef(null), f = s.useRef(null), S = s.useRef(null), T = s.useRef(null), N = s.useRef(/* @__PURE__ */ new Map()), [pe, me] = s.useState(!0), [c, he] = s.useState(), [F, j] = s.useState(!1), [z, K] = s.useState(!1), [U, y] = s.useState(!1), [u, P] = s.useState({}), [I, G] = s.useState(), Z = s.useRef(null), W = Ae(le), { rawValues: ge , setRawValue: B , setValue: L , formStatus: Se , formErrors: X , setFormError: Te , register: $  } = ve(), { platformOverrides: J  } = Re(), Ie = fe || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Ge(J) || Ze(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({
@@ -79,19 +79,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({
@@ -105,30 +105,30 @@ 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;
-    r.useEffect(()=>{
+    }, xe = f.current, we = g.current;
+    s.useEffect(()=>{
         B({
             name: i,
             value: o
@@ -141,7 +141,7 @@ const ut = (param)=>{
         B,
         L,
         o
-    ]), r.useEffect(()=>($(i, {
+    ]), s.useEffect(()=>($(i, {
             input: g.current,
             focusableElement: f.current
         }), ()=>{
@@ -155,78 +155,80 @@ const ut = (param)=>{
         f,
         g,
         xe,
-        Ee
-    ]), r.useEffect(()=>{
+        we
+    ]), s.useEffect(()=>{
         const e = (n)=>{
             var w, O;
-            const s = {
-                [ve]: -1,
-                [ke]: 1
+            const r = {
+                [ke]: -1,
+                [Ve]: 1
             }[n.keyCode];
-            if (s) {
+            if (r) {
                 m(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 === Re && m(n), n.keyCode === be && S(!1), (n.keyCode === re || n.keyCode === se) && (m(n), d.findIndex((param)=>{
+            F && (n.keyCode === be && m(n), n.keyCode === _e && x(!1), (n.keyCode === oe || n.keyCode === re) && (m(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);
         };
-    }), r.useEffect(()=>{
+    }), s.useEffect(()=>{
         q && f.current && f.current.focus();
     }, [
         q
-    ]);
-    const Se = (e)=>{
+    ]), s.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 === se || e.keyCode === re) && (m(e), S(!0));
+            !F && (e.keyCode === re || e.keyCode === oe) && (m(e), x(!0));
         }
     };
-    return Te ? /* @__PURE__ */ k(_e, {
+    return Ie || pe ? /* @__PURE__ */ _(De, {
         disabled: E,
-        helperText: /* @__PURE__ */ a(Ve, {
-            error: A,
+        helperText: /* @__PURE__ */ a(Me, {
+            error: v,
             leftText: Q
         }),
-        fieldRef: T,
+        fieldRef: S,
         fullWidth: D,
         children: [
-            h && /* @__PURE__ */ a(De, {
-                error: A,
+            h && /* @__PURE__ */ a(He, {
+                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,
                 children: h
             }),
-            /* @__PURE__ */ k("select", {
-                className: Ze[E ? "disabled" : "default"],
+            /* @__PURE__ */ _("select", {
+                className: Be[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)=>{
@@ -265,23 +267,23 @@ const ut = (param)=>{
                 ]
             }),
             /* @__PURE__ */ a("div", {
-                className: We,
+                className: Le,
                 "aria-hidden": !0,
                 children: /* @__PURE__ */ a(ie, {
                     size: 20
                 })
             })
         ]
-    }) : /* @__PURE__ */ k(Ke, {
+    }) : /* @__PURE__ */ _(Xe, {
         children: [
-            /* @__PURE__ */ k("div", _objectSpreadProps(_objectSpread({
-                className: Be[D ? "fullWidth" : "default"],
+            /* @__PURE__ */ _("div", _objectSpreadProps(_objectSpread({
+                className: $e[D ? "fullWidth" : "default"],
                 role: "button",
                 "aria-haspopup": "listbox",
                 ref: f
-            }, !E && we), {
+            }, !E && ye), {
                 children: [
-                    /* @__PURE__ */ a(Me, {
+                    /* @__PURE__ */ a(Fe, {
                         style: {
                             visibility: "hidden"
                         },
@@ -298,26 +300,26 @@ const ut = (param)=>{
                         required: !M,
                         disabled: E,
                         id: W,
-                        error: A,
+                        error: v,
                         inputRef: g,
-                        fieldRef: T
+                        fieldRef: S
                     }),
                     /* @__PURE__ */ a("div", {
-                        className: Le[E ? "disabled" : "default"],
+                        className: qe[E ? "disabled" : "default"],
                         style: {
                             top: h ? 27 : 17
                         },
-                        children: Se(o != null ? o : c)
+                        children: Oe(o != null ? o : c)
                     })
                 ]
             })),
-            F && /* @__PURE__ */ a(He, {
+            F && /* @__PURE__ */ a(Pe, {
                 onPress: (e)=>{
-                    S(!1), m(e);
+                    x(!1), m(e);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ a("ul", {
-                    style: ze({
+                    style: Ue({
                         [C.top]: u.top ? `${u.top}px` : "",
                         [C.left]: u.left ? `${u.left}px` : "",
                         [C.maxHeight]: u.maxHeight ? `${u.maxHeight}px` : "",
@@ -325,24 +327,24 @@ const ut = (param)=>{
                         [C.transformOrigin]: (ne = u.transformOrigin) != null ? ne : ""
                     }),
                     onPointerDown: m,
-                    className: oe($e, z ? ce.show : ce.hide),
+                    className: se(je, z ? ce.show : ce.hide),
                     role: "listbox",
-                    ref: I,
+                    ref: T,
                     children: d.map((param)=>/* @__PURE__ */ {
                         let { value: e , text: t  } = param;
                         return a("li", {
                             role: "option",
                             "aria-selected": e === (c != null ? c : o),
                             "data-value": e,
-                            className: oe(qe, {
-                                [je]: e === x || e === (c != null ? c : o)
+                            className: se(ze, {
+                                [Ke]: e === I || e === (c != null ? c : o)
                             }),
                             onPointerDown: m,
                             onClick: ()=>Y(e),
                             ref: (n)=>{
                                 n ? N.current.set(e, n) : N.current.delete(e);
                             },
-                            children: /* @__PURE__ */ a(Ge, {
+                            children: /* @__PURE__ */ a(We, {
                                 regular: !0,
                                 children: t
                             })
@@ -353,4 +355,4 @@ const ut = (param)=>{
         ]
     });
 };
-export { ut as default };
+export { ft as default };

package/dist-es/skins/movistar.js

@@ -42,7 +42,7 @@ const e = {
     movistarProminentBlueLight50: "#85939C",
     movistarProminentBlueLight70: "#546874",
     darkModeBlack: "#061824",
-    darkModeGrey: "#092130",
+    darkModeGrey: "#081F2E",
     darkModeGrey2: "#EAEBEE",
     darkModeGrey3: "#CED4D7",
     darkModeGrey4: "#85939C",
@@ -153,12 +153,12 @@ const e = {
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
             backgroundOverlay: r(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,
@@ -200,7 +200,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,
@@ -211,11 +211,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,