@telefonica/mistica 16.5.0 → 16.6.0

package/dist/cover-hero.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return hr;
+        return Bt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -23,6 +23,7 @@ const _imagecssmistica = require("./image.css-mistica.js");
 const _gridlayout = /*#__PURE__*/ _interop_require_default(require("./grid-layout.js"));
 const _coverheromedia = require("./cover-hero-media.js");
 const _dom = require("./utils/dom.js");
+const _headings = require("./utils/headings.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -148,16 +149,17 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
+const nt = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
         "1:1": 1,
         "16:9": 16 / 9,
         "7:10": 7 / 10,
         "4:3": 9 / 10
-    })[e], rr = /*#__PURE__*/ _react.forwardRef((_param, R)=>{
-    var { headline: e, pretitle: d, pretitleLinesMax: H, title: y, titleLinesMax: B, titleAs: N = "h1", description: u, descriptionLinesMax: S, extra: w, sideExtra: o, button: A, secondaryButton: T, buttonLink: j, minHeight: G, aspectRatio: c = "auto", variant: p, centered: t, noPaddingY: f, dataAttributes: L, "aria-label": M } = _param, l = _object_without_properties(_param, [
+    })[e], dt = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
+    var { headline: e, pretitle: p, pretitleLinesMax: j, pretitleAs: h, title: d, titleLinesMax: G, titleAs: f = "h1", description: v, descriptionLinesMax: L, extra: b, sideExtra: o, button: M, secondaryButton: R, buttonLink: V, minHeight: z, aspectRatio: c = "auto", variant: g, centered: i, noPaddingY: x, dataAttributes: D, "aria-label": F } = _param, s = _object_without_properties(_param, [
         "headline",
         "pretitle",
         "pretitleLinesMax",
+        "pretitleAs",
         "title",
         "titleLinesMax",
         "titleAs",
@@ -176,87 +178,126 @@ const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
         "dataAttributes",
         "aria-label"
     ]);
-    const a = l.backgroundVideo || l.backgroundImage, V = a ? "none" : l.background || ({
+    const a = s.backgroundVideo || s.backgroundImage, q = a ? "none" : s.background || ({
         default: _skincontractcssmistica.vars.colors.background,
         inverse: _skincontractcssmistica.vars.colors.backgroundBrand,
         alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
         media: "none"
-    })[p !== null && p !== void 0 ? p : "default"], m = a ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, h = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+    })[g !== null && g !== void 0 ? g : "default"], m = a ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, l = p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+        regular: !0,
+        as: h,
+        truncate: j,
+        textShadow: m,
+        dataAttributes: {
+            testid: "pretitle"
+        },
+        children: p
+    }) : void 0, k = d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+        as: f,
+        truncate: G,
+        textShadow: m,
+        dataAttributes: {
+            testid: "title"
+        },
+        children: d
+    }) : void 0, C = e ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        style: {
+            order: -1
+        },
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            dataAttributes: {
+                testid: "headline"
+            },
+            paddingBottom: {
+                desktop: 8,
+                tablet: 8,
+                mobile: 16
+            },
+            children: e
+        })
+    }) : void 0, y = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _coverherocssmistica.mainContent,
         children: [
-            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                paddingBottom: {
-                    desktop: 8,
-                    tablet: 8,
-                    mobile: 16
-                },
-                children: e
-            }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                 space: 16,
                 children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                        space: 8,
-                        children: [
-                            d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                className: _coverherocssmistica.sixColumns,
-                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                    regular: !0,
-                                    truncate: H,
-                                    textShadow: m,
-                                    children: d
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _coverherocssmistica.flexColumn,
+                        children: (0, _headings.isBiggerHeading)(f, h) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                k,
+                                C,
+                                l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                    className: _coverherocssmistica.sixColumns,
+                                    style: {
+                                        paddingBottom: d ? 8 : 0,
+                                        order: -1
+                                    },
+                                    children: l
                                 })
-                            }),
-                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                as: N,
-                                truncate: B,
-                                textShadow: m,
-                                children: y
-                            })
-                        ]
+                            ]
+                        }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                    className: _coverherocssmistica.sixColumns,
+                                    style: {
+                                        paddingBottom: d ? 8 : 0
+                                    },
+                                    children: l
+                                }),
+                                C,
+                                k
+                            ]
+                        })
                     }),
-                    u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    v && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _coverherocssmistica.sixColumns,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                             as: "p",
                             regular: !0,
