@telefonica/mistica 14.5.0 → 14.7.0

package/dist/feedback.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ErrorFeedbackScreen: ()=>Ge,
-    FeedbackScreen: ()=>x,
-    InfoFeedbackScreen: ()=>Me,
-    SuccessFeedback: ()=>Pe,
-    SuccessFeedbackScreen: ()=>Ke
+    ErrorFeedbackScreen: ()=>Ke,
+    FeedbackScreen: ()=>A,
+    InfoFeedbackScreen: ()=>Ge,
+    SuccessFeedback: ()=>Me,
+    SuccessFeedbackScreen: ()=>je
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _hooksJs = require("./hooks.js");
@@ -160,17 +160,17 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
+const R = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), W = (param)=>{
     let { primaryButton: r , secondaryButton: o  } = param;
     return !!r || !!o;
-}, Ie = ()=>{
+}, ve = ()=>{
     const o = `body {background:${(0, _themeVariantContextJs.useIsInverseVariant)() ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.background}}`;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("style", {
         children: o
     });
 }, D = (r)=>{
     (0, _webviewBridge.isWebViewBridgeAvailable)() && (0, _webviewBridge.requestVibration)(r).catch(()=>{});
-}, K = (r)=>{
+}, j = (r)=>{
     _react.useEffect(()=>{
         let o;
         return r === "success" && (o = setTimeout(()=>D("success"), 700)), r === "error" && (o = setTimeout(()=>D("error"), 1e3)), ()=>{
@@ -179,7 +179,7 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
     }, [
         r
     ]);
-}, G = ()=>{
+}, K = ()=>{
     const [r, o] = _react.useState(!1);
     return (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
         const t = window.requestAnimationFrame(()=>{
@@ -187,13 +187,13 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
         });
         return ()=>window.cancelAnimationFrame(t);
     }, []), r;
-}, M = (param, c, a)=>{
-    let { icon: r , title: o , description: t , children: n  } = param;
-    const d = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
+}, G = (param, n, i)=>{
+    let { icon: r , title: o , description: t , children: c  } = param;
+    const m = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
         space: 16,
-        children: t.map((u, m)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("p", {
+        children: t.map((u, l)=>/* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("p", {
                 children: u
-            }, m))
+            }, l))
     }) : t;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
@@ -201,24 +201,24 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             r,
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
-                className: (0, _classnames.default)(_feedbackCssMisticaJs.feedbackData, c && _feedbackCssMisticaJs.feedbackDataAppear, c && a && _feedbackCssMisticaJs.feedbackDataAppearActive),
+                className: (0, _classnames.default)(_feedbackCssMisticaJs.feedbackData, n && _feedbackCssMisticaJs.feedbackDataAppear, n && i && _feedbackCssMisticaJs.feedbackDataAppearActive),
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                         as: "h1",
                         children: o
                     }),
-                    d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                    m && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                         regular: !0,
                         color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                        children: d
+                        children: m
                     }),
-                    n
+                    c
                 ]
             })
         ]
     });
-}, P = (r, o)=>{
-    const t = j(o);
+}, M = (r, o)=>{
+    const t = W(o);
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
         children: [
@@ -226,12 +226,12 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, o))
         ]
     });
-}, U = (param)=>/* @__PURE__ */ {
-    let { isInverse: r , inlineFeedbackBody: o , imageFit: t , imageUrl: n , dataAttributes: c  } = param;
+}, P = (param)=>/* @__PURE__ */ {
+    let { isInverse: r , inlineFeedbackBody: o , imageFit: t , imageUrl: c , dataAttributes: n  } = param;
     return (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
         className: _feedbackCssMisticaJs.desktopContainer,
         isInverse: r,
-        dataAttributes: c,
+        dataAttributes: n,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _feedbackCssMisticaJs.desktopContent,
@@ -240,9 +240,9 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
                     children: o
                 })
             }),
-            n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            c && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
-                    backgroundImage: `url(${n})`,
+                    backgroundImage: `url(${c})`,
                     backgroundPosition: t === "fit" ? "bottom right" : "center right",
                     backgroundRepeat: "no-repeat",
                     backgroundSize: t === "fit" ? "contain" : "cover",
@@ -252,29 +252,29 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             })
         ]
     });
