@telefonica/mistica 16.52.0 → 16.54.0

package/dist/grid.css-mistica.js

@@ -74,140 +74,140 @@ _export(exports, {
     }
 });
 /* empty css                                */ var _ = {
-    rowMinSize: "var(--v16_52_mfyikv0)",
-    rowMaxSize: "var(--v16_52_mfyikv1)",
-    columnMinSize: "var(--v16_52_mfyikv2)",
-    columnMaxSize: "var(--v16_52_mfyikv3)"
+    rowMinSize: "var(--v16_54_mfyikv0)",
+    rowMaxSize: "var(--v16_54_mfyikv1)",
+    columnMinSize: "var(--v16_54_mfyikv2)",
+    columnMaxSize: "var(--v16_54_mfyikv3)"
 }, i = {
     columnGap: {
-        desktop: "var(--v16_52_mfyikv4)",
-        tablet: "var(--v16_52_mfyikv5)",
-        mobile: "var(--v16_52_mfyikv6)"
+        desktop: "var(--v16_54_mfyikv4)",
+        tablet: "var(--v16_54_mfyikv5)",
+        mobile: "var(--v16_54_mfyikv6)"
     },
     rowGap: {
-        desktop: "var(--v16_52_mfyikv7)",
-        tablet: "var(--v16_52_mfyikv8)",
-        mobile: "var(--v16_52_mfyikv9)"
+        desktop: "var(--v16_54_mfyikv7)",
+        tablet: "var(--v16_54_mfyikv8)",
+        mobile: "var(--v16_54_mfyikv9)"
     }
-}, m = "v16_52_mfyikva", f = "v16_52_mfyikvb", y = "v16_52_mfyikvc", k = "v16_52_mfyikvd", e = {
-    1: "v16_52_mfyikve",
-    2: "v16_52_mfyikvf",
-    3: "v16_52_mfyikvg",
-    4: "v16_52_mfyikvh",
-    5: "v16_52_mfyikvi",
-    6: "v16_52_mfyikvj",
-    7: "v16_52_mfyikvk",
-    8: "v16_52_mfyikvl",
-    9: "v16_52_mfyikvm",
-    10: "v16_52_mfyikvn",
-    11: "v16_52_mfyikvo",
-    12: "v16_52_mfyikvp"
+}, m = "v16_54_mfyikva", f = "v16_54_mfyikvb", y = "v16_54_mfyikvc", k = "v16_54_mfyikvd", e = {
+    1: "v16_54_mfyikve",
+    2: "v16_54_mfyikvf",
+    3: "v16_54_mfyikvg",
+    4: "v16_54_mfyikvh",
+    5: "v16_54_mfyikvi",
+    6: "v16_54_mfyikvj",
+    7: "v16_54_mfyikvk",
+    8: "v16_54_mfyikvl",
+    9: "v16_54_mfyikvm",
+    10: "v16_54_mfyikvn",
+    11: "v16_54_mfyikvo",
+    12: "v16_54_mfyikvp"
 }, r = {
-    1: "v16_52_mfyikvq",
-    2: "v16_52_mfyikvr",
-    3: "v16_52_mfyikvs",
-    4: "v16_52_mfyikvt",
-    5: "v16_52_mfyikvu",
-    6: "v16_52_mfyikvv",
-    7: "v16_52_mfyikvw",
-    8: "v16_52_mfyikvx",
-    9: "v16_52_mfyikvy",
-    10: "v16_52_mfyikvz",
-    11: "v16_52_mfyikv10",
-    12: "v16_52_mfyikv11"
+    1: "v16_54_mfyikvq",
+    2: "v16_54_mfyikvr",
+    3: "v16_54_mfyikvs",
+    4: "v16_54_mfyikvt",
+    5: "v16_54_mfyikvu",
+    6: "v16_54_mfyikvv",
+    7: "v16_54_mfyikvw",
+    8: "v16_54_mfyikvx",
+    9: "v16_54_mfyikvy",
+    10: "v16_54_mfyikvz",
+    11: "v16_54_mfyikv10",
+    12: "v16_54_mfyikv11"
 }, a = {
-    column: "v16_52_mfyikv12",
-    row: "v16_52_mfyikv13",
-    "row dense": "v16_52_mfyikv14",
-    "column dense": "v16_52_mfyikv15"
+    column: "v16_54_mfyikv12",
+    row: "v16_54_mfyikv13",
+    "row dense": "v16_54_mfyikv14",
+    "column dense": "v16_54_mfyikv15"
 }, t = {
-    start: "v16_52_mfyikv16",
-    end: "v16_52_mfyikv17",
-    center: "v16_52_mfyikv18",
-    stretch: "v16_52_mfyikv19"
+    start: "v16_54_mfyikv16",
+    end: "v16_54_mfyikv17",
+    center: "v16_54_mfyikv18",
+    stretch: "v16_54_mfyikv19"
 }, n = {
-    start: "v16_52_mfyikv1a",
-    end: "v16_52_mfyikv1b",
-    center: "v16_52_mfyikv1c",
-    stretch: "v16_52_mfyikv1d",
-    baseline: "v16_52_mfyikv1e"
+    start: "v16_54_mfyikv1a",
+    end: "v16_54_mfyikv1b",
+    center: "v16_54_mfyikv1c",
+    stretch: "v16_54_mfyikv1d",
+    baseline: "v16_54_mfyikv1e"
 }, s = {
-    start: "v16_52_mfyikv1f",
-    end: "v16_52_mfyikv1g",
-    center: "v16_52_mfyikv1h",
-    stretch: "v16_52_mfyikv1i",
-    "space-between": "v16_52_mfyikv1j",
-    "space-around": "v16_52_mfyikv1k",
-    "space-evenly": "v16_52_mfyikv1l"
+    start: "v16_54_mfyikv1f",
+    end: "v16_54_mfyikv1g",
+    center: "v16_54_mfyikv1h",
+    stretch: "v16_54_mfyikv1i",
+    "space-between": "v16_54_mfyikv1j",
+    "space-around": "v16_54_mfyikv1k",
+    "space-evenly": "v16_54_mfyikv1l"
 }, o = {
-    start: "v16_52_mfyikv1m",
-    end: "v16_52_mfyikv1n",
-    center: "v16_52_mfyikv1o",
-    stretch: "v16_52_mfyikv1p",
-    "space-between": "v16_52_mfyikv1q",
-    "space-around": "v16_52_mfyikv1r",
-    "space-evenly": "v16_52_mfyikv1s"
-}, l = "v16_52_mfyikv1t", c = "v16_52_mfyikv1u", d = {
-    1: "v16_52_mfyikv1v",
-    2: "v16_52_mfyikv1w",
-    3: "v16_52_mfyikv1x",
-    4: "v16_52_mfyikv1y",
-    5: "v16_52_mfyikv1z",
-    6: "v16_52_mfyikv20",
-    7: "v16_52_mfyikv21",
-    8: "v16_52_mfyikv22",
-    9: "v16_52_mfyikv23",
-    10: "v16_52_mfyikv24",
-    11: "v16_52_mfyikv25",
-    12: "v16_52_mfyikv26"
+    start: "v16_54_mfyikv1m",
+    end: "v16_54_mfyikv1n",
+    center: "v16_54_mfyikv1o",
+    stretch: "v16_54_mfyikv1p",
+    "space-between": "v16_54_mfyikv1q",
+    "space-around": "v16_54_mfyikv1r",
+    "space-evenly": "v16_54_mfyikv1s"
+}, l = "v16_54_mfyikv1t", c = "v16_54_mfyikv1u", d = {
+    1: "v16_54_mfyikv1v",
+    2: "v16_54_mfyikv1w",
+    3: "v16_54_mfyikv1x",
+    4: "v16_54_mfyikv1y",
+    5: "v16_54_mfyikv1z",
+    6: "v16_54_mfyikv20",
+    7: "v16_54_mfyikv21",
+    8: "v16_54_mfyikv22",
+    9: "v16_54_mfyikv23",
+    10: "v16_54_mfyikv24",
+    11: "v16_54_mfyikv25",
+    12: "v16_54_mfyikv26"
 }, p = {
-    1: "v16_52_mfyikv27",
-    2: "v16_52_mfyikv28",
-    3: "v16_52_mfyikv29",
-    4: "v16_52_mfyikv2a",
-    5: "v16_52_mfyikv2b",
-    6: "v16_52_mfyikv2c",
-    7: "v16_52_mfyikv2d",
-    8: "v16_52_mfyikv2e",
-    9: "v16_52_mfyikv2f",
-    10: "v16_52_mfyikv2g",
-    11: "v16_52_mfyikv2h",
-    12: "v16_52_mfyikv2i"
+    1: "v16_54_mfyikv27",
+    2: "v16_54_mfyikv28",
+    3: "v16_54_mfyikv29",
+    4: "v16_54_mfyikv2a",
+    5: "v16_54_mfyikv2b",
+    6: "v16_54_mfyikv2c",
+    7: "v16_54_mfyikv2d",
+    8: "v16_54_mfyikv2e",
+    9: "v16_54_mfyikv2f",
+    10: "v16_54_mfyikv2g",
+    11: "v16_54_mfyikv2h",
+    12: "v16_54_mfyikv2i"
 }, u = {
-    1: "v16_52_mfyikv2j",
-    2: "v16_52_mfyikv2k",
-    3: "v16_52_mfyikv2l",
-    4: "v16_52_mfyikv2m",
-    5: "v16_52_mfyikv2n",
-    6: "v16_52_mfyikv2o",
-    7: "v16_52_mfyikv2p",
-    8: "v16_52_mfyikv2q",
-    9: "v16_52_mfyikv2r",
-    10: "v16_52_mfyikv2s",
-    11: "v16_52_mfyikv2t",
-    12: "v16_52_mfyikv2u"
+    1: "v16_54_mfyikv2j",
+    2: "v16_54_mfyikv2k",
+    3: "v16_54_mfyikv2l",
+    4: "v16_54_mfyikv2m",
+    5: "v16_54_mfyikv2n",
+    6: "v16_54_mfyikv2o",
+    7: "v16_54_mfyikv2p",
+    8: "v16_54_mfyikv2q",
+    9: "v16_54_mfyikv2r",
+    10: "v16_54_mfyikv2s",
+    11: "v16_54_mfyikv2t",
+    12: "v16_54_mfyikv2u"
 }, g = {
-    1: "v16_52_mfyikv2v",
-    2: "v16_52_mfyikv2w",
-    3: "v16_52_mfyikv2x",
-    4: "v16_52_mfyikv2y",
-    5: "v16_52_mfyikv2z",
-    6: "v16_52_mfyikv30",
-    7: "v16_52_mfyikv31",
-    8: "v16_52_mfyikv32",
-    9: "v16_52_mfyikv33",
-    10: "v16_52_mfyikv34",
-    11: "v16_52_mfyikv35",
-    12: "v16_52_mfyikv36"
+    1: "v16_54_mfyikv2v",
+    2: "v16_54_mfyikv2w",
+    3: "v16_54_mfyikv2x",
+    4: "v16_54_mfyikv2y",
+    5: "v16_54_mfyikv2z",
+    6: "v16_54_mfyikv30",
+    7: "v16_54_mfyikv31",
+    8: "v16_54_mfyikv32",
+    9: "v16_54_mfyikv33",
+    10: "v16_54_mfyikv34",
+    11: "v16_54_mfyikv35",
+    12: "v16_54_mfyikv36"
 }, w = {
-    start: "v16_52_mfyikv37",
-    end: "v16_52_mfyikv38",
-    center: "v16_52_mfyikv39",
-    stretch: "v16_52_mfyikv3a"
+    start: "v16_54_mfyikv37",
+    end: "v16_54_mfyikv38",
+    center: "v16_54_mfyikv39",
+    stretch: "v16_54_mfyikv3a"
 }, b = {
-    start: "v16_52_mfyikv3b",
-    end: "v16_52_mfyikv3c",
-    center: "v16_52_mfyikv3d",
-    stretch: "v16_52_mfyikv3e",
-    baseline: "v16_52_mfyikv3f"
+    start: "v16_54_mfyikv3b",
+    end: "v16_54_mfyikv3c",
+    center: "v16_54_mfyikv3d",
+    stretch: "v16_54_mfyikv3e",
+    baseline: "v16_54_mfyikv3f"
 };

