@telefonica/mistica 16.2.0 → 16.3.0

package/dist/hero.js

@@ -167,8 +167,8 @@ const O = {
         backgroundColor: t !== null && t !== void 0 ? t : "transparent",
         children: e
     });
-}, b = (param)=>{
-    let { headline: e, title: o, titleAs: t = "h1", pretitle: l, description: c, descriptionLinesMax: a, extra: n, button: d, secondaryButton: u, buttonLink: s } = param;
+}, x = (param)=>{
+    let { headline: e, title: o, titleAs: t = "h1", pretitle: l, description: c, descriptionLinesMax: a, extra: n, button: d, secondaryButton: p, buttonLink: s } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         className: _herocssmistica.contentContainer,
         children: [
@@ -210,7 +210,7 @@ const O = {
                 className: _herocssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                     primaryButton: d,
-                    secondaryButton: u,
+                    secondaryButton: p,
                     link: s
                 })
             })
@@ -225,8 +225,8 @@ const O = {
         "dataAttributes",
         "noPaddingY"
     ]);
-    const { isTabletOrSmaller: u } = (0, _hooks.useScreenSize)(), s = (0, _carousel.useSlideshowContext)(), f = !!(s != null && s.withBullets), w = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), N = o === "none" ? w : o === "brand" || o === "brand-secondary";
-    if (u) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+    const { isTabletOrSmaller: p } = (0, _hooks.useScreenSize)(), s = (0, _carousel.useSlideshowContext)(), u = !!(s != null && s.withBullets), w = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), B = o === "none" ? w : o === "brand" || o === "brand-secondary";
+    if (p) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             style: (0, _css.applyCssVars)({
                 [_imagecssmistica.vars.mediaBorderRadius]: "0px"
@@ -247,15 +247,17 @@ const O = {
                 children: [
                     t,
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
-                        isInverse: N,
+                        isInverse: B,
                         backgroundColor: O[o],
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _herocssmistica.expandedContent,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                paddingTop: 24,
-                                paddingBottom: f ? 48 : a ? 0 : 24,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                style: {
+                                    paddingTop: 24,
+                                    paddingBottom: u ? 48 : a ? 0 : 24
+                                },
                                 className: _herocssmistica.layout,
-                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, n))
                             })
                         })
                     })
@@ -265,10 +267,10 @@ const O = {
     });
     const I = l === "left" ? t : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingRight: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, n))
     }), L = l === "right" ? t : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, n))
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
         "component-name": "Hero"
@@ -284,20 +286,24 @@ const O = {
         }),
         className: _herocssmistica.hero,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
-            isInverse: N,
+            isInverse: B,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                 template: "6+6",
-                left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingTop: a ? 0 : 56,
-                    paddingBottom: a && !f ? 0 : 56,
+                left: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    style: {
+                        paddingTop: a ? 0 : 56,
+                        paddingBottom: a && !u ? 0 : 56
+                    },
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop, {
                         [_herocssmistica.containerMinHeight]: !a
                     }),
                     children: I
                 }),
-                right: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingTop: a ? 0 : 56,
-                    paddingBottom: a && !f ? 0 : 56,
+                right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    style: {
+                        paddingTop: a ? 0 : 56,
+                        paddingBottom: a && !u ? 0 : 56
+                    },
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
                     children: L
                 })

package/dist/highlighted-card.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return W;
+        return X;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -15,6 +15,7 @@ const _themevariantcontext = require("./theme-variant-context.js");
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _touchable = require("./touchable.js");
 const _text = require("./text.js");
+const _textprops = require("./text-props.js");
 const _boxed = require("./boxed.js");
 const _maybedismissable = /*#__PURE__*/ _interop_require_wildcard(require("./maybe-dismissable.js"));
 const _highlightedcardcssmistica = require("./highlighted-card.css-mistica.js");
@@ -145,9 +146,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const B = /*#__PURE__*/ _react.forwardRef((o, e)=>{
-    var _o_isInverse;
-    const { title: s, description: r, imageUrl: a, imageFit: n, imageAlt: m, titleAs: b = "h3", width: d, dataAttributes: f, titleLinesMax: v, descriptionLinesMax: x } = o, t = _object_without_properties(o, [
+const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
+    var _n_isInverse;
+    const { title: s, description: r, imageUrl: a, imageFit: o, imageAlt: m, titleAs: f = "h3", width: d, dataAttributes: b, titleLinesMax: v, descriptionLinesMax: x } = n, t = _object_without_properties(n, [
         "title",
         "description",
         "imageUrl",
@@ -158,13 +159,13 @@ const B = /*#__PURE__*/ _react.forwardRef((o, e)=>{
         "dataAttributes",
         "titleLinesMax",
         "descriptionLinesMax"
-    ]), I = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), p = (_o_isInverse = o.isInverse) !== null && _o_isInverse !== void 0 ? _o_isInverse : I, h = (0, _maybedismissable.useIsDismissable)(), { textPresets: w } = (0, _hooks.useTheme)(), c = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
+    ]), I = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), p = (_n_isInverse = n.isInverse) !== null && _n_isInverse !== void 0 ? _n_isInverse : I, h = (0, _maybedismissable.useIsDismissable)(), { textPresets: w } = (0, _hooks.useTheme)(), c = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
         ref: e,
         isInverse: p,
         className: _highlightedcardcssmistica.container,
         dataAttributes: _object_spread({
             "component-name": "HighlightedCard"
-        }, f),
+        }, b),
         width: d ? `${d}px` : "100%",
         minHeight: "100%",
         children: [
@@ -176,10 +177,10 @@ const B = /*#__PURE__*/ _react.forwardRef((o, e)=>{
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
-                            !!s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _text.textProps.text4), {
+                            !!s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
                                 truncate: v,
                                 weight: w.cardTitle.weight,
-                                as: b,
+                                as: f,
                                 hyphens: "auto",
                                 children: s
                             })),
