@telefonica/mistica 15.16.3 → 15.17.0

package/dist/skins/tu.js

@@ -379,23 +379,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: "medium"
+                weight: "medium",
+                size: {
+                    mobile: 20,
+                    desktop: 28
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32
+                }
             },
             text6: {
-                weight: "medium"
+                weight: "medium",
+                size: {
+                    mobile: 24,
+                    desktop: 32
+                },
+                lineHeight: {
+                    mobile: 32,
+                    desktop: 40
+                }
             },
             text7: {
-                weight: "medium"
+                weight: "medium",
+                size: {
+                    mobile: 28,
+                    desktop: 40
+                },
+                lineHeight: {
+                    mobile: 32,
+                    desktop: 48
+                }
             },
             text8: {
-                weight: "medium"
+                weight: "medium",
+                size: {
+                    mobile: 32,
+                    desktop: 48
+                },
+                lineHeight: {
+                    mobile: 40,
+                    desktop: 56
+                }
             },
             text9: {
-                weight: "medium"
+                weight: "medium",
+                size: {
+                    mobile: 40,
+                    desktop: 56
+                },
+                lineHeight: {
+                    mobile: 48,
+                    desktop: 64
+                }
             },
             text10: {
-                weight: "medium"
+                weight: "medium",
+                size: {
+                    mobile: 48,
+                    desktop: 64
+                },
+                lineHeight: {
+                    mobile: 56,
+                    desktop: 72
+                }
             }
         }
     });

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

@@ -5,38 +5,46 @@ export type KnownSkinName = 'Movistar' | 'O2' | 'O2-new' | 'Vivo' | 'Vivo-new' |
 export type SkinName = KnownSkinName | string;
 export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
 export type FontWeight = 'light' | 'regular' | 'medium' | 'bold';