package/dist/header.css-mistica.js

@@ -22,4 +22,4 @@ _export(exports, {
         return e;
     }
 });
-/* empty css                                     */ /* empty css                                  */ var e = "v16_52_mtk7e90", m = "v16_52_mtk7e92 v16_52_mtk7e90 v16_52_mtk7e91 v16_52_1y2v1nfhe", r = "v16_52_mtk7e93", t = "v16_52_mtk7e94 v16_52_1y2v1nfpm v16_52_1y2v1nfps";
+/* empty css                                     */ /* empty css                                  */ var e = "v16_54_mtk7e90", m = "v16_54_mtk7e92 v16_54_mtk7e90 v16_54_mtk7e91 v16_54_1y2v1nfhu", r = "v16_54_mtk7e93", t = "v16_54_mtk7e94 v16_54_1y2v1nfq2 v16_54_1y2v1nfq8";

package/dist/hero.css-mistica.js

@@ -10,25 +10,25 @@ function _export(target, all) {
 }
 _export(exports, {
     get actions () {
-        return y;
+        return b;
     },
     get container () {
-        return t;
+        return o;
     },
     get containerDesktop () {
         return e;
     },
     get containerMinHeight () {
-        return p;
+        return a;
     },
     get containerMobile () {
-        return a;
+        return p;
     },
     get contentContainer () {
-        return o;
+        return t;
     },
     get expandedContent () {
-        return f;
+        return y;
     },
     get flexColumn () {
         return i;
@@ -37,12 +37,12 @@ _export(exports, {
         return n;
     },
     get layout () {
-        return b;
+        return f;
     },
     get vars () {
         return r;
     }
 });
 /* empty css                                     */ /* empty css                                */ var r = {
-    height: "var(--v16_52_16rbpto0)"
-}, n = "v16_52_16rbpto1 v16_52_1y2v1nfqq", t = "v16_52_16rbpto3 v16_52_16rbpto2 v16_52_1y2v1nfpm", o = "v16_52_16rbpto4 v16_52_1y2v1nfqq v16_52_1y2v1nfpm v16_52_1y2v1nfpy v16_52_1y2v1nfps", p = "v16_52_16rbpto5", a = "v16_52_16rbpto6 v16_52_1y2v1nfps", e = "v16_52_16rbpto7 v16_52_1y2v1nfq1 v16_52_1y2v1nfqq", y = "v16_52_16rbpto9 v16_52_16rbpto8 v16_52_1y2v1nfpm v16_52_1y2v1nfq8 v16_52_1y2v1nfq2", b = "v16_52_16rbptoa", f = "v16_52_16rbptob", i = "v16_52_16rbptoc v16_52_1y2v1nfpm v16_52_1y2v1nfps";
+    height: "var(--v16_54_16rbpto0)"
+}, n = "v16_54_16rbpto1 v16_54_1y2v1nfr6", o = "v16_54_16rbpto3 v16_54_16rbpto2 v16_54_1y2v1nfq2", t = "v16_54_16rbpto4 v16_54_1y2v1nfr6 v16_54_1y2v1nfq2 v16_54_1y2v1nfqe v16_54_1y2v1nfq8", a = "v16_54_16rbpto5", p = "v16_54_16rbpto6 v16_54_1y2v1nfq8", e = "v16_54_16rbpto7 v16_54_1y2v1nfqh v16_54_1y2v1nfr6", b = "v16_54_16rbpto9 v16_54_16rbpto8 v16_54_1y2v1nfq2 v16_54_1y2v1nfqo v16_54_1y2v1nfqi", f = "v16_54_16rbptoa", y = "v16_54_16rbptob", i = "v16_54_16rbptoc v16_54_1y2v1nfq2 v16_54_1y2v1nfq8";

package/dist/hero.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return ue;
+        return he;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -159,37 +159,37 @@ const L = {
     "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary,
     none: "transparent"
 }, O = (param)=>{
-    let { children: r, variant: t, backgroundColor: a } = param;
+    let { children: t, variant: r, backgroundColor: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
-        variant: t,
+        variant: r,
         className: _herocssmistica.layout,
         innerDivClassName: _herocssmistica.layout,
         shouldExpandWhenNested: !0,
-        backgroundColor: a !== null && a !== void 0 ? a : "transparent",
-        children: r
+        backgroundColor: n !== null && n !== void 0 ? n : "transparent",
+        children: t
     });
 }, x = (param)=>{
-    let { headline: r, title: t, titleAs: a = "h1", pretitle: i, pretitleAs: c, description: o, descriptionLinesMax: m, extra: p, button: u, secondaryButton: C, buttonLink: s } = param;
-    const h = t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-        as: a,
+    let { headline: t, title: r, titleAs: n = "h1", pretitle: d, pretitleAs: c, description: a, descriptionLinesMax: m, extra: p, button: h, secondaryButton: C, buttonLink: s } = param;
+    const u = r ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+        as: n,
         dataAttributes: {
             testid: "title"
         },
-        children: t
-    }) : void 0, n = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+        children: r
+    }) : void 0, i = d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
         as: c,
         regular: !0,
         dataAttributes: {
             testid: "pretitle"
         },
