@telefonica/mistica 15.20.1 → 16.0.0

package/dist/header.js

@@ -11,27 +11,25 @@ function _export(target, all) {
 }
 _export(exports, {
     Header: function() {
-        return oo;
+        return P;
     },
     HeaderLayout: function() {
-        return eo;
+        return U;
     },
     MainSectionHeader: function() {
-        return ro;
+        return Q;
     },
     MainSectionHeaderLayout: function() {
-        return to;
+        return V;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
-const _themevariantcontext = require("./theme-variant-context.js");
 const _responsivelayout = /*#__PURE__*/ _interop_require_default(require("./responsive-layout.js"));
 const _gridlayout = /*#__PURE__*/ _interop_require_default(require("./grid-layout.js"));
 const _overscrollcolorcontext = require("./overscroll-color-context.js");
 const _text = require("./text.js");
-const _buttongroup = /*#__PURE__*/ _interop_require_default(require("./button-group.js"));
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _headercssmistica = require("./header.css-mistica.js");
 const _dom = require("./utils/dom.js");
@@ -120,84 +118,59 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const oo = (param)=>{
-    let { headline: r, pretitle: e, pretitleAs: t, title: l, titleAs: d = "h2", description: m, dataAttributes: f, small: s = !1, preamount: c, amount: p, button: g, subtitle: k, isErrorAmount: L, secondaryButton: y } = param;
-    const S = (0, _themevariantcontext.useIsInverseVariant)(), b = (h, v)=>{
-        if (typeof h == "string") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
-            regular: !0
-        }, v), {
-            children: h
-        }));
-        const { text: D } = h, C = _object_without_properties(h, [
-            "text"
-        ]);
-        return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
-            regular: !0
-        }, v, C), {
-            children: h.text
-        }));
-    };
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+const P = (param)=>{
+    let { headline: r, pretitle: e, pretitleAs: t, title: l, titleAs: c = "h2", description: d, dataAttributes: h, small: i = !1 } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: {
             mobile: 24,
             desktop: 32
         },
-        dataAttributes: f,
-        children: [
-            (l || e || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                paddingRight: 16,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                    space: 8,
-                    children: [
-                        r,
-                        e && b(e, {
-                            color: _skincontractcssmistica.vars.colors.textPrimary,
-                            as: t
-                        }),
-                        l && (s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title2, {
-                            as: d,
-                            children: l
-                        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title3, {
-                            as: d,
-                            children: l
-                        })),
-                        m && (s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                            regular: !0,
-                            color: _skincontractcssmistica.vars.colors.textSecondary,
-                            children: m
-                        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                            regular: !0,
-                            color: _skincontractcssmistica.vars.colors.textSecondary,
-                            children: m
-                        }))
-                    ]
-                })
-            }),
-            (c || p || g || k) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                space: 16,
+        dataAttributes: h,
+        children: (l || e || d) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            paddingRight: 16,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                space: 8,
                 children: [
-                    (c || p) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                        space: 8,
-                        children: [
-                            c && b(c, {
-                                color: _skincontractcssmistica.vars.colors.textPrimary
-                            }),
-                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                color: L && !S ? _skincontractcssmistica.vars.colors.highlight : _skincontractcssmistica.vars.colors.textPrimary,
-                                children: p
-                            })
-                        ]
-                    }),
-                    (g || y) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                        primaryButton: g,
-                        secondaryButton: y
+                    r,
+                    e && ((n, b)=>{
+                        if (typeof n == "string") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
+                            regular: !0
+                        }, b), {
+                            children: n
+                        }));
+                        const { text: N } = n, x = _object_without_properties(n, [
+                            "text"
+                        ]);
+                        return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
+                            regular: !0
+                        }, b, x), {
+                            children: n.text
+                        }));
+                    })(e, {
+                        color: _skincontractcssmistica.vars.colors.textPrimary,
+                        as: t
                     }),
-                    k && b(k, {})
+                    l && (i ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title3, {
+                        as: c,
+                        children: l
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title4, {
+                        as: c,
+                        children: l
+                    })),
+                    d && (i ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        regular: !0,
+                        color: _skincontractcssmistica.vars.colors.textSecondary,
+                        children: d
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                        regular: !0,
+                        color: _skincontractcssmistica.vars.colors.textSecondary,
+                        children: d
+                    }))
                 ]
             })
-        ]
+        })
     });
-}, ro = (param)=>{
+}, Q = (param)=>{
     let { title: r, titleAs: e = "h1", description: t, button: l } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 32,
@@ -220,9 +193,9 @@ const oo = (param)=>{
             l
         ]
     });