-}, x = (param)=>{
-    let { title: r , description: o , children: t , primaryButton: n , secondaryButton: c , link: a , hapticFeedback: d , icon: u , animateText: m = !1 , unstable_inlineInDesktop: h , imageUrl: k , imageFit: g , dataAttributes: S  } = param;
-    K(d);
-    const l = (0, _themeVariantContextJs.useIsInverseVariant)(), { platformOverrides: v , isDarkMode: p , skinName: T  } = (0, _hooksJs.useTheme)(), J = (0, _hooksJs.useWindowHeight)(), { isTabletOrSmaller: y  } = (0, _hooksJs.useScreenSize)(), [Q, X] = _react.useState(typeof self < "u"), [C, Y] = _react.useState(0), N = Q ? "100vh" : `${J - C}px`, V = j({
-        primaryButton: n,
-        secondaryButton: c,
-        link: a
-    }), Z = G();
+}, A = (param)=>{
+    let { title: r , description: o , children: t , primaryButton: c , secondaryButton: n , link: i , hapticFeedback: m , icon: u , animateText: l = !1 , isInverse: a = !1 , unstable_inlineInDesktop: h , imageUrl: k , imageFit: g , dataAttributes: x  } = param;
+    j(m);
+    const { platformOverrides: S , isDarkMode: p , skinName: T  } = (0, _hooksJs.useTheme)(), U = (0, _hooksJs.useWindowHeight)(), { isTabletOrSmaller: y  } = (0, _hooksJs.useScreenSize)(), [J, Q] = _react.useState(typeof self < "u"), [C, X] = _react.useState(0), N = J ? "100vh" : `${U - C}px`, V = W({
+        primaryButton: c,
+        secondaryButton: n,
+        link: i
+    }), Y = K();
     (0, _hooksJs.useIsomorphicLayoutEffect)(()=>{
-        X(!1);
+        Q(!1);
     }, []);
-    const w = M({
+    const w = G({
         icon: u,
         title: r,
         description: o,
         children: t
-    }, m && W(v), Z), H = P(w, {
-        primaryButton: n,
-        secondaryButton: c,
-        link: a
+    }, l && R(S), Y), H = M(w, {
+        primaryButton: c,
+        secondaryButton: n,
+        link: i
     });
     if (!y && h) return H;
-    const ee = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+    const Z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         className: _feedbackCssMisticaJs.container,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
@@ -283,22 +283,23 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             })
         })
     });
-    return y ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
+    return y ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
+        isInverse: a,
         children: [
-            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "relative"
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonFixedFooterLayoutJs.default, {
                     isFooterVisible: V,
-                    button: n,
-                    secondaryButton: c,
-                    link: a,
-                    footerBgColor: l && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
-                    containerBgColor: l && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
-                    onChangeFooterHeight: Y,
-                    children: ee
+                    button: c,
+                    secondaryButton: n,
+                    link: i,
+                    footerBgColor: a && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
+                    containerBgColor: a && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
+                    onChangeFooterHeight: X,
+                    children: Z
                 })
             }),
             T === _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
@@ -309,48 +310,46 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
                     left: 0,
                     right: 0,
                     height: V ? `calc(${N} + 1px)` : `calc(${N})`,
-                    background: l ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.background
+                    background: a ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.background
                 }
             }),
-            T !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Ie, {})
+            T !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ve, {})
         ]
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
             paddingTop: 64,
-            children: U({
-                isInverse: l,
+            children: P({
+                isInverse: a,
                 inlineFeedbackBody: H,
                 imageFit: g,
                 imageUrl: k,
-                dataAttributes: S
+                dataAttributes: x
             })
         })
     });