-type TextTokenConfig<PossibleFontWeights = FontWeight> = {
+type TextWeightTokenConfig<PossibleFontWeights = FontWeight> = {
     weight: PossibleFontWeights;
+    size?: never;
+    lineHeight?: never;
 };
-export type TextPresetsConfig = {
-    cardTitle: TextTokenConfig;
-    button: TextTokenConfig<'regular' | 'medium'>;
-    link: TextTokenConfig<'regular' | 'medium'>;
-    title1: TextTokenConfig<'regular' | 'medium'>;
-    title2: {
-        weight: FontWeight;
-        size: {
-            mobile: number;
-            desktop: number;
-        };
-        lineHeight: {
-            mobile: number;
-            desktop: number;
-        };
+type TextSizeTokenConfig = {
+    weight?: never;
+    size: {
+        mobile: number;
+        desktop: number;
     };
-    indicator: TextTokenConfig<'regular' | 'medium'>;
-    tabsLabel: {
-        weight: FontWeight;
-        size: {
-            mobile: number;
-            desktop: number;
-        };
-        lineHeight: {
-            mobile: number;
-            desktop: number;
-        };
+    lineHeight: {
+        mobile: number;
+        desktop: number;
     };
-    navigationBar: TextTokenConfig;
+};
+type TextTokenConfig<PossibleFontWeights = FontWeight> = {
+    weight: PossibleFontWeights;
+    size: {
+        mobile: number;
+        desktop: number;
+    };
+    lineHeight: {
+        mobile: number;
+        desktop: number;
+    };
+};
+export type TextPresetsConfig = {
+    cardTitle: TextWeightTokenConfig;
+    button: TextWeightTokenConfig<'regular' | 'medium'>;
+    link: TextWeightTokenConfig<'regular' | 'medium'>;
+    title1: TextWeightTokenConfig<'regular' | 'medium'>;
+    title2: TextTokenConfig;
+    indicator: TextWeightTokenConfig<'regular' | 'medium'>;
+    tabsLabel: TextTokenConfig;
+    navigationBar: TextWeightTokenConfig;
+    text1: TextSizeTokenConfig;
+    text2: TextSizeTokenConfig;
+    text3: TextSizeTokenConfig;
+    text4: TextSizeTokenConfig;
     text5: TextTokenConfig;
     text6: TextTokenConfig;
     text7: TextTokenConfig;

package/dist/skins/vivo-new.js

@@ -171,7 +171,7 @@ const e = {
             textNavigationBarSecondary: e.vivoPurpleLight50,
             textNavigationSearchBarHint: e.vivoPurpleLight50,
             textNavigationSearchBarText: e.white,
-            textAppBar: e.grey4,
+            textAppBar: e.grey5,
             textAppBarSelected: e.vivoPurple,
             customTabsBackground: e.white,
             tagTextPromo: e.vivoPurple,
@@ -374,23 +374,111 @@ const e = {
             navigationBar: {
                 weight: "regular"
             },
+            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: "regular"
+                weight: "regular",
+                size: {
+                    mobile: 20,
+                    desktop: 28
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32
+                }
             },
             text6: {
-                weight: "regular"
+                weight: "regular",
+                size: {
+                    mobile: 24,
+                    desktop: 32
+                },
+                lineHeight: {
+                    mobile: 32,
+                    desktop: 40
+                }
             },
             text7: {
-                weight: "regular"
+                weight: "regular",
+                size: {
+                    mobile: 28,
+                    desktop: 40
+                },
+                lineHeight: {
+                    mobile: 32,
+                    desktop: 48
+                }
             },
             text8: {
-                weight: "regular"
+                weight: "regular",
+                size: {
+                    mobile: 32,
+                    desktop: 48
+                },
+                lineHeight: {
+                    mobile: 40,
+                    desktop: 56
+                }
             },
             text9: {
-                weight: "regular"
+                weight: "regular",
+                size: {
+                    mobile: 40,
+                    desktop: 56
+                },
+                lineHeight: {
+                    mobile: 48,
+                    desktop: 64
+                }
             },
             text10: {
-                weight: "regular"
+                weight: "regular",
+                size: {
+                    mobile: 48,
+                    desktop: 64
+                },
+                lineHeight: {
+                    mobile: 56,
+                    desktop: 72
+                }
             }
         }
     });

package/dist/skins/vivo.js

@@ -374,23 +374,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/snackbar.js

@@ -126,60 +126,60 @@ const Z = [
     "CONSECUTIVE",
     "BUTTON"
 ], ee = 5e3, re = 1e4, te = /*#__PURE__*/ _react.forwardRef((param, I)=>{
-    let { message: m, buttonText: n, buttonAccessibilityLabel: f, duration: t, onClose: o, type: a, withDismiss: u = !1, dataAttributes: g } = param;
-    const { texts: d } = (0, _hooks.useTheme)(), [s, T] = _react.useState(!1), { width: i, ref: k } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: D } = (0, _hooks.useScreenSize)(), c = i > (D ? 160 : 128), R = _react.useRef(null), v = t === 1 / 0 && !n || u, p = _react.useRef(o);
+    let { message: m, buttonText: n, buttonAccessibilityLabel: u, duration: t, onClose: o, type: i, withDismiss: d = !1, dataAttributes: O } = param;
+    const { texts: p } = (0, _hooks.useTheme)(), [s, a] = _react.useState(!1), { width: R, ref: c } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: D } = (0, _hooks.useScreenSize)(), l = R > (D ? 160 : 128), E = _react.useRef(null), g = t === 1 / 0 && !n || d, T = _react.useRef(o);
     _react.useEffect(()=>{
-        p.current = o;
+        T.current = o;
     }, [
         o
     ]);
-    const l = _react.useCallback((O)=>{
-        T(!1), setTimeout(()=>{
+    const f = _react.useCallback((v)=>{
+        a(!1), setTimeout(()=>{
             var h;
-            (h = p.current) == null || h.call(p, O);
+            (h = T.current) == null || h.call(T, v);
         }, process.env.NODE_ENV === "test" ? 0 : _snackbarcssmistica.TRANSITION_TIME_IN_MS);
     }, []);
-    return _react.useImperativeHandle(I, ()=>_object_spread_props(_object_spread({}, R), {
-            close: l
+    return _react.useImperativeHandle(I, ()=>_object_spread_props(_object_spread({}, E), {
+            close: f
         }), [
-        l
+        f
     ]), _react.useEffect(()=>{
-        const O = setTimeout(()=>{
-            T(!0);
-        }, 50), h = t !== 1 / 0 ? setTimeout(()=>l({
+        const v = setTimeout(()=>{
+            a(!0);
+        }, 50), h = t !== 1 / 0 ? setTimeout(()=>f({
                 action: "TIMEOUT"
             }), t) : void 0;
         return ()=>{
-            clearTimeout(O), clearTimeout(h);
+            clearTimeout(v), clearTimeout(h);
         };
     }, [
-        l,
+        f,
         t
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         className: _snackbarcssmistica.snackbarContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            ref: R,
+            ref: E,
             className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
                 [_snackbarcssmistica.snackbarOpen]: s
             }),
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
                 role: "alert",
-                className: (0, _classnames.default)(_snackbarcssmistica.wrapper, a === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
+                className: (0, _classnames.default)(_snackbarcssmistica.wrapper, i === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
                     [_snackbarcssmistica.wrapperOpen]: s
                 })
-            }, (0, _dom.getPrefixedDataAttributes)(g, "SnackBar")), {
+            }, (0, _dom.getPrefixedDataAttributes)(O, "SnackBar")), {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
-                            flexDirection: c ? "column" : "row",
-                            alignItems: c ? void 0 : "center"
+                            flexDirection: l ? "column" : "row",
+                            alignItems: l ? void 0 : "center"
                         })),
-                        style: v && !c ? {
+                        style: g && !l ? {
                             paddingRight: 32
                         } : void 0,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                style: v && c ? {
+                                style: g && l ? {
                                     paddingRight: 32
                                 } : void 0,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
@@ -190,7 +190,7 @@ const Z = [
                             }),
                             n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_snackbarcssmistica.button, {
-                                    [_snackbarcssmistica.longButton]: c
+                                    [_snackbarcssmistica.longButton]: l
                                 }),
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                                     className: (0, _sprinklescssmistica.sprinkles)({
@@ -200,32 +200,32 @@ const Z = [
                                         padding: 0,
                                         background: "transparent"
                                     }),
-                                    ref: k,
+                                    ref: c,
                                     onPress: ()=>{
-                                        l({
+                                        f({
                                             action: "BUTTON"
                                         });
                                     },
-                                    "aria-label": f,
+                                    "aria-label": u,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         medium: !0,
                                         forceMobileSizes: !0,
                                         truncate: !0,
-                                        color: a === "CRITICAL" ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textLinkSnackbar,
+                                        color: i === "CRITICAL" ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textLinkSnackbar,
                                         children: n
                                     })
                                 })
                             })
                         ]
                     }),
-                    v ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                    g ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                         onPress: ()=>{
-                            l({
+                            f({
                                 action: "DISMISS"
                             });
                         },
-                        "aria-label": d.closeButtonLabel,
-                        className: _snackbarcssmistica.dismissButton[c ? "topRight" : "centered"],
+                        "aria-label": p.closeButtonLabel,
+                        className: _snackbarcssmistica.dismissButton[l ? "topRight" : "centered"],
                         style: {
                             display: "flex",
                             width: 32,
@@ -243,48 +243,50 @@ const Z = [
             }))
         })
     });
