@telefonica/mistica 14.17.1 → 14.18.0

package/dist/community/index.d.ts

@@ -1 +1,3 @@
 export { default as ExampleComponent } from './example-component';
+export { default as AdvancedDataCard } from './advanced-data-card';
+export { RowBlock, SimpleBlock, InformationBlock, HighlightedValueBlock, ValueBlock, ProgressBlock, } from './blocks';

package/dist/community/index.js

@@ -2,13 +2,41 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "ExampleComponent", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AdvancedDataCard: function() {
+        return _advanceddatacard.default;
+    },
+    ExampleComponent: function() {
         return _examplecomponent.default;
+    },
+    HighlightedValueBlock: function() {
+        return _blocks.HighlightedValueBlock;
+    },
+    InformationBlock: function() {
+        return _blocks.InformationBlock;
+    },
+    ProgressBlock: function() {
+        return _blocks.ProgressBlock;
+    },
+    RowBlock: function() {
+        return _blocks.RowBlock;
+    },
+    SimpleBlock: function() {
+        return _blocks.SimpleBlock;
+    },
+    ValueBlock: function() {
+        return _blocks.ValueBlock;
     }
 });
 const _examplecomponent = /*#__PURE__*/ _interop_require_default(require("./example-component.js"));
+const _advanceddatacard = /*#__PURE__*/ _interop_require_default(require("./advanced-data-card.js"));
+const _blocks = require("./blocks.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj

package/dist/credit-card-number-field.css-mistica.js

@@ -24,7 +24,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./credit-card-number-field.css.ts.vanilla.css-mistica.js");
-var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf60", f = {
-    default: "yvyo3q4 _1y2v1nf5z yvyo3q5",
-    backface: "yvyo3q4 _1y2v1nf5z yvyo3q6"
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nfb0", f = {
+    default: "yvyo3q4 _1y2v1nfaz yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nfaz yvyo3q6"
 };

package/dist/dialog.css-mistica.js