-                            truncate: S,
+                            truncate: L,
                             color: a ? _skincontractcssmistica.vars.colors.textPrimary : _skincontractcssmistica.vars.colors.textSecondary,
                             textShadow: m,
-                            children: u
+                            dataAttributes: {
+                                testid: "description"
+                            },
+                            children: v
                         })
                     })
                 ]
             }),
-            w
+            b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                "data-testid": "slot",
+                children: b
+            })
         ]
-    }), b = c && c !== "auto";
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(L, "CoverHero")), {
-        "aria-label": M,
-        ref: R,
+    }), B = c && c !== "auto";
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(D, "CoverHero")), {
+        "aria-label": F,
+        ref: I,
         className: (0, _classnames.default)(_coverherocssmistica.coverHeroContainer, {
-            [_coverherocssmistica.minHeight]: !f,
-            [_coverherocssmistica.withAspectRatio]: b
+            [_coverherocssmistica.minHeight]: !x,
+            [_coverherocssmistica.withAspectRatio]: B
         }),
         style: _object_spread({
-            minHeight: b ? "auto" : G,
+            minHeight: B ? "auto" : z,
             boxSizing: "border-box",
-            background: V
+            background: q
         }, (0, _css.applyCssVars)({
-            [_coverherocssmistica.vars.aspectRatio]: String($(c)),
+            [_coverherocssmistica.vars.aspectRatio]: String(nt(c)),
             [_imagecssmistica.vars.mediaBorderRadius]: "0px"
         })),
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: (0, _classnames.default)(_coverherocssmistica.coverHero, {
-                [_coverherocssmistica.centered]: t,
+                [_coverherocssmistica.centered]: i,
                 [_coverherocssmistica.hasSideExtra]: o
             }),
             children: [
-                a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_coverheromedia.CoverHeroMedia, _object_spread({}, l)) : null,
+                a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_coverheromedia.CoverHeroMedia, _object_spread({}, s)) : null,
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                    variant: a ? "media" : p,
+                    variant: a ? "media" : g,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingY: f ? 0 : {
+                        paddingY: x ? 0 : {
                             desktop: 56,
                             tablet: 56,
                             mobile: 24
@@ -264,27 +305,28 @@ const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 24,
                             children: [
-                                t && !o ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+                                i && !o ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                                     template: "8",
-                                    children: h
+                                    children: y
                                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                                     template: "8+4",
                                     collapseBreakpoint: "mobile",
-                                    left: h,
+                                    left: y,
                                     right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _coverherocssmistica.sideExtra,
+                                        "data-testid": "sideSlot",
                                         children: o
                                     })
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                                     align: {
-                                        mobile: t ? "center" : "left",
-                                        tablet: t && !o ? "center" : "left",
-                                        desktop: t && !o ? "center" : "left"
+                                        mobile: i ? "center" : "left",
+                                        tablet: i && !o ? "center" : "left",
+                                        desktop: i && !o ? "center" : "left"
                                     },
-                                    primaryButton: A,
-                                    secondaryButton: T,
-                                    link: j
+                                    primaryButton: M,
+                                    secondaryButton: R,
+                                    link: V
                                 })
                             ]
                         })
@@ -293,4 +335,4 @@ const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
             ]
         })
     }));
-}), hr = rr;
+}), Bt = dt;

package/dist/empty-state.js

@@ -80,26 +80,27 @@ function _object_spread_props(target, source) {
     return target;
 }
 const w = (param)=>{
-    let { title: l, titleAs: d = "h1", description: p, button: e, buttonLink: f, largeImageUrl: o, imageUrl: i, asset: m, "aria-label": h, dataAttributes: v } = param;
-    const { isDarkMode: g } = (0, _hooks.useTheme)(), t = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), u = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
+    let { title: l, titleAs: d = "h1", description: p, button: r, buttonLink: f, largeImageUrl: a, imageUrl: o, asset: m, "aria-label": g, dataAttributes: u } = param;
+    const { isDarkMode: h } = (0, _hooks.useTheme)(), s = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), v = o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
+        "data-testid": "image",
         className: _emptystatecssmistica.smallImage,
         alt: "",
