@telefonica/mistica 14.15.0 → 14.16.0

package/dist-es/select.js

@@ -50,139 +50,140 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as b, jsx as c, Fragment as ye } from "react/jsx-runtime";
+import { jsxs as _, jsx as r, Fragment as Ne } from "react/jsx-runtime";
 import * as o from "react";
 import ee 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 te, SPACE as ne, UP as _e, DOWN as ke } from "./utils/key-codes.js";
-import { FieldContainer as Ve, HelperText as Pe, Label as De } from "./text-field-components.js";
+import { useForm as Re } from "./form-context.js";
+import { useAriaId as Ae, useTheme as ke, useScreenSize as _e } from "./hooks.js";
+import { TAB as be, ESC as Pe, ENTER as te, SPACE as ne, UP as Ve, DOWN as De } from "./utils/key-codes.js";
+import { FieldContainer as Me, HelperText as He, Label as Fe } from "./text-field-components.js";
 import oe 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 Ge } from "./utils/platform.js";
-import { cancelEvent as p } from "./utils/dom.js";
-import { Text3 as Ze } from "./text.js";
-import { selectVariants as We, arrowDown as Be, selectContainerVariants as Le, selectTextVariants as $e, vars as y, optionsContainer as qe, optionsAnimationsVariants as re, menuItem as je, menuItemSelected as ze } from "./select.css-mistica.js";
-import { assignInlineVars as Ke } from "@vanilla-extract/dynamic";
-const Ue = (param)=>{
-    let { id: se , label: m , helperText: ie , value: ce , onChangeValue: _ , name: s , fullWidth: k , options: u , optional: V , disabled: le , error: ae , onBlur: P , autoFocus: $ = !1 , native: ue  } = param;
+import { TextFieldBaseAutosuggest as Ge } from "./text-field-base.js";
+import Ze from "./overlay.js";
+import { isAndroid as Be, isIos as We } from "./utils/platform.js";
+import { cancelEvent as h } from "./utils/dom.js";
+import { Text3 as Le } from "./text.js";
+import { selectVariants as $e, arrowDown as qe, selectContainerVariants as ze, selectTextVariants as je, vars as C, optionsContainer as Ke, optionsAnimationsVariants as se, menuItem as Ue, menuItemSelected as Xe } from "./select.css-mistica.js";
+import { assignInlineVars as Je } from "@vanilla-extract/dynamic";
+import { Portal as Qe } from "./portal.js";
+const Ye = (param)=>{
+    let { id: re , label: d , helperText: ie , value: ce , onChangeValue: b , name: i , fullWidth: P , options: u , optional: V , disabled: le , error: ae , onBlur: D , autoFocus: $ = !1 , native: ue  } = param;
     var Y;
-    const h = o.useRef(null), d = o.useRef(null), S = o.useRef(null), g = o.useRef(null), C = o.useRef(/* @__PURE__ */ new Map()), [de, fe] = o.useState(!0), [f, pe] = o.useState(), [D, q] = o.useState(!1), [j, z] = o.useState(!1), [K, w] = o.useState(!1), [a, M] = o.useState({}), [T, H] = o.useState(), F = o.useRef(null), G = Ne(se), { rawValues: me , setRawValue: Z , setValue: W , formStatus: he , formErrors: U , setFormError: Se , register: B  } = Ce(), { platformOverrides: X  } = Ae(), ge = ue || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Fe(X) || Ge(X), v = le || he === "sending", N = ae || !!U[s], J = U[s] || ie, l = ce !== null && ce !== void 0 ? ce : me[s], A = (e)=>{
-        _ == null || _(e), Se({
-            name: s,
+    const S = o.useRef(null), f = o.useRef(null), g = o.useRef(null), T = o.useRef(null), N = o.useRef(/* @__PURE__ */ new Map()), [de, fe] = o.useState(!0), [p, pe] = o.useState(), [M, q] = o.useState(!1), [z, j] = o.useState(!1), [K, x] = o.useState(!1), [a, H] = o.useState({}), [v, F] = o.useState(), G = o.useRef(null), Z = Ae(re), { rawValues: me , setRawValue: B , setValue: W , formStatus: he , formErrors: U , setFormError: Se , register: L  } = Re(), { platformOverrides: X  } = ke(), ge = ue || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Be(X) || We(X), I = le || he === "sending", R = ae || !!U[i], J = U[i] || ie, l = ce !== null && ce !== void 0 ? ce : me[i], A = (e)=>{
+        b == null || b(e), Se({
+            name: i,
             error: ""
-        }), Z({
-            name: s,
+        }), B({
+            name: i,
             value: e
         }), W({
-            name: s,
+            name: i,
             value: e
         });
-    }, I = (e)=>{
+    }, E = (e)=>{
         if (e) {
-            if (S != null && S.current) {
-                const { top: r , width: E , left: x , height: L  } = S.current.getBoundingClientRect(), O = r + L, R = Math.min(u.length, 8) * 48 + 16;
-                if (O + R + 12 > window.innerHeight) {
-                    const we = window.innerHeight - O;
-                    if (r > we) {
-                        const Oe = r - R;
-                        M({
-                            minWidth: E,
-                            left: x,
-                            top: Math.max(Oe, 12),
-                            maxHeight: Math.min(r - 12, R),
+            if (g != null && g.current) {
+                const s = g.current.getBoundingClientRect(), m = s.top, w = s.width, O = s.left, Oe = s.height, y = m + Oe, k = Math.min(u.length, 8) * 48 + 16;
+                if (y + k + 12 > window.innerHeight) {
+                    const ye = window.innerHeight - y;
+                    if (m > ye) {
+                        const Ce = m - k;
+                        H({
+                            minWidth: w,
+                            left: O,
+                            top: Math.max(Ce, 12),
+                            maxHeight: Math.min(m - 12, k),
                             transformOrigin: "center bottom"
                         });
-                    } else M({
-                        minWidth: E,
-                        top: O,
-                        left: x,
-                        maxHeight: window.innerHeight - O - 12,
+                    } else H({
+                        minWidth: w,
+                        top: y,
+                        left: O,
+                        maxHeight: window.innerHeight - y - 12,
                         transformOrigin: "center top"
                     });
-                } else M({
-                    minWidth: E,
-                    top: O,
-                    left: x,
-                    maxHeight: R,
+                } else H({
+                    minWidth: w,
+                    top: y,
+                    left: O,
+                    maxHeight: k,
                     transformOrigin: "center top"
                 });
             }
             q(!0), requestAnimationFrame(()=>{
-                F.current && g.current && "scrollTop" in g.current && (g.current.scrollTop = F.current), z(!0);
-            }), H(f !== null && f !== void 0 ? f : l);
-        } else z(!1), q(!1), H(void 0);
+                G.current && T.current && "scrollTop" in T.current && (T.current.scrollTop = G.current), j(!0);
+            }), F(p !== null && p !== void 0 ? p : l);
+        } else j(!1), q(!1), F(void 0);
     }, Q = (e)=>{
         var t;
-        F.current = (t = g.current) == null ? void 0 : t.scrollTop, I(!1), A && typeof e == "string" && A(e), typeof l > "u" && pe(e);
+        G.current = (t = T.current) == null ? void 0 : t.scrollTop, E(!1), A && typeof e == "string" && A(e), typeof l > "u" && pe(e);
     }, Te = (e)=>{
         var n;
-        const t = (n = g.current) == null ? void 0 : n.getBoundingClientRect();
-        if (t && e && C.current.has(e)) {
-            const i = C.current.get(e), r = i == null ? void 0 : i.getBoundingClientRect();
-            if (r && r.top + r.height / 2 >= t.top + t.height) {
-                i == null || i.scrollIntoView();
+        const t = (n = T.current) == null ? void 0 : n.getBoundingClientRect();
+        if (t && e && N.current.has(e)) {
+            const c = N.current.get(e), s = c == null ? void 0 : c.getBoundingClientRect();
+            if (s && s.top + s.height / 2 >= t.top + t.height) {
+                c == null || c.scrollIntoView();
                 return;
             }
-            r && r.top + r.height / 2 <= t.top && (i == null || i.scrollIntoView(!1));
+            s && s.top + s.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
         }
-    }, ve = d.current, Ie = h.current;
+    }, ve = f.current, Ie = S.current;
     o.useEffect(()=>{
-        Z({
-            name: s,
+        B({
+            name: i,
             value: l
         }), W({
-            name: s,
+            name: i,
             value: l
         });
     }, [
-        s,
-        Z,
+        i,
+        B,
         W,
         l
-    ]), o.useEffect(()=>(B(s, {
-            input: h.current,
-            focusableElement: d.current
+    ]), o.useEffect(()=>(L(i, {
+            input: S.current,
+            focusableElement: f.current
         }), ()=>{
-            B(s, {
+            L(i, {
                 input: null,
                 focusableElement: null
             });
         }), [
-        s,
-        B,
-        d,
-        h,
+        i,
+        L,
+        f,
+        S,
         ve,
         Ie
     ]), o.useEffect(()=>{
         const e = (n)=>{
-            var E;
-            const r = {
-                [_e]: -1,
-                [ke]: 1
+            var m;
+            const s = {
+                [Ve]: -1,
+                [De]: 1
             }[n.keyCode];
-            if (r) {
-                p(n);
+            if (s) {
+                h(n);
                 var _ref;
-                const x = (_ref = (E = u[u.findIndex((param)=>{
-                    let { value: L  } = param;
-                    return L === T;
-                }) + r]) == null ? void 0 : E.value) !== null && _ref !== void 0 ? _ref : T;
-                H(x), Te(x);
+                const w = (_ref = (m = u[u.findIndex((param)=>{
+                    let { value: O  } = param;
+                    return O === v;
+                }) + s]) == null ? void 0 : m.value) !== null && _ref !== void 0 ? _ref : v;
+                F(w), Te(w);
             }
         }, t = (n)=>{
-            D && (n.keyCode === Re && p(n), n.keyCode === be && I(!1), (n.keyCode === te || n.keyCode === ne) && (p(n), u.findIndex((param)=>{
-                let { value: i  } = param;
-                return i === T;
-            }) !== -1 && T !== f && Q(T), I(!1))), j && e(n);
+            M && (n.keyCode === be && h(n), n.keyCode === Pe && E(!1), (n.keyCode === te || n.keyCode === ne) && (h(n), u.findIndex((param)=>{
+                let { value: c  } = param;
+                return c === v;
+            }) !== -1 && v !== p && Q(v), E(!1))), z && e(n);
         };
         return document.addEventListener("keydown", t, !1), ()=>{
             document.removeEventListener("keydown", t, !1);
         };
     }), o.useEffect(()=>{
-        $ && d.current && d.current.focus();
+        $ && f.current && f.current.focus();
     }, [
         $
     ]), o.useEffect(()=>{
@@ -194,59 +195,59 @@ const Ue = (param)=>{
             let { value: n  } = param;
             return n === e;
         })) == null ? void 0 : t.text : "";
-    }, xe = {
+    }, we = {
         tabIndex: 0,
-        onFocus: ()=>w(!0),
-        onBlur: ()=>w(!1),
+        onFocus: ()=>x(!0),
+        onBlur: ()=>x(!1),
         onClick: ()=>{
-            I(!0), w(!0);
+            E(!0), x(!0);
         },
         onKeyDown: (e)=>{
-            !D && (e.keyCode === ne || e.keyCode === te) && (p(e), I(!0));
+            !M && (e.keyCode === ne || e.keyCode === te) && (h(e), E(!0));
         }
-    };
+    }, { isDesktopOrBigger: xe  } = _e();
     var _ref, _a_transformOrigin;
-    return ge || de ? /* @__PURE__ */ b(Ve, {
-        disabled: v,
-        helperText: /* @__PURE__ */ c(Pe, {
-            error: N,
+    return ge || de ? /* @__PURE__ */ _(Me, {
+        disabled: I,
+        helperText: /* @__PURE__ */ r(He, {
+            error: R,
             leftText: J
         }),
-        fieldRef: S,
-        fullWidth: k,
+        fieldRef: g,
+        fullWidth: P,
         children: [
-            m && /* @__PURE__ */ c(De, {
-                error: N,
-                forId: G,
-                inputState: K ? "focused" : ((_ref = l !== null && l !== void 0 ? l : f) !== null && _ref !== void 0 ? _ref : (Y = h.current) == null ? void 0 : Y.value) ? "filled" : "default",
+            d && /* @__PURE__ */ r(Fe, {
+                error: R,
+                forId: Z,
+                inputState: K ? "focused" : ((_ref = l !== null && l !== void 0 ? l : p) !== null && _ref !== void 0 ? _ref : (Y = S.current) == null ? void 0 : Y.value) ? "filled" : "default",
                 optional: V,
-                children: m
+                children: d
             }),
-            /* @__PURE__ */ b("select", {
-                className: We[v ? "disabled" : "default"],
-                id: G,
-                "aria-invalid": !!N,
+            /* @__PURE__ */ _("select", {
+                className: $e[I ? "disabled" : "default"],
+                id: Z,
+                "aria-invalid": !!R,
                 value: l,
                 required: !V,
-                disabled: v,
+                disabled: I,
                 onChange: (e)=>{
                     A && A(e.target.value);
                 },
-                onFocus: ()=>w(!0),
+                onFocus: ()=>x(!0),
                 onBlur: (e)=>{
-                    w(!1), P == null || P(e);
+                    x(!1), D == null || D(e);
                 },
                 ref: (e)=>{
                     [
-                        h,
-                        d
+                        S,
+                        f
                     ].forEach((t)=>{
                         t.current = e;
                     });
                 },
                 style: {
-                    paddingTop: m ? 24 : 16,
-                    paddingBottom: m ? 8 : 16,
+                    paddingTop: d ? 24 : 16,
+                    paddingBottom: d ? 8 : 16,
                     // Override default browser opacity when disabled. This opacity also affects the label.
                     // Without this fix, the label is invisible when disabled
                     opacity: 1
@@ -257,7 +258,7 @@ const Ue = (param)=>{
                         return !!e;
                     }) && // if no "empty" option exists, insert a dummy empty option
                     // this is needed to allow a native select with no selected option
-                    /* @__PURE__ */ c("option", {
+                    /* @__PURE__ */ r("option", {
                         value: "",
                         style: {
                             display: "none"
@@ -265,100 +266,102 @@ const Ue = (param)=>{
                     }),
                     u.map((param)=>/* @__PURE__ */ {
                         let { value: e , text: t  } = param;
-                        return c("option", {
+                        return r("option", {
                             value: e,
                             children: t
                         }, e);
                     })
                 ]
             }),
-            /* @__PURE__ */ c("div", {
-                className: Be,
+            /* @__PURE__ */ r("div", {
+                className: qe,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ c(oe, {
+                children: /* @__PURE__ */ r(oe, {
                     size: 20
                 })
             })
         ]
-    }) : /* @__PURE__ */ b(ye, {
+    }) : /* @__PURE__ */ _(Ne, {
         children: [
-            /* @__PURE__ */ b("div", _object_spread_props(_object_spread({
-                className: Le[k ? "fullWidth" : "default"],
+            /* @__PURE__ */ _("div", _object_spread_props(_object_spread({
+                className: ze[P ? "fullWidth" : "default"],
                 role: "button",
                 "aria-haspopup": "listbox",
-                ref: d
-            }, !v && xe), {
+                ref: f
+            }, !I && we), {
                 children: [
-                    /* @__PURE__ */ c(Me, {
+                    /* @__PURE__ */ r(Ge, {
                         style: {
                             visibility: "hidden"
                         },
-                        fullWidth: k,
-                        endIcon: /* @__PURE__ */ c(oe, {
+                        fullWidth: P,
+                        endIcon: /* @__PURE__ */ r(oe, {
                             size: 20
                         }),
                         focus: K,
-                        label: m,
+                        label: d,
                         value: l,
-                        shrinkLabel: !!(l || f),
-                        name: s,
+                        shrinkLabel: !!(l || p),
+                        name: i,
                         helperText: J,
                         required: !V,
-                        disabled: v,
-                        id: G,
-                        error: N,
-                        inputRef: h,
-                        fieldRef: S
+                        disabled: I,
+                        id: Z,
+                        error: R,
+                        inputRef: S,
+                        fieldRef: g
                     }),
-                    /* @__PURE__ */ c("div", {
-                        className: $e[v ? "disabled" : "default"],
+                    /* @__PURE__ */ r("div", {
+                        className: je[I ? "disabled" : "default"],
                         style: {
-                            top: m ? 27 : 17
+                            top: xe ? d ? 28 : 18 : d ? 25 : 16
                         },
-                        children: Ee(l !== null && l !== void 0 ? l : f)
+                        children: Ee(l !== null && l !== void 0 ? l : p)
                     })
                 ]
             })),
-            D && /* @__PURE__ */ c(He, {
+            M && /* @__PURE__ */ r(Ze, {
                 onPress: (e)=>{
-                    I(!1), p(e);
+                    E(!1), h(e);
                 },
                 disableScroll: !0,
-                children: /* @__PURE__ */ c("ul", {
-                    style: Ke({
-                        [y.top]: a.top ? `${a.top}px` : "",
-                        [y.left]: a.left ? `${a.left}px` : "",
-                        [y.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
-                        [y.minWidth]: a.minWidth ? `${a.minWidth}px` : "",
-                        [y.transformOrigin]: (_a_transformOrigin = a.transformOrigin) !== null && _a_transformOrigin !== void 0 ? _a_transformOrigin : ""
-                    }),
-                    onPointerDown: p,
-                    className: ee(qe, j ? re.show : re.hide),
-                    role: "listbox",
-                    ref: g,
-                    children: u.map((param)=>/* @__PURE__ */ {
-                        let { value: e , text: t  } = param;
-                        return c("li", {
-                            role: "option",
-                            "aria-selected": e === (f !== null && f !== void 0 ? f : l),
-                            "data-value": e,
-                            className: ee(je, {
-                                [ze]: e === T || e === (f !== null && f !== void 0 ? f : l)
-                            }),
-                            onPointerDown: p,
-                            onClick: ()=>Q(e),
-                            ref: (n)=>{
-                                n ? C.current.set(e, n) : C.current.delete(e);
-                            },
-                            children: /* @__PURE__ */ c(Ze, {
-                                regular: !0,
-                                children: t
-                            })
-                        }, e);
+                children: /* @__PURE__ */ r(Qe, {
+                    children: /* @__PURE__ */ r("ul", {
+                        style: Je({
+                            [C.top]: a.top ? `${a.top}px` : "",
+                            [C.left]: a.left ? `${a.left}px` : "",
+                            [C.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
+                            [C.minWidth]: a.minWidth ? `${a.minWidth}px` : "",
+                            [C.transformOrigin]: (_a_transformOrigin = a.transformOrigin) !== null && _a_transformOrigin !== void 0 ? _a_transformOrigin : ""
+                        }),
+                        onPointerDown: h,
+                        className: ee(Ke, z ? se.show : se.hide),
+                        role: "listbox",
+                        ref: T,
+                        children: u.map((param)=>/* @__PURE__ */ {
+                            let { value: e , text: t  } = param;
+                            return r("li", {
+                                role: "option",
+                                "aria-selected": e === (p !== null && p !== void 0 ? p : l),
+                                "data-value": e,
+                                className: ee(Ue, {
+                                    [Xe]: e === v || e === (p !== null && p !== void 0 ? p : l)
+                                }),
+                                onPointerDown: h,
+                                onClick: ()=>Q(e),
+                                ref: (n)=>{
+                                    n ? N.current.set(e, n) : N.current.delete(e);
+                                },
+                                children: /* @__PURE__ */ r(Le, {
+                                    regular: !0,
+                                    children: t
+                                })
+                            }, e);
+                        })
                     })
                 })
             })
         ]
     });
-}, dt = Ue;
-export { dt as default };
+}, St = Ye;
+export { St as default };

package/dist-es/skins/blau.js

@@ -299,6 +299,16 @@ const e = {
             },
             text10: {
                 weight: "light"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     });

package/dist-es/skins/defaults.js

@@ -31,6 +31,16 @@ const t = {
     },
     indicator: {
         weight: "medium"
+    },
+    tabsLabel: {
+        size: {
+            mobile: 16,
+            desktop: 18
+        },
+        lineHeight: {
+            mobile: 24,
+            desktop: 24
+        }
     }
 }, e = {
     button: "4px",

package/dist-es/skins/movistar-legacy.js

@@ -303,6 +303,16 @@ const e = {
             },
             text10: {
                 weight: "bold"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     };

package/dist-es/skins/movistar.js

@@ -303,6 +303,16 @@ const e = {
             },
             text10: {
                 weight: "bold"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     });

package/dist-es/skins/o2.js

@@ -303,6 +303,16 @@ const e = {
             },
             text10: {
                 weight: "light"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     });

package/dist-es/skins/telefonica.js

@@ -36,7 +36,7 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, c = ()=>({
+}, d = ()=>({
         name: o,
         colors: {
             appBarBackground: e.white,
@@ -297,7 +297,17 @@ const e = {
             },
             text10: {
                 weight: "regular"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     });
-export { c as getTelefonicaSkin, e as palette };
+export { d as getTelefonicaSkin, e as palette };

package/dist-es/skins/vivo-new.js

@@ -297,6 +297,16 @@ const e = {
             },
             text10: {
                 weight: "regular"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 18,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     });

package/dist-es/skins/vivo.js

@@ -297,6 +297,16 @@ const e = {
             },
             text10: {
                 weight: "light"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     });