@@ -13,10 +13,10 @@ _export(exports, {
         return _;
     },
     closedOpactityLayer: function() {
-        return y;
+        return f;
     },
     dialogActions: function() {
-        return f;
+        return y;
     },
     dialogContent: function() {
         return a;
@@ -31,18 +31,18 @@ _export(exports, {
         return o;
     },
     modalOpacityLayer: function() {
-        return r;
+        return t;
     },
     variants: function() {
-        return t;
+        return r;
     },
     wrapper: function() {
-        return e;
+        return b;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./dialog.css.ts.vanilla.css-mistica.js");
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6y", a = "_3dl29lj _1y2v1nf6q _1y2v1nf9s", l = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6w _1y2v1nf7b _1y2v1nf7q _1y2v1nf85 _1y2v1nf60 _1y2v1nfau _1y2v1nfbo", o = "_3dl29la _1y2v1nf30 _1y2v1nfaj", r = "_3dl29l5 _1y2v1nf61 _1y2v1nf64 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6a _1y2v1nfau _1y2v1nfbo _1y2v1nfc3 _1y2v1nfb9 _1y2v1nf3b", t = {
-    dialog: "_3dl29ld _1y2v1nf64 _1y2v1nf6a _1y2v1nf6g _1y2v1nf7s _1y2v1nf87 _1y2v1nf70 _1y2v1nf7d",
-    default: "_3dl29ld _1y2v1nf64 _1y2v1nf6a _1y2v1nf6g _1y2v1nf6y _1y2v1nf7d _1y2v1nf7s _1y2v1nf87"
-}, e = "_3dl29l3 _1y2v1nf5z";
+var _ = "_3dl29lb", f = "_3dl29l6", y = "_3dl29ll _1y2v1nf6k", a = "_3dl29lj _1y2v1nfbq _1y2v1nfd4", l = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6e _1y2v1nf7n _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb0 _1y2v1nfe6 _1y2v1nff0", o = "_3dl29la _1y2v1nf30 _1y2v1nfdv", t = "_3dl29l5 _1y2v1nfb1 _1y2v1nfb4 _1y2v1nfbd _1y2v1nfbj _1y2v1nfba _1y2v1nfe6 _1y2v1nff0 _1y2v1nfff _1y2v1nfel _1y2v1nf3b", r = {
+    dialog: "_3dl29ld _1y2v1nfb4 _1y2v1nfba _1y2v1nfbg _1y2v1nf92 _1y2v1nfab _1y2v1nf6q _1y2v1nf7t",
+    default: "_3dl29ld _1y2v1nfb4 _1y2v1nfba _1y2v1nfbg _1y2v1nf6k _1y2v1nf7t _1y2v1nf92 _1y2v1nfab"
+}, b = "_3dl29l3 _1y2v1nfaz";

package/dist/double-field.css-mistica.js

@@ -12,6 +12,6 @@ require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./text-field-components.css.ts.vanilla.css-mistica.js");
 require("./double-field.css.ts.vanilla.css-mistica.js");
 var n = {
-    default: "skrulh1 _1y2v1nf64 _1y2v1nf69 _1y2v1nf8f",
-    fullWidth: "skrulh2 _1y2v1nf64 _1y2v1nf69 _1y2v1nf8f"
+    default: "skrulh1 _1y2v1nfb4 _1y2v1nfb9 _1y2v1nfbr",
+    fullWidth: "skrulh2 _1y2v1nfb4 _1y2v1nfb9 _1y2v1nfbr"
 };

package/dist/empty-state-card.css-mistica.js

@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./empty-state-card.css.ts.vanilla.css-mistica.js");
-var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf8r _1y2v1nf97", v = "_1azor6p2 _1y2v1nf66 _1y2v1nf99";
+var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nfc3 _1y2v1nfcj", v = "_1azor6p2 _1y2v1nfb6 _1y2v1nfcl";

package/dist/empty-state.css-mistica.js

@@ -28,17 +28,17 @@ _export(exports, {
         return o;
     },
     smallImage: function() {
-        return t;
+        return u;
     },
     vars: function() {
-        return u;
+        return t;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./empty-state.css.ts.vanilla.css-mistica.js");
-var n = "_13fzrua2 _1y2v1nf64 _1y2v1nf5y", v = {
+var n = "_13fzrua2 _1y2v1nfb4 _1y2v1nf5y", v = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, e = "_13fzrua9 _1y2v1nf8t _1y2v1nf99", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf8w", o = "_13fzrua5", t = "_13fzruab _1y2v1nf66", u = {
+}, e = "_13fzrua9 _1y2v1nfc5 _1y2v1nfcl", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nfc8", o = "_13fzrua5", u = "_13fzruab _1y2v1nfb6", t = {
     backgroundColor: "var(--_13fzrua0)"
 };

package/dist/empty-state.js

@@ -80,7 +80,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 const G = (param)=>{
-    let { title: c , description: d , button: e , buttonLink: p , largeImageUrl: o , imageUrl: i , icon: m , "aria-label": f , dataAttributes: g  } = param;
+    let { title: c , description: d , button: e , buttonLink: p , largeImageUrl: o , imageUrl: i , icon: n , "aria-label": f , dataAttributes: g  } = param;
     const { isDarkMode: v  } = (0, _hooks.useTheme)(), s = (0, _themevariantcontext.useIsInverseVariant)(), h = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
         className: _emptystatecssmistica.smallImage,
         alt: "",
@@ -111,9 +111,9 @@ const G = (param)=>{
                     space: 24,
                     className: o ? _emptystatecssmistica.contentVariants.largeImage : _emptystatecssmistica.contentVariants.default,
                     children: [
-                        h !== null && h !== void 0 ? h : m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        h !== null && h !== void 0 ? h : n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _emptystatecssmistica.iconContainer,
-                            children: m
+                            children: n
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 16,
@@ -139,7 +139,7 @@ const G = (param)=>{
                     flex: 1,
                     position: "relative"
                 },
-                children: o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioElement, {
+                children: o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
                     aspectRatio: 16 / 9,
                     className: _emptystatecssmistica.largeImageContainer,
                     height: "100%",

package/dist/feedback.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     container: function() {
-        return n;
+        return r;
     },
     desktopContainer: function() {
-        return r;
+        return n;
     },
     desktopContent: function() {
         return t;
@@ -33,4 +33,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./feedback.css.ts.vanilla.css-mistica.js");
-var n = "gx6h6a3 _1y2v1nf64 _1y2v1nf8w _1y2v1nf8f", r = "_1y2v1nfak _1y2v1nf64 _1y2v1nf6g", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";
+var r = "gx6h6a3 _1y2v1nfb4 _1y2v1nfc8 _1y2v1nfbr", n = "_1y2v1nfdw _1y2v1nfb4 _1y2v1nfbg", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";

package/dist/fixed-footer-layout.css-mistica.js

@@ -30,7 +30,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./fixed-footer-layout.css.ts.vanilla.css-mistica.js");
-var v = "p5j8j58", a = "p5j8j56 _1y2v1nf31", j = "p5j8j54", t = "p5j8j53 _1y2v1nf8f _1y2v1nf30", e = {
+var v = "p5j8j58", a = "p5j8j56 _1y2v1nf31", j = "p5j8j54", t = "p5j8j53 _1y2v1nfbr _1y2v1nf30", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
-}, p = "_1y2v1nf63";
+}, p = "_1y2v1nfb3";

package/dist/grid.css.d.ts

@@ -9,8 +9,8 @@ export declare const vars: {
 export declare const grid: string;
 export declare const gridTemplateColumnsAutoRepeat: string;
 export declare const gridTemplateRowsAutoRepeat: string;
-export declare const gridTemplateColumns: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 3 | 10 | 7 | 11, string>;
-export declare const gridTemplateRows: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 3 | 10 | 7 | 11, string>;
+export declare const gridTemplateColumns: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const gridTemplateRows: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
 export declare const gridAutoFlow: Record<"column" | "row" | "row dense" | "column dense", string>;
 export declare const gridJustifyItems: Record<"center" | "stretch" | "end" | "start", string>;
 export declare const gridAlignItems: Record<"center" | "stretch" | "end" | "start" | "baseline", string>;
@@ -18,9 +18,9 @@ export declare const gridJustifyContent: Record<"center" | "space-around" | "spa
 export declare const gridAlignContent: Record<"center" | "space-around" | "space-between" | "space-evenly" | "stretch" | "end" | "start", string>;
 export declare const fullColumns: string;
 export declare const fullRows: string;
-export declare const spanColumns: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 3 | 10 | 7 | 11, string>;
-export declare const spanRows: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 3 | 10 | 7 | 11, string>;
-export declare const columnStart: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 3 | 10 | 7 | 11, string>;
-export declare const rowStart: Record<2 | 4 | 8 | 12 | 6 | 5 | 1 | 9 | 3 | 10 | 7 | 11, string>;
+export declare const spanColumns: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const spanRows: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const columnStart: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
+export declare const rowStart: Record<1 | 2 | 4 | 8 | 12 | 6 | 5 | 3 | 9 | 10 | 7 | 11, string>;
 export declare const justifySelf: Record<"center" | "stretch" | "end" | "start", string>;
 export declare const alignSelf: Record<"center" | "stretch" | "end" | "start" | "baseline", string>;

package/dist/header.css-mistica.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    breadcrumbs: function() {
+        return t;
+    },
+    hideOnDesktop: function() {
+        return m;
+    },
+    hideOnTabletOrSmaller: function() {
+        return a;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./header.css.ts.vanilla.css-mistica.js");
+var t = "mtk7e90 _1y2v1nf7y", m = "mtk7e93", a = "mtk7e90";

package/dist/header.css.d.ts

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

package/dist/header.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return a;
+    }
+});
+const a = "";

package/dist/header.d.ts

@@ -15,6 +15,7 @@ type HeaderProps = {
     pretitle?: RichText;
     title?: string;
     description?: string;
+    small?: boolean;
     dataAttributes?: DataAttributes;
     /**
      * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead.
@@ -61,11 +62,13 @@ type HeaderLayoutProps = {
     children?: void;
     dataAttributes?: DataAttributes;
     bleed?: boolean;
+    noPaddingY?: boolean;
 };
 export declare const HeaderLayout: React.FC<HeaderLayoutProps>;
 type MainSectionHeaderLayoutProps = {
     isInverse?: boolean;
     children: RendersElement<typeof MainSectionHeader>;
+    dataAttributes?: DataAttributes;
 };
 export declare const MainSectionHeaderLayout: React.FC<MainSectionHeaderLayoutProps>;
 export {};

package/dist/header.js

@@ -10,16 +10,16 @@ function _export(target, all) {
 }
 _export(exports, {
     Header: function() {
-        return N;
+        return Z;
     },
     HeaderLayout: function() {
-        return U;
+        return $;
     },
     MainSectionHeader: function() {
-        return Q;
+        return _;
     },
     MainSectionHeaderLayout: function() {
-        return W;
+        return E;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -28,11 +28,12 @@ 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 _hooks = require("./hooks.js");
 const _overscrollcolorcontext = /*#__PURE__*/ _interop_require_default(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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -117,171 +118,190 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const N = (param)=>{
-    let { pretitle: l , title: e , description: t , dataAttributes: i , preamount: c , amount: m , button: h , subtitle: a , isErrorAmount: s , secondaryButton: y  } = param;
-    const { isTabletOrSmaller: L  } = (0, _hooks.useScreenSize)(), O = (0, _themevariantcontext.useIsInverseVariant)(), u = (g, S)=>{
-        if (typeof g == "string") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
+const Z = (param)=>{
+    let { pretitle: t , title: o , description: e , dataAttributes: d , small: m = !1 , preamount: s , amount: p , button: n , subtitle: i , isErrorAmount: h , secondaryButton: k  } = param;
+    const L = (0, _themevariantcontext.useIsInverseVariant)(), f = (u, b)=>{
+        if (typeof u == "string") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
             regular: !0
-        }, S), {
-            children: g
+        }, b), {
+            children: u
         }));
-        const { text: G  } = g, k = _object_without_properties(g, [
+        const { text: P  } = u, S = _object_without_properties(u, [
             "text"
         ]);
         return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
             regular: !0
-        }, S, k), {
-            children: g.text
+        }, b, S), {
+            children: u.text
         }));
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-        space: L ? 24 : 32,
-        dataAttributes: i,
+        space: {
+            mobile: 24,
+            desktop: 32
+        },
+        dataAttributes: d,
         children: [
-            (e || l || t) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            (o || t || e) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingRight: 16,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 8,
                     children: [
-                        l && u(l, {
+                        t && f(t, {
                             color: _skincontractcssmistica.vars.colors.textPrimary
                         }),
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
+                        m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text4, {
+                            regular: !0,
                             role: "heading",
                             "aria-level": 2,
-                            children: e
+                            children: o
+                        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
+                            role: "heading",
+                            "aria-level": 2,
+                            children: o
                         }),
-                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                        e && (m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
-                            children: t
-                        })
+                            children: e
+                        }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            regular: !0,
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            children: e
+                        }))
                     ]
                 })
             }),
