@telefonica/mistica 14.6.0 → 14.7.0

package/dist/hero.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import Tag from './tag';
-import { ButtonLink, ButtonPrimary } from './button';
-import Video from './video';
-import Image from './image';
+import type Image from './image';
+import type Video from './video';
+import type { ButtonLink, ButtonPrimary } from './button';
+import type Tag from './tag';
 import type { DataAttributes, RendersElement, RendersNullableElement } from './utils/types';
 type HeroProps = {
     height?: string;

package/dist/highlighted-card.css-mistica.js

@@ -16,7 +16,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./highlighted-card.css.ts.vanilla.js");
-var f = "wrb8722 _1y2v1nf5i _1y2v1nf5n _1y2v1nf5u _1y2v1nf60", y = "wrb8725 _1y2v1nf5i", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nf5i _1y2v1nf5o _1y2v1nf5w _1y2v1nf6b _1y2v1nf6p _1y2v1nf72",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nf5i _1y2v1nf5o _1y2v1nf5w _1y2v1nf6b _1y2v1nf6p _1y2v1nf72"
-}, r = "_1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5i _1y2v1nf60 _1y2v1nf9g _1y2v1nf7p _1y2v1nf5c";
+var f = "wrb8722 _1y2v1nf5o _1y2v1nf5t _1y2v1nf60 _1y2v1nf66", y = "wrb8725 _1y2v1nf5o", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nf5o _1y2v1nf5u _1y2v1nf62 _1y2v1nf6h _1y2v1nf6v _1y2v1nf78",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nf5o _1y2v1nf5u _1y2v1nf62 _1y2v1nf6h _1y2v1nf6v _1y2v1nf78"
+}, r = "_1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5o _1y2v1nf66 _1y2v1nf9m _1y2v1nf7v _1y2v1nf5i";

package/dist/highlighted-card.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { ButtonLink } from './button';
+import type { ButtonLink, NullableButtonElement } from './button';
 import type { DataAttributes, RendersNullableElement, TrackingEvent } from './utils/types';
-import type { NullableButtonElement } from './button';
 interface CommonProps {
     title: string;
     titleLinesMax?: number;

package/dist/icon-button.css-mistica.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "base", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./icon-button.css.ts.vanilla.js");
-var t = "yqt1oe1 _1y2v1nf5m";
+var t = "yqt1oe1 _1y2v1nf5s";

package/dist/image.css-mistica.js

@@ -14,4 +14,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./image.css.ts.vanilla.js");
-var f = 300, n = "_17tt25r1 _1y2v1nf9q _1y2v1nfa4 _1y2v1nf5k _1y2v1nf7p _1y2v1nf85 _1y2v1nfba _1y2v1nf9d _1y2v1nf9e";
+var f = 300, n = "_17tt25r1 _1y2v1nfa6 _1y2v1nfak _1y2v1nf5q _1y2v1nf7v _1y2v1nf8b _1y2v1nfbq _1y2v1nf9j _1y2v1nf9k";

package/dist/image.js

@@ -151,9 +151,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k), r1 = (param)=>/* @__PURE__ */ {
-    let { children: t , value: r  } = param;
+    let { children: t , value: s  } = param;
     return (0, _jsxRuntimeJs.jsx)(k.Provider, {
-        value: r,
+        value: s,
         children: t
     });
 }, P = (param)=>/* @__PURE__ */ {
@@ -172,7 +172,7 @@ const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k),
     });
 }, K = (param)=>{
     let { noBorderRadius: t  } = param;
-    const r = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: c  } = (0, _hooksJs.useTheme)();
+    const s = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: c  } = (0, _hooksJs.useTheme)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         style: {
             height: "100%",
@@ -180,8 +180,8 @@ const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k),
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: r ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton,
-            borderRadius: t ? void 0 : 8
+            backgroundColor: s ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton,
+            borderRadius: t ? void 0 : _skinContractCssMisticaJs.vars.borderRadii.container
         },
         children: c === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(P, {
             style: {
@@ -198,7 +198,7 @@ const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k),
                 maxWidth: 48
             },
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
-                fill: r ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium,
+                fill: s ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium,
                 d: "M20.25 4.622c.832 0 1.591.664 1.591 1.393v11.98c0 .728-.76 1.392-1.591 1.392H3.746c-.863 0-1.591-.639-1.591-1.392V6.015c0-.754.728-1.393 1.59-1.393H20.25zm0 13.558c.193 0 .367-.146.39-.207l-.003-11.956a.555.555 0 00-.384-.182H3.746c-.21 0-.364.132-.387.19v11.973c.014.044.171.182.387.182H20.25zM6.152 9.068c0 .554.451 1.005 1.003 1.005a1.006 1.006 0 000-2.01c-.552 0-1.003.45-1.003 1.005zm1.003 2.215a2.216 2.216 0 010-4.43c1.218 0 2.207.993 2.207 2.215a2.213 2.213 0 01-2.207 2.215zm12.42 1.337l-3.18-2.44a.605.605 0 00-.742.005l-3.636 2.9-.879-.83a.6.6 0 00-.798-.025l-5.168 4.317a.607.607 0 00.386 1.07.59.59 0 00.384-.14l4.759-3.975 3.308 3.123c.241.23.625.221.852-.025a.605.605 0 00-.026-.854l-1.932-1.824 3.131-2.496 2.807 2.154a.603.603 0 00.846-.112.609.609 0 00-.112-.848z"
             })
         })