-        children: i
-    }) : void 0, f = r ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        children: d
+    }) : void 0, f = t ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         "data-testid": "headline",
         style: {
-            paddingBottom: i || t || o ? 16 : 0,
+            paddingBottom: d || r || a ? 16 : 0,
             order: -1
         },
-        children: r
+        children: t
     }) : void 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         className: _herocssmistica.contentContainer,
@@ -201,32 +201,32 @@ const L = {
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _herocssmistica.flexColumn,
-                                children: (0, _headings.isBiggerHeading)(a, c) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: (0, _headings.isBiggerHeading)(n, c) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                     children: [
-                                        h,
+                                        u,
                                         f,
-                                        n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: {
-                                                paddingBottom: t ? 8 : 0,
+                                                paddingBottom: r ? 8 : 0,
                                                 order: -1
                                             },
-                                            children: n
+                                            children: i
                                         })
                                     ]
                                 }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                     children: [
-                                        n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                        i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             style: {
-                                                paddingBottom: t ? 8 : 0
+                                                paddingBottom: r ? 8 : 0
                                             },
-                                            children: n
+                                            children: i
                                         }),
                                         f,
-                                        h
+                                        u
                                     ]
                                 })
                             }),
-                            o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                 as: "p",
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
@@ -234,7 +234,7 @@ const L = {
                                 dataAttributes: {
                                     testid: "description"
                                 },
-                                children: o
+                                children: a
                             })
                         ]
                     }),
