@telefonica/mistica 14.48.0 → 15.1.0

package/dist/image.js

@@ -20,7 +20,7 @@ _export(exports, {
         return S;
     },
     default: function() {
-        return f1;
+        return g1;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -177,9 +177,9 @@ const X = (param)=>{
             strokeWidth: "2"
         })
     });
-}, Y = /*#__PURE__*/ _react.forwardRef((param, c)=>{
-    let { borderRadius: e, withIcon: s = !0, border: d, className: m } = param;
-    const o = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: a } = (0, _hooks.useTheme)();
+}, Y = /*#__PURE__*/ _react.forwardRef((param, o)=>{
+    let { borderRadius: e, withIcon: d = !0, border: c, className: m } = param;
+    const a = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             height: "100%",
@@ -187,14 +187,14 @@ const X = (param)=>{
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: o ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
+            backgroundColor: a ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
             boxSizing: "border-box",
-            border: d ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
+            border: c ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
             borderRadius: e
         },
-        ref: c,
+        ref: o,
         className: m,
-        children: s ? a === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
+        children: d ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -209,7 +209,7 @@ const X = (param)=>{
                 maxWidth: 48
             },
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                fill: o ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
+                fill: a ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.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"
             })
         }) : void 0
@@ -220,7 +220,7 @@ const X = (param)=>{
     "7:10": 7 / 10,
     "4:3": 4 / 3
 }, x = "1:1", p = /*#__PURE__*/ _react.forwardRef((_param, E)=>{
-    var { aspectRatio: e = x, alt: s = "", dataAttributes: d, noBorderRadius: m, src: c, onError: o, onLoad: a, loadingFallback: A = !0, errorFallback: B = !0 } = _param, i = _object_without_properties(_param, [
+    var { aspectRatio: e = x, alt: d = "", dataAttributes: c, noBorderRadius: m, src: o, onError: a, onLoad: n, loadingFallback: A = !0, errorFallback: B = !0 } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -232,18 +232,22 @@ const X = (param)=>{
         "errorFallback"
     ]);
     var v;
-    const h = (0, _hooks.useAriaId)(), l = _react.useRef(), u = i.circular ? _imagecssmistica.circularBorderRadius : m ? _imagecssmistica.noBorderRadius : _imagecssmistica.defaultBorderRadius, [b, w] = _react.useState(!c), [H, I] = _react.useState(!1), g = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : S[e], f = A && !!(g !== 0 || i.width && i.height), N = B && !!(g !== 0 || i.width && i.height), C = _react.useCallback(()=>{
-        w(!1), l.current && (l.current.style.opacity = "1"), setTimeout(()=>{
-            I(!0);
-        }, _imagecssmistica.FADE_IN_DURATION_MS), a == null || a();
+    const h = (0, _hooks.useAriaId)(), l = _react.useRef(), u = i.circular ? _imagecssmistica.circularBorderRadius : m ? _imagecssmistica.noBorderRadius : _imagecssmistica.defaultBorderRadius, [I, f] = _react.useState(!o), [H, g] = _react.useState(!1), C = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : S[e], b = A && !!(C !== 0 || i.width && i.height), N = B && !!(C !== 0 || i.width && i.height), w = _react.useCallback(()=>{
+        f(!1), l.current && (l.current.style.opacity = "1"), setTimeout(()=>{
+            g(!0);
+        }, _imagecssmistica.FADE_IN_DURATION_MS), n == null || n();
     }, [
-        a
+        n
     ]);
     _react.useEffect(()=>{
+        f(!o), g(!1);
+    }, [
+        o
+    ]), _react.useEffect(()=>{
         var y;
-        (y = l.current) != null && y.complete && C();
+        (y = l.current) != null && y.complete && w();
     }, [
-        C
+        w
     ]);
     const T = (0, _environment.isServerSide)() || !((v = document.getElementById(h)) != null && v.complete), _ = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
@@ -251,22 +255,22 @@ const X = (param)=>{
                 suppressHydrationWarning: !0,
                 id: h,
                 style: {
-                    opacity: T && f ? 0 : 1
+                    opacity: T && b ? 0 : 1
                 },
                 ref: (0, _common.combineRefs)(l, E),
-                src: c,
+                src: o,
                 className: (0, _classnames.default)(u, _imagecssmistica.image, {
                     [_imagecssmistica.imageWithBorder]: i.border
                 }, (0, _sprinklescssmistica.sprinkles)({
-                    position: g !== 0 ? "absolute" : "static"
+                    position: C !== 0 ? "absolute" : "static"
                 })),
-                alt: s,
+                alt: d,
                 onError: ()=>{
-                    w(!0), I(!0), o == null || o();
+                    f(!0), g(!0), a == null || a();
                 },
-                onLoad: C
+                onLoad: w
             }),
-            f && /* @__PURE__ */ (0, _jsxruntime.jsx)("script", {
+            b && /* @__PURE__ */ (0, _jsxruntime.jsx)("script", {
                 dangerouslySetInnerHTML: {
                     __html: `document.getElementById("${h}").addEventListener('load', (e) => e.target.style.opacity = "1")`
                 }
@@ -276,7 +280,7 @@ const X = (param)=>{
     var _i_height, _i_width;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            f && !H && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            b && !H && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
@@ -292,7 +296,7 @@ const X = (param)=>{
                     })
                 })
             }),
-            b && N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            I && N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
@@ -304,22 +308,22 @@ const X = (param)=>{
                     className: u
                 })
             }),
-            !b && _
+            !I && _
         ]
     });
