@telefonica/mistica 17.6.0 → 17.8.0

package/dist-es/sidenav-bar.js

@@ -51,12 +51,12 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as n, jsxs as g, Fragment as me } from "react/jsx-runtime";
+import { jsx as n, jsxs as g, Fragment as he } from "react/jsx-runtime";
 import * as t from "react";
 import l from "classnames";
 import { CSSTransition as Ue } from "react-transition-group";
-import { COLLAPSE_DURATION_MS as G, logo as je, logoCollapsed as Ke, logoDefault as $e, headerControls as qe, headerControlsCollapsed as Ge, headerSlot as Ze, headerSlotCollapsed as Je, headerBase as Qe, regionBackground as B, headerNegativeBoxedBackground as Xe, scrollSpacerDivider as fe, scrollDividerVariant as Z, headerScrollSpacer as Ye, bodyContent as en, scrollDivider as nn, footerScrollDivider as on, footerBase as pe, footerCollapsed as he, footerScrollSpacer as tn, bodyBase as rn, bodyWithFixedFooter as sn, footerFixed as an, mainColumn as ln, columnSeparator as dn, doublePanelTransitionClasses as cn, container as un, columnsWhileMoving as vn, boxedBorder as mn, boxed as fn, withRightDivider as pn, DEFAULT_WIDTH as hn, LOGO_SIZE as Sn, standaloneItem as gn, CONTENT_DURATION_MS as En, COLLAPSED_WIDTH as bn, contentDurationVar as Dn, collapseDurationVar as xn, sidenavPanelWidthVar as Cn, sidenavWidthVar as Bn } from "./sidenav-bar.css-mistica.js";
-import { normalizeVariant as Se, useThemeVariant as Ln, ThemeVariant as Nn } from "./theme-variant-context.js";
+import { COLLAPSE_DURATION_MS as G, logo as je, logoCollapsed as Ke, logoDefault as $e, headerControls as qe, headerControlsCollapsed as Ge, headerSlot as Ze, headerSlotCollapsed as Je, headerBase as Qe, regionBackground as B, headerNegativeBoxedBackground as Xe, scrollSpacerDivider as Se, scrollDividerVariant as Z, headerScrollSpacer as Ye, bodyContent as en, scrollDivider as nn, footerScrollDivider as on, footerBase as ge, footerCollapsed as Ee, footerScrollSpacer as tn, bodyBase as rn, bodyWithFixedFooter as sn, footerFixed as an, mainColumn as ln, columnSeparator as dn, doublePanelTransitionClasses as cn, container as un, columnsWhileMoving as vn, boxedBorder as mn, boxed as fn, withRightDivider as pn, DEFAULT_WIDTH as hn, LOGO_SIZE as Sn, standaloneItem as gn, CONTENT_DURATION_MS as En, COLLAPSED_WIDTH as bn, contentDurationVar as Dn, collapseDurationVar as xn, sidenavPanelWidthVar as Cn, sidenavWidthVar as Bn } from "./sidenav-bar.css-mistica.js";
+import { normalizeVariant as be, useThemeVariant as Ln, ThemeVariant as Nn } from "./theme-variant-context.js";
 import { getPrefixedDataAttributes as On } from "./utils/dom.js";
 import { applyCssVars as Tn } from "./utils/css.js";
 import { useScreenSize as wn, useTheme as Pn } from "./hooks.js";
@@ -73,10 +73,10 @@ import { useIsMotionOff as _n } from "./sidenav-bar-motion.js";
 import { useSidenavRailKeyboard as zn } from "./sidenav-bar-keyboard.js";
 import { SidenavBarContext as Hn } from "./sidenav-bar-context.js";
 import { shouldShowBoxedBorder as Un } from "./boxed.js";
-import { getFirstLevelItems as J, renderSidenavLogo as jn, renderSidenavSlot as ge, isSidenavSection as Ee, getSidenavSectionTitle as Kn } from "./sidenav-bar-data.js";
+import { getFirstLevelItems as J, renderSidenavLogo as jn, renderSidenavSlot as De, isSidenavSection as xe, getSidenavSectionTitle as Kn } from "./sidenav-bar-data.js";
 import { sidenavLandmark as $n, sidenavExpand as qn, sidenavCollapse as Gn } from "./text-tokens.js";
 import { isSidenavMoving as Zn } from "./sidenav-bar-types.js";