-}, eo = (param)=>{
-    let { isInverse: r = !0, breadcrumbs: e, header: t, extra: l, sideBySideExtraOnDesktop: d = !1, dataAttributes: m, bleed: f = !1, noPaddingY: s = !1 } = param;
-    const c = f && r && l, p = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+}, U = (param)=>{
+    let { isInverse: r = !1, breadcrumbs: e, header: t, extra: l, sideBySideExtraOnDesktop: c = !1, dataAttributes: d, bleed: h = !1, noPaddingY: i = !1 } = param;
+    const m = h && r && l, n = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _headercssmistica.breadcrumbs,
@@ -235,24 +208,24 @@ const oo = (param)=>{
         topColor: _skincontractcssmistica.vars.colors.backgroundBrandTop
     } : {}), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
         "component-name": "HeaderLayout"
-    }, m))), {
+    }, d))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                 isInverse: r,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingTop: s ? 0 : {
+                    paddingTop: i ? 0 : {
                         mobile: t ? 32 : 0,
                         desktop: e ? 16 : 48
                     },
                     paddingBottom: {
-                        mobile: s && !c ? 0 : 24,
-                        desktop: c && !d ? 32 : s ? 0 : 48
+                        mobile: i && !m ? 0 : 24,
+                        desktop: m && !c ? 32 : i ? 0 : 48
                     },
-                    children: d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+                    children: c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "6+6",
-                        left: p,
+                        left: n,
                         right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: c ? _headercssmistica.hideOnTabletOrSmaller : "",
+                            className: m ? _headercssmistica.hideOnTabletOrSmaller : "",
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: {
                                     mobile: t ? 24 : 0,
@@ -267,21 +240,21 @@ const oo = (param)=>{
                             desktop: 32
                         } : 0,
                         children: [
-                            p,
-                            !c && l
+                            n,
+                            !m && l
                         ]
                     })
                 })
             }),
-            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                className: d ? _headercssmistica.hideOnDesktop : "",
+            m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                className: c ? _headercssmistica.hideOnDesktop : "",
                 backgroundColor: `linear-gradient(to bottom, ${_skincontractcssmistica.vars.colors.backgroundBrandBottom} 40px, ${_skincontractcssmistica.vars.colors.background} 0%)`,
                 children: l
             })
         ]
     }));
-}, to = (param)=>{
-    let { isInverse: r = !0, children: e, dataAttributes: t } = param;
+}, V = (param)=>{
+    let { isInverse: r = !1, children: e, dataAttributes: t } = param;
     return (0, _overscrollcolorcontext.useSetOverscrollColor)(r ? {
         topColor: _skincontractcssmistica.vars.colors.backgroundBrandTop
     } : {}), /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {

package/dist/hero.js

@@ -158,18 +158,18 @@ const k = {
     brand: _skincontractcssmistica.vars.colors.backgroundBrand,
     "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary,
     none: "transparent"
-}, w = (param)=>{
-    let { children: e, isInverse: o, backgroundColor: a } = param;
+}, O = (param)=>{
+    let { children: e, isInverse: o, backgroundColor: t } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
         isInverse: o,
         className: _herocssmistica.layout,
         innerDivClassName: _herocssmistica.layout,
         shouldExpandWhenNested: !0,
-        backgroundColor: a !== null && a !== void 0 ? a : "transparent",
+        backgroundColor: t !== null && t !== void 0 ? t : "transparent",
         children: e
     });
 }, b = (param)=>{
-    let { headline: e, title: o, titleAs: a = "h1", pretitle: l, description: c, descriptionLinesMax: t, extra: n, button: d, secondaryButton: f, buttonLink: s } = param;
+    let { headline: e, title: o, titleAs: t = "h1", pretitle: l, description: c, descriptionLinesMax: a, extra: n, button: d, secondaryButton: f, buttonLink: s } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         className: (0, _sprinklescssmistica.sprinkles)({
             height: "100%",
@@ -193,7 +193,7 @@ const k = {
                                         children: l
                                     }),
                                     o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                        as: a,
+                                        as: t,
                                         children: o
                                     })
                                 ]
@@ -202,7 +202,7 @@ const k = {
                                 as: "p",
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                truncate: t,
+                                truncate: a,
                                 children: c
                             })
                         ]
@@ -223,7 +223,7 @@ const k = {
         ]
     });
 }, q = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
