@telefonica/mistica 14.14.0 → 14.16.0

package/dist/select.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return dt;
+        return St;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -23,6 +23,7 @@ const _dom = require("./utils/dom.js");
 const _text = require("./text.js");
 const _selectcssmistica = require("./select.css-mistica.js");
 const _dynamic = require("@vanilla-extract/dynamic");
+const _portal = require("./portal.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -119,124 +120,124 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-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;
+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 = _react.useRef(null), d = _react.useRef(null), S = _react.useRef(null), g = _react.useRef(null), C = _react.useRef(/* @__PURE__ */ new Map()), [de, fe] = _react.useState(!0), [f, pe] = _react.useState(), [D, q] = _react.useState(!1), [j, z] = _react.useState(!1), [K, w] = _react.useState(!1), [a, M] = _react.useState({}), [T, H] = _react.useState(), F = _react.useRef(null), G = (0, _hooks.useAriaId)(se), { rawValues: me , setRawValue: Z , setValue: W , formStatus: he , formErrors: U , setFormError: Se , register: B  } = (0, _formcontext.useForm)(), { platformOverrides: X  } = (0, _hooks.useTheme)(), ge = ue || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(X) || (0, _platform.isIos)(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 = _react.useRef(null), f = _react.useRef(null), g = _react.useRef(null), T = _react.useRef(null), N = _react.useRef(/* @__PURE__ */ new Map()), [de, fe] = _react.useState(!0), [p, pe] = _react.useState(), [M, q] = _react.useState(!1), [z, j] = _react.useState(!1), [K, x] = _react.useState(!1), [a, H] = _react.useState({}), [v, F] = _react.useState(), G = _react.useRef(null), Z = (0, _hooks.useAriaId)(re), { rawValues: me , setRawValue: B , setValue: W , formStatus: he , formErrors: U , setFormError: Se , register: L  } = (0, _formcontext.useForm)(), { platformOverrides: X  } = (0, _hooks.useTheme)(), ge = ue || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(X) || (0, _platform.isIos)(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;
     _react.useEffect(()=>{
-        Z({
-            name: s,
+        B({
+            name: i,
             value: l
         }), W({
-            name: s,
+            name: i,
             value: l
         });
     }, [
-        s,
-        Z,
+        i,
+        B,
         W,
         l
-    ]), _react.useEffect(()=>(B(s, {
-            input: h.current,
-            focusableElement: d.current
+    ]), _react.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
     ]), _react.useEffect(()=>{
         const e = (n)=>{
-            var E;
-            const r = {
+            var m;
+            const s = {
                 [_keycodes.UP]: -1,
                 [_keycodes.DOWN]: 1
             }[n.keyCode];
-            if (r) {
+            if (s) {
                 (0, _dom.cancelEvent)(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 === _keycodes.TAB && (0, _dom.cancelEvent)(n), n.keyCode === _keycodes.ESC && I(!1), (n.keyCode === _keycodes.ENTER || n.keyCode === _keycodes.SPACE) && ((0, _dom.cancelEvent)(n), u.findIndex((param)=>{
-                let { value: i  } = param;
-                return i === T;
-            }) !== -1 && T !== f && Q(T), I(!1))), j && e(n);
+            M && (n.keyCode === _keycodes.TAB && (0, _dom.cancelEvent)(n), n.keyCode === _keycodes.ESC && E(!1), (n.keyCode === _keycodes.ENTER || n.keyCode === _keycodes.SPACE) && ((0, _dom.cancelEvent)(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);
         };
     }), _react.useEffect(()=>{
-        $ && d.current && d.current.focus();
+        $ && f.current && f.current.focus();
     }, [
         $
     ]), _react.useEffect(()=>{
@@ -248,59 +249,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 === _keycodes.SPACE || e.keyCode === _keycodes.ENTER) && ((0, _dom.cancelEvent)(e), I(!0));
+            !M && (e.keyCode === _keycodes.SPACE || e.keyCode === _keycodes.ENTER) && ((0, _dom.cancelEvent)(e), E(!0));
         }
-    };
+    }, { isDesktopOrBigger: xe  } = (0, _hooks.useScreenSize)();
     var _ref, _a_transformOrigin;
     return ge || de ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_textfieldcomponents.FieldContainer, {
-        disabled: v,
+        disabled: I,
         helperText: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
-            error: N,
+            error: R,
             leftText: J
         }),
-        fieldRef: S,
-        fullWidth: k,
+        fieldRef: g,
+        fullWidth: P,
         children: [
-            m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
-                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__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
+                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__ */ (0, _jsxruntime.jsxs)("select", {
-                className: _selectcssmistica.selectVariants[v ? "disabled" : "default"],
-                id: G,
-                "aria-invalid": !!N,
+                className: _selectcssmistica.selectVariants[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
@@ -337,81 +338,83 @@ const Ue = (param)=>{
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-                className: _selectcssmistica.selectContainerVariants[k ? "fullWidth" : "default"],
+                className: _selectcssmistica.selectContainerVariants[P ? "fullWidth" : "default"],
                 role: "button",
                 "aria-haspopup": "listbox",
-                ref: d
-            }, !v && xe), {
+                ref: f
+            }, !I && we), {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, {
                         style: {
                             visibility: "hidden"
                         },
-                        fullWidth: k,
+                        fullWidth: P,
                         endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevrondownregular.default, {
                             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__ */ (0, _jsxruntime.jsx)("div", {
-                        className: _selectcssmistica.selectTextVariants[v ? "disabled" : "default"],
+                        className: _selectcssmistica.selectTextVariants[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__ */ (0, _jsxruntime.jsx)(_overlay.default, {
+            M && /* @__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)("ul", {
-                    style: (0, _dynamic.assignInlineVars)({
-                        [_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, j ? _selectcssmistica.optionsAnimationsVariants.show : _selectcssmistica.optionsAnimationsVariants.hide),
-                    role: "listbox",
-                    ref: g,
-                    children: u.map((param)=>/* @__PURE__ */ {
-                        let { value: e , text: t  } = param;
-                        return (0, _jsxruntime.jsx)("li", {
-                            role: "option",
-                            "aria-selected": e === (f !== null && f !== void 0 ? f : l),
-                            "data-value": e,
-                            className: (0, _classnames.default)(_selectcssmistica.menuItem, {
-                                [_selectcssmistica.menuItemSelected]: e === T || e === (f !== null && f !== void 0 ? f : l)
-                            }),
-                            onPointerDown: _dom.cancelEvent,
-                            onClick: ()=>Q(e),
-                            ref: (n)=>{
-                                n ? C.current.set(e, n) : C.current.delete(e);
-                            },
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                regular: !0,
-                                children: t
-                            })
-                        }, e);
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("ul", {
+                        style: (0, _dynamic.assignInlineVars)({
+                            [_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, z ? _selectcssmistica.optionsAnimationsVariants.show : _selectcssmistica.optionsAnimationsVariants.hide),
+                        role: "listbox",
+                        ref: T,
+                        children: u.map((param)=>/* @__PURE__ */ {
+                            let { value: e , text: t  } = param;
+                            return (0, _jsxruntime.jsx)("li", {
+                                role: "option",
+                                "aria-selected": e === (p !== null && p !== void 0 ? p : l),
+                                "data-value": e,
+                                className: (0, _classnames.default)(_selectcssmistica.menuItem, {
+                                    [_selectcssmistica.menuItemSelected]: e === v || e === (p !== null && p !== void 0 ? p : l)
+                                }),
+                                onPointerDown: _dom.cancelEvent,
+                                onClick: ()=>Q(e),
+                                ref: (n)=>{
+                                    n ? N.current.set(e, n) : N.current.delete(e);
+                                },
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                    regular: !0,
+                                    children: t
+                                })
+                            }, e);
+                        })
                     })
                 })
             })
         ]
     });
-}, dt = Ue;
+}, St = Ye;

package/dist/skins/blau.js

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

package/dist/skins/defaults.js

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

package/dist/skins/movistar-legacy.js

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

package/dist/skins/movistar.js

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

package/dist/skins/o2.js

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

package/dist/skins/telefonica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     getTelefonicaSkin: function() {
-        return c;
+        return d;
     },
     palette: function() {
         return e;
@@ -54,7 +54,7 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, c = ()=>({
+}, d = ()=>({
         name: _constants.TELEFONICA_SKIN,
         colors: {
             appBarBackground: e.white,
@@ -315,6 +315,16 @@ const e = {
             },
             text10: {
                 weight: "regular"
+            },
+            tabsLabel: {
+                size: {
+                    mobile: 16,
+                    desktop: 18
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 24
+                }
             }
         }
     });

package/dist/skins/types/index.d.ts

@@ -5,17 +5,33 @@ export type KnownSkinName = 'Movistar' | 'O2' | 'O2-classic' | 'Vivo' | 'Vivo-ne
 export type SkinName = KnownSkinName | string;
 export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
 export type FontWeight = 'light' | 'regular' | 'medium' | 'bold';
-type TextPresetName = 'text5' | 'text6' | 'text7' | 'text8' | 'text9' | 'text10' | 'cardTitle' | 'button' | 'link' | 'title1' | 'indicator';
-export type TextPresetsConfig = {
-    [preset in TextPresetName]: {
-        weight: FontWeight;
-    };
+type TextTokenConfig<PossibleFontWeights = FontWeight> = {
+    weight: PossibleFontWeights;
 };
-type PartialTextPresetsConfig = {
-    [preset in TextPresetName]?: {
-        weight?: FontWeight;
+export type TextPresetsConfig = {
+    cardTitle: TextTokenConfig;
+    button: TextTokenConfig<'regular' | 'medium'>;
+    link: TextTokenConfig<'regular' | 'medium'>;
+    title1: TextTokenConfig<'regular' | 'medium'>;
+    indicator: TextTokenConfig<'regular' | 'medium'>;
+    tabsLabel: {
+        size: {
+            mobile: number;
+            desktop: number;
+        };
+        lineHeight: {
+            mobile: number;
+            desktop: number;
+        };
     };
+    text5: TextTokenConfig;
+    text6: TextTokenConfig;
+    text7: TextTokenConfig;
+    text8: TextTokenConfig;
+    text9: TextTokenConfig;
+    text10: TextTokenConfig;
 };
+type PartialTextPresetsConfig = Partial<TextPresetsConfig>;
 export type BorderRadiiConfig = {
     button: string;
     input: string;

package/dist/skins/vivo-new.js

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

package/dist/skins/vivo.js

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