@telefonica/mistica 16.5.0 → 16.6.0

package/dist/header.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     Header: function() {
-        return P;
+        return Z;
     },
     HeaderLayout: function() {
-        return U;
+        return $;
     },
     MainSectionHeader: function() {
-        return Q;
+        return _;
     },
     MainSectionHeaderLayout: function() {
-        return V;
+        return E;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -34,6 +34,7 @@ const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _headercssmistica = require("./header.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _title = require("./title.js");
+const _headings = require("./utils/headings.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -118,62 +119,125 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const P = (param)=>{
-    let { headline: r, pretitle: e, pretitleAs: t, title: l, titleAs: c = "h2", description: d, dataAttributes: h, small: i = !1 } = param;
+const Z = (param)=>{
+    let { headline: o, pretitle: e, pretitleAs: r, title: d, titleAs: a = "h2", description: i, dataAttributes: b, small: c = !1 } = param;
+    const l = (()=>{
+        if (!e) return null;
+        const y = {
+            regular: !0,
+            color: _skincontractcssmistica.vars.colors.textPrimary,
+            as: r,
+            dataAttributes: {
+                testid: "pretitle"
+            }
+        };
+        if (typeof e == "string") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({}, y), {
+            children: e
+        }));
+        const { text: B } = e, H = _object_without_properties(e, [
+            "text"
+        ]);
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({}, y, H), {
+            children: B
+        }));
+    })(), p = d ? c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title3, {
+        as: a,
+        dataAttributes: {
+            testid: "title"
+        },
+        children: d
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title4, {
+        as: a,
+        dataAttributes: {
+            testid: "title"
+        },
+        children: d
+    }) : void 0, v = o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        style: {
+            paddingBottom: 8,
+            order: -1
+        },
+        "data-testid": "headline",
+        children: o
+    }) : void 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: {
             mobile: 24,
             desktop: 32
         },
-        dataAttributes: h,
-        children: (l || e || d) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        dataAttributes: _object_spread({
+            testid: "Header"
+        }, b),
+        children: (d || e || i) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
             paddingRight: 16,
-            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                space: 8,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: _headercssmistica.flexColumn,
                 children: [
-                    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
+                    (0, _headings.isBiggerHeading)(a, r) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                style: {
+                                    paddingBottom: i ? 8 : 0
+                                },
+                                children: p
+                            }),
+                            v,
+                            l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                style: {
+                                    paddingBottom: e || i ? 8 : 0,
+                                    order: -1
+                                },
+                                children: l
+                            })
+                        ]
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                style: {
+                                    paddingBottom: d || i ? 8 : 0
+                                },
+                                children: l
+                            }),
+                            v,
+                            p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                style: {
+                                    paddingBottom: i ? 8 : 0
+                                },
+                                children: p
+                            })
+                        ]
                     }),
-                    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
-                    }))
+                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            order: 1
+                        },
+                        children: c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            regular: !0,
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            dataAttributes: {
+                                testid: "description"
+                            },
+                            children: i
+                        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            regular: !0,
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            dataAttributes: {
+                                testid: "description"
+                            },
+                            children: i
+                        })
+                    })
                 ]
             })
         })
     });
-}, Q = (param)=>{
-    let { title: r, titleAs: e = "h1", description: t, button: l } = param;
+}, _ = (param)=>{
+    let { title: o, titleAs: e = "h1", description: r, button: d, dataAttributes: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 32,
+        dataAttributes: _object_spread({
+            testid: "MainSectionHeader"
+        }, a),
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                 space: {
@@ -181,87 +245,92 @@ const P = (param)=>{
                     desktop: 16
                 },
                 children: [
-                    r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text7, {
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text7, {
                         as: e,
-                        children: r
+                        dataAttributes: {
+                            testid: "title"
+                        },
+                        children: o
                     }),
-                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
-                        children: t
+                    r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
+                        dataAttributes: {
+                            testid: "description"
+                        },
+                        children: r
                     })
                 ]
             }),
-            l
+            d
         ]
     });
-}, 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", {
+}, $ = (param)=>{
+    let { isInverse: o = !1, breadcrumbs: e, header: r, extra: d, sideBySideExtraOnDesktop: a = !1, dataAttributes: i, bleed: b = !1, noPaddingY: c = !1 } = param;
+    const m = b && o && d, l = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _headercssmistica.breadcrumbs,
                 children: e
             }),
-            t
+            r
         ]
     });