-}, Ke = (_param)=>{
+}, je = (_param)=>{
     var { dataAttributes: r  } = _param, o = _objectWithoutProperties(_param, [
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: t  } = (0, _hooksJs.useScreenSize)(), { skinName: n  } = (0, _hooksJs.useTheme)();
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+    const { isTabletOrSmaller: t  } = (0, _hooksJs.useScreenSize)(), { skinName: c  } = (0, _hooksJs.useTheme)();
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(A, _objectSpreadProps(_objectSpread({}, o), {
         isInverse: !o.unstable_inlineInDesktop || t,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(x, _objectSpreadProps(_objectSpread({}, o), {
-            hapticFeedback: "success",
-            icon: n === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
-            animateText: !0,
-            imageUrl: o.imageUrl,
-            imageFit: o.imageFit,
-            dataAttributes: _objectSpread({
-                "component-name": "SuccessFeedbackScreen"
-            }, r)
-        }))
-    });
-}, Ge = (_param)=>/* @__PURE__ */ {
-    var { children: r , errorReference: o , dataAttributes: t  } = _param, n = _objectWithoutProperties(_param, [
+        hapticFeedback: "success",
+        icon: c === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
+        animateText: !0,
+        imageUrl: o.imageUrl,
+        imageFit: o.imageFit,
+        dataAttributes: _objectSpread({
+            "component-name": "SuccessFeedbackScreen"
+        }, r)
+    }));
+}, Ke = (_param)=>/* @__PURE__ */ {
+    var { children: r , errorReference: o , dataAttributes: t  } = _param, c = _objectWithoutProperties(_param, [
         "children",
         "errorReference",
         "dataAttributes"
     ]);
-    return (0, _jsxRuntimeJs.jsxs)(x, _objectSpreadProps(_objectSpread({}, n), {
+    return (0, _jsxRuntimeJs.jsxs)(A, _objectSpreadProps(_objectSpread({}, c), {
         hapticFeedback: "error",
         icon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconErrorJs.default, {}),
         animateText: !0,
@@ -366,30 +365,30 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
             })
         ]
     }));
-}, Me = (_param)=>/* @__PURE__ */ {
+}, Ge = (_param)=>/* @__PURE__ */ {
     var { dataAttributes: r  } = _param, o = _objectWithoutProperties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxRuntimeJs.jsx)(x, _objectSpread({
+    return (0, _jsxRuntimeJs.jsx)(A, _objectSpread({
         dataAttributes: _objectSpread({
             "component-name": "InfoFeedbackScreen"
         }, r),
         icon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconInfoJs.default, {})
     }, o));
-}, Pe = (param)=>{
-    let { title: r , description: o , children: t , primaryButton: n , secondaryButton: c , link: a , imageUrl: d , imageFit: u , dataAttributes: m  } = param;
-    K("success");
-    const { isTabletOrSmaller: h  } = (0, _hooksJs.useScreenSize)(), { skinName: k , platformOverrides: g  } = (0, _hooksJs.useTheme)(), S = G(), v = M({
-        icon: k === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
+}, Me = (param)=>{
+    let { title: r , description: o , children: t , primaryButton: c , secondaryButton: n , link: i , imageUrl: m , imageFit: u , dataAttributes: l  } = param;
+    j("success");
+    const { isTabletOrSmaller: a  } = (0, _hooksJs.useScreenSize)(), { skinName: h , platformOverrides: k  } = (0, _hooksJs.useTheme)(), g = K(), S = G({
+        icon: h === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
         title: r,
         description: o,
         children: t
-    }, W(g), S), p = P(v, {
-        primaryButton: n,
-        secondaryButton: c,
-        link: a
+    }, R(k), g), p = M(S, {
+        primaryButton: c,
+        secondaryButton: n,
+        link: i
     });
-    return h ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
+    return a ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
         isInverse: !0,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
@@ -397,20 +396,20 @@ const W = (r)=>!(0, _platformJs.isRunningAcceptanceTest)(r), j = (param)=>{
                 paddingBottom: 32,
                 dataAttributes: _objectSpread({
                     "component-name": "SuccessFeedback"
-                }, m),
+                }, l),
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                     className: _feedbackCssMisticaJs.innerContainer,
                     children: p
                 })
             })
         ]