-        src: i
-    }) : void 0, y = _object_spread_props(_object_spread({}, (e == null ? void 0 : e.type) === _button.ButtonPrimary ? {
-        primaryButton: e
+        src: o
+    }) : void 0, y = _object_spread_props(_object_spread({}, (r == null ? void 0 : r.type) === _button.ButtonPrimary ? {
+        primaryButton: r
     } : {
-        secondaryButton: e
+        secondaryButton: r
     }), {
         link: f
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(_emptystatecssmistica.container, t ? _emptystatecssmistica.inverseBorder : _emptystatecssmistica.border),
+        className: (0, _classnames.default)(_emptystatecssmistica.container, s ? _emptystatecssmistica.inverseBorder : _emptystatecssmistica.border),
         style: (0, _css.applyCssVars)({
-            [_emptystatecssmistica.vars.backgroundColor]: t && !g ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.backgroundContainer
+            [_emptystatecssmistica.vars.backgroundColor]: s && !h ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.backgroundContainer
         }),
-        "aria-label": h,
+        "aria-label": g,
         role: "region"
-    }, (0, _dom.getPrefixedDataAttributes)(v, "EmptyState")), {
+    }, (0, _dom.getPrefixedDataAttributes)(u, "EmptyState")), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
@@ -107,9 +108,10 @@ const w = (param)=>{
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 24,
-                    className: o ? _emptystatecssmistica.contentVariants.largeImage : _emptystatecssmistica.contentVariants.default,
+                    className: a ? _emptystatecssmistica.contentVariants.largeImage : _emptystatecssmistica.contentVariants.default,
                     children: [
-                        u !== null && u !== void 0 ? u : m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        v !== null && v !== void 0 ? v : m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            "data-testid": "asset",
                             className: _emptystatecssmistica.assetContainer,
                             children: m
                         }),
@@ -118,12 +120,18 @@ const w = (param)=>{
                             children: [
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
                                     as: d,
+                                    dataAttributes: {
+                                        testid: "title"
+                                    },
                                     children: l
                                 }),
                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                     regular: !0,
                                     as: "p",
-                                    color: t ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.textSecondary,
+                                    color: s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.textSecondary,
+                                    dataAttributes: {
+                                        testid: "description"
+                                    },
                                     children: p
                                 })
                             ]
@@ -137,15 +145,16 @@ const w = (param)=>{
                     flex: 1,
                     position: "relative"
                 },
-                children: o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
+                children: a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
                     aspectRatio: 16 / 9,
                     className: _emptystatecssmistica.largeImageContainer,
                     height: "100%",
                     width: "100%",
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        "data-testid": "image",
                         className: _emptystatecssmistica.largeImage,
                         style: {
-                            backgroundImage: `url(${o})`
+                            backgroundImage: `url(${a})`
                         }
                     })
                 })

package/dist/header.css-mistica.js

@@ -10,15 +10,18 @@ function _export(target, all) {
 }
 _export(exports, {
     breadcrumbs: function() {
+        return m;
+    },
+    flexColumn: function() {
         return t;
     },
     hideOnDesktop: function() {
-        return m;
+        return a;
     },
     hideOnTabletOrSmaller: function() {
-        return a;
+        return v;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./header.css.ts.vanilla.css-mistica.js");
-var t = "mtk7e90 _1y2v1nf9g", m = "mtk7e93", a = "mtk7e90";
+var m = "mtk7e90 _1y2v1nf9g", t = "_1y2v1nfho _1y2v1nfhu", a = "mtk7e93", v = "mtk7e90";

package/dist/header.css.d.ts

@@ -1,3 +1,4 @@
 export declare const hideOnTabletOrSmaller: string;
 export declare const breadcrumbs: string;
 export declare const hideOnDesktop: string;
+export declare const flexColumn: string;

package/dist/header.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { type DataAttributes, type HeadingType, type RendersElement, type RendersNullableElement } from './utils/types';
 import type NavigationBreadcrumbs from './navigation-breadcrumbs';
 import type { ButtonPrimary, ButtonSecondary } from './button';
-import type { DataAttributes, HeadingType, RendersElement, RendersNullableElement } from './utils/types';
 import type { TextPresetProps } from './text';
 type OverridableTextProps = {
     color?: TextPresetProps['color'];
@@ -27,8 +27,9 @@ type MainSectionHeaderProps = {
     titleAs?: HeadingType;
     description?: string;
     button?: RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary>;
+    dataAttributes?: DataAttributes;
 };
-export declare const MainSectionHeader: ({ title, titleAs, description, button, }: MainSectionHeaderProps) => JSX.Element;
+export declare const MainSectionHeader: ({ title, titleAs, description, button, dataAttributes, }: MainSectionHeaderProps) => JSX.Element;
 type HeaderLayoutProps = {
     isInverse?: boolean;
     breadcrumbs?: RendersNullableElement<typeof NavigationBreadcrumbs>;