-    return (0, _overscrollcolorcontext.useSetOverscrollColor)(r ? {
+    return (0, _overscrollcolorcontext.useSetOverscrollColor)(o ? {
         topColor: _skincontractcssmistica.vars.colors.backgroundBrandTop
-    } : {}), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
-        "component-name": "HeaderLayout"
-    }, d))), {
+    } : {}), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(i, "HeaderLayout")), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                isInverse: r,
+                variant: o ? "inverse" : void 0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingTop: i ? 0 : {
-                        mobile: t ? 32 : 0,
+                    paddingTop: c ? 0 : {
+                        mobile: r ? 32 : 0,
                         desktop: e ? 16 : 48
                     },
                     paddingBottom: {
-                        mobile: i && !m ? 0 : 24,
-                        desktop: m && !c ? 32 : i ? 0 : 48
+                        mobile: c && !m ? 0 : 24,
+                        desktop: m && !a ? 32 : c ? 0 : 48
                     },
-                    children: c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+                    children: a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "6+6",
-                        left: n,
+                        left: l,
                         right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: m ? _headercssmistica.hideOnTabletOrSmaller : "",
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: {
-                                    mobile: t ? 24 : 0,
+                                    mobile: r ? 24 : 0,
                                     desktop: 0
                                 },
-                                children: l
+                                children: d
                             })
                         })
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                        space: t ? {
+                        space: r ? {
                             mobile: 24,
                             desktop: 32
                         } : 0,
                         children: [
-                            n,
-                            !m && l
+                            l,
+                            !m && d
                         ]
                     })
                 })
             }),
             m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                className: c ? _headercssmistica.hideOnDesktop : "",
+                className: a ? _headercssmistica.hideOnDesktop : "",
                 backgroundColor: `linear-gradient(to bottom, ${_skincontractcssmistica.vars.colors.backgroundBrandBottom} 40px, ${_skincontractcssmistica.vars.colors.background} 0%)`,
-                children: l
+                children: d
             })
         ]
     }));
-}, V = (param)=>{
-    let { isInverse: r = !1, children: e, dataAttributes: t } = param;
-    return (0, _overscrollcolorcontext.useSetOverscrollColor)(r ? {
+}, E = (param)=>{
+    let { isInverse: o = !1, children: e, dataAttributes: r } = param;
+    return (0, _overscrollcolorcontext.useSetOverscrollColor)(o ? {
         topColor: _skincontractcssmistica.vars.colors.backgroundBrandTop
     } : {}), /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-        isInverse: r,
+        variant: o ? "inverse" : void 0,
         dataAttributes: _object_spread({
-            "component-name": "MainSectionHeaderLayout"
-        }, t),
+            "component-name": "MainSectionHeaderLayout",
+            testid: "MainSectionHeaderLayout"
+        }, r),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
             template: "6+6",
             left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {

package/dist/hero.css-mistica.js

@@ -10,31 +10,34 @@ function _export(target, all) {
 }
 _export(exports, {
     actions: function() {
-        return o;
+        return v;
     },
     container: function() {
-        return v;
+        return o;
     },
     containerDesktop: function() {
-        return t;
+        return a;
     },
     containerMinHeight: function() {
-        return a;
+        return t;
     },
     containerMobile: function() {
-        return i;
+        return _;
     },
     contentContainer: function() {
-        return _;
+        return i;
     },
     expandedContent: function() {
         return e;
     },
+    flexColumn: function() {
+        return f;
+    },
     hero: function() {
         return y;
     },
     layout: function() {
-        return f;
+        return h;
     },
     vars: function() {
         return p;
@@ -42,6 +45,6 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./hero.css.ts.vanilla.css-mistica.js");
-var o = "_16rbpto9 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", v = "_16rbpto3 _1y2v1nfho", t = "_1y2v1nfi3 _1y2v1nfis", a = "_16rbpto5", i = "_1y2v1nfhu", _ = "_1y2v1nfis _1y2v1nfho _1y2v1nfi0 _1y2v1nfhu", e = "_16rbptob", y = "_1y2v1nfis", f = "_16rbptoa", p = {
+var v = "_16rbpto9 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", o = "_16rbpto3 _1y2v1nfho", a = "_1y2v1nfi3 _1y2v1nfis", t = "_16rbpto5", _ = "_1y2v1nfhu", i = "_1y2v1nfis _1y2v1nfho _1y2v1nfi0 _1y2v1nfhu", e = "_16rbptob", f = "_1y2v1nfho _1y2v1nfhu", y = "_1y2v1nfis", h = "_16rbptoa", p = {
     height: "var(--_16rbpto0)"
 };

package/dist/hero.css.d.ts

@@ -10,3 +10,4 @@ export declare const containerDesktop: string;
 export declare const actions: string;
 export declare const layout: string;
 export declare const expandedContent: string;
+export declare const flexColumn: string;

package/dist/hero.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
+import { type DataAttributes, type HeadingType, type RendersElement, type RendersNullableElement } from './utils/types';
 import type Image from './image';
 import type Video from './video';
 import type { ButtonLink, ButtonPrimary } from './button';
 import type Tag from './tag';
-import type { DataAttributes, HeadingType, RendersElement, RendersNullableElement } from './utils/types';
 type HeroProps = {
     height?: string | number;
     background?: 'default' | 'alternative' | 'brand' | 'brand-secondary' | 'none';
@@ -11,6 +11,7 @@ type HeroProps = {
     media: RendersElement<typeof Image> | RendersElement<typeof Video>;
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     title?: string;
     titleAs?: HeadingType;
     description?: string;