-            (c || m || h || a) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+            (s || p || n || i) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                 space: 16,
                 children: [
-                    (c || m) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                    (s || p) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
-                            c && u(c, {
+                            s && f(s, {
                                 color: _skincontractcssmistica.vars.colors.textPrimary
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                color: s && !O ? _skincontractcssmistica.vars.colors.highlight : _skincontractcssmistica.vars.colors.textPrimary,
-                                children: m
+                                color: h && !L ? _skincontractcssmistica.vars.colors.highlight : _skincontractcssmistica.vars.colors.textPrimary,
+                                children: p
                             })
                         ]
                     }),
-                    (h || y) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                        primaryButton: h,
-                        secondaryButton: y
+                    (n || k) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                        primaryButton: n,
+                        secondaryButton: k
                     }),
-                    a && u(a, {})
+                    i && f(i, {})
                 ]
             })
         ]
     });
-}, Q = (param)=>{
-    let { title: l , description: e , button: t  } = param;
-    const { isTabletOrSmaller: i  } = (0, _hooks.useScreenSize)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+}, _ = (param)=>/* @__PURE__ */ {
+    let { title: t , description: o , button: e  } = param;
+    return (0, _jsxruntime.jsxs)(_stack.default, {
         space: 32,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                space: i ? 12 : 16,
+                space: {
+                    mobile: 12,
+                    desktop: 16
+                },
                 children: [
-                    l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text7, {
+                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text7, {
                         role: "heading",
                         "aria-level": 1,
-                        children: l
+                        children: t
                     }),
-                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
-                        children: e
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
+                        children: o
                     })
                 ]
             }),
