@telefonica/mistica 16.1.0 → 16.2.0

package/dist/grid.css-mistica.js

@@ -21,73 +21,109 @@ _export(exports, {
     fullRows: function() {
         return y;
     },
-    grid: function() {
+    gap: function() {
         return k;
     },
-    gridAlignContent: function() {
+    gapVars: function() {
         return e;
     },
-    gridAlignItems: function() {
+    grid: function() {
         return r;
     },
-    gridAutoFlow: function() {
+    gridAlignContent: function() {
+        return a;
+    },
+    gridAlignItems: function() {
         return t;
     },
+    gridAutoFlow: function() {
+        return n;
+    },
     gridJustifyContent: function() {
-        return a;
+        return s;
     },
     gridJustifyItems: function() {
-        return n;
+        return o;
     },
     gridTemplateColumns: function() {
-        return s;
+        return l;
     },
     gridTemplateColumnsAutoRepeat: function() {
-        return o;
+        return c;
     },
     gridTemplateRows: function() {
-        return l;
+        return d;
     },
     gridTemplateRowsAutoRepeat: function() {
-        return c;
+        return p;
     },
     justifySelf: function() {
-        return d;
+        return u;
     },
     rowStart: function() {
-        return u;
+        return g;
     },
     spanColumns: function() {
-        return p;
+        return w;
     },
     spanRows: function() {
-        return g;
+        return b;
     },
     vars: function() {
-        return w;
+        return h;
     }
 });
 require("./grid.css.ts.vanilla.css-mistica.js");
 var i = {
-    start: "mfyikv34",
-    end: "mfyikv35",
-    center: "mfyikv36",
-    stretch: "mfyikv37",
-    baseline: "mfyikv38"
+    start: "mfyikv3b",
+    end: "mfyikv3c",
+    center: "mfyikv3d",
+    stretch: "mfyikv3e",
+    baseline: "mfyikv3f"
 }, m = {
-    1: "mfyikv2c",
-    2: "mfyikv2d",
-    3: "mfyikv2e",
-    4: "mfyikv2f",
-    5: "mfyikv2g",
-    6: "mfyikv2h",
-    7: "mfyikv2i",
-    8: "mfyikv2j",
-    9: "mfyikv2k",
-    10: "mfyikv2l",
-    11: "mfyikv2m",
-    12: "mfyikv2n"
-}, f = "mfyikv1m", y = "mfyikv1n", k = "mfyikv4", e = {
+    1: "mfyikv2j",
+    2: "mfyikv2k",
+    3: "mfyikv2l",
+    4: "mfyikv2m",
+    5: "mfyikv2n",
+    6: "mfyikv2o",
+    7: "mfyikv2p",
+    8: "mfyikv2q",
+    9: "mfyikv2r",
+    10: "mfyikv2s",
+    11: "mfyikv2t",
+    12: "mfyikv2u"
+}, f = "mfyikv1t", y = "mfyikv1u", k = "mfyikvb", e = {
+    columnGap: {
+        desktop: "var(--mfyikv4)",
+        tablet: "var(--mfyikv5)",
+        mobile: "var(--mfyikv6)"
+    },
+    rowGap: {
+        desktop: "var(--mfyikv7)",
+        tablet: "var(--mfyikv8)",
+        mobile: "var(--mfyikv9)"
+    }
+}, r = "mfyikva", a = {
+    start: "mfyikv1m",
+    end: "mfyikv1n",
+    center: "mfyikv1o",
+    stretch: "mfyikv1p",
+    "space-between": "mfyikv1q",
+    "space-around": "mfyikv1r",
+    "space-evenly": "mfyikv1s"
+}, t = {
+    start: "mfyikv1a",
+    end: "mfyikv1b",
+    center: "mfyikv1c",
+    stretch: "mfyikv1d",
+    baseline: "mfyikv1e"
+}, n = {
+    column: "mfyikv12",
+    row: "mfyikv13",
+    "row dense": "mfyikv14",
+    "column dense": "mfyikv15"
+}, s = {
     start: "mfyikv1f",
     end: "mfyikv1g",
     center: "mfyikv1h",
@@ -95,101 +131,82 @@ var i = {
     "space-between": "mfyikv1j",
     "space-around": "mfyikv1k",
     "space-evenly": "mfyikv1l"
-}, r = {
-    start: "mfyikv13",
-    end: "mfyikv14",
-    center: "mfyikv15",
-    stretch: "mfyikv16",
-    baseline: "mfyikv17"
-}, t = {
-    column: "mfyikvv",
-    row: "mfyikvw",
-    "row dense": "mfyikvx",
-    "column dense": "mfyikvy"
-}, a = {
-    start: "mfyikv18",
-    end: "mfyikv19",
-    center: "mfyikv1a",
-    stretch: "mfyikv1b",
-    "space-between": "mfyikv1c",
-    "space-around": "mfyikv1d",
-    "space-evenly": "mfyikv1e"
-}, n = {
-    start: "mfyikvz",
-    end: "mfyikv10",
-    center: "mfyikv11",
-    stretch: "mfyikv12"
-}, s = {
-    1: "mfyikv7",
-    2: "mfyikv8",
-    3: "mfyikv9",
-    4: "mfyikva",
-    5: "mfyikvb",
-    6: "mfyikvc",
-    7: "mfyikvd",
-    8: "mfyikve",
-    9: "mfyikvf",
-    10: "mfyikvg",
-    11: "mfyikvh",
-    12: "mfyikvi"
-}, o = "mfyikv5", l = {
-    1: "mfyikvj",
-    2: "mfyikvk",
-    3: "mfyikvl",
-    4: "mfyikvm",
-    5: "mfyikvn",
-    6: "mfyikvo",
-    7: "mfyikvp",
-    8: "mfyikvq",
-    9: "mfyikvr",
-    10: "mfyikvs",
-    11: "mfyikvt",
-    12: "mfyikvu"
-}, c = "mfyikv6", d = {
-    start: "mfyikv30",
-    end: "mfyikv31",
-    center: "mfyikv32",
-    stretch: "mfyikv33"
-}, u = {
-    1: "mfyikv2o",
-    2: "mfyikv2p",
-    3: "mfyikv2q",
-    4: "mfyikv2r",
-    5: "mfyikv2s",
-    6: "mfyikv2t",
-    7: "mfyikv2u",
-    8: "mfyikv2v",
-    9: "mfyikv2w",
-    10: "mfyikv2x",
-    11: "mfyikv2y",
-    12: "mfyikv2z"
-}, p = {
-    1: "mfyikv1o",
-    2: "mfyikv1p",
-    3: "mfyikv1q",
-    4: "mfyikv1r",
-    5: "mfyikv1s",
-    6: "mfyikv1t",
-    7: "mfyikv1u",
-    8: "mfyikv1v",
-    9: "mfyikv1w",
-    10: "mfyikv1x",
-    11: "mfyikv1y",
-    12: "mfyikv1z"
+}, o = {
+    start: "mfyikv16",
+    end: "mfyikv17",
+    center: "mfyikv18",
+    stretch: "mfyikv19"
+}, l = {
+    1: "mfyikve",
+    2: "mfyikvf",
+    3: "mfyikvg",
+    4: "mfyikvh",
+    5: "mfyikvi",
+    6: "mfyikvj",
+    7: "mfyikvk",
+    8: "mfyikvl",
+    9: "mfyikvm",
+    10: "mfyikvn",
+    11: "mfyikvo",
+    12: "mfyikvp"
+}, c = "mfyikvc", d = {
+    1: "mfyikvq",
+    2: "mfyikvr",
+    3: "mfyikvs",
+    4: "mfyikvt",
+    5: "mfyikvu",
+    6: "mfyikvv",
+    7: "mfyikvw",
+    8: "mfyikvx",
+    9: "mfyikvy",
+    10: "mfyikvz",
+    11: "mfyikv10",
+    12: "mfyikv11"
+}, p = "mfyikvd", u = {
+    start: "mfyikv37",
+    end: "mfyikv38",
+    center: "mfyikv39",
+    stretch: "mfyikv3a"
 }, g = {
-    1: "mfyikv20",
-    2: "mfyikv21",
-    3: "mfyikv22",
-    4: "mfyikv23",
-    5: "mfyikv24",
-    6: "mfyikv25",
-    7: "mfyikv26",
-    8: "mfyikv27",
-    9: "mfyikv28",
-    10: "mfyikv29",
-    11: "mfyikv2a",
-    12: "mfyikv2b"
+    1: "mfyikv2v",
+    2: "mfyikv2w",
+    3: "mfyikv2x",
+    4: "mfyikv2y",
+    5: "mfyikv2z",
+    6: "mfyikv30",
+    7: "mfyikv31",
+    8: "mfyikv32",
+    9: "mfyikv33",
+    10: "mfyikv34",
+    11: "mfyikv35",
+    12: "mfyikv36"
 }, w = {
+    1: "mfyikv1v",
+    2: "mfyikv1w",
+    3: "mfyikv1x",
+    4: "mfyikv1y",
+    5: "mfyikv1z",
+    6: "mfyikv20",
+    7: "mfyikv21",
+    8: "mfyikv22",
+    9: "mfyikv23",
+    10: "mfyikv24",
+    11: "mfyikv25",
+    12: "mfyikv26"
+}, b = {
+    1: "mfyikv27",
+    2: "mfyikv28",
+    3: "mfyikv29",
+    4: "mfyikv2a",
+    5: "mfyikv2b",
+    6: "mfyikv2c",
+    7: "mfyikv2d",
+    8: "mfyikv2e",
+    9: "mfyikv2f",
+    10: "mfyikv2g",
+    11: "mfyikv2h",
+    12: "mfyikv2i"
+}, h = {
     rowMinSize: "var(--mfyikv0)",
     rowMaxSize: "var(--mfyikv1)",
     columnMinSize: "var(--mfyikv2)",

package/dist/grid.css.d.ts

@@ -4,7 +4,20 @@ export declare const vars: {
     columnMinSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     columnMaxSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
+export declare const gapVars: {
+    columnGap: {
+        desktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        mobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    rowGap: {
+        desktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        mobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
 export declare const grid: string;
+export declare const gap: string;
 export declare const gridTemplateColumnsAutoRepeat: string;
 export declare const gridTemplateRowsAutoRepeat: string;
 export declare const gridTemplateColumns: Record<1 | 2 | 4 | 8 | 12 | 5 | 6 | 3 | 10 | 9 | 7 | 11, string>;

package/dist/grid.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     Grid: function() {
-        return Y;
+        return _;
     },
     GridItem: function() {
-        return Z;
+        return v;
     }
 });
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
@@ -21,7 +21,6 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _gridcssmistica = require("./grid.css-mistica.js");
 const _css = require("./utils/css.js");
 const _dom = require("./utils/dom.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -96,44 +95,42 @@ function _object_spread(target) {
     }
     return target;
 }
-const K = (t, e)=>{
-    const i = {}, f = (r)=>typeof r == "number" ? `min(${r}px, 100%)` : r, o = (r)=>typeof r == "number" ? `${r}px` : r;
-    return t && typeof t != "number" && (typeof t.minSize < "u" && (i[_gridcssmistica.vars.rowMinSize] = f(t.minSize)), typeof t.maxSize < "u" && (i[_gridcssmistica.vars.rowMaxSize] = o(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (i[_gridcssmistica.vars.columnMinSize] = f(e.minSize)), typeof e.maxSize < "u" && (i[_gridcssmistica.vars.columnMaxSize] = o(e.maxSize))), i;
-}, Y = /*#__PURE__*/ _react.forwardRef((param, x)=>{
-    let { rows: t, columns: e, gap: i = 0, flow: f, justifyItems: o, alignItems: r, justifyContent: l, alignContent: n, height: u, minHeight: y, children: s, as: z = "div", dataAttributes: S } = param;
-    const [m, a] = Array.isArray(i) ? i : [
+const U = (t, e)=>{
+    const i = {}, a = (r)=>typeof r == "number" ? `min(${r}px, 100%)` : r, o = (r)=>typeof r == "number" ? `${r}px` : r;
+    return t && typeof t != "number" && (typeof t.minSize < "u" && (i[_gridcssmistica.vars.rowMinSize] = a(t.minSize)), typeof t.maxSize < "u" && (i[_gridcssmistica.vars.rowMaxSize] = o(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (i[_gridcssmistica.vars.columnMinSize] = a(e.minSize)), typeof e.maxSize < "u" && (i[_gridcssmistica.vars.columnMaxSize] = o(e.maxSize))), i;
+}, _ = /*#__PURE__*/ _react.forwardRef((param, V)=>{
+    let { rows: t, columns: e, gap: i = 0, flow: a, justifyItems: o, alignItems: r, justifyContent: f, alignContent: n, height: y, minHeight: b, children: s, as: S = "div", dataAttributes: G } = param;
+    const [m, p] = Array.isArray(i) ? i : [
         i,
         i
-    ], A = {
-        columnGap: m,
-        rowGap: a,
-        gridColumnGap: m,
-        gridRowGap: a
+    ], M = typeof m == "object" ? m : {
+        mobile: m,
+        tablet: m,
+        desktop: m
+    }, C = typeof p == "object" ? p : {
+        mobile: p,
+        tablet: p,
+        desktop: p
+    }, g = (x, l)=>{
+        var _l_tablet;
+        return (0, _css.applyCssVars)({
+            [x.mobile]: `${l.mobile}px`,
+            [x.tablet]: `${(_l_tablet = l.tablet) !== null && _l_tablet !== void 0 ? _l_tablet : l.mobile}px`,
+            [x.desktop]: `${l.desktop}px`
+        });
     };
-    let b = {}, g = "";
-    try {
-        g = (0, _sprinklescssmistica.sprinkles)(A);
-    } catch (e) {
-        b = {
-            columnGap: typeof m == "object" ? m.mobile : m,
-            rowGap: typeof a == "object" ? a.mobile : a,
-            // Chrome 57-65 support
-            gridColumnGap: typeof m == "object" ? m.mobile : m,
-            gridRowGap: typeof a == "object" ? a.mobile : a
-        };
-    }
-    return /*#__PURE__*/ _react.createElement(z, _object_spread({
-        ref: x,
-        className: (0, _classnames.default)(_gridcssmistica.grid, g, e ? typeof e == "number" ? _gridcssmistica.gridTemplateColumns[e] : _gridcssmistica.gridTemplateColumnsAutoRepeat : "", t ? typeof t == "number" ? _gridcssmistica.gridTemplateRows[t] : _gridcssmistica.gridTemplateRowsAutoRepeat : "", f ? _gridcssmistica.gridAutoFlow[f] : "", o ? _gridcssmistica.gridJustifyItems[o] : "", r ? _gridcssmistica.gridAlignItems[r] : "", l ? _gridcssmistica.gridJustifyContent[l] : "", n ? _gridcssmistica.gridAlignContent[n] : ""),
+    return /*#__PURE__*/ _react.createElement(S, _object_spread({
+        ref: V,
+        className: (0, _classnames.default)(_gridcssmistica.grid, _gridcssmistica.gap, e ? typeof e == "number" ? _gridcssmistica.gridTemplateColumns[e] : _gridcssmistica.gridTemplateColumnsAutoRepeat : "", t ? typeof t == "number" ? _gridcssmistica.gridTemplateRows[t] : _gridcssmistica.gridTemplateRowsAutoRepeat : "", a ? _gridcssmistica.gridAutoFlow[a] : "", o ? _gridcssmistica.gridJustifyItems[o] : "", r ? _gridcssmistica.gridAlignItems[r] : "", f ? _gridcssmistica.gridJustifyContent[f] : "", n ? _gridcssmistica.gridAlignContent[n] : ""),
         style: _object_spread({
-            height: u,
-            minHeight: y
-        }, g ? {} : b, (0, _css.applyCssVars)(_object_spread({}, K(t, e))))
-    }, (0, _dom.getPrefixedDataAttributes)(S)), s);
-}), Z = /*#__PURE__*/ _react.forwardRef((param, s)=>{
-    let { rowStart: t, rowSpan: e, columnStart: i, columnSpan: f, span: o, justifySelf: r, alignSelf: l, children: n, as: u = "div", dataAttributes: y } = param;
-    return o && (Array.isArray(o) ? (f = o[0], e = o[1]) : (f = o, e = o)), /*#__PURE__*/ _react.createElement(u, _object_spread({
+            height: y,
+            minHeight: b
+        }, g(_gridcssmistica.gapVars.columnGap, M), g(_gridcssmistica.gapVars.rowGap, C), (0, _css.applyCssVars)(_object_spread({}, U(t, e))))
+    }, (0, _dom.getPrefixedDataAttributes)(G)), s);
+}), v = /*#__PURE__*/ _react.forwardRef((param, s)=>{
+    let { rowStart: t, rowSpan: e, columnStart: i, columnSpan: a, span: o, justifySelf: r, alignSelf: f, children: n, as: y = "div", dataAttributes: b } = param;
+    return o && (Array.isArray(o) ? (a = o[0], e = o[1]) : (a = o, e = o)), /*#__PURE__*/ _react.createElement(y, _object_spread({
         ref: s,
-        className: (0, _classnames.default)(f ? f === "full" ? _gridcssmistica.fullColumns : _gridcssmistica.spanColumns[f] : "", e ? e === "full" ? _gridcssmistica.fullRows : _gridcssmistica.spanRows[e] : "", i ? _gridcssmistica.columnStart[i] : "", t ? _gridcssmistica.rowStart[t] : "", r ? _gridcssmistica.justifySelf[r] : "", l ? _gridcssmistica.alignSelf[l] : "")
-    }, (0, _dom.getPrefixedDataAttributes)(y)), n);
+        className: (0, _classnames.default)(a ? a === "full" ? _gridcssmistica.fullColumns : _gridcssmistica.spanColumns[a] : "", e ? e === "full" ? _gridcssmistica.fullRows : _gridcssmistica.spanRows[e] : "", i ? _gridcssmistica.columnStart[i] : "", t ? _gridcssmistica.rowStart[t] : "", r ? _gridcssmistica.justifySelf[r] : "", f ? _gridcssmistica.alignSelf[f] : "")
+    }, (0, _dom.getPrefixedDataAttributes)(b)), n);
 });

package/dist/hero.css-mistica.js

@@ -10,32 +10,38 @@ function _export(target, all) {
 }
 _export(exports, {
     actions: function() {
-        return t;
+        return o;
     },
     container: function() {
-        return o;
+        return v;
     },
     containerDesktop: function() {
-        return a;
+        return t;
     },
     containerMinHeight: function() {
-        return v;
+        return a;
     },
     containerMobile: function() {
+        return _;
+    },
+    contentContainer: function() {
         return i;
     },
     expandedContent: function() {
-        return _;
+        return e;
+    },
+    hero: function() {
+        return y;
     },
     layout: function() {
-        return e;
+        return f;
     },
     vars: function() {
-        return p;
+        return h;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./hero.css.ts.vanilla.css-mistica.js");
-var t = "_16rbpto7 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfi0", o = "_16rbpto2 _1y2v1nfhk", a = "_1y2v1nfhz _1y2v1nfio", v = "_16rbpto3", i = "_1y2v1nfhq", _ = "_16rbpto9", e = "_16rbpto8", p = {
+var o = "_16rbpto9 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfi0", v = "_16rbpto3 _1y2v1nfhk", t = "_1y2v1nfhz _1y2v1nfio", a = "_16rbpto5", _ = "_1y2v1nfhq", i = "_1y2v1nfio _1y2v1nfhk _1y2v1nfhw _1y2v1nfhq", e = "_16rbptob", y = "_1y2v1nfio", f = "_16rbptoa", h = {
     height: "var(--_16rbpto0)"
 };

package/dist/hero.css.d.ts

@@ -1,7 +1,9 @@
 export declare const vars: {
     height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
+export declare const hero: string;
 export declare const container: string;
+export declare const contentContainer: string;
 export declare const containerMinHeight: string;
 export declare const containerMobile: string;
 export declare const containerDesktop: string;

package/dist/hero.js

@@ -23,7 +23,6 @@ const _herocssmistica = require("./hero.css-mistica.js");
 const _imagecssmistica = require("./image.css-mistica.js");
 const _carousel = require("./carousel.js");
 const _dom = require("./utils/dom.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _css = require("./utils/css.js");
 const _responsivelayout = require("./responsive-layout.js");
@@ -152,13 +151,13 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const k = {
+const O = {
     default: _skincontractcssmistica.vars.colors.background,
     alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
     brand: _skincontractcssmistica.vars.colors.backgroundBrand,
     "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary,
     none: "transparent"
-}, O = (param)=>{
+}, k = (param)=>{
     let { children: e, isInverse: o, backgroundColor: t } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
         isInverse: o,
@@ -169,14 +168,9 @@ const k = {
         children: e
     });
 }, b = (param)=>{
-    let { headline: e, title: o, titleAs: t = "h1", pretitle: l, description: c, descriptionLinesMax: a, extra: n, button: d, secondaryButton: f, buttonLink: s } = param;
+    let { headline: e, title: o, titleAs: t = "h1", pretitle: l, description: c, descriptionLinesMax: a, extra: n, button: d, secondaryButton: u, buttonLink: s } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
-        className: (0, _sprinklescssmistica.sprinkles)({
-            height: "100%",
-            display: "flex",
-            justifyContent: "space-between",
-            flexDirection: "column"
-        }),
+        className: _herocssmistica.contentContainer,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 children: [
@@ -216,13 +210,13 @@ const k = {
                 className: _herocssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                     primaryButton: d,
-                    secondaryButton: f,
+                    secondaryButton: u,
                     link: s
                 })
             })
         ]
     });
-}, q = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
+}, F = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
     var { height: e, background: o = "default", media: t, desktopMediaPosition: l = "left", dataAttributes: c, noPaddingY: a } = _param, n = _object_without_properties(_param, [
         "height",
         "background",
@@ -231,8 +225,8 @@ const k = {
         "dataAttributes",
         "noPaddingY"
     ]);
-    const { isTabletOrSmaller: f } = (0, _hooks.useScreenSize)(), s = (0, _carousel.useSlideshowContext)(), u = !!(s != null && s.withBullets), D = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), N = o === "none" ? D : o === "brand" || o === "brand-secondary";
-    if (f) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+    const { isTabletOrSmaller: u } = (0, _hooks.useScreenSize)(), s = (0, _carousel.useSlideshowContext)(), f = !!(s != null && s.withBullets), w = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), N = o === "none" ? w : o === "brand" || o === "brand-secondary";
+    if (u) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             style: (0, _css.applyCssVars)({
                 [_imagecssmistica.vars.mediaBorderRadius]: "0px"
@@ -252,14 +246,14 @@ const k = {
                 }),
                 children: [
                     t,
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
                         isInverse: N,
-                        backgroundColor: k[o],
+                        backgroundColor: O[o],
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _herocssmistica.expandedContent,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: 24,
-                                paddingBottom: u ? 48 : a ? 0 : 24,
+                                paddingBottom: f ? 48 : a ? 0 : 24,
                                 className: _herocssmistica.layout,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
                             })
@@ -286,18 +280,16 @@ const k = {
             [_herocssmistica.vars.height]: typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "100%",
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.container
         })), {
-            background: k[o]
-        }),
-        className: (0, _sprinklescssmistica.sprinkles)({
-            height: "100%"
+            background: O[o]
         }),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
+        className: _herocssmistica.hero,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
             isInverse: N,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                 template: "6+6",
                 left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingTop: a ? 0 : 56,
-                    paddingBottom: a && !u ? 0 : 56,
+                    paddingBottom: a && !f ? 0 : 56,
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop, {
                         [_herocssmistica.containerMinHeight]: !a
                     }),
@@ -305,11 +297,11 @@ const k = {
                 }),
                 right: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingTop: a ? 0 : 56,
-                    paddingBottom: a && !u ? 0 : 56,
+                    paddingBottom: a && !f ? 0 : 56,
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
                     children: L
                 })
             })
         })
     }));
-}), dr = q;
+}), dr = F;