@telefonica/mistica 14.45.0 → 14.47.0

package/dist/highlighted-card.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "default", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _themevariantcontext = require("./theme-variant-context.js");
-const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _touchable = require("./touchable.js");
 const _text = require("./text.js");
 const _boxed = require("./boxed.js");
@@ -145,11 +145,11 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const L = /*#__PURE__*/ _react.forwardRef((e, i)=>{
+const O = /*#__PURE__*/ _react.forwardRef((e, t)=>{
     var _e_isInverse;
-    const { title: r, description: a, imageUrl: o, imageFit: l } = e, g = (0, _themevariantcontext.useIsInverseVariant)(), u = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : g, d = (0, _maybedismissable.useIsDismissable)(), { textPresets: f } = (0, _hooks.useTheme)(), n = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
-        ref: i,
-        isInverse: u,
+    const { title: s, description: n, imageUrl: a, imageFit: r } = e, u = (0, _themevariantcontext.useIsInverseVariant)(), f = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : u, d = (0, _maybedismissable.useIsDismissable)(), { textPresets: b } = (0, _hooks.useTheme)(), o = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
+        ref: t,
+        isInverse: f,
         className: _highlightedcardcssmistica.container,
         dataAttributes: _object_spread({
             "component-name": "HighlightedCard"
@@ -159,30 +159,32 @@ const L = /*#__PURE__*/ _react.forwardRef((e, i)=>{
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 role: d ? void 0 : "region",
-                className: _highlightedcardcssmistica.textContainerVariant[o ? "withImage" : "withoutImage"],
+                className: _highlightedcardcssmistica.textContainerVariant[a ? "withImage" : "withoutImage"],
                 "aria-label": d ? void 0 : e["aria-label"],
                 children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                        mobileSize: 18,
-                        mobileLineHeight: "24px",
-                        desktopSize: 20,
-                        desktopLineHeight: "28px",
-                        truncate: e.titleLinesMax,
-                        weight: f.cardTitle.weight,
-                        as: "h3",
-                        hyphens: "auto",
-                        children: r
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingTop: 8,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                            regular: !0,
-                            color: _skincontractcssmistica.vars.colors.textSecondary,
-                            truncate: e.descriptionLinesMax,
-                            as: "p",
-                            hyphens: "auto",
-                            children: a
-                        })
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                        space: 8,
+                        children: [
+                            !!s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                mobileSize: 18,
+                                mobileLineHeight: "24px",
+                                desktopSize: 20,
+                                desktopLineHeight: "28px",
+                                truncate: e.titleLinesMax,
+                                weight: b.cardTitle.weight,
+                                as: "h3",
+                                hyphens: "auto",
+                                children: s
+                            }),
+                            !!n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                regular: !0,
+                                color: _skincontractcssmistica.vars.colors.textSecondary,
+                                truncate: e.descriptionLinesMax,
+                                as: "p",
+                                hyphens: "auto",
+                                children: n
+                            })
+                        ]
                     }),
                     e.button && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                         children: [
@@ -197,47 +199,50 @@ const L = /*#__PURE__*/ _react.forwardRef((e, i)=>{
                     })
                 ]
             }),
-            o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _highlightedcardcssmistica.imageContent,
                 style: {
-                    backgroundImage: `url(${o})`,
+                    backgroundImage: `url(${a})`,
                     backgroundRepeat: "no-repeat",
-                    backgroundSize: l === "fit" ? "contain" : "cover",
-                    backgroundPosition: l === "fit" ? "bottom right" : `center ${l === "fill-center" ? "center" : "right"}`
+                    backgroundSize: r === "fit" ? "contain" : "cover",
+                    backgroundPosition: r === "fit" ? "bottom right" : `center ${r === "fill-center" ? "center" : "right"}`
                 }
             })
         ]
     });
-    return e.button ? n : e.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
+    return e.button ? o : e.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
         onPress: e.onPress,
         trackingEvent: e.trackingEvent,
         className: _highlightedcardcssmistica.touchableContainer,
-        children: n
+        children: o
     }) : e.to ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
         to: e.to,
         trackingEvent: e.trackingEvent,
         fullPageOnWebView: e.fullPageOnWebView,
         className: _highlightedcardcssmistica.touchableContainer,
-        children: n
+        children: o
     }) : e.href ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
         trackingEvent: e.trackingEvent,
         href: e.href,
         newTab: e.newTab,
         className: _highlightedcardcssmistica.touchableContainer,
-        children: n
-    }) : n;
-}), R = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
-    var { "aria-label": e } = _param, i = _object_without_properties(_param, [
+        children: o
+    }) : o;
+}), S = /*#__PURE__*/ _react.forwardRef((_param, s)=>{
+    var { "aria-label": e } = _param, t = _object_without_properties(_param, [
         "aria-label"
     ]);
-    const a = e !== null && e !== void 0 ? e : i.title;
+    var _t_isInverse;
+    const n = e || t.title || t.description, a = (0, _themevariantcontext.useIsInverseVariant)(), r = (_t_isInverse = t.isInverse) !== null && _t_isInverse !== void 0 ? _t_isInverse : a;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_maybedismissable.default, {
-        onClose: i.onClose,
-        "aria-label": a,
-        width: i.width,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(L, _object_spread_props(_object_spread({}, i), {
-            "aria-label": a,
-            ref: r
+        onClose: t.onClose,
+        "aria-label": n,
+        width: t.width,
+        isOverMedia: !!t.imageUrl,
+        isInverse: r,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(O, _object_spread_props(_object_spread({}, t), {
+            "aria-label": n,
+            ref: s
         }))
     });
-}), F = R;
+}), F = S;