-            t
+            e
         ]
     });
-}, U = (param)=>{
-    let { isInverse: l = !0 , breadcrumbs: e , header: t , extra: i , sideBySideExtraOnDesktop: c = !1 , dataAttributes: m , bleed: h = !1  } = param;
-    const { isTabletOrSmaller: a  } = (0, _hooks.useScreenSize)(), s = h && l;
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+}, $ = (param)=>{
+    let { isInverse: t = !0 , breadcrumbs: o , header: e , extra: d , sideBySideExtraOnDesktop: m = !1 , dataAttributes: s , bleed: p = !1 , noPaddingY: n = !1  } = param;
+    const i = p && t && d, h = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        children: [
+            o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _headercssmistica.breadcrumbs,
+                children: o
+            }),
+            e
+        ]
+    });
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        "component-name": "HeaderLayout"
+    }, s))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
-                isInverse: l,
-                dataAttributes: _object_spread({
-                    "component-name": "HeaderLayout"
-                }, m),
+                isInverse: t,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_overscrollcolorcontext.default, {}),
-                    a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingTop: t ? 32 : 0,
-                        paddingBottom: 24,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                            space: 24,
-                            children: [
-                                t,
-                                !s && i
-                            ]
-                        })
-                    }) : c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingTop: e ? 16 : 48,
-                        paddingBottom: 48,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        paddingTop: n ? 0 : {
+                            mobile: e ? 32 : 0,
+                            desktop: o ? 16 : 48
+                        },
+                        paddingBottom: {
+                            mobile: n && !i ? 0 : 24,
+                            desktop: i && !m ? 32 : n ? 0 : 48
+                        },
+                        children: m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                             template: "6+6",
-                            left: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                space: 32,
-                                children: [
-                                    e,
-                                    t
-                                ]
-                            }),
-                            right: i
-                        })
-                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingTop: e ? 16 : 48,
-                        paddingBottom: s ? 32 : 48,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                            space: a ? 24 : 32,
+                            left: h,
+                            right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: i ? _headercssmistica.hideOnTabletOrSmaller : "",
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                    paddingTop: {
+                                        mobile: e ? 24 : 0,
+                                        desktop: 0
+                                    },
+                                    children: d
+                                })
+                            })
+                        }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                            space: e ? {
+                                mobile: 24,
+                                desktop: 32
+                            } : 0,
                             children: [
-                                /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                    space: 32,
-                                    children: [
-                                        e,
-                                        t
-                                    ]
-                                }),
-                                !s && i
+                                h,
+                                !i && d
                             ]
                         })
                     })
                 ]
             }),