@@ -208,8 +208,8 @@ const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k),
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, s1 = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
-    var { aspectRatio: t = "1:1" , alt: r = "" , dataAttributes: c , noBorderRadius: l , src: I , onError: d , onLoad: a , loadingFallback: p = !0 , errorFallback: x = !0  } = _param, o = _objectWithoutProperties(_param, [
+}, s1 = /*#__PURE__*/ _react.forwardRef((_param, x)=>{
+    var { aspectRatio: t = "1:1" , alt: s = "" , dataAttributes: c , noBorderRadius: l , src: I , onError: d , onLoad: a , loadingFallback: R = !0 , errorFallback: p = !0  } = _param, o = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -220,27 +220,27 @@ const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k),
         "loadingFallback",
         "errorFallback"
     ]);
-    const C = _react.useRef(), R = O(), m = l != null ? l : !R, [u, f] = _react.useState(!1), [S, g] = _react.useState(!0), [M, v] = _react.useState(!1), n = typeof t == "number" ? t : U[t], b = p && !!(n !== 0 || o.width && o.height), H = x && !!(n !== 0 || o.width && o.height), h = _react.useCallback(()=>{
+    const C = _react.useRef(), y = O(), m = l != null ? l : !y, [u, f] = _react.useState(!1), [S, g] = _react.useState(!0), [M, b] = _react.useState(!1), n = typeof t == "number" ? t : U[t], v = R && !!(n !== 0 || o.width && o.height), H = p && !!(n !== 0 || o.width && o.height), h = _react.useCallback(()=>{
         f(!1), g(!1), setTimeout(()=>{
-            v(!0);
+            b(!0);
         }, _imageCssMisticaJs.FADE_IN_DURATION_MS), a == null || a();
     }, [
         a
     ]), z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(c)), {
-        style: _objectSpread({}, S && b ? {
+        style: _objectSpread({}, S && v ? {
             opacity: 0
         } : {
             opacity: 1
         }),
-        ref: (0, _commonJs.combineRefs)(C, y),
+        ref: (0, _commonJs.combineRefs)(C, x),
         src: I,
         className: (0, _classnames.default)(_imageCssMisticaJs.image, (0, _sprinklesCssMisticaJs.sprinkles)({
             position: n !== 0 ? "absolute" : "static",
-            borderRadius: m ? void 0 : 8
+            borderRadius: m ? void 0 : _skinContractCssMisticaJs.vars.borderRadii.container
         })),
-        alt: r,
+        alt: s,
         onError: ()=>{
-            f(!0), g(!1), v(!0), d == null || d();
+            f(!0), g(!1), b(!0), d == null || d();
         },
         onLoad: h
     }));
@@ -257,7 +257,7 @@ const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k),
         width: o.width,
         height: o.height,
         children: [
-            b && !M && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            v && !M && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",

package/dist/index.d.ts

@@ -59,7 +59,12 @@ export { default as EmptyStateCard } from './empty-state-card';
 export { default as Callout } from './callout';
 export { default as Avatar } from './avatar';
 export { useModalState } from './modal-context-provider';
-export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo, } from './navigation-bar';
+export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, } from './navigation-bar';
+export { 
+/**
+ * @deprecated This component is deprecated, please use Logo instead
+ */
+Logo as NavigationBarLogo, Logo, MovistarLogo, VivoLogo, O2Logo, TelefonicaLogo, BlauLogo, } from './logo';
 export { default as Image } from './image';
 export { default as Chip } from './chip';
 export { default as Video } from './video';