@@ -244,18 +244,18 @@ const L = {
                     })
                 ]
             }),
-            (u || s) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            (h || s) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _herocssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                    primaryButton: u,
+                    primaryButton: h,
                     secondaryButton: C,
                     link: s
                 })
             })
         ]
     });
-}, ue = /*#__PURE__*/ _react.forwardRef((_param, p)=>{
-    var { height: r, background: t = "default", media: a, desktopMediaPosition: i = "left", dataAttributes: c, noPaddingY: o } = _param, m = _object_without_properties(_param, [
+}, he = /*#__PURE__*/ _react.forwardRef((_param, p)=>{
+    var { height: t, background: r = "default", media: n, desktopMediaPosition: d = "left", dataAttributes: c, noPaddingY: a } = _param, m = _object_without_properties(_param, [
         "height",
         "background",
         "media",
@@ -264,39 +264,39 @@ const L = {
         "noPaddingY"
     ]);
     var _U;
-    const { isTabletOrSmaller: u } = (0, _hooks.useScreenSize)(), s = !!((_U = (0, _carousel.useSlideshowContext)()) === null || _U === void 0 ? void 0 : _U.withBullets), h = (0, _themevariantcontext.useThemeVariant)(), n = t === "none" ? h : ({
+    const { isTabletOrSmaller: h } = (0, _hooks.useScreenSize)(), s = !!((_U = (0, _carousel.useSlideshowContext)()) === null || _U === void 0 ? void 0 : _U.withBullets), u = (0, _themevariantcontext.useThemeVariant)(), i = r === "none" ? u : ({
         default: "default",
         alternative: "alternative",
         brand: "brand",
         "brand-secondary": "negative"
-    })[t];
-    if (u) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+    })[r];
+    if (h) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             style: (0, _css.applyCssVars)({
                 [_imagecssmistica.vars.mediaBorderRadius]: "0px"
             }),
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "Hero")), {
                 ref: p,
-                style: _object_spread({}, r === "100vh" ? {
+                style: _object_spread({}, t === "100vh" ? {
                     maxHeight: "-webkit-fill-available"
                 } : {}, (0, _css.applyCssVars)({
-                    [_herocssmistica.vars.height]: typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "100%",
+                    [_herocssmistica.vars.height]: typeof t == "number" ? `${t}px` : t !== null && t !== void 0 ? t : "100%",
                     [_imagecssmistica.vars.mediaBorderRadius]: "0px"
                 })),
                 className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerMobile, {
-                    [_herocssmistica.containerMinHeight]: !o
+                    [_herocssmistica.containerMinHeight]: !a
                 }),
                 children: [
-                    a,
+                    n,
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
-                        variant: n,
-                        backgroundColor: L[t],
+                        variant: i,
+                        backgroundColor: L[r],
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _herocssmistica.expandedContent,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
-                                    paddingTop: 24,
-                                    paddingBottom: s ? 48 : o ? 0 : 24
+                                    paddingTop: _skincontractcssmistica.vars.spacing.heroPadding.top,
+                                    paddingBottom: s ? 48 : a ? 0 : _skincontractcssmistica.vars.spacing.heroPadding.bottom
                                 },
                                 className: _herocssmistica.layout,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, m))
@@ -307,42 +307,42 @@ const L = {
             }))
         })
     });