-            s && i && (a || !c) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+            i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                className: m ? _headercssmistica.hideOnDesktop : "",
                 backgroundColor: `linear-gradient(to bottom, ${_skincontractcssmistica.vars.colors.backgroundBrand} 40px, ${_skincontractcssmistica.vars.colors.background} 0%)`,
-                children: i
+                children: d
             })
         ]
-    });
-}, W = (param)=>{
-    let { isInverse: l = !0 , children: e  } = param;
-    const { isTabletOrSmaller: t  } = (0, _hooks.useScreenSize)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
-        isInverse: l,
+    }));
+}, E = (param)=>/* @__PURE__ */ {
+    let { isInverse: t = !0 , children: o , dataAttributes: e  } = param;
+    return (0, _jsxruntime.jsxs)(_responsivelayout.default, {
+        isInverse: t,
+        dataAttributes: _object_spread({
+            "component-name": "MainSectionHeaderLayout"
+        }, e),
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_overscrollcolorcontext.default, {}),
-            t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                paddingTop: 12,
-                paddingBottom: 24,
-                children: e
-            }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                 template: "6+6",
                 left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingY: 48,
-                    children: e
+                    paddingTop: {
+                        mobile: 12,
+                        desktop: 48
+                    },
+                    paddingBottom: {
+                        mobile: 24,
+                        desktop: 48
+                    },
+                    children: o
                 }),
                 right: null
             })