-    }) : U({
+    }) : P({
         isInverse: !0,
         inlineFeedbackBody: p,
         imageFit: u,
-        imageUrl: d,
+        imageUrl: m,
         dataAttributes: _objectSpread({
             "component-name": "SuccessFeedback"
-        }, m)
+        }, l)
     });
 };

package/dist/fixed-footer-layout.css-mistica.js

@@ -10,15 +10,15 @@ function _export(target, all) {
 }
 _export(exports, {
     container: ()=>v,
-    elevated: ()=>a,
-    fixedFooter: ()=>j,
-    footer: ()=>t,
+    elevated: ()=>t,
+    fixedFooter: ()=>a,
+    footer: ()=>j,
     vars: ()=>e,
     withoutFooter: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./fixed-footer-layout.css.ts.vanilla.js");
-var v = "p5j8j58", a = "p5j8j56 _1y2v1nf2q", j = "p5j8j54", t = "p5j8j53 _1y2v1nf7p _1y2v1nf2p", e = {
+var v = "p5j8j58", t = "p5j8j56 _1y2v1nf2t", a = "p5j8j54", j = "p5j8j53 _1y2v1nf7v _1y2v1nf2s", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
-}, p = "_1y2v1nf5h";
+}, p = "_1y2v1nf5n";

package/dist/header.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import NavigationBreadcrumbs from './navigation-breadcrumbs';
-import { ButtonPrimary, ButtonSecondary } from './button';
+import type NavigationBreadcrumbs from './navigation-breadcrumbs';
+import type { ButtonPrimary, ButtonSecondary } from './button';
 import type { DataAttributes, RendersElement, RendersNullableElement } from './utils/types';
 import type { TextPresetProps } from './text';
 type OverridableTextProps = {

package/dist/hero.css-mistica.js

@@ -10,15 +10,15 @@ function _export(target, all) {
 }
 _export(exports, {
     actions: ()=>v,
-    container: ()=>n,
-    containerDesktop: ()=>a,
-    containerMobile: ()=>i,
-    layout: ()=>_,
+    container: ()=>a,
+    containerDesktop: ()=>n,
+    containerMobile: ()=>_,
+    layout: ()=>i,
     vars: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./responsive-layout.css.ts.vanilla.js");
 require("./hero.css.ts.vanilla.js");
-var v = "_16rbpto6 _1y2v1nf5i _1y2v1nf64 _1y2v1nf5y", n = "_16rbpto2 _1y2v1nf5i", a = "_1y2v1nf5x _1y2v1nf85", i = "_1y2v1nf5o", _ = "_16rbpto7", p = {
+var v = "_16rbpto6 _1y2v1nf5o _1y2v1nf6a _1y2v1nf64", a = "_16rbpto2 _1y2v1nf5o", n = "_1y2v1nf63 _1y2v1nf8b", _ = "_1y2v1nf5u", i = "_16rbpto7", p = {
     height: "var(--_16rbpto0)"
 };

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/highlighted-card.js

@@ -164,6 +164,7 @@ const S = /*#__PURE__*/ _react.forwardRef((e, i)=>{
                         truncate: e.titleLinesMax,
                         weight: b.cardTitle.weight,
                         as: "h3",
+                        hyphens: "auto",
                         children: a
                     }),
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
@@ -173,6 +174,7 @@ const S = /*#__PURE__*/ _react.forwardRef((e, i)=>{
                             color: _skinContractCssMisticaJs.vars.colors.textSecondary,
                             truncate: e.descriptionLinesMax,
                             as: "p",
+                            hyphens: "auto",
                             children: r
                         })
                     }),

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';