-const be = function(e) {
+const Ce = function(e) {
     let { standalone: r } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
     return /* @__PURE__ */ n(Vn, {
         id: e.id,
@@ -93,78 +93,78 @@ const be = function(e) {
         newTab: e.newTab,
         onNavigate: e.onNavigate
     }, e.id);
-}, De = (e, r)=>J(e).find((a)=>{
+}, Be = (e, r)=>J(e).find((a)=>{
         var _a_children;
         return (_a_children = a.children) === null || _a_children === void 0 ? void 0 : _a_children.some((d)=>d.id === r);
-    }), xe = (e, r)=>J(e).find((a)=>a.id === r), Jn = (e)=>{
+    }), Le = (e, r)=>J(e).find((a)=>a.id === r), Jn = (e)=>{
     const r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), d = (u, p)=>{
         var _u_children, _u_children1;
         r.has(u.id) ? a.add(u.id) : r.add(u.id), p > 0 && ((_u_children = u.children) === null || _u_children === void 0 ? void 0 : _u_children.length) && console.error(`SidenavItem "${u.label}" at level ${p} cannot have children. SidenavItem supports maximum 2 levels of nesting. Only level 0 items can have children.`), (_u_children1 = u.children) === null || _u_children1 === void 0 ? void 0 : _u_children1.forEach((E)=>d(E, p + 1));
     };
     J(e).forEach((u)=>d(u, 0)), a.size > 0 && console.error(`SidenavBar: duplicate item IDs found: ${Array.from(a).join(", ")}. All SidenavItem ids must be unique within a SidenavBar.`);
 }, Qn = (e)=>e.map((r, a)=>{
-        if (Ee(r)) {
-            const d = e[a - 1], u = !!r.dividerTop && !!d && Ee(d) && !!d.dividerBottom, p = a === 0, E = a === e.length - 1;
+        if (xe(r)) {
+            const d = e[a - 1], u = !!r.dividerTop && !!d && xe(d) && !!d.dividerBottom, p = a === 0, E = a === e.length - 1;
             return /* @__PURE__ */ n("div", {
                 role: "listitem",
                 children: /* @__PURE__ */ n(Fn, {
                     title: r.title,
                     dividerTop: r.dividerTop && !p && !u,
                     dividerBottom: r.dividerBottom && !E,
-                    children: r.items.map((V)=>be(V))
+                    children: r.items.map((V)=>Ce(V))
                 })
             }, `${Kn(r.title).text}-${a}`);
         }
         return /* @__PURE__ */ n("div", {
             className: gn,
             role: "listitem",
-            children: be(r, {
+            children: Ce(r, {
                 standalone: !0
             })
         }, r.id);
     }), Co = (param)=>{
     let { entries: e, "aria-label": r, variant: a = "default", boxed: d = !1, divider: u = !0, showCollapseButton: p = !0, collapsed: E, defaultCollapsed: V = !1, onCollapse: M, doublePanel: c = !1, width: Q = hn, logo: O, headerSlot: X, footerSlot: b, fixedFooter: T = !1, background: F, selectedItemId: v, onSelectedItemIdChange: A, dataAttributes: Y } = param;
-    const { isTabletOrSmaller: Ce } = wn(), { componentProperties: Be, texts: W, t: _ } = Pn(), ee = r !== null && r !== void 0 ? r : W.sidenavLandmark || _($n), h = _n(), Le = Se(Ln()), [D, f] = t.useState(()=>{
-        var _De;
-        var _De_id;
-        return c && e && v ? (_De_id = (_De = De(e, v)) === null || _De === void 0 ? void 0 : _De.id) !== null && _De_id !== void 0 ? _De_id : null : null;
-    }), z = E !== void 0, [Ne, Oe] = t.useState(V), s = z ? !!E : Ne, L = t.useRef(null), ne = t.useRef(null), [x, Te] = t.useState(null), [oe, te] = t.useState(s);
+    const { isTabletOrSmaller: ee } = wn(), { componentProperties: Ne, texts: W, t: _ } = Pn(), ne = r !== null && r !== void 0 ? r : W.sidenavLandmark || _($n), h = _n(), Oe = be(Ln()), [D, f] = t.useState(()=>{
+        var _Be;
+        var _Be_id;
+        return c && e && v ? (_Be_id = (_Be = Be(e, v)) === null || _Be === void 0 ? void 0 : _Be.id) !== null && _Be_id !== void 0 ? _Be_id : null : null;
+    }), z = E !== void 0, [Te, we] = t.useState(V), s = z ? !!E : Te, L = t.useRef(null), oe = t.useRef(null), [x, Pe] = t.useState(null), [te, re] = t.useState(s);
     t.useEffect(()=>{
         if (h) {
-            te(s);
+            re(s);
             return;
         }
-        const o = setTimeout(()=>te(s), G);
+        const o = setTimeout(()=>re(s), G);
         return ()=>clearTimeout(o);
     }, [
         s,
         h
     ]);
-    const w = s ? oe ? "collapsed" : "collapsing" : oe ? "expanding" : "expanded", [re, se] = t.useState(null), ie = t.useCallback((o)=>{
-        c && se(o), f(null), o && (A === null || A === void 0 ? void 0 : A(o));
+    const w = s ? te ? "collapsed" : "collapsing" : te ? "expanding" : "expanded", [se, ie] = t.useState(null), ae = t.useCallback((o)=>{
+        c && ie(o), f(null), o && (A === null || A === void 0 ? void 0 : A(o));
     }, [
         c,
         A
-    ]), [we, Pe] = t.useState(v);
-    if (v !== we && (Pe(v), re !== null && se(null), c && e && v && re !== v)) {
-        const o = De(e, v);
+    ]), [Re, ye] = t.useState(v);
+    if (v !== Re && (ye(v), se !== null && ie(null), c && e && v && se !== v)) {
+        const o = Be(e, v);
         if (o) f(o.id);
         else {
             var _m_children;
-            const m = xe(e, v);
+            const m = Le(e, v);
             m && !((_m_children = m.children) === null || _m_children === void 0 ? void 0 : _m_children.length) && f(null);
         }
     }
-    const [Re, ye] = t.useState(c);
-    c !== Re && (ye(c), c || f(null));
+    const [Ie, ke] = t.useState(c);
+    c !== Ie && (ke(c), c || f(null));
     var _e_length;
-    const [Ie, ke] = t.useState((_e_length = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length !== void 0 ? _e_length : 0);
+    const [Ve, Me] = t.useState((_e_length = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length !== void 0 ? _e_length : 0);
     var _e_length1, _e_length2;
-    ((_e_length1 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length1 !== void 0 ? _e_length1 : 0) !== Ie && (ke((_e_length2 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length2 !== void 0 ? _e_length2 : 0), f(null)), t.useEffect(()=>{
+    ((_e_length1 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length1 !== void 0 ? _e_length1 : 0) !== Ve && (Me((_e_length2 = e === null || e === void 0 ? void 0 : e.length) !== null && _e_length2 !== void 0 ? _e_length2 : 0), f(null)), t.useEffect(()=>{
         if (!c || !D) return;
         const o = (S)=>{
-            const ve = L.current;
-            ve && (S.composedPath().includes(ve) || f(null));
+            const pe = L.current;
+            pe && (S.composedPath().includes(pe) || f(null));
         }, m = (S)=>{
             S.key === "Escape" && f(null);
         };
@@ -177,19 +177,22 @@ const be = function(e) {
     ]);
     const C = F ? {
         backgroundColor: F
-    } : void 0, [H, Ve] = t.useState(!1), [P, Me] = t.useState(!1), [Fe, ae] = t.useState(!1), U = t.useRef(null), R = t.useRef(null), y = t.useRef(null);
+    } : void 0, [H, le] = t.useState(!1), [P, de] = t.useState(!1), [Fe, ce] = t.useState(!1), U = t.useRef(null), R = t.useRef(null), y = t.useRef(null);
     t.useEffect(()=>{
-        if (!y.current) return;
+        if (!y.current) {
+            le(!1), de(!1);
+            return;
+        }
         const o = new IntersectionObserver((param)=>{
             let [S] = param;
-            Ve(!S.isIntersecting);
+            le(!S.isIntersecting);
         }, {
             root: y.current,
             threshold: 0,
             rootMargin: "1px 0px 1px 0px"
         }), m = new IntersectionObserver((param)=>{
             let [S] = param;
-            Me(!S.isIntersecting);
+            de(!S.isIntersecting);
         }, {
             root: y.current,
             threshold: 0,
@@ -198,12 +201,14 @@ const be = function(e) {
         return U.current && o.observe(U.current), R.current && m.observe(R.current), ()=>{
             o.disconnect(), m.disconnect();
         };
-    }, []);
+    }, [
+        ee
+    ]);
     const j = Zn(w), Ae = t.useCallback(()=>{
         if (j) return;
         const o = !s;
         if (!z) {
-            Oe(o), M === null || M === void 0 ? void 0 : M(o);
+            we(o), M === null || M === void 0 ? void 0 : M(o);
             return;
         }
         M === null || M === void 0 ? void 0 : M(o);
@@ -219,7 +224,7 @@ const be = function(e) {
             doublePanel: c,
             panelOpenForItemId: D,
             setPanelOpenForItemId: f,
-            selectItemAndClosePanel: ie,
+            selectItemAndClosePanel: ae,
             containerRef: L,
             selectedItemId: v !== null && v !== void 0 ? v : null
         }), [
@@ -228,15 +233,15 @@ const be = function(e) {
         h,
         c,
         D,
-        ie,
+        ae,
         L,
         v
     ]), _e = zn(L), ze = s ? bn : Q;
     process.env.NODE_ENV !== "production" && e && Jn(e);
-    const i = Se(a);
-    if (Ce) return /* @__PURE__ */ n(Wn, {
+    const i = be(a);
+    if (ee) return /* @__PURE__ */ n(Wn, {
         entries: e,
-        "aria-label": ee,
+        "aria-label": ne,
         variant: i,
         logo: O,
         headerSlot: X,
@@ -248,10 +253,10 @@ const be = function(e) {
     const K = {
         collapsed: s,
         state: w
-    }, le = O === void 0 || O === !0, $ = jn(O, K, /* @__PURE__ */ n(yn, {
+    }, ue = O === void 0 || O === !0, $ = jn(O, K, /* @__PURE__ */ n(yn, {
         size: Sn,
         type: "isotype"
-    })), de = p ? /* @__PURE__ */ n(Rn, {
+    })), ve = p ? /* @__PURE__ */ n(Rn, {
         Icon: s ? In : kn,
         type: "neutral",
         backgroundType: "transparent",
@@ -259,8 +264,8 @@ const be = function(e) {
         onPress: Ae,
         "aria-label": s ? W.sidenavExpand || _(qn) : W.sidenavCollapse || _(Gn),
         "aria-expanded": !s
-    }) : null, q = ge(X, K), ce = ge(b, K), I = !!($ || de || q), He = d && Un(i, Le, Be.showBoxedBorder), N = c && D && e ? xe(e, D) : void 0, k = N === null || N === void 0 ? void 0 : N.children, ue = !!(k === null || k === void 0 ? void 0 : k.length);
-    return N && (k === null || k === void 0 ? void 0 : k.length) && ((x === null || x === void 0 ? void 0 : x.label) !== N.label || (x === null || x === void 0 ? void 0 : x.children) !== k) && Te({
+    }) : null, q = De(X, K), me = De(b, K), I = !!($ || ve || q), He = d && Un(i, Oe, Ne.showBoxedBorder), N = c && D && e ? Le(e, D) : void 0, k = N === null || N === void 0 ? void 0 : N.children, fe = !!(k === null || k === void 0 ? void 0 : k.length);
+    return N && (k === null || k === void 0 ? void 0 : k.length) && ((x === null || x === void 0 ? void 0 : x.label) !== N.label || (x === null || x === void 0 ? void 0 : x.children) !== k) && Pe({
         itemId: N.id,
         label: N.label,
         children: k
@@ -270,7 +275,7 @@ const be = function(e) {
             value: We,
             children: /* @__PURE__ */ g("nav", _object_spread_props(_object_spread({
                 ref: L,
-                "aria-label": ee,
+                "aria-label": ne,
                 onKeyDown: _e,
                 className: l(un, {
                     [pn[i]]: u && !d,
@@ -290,7 +295,7 @@ const be = function(e) {
                 children: [
                     /* @__PURE__ */ g("div", {
                         className: l(ln, {
-                            [dn[i]]: ue || Fe
+                            [dn[i]]: fe || Fe
                         }),
                         children: [
                             I && /* @__PURE__ */ g("div", {
@@ -306,13 +311,13 @@ const be = function(e) {
                                         children: [
                                             $ && /* @__PURE__ */ n("div", {
                                                 className: l(je, {
-                                                    [$e]: le,
+                                                    [$e]: ue,
                                                     [Ke]: s
                                                 }),
-                                                "aria-hidden": le || void 0,
+                                                "aria-hidden": ue || void 0,
                                                 children: $
                                             }),
-                                            de
+                                            ve
                                         ]
                                     }),
                                     q && /* @__PURE__ */ n("div", {
@@ -347,7 +352,7 @@ const be = function(e) {
                                         }),
                                         style: I && H ? C : void 0,
                                         children: I && H && /* @__PURE__ */ n("div", {
-                                            className: l(fe, Z[i])
+                                            className: l(Se, Z[i])
                                         })
                                     }),
                                     e && // The body is the list of the first level. Each entry is one of its items.
@@ -356,7 +361,7 @@ const be = function(e) {
                                         role: "list",
                                         children: Qn(e)
                                     }),
-                                    b && !T && /* @__PURE__ */ g(me, {
+                                    b && !T && /* @__PURE__ */ g(he, {
                                         children: [
                                             /* @__PURE__ */ n("div", {
                                                 ref: R
@@ -365,15 +370,15 @@ const be = function(e) {
                                                 className: l(nn, on, Z[i])
                                             }),
                                             /* @__PURE__ */ n("div", {
-                                                className: l(pe, B[i], {
-                                                    [he]: s
+                                                className: l(ge, B[i], {
+                                                    [Ee]: s
                                                 }),
                                                 style: C,
-                                                children: ce
+                                                children: me
                                             })
                                         ]
                                     }),
-                                    b && T && /* @__PURE__ */ g(me, {
+                                    b && T && /* @__PURE__ */ g(he, {
                                         children: [
                                             /* @__PURE__ */ n("div", {
                                                 ref: R
@@ -384,7 +389,7 @@ const be = function(e) {
                                                 }),
                                                 style: P ? C : void 0,
                                                 children: P && /* @__PURE__ */ n("div", {
-                                                    className: l(fe, Z[i])
+                                                    className: l(Se, Z[i])
                                                 })
                                             })
                                         ]
@@ -392,26 +397,26 @@ const be = function(e) {
                                 ]
                             }),
                             b && T && /* @__PURE__ */ n("div", {
-                                className: l(pe, an, B[i], {
-                                    [he]: s
+                                className: l(ge, an, B[i], {
+                                    [Ee]: s
                                 }),
                                 style: C,
-                                children: ce
+                                children: me
                             })
                         ]
                     }),
                     x && /* @__PURE__ */ n(Ue, {
-                        in: ue,
+                        in: fe,
                         timeout: h ? 0 : G,
-                        nodeRef: ne,
+                        nodeRef: oe,
                         classNames: cn,
                         appear: !0,
                         mountOnEnter: !0,
                         unmountOnExit: !0,
-                        onEnter: ()=>ae(!0),
-                        onExited: ()=>ae(!1),
+                        onEnter: ()=>ce(!0),
+                        onExited: ()=>ce(!1),
                         children: /* @__PURE__ */ n(An, {
-                            ref: ne,
+                            ref: oe,
                             itemId: x.itemId,
                             label: x.label,
                             variant: i,

package/dist-es/skeletons.css-mistica.js

@@ -1,8 +1,8 @@
 /* empty css                                     */ /* empty css                                     */ var o = {
-    default: "v17_6_zopolw5 v17_6_zopolw0 v17_6_1y2v1nf9d",
-    alternative: "v17_6_zopolw6 v17_6_zopolw1 v17_6_1y2v1nf9d",
-    brand: "v17_6_zopolw7 v17_6_zopolw2 v17_6_1y2v1nf9g",
-    negative: "v17_6_zopolw8 v17_6_zopolw3 v17_6_1y2v1nf9f",
-    media: "v17_6_zopolw9 v17_6_zopolw4 v17_6_1y2v1nf9f"
-}, l = "v17_6_zopolwc v17_6_zopolwb v17_6_1y2v1nfrg", n = "v17_6_zopolwd v17_6_1y2v1nfre v17_6_1y2v1nfrt v17_6_1y2v1nfrn", r = "v17_6_zopolwe v17_6_1y2v1nfrw v17_6_1y2v1nfry", p = "v17_6_zopolwg v17_6_zopolwf v17_6_1y2v1nfrx";
+    default: "v17_8_zopolw5 v17_8_zopolw0 v17_8_1y2v1nf9d",
+    alternative: "v17_8_zopolw6 v17_8_zopolw1 v17_8_1y2v1nf9d",
+    brand: "v17_8_zopolw7 v17_8_zopolw2 v17_8_1y2v1nf9g",
+    negative: "v17_8_zopolw8 v17_8_zopolw3 v17_8_1y2v1nf9f",
+    media: "v17_8_zopolw9 v17_8_zopolw4 v17_8_1y2v1nf9f"
+}, l = "v17_8_zopolwc v17_8_zopolwb v17_8_1y2v1nfrg", n = "v17_8_zopolwd v17_8_1y2v1nfre v17_8_1y2v1nfrt v17_8_1y2v1nfrn", r = "v17_8_zopolwe v17_8_1y2v1nfrw v17_8_1y2v1nfry", p = "v17_8_zopolwg v17_8_zopolwf v17_8_1y2v1nfrx";
 export { l as animation, o as background, r as circle, p as line, n as row };

package/dist-es/skins/blau.js

@@ -765,10 +765,21 @@ const e = {
             chipLabel: {
                 lineHeight: {
                     desktop: 24,
-                    mobile: 20
+                    mobile: 24
                 },
                 size: {
                     desktop: 16,
+                    mobile: 16
+                },
+                weight: "medium"
+            },
+            chipLabelSmall: {
+                lineHeight: {
+                    desktop: 20,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 14,
                     mobile: 14
                 },
                 weight: "medium"

package/dist-es/skins/defaults.js

@@ -287,6 +287,17 @@ const e = {
         },
         size: {
             desktop: 16,
+            mobile: 16
+        },
+        weight: "medium"
+    },
+    chipLabelSmall: {
+        lineHeight: {
+            desktop: 24,
+            mobile: 20
+        },
+        size: {
+            desktop: 14,
             mobile: 14
         },
         weight: "medium"

package/dist-es/skins/esimflag.js

@@ -769,10 +769,21 @@ const e = {
             chipLabel: {
                 lineHeight: {
                     desktop: 24,
-                    mobile: 20
+                    mobile: 24
                 },
                 size: {
                     desktop: 16,
+                    mobile: 16
+                },
+                weight: "medium"
+            },
+            chipLabelSmall: {
+                lineHeight: {
+                    desktop: 20,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 14,
                     mobile: 14
                 },
                 weight: "medium"

package/dist-es/skins/movistar.js

@@ -784,6 +784,17 @@ const e = {
                 },
                 weight: "medium"
             },
+            chipLabelSmall: {
+                lineHeight: {
+                    desktop: 22,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 16,
+                    mobile: 14
+                },
+                weight: "medium"
+            },
             drawerTitle: {
                 lineHeight: {
                     desktop: 26,

package/dist-es/skins/o2.js

@@ -772,10 +772,21 @@ const e = {
             chipLabel: {
                 lineHeight: {
                     desktop: 24,
-                    mobile: 20
+                    mobile: 24
                 },
                 size: {
                     desktop: 16,
+                    mobile: 16
+                },
+                weight: "medium"
+            },
+            chipLabelSmall: {
+                lineHeight: {
+                    desktop: 20,
+                    mobile: 20
+                },
+                size: {
+                    desktop: 14,
                     mobile: 14
                 },
                 weight: "medium"