@@ -97,7 +102,7 @@ export { pxToRem } from './utils/css';
 export { applyAlpha } from './utils/color';
 export { TrackingConfig, useTrackingConfig } from './utils/analytics';
 export { useDocumentVisibility } from './utils/document-visibility';
-export { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
+export { ThemeVariant, useIsInverseVariant, useThemeVariant } from './theme-variant-context';
 export type { Skin, KnownSkinName, SkinName } from './skins/types';
 export { VIVO_SKIN, O2_CLASSIC_SKIN, O2_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN, BLAU_SKIN, } from './skins/constants';
 export { getSkinByName } from './skins/utils';

package/dist/index.js

@@ -12,6 +12,7 @@ _export(exports, {
     Avatar: ()=>_avatarJs.default,
     BLAU_SKIN: ()=>_constantsJs.BLAU_SKIN,
     Badge: ()=>_badgeJs.default,
+    BlauLogo: ()=>_logoJs.BlauLogo,
     Box: ()=>_boxJs.default,
     Boxed: ()=>_boxedJs.Boxed,
     BoxedRow: ()=>_listJs.BoxedRow,
@@ -1714,6 +1715,7 @@ _export(exports, {
     Inline: ()=>_inlineJs.default,
     IntegerField: ()=>_integerFieldJs.default,
     LoadingBar: ()=>_loadingBarJs.default,
+    Logo: ()=>_logoJs.Logo,
     MOVISTAR_SKIN: ()=>_constantsJs.MOVISTAR_SKIN,
     MainNavigationBar: ()=>_navigationBarJs.MainNavigationBar,
     MainSectionHeader: ()=>_headerJs.MainSectionHeader,
@@ -1722,12 +1724,14 @@ _export(exports, {
     MediaCard: ()=>_cardJs.MediaCard,
     Menu: ()=>_menuJs.default,
     MonthField: ()=>_monthFieldJs.default,
+    MovistarLogo: ()=>_logoJs.MovistarLogo,
     NavigationBar: ()=>_navigationBarJs.NavigationBar,
     NavigationBarAction: ()=>_navigationBarJs.NavigationBarAction,
     NavigationBarActionGroup: ()=>_navigationBarJs.NavigationBarActionGroup,
-    NavigationBarLogo: ()=>_navigationBarJs.NavigationBarLogo,
+    NavigationBarLogo: ()=>_logoJs.Logo,
     NavigationBreadcrumbs: ()=>_navigationBreadcrumbsJs.default,
     NegativeBox: ()=>_negativeBoxJs.default,
+    O2Logo: ()=>_logoJs.O2Logo,
     O2_CLASSIC_SKIN: ()=>_constantsJs.O2_CLASSIC_SKIN,
     O2_SKIN: ()=>_constantsJs.O2_SKIN,
     Overlay: ()=>_overlayJs.default,
@@ -1766,6 +1770,7 @@ _export(exports, {
     TELEFONICA_SKIN: ()=>_constantsJs.TELEFONICA_SKIN,
     Tabs: ()=>_tabsJs.default,
     Tag: ()=>_tagJs.default,
+    TelefonicaLogo: ()=>_logoJs.TelefonicaLogo,
     Text: ()=>_textJs.Text,
     Text1: ()=>_textJs.Text1,
     Text10: ()=>_textJs.Text10,
@@ -1791,6 +1796,7 @@ _export(exports, {
     TrackingConfig: ()=>_analyticsJs.TrackingConfig,
     VIVO_SKIN: ()=>_constantsJs.VIVO_SKIN,
     Video: ()=>_videoJs.default,
+    VivoLogo: ()=>_logoJs.VivoLogo,
     alert: ()=>_dialogJs.alert,
     applyAlpha: ()=>_colorJs.applyAlpha,
     blauPalette: ()=>_blauJs.palette,
@@ -1822,6 +1828,7 @@ _export(exports, {
     useModalState: ()=>_modalContextProviderJs.useModalState,
     useScreenSize: ()=>_hooksJs.useScreenSize,
     useTheme: ()=>_hooksJs.useTheme,
+    useThemeVariant: ()=>_themeVariantContextJs.useThemeVariant,
     useTrackingConfig: ()=>_analyticsJs.useTrackingConfig,
     useWindowHeight: ()=>_hooksJs.useWindowHeight,
     useWindowSize: ()=>_hooksJs.useWindowSize,
@@ -1888,6 +1895,7 @@ const _calloutJs = /*#__PURE__*/ _interopRequireDefault(require("./callout.js"))
 const _avatarJs = /*#__PURE__*/ _interopRequireDefault(require("./avatar.js"));
 const _modalContextProviderJs = require("./modal-context-provider.js");
 const _navigationBarJs = require("./navigation-bar.js");
+const _logoJs = require("./logo.js");
 const _imageJs = /*#__PURE__*/ _interopRequireDefault(require("./image.js"));
 const _chipJs = /*#__PURE__*/ _interopRequireDefault(require("./chip.js"));
 const _videoJs = /*#__PURE__*/ _interopRequireDefault(require("./video.js"));

package/dist/list.css-mistica.js

@@ -14,16 +14,16 @@ _export(exports, {
     center: ()=>y,
     content: ()=>r,
     disabled: ()=>a,
-    dualActionContainer: ()=>i,
+    dualActionContainer: ()=>o,
     dualActionDivider: ()=>t,
-    dualActionLeft: ()=>o,
-    dualActionRight: ()=>g,
-    hoverBackground: ()=>e,
-    pointer: ()=>b,
-    right: ()=>c,
-    rowBody: ()=>d,
-    rowContent: ()=>u
+    dualActionLeft: ()=>i,
+    dualActionRight: ()=>e,
+    hoverBackground: ()=>b,
+    pointer: ()=>u,
+    right: ()=>d,
+    rowBody: ()=>g,
+    rowContent: ()=>c
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./list.css.ts.vanilla.js");
-var _ = "_1y2v1nf5i _1y2v1nf60 _1y2v1nf62", f = "_1y2v1nf5r _1y2v1nf8q _1y2v1nf85 _1y2v1nf60", y = "_1y2v1nf5i _1y2v1nf5x", r = "_1y2v1nf5i _1y2v1nf7p _1y2v1nf9b", a = "_2buj9g0", i = "_1y2v1nf5i _1y2v1nf5n", t = "_2buj9gi _1y2v1nf5i", o = "_1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5k _1y2v1nf9g _1y2v1nf5c _1y2v1nf72 _1y2v1nf7g _1y2v1nf63", g = "_2buj9gk _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf5k _1y2v1nf9g _1y2v1nf5c _1y2v1nf72 _1y2v1nf7g _1y2v1nf5i _1y2v1nf5x _1y2v1nf62 _1y2v1nf7q", e = "_2buj9g1", b = "_1y2v1nf9n", c = "_2buj9gb", d = "_1y2v1nf5i _1y2v1nf5o _1y2v1nf64", u = "_1y2v1nf65 _1y2v1nf6j _1y2v1nf6x _1y2v1nf7b _1y2v1nf7p _1y2v1nf9g _1y2v1nf5c";
+var _ = "_1y2v1nf5o _1y2v1nf66 _1y2v1nf68", f = "_1y2v1nf5x _1y2v1nf8w _1y2v1nf8b _1y2v1nf66", y = "_1y2v1nf5o _1y2v1nf63", r = "_1y2v1nf5o _1y2v1nf7v _1y2v1nf9h", a = "_2buj9g0", o = "_1y2v1nf5o _1y2v1nf5t", t = "_2buj9gi _1y2v1nf5o", i = "_1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5q _1y2v1nf9m _1y2v1nf5i _1y2v1nf78 _1y2v1nf7m _1y2v1nf69", e = "_2buj9gk _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5q _1y2v1nf9m _1y2v1nf5i _1y2v1nf78 _1y2v1nf7m _1y2v1nf5o _1y2v1nf63 _1y2v1nf68 _1y2v1nf7w", b = "_2buj9g1", u = "_1y2v1nfa3", d = "_2buj9gb", g = "_1y2v1nf5o _1y2v1nf5u _1y2v1nf6a", c = "_1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf7v _1y2v1nf9m _1y2v1nf5i";

package/dist/loading-bar.css-mistica.js

@@ -11,14 +11,14 @@ function _export(target, all) {
 _export(exports, {
     TRANSITION_DURATION_MS: ()=>r,
     enter: ()=>_,
-    enterActive: ()=>e,
-    exit: ()=>a,
-    exitActive: ()=>f,
-    innerProgress: ()=>y,
+    enterActive: ()=>a,
+    exit: ()=>e,
+    exitActive: ()=>y,
+    innerProgress: ()=>f,
     portal: ()=>t,
     progress: ()=>g,
-    progressContainer: ()=>i
+    progressContainer: ()=>m
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./loading-bar.css.ts.vanilla.js");
-var r = 400, _ = "_1num3qg9", e = "_1num3qga", a = "_1num3qgb", f = "_1num3qgc", y = "_1num3qg8 _1y2v1nf85", t = "_1num3qg3 _1y2v1nf5f _1y2v1nf9q _1y2v1nfa4 _1y2v1nfai", g = "_1num3qg6 _1y2v1nf5e _1y2v1nf85 _1y2v1nf7p", i = "_1y2v1nf7p _1y2v1nf9o _1y2v1nf5d _1y2v1nf3q _1y2v1nf88";
+var r = 400, _ = "_1num3qg9", a = "_1num3qga", e = "_1num3qgb", y = "_1num3qgc", f = "_1num3qg8 _1y2v1nf8b", t = "_1num3qg3 _1y2v1nf5l _1y2v1nfa6 _1y2v1nfak _1y2v1nfay", g = "_1num3qg6 _1y2v1nf5k _1y2v1nf8b _1y2v1nf7v", m = "_1y2v1nf7v _1y2v1nfa4 _1y2v1nf5j _1y2v1nf3v _1y2v1nf8e";

package/dist/logo.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { TrackingEvent } from './utils/types';
+import type { ExclusifyUnion } from './utils/utility-types';
+type LogoType = 'isotype' | 'imagotype' | 'vertical';
+type LogoPropsBase = {
+    size?: number;
+    type?: LogoType;
+};
+type LogoToProps = LogoPropsBase & {
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    to: string;
+    fullPageOnWebView?: boolean;
+    replace?: boolean;
+    'aria-label': string;
+};
+type LogoHrefProps = LogoPropsBase & {
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    href: string;
+    newTab?: boolean;
+    'aria-label': string;
+};
+type LogoOnPressProps = LogoPropsBase & {
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    onPress: () => void;
+    'aria-label': string;
+};
+type LogoProps = ExclusifyUnion<LogoPropsBase | LogoToProps | LogoHrefProps | LogoOnPressProps>;
+export declare const Logo: React.FC<LogoProps>;
+export declare const MovistarLogo: React.FC<LogoProps>;
+export declare const VivoLogo: React.FC<LogoProps>;
+export declare const O2Logo: React.FC<LogoProps>;
+export declare const TelefonicaLogo: React.FC<LogoProps>;
+export declare const BlauLogo: React.FC<LogoProps>;
+export {};