-    var { height: e, background: o = "default", media: a, desktopMediaPosition: l = "left", dataAttributes: c, noPaddingY: t } = _param, n = _object_without_properties(_param, [
+    var { height: e, background: o = "default", media: t, desktopMediaPosition: l = "left", dataAttributes: c, noPaddingY: a } = _param, n = _object_without_properties(_param, [
         "height",
         "background",
         "media",
@@ -231,7 +231,7 @@ const k = {
         "dataAttributes",
         "noPaddingY"
     ]);
-    const { isTabletOrSmaller: f } = (0, _hooks.useScreenSize)(), s = (0, _carousel.useSlideshowContext)(), u = !!(s != null && s.withBullets), D = (0, _themevariantcontext.useIsInverseVariant)(), N = o === "none" ? D : o === "brand" || o === "brand-secondary";
+    const { isTabletOrSmaller: f } = (0, _hooks.useScreenSize)(), s = (0, _carousel.useSlideshowContext)(), u = !!(s != null && s.withBullets), D = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), N = o === "none" ? D : o === "brand" || o === "brand-secondary";
     if (f) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             style: (0, _css.applyCssVars)({
@@ -248,18 +248,18 @@ const k = {
                     [_imagecssmistica.vars.mediaBorderRadius]: "0px"
                 })),
                 className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerMobile, {
-                    [_herocssmistica.containerMinHeight]: !t
+                    [_herocssmistica.containerMinHeight]: !a
                 }),
                 children: [
-                    a,
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(w, {
+                    t,
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
                         isInverse: N,
                         backgroundColor: k[o],
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _herocssmistica.expandedContent,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: 24,
-                                paddingBottom: u ? 48 : t ? 0 : 24,
+                                paddingBottom: u ? 48 : a ? 0 : 24,
                                 className: _herocssmistica.layout,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
                             })
@@ -269,10 +269,10 @@ const k = {
             }))
         })
     });
-    const I = l === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    const I = l === "left" ? t : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingRight: 24,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
-    }), L = l === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    }), L = l === "right" ? t : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingLeft: 24,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
     });
@@ -291,21 +291,21 @@ const k = {
         className: (0, _sprinklescssmistica.sprinkles)({
             height: "100%"
         }),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(w, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
             isInverse: N,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                 template: "6+6",
                 left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingTop: t ? 0 : 56,
-                    paddingBottom: t && !u ? 0 : 56,
+                    paddingTop: a ? 0 : 56,
+                    paddingBottom: a && !u ? 0 : 56,
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop, {
-                        [_herocssmistica.containerMinHeight]: !t
+                        [_herocssmistica.containerMinHeight]: !a
                     }),
                     children: I
                 }),
                 right: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingTop: t ? 0 : 56,
-                    paddingBottom: t && !u ? 0 : 56,
+                    paddingTop: a ? 0 : 56,
+                    paddingBottom: a && !u ? 0 : 56,
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
                     children: L
                 })

package/dist/highlighted-card.js

@@ -145,9 +145,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
-    var _n_isInverse;
-    const { title: s, description: r, imageUrl: a, imageFit: o, imageAlt: m, titleAs: b = "h3", width: d, dataAttributes: f, titleLinesMax: v, descriptionLinesMax: x } = n, t = _object_without_properties(n, [
+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, [
         "title",
         "description",
         "imageUrl",
@@ -158,7 +158,7 @@ const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
         "dataAttributes",
         "titleLinesMax",
         "descriptionLinesMax"
-    ]), I = (0, _themevariantcontext.useIsInverseVariant)(), 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, {
+    ]), 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, {
         ref: e,
         isInverse: p,
         className: _highlightedcardcssmistica.container,
@@ -214,8 +214,8 @@ const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
                 style: {
                     backgroundImage: `url(${a})`,
                     backgroundRepeat: "no-repeat",
-                    backgroundSize: o === "fit" ? "contain" : "cover",
-                    backgroundPosition: o === "fit" ? "bottom right" : `center ${o === "fill-center" ? "center" : "right"}`
+                    backgroundSize: n === "fit" ? "contain" : "cover",
+                    backgroundPosition: n === "fit" ? "bottom right" : `center ${n === "fill-center" ? "center" : "right"}`
                 }
             }))
         ]
@@ -225,17 +225,16 @@ const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
         children: c
     })) : c;
 }), F = /*#__PURE__*/ _react.forwardRef((_param, s)=>{
-    var { "aria-label": n } = _param, e = _object_without_properties(_param, [
+    var { "aria-label": o } = _param, e = _object_without_properties(_param, [
         "aria-label"
     ]);
     var _e_isInverse;
-    const r = n || e.title || e.description, a = (0, _themevariantcontext.useIsInverseVariant)(), o = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : a;
+    const r = o || e.title || e.description, a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), n = (_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,
-        isOverMedia: !!e.imageUrl,
-        isInverse: o,
+        variant: e.imageUrl ? "media" : n ? "inverse" : void 0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({}, e), {
             "aria-label": r,
             ref: s

package/dist/hooks.d.ts

@@ -11,7 +11,6 @@ export declare const useElementDimensions: ({ includeMargins }?: {
     height: number;
     ref: (node: HTMLElement | null) => void;
 };
-export declare const useAriaId: (id?: string) => string;
 export declare const useWindowSize: () => {
     height: number;
     width: number;