-}), e1 = /*#__PURE__*/ _react.forwardRef((e, s)=>{
+}), e1 = /*#__PURE__*/ _react.forwardRef((e, d)=>{
     var _e_aspectRatio;
-    const d = e.width && e.height ? void 0 : e.circular ? 1 : typeof e.aspectRatio == "number" ? e.aspectRatio : S[(_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : x];
+    const c = e.width && e.height ? void 0 : e.circular ? 1 : typeof e.aspectRatio == "number" ? e.aspectRatio : S[(_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : x];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
         style: {
             position: "relative"
         },
-        aspectRatio: d,
+        aspectRatio: c,
         width: e.width,
         height: e.height,
         dataAttributes: (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Image"),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(p, _object_spread_props(_object_spread({}, e), {
-            ref: s
+            ref: d
         }))
     });
-}), f1 = e1;
+}), g1 = e1;

package/dist/index.d.ts

@@ -67,18 +67,12 @@ export { default as Avatar } from './avatar';
 export { default as Slider } from './slider';
 export { useModalState } from './modal-context-provider';
 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, TuLogo, } from './logo';
+export { Logo, MovistarLogo, VivoLogo, O2Logo, O2NewLogo, TelefonicaLogo, BlauLogo, TuLogo } from './logo';
 export { default as Image } from './image';
 export { default as Chip } from './chip';
 export { default as Video } from './video';
 export type { VideoElement } from './video';
-export { Carousel, CenteredCarousel, Slideshow, PageBullets, CarouselContextProvider, useCarouselContext, 
-/** @deprecated Contains a typo. Please use CarouselContextConsumer */
-CarouselContextConsumer as CarouselContextConsummer, CarouselContextConsumer, } from './carousel';
+export { Carousel, CenteredCarousel, Slideshow, PageBullets, CarouselContextProvider, useCarouselContext, CarouselContextConsumer, } from './carousel';
 export { Grid, GridItem } from './grid';
 export { default as Sheet, ActionsSheet, InfoSheet, ActionsListSheet, RadioListSheet, SheetBody, } from './sheet';
 export { default as SheetRoot, showSheet } from './sheet-root';
@@ -123,21 +117,20 @@ export { TrackingConfig, useTrackingConfig } from './utils/analytics';
 export { useDocumentVisibility } from './utils/document-visibility';
 export { ThemeVariant, useIsInverseVariant, useThemeVariant } from './theme-variant-context';
 export type { Skin, KnownSkinName, SkinName } from './skins/types';
-export { VIVO_SKIN, VIVO_NEW_SKIN, O2_CLASSIC_SKIN, O2_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN, BLAU_SKIN, TU_SKIN, } from './skins/constants';
+export { VIVO_SKIN, VIVO_NEW_SKIN, O2_SKIN, O2_NEW_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN, BLAU_SKIN, TU_SKIN, } from './skins/constants';
 export { getSkinByName } from './skins/utils';
 export { getVivoSkin } from './skins/vivo';
 export { getVivoNewSkin } from './skins/vivo-new';
 export { getMovistarSkin } from './skins/movistar';
-export { getMovistarLegacySkin } from './skins/movistar-legacy';
 export { getO2Skin } from './skins/o2';
-export { getO2ClassicSkin } from './skins/o2-classic';
+export { getO2NewSkin } from './skins/o2-new';
 export { getTelefonicaSkin } from './skins/telefonica';
 export { getBlauSkin } from './skins/blau';
 export { getTuSkin } from './skins/tu';
 export { palette as vivoPalette } from './skins/vivo';
 export { palette as movistarPalette } from './skins/movistar';
 export { palette as o2Palette } from './skins/o2';
-export { palette as o2ClassicPalette } from './skins/o2-classic';
+export { palette as o2NewPalette } from './skins/o2-new';
 export { palette as telefonicaPalette } from './skins/telefonica';
 export { palette as blauPalette } from './skins/blau';
 export { palette as tuPalette } from './skins/tu';