@@ -214,8 +215,8 @@ const B = /*#__PURE__*/ _react.forwardRef((o, e)=>{
                 style: {
                     backgroundImage: `url(${a})`,
                     backgroundRepeat: "no-repeat",
-                    backgroundSize: n === "fit" ? "contain" : "cover",
-                    backgroundPosition: n === "fit" ? "bottom right" : `center ${n === "fill-center" ? "center" : "right"}`
+                    backgroundSize: o === "fit" ? "contain" : "cover",
+                    backgroundPosition: o === "fit" ? "bottom right" : `center ${o === "fill-center" ? "center" : "right"}`
                 }
             }))
         ]
@@ -225,19 +226,19 @@ const B = /*#__PURE__*/ _react.forwardRef((o, e)=>{
         children: c
     })) : c;
 }), F = /*#__PURE__*/ _react.forwardRef((_param, s)=>{
-    var { "aria-label": o } = _param, e = _object_without_properties(_param, [
+    var { "aria-label": n } = _param, e = _object_without_properties(_param, [
         "aria-label"
     ]);
     var _e_isInverse;
-    const r = o || e.title || e.description, a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), n = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : a;
+    const r = n || e.title || e.description, a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), o = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : a;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_maybedismissable.default, {
         onClose: e.onClose,
         "aria-label": r,
         width: e.width,
-        variant: e.imageUrl ? "media" : n ? "inverse" : void 0,
+        variant: e.imageUrl ? "media" : o ? "inverse" : void 0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({}, e), {
             "aria-label": r,
             ref: s
         }))
     });
-}), W = F;
+}), X = F;

package/dist/list.css-mistica.js

@@ -12,61 +12,67 @@ _export(exports, {
     asset: function() {
         return _;
     },
-    badge: function() {
+    assetContainer: function() {
         return f;
     },
-    center: function() {
+    badge: function() {
         return y;
     },
-    content: function() {
+    center: function() {
         return a;
     },
-    detail: function() {
+    content: function() {
         return r;
     },
-    detailRight: function() {
+    detail: function() {
         return i;
     },
-    disabled: function() {
+    detailRight: function() {
         return t;
     },
+    disabled: function() {
+        return o;
+    },
     dualActionContainer: function() {
         return h;
     },
     dualActionDivider: function() {
-        return o;
+        return e;
     },
     dualActionLeft: function() {
-        return e;
+        return b;
     },
     dualActionRight: function() {
         return d;
     },
     pointer: function() {
-        return b;
+        return g;
     },
     rightContent: function() {
         return u;
     },
     rightRestrictedWidth: function() {
-        return g;
+        return k;
     },
     row: function() {
-        return k;
+        return j;
     },
     rowBody: function() {
         return c;
     },
     rowContent: function() {
-        return j;
+        return l;
+    },
+    rowContentPadding: function() {
+        return s;
     },
     touchableBackground: function() {
-        return l;
+        return m;
     },
     touchableBackgroundInverse: function() {
-        return m;
+        return p;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./list.css.ts.vanilla.css-mistica.js");
-var _ = "_1y2v1nfhk _1y2v1nfi2 _1y2v1nfi4", f = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfja _1y2v1nfio _1y2v1nfi2", y = "_1y2v1nfhk _1y2v1nfhz", a = "_1y2v1nfhk _1y2v1nfi7 _1y2v1nfjx", r = "_2buj9gf _1y2v1nfhk _1y2v1nfhz", i = "_2buj9ge", t = "_2buj9g0", h = "_1y2v1nfhk _1y2v1nfhp _1y2v1nfio", o = "_2buj9gl _1y2v1nfhk", e = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhm _1y2v1nfi5", d = "_2buj9gn _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhz _1y2v1nfi4 _1y2v1nfi8 _1y2v1nfio", b = "_1y2v1nfkk", u = "_2buj9gc", g = "_2buj9gd", k = "_1y2v1nfi7", c = "_1y2v1nfhk _1y2v1nfhq _1y2v1nfi6", j = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", l = "_2buj9g2", m = "_2buj9g3";
+var _ = "_1y2v1nfhk _1y2v1nfi2 _1y2v1nfi4", f = "_1y2v1nfbj", y = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfja _1y2v1nfio _1y2v1nfi2", a = "_1y2v1nfhk _1y2v1nfhz", r = "_1y2v1nf7s _1y2v1nf91 _1y2v1nfhk _1y2v1nfi7 _1y2v1nfjx", i = "_2buj9gh _1y2v1nfhk _1y2v1nfhz", t = "_2buj9gg", o = "_2buj9g0", h = "_1y2v1nfhk _1y2v1nfhp _1y2v1nfio", e = "_2buj9gn _1y2v1nfhk", b = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhm _1y2v1nfi5", d = "_2buj9gp _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhz _1y2v1nfi4 _1y2v1nfi8 _1y2v1nfio", g = "_1y2v1nfkk", u = "_2buj9ge", k = "_2buj9gf", j = "_1y2v1nfi7", c = "_1y2v1nfhk _1y2v1nfhq _1y2v1nfi6", l = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", s = "_1y2v1nfaa _1y2v1nfbj", m = "_2buj9g2", p = "_2buj9g3";

package/dist/list.css.d.ts

@@ -4,7 +4,9 @@ export declare const touchableBackground: string;
 export declare const touchableBackgroundInverse: string;
 export declare const pointer: string;
 export declare const rowContent: string;
+export declare const rowContentPadding: string;
 export declare const content: string;
+export declare const assetContainer: string;
 export declare const asset: string;
 export declare const rowBody: string;
 export declare const center: string;