@telefonica/mistica 15.16.4 → 15.18.0

package/dist/select.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return xt;
+        return Ot;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -125,11 +125,11 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const st = (param)=>{
-    let { id: le, label: w, helperText: ue, value: fe, defaultValue: de, onChangeValue: V, name: i, fullWidth: P, options: f, optional: D, disabled: pe, error: me, onBlur: M, autoFocus: z = !1, native: he } = param;
-    var te;
-    const h = _react.useRef(null), d = _react.useRef(null), S = _react.useRef(null), v = _react.useRef(null), N = _react.useRef(/* @__PURE__ */ new Map()), [Se, ve] = _react.useState(!0), [l, ge] = _react.useState(de), [H, j] = _react.useState(!1), [K, U] = _react.useState(!1), [X, x] = _react.useState(!1), [u, F] = _react.useState({}), [g, W] = _react.useState(), G = _react.useRef(null), L = (0, _hooks.useAriaId)(le), { rawValues: Te, setRawValue: Z, setValue: $, formStatus: Ie, formErrors: J, setFormError: Ee, register: B } = (0, _formcontext.useForm)(), { platformOverrides: Q } = (0, _hooks.useTheme)(), we = he || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(Q) || (0, _platform.isIos)(Q), T = pe || Ie === "sending", R = me || !!J[i], Y = J[i] || ue, a = fe !== null && fe !== void 0 ? fe : Te[i], A = (e)=>{
-        V == null || V(e), Ee({
+const ot = (param)=>{
+    let { id: ue, label: m, helperText: de, value: fe, defaultValue: pe, onChangeValue: C, name: i, fullWidth: P, options: u, optional: D, disabled: me, error: he, onBlur: M, autoFocus: z = !1, native: Se } = param;
+    var ne;
+    const h = _react.useRef(null), d = _react.useRef(null), S = _react.useRef(null), v = _react.useRef(null), R = _react.useRef(/* @__PURE__ */ new Map()), [ve, ge] = _react.useState(!0), [g, Te] = _react.useState(pe), [H, j] = _react.useState(!1), [K, U] = _react.useState(!1), [X, O] = _react.useState(!1), [a, F] = _react.useState({}), [T, W] = _react.useState(), G = _react.useRef(null), L = (0, _hooks.useAriaId)(ue), { rawValues: Ie, setRawValue: Z, setValue: $, formStatus: Ee, formErrors: J, setFormError: we, register: B } = (0, _formcontext.useForm)(), { platformOverrides: Q } = (0, _hooks.useTheme)(), xe = Se || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(Q) || (0, _platform.isIos)(Q), I = me || Ee === "sending", A = he || !!J[i], Y = J[i] || de, l = fe !== null && fe !== void 0 ? fe : Ie[i], ee = (e)=>{
+        C == null || C(e), we({
             name: i,
             error: ""
         }), Z({
@@ -139,68 +139,68 @@ const st = (param)=>{
             name: i,
             value: e
         });
-    }, I = (e)=>{
+    }, E = (e)=>{
         if (e) {
             if (S != null && S.current) {
-                const o = S.current.getBoundingClientRect(), p = o.top, E = o.width, O = o.left, Re = o.height, y = p + Re, _ = Math.min(f.length, 8) * 48 + 16;
-                if (y + _ + 12 > window.innerHeight) {
-                    const Ae = window.innerHeight - y;
-                    if (p > Ae) {
-                        const _e = p - _;
+                const o = S.current.getBoundingClientRect(), f = o.top, x = o.width, y = o.left, Ae = o.height, b = f + Ae, V = Math.min(u.length, 8) * 48 + 16;
+                if (b + V + 12 > window.innerHeight) {
+                    const Ve = window.innerHeight - b;
+                    if (f > Ve) {
+                        const _e = f - V;
                         F({
-                            minWidth: E,
-                            left: O,
+                            minWidth: x,
+                            left: y,
                             top: Math.max(_e, 12),
-                            maxHeight: Math.min(p - 12, _),
+                            maxHeight: Math.min(f - 12, V),
                             transformOrigin: "center bottom"
                         });
                     } else F({
-                        minWidth: E,
-                        top: y,
-                        left: O,
-                        maxHeight: window.innerHeight - y - 12,
+                        minWidth: x,
+                        top: b,
+                        left: y,
+                        maxHeight: window.innerHeight - b - 12,
                         transformOrigin: "center top"
                     });
                 } else F({
-                    minWidth: E,
-                    top: y,
-                    left: O,
-                    maxHeight: _,
+                    minWidth: x,
+                    top: b,
+                    left: y,
+                    maxHeight: V,
                     transformOrigin: "center top"
                 });
             }
             j(!0), requestAnimationFrame(()=>{
                 G.current && v.current && "scrollTop" in v.current && (v.current.scrollTop = G.current), U(!0);
-            }), W(l !== null && l !== void 0 ? l : a);
+            }), W(g !== null && g !== void 0 ? g : l);
         } else U(!1), j(!1), W(void 0);
     }, q = (e)=>{
         var t;
-        G.current = (t = v.current) == null ? void 0 : t.scrollTop, I(!1), A && typeof e == "string" && A(e), typeof a > "u" && ge(e);
-    }, xe = (e)=>{
+        G.current = (t = v.current) == null ? void 0 : t.scrollTop, E(!1), ee && typeof e == "string" && ee(e), typeof l > "u" && Te(e);
+    }, Oe = (e)=>{
         var s;
         const t = (s = v.current) == null ? void 0 : s.getBoundingClientRect();
-        if (t && e && N.current.has(e)) {
-            const c = N.current.get(e), o = c == null ? void 0 : c.getBoundingClientRect();
+        if (t && e && R.current.has(e)) {
+            const c = R.current.get(e), o = c == null ? void 0 : c.getBoundingClientRect();
             if (o && o.top + o.height / 2 >= t.top + t.height) {
                 c == null || c.scrollIntoView();
                 return;
             }
             o && o.top + o.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
         }
-    }, Oe = d.current, ye = h.current;
+    }, ye = d.current, be = h.current;
     _react.useEffect(()=>{
         Z({
             name: i,
-            value: a
+            value: l
         }), $({
             name: i,
-            value: a
+            value: l
         });
     }, [
         i,
         Z,
         $,
-        a
+        l
     ]), _react.useEffect(()=>(B(i, {
             input: h.current,
             focusableElement: d.current
@@ -214,11 +214,11 @@ const st = (param)=>{
         B,
         d,
         h,
-        Oe,
-        ye
+        ye,
+        be
     ]), _react.useEffect(()=>{
         const e = (s)=>{
-            var p;
+            var f;
             const o = {
                 [_keys.UP]: -1,
                 [_keys.DOWN]: 1
@@ -226,11 +226,11 @@ const st = (param)=>{
             if (o) {
                 (0, _dom.cancelEvent)(s);
                 var _ref;
-                const E = (_ref = (p = f[f.findIndex((param)=>{
-                    let { value: O } = param;
-                    return O === g;
-                }) + o]) == null ? void 0 : p.value) !== null && _ref !== void 0 ? _ref : g;
-                W(E), xe(E);
+                const x = (_ref = (f = u[u.findIndex((param)=>{
+                    let { value: y } = param;
+                    return y === T;
+                }) + o]) == null ? void 0 : f.value) !== null && _ref !== void 0 ? _ref : T;
+                W(x), Oe(x);
             }
         }, t = (s)=>{
             if (H) switch(s.key){
@@ -238,14 +238,14 @@ const st = (param)=>{
                     (0, _dom.cancelEvent)(s);
                     break;
                 case _keys.ESC:
-                    I(!1);
+                    E(!1);
                     break;
                 case _keys.ENTER:
                 case _keys.SPACE:
-                    (0, _dom.cancelEvent)(s), f.findIndex((param)=>{
+                    (0, _dom.cancelEvent)(s), u.findIndex((param)=>{
                         let { value: c } = param;
-                        return c === g;
-                    }) !== -1 && g !== l && q(g), I(!1);
+                        return c === T;
+                    }) !== -1 && T !== g && q(T), E(!1);
                     break;
             }
             K && e(s);
@@ -258,57 +258,57 @@ const st = (param)=>{
     }, [
         z
     ]), _react.useEffect(()=>{
-        ve(!1);
+        ge(!1);
     }, []);
-    const be = (e)=>{
+    const Ne = (e)=>{
         var t;
-        return e ? (t = f.find((param)=>{
+        return e ? (t = u.find((param)=>{
             let { value: s } = param;
             return s === e;
         })) == null ? void 0 : t.text : "";
-    }, Ne = {
+    }, Re = {
         tabIndex: 0,
-        onFocus: ()=>x(!0),
-        onBlur: ()=>x(!1),
+        onFocus: ()=>O(!0),
+        onBlur: ()=>O(!1),
         onClick: ()=>{
-            I(!0), x(!0);
+            E(!0), O(!0);
         },
         onKeyDown: (e)=>{
-            !H && (e.key === _keys.SPACE || e.key === _keys.ENTER) && ((0, _dom.cancelEvent)(e), I(!0));
+            !H && (e.key === _keys.SPACE || e.key === _keys.ENTER) && ((0, _dom.cancelEvent)(e), E(!0));
         }
-    }, ee = (0, _css.pxToRem)(20);
-    var _ref, _u_transformOrigin;
+    }, te = (0, _css.pxToRem)(20), w = g !== null && g !== void 0 ? g : l;
+    var _a_transformOrigin;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
         isInverse: !1,
-        children: we || Se ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_textfieldcomponents.FieldContainer, {
-            disabled: T,
+        children: xe || ve ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_textfieldcomponents.FieldContainer, {
+            disabled: I,
             helperText: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
-                error: R,
+                error: A,
                 leftText: Y
             }),
             fieldRef: S,
             fullWidth: P,
             children: [
-                w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
-                    error: R,
+                m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
+                    error: A,
                     forId: L,
-                    inputState: X ? "focused" : ((_ref = a !== null && a !== void 0 ? a : l) !== null && _ref !== void 0 ? _ref : (te = h.current) == null ? void 0 : te.value) ? "filled" : "default",
+                    inputState: X ? "focused" : (w !== null && w !== void 0 ? w : (ne = h.current) == null ? void 0 : ne.value) ? "filled" : "default",
                     optional: D,
-                    children: w
+                    children: m
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("select", {
-                    className: (0, _classnames.default)(_selectcssmistica.selectVariants[T ? "disabled" : "default"], w ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                    className: (0, _classnames.default)(_selectcssmistica.selectVariants[I ? "disabled" : "default"], m ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
                     id: L,
-                    "aria-invalid": !!R,
-                    value: a !== null && a !== void 0 ? a : l,
+                    "aria-invalid": !!A,
+                    value: w,
                     required: !D,
-                    disabled: T,
+                    disabled: I,
                     onChange: (e)=>{
-                        q(e.target.value), A && A(e.target.value);
+                        q(e.target.value);
                     },
-                    onFocus: ()=>x(!0),
+                    onFocus: ()=>O(!0),
                     onBlur: (e)=>{
-                        x(!1), M == null || M(e);
+                        O(!1), M == null || M(e);
                     },
                     ref: (e)=>{
                         [
@@ -321,21 +321,29 @@ const st = (param)=>{
                     style: {
                         // Override default browser opacity when disabled. This opacity also affects the label.
                         // Without this fix, the label is invisible when disabled
-                        opacity: 1
+                        opacity: 1,
+                        // Use transparent color for the empty option (show below) to avoid showing it when the menu is closed
+                        color: w ? void 0 : "transparent"
                     },
                     children: [
-                        f.every((param)=>{
+                        !w && u.every((param)=>{
                             let { value: e } = 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
+                        }) && // If no "empty" option exists, insert a dummy empty option. Once an option is selected,
+                        // this empty option is removed. This is needed to allow a native select without a selected
+                        // default option.
+                        // Chrome doesn't show this option when the select menu is open (because of display: none),
+                        // but Safari does. So we use the select's label for this option, otherwise it would be shown
+                        // as an empty option, which is weirder.
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("option", {
                             value: "",
                             style: {
                                 display: "none"
-                            }
+                            },
+                            "aria-label": "",
+                            children: m
                         }),
-                        f.map((param)=>{
+                        u.map((param)=>{
                             let { value: e, text: t } = param;
                             return(// Similar issue in another lib: https://github.com/chakra-ui/chakra-ui/issues/417#issue-566611352
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("option", {
@@ -354,7 +362,7 @@ const st = (param)=>{
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _selectcssmistica.iconContainer,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevrondownregular.default, {
-                            size: ee
+                            size: te
                         })
                     })
                 })
@@ -366,7 +374,7 @@ const st = (param)=>{
                     role: "button",
                     "aria-haspopup": "listbox",
                     ref: d
-                }, !T && Ne), {
+                }, !I && Re), {
                     children: [
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, {
                             style: {
@@ -376,59 +384,59 @@ const st = (param)=>{
                             endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _selectcssmistica.iconContainer,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevrondownregular.default, {
-                                    size: ee
+                                    size: te
                                 })
                             }),
                             focus: X,
-                            label: w,
-                            value: a !== null && a !== void 0 ? a : l,
-                            shrinkLabel: !!(a || l),
+                            label: m,
+                            value: w,
+                            shrinkLabel: !!(l || g),
                             name: i,
                             helperText: Y,
                             required: !D,
-                            disabled: T,
+                            disabled: I,
                             id: L,
-                            error: R,
+                            error: A,
                             inputRef: h,
                             fieldRef: S
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: (0, _classnames.default)(_selectcssmistica.selectTextVariants[T ? "disabled" : "default"], w ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
-                            children: be(a !== null && a !== void 0 ? a : l)
+                            className: (0, _classnames.default)(_selectcssmistica.selectTextVariants[I ? "disabled" : "default"], m ? _textfieldbasecssmistica.inputWithLabel : _textfieldbasecssmistica.inputWithoutLabel),
+                            children: Ne(w)
                         })
                     ]
                 })),
                 H && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
                     onPress: (e)=>{
-                        I(!1), (0, _dom.cancelEvent)(e);
+                        E(!1), (0, _dom.cancelEvent)(e);
                     },
                     disableScroll: !0,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("ul", {
                             style: (0, _css.applyCssVars)({
-                                [_selectcssmistica.vars.top]: u.top ? `${u.top}px` : "",
-                                [_selectcssmistica.vars.left]: u.left ? `${u.left}px` : "",
-                                [_selectcssmistica.vars.maxHeight]: u.maxHeight ? `${u.maxHeight}px` : "",
-                                [_selectcssmistica.vars.minWidth]: u.minWidth ? `${u.minWidth}px` : "",
-                                [_selectcssmistica.vars.transformOrigin]: (_u_transformOrigin = u.transformOrigin) !== null && _u_transformOrigin !== void 0 ? _u_transformOrigin : ""
+                                [_selectcssmistica.vars.top]: a.top ? `${a.top}px` : "",
+                                [_selectcssmistica.vars.left]: a.left ? `${a.left}px` : "",
+                                [_selectcssmistica.vars.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
+                                [_selectcssmistica.vars.minWidth]: a.minWidth ? `${a.minWidth}px` : "",
+                                [_selectcssmistica.vars.transformOrigin]: (_a_transformOrigin = a.transformOrigin) !== null && _a_transformOrigin !== void 0 ? _a_transformOrigin : ""
                             }),
                             onPointerDown: _dom.cancelEvent,
                             className: (0, _classnames.default)(_selectcssmistica.optionsContainer, K ? _selectcssmistica.optionsAnimationsVariants.show : _selectcssmistica.optionsAnimationsVariants.hide),
                             role: "listbox",
                             ref: v,
-                            children: f.map((param)=>{
+                            children: u.map((param)=>{
                                 let { value: e, text: t } = param;
                                 return /* @__PURE__ */ (0, _jsxruntime.jsx)("li", {
                                     role: "option",
-                                    "aria-selected": e === (l !== null && l !== void 0 ? l : a),
+                                    "aria-selected": e === (g !== null && g !== void 0 ? g : l),
                                     "data-value": e,
                                     className: (0, _classnames.default)(_selectcssmistica.menuItem, {
-                                        [_selectcssmistica.menuItemSelected]: e === g || e === (l !== null && l !== void 0 ? l : a)
+                                        [_selectcssmistica.menuItemSelected]: e === T || e === (g !== null && g !== void 0 ? g : l)
                                     }),
                                     onPointerDown: _dom.cancelEvent,
                                     onClick: ()=>q(e),
                                     ref: (s)=>{
-                                        s ? N.current.set(e, s) : N.current.delete(e);
+                                        s ? R.current.set(e, s) : R.current.delete(e);
                                     },
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         regular: !0,
@@ -442,4 +450,4 @@ const st = (param)=>{
             ]
         })
     });
-}, xt = st;
+}, Ot = ot;

package/dist/skins/blau.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     getBlauSkin: function() {
-        return u;
+        return d;
     },
     palette: function() {
         return e;
@@ -56,7 +56,7 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, u = ()=>({
+}, d = ()=>({
         name: _constants.BLAU_SKIN,
         colors: {
             backgroundBrand: e.blauBluePrimary,
@@ -376,23 +376,111 @@ const e = {
             navigationBar: {
                 weight: "medium"
             },
+            text1: {
+                size: {
+                    mobile: 12,
+                    desktop: 14
+                },
+                lineHeight: {
+                    mobile: 16,
+                    desktop: 20
+                }
+            },
+            text2: {
+                size: {
+                    mobile: 14,
+                    desktop: 16
+                },
+                lineHeight: {
+                    mobile: 20,
+                    desktop: 24
+                }
+            },
+            text3: {
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
+            },
+            text4: {
+                size: {
+                    mobile: 18,
+                    desktop: 20
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 28
+                }
+            },
             text5: {
-                weight: "light"
+                weight: "light",
+                size: {
+                    mobile: 20,
+                    desktop: 28
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32
+                }
             },
             text6: {
-                weight: "light"
+                weight: "light",
+                size: {
+                    mobile: 24,
+                    desktop: 32
+                },
+                lineHeight: {
+                    mobile: 32,
+                    desktop: 40
+                }
             },
             text7: {
-                weight: "light"
+                weight: "light",
+                size: {
+                    mobile: 28,
+                    desktop: 40
+                },
+                lineHeight: {
+                    mobile: 32,
+                    desktop: 48
+                }
             },
             text8: {
-                weight: "light"
+                weight: "light",
+                size: {
+                    mobile: 32,
+                    desktop: 48
+                },
+                lineHeight: {
+                    mobile: 40,
+                    desktop: 56
+                }
             },
             text9: {
-                weight: "light"
+                weight: "light",
+                size: {
+                    mobile: 40,
+                    desktop: 56
+                },
+                lineHeight: {
+                    mobile: 48,
+                    desktop: 64
+                }
             },
             text10: {
-                weight: "light"
+                weight: "light",
+                size: {
+                    mobile: 48,
+                    desktop: 64
+                },
+                lineHeight: {
+                    mobile: 56,
+                    desktop: 72
+                }
             }
         }
     });

package/dist/skins/defaults.js

@@ -10,30 +10,118 @@ function _export(target, all) {
 }
 _export(exports, {
     defaultBorderRadiiConfig: function() {
-        return e;
+        return i;
     },
     defaultTextPresetsConfig: function() {
-        return t;
+        return e;
     }
 });
-const t = {
+const e = {
+    text1: {
+        size: {
+            mobile: 12,
+            desktop: 14
+        },
+        lineHeight: {
+            mobile: 16,
+            desktop: 20
+        }
+    },
+    text2: {
+        size: {
+            mobile: 14,
+            desktop: 16
+        },
+        lineHeight: {
+            mobile: 20,
+            desktop: 24
+        }
+    },
+    text3: {
+        size: {
+            mobile: 16,
+            desktop: 18
+        },
+        lineHeight: {
+            mobile: 24,
+            desktop: 24
+        }
+    },
+    text4: {
+        size: {
+            mobile: 18,
+            desktop: 20
+        },
+        lineHeight: {
+            mobile: 24,
+            desktop: 28
+        }
+    },
     text5: {
-        weight: "light"
+        weight: "light",
+        size: {
+            mobile: 20,
+            desktop: 28
+        },
+        lineHeight: {
+            mobile: 24,
+            desktop: 32
+        }
     },
     text6: {
-        weight: "light"
+        weight: "light",
+        size: {
+            mobile: 24,
+            desktop: 32
+        },
+        lineHeight: {
+            mobile: 32,
+            desktop: 40
+        }
     },
     text7: {
-        weight: "light"
+        weight: "light",
+        size: {
+            mobile: 28,
+            desktop: 40
+        },
+        lineHeight: {
+            mobile: 32,
+            desktop: 48
+        }
     },
     text8: {
-        weight: "light"
+        weight: "light",
+        size: {
+            mobile: 32,
+            desktop: 48
+        },
+        lineHeight: {
+            mobile: 40,
+            desktop: 56
+        }
     },
     text9: {
-        weight: "light"
+        weight: "light",
+        size: {
+            mobile: 40,
+            desktop: 56
+        },
+        lineHeight: {
+            mobile: 48,
+            desktop: 64
+        }
     },
     text10: {
-        weight: "light"
+        weight: "light",
+        size: {
+            mobile: 48,
+            desktop: 64
+        },
+        lineHeight: {
+            mobile: 56,
+            desktop: 72
+        }
     },
     cardTitle: {
         weight: "regular"
@@ -75,7 +163,7 @@ const t = {
             desktop: 24
         }
     }
-}, e = {
+}, i = {
     button: "4px",
     input: "8px",
     container: "8px",