@telefonica/mistica 16.4.0 → 16.6.0

package/dist-es/cover-hero.js

@@ -77,31 +77,33 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import * as z from "react";
-import D from "./responsive-layout.js";
-import v from "./box.js";
-import I from "./button-group.js";
-import s from "./stack.js";
-import { Text3 as g, Text8 as q } from "./text.js";
+import { jsxs as r, jsx as t, Fragment as H } from "react/jsx-runtime";
+import * as J from "react";
+import K from "./responsive-layout.js";
+import N from "./box.js";
+import O from "./button-group.js";
+import S from "./stack.js";
+import { Text3 as A, Text8 as Q } from "./text.js";
 import { vars as n } from "./skins/skin-contract.css-mistica.js";
-import { mainContent as F, sixColumns as x, coverHeroContainer as J, minHeight as K, withAspectRatio as O, coverHero as Q, centered as U, hasSideExtra as W, sideExtra as X, vars as Y } from "./cover-hero.css-mistica.js";
-import k from "classnames";
-import { applyCssVars as Z } from "./utils/css.js";
-import { vars as _ } from "./image.css-mistica.js";
-import C from "./grid-layout.js";
-import { CoverHeroMedia as E } from "./cover-hero-media.js";
-import { getPrefixedDataAttributes as P } from "./utils/dom.js";
-const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
+import { mainContent as U, flexColumn as W, sixColumns as u, coverHeroContainer as X, minHeight as Y, withAspectRatio as Z, coverHero as _, centered as E, hasSideExtra as P, sideExtra as $, vars as tt } from "./cover-hero.css-mistica.js";
+import w from "classnames";
+import { applyCssVars as et } from "./utils/css.js";
+import { vars as rt } from "./image.css-mistica.js";
+import T from "./grid-layout.js";
+import { CoverHeroMedia as ot } from "./cover-hero-media.js";
+import { getPrefixedDataAttributes as it } from "./utils/dom.js";
+import { isBiggerHeading as at } from "./utils/headings.js";
+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__*/ z.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__*/ J.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",
@@ -120,115 +122,155 @@ 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: n.colors.background,
         inverse: n.colors.backgroundBrand,
         alternative: n.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__ */ i("div", {
-        className: F,
+    })[g !== null && g !== void 0 ? g : "default"], m = a ? "0 0 15px rgba(0, 0, 0, 0.4)" : void 0, l = p ? /* @__PURE__ */ t(A, {
+        regular: !0,
+        as: h,
+        truncate: j,
+        textShadow: m,
+        dataAttributes: {
+            testid: "pretitle"
+        },
+        children: p
+    }) : void 0, k = d ? /* @__PURE__ */ t(Q, {
+        as: f,
+        truncate: G,
+        textShadow: m,
+        dataAttributes: {
+            testid: "title"
+        },
+        children: d
+    }) : void 0, C = e ? /* @__PURE__ */ t("div", {
+        style: {
+            order: -1
+        },
+        children: /* @__PURE__ */ t(N, {
+            dataAttributes: {
+                testid: "headline"
+            },
+            paddingBottom: {
+                desktop: 8,
+                tablet: 8,
+                mobile: 16
+            },
+            children: e
+        })
+    }) : void 0, y = /* @__PURE__ */ r("div", {
+        className: U,
         children: [
-            e && /* @__PURE__ */ r(v, {
-                paddingBottom: {
-                    desktop: 8,
-                    tablet: 8,
-                    mobile: 16
-                },
-                children: e
-            }),
-            /* @__PURE__ */ i(s, {
+            /* @__PURE__ */ r(S, {
                 space: 16,
                 children: [
-                    /* @__PURE__ */ i(s, {
-                        space: 8,
-                        children: [
-                            d && /* @__PURE__ */ r("div", {
-                                className: x,
-                                children: /* @__PURE__ */ r(g, {
-                                    regular: !0,
-                                    truncate: H,
-                                    textShadow: m,
-                                    children: d
+                    /* @__PURE__ */ t("div", {
+                        className: W,
+                        children: at(f, h) ? /* @__PURE__ */ r(H, {
+                            children: [
+                                k,
+                                C,
+                                l && /* @__PURE__ */ t("div", {
+                                    className: u,
+                                    style: {
+                                        paddingBottom: d ? 8 : 0,
+                                        order: -1
+                                    },
+                                    children: l
                                 })
-                            }),
-                            /* @__PURE__ */ r(q, {
-                                as: N,
-                                truncate: B,
-                                textShadow: m,
-                                children: y
-                            })
-                        ]
+                            ]
+                        }) : /* @__PURE__ */ r(H, {
+                            children: [
+                                l && /* @__PURE__ */ t("div", {
+                                    className: u,
+                                    style: {
+                                        paddingBottom: d ? 8 : 0
+                                    },
+                                    children: l
+                                }),
+                                C,
+                                k
+                            ]
+                        })
                     }),
-                    u && /* @__PURE__ */ r("div", {
-                        className: x,
-                        children: /* @__PURE__ */ r(g, {
+                    v && /* @__PURE__ */ t("div", {
+                        className: u,
+                        children: /* @__PURE__ */ t(A, {
                             as: "p",
                             regular: !0,
-                            truncate: S,
+                            truncate: L,
                             color: a ? n.colors.textPrimary : n.colors.textSecondary,
                             textShadow: m,
-                            children: u
+                            dataAttributes: {
+                                testid: "description"
+                            },
+                            children: v
                         })
                     })
                 ]
             }),
-            w
+            b && /* @__PURE__ */ t("div", {
+                "data-testid": "slot",
+                children: b
+            })
         ]
-    }), b = c && c !== "auto";
-    return /* @__PURE__ */ r("section", _object_spread_props(_object_spread({}, P(L, "CoverHero")), {
-        "aria-label": M,
-        ref: R,
-        className: k(J, {
-            [K]: !f,
-            [O]: b
+    }), B = c && c !== "auto";
+    return /* @__PURE__ */ t("section", _object_spread_props(_object_spread({}, it(D, "CoverHero")), {
+        "aria-label": F,
+        ref: I,
+        className: w(X, {
+            [Y]: !x,
+            [Z]: B
         }),
         style: _object_spread({
-            minHeight: b ? "auto" : G,
+            minHeight: B ? "auto" : z,
             boxSizing: "border-box",
-            background: V
-        }, Z({
-            [Y.aspectRatio]: String($(c)),
-            [_.mediaBorderRadius]: "0px"
+            background: q
+        }, et({
+            [tt.aspectRatio]: String(nt(c)),
+            [rt.mediaBorderRadius]: "0px"
         })),
-        children: /* @__PURE__ */ i("div", {
-            className: k(Q, {
-                [U]: t,
-                [W]: o
+        children: /* @__PURE__ */ r("div", {
+            className: w(_, {
+                [E]: i,
+                [P]: o
             }),
             children: [
-                a ? /* @__PURE__ */ r(E, _object_spread({}, l)) : null,
-                /* @__PURE__ */ r(D, {
-                    variant: a ? "media" : p,
-                    children: /* @__PURE__ */ r(v, {
-                        paddingY: f ? 0 : {
+                a ? /* @__PURE__ */ t(ot, _object_spread({}, s)) : null,
+                /* @__PURE__ */ t(K, {
+                    variant: a ? "media" : g,
+                    children: /* @__PURE__ */ t(N, {
+                        paddingY: x ? 0 : {
                             desktop: 56,
                             tablet: 56,
                             mobile: 24
                         },
-                        children: /* @__PURE__ */ i(s, {
+                        children: /* @__PURE__ */ r(S, {
                             space: 24,
                             children: [
-                                t && !o ? /* @__PURE__ */ r(C, {
+                                i && !o ? /* @__PURE__ */ t(T, {
                                     template: "8",
-                                    children: h
-                                }) : /* @__PURE__ */ r(C, {
+                                    children: y
+                                }) : /* @__PURE__ */ t(T, {
                                     template: "8+4",
                                     collapseBreakpoint: "mobile",
-                                    left: h,
-                                    right: /* @__PURE__ */ r("div", {
-                                        className: X,
+                                    left: y,
+                                    right: /* @__PURE__ */ t("div", {
+                                        className: $,
+                                        "data-testid": "sideSlot",
                                         children: o
                                     })
                                 }),
-                                /* @__PURE__ */ r(I, {
+                                /* @__PURE__ */ t(O, {
                                     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
                                 })
                             ]
                         })
@@ -237,5 +279,5 @@ const $ = (e)=>!e || e === "auto" ? 0 : typeof e == "number" ? e : ({
             ]
         })
     }));
-}), hr = rr;
-export { hr as default };
+}), Bt = dt;
+export { Bt as default };

package/dist-es/empty-state.js

@@ -51,86 +51,95 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import x from "classnames";
 import { useIsInverseOrMediaVariant as k } from "./theme-variant-context.js";
 import { ButtonPrimary as B } from "./button.js";
 import { useTheme as C } from "./hooks.js";
 import n from "./stack.js";
 import { Text6 as I, Text3 as N } from "./text.js";
-import S from "./button-group.js";
-import { container as b, inverseBorder as E, border as T, vars as V, contentVariants as c, assetContainer as $, largeImageContainer as j, largeImage as A, smallImage as D } from "./empty-state.css-mistica.js";
-import { vars as a } from "./skins/skin-contract.css-mistica.js";
+import b from "./button-group.js";
+import { container as S, inverseBorder as A, border as E, vars as T, contentVariants as c, assetContainer as V, largeImageContainer as $, largeImage as j, smallImage as D } from "./empty-state.css-mistica.js";
+import { vars as t } from "./skins/skin-contract.css-mistica.js";
 import { AspectRatioContainer as M } from "./utils/aspect-ratio-support.js";
 import { getPrefixedDataAttributes as P } from "./utils/dom.js";
 import { applyCssVars as R } from "./utils/css.js";
 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 } = C(), t = k(), u = i ? /* @__PURE__ */ r("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 } = C(), s = k(), v = o ? /* @__PURE__ */ e("img", {
+        "data-testid": "image",
         className: D,
         alt: "",
-        src: i
-    }) : void 0, y = _object_spread_props(_object_spread({}, (e == null ? void 0 : e.type) === B ? {
-        primaryButton: e
+        src: o
+    }) : void 0, y = _object_spread_props(_object_spread({}, (r == null ? void 0 : r.type) === B ? {
+        primaryButton: r
     } : {
-        secondaryButton: e
+        secondaryButton: r
     }), {
         link: f
     });
-    return /* @__PURE__ */ s("div", _object_spread_props(_object_spread({
-        className: x(b, t ? E : T),
+    return /* @__PURE__ */ i("div", _object_spread_props(_object_spread({
+        className: x(S, s ? A : E),
         style: R({
-            [V.backgroundColor]: t && !g ? a.colors.backgroundBrand : a.colors.backgroundContainer
+            [T.backgroundColor]: s && !h ? t.colors.backgroundBrand : t.colors.backgroundContainer
         }),
-        "aria-label": h,
+        "aria-label": g,
         role: "region"
-    }, P(v, "EmptyState")), {
+    }, P(u, "EmptyState")), {
         children: [
-            /* @__PURE__ */ r("div", {
+            /* @__PURE__ */ e("div", {
                 style: {
                     flex: 1
                 },
-                children: /* @__PURE__ */ s(n, {
+                children: /* @__PURE__ */ i(n, {
                     space: 24,
-                    className: o ? c.largeImage : c.default,
+                    className: a ? c.largeImage : c.default,
                     children: [
-                        u !== null && u !== void 0 ? u : m && /* @__PURE__ */ r("div", {
-                            className: $,
+                        v !== null && v !== void 0 ? v : m && /* @__PURE__ */ e("div", {
+                            "data-testid": "asset",
+                            className: V,
                             children: m
                         }),
-                        /* @__PURE__ */ s(n, {
+                        /* @__PURE__ */ i(n, {
                             space: 16,
                             children: [
-                                /* @__PURE__ */ r(I, {
+                                /* @__PURE__ */ e(I, {
                                     as: d,
+                                    dataAttributes: {
+                                        testid: "title"
+                                    },
                                     children: l
                                 }),
-                                /* @__PURE__ */ r(N, {
+                                /* @__PURE__ */ e(N, {
                                     regular: !0,
                                     as: "p",
-                                    color: t ? a.colors.inverse : a.colors.textSecondary,
+                                    color: s ? t.colors.inverse : t.colors.textSecondary,
+                                    dataAttributes: {
+                                        testid: "description"
+                                    },
                                     children: p
                                 })
                             ]
                         }),
-                        /* @__PURE__ */ r(S, _object_spread({}, y))
+                        /* @__PURE__ */ e(b, _object_spread({}, y))
                     ]
                 })
             }),
-            /* @__PURE__ */ r("div", {
+            /* @__PURE__ */ e("div", {
                 style: {
                     flex: 1,
                     position: "relative"
                 },
-                children: o && /* @__PURE__ */ r(M, {
+                children: a && /* @__PURE__ */ e(M, {
                     aspectRatio: 16 / 9,
-                    className: j,
+                    className: $,
                     height: "100%",
                     width: "100%",
-                    children: /* @__PURE__ */ r("div", {
-                        className: A,
+                    children: /* @__PURE__ */ e("div", {
+                        "data-testid": "image",
+                        className: j,
                         style: {
-                            backgroundImage: `url(${o})`
+                            backgroundImage: `url(${a})`
                         }
                     })
                 })

package/dist-es/header.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./header.css.ts.vanilla.css-mistica.js";
-var t = "mtk7e90 _1y2v1nf9g", m = "mtk7e93", a = "mtk7e90";
-export { t as breadcrumbs, m as hideOnDesktop, a as hideOnTabletOrSmaller };
+var m = "mtk7e90 _1y2v1nf9g", t = "_1y2v1nfho _1y2v1nfhu", a = "mtk7e93", v = "mtk7e90";
+export { m as breadcrumbs, t as flexColumn, a as hideOnDesktop, v as hideOnTabletOrSmaller };