@telefonica/mistica 13.6.1 → 14.1.0

package/dist/skins/movistar.js

@@ -21,6 +21,7 @@ const e = {
     movistarBlue30: "#80CEF9",
     movistarBlue40: "#4DBAF7",
     movistarBlue55: "#008EDD",
+    movistarBlueDark: "#0B2739",
     movistarGreen: "#5CB615",
     movistarGreen10: "#EFF8E8",
     movistarGreen30: "#ADDA8A",
@@ -54,20 +55,24 @@ const e = {
     movistarProminentBlueLight20: "#CED3D7",
     movistarProminentBlueLight50: "#85939C",
     movistarProminentBlueLight70: "#546874",
-    darkModeBlack: "#191919",
-    darkModeGrey: "#242424"
-}, d = (o)=>{
-    const t = {
+    darkModeBlack: "#061824",
+    darkModeGrey: "#092130",
+    darkModeGrey2: "#EAEBEE",
+    darkModeGrey3: "#CED4D7",
+    darkModeGrey4: "#85939C",
+    darkModeGrey5: "#6D7D88",
+    darkModeGrey6: "#3C5261"
+}, d = ()=>({
         name: _constantsJs.MOVISTAR_SKIN,
         colors: {
             appBarBackground: e.white,
             background: e.white,
             backgroundContainer: e.white,
             backgroundBrand: e.movistarBlue,
-            backgroundBrandSecondary: e.movistarBlue,
-            backgroundOverlay: (0, _colorJs.applyAlpha)(e.grey6, 0.6),
+            backgroundBrandSecondary: e.movistarBlueDark,
+            backgroundOverlay: (0, _colorJs.applyAlpha)(e.movistarBlueDark, 0.6),
             backgroundSkeleton: e.grey2,
-            backgroundSkeletonInverse: e.movistarBlue55,
+            backgroundSkeletonInverse: (0, _colorJs.applyAlpha)(e.white, 0.2),
             navigationBarBackground: e.movistarBlue,
             backgroundAlternative: e.grey1,
             backgroundFeedbackBottom: e.movistarBlue,
@@ -118,19 +123,19 @@ const e = {
             navigationBarDivider: e.movistarBlue,
             badge: e.pepper55,
             feedbackErrorBackground: e.pepper,
-            feedbackInfoBackground: e.grey6,
+            feedbackInfoBackground: e.movistarBlueDark,
             brand: e.movistarBlue,
             brandHigh: e.movistarBlue55,
             inverse: e.white,
-            neutralHigh: e.grey6,
+            neutralHigh: e.movistarBlueDark,
             neutralMedium: e.grey5,
             neutralLow: e.grey1,
             promo: e.purple,
             highlight: e.pink,
-            textPrimary: e.grey6,
+            textPrimary: e.movistarBlueDark,
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
-            textSecondaryInverse: e.white,
+            textSecondaryInverse: e.movistarBlue10,
             error: e.pepper,
             success: e.movistarGreen,
             warning: e.egg,
@@ -156,19 +161,19 @@ const e = {
             neutralMediumInverse: e.grey5
         },
         darkModeColors: {
-            brand: e.movistarBlue,
             appBarBackground: e.darkModeGrey,
             background: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
             backgroundOverlay: (0, _colorJs.applyAlpha)(e.darkModeGrey, 0.8),
-            backgroundSkeleton: e.grey6,
-            backgroundSkeletonInverse: e.grey6,
+            backgroundSkeleton: e.darkModeGrey6,
+            backgroundSkeletonInverse: e.darkModeGrey6,
             navigationBarBackground: e.darkModeBlack,
             backgroundAlternative: e.darkModeGrey,
             backgroundFeedbackBottom: e.darkModeBlack,
-            skeletonWave: e.grey5,
+            skeletonWave: e.darkModeGrey5,
+            borderHigh: e.darkModeGrey4,
             borderLow: e.darkModeBlack,
             border: e.darkModeGrey,
             buttonLinkBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.05),
@@ -186,40 +191,40 @@ const e = {
             buttonSecondaryBackgroundSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
             buttonSecondaryBackgroundInverseHover: (0, _colorJs.applyAlpha)(e.white, 0.15),
             buttonSecondaryBackgroundInverseSelected: (0, _colorJs.applyAlpha)(e.white, 0.15),
-            textButtonPrimary: e.grey2,
-            textButtonPrimaryInverse: e.grey2,
-            textButtonPrimaryInverseSelected: e.grey2,
-            textButtonSecondary: e.grey2,
-            textButtonSecondarySelected: e.grey2,
-            textButtonSecondaryInverse: e.grey2,
-            textButtonSecondaryInverseSelected: e.grey2,
+            textButtonPrimary: e.darkModeGrey2,
+            textButtonPrimaryInverse: e.darkModeGrey2,
+            textButtonPrimaryInverseSelected: e.darkModeGrey2,
+            textButtonSecondary: e.darkModeGrey2,
+            textButtonSecondarySelected: e.darkModeGrey2,
+            textButtonSecondaryInverse: e.darkModeGrey2,
+            textButtonSecondaryInverseSelected: e.darkModeGrey2,
             textLink: e.movistarBlue,
             textLinkInverse: e.movistarBlue,
-            control: e.grey6,
+            control: e.darkModeGrey6,
             controlActivated: e.movistarBlue,
             loadingBar: e.movistarBlue,
             loadingBarBackground: (0, _colorJs.applyAlpha)(e.white, 0.05),
-            toggleAndroidInactive: e.grey4,
+            toggleAndroidInactive: e.darkModeGrey4,
             toggleAndroidBackgroundActive: e.movistarBlue20,
-            iosControlKnob: e.grey2,
+            iosControlKnob: e.darkModeGrey2,
             divider: (0, _colorJs.applyAlpha)(e.white, 0.05),
             dividerInverse: (0, _colorJs.applyAlpha)(e.white, 0.05),
             navigationBarDivider: e.darkModeBlack,
-            brandHigh: e.grey6,
-            inverse: e.grey2,
-            neutralHigh: e.grey2,
-            neutralMedium: e.grey5,
-            neutralLow: e.grey6,
-            textPrimary: e.grey2,
-            textPrimaryInverse: e.grey2,
-            textSecondary: e.grey4,
-            textSecondaryInverse: e.grey4,
-            textNavigationBarPrimary: e.grey2,
-            textNavigationBarSecondary: e.grey4,
-            textNavigationSearchBarHint: e.grey4,
-            textNavigationSearchBarText: e.grey2,
-            textAppBar: e.grey5,
-            textAppBarSelected: e.grey2,
+            brandHigh: e.darkModeGrey6,
+            inverse: e.darkModeGrey2,
+            neutralHigh: e.darkModeGrey2,
+            neutralMedium: e.darkModeGrey5,
+            neutralLow: e.darkModeGrey6,
+            textPrimary: e.darkModeGrey2,
+            textPrimaryInverse: e.darkModeGrey2,
+            textSecondary: e.darkModeGrey4,
+            textSecondaryInverse: e.darkModeGrey4,
+            textNavigationBarPrimary: e.darkModeGrey2,
+            textNavigationBarSecondary: e.darkModeGrey4,
+            textNavigationSearchBarHint: e.darkModeGrey4,
+            textNavigationSearchBarText: e.darkModeGrey2,
+            textAppBar: e.darkModeGrey5,
+            textAppBarSelected: e.darkModeGrey2,
             successLow: e.grey6,
             warningLow: e.grey6,
             errorLow: e.grey6,
@@ -253,8 +258,9 @@ const e = {
             },
             text10: {
                 weight: "bold"
+            },
+            cardTitle: {
+                weight: "bold"
             }
         }
-    };
-    return o === "prominent" && (t.colors.brand = e.movistarProminentBlue, t.colors.brandHigh = e.movistarProminentBlueDark, t.colors.backgroundBrand = e.movistarProminentBlue, t.colors.navigationBarBackground = e.movistarProminentBlue, t.colors.backgroundFeedbackBottom = e.movistarProminentBlue, t.colors.controlActivated = e.movistarProminentBlue, t.colors.dividerInverse = e.movistarProminentBlueDark), t;
-};
+    });

package/dist/skins/o2-classic.js

@@ -137,7 +137,7 @@ const e = {
             textPrimary: e.grey6,
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
-            textSecondaryInverse: e.white,
+            textSecondaryInverse: e.o2SkyBlueLight20,
             error: e.pepper,
             success: e.o2Green,
             warning: e.orange,

package/dist/skins/o2.js

@@ -127,7 +127,7 @@ const e = {
             textPrimary: e.grey6,
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
-            textSecondaryInverse: e.white,
+            textSecondaryInverse: e.o2BluePrimary15,
             error: e.pepper,
             success: e.o2Green,
             warning: e.o2Orange,

package/dist/skins/telefonica.js

@@ -123,7 +123,7 @@ const e = {
             textPrimary: e.grey9,
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
-            textSecondaryInverse: e.white,
+            textSecondaryInverse: e.telefonicaBlue10,
             error: e.coral,
             success: e.turquoise,
             warning: e.ambar,

package/dist/skins/types.d.ts

@@ -3,7 +3,7 @@ export type KnownSkinName = 'Movistar' | 'O2' | 'O2-classic' | 'Vivo' | 'Telefon
 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';
+type TextPresetName = 'text5' | 'text6' | 'text7' | 'text8' | 'text9' | 'text10' | 'cardTitle';
 export type TextPresetsConfig = {
     [preset in TextPresetName]: {
         weight: FontWeight;

package/dist/skins/utils.js

@@ -59,7 +59,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const C = (r, n)=>{
+const C = (r, o)=>{
     switch(r){
         case _constantsJs.BLAU_SKIN:
             return (0, _blauJs.getBlauSkin)();
@@ -72,7 +72,7 @@ const C = (r, n)=>{
         case _constantsJs.O2_CLASSIC_SKIN:
             return (0, _o2ClassicJs.getO2ClassicSkin)();
         case _constantsJs.MOVISTAR_SKIN:
-            return (0, _movistarJs.getMovistarSkin)(n);
+            return (0, _movistarJs.getMovistarSkin)();
         default:
             throw Error("Unknown skin name: " + r);
     }

package/dist/skins/vivo.js

@@ -121,7 +121,7 @@ const e = {
             textPrimary: e.grey6,
             textPrimaryInverse: e.white,
             textSecondary: e.grey5,
-            textSecondaryInverse: e.white,
+            textSecondaryInverse: e.vivoPurpleLight20,
             error: e.pepper,
             success: e.vivoGreen,
             warning: e.orange,

package/dist/theme-context-provider.js

@@ -9,8 +9,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    default: ()=>ut,
-    useIsOsDarkModeEnabled: ()=>Q
+    default: ()=>pt,
+    useIsOsDarkModeEnabled: ()=>U
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _dynamic = require("@vanilla-extract/dynamic");
@@ -101,16 +101,16 @@ function _objectSpread(target) {
     }
     return target;
 }
-const K = "(prefers-color-scheme: dark)", Q = ()=>{
+const Q = "(prefers-color-scheme: dark)", U = ()=>{
     const [t, c] = _react.useState(!1);
     return (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
         if (!window.matchMedia) return;
-        const r = window.matchMedia(K), s = ()=>{
-            c(r.matches);
+        const o = window.matchMedia(Q), i = ()=>{
+            c(o.matches);
         };
-        return r.addListener(s), s(), ()=>r.removeListener(s);
+        return o.addListener(i), i(), ()=>o.removeListener(i);
     }, []), t;
-}, U = ()=>(t)=>t, o = {
+}, X = ()=>(t)=>t, r = {
     text5: {
         weight: "light"
     },
@@ -128,14 +128,17 @@ const K = "(prefers-color-scheme: dark)", Q = ()=>{
     },
     text10: {
         weight: "light"
+    },
+    cardTitle: {
+        weight: "regular"
     }
-}, X = (t)=>({
+}, Y = (t)=>({
         headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? _themeJs.NAVBAR_HEIGHT_MOBILE : t == null ? void 0 : t.headerMobileHeight
-    }), ut = (param)=>{
-    let { theme: t , children: c , as: r  } = param;
+    }), pt = (param)=>{
+    let { theme: t , children: c , as: o  } = param;
     var v;
-    const s = _react.useRef(1), D = _react.useCallback(()=>`aria-id-hook-${s.current++}`, []), C = Q(), u = (v = t.colorScheme) != null ? v : "auto", I = t.skin.colors, w = _objectSpread({}, t.skin.colors, t.skin.darkModeColors), f = u === "auto" && C || u === "dark", p = f ? w : I, g = _react.useMemo(()=>{
-        var i, n, d, x, m, h, M, P;
+    const i = _react.useRef(1), D = _react.useCallback(()=>`aria-id-hook-${i.current++}`, []), w = U(), u = (v = t.colorScheme) != null ? v : "auto", C = t.skin.colors, I = _objectSpread({}, t.skin.colors, t.skin.darkModeColors), f = u === "auto" && w || u === "dark", p = f ? I : C, g = _react.useMemo(()=>{
+        var s, n, d, x, m, h, P, M, b;
         const l = _objectSpread({
             platform: (0, _platformJs.getPlatform)(),
             insideNovumNativeApp: (0, _platformJs.isInsideNovumNativeApp)()
@@ -149,29 +152,30 @@ const K = "(prefers-color-scheme: dark)", Q = ()=>{
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _objectSpread({}, _themeJs.dimensions, X(t.dimensions)),
+            dimensions: _objectSpread({}, _themeJs.dimensions, Y(t.dimensions)),
             textPresets: {
-                text5: _objectSpread({}, o.text5, (i = t.skin.textPresets) == null ? void 0 : i.text5),
-                text6: _objectSpread({}, o.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
-                text7: _objectSpread({}, o.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
-                text8: _objectSpread({}, o.text8, (x = t.skin.textPresets) == null ? void 0 : x.text8),
-                text9: _objectSpread({}, o.text9, (m = t.skin.textPresets) == null ? void 0 : m.text9),
-                text10: _objectSpread({}, o.text10, (h = t.skin.textPresets) == null ? void 0 : h.text10)
+                text5: _objectSpread({}, r.text5, (s = t.skin.textPresets) == null ? void 0 : s.text5),
+                text6: _objectSpread({}, r.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
+                text7: _objectSpread({}, r.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
+                text8: _objectSpread({}, r.text8, (x = t.skin.textPresets) == null ? void 0 : x.text8),
+                text9: _objectSpread({}, r.text9, (m = t.skin.textPresets) == null ? void 0 : m.text9),
+                text10: _objectSpread({}, r.text10, (h = t.skin.textPresets) == null ? void 0 : h.text10),
+                cardTitle: _objectSpread({}, r.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle)
             },
             Link: (M = t.Link) != null ? M : _themeJs.AnchorLink,
             isDarkMode: f,
             isIos: (0, _platformJs.getPlatform)(l) === "ios",
-            useHrefDecorator: (P = t.useHrefDecorator) != null ? P : U,
+            useHrefDecorator: (b = t.useHrefDecorator) != null ? b : X,
             useId: t.useId
         };
     }, [
         t,
         f
     ]), E = Object.fromEntries(Object.entries(p).map((param)=>{
-        let [l, i] = param;
+        let [l, s] = param;
         let n = "";
-        if (i.startsWith("#")) {
-            const [d, x, m] = (0, _colorJs.fromHexToRgb)(i);
+        if (s.startsWith("#")) {
+            const [d, x, m] = (0, _colorJs.fromHexToRgb)(s);
             n = `${d}, ${x}, ${m}`;
         }
         return [
@@ -195,7 +199,7 @@ const K = "(prefers-color-scheme: dark)", Q = ()=>{
                                 value: D,
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_screenSizeContextProviderJs.default, {
                                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_dialogJs.default, {
-                                        children: r ? /*#__PURE__*/ _react.createElement(r, {
+                                        children: o ? /*#__PURE__*/ _react.createElement(o, {
                                             style: k
                                         }, c) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
                                             children: [

package/dist/video.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
-export type AspectRatio = '1:1' | '16:9' | '12:5' | '4:3';
+export type AspectRatio = '1:1' | '16:9' | '4:3';
 export declare const RATIO: {
     '1:1': number;
     '16:9': number;
-    '12:5': number;
     '4:3': number;
 };
 type VideoSource = {

package/dist/video.js

@@ -141,7 +141,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 const C = {
     "1:1": 1,
     "16:9": 16 / 9,
-    "12:5": 12 / 5,
     "4:3": 4 / 3
 }, F = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", j = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
     var { src: t , poster: i , autoPlay: o = !(0, _platformJs.isRunningAcceptanceTest)() , muted: c = !0 , loop: m = !0 , preload: u = "none" , aspectRatio: A = "1:1" , dataAttributes: f  } = _param, n = _objectWithoutProperties(_param, [