package/dist/horizontal-scroll.css-mistica.js

@@ -10,13 +10,13 @@ function _export(target, all) {
 }
 _export(exports, {
     noScrollbar: function() {
-        return g;
+        return m;
     },
     scroll: function() {
-        return m;
+        return v;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./horizontal-scroll.css.ts.vanilla.css-mistica.js");
-var g = "_1gl3gmv2", m = "_1gl3gmv1 _1y2v1nfgi";
+var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfh8";

package/dist/horizontal-scroll.js

@@ -58,7 +58,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const n = /*#__PURE__*/ _react.forwardRef((param, l)=>{
+const e = /*#__PURE__*/ _react.forwardRef((param, l)=>{
     let { children: o, noScrollbar: r } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_horizontalscrollcssmistica.scroll, {
@@ -67,4 +67,4 @@ const n = /*#__PURE__*/ _react.forwardRef((param, l)=>{
         ref: l,
         children: o
     });
-}), p = n;
+}), p = e;

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

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     bleedLeft: function() {
-        return n;
+        return a;
     },
     bleedRight: function() {
-        return a;
+        return n;
     },
     bleedY: function() {
         return r;
@@ -36,37 +36,43 @@ _export(exports, {
     iconContainer: function() {
         return d;
     },
+    iconContainerSize: function() {
+        return q;
+    },
     iconSize: function() {
         return i;
     },
+    interactiveAreaBleed: function() {
+        return s;
+    },
     isLoading: function() {
-        return q;
+        return _;
     },
     overlay: function() {
-        return s;
+        return u;
     },
     overlayContainer: function() {
-        return _;
+        return h;
     },
     spinner: function() {
-        return g;
+        return m;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
-var n = {
-    default: "yqt1oe14",
-    small: "yqt1oe15"
-}, a = {
+var a = {
     default: "yqt1oe16",
     small: "yqt1oe17"
-}, r = {
+}, n = {
     default: "yqt1oe18",
     small: "yqt1oe19"
+}, r = {
+    default: "yqt1oe1a",
+    small: "yqt1oe1b"
 }, o = {
-    default: "yqt1oe12 _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfj0 _1y2v1nf6a _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr",
-    small: "yqt1oe13 _1y2v1nf6b _1y2v1nf7k _1y2v1nf8t _1y2v1nfa2 _1y2v1nfj0 _1y2v1nf6a _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr"
-}, y = "yqt1oe1k _1y2v1nfgm", v = "yqt1oey", l = "yqt1oe1g _1y2v1nfgc _1y2v1nfgj", f = {
+    default: "yqt1oe12 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfjq _1y2v1nf70 _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh",
+    small: "yqt1oe13 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfjq _1y2v1nf70 _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh"
+}, y = "yqt1oe1m _1y2v1nfhc", v = "yqt1oey", l = "yqt1oe1i _1y2v1nfh2 _1y2v1nfh9", f = {
     "brand-solid-default": "yqt1oe4",
     "brand-solid-inverse": "yqt1oe5",
     "brand-solid-alternative": "yqt1oe6",
@@ -98,9 +104,15 @@ var n = {
     "neutral-media": "yqt1oew",
     "danger-media": "yqt1oex"
 }, d = {
-    default: "yqt1oe1c yqt1oe1b _1y2v1nfj1 _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr _1y2v1nfjj _1y2v1nfgc",
-    small: "yqt1oe1d yqt1oe1b _1y2v1nfj1 _1y2v1nfgi _1y2v1nfgx _1y2v1nfgr _1y2v1nfjj _1y2v1nfgc"
+    default: "yqt1oe1e yqt1oe1d _1y2v1nfjr _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh _1y2v1nfk9 _1y2v1nfh2",
+    small: "yqt1oe1f yqt1oe1d _1y2v1nfjr _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh _1y2v1nfk9 _1y2v1nfh2"
+}, q = {
+    default: "calc(1.5rem + 24px)",
+    small: "calc(1.25rem + 12px)"
 }, i = {
     default: "1.5rem",
     small: "1.25rem"
-}, q = "yqt1oez", s = "yqt1oe1e", _ = "yqt1oe10", g = "yqt1oe1i _1y2v1nfgd";
+}, s = {
+    default: "yqt1oe14",
+    small: "yqt1oe15"
+}, _ = "yqt1oez", u = "yqt1oe1g", h = "yqt1oe10", m = "yqt1oe1k _1y2v1nfh3";

package/dist/icon-button.css.d.ts

@@ -6,7 +6,12 @@ export declare const iconSize: {
     default: string;
     small: string;
 };
+export declare const iconContainerSize: {
+    default: string;
+    small: string;
+};
 export declare const buttonContainer: Record<"default" | "small", string>;
+export declare const interactiveAreaBleed: Record<"default" | "small", string>;
 export declare const bleedLeft: Record<"default" | "small", string>;
 export declare const bleedRight: Record<"default" | "small", string>;
 export declare const bleedY: Record<"default" | "small", string>;