-    const f = i === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    const f = d === "left" ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingRight: 24,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, m))
-    }), D = i === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    }), D = d === "right" ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingLeft: 24,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, m))
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "Hero")), {
         ref: p,
-        style: _object_spread_props(_object_spread({}, r === "100vh" ? {
+        style: _object_spread_props(_object_spread({}, t === "100vh" ? {
             maxHeight: "-webkit-fill-available"
         } : {}, (0, _css.applyCssVars)({
-            [_herocssmistica.vars.height]: typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "100%",
+            [_herocssmistica.vars.height]: typeof t == "number" ? `${t}px` : t !== null && t !== void 0 ? t : "100%",
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.container
         })), {
-            background: L[t]
+            background: L[r]
         }),
         className: _herocssmistica.hero,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
-            variant: n,
+            variant: i,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                 template: "6+6",
                 left: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     style: {
-                        paddingTop: o ? 0 : 56,
-                        paddingBottom: o && !s ? 0 : 56
+                        paddingTop: a ? 0 : _skincontractcssmistica.vars.spacing.heroPadding.top,
+                        paddingBottom: a && !s ? 0 : _skincontractcssmistica.vars.spacing.heroPadding.bottom
                     },
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop, {
-                        [_herocssmistica.containerMinHeight]: !o
+                        [_herocssmistica.containerMinHeight]: !a
                     }),
                     children: f
                 }),
                 right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     style: {
-                        paddingTop: o ? 0 : 56,
-                        paddingBottom: o && !s ? 0 : 56
+                        paddingTop: a ? 0 : _skincontractcssmistica.vars.spacing.heroPadding.top,
+                        paddingBottom: a && !s ? 0 : _skincontractcssmistica.vars.spacing.heroPadding.bottom
                     },
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
                     children: D

package/dist/horizontal-scroll.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     get noScrollbar () {
-        return m;
+        return o;
     },
     get scroll () {
         return l;
     }
 });
-/* empty css                                     */ /* empty css                                             */ /* empty css                                             */ var l = "v16_52_1gl3gmv1 v16_52_1gl3gmv0 v16_52_1y2v1nfpm", m = "v16_52_1gl3gmv2";
+/* empty css                                     */ /* empty css                                             */ /* empty css                                             */ var l = "v16_54_1gl3gmv1 v16_54_1gl3gmv0 v16_54_1y2v1nfq2", o = "v16_54_1gl3gmv2";