-}), ne = /*#__PURE__*/ _react.forwardRef((param, g)=>{
-    let { message: m, buttonText: n, buttonAccessibilityLabel: f, duration: t, onClose: o = ()=>{}, type: a = "INFORMATIVE", withDismiss: u } = param;
+}), ne = /*#__PURE__*/ _react.forwardRef((param, O)=>{
+    let { message: m, buttonText: n, buttonAccessibilityLabel: u, duration: t, onClose: o = ()=>{}, type: i = "INFORMATIVE", withDismiss: d } = param;
     const I = n ? re : ee;
     t = Math.max(t !== null && t !== void 0 ? t : I, I);
-    const d = (0, _webviewbridge.isWebViewBridgeAvailable)(), s = _react.useRef(o);
+    const p = (0, _webviewbridge.isWebViewBridgeAvailable)(), s = _react.useRef(o), a = _react.useRef(!1);
     return _react.useEffect(()=>{
         s.current = o;
     }, [
         o
     ]), _react.useEffect(()=>{
-        d && (0, _webviewbridge.nativeMessage)({
+        p && !a.current && (a.current = !0, (0, _webviewbridge.nativeMessage)({
             message: m,
             // @ts-expect-error duration can be 'PERSISTENT' in new webview-bridge lib versions, and old apps will ignore it
             duration: t === 1 / 0 ? "PERSISTENT" : void 0,
             buttonText: n,
-            buttonAccessibilityLabel: f,
-            type: a,
-            withDismiss: u
-        }).then((T)=>{
-            const i = T;
-            i != null && i.action && Z.includes(i.action) ? s.current({
-                action: i.action
+            buttonAccessibilityLabel: u,
+            type: i,
+            withDismiss: d
+        }).then((R)=>{
+            const c = R;
+            c != null && c.action && Z.includes(c.action) ? s.current({
+                action: c.action
             }) : s.current({
                 action: "DISMISS"
             });
-        });
+        }).finally(()=>{
+            a.current = !1;
+        }));
     }, [
-        f,
+        u,
         n,
         t,
         m,
-        d,
-        a,
-        u
-    ]), d ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
-        ref: g,
+        p,
+        i,
+        d
+    ]), p ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(te, {
+        ref: O,
         message: m,
         duration: t,
         buttonText: n,
-        buttonAccessibilityLabel: f,
-        type: a,
+        buttonAccessibilityLabel: u,
+        type: i,
         onClose: s.current,
-        withDismiss: u
+        withDismiss: d
     });
 }), he = ne;