package/dist/index.js

@@ -90,9 +90,6 @@ _export(exports, {
     CarouselContextConsumer: function() {
         return _carousel.CarouselContextConsumer;
     },
-    CarouselContextConsummer: function() {
-        return _carousel.CarouselContextConsumer;
-    },
     CarouselContextProvider: function() {
         return _carousel.CarouselContextProvider;
     },
@@ -5433,9 +5430,6 @@ _export(exports, {
     NavigationBarActionGroup: function() {
         return _navigationbar.NavigationBarActionGroup;
     },
-    NavigationBarLogo: function() {
-        return _logo.Logo;
-    },
     NavigationBreadcrumbs: function() {
         return _navigationbreadcrumbs.default;
     },
@@ -5445,8 +5439,11 @@ _export(exports, {
     O2Logo: function() {
         return _logo.O2Logo;
     },
-    O2_CLASSIC_SKIN: function() {
-        return _constants.O2_CLASSIC_SKIN;
+    O2NewLogo: function() {
+        return _logo.O2NewLogo;
+    },
+    O2_NEW_SKIN: function() {
+        return _constants.O2_NEW_SKIN;
     },
     O2_SKIN: function() {
         return _constants.O2_SKIN;
@@ -5709,14 +5706,11 @@ _export(exports, {
     getCssVarValue: function() {
         return _dom.getCssVarValue;
     },
-    getMovistarLegacySkin: function() {
-        return _movistarlegacy.getMovistarLegacySkin;
-    },
     getMovistarSkin: function() {
         return _movistar.getMovistarSkin;
     },
-    getO2ClassicSkin: function() {
-        return _o2classic.getO2ClassicSkin;
+    getO2NewSkin: function() {
+        return _o2new.getO2NewSkin;
     },
     getO2Skin: function() {
         return _o2.getO2Skin;
@@ -5742,8 +5736,8 @@ _export(exports, {
     mq: function() {
         return _mediaqueriescssmistica;
     },
-    o2ClassicPalette: function() {
-        return _o2classic.palette;
+    o2NewPalette: function() {
+        return _o2new.palette;
     },
     o2Palette: function() {
         return _o2.palette;
@@ -5940,9 +5934,8 @@ const _utils = require("./skins/utils.js");
 const _vivo = require("./skins/vivo.js");
 const _vivonew = require("./skins/vivo-new.js");
 const _movistar = require("./skins/movistar.js");
-const _movistarlegacy = require("./skins/movistar-legacy.js");
 const _o2 = require("./skins/o2.js");
-const _o2classic = require("./skins/o2-classic.js");
+const _o2new = require("./skins/o2-new.js");
 const _telefonica = require("./skins/telefonica.js");
 const _blau = require("./skins/blau.js");
 const _tu = require("./skins/tu.js");

package/dist/inline.js

@@ -126,21 +126,22 @@ const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, A = (t)=>{
     };
     return t.tablet && (e[_inlinecssmistica.vars.spaceTablet] = i(t.tablet)), e;
 }, C = (param)=>{
-    let { space: t, className: e, children: s, role: a, alignItems: m = "stretch", "aria-labelledby": p, fullWidth: f, wrap: c, dataAttributes: u } = param;
-    const { platformOverrides: o } = (0, _hooks.useTheme)(), d = typeof t == "string";
+    let { space: t, className: e, children: a, role: o, alignItems: m = "stretch", "aria-labelledby": p, fullWidth: f, wrap: c, dataAttributes: d } = param;
+    const { platformOverrides: l } = (0, _hooks.useTheme)(), u = typeof t == "string";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(e, _inlinecssmistica.inline, (0, _sprinklescssmistica.sprinkles)({
             alignItems: m
-        }), c ? _inlinecssmistica.wrap : f ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, d ? _inlinecssmistica.stringSpace : _inlinecssmistica.marginInline),
+        }), c ? _inlinecssmistica.wrap : f ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, u ? _inlinecssmistica.stringSpace : _inlinecssmistica.marginInline),
         style: (0, _css.applyCssVars)(A(t)),
-        role: a,
+        role: o,
         "aria-labelledby": p
-    }, (0, _dom.getPrefixedDataAttributes)(u, "Inline")), {
-        children: _react.Children.map(s, (n)=>n || n === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    }, (0, _dom.getPrefixedDataAttributes)(d, "Inline")), {
+        children: _react.Children.map(a, (n)=>n || n === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                role: o === "list" ? "listitem" : void 0,
                 style: {
                     // Hack to fix https://jira.tid.es/browse/WEB-1683
                     // In iOS the inline component sometimes cuts the last line of the content
-                    paddingBottom: (0, _platform.isIos)(o) && !(0, _platform.isRunningAcceptanceTest)(o) ? 1 : void 0
+                    paddingBottom: (0, _platform.isIos)(l) && !(0, _platform.isRunningAcceptanceTest)(l) ? 1 : void 0
                 },
                 children: n
             }) : null)

package/dist/list.css-mistica.js

@@ -13,10 +13,10 @@ _export(exports, {
         return _;
     },
     badge: function() {
-        return y;
+        return f;
     },
     center: function() {
-        return f;
+        return y;
     },
     content: function() {
         return a;
@@ -31,31 +31,31 @@ _export(exports, {
         return t;
     },
     dualActionContainer: function() {
-        return i;
+        return e;
     },
     dualActionDivider: function() {
-        return e;
+        return i;
     },
     dualActionLeft: function() {
-        return o;
+        return u;
     },
     dualActionRight: function() {
-        return u;
+        return o;
     },
     pointer: function() {
-        return d;
+        return c;
     },
     right: function() {
-        return c;
+        return g;
     },
     rightRestrictedWidth: function() {
-        return g;
+        return d;
     },
     rowBody: function() {
-        return j;
+        return b;
     },
     rowContent: function() {
-        return b;
+        return j;
     },
     touchableBackground: function() {
         return l;
@@ -66,4 +66,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./list.css.ts.vanilla.css-mistica.js");
-var _ = "_1y2v1nfh8 _1y2v1nfhq _1y2v1nfhs", y = "_1y2v1nfhh _1y2v1nfiy _1y2v1nfic _1y2v1nfhq", f = "_1y2v1nfh8 _1y2v1nfhn", a = "_1y2v1nfh8 _1y2v1nfhv _1y2v1nfjl", r = "_2buj9gf", h = "_2buj9ge", t = "_2buj9g0", i = "_1y2v1nfh8 _1y2v1nfhd _1y2v1nfic", e = "_2buj9gm _1y2v1nfh8", o = "_1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfjq _1y2v1nf70 _1y2v1nf9y _1y2v1nfb7 _1y2v1nfha _1y2v1nfht", u = "_2buj9go _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfjq _1y2v1nf70 _1y2v1nf9y _1y2v1nfb7 _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhs _1y2v1nfhw _1y2v1nfic", d = "_1y2v1nfk8", c = "_2buj9gc", g = "_2buj9gd", j = "_1y2v1nfh8 _1y2v1nfhe _1y2v1nfhu", b = "_1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfhv _1y2v1nfjq _1y2v1nf70 _1y2v1nfha _1y2v1nfic", l = "_2buj9g1", s = "_2buj9g2";
+var _ = "_1y2v1nfha _1y2v1nfhs _1y2v1nfhu", f = "_1y2v1nfhj _1y2v1nfj0 _1y2v1nfie _1y2v1nfhs", y = "_1y2v1nfha _1y2v1nfhp", a = "_1y2v1nfha _1y2v1nfhx _1y2v1nfjn", r = "_2buj9gf", h = "_2buj9ge", t = "_2buj9g0", e = "_1y2v1nfha _1y2v1nfhf _1y2v1nfie", i = "_2buj9gm _1y2v1nfha", u = "_1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfjs _1y2v1nf72 _1y2v1nfa0 _1y2v1nfb9 _1y2v1nfhc _1y2v1nfhv", o = "_2buj9go _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfjs _1y2v1nf72 _1y2v1nfa0 _1y2v1nfb9 _1y2v1nfha _1y2v1nfhp _1y2v1nfhu _1y2v1nfhy _1y2v1nfie", c = "_1y2v1nfka", g = "_2buj9gc", d = "_2buj9gd", b = "_1y2v1nfha _1y2v1nfhg _1y2v1nfhw", j = "_1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhx _1y2v1nfjs _1y2v1nf72 _1y2v1nfhc _1y2v1nfie", l = "_2buj9g1", s = "_2buj9g2";

package/dist/list.d.ts

@@ -7,6 +7,7 @@ interface CommonProps {
     children?: void;
     headline?: string | React.ReactNode;
     title: string;
+    titleAs?: string;
     titleLinesMax?: number;
     subtitle?: string;
     subtitleLinesMax?: number;
@@ -85,10 +86,6 @@ type RowListProps = {
     children: React.ReactNode;
     ariaLabelledby?: string;
     role?: string;
-    /**
-     * @deprecated This field is deprecated and it has no effect.
-     */
-    noLastDivider?: boolean;
     dataAttributes?: DataAttributes;
 };
 export declare const RowList: React.FC<RowListProps>;