@telefonica/mistica 15.2.0 → 15.3.0

package/dist-es/empty-state.js

@@ -54,12 +54,12 @@ function _object_spread_props(target, source) {
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import x from "classnames";
 import { useIsInverseVariant as k } from "./theme-variant-context.js";
-import { ButtonPrimary as N } from "./button.js";
-import { useTheme as B } from "./hooks.js";
-import l from "./stack.js";
-import { Text6 as C, Text3 as I } from "./text.js";
+import { ButtonPrimary as B } from "./button.js";
+import { useTheme as C } from "./hooks.js";
+import n from "./stack.js";
+import { Text6 as I, Text3 as N } from "./text.js";
 import S from "./button-group.js";
-import { container as E, inverseBorder as T, vars as V, contentVariants as n, iconContainer as $, largeImageContainer as b, largeImage as j, smallImage as A } from "./empty-state.css-mistica.js";
+import { container as E, inverseBorder as T, vars as V, contentVariants as l, iconContainer as $, largeImageContainer as b, largeImage as j, smallImage as A } from "./empty-state.css-mistica.js";
 import { vars as a } from "./skins/skin-contract.css-mistica.js";
 import { AspectRatioContainer as D } from "./utils/aspect-ratio-support.js";
 import { getPrefixedDataAttributes as P } from "./utils/dom.js";
@@ -67,11 +67,11 @@ import { sprinkles as R } from "./sprinkles.css-mistica.js";
 import { applyCssVars as G } from "./utils/css.js";
 const M = (param)=>{
     let { title: c, titleAs: p = "h1", description: d, button: e, buttonLink: f, largeImageUrl: o, imageUrl: i, icon: m, "aria-label": g, dataAttributes: v } = param;
-    const { isDarkMode: h } = B(), s = k(), u = i ? /* @__PURE__ */ r("img", {
+    const { isDarkMode: h } = C(), s = k(), u = i ? /* @__PURE__ */ r("img", {
         className: A,
         alt: "",
         src: i
-    }) : void 0, y = _object_spread_props(_object_spread({}, (e == null ? void 0 : e.type) === N ? {
+    }) : void 0, y = _object_spread_props(_object_spread({}, (e == null ? void 0 : e.type) === B ? {
         primaryButton: e
     } : {
         secondaryButton: e
@@ -93,22 +93,22 @@ const M = (param)=>{
                 style: {
                     flex: 1
                 },
-                children: /* @__PURE__ */ t(l, {
+                children: /* @__PURE__ */ t(n, {
                     space: 24,
-                    className: o ? n.largeImage : n.default,
+                    className: o ? l.largeImage : l.default,
                     children: [
                         u !== null && u !== void 0 ? u : m && /* @__PURE__ */ r("div", {
                             className: $,
                             children: m
                         }),
-                        /* @__PURE__ */ t(l, {
+                        /* @__PURE__ */ t(n, {
                             space: 16,
                             children: [
-                                /* @__PURE__ */ r(C, {
+                                /* @__PURE__ */ r(I, {
                                     as: p,
                                     children: c
                                 }),
-                                /* @__PURE__ */ r(I, {
+                                /* @__PURE__ */ r(N, {
                                     regular: !0,
                                     as: "p",
                                     color: s ? a.colors.inverse : a.colors.textSecondary,

package/dist-es/feedback.js

@@ -99,7 +99,7 @@ import p from "./stack.js";
 import u from "classnames";
 import re from "./button-group.js";
 import { vars as s } from "./skins/skin-contract.css-mistica.js";
-import { container as te, innerContainer as ce, innerContainerWithButtons as ne, backgroundBrand as ae, iconContainer as ie, feedbackData as se, feedbackTextAppearFast as de, feedbackTextAppearMedium as N, feedbackTextAppearSlow as le, desktopContainer as me, desktopContent as ue, desktopImage as pe } from "./feedback.css-mistica.js";
+import { container as te, innerContainer as ce, innerContainerWithButtons as ne, backgroundBrand as ae, iconContainer as ie, feedbackData as se, feedbackTextAppearFast as de, feedbackTextAppearMedium as I, feedbackTextAppearSlow as le, desktopContainer as me, desktopContent as ue, desktopImage as pe } from "./feedback.css-mistica.js";
 import V from "./icons/icon-success-vivo-new.js";
 const O = (r)=>!J(r), D = (param)=>{
     let { primaryButton: r, secondaryButton: o } = param;
@@ -112,12 +112,12 @@ const O = (r)=>!J(r), D = (param)=>{
     return /* @__PURE__ */ e("style", {
         children: o
     });
-}, I = (r)=>{
+}, N = (r)=>{
     U() && X(r).catch(()=>{});
 }, E = (r)=>{
     H.useEffect(()=>{
         let o;
-        return r === "success" && (o = setTimeout(()=>I("success"), 700)), r === "error" && (o = setTimeout(()=>I("error"), 1e3)), ()=>{
+        return r === "success" && (o = setTimeout(()=>N("success"), 700)), r === "error" && (o = setTimeout(()=>N("error"), 1e3)), ()=>{
             clearTimeout(o);
         };
     }, [
@@ -150,7 +150,7 @@ const O = (r)=>!J(r), D = (param)=>{
                         })
                     }),
                     a && /* @__PURE__ */ e("div", {
-                        className: u(n && N),
+                        className: u(n && I),
                         children: a && /* @__PURE__ */ e(Z, {
                             regular: !0,
                             color: s.colors.textSecondary,
@@ -158,7 +158,7 @@ const O = (r)=>!J(r), D = (param)=>{
                         })
                     }),
                     c && /* @__PURE__ */ e("div", {
-                        className: u(n && (a ? le : N)),
+                        className: u(n && (a ? le : I)),
                         children: c
                     })
                 ]

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./fixed-footer-layout.css.ts.vanilla.css-mistica.js";
-var v = "p5j8j58", a = "p5j8j56 _1y2v1nf3l", j = "p5j8j54", t = "p5j8j53 _1y2v1nfhx", e = {
+var a = "p5j8j57", j = "p5j8j55", t = "p5j8j54", v = "p5j8j53 _1y2v1nfhx", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
 }, p = "_1y2v1nfh9";
-export { v as container, a as elevated, j as fixedFooter, t as footer, e as vars, p as withoutFooter };
+export { a as container, j as elevated, t as fixedFooter, v as footer, e as vars, p as withoutFooter };

package/dist-es/fixed-footer-layout.js

@@ -51,73 +51,75 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as L, Fragment as O, jsx as c } from "react/jsx-runtime";
-import * as l from "react";
+import { jsxs as L, Fragment as O, jsx as l } from "react/jsx-runtime";
+import * as m from "react";
 import $ from "classnames";
 import { debounce as k } from "./utils/helpers.js";
-import { isRunningAcceptanceTest as N } from "./utils/platform.js";
-import { useScreenSize as W, useTheme as z, useElementDimensions as P, useIsWithinIFrame as j, useWindowHeight as B, useScreenHeight as _, useIsomorphicLayoutEffect as H } from "./hooks.js";
-import { getScrollableParentElement as V, addPassiveEventListener as v, removePassiveEventListener as h, hasScroll as q, getScrollDistanceToBottom as G } from "./utils/dom.js";
+import { isRunningAcceptanceTest as W } from "./utils/platform.js";
+import { useScreenSize as z, useTheme as N, useElementDimensions as P, useIsWithinIFrame as j, useWindowHeight as B, useScreenHeight as _, useIsomorphicLayoutEffect as H } from "./hooks.js";
+import { getScrollableParentElement as V, addPassiveEventListener as h, removePassiveEventListener as E, hasScroll as q, getScrollDistanceToBottom as G } from "./utils/dom.js";
 import { vars as J } from "./skins/skin-contract.css-mistica.js";
-import { container as K, vars as E, footer as M, withoutFooter as Q, elevated as U, fixedFooter as X } from "./fixed-footer-layout.css-mistica.js";
-import { applyCssVars as Y, safeAreaInsetBottom as x } from "./utils/css.js";
+import { container as K, vars as x, footer as M, withoutFooter as Q, elevated as U, fixedFooter as X } from "./fixed-footer-layout.css-mistica.js";
+import { applyCssVars as Y, safeAreaInsetBottom as S } from "./utils/css.js";
 const Z = 2, C = (e)=>e === document.documentElement ? window : e, ee = (e)=>{
     const n = setTimeout(e, 0);
     return {
         cancel: ()=>clearTimeout(n)
     };
 }, te = (param)=>{
-    let { isFooterVisible: e = !0, footer: n, footerHeight: S = "auto", footerBgColor: T = J.colors.background, containerBgColor: m, children: y, onChangeFooterHeight: o } = param;
-    const [g, w] = l.useState(!1), d = l.useRef(null), { isTabletOrSmaller: F } = W(), { platformOverrides: u } = z(), { height: s, ref: b } = P(), I = j(), f = B(), A = _(), i = f - s > (I ? f : A) / Z;
+    let { isFooterVisible: e = !0, footer: n, footerHeight: T = "auto", footerBgColor: y = J.colors.background, containerBgColor: d, children: g, onChangeFooterHeight: o } = param;
+    const [w, F] = m.useState(!1), u = m.useRef(null), { isTabletOrSmaller: i } = z(), { platformOverrides: f } = N(), { height: s, ref: b } = P(), I = j(), p = B(), A = _(), a = p - s > (I ? p : A) / Z;
     H(()=>{
         o == null || o(s);
     }, [
         o,
         s
-    ]), l.useEffect(()=>{
-        const a = V(d.current), R = ()=>N(u) || !i ? !1 : q(a) ? G(a) > 1 : !1, t = k(()=>{
-            w(R());
+    ]), m.useEffect(()=>{
+        if (!i || W(f) || a) return;
+        const c = V(u.current), R = ()=>q(c) && G(c) > 1, t = k(()=>{
+            F(R());
         }, 50, {
             leading: !0,
             maxWait: 200
-        }), D = ee(t), r = C(a);
-        return v(r, "resize", t), v(r, "scroll", t), ()=>{
-            t.cancel(), h(r, "scroll", t), h(r, "resize", t), D.cancel();
+        }), D = ee(t), r = C(c);
+        return h(r, "resize", t), h(r, "scroll", t), ()=>{
+            t.cancel(), E(r, "scroll", t), E(r, "resize", t), D.cancel();
         };
     }, [
-        i,
-        u
+        a,
+        f,
+        i
     ]);
-    const p = i;
+    const v = a;
     return /* @__PURE__ */ L(O, {
         children: [
-            /* @__PURE__ */ c("div", {
-                ref: d,
+            /* @__PURE__ */ l("div", {
+                ref: u,
                 className: K,
-                style: Y(_object_spread_props(_object_spread({}, m && {
-                    [E.backgroundColor]: m
+                style: Y(_object_spread_props(_object_spread({}, d && {
+                    [x.backgroundColor]: d
                 }), {
-                    [E.footerHeight]: p ? `calc(${x} + ${s}px)` : "0px"
+                    [x.footerHeight]: v ? `calc(${S} + ${s}px)` : "0px"
                 })),
-                children: y
+                children: g
             }),
-            /* @__PURE__ */ c("div", {
+            /* @__PURE__ */ l("div", {
                 className: $(M, {
                     [Q]: !e,
-                    [U]: g,
-                    [X]: p
+                    [U]: w,
+                    [X]: v
                 }),
                 style: {
-                    background: F ? T : void 0
+                    background: i ? y : void 0
                 },
                 "data-testid": `fixed-footer${e ? "-visible" : "-hidden"}`,
                 "data-position-fixed": "bottom",
-                children: e && /* @__PURE__ */ c("aside", {
+                children: e && /* @__PURE__ */ l("aside", {
                     ref: b,
                     "data-component-name": "FixedFooter",
                     style: {
-                        height: S,
-                        marginBottom: x
+                        height: T,
+                        marginBottom: S
                     },
                     children: n
                 })

package/dist-es/form.js

@@ -51,7 +51,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as F } from "react/jsx-runtime";
+import { jsx as N } from "react/jsx-runtime";
 import * as n from "react";
 import { useTheme as A, useAriaId as _ } from "./hooks.js";
 import { FormContext as q } from "./form-context.js";
@@ -83,8 +83,8 @@ const W = (param)=>{
             if (s.disabled) continue;
             if (s.required && !((o = l[t]) != null && o.trim())) e[t] = g.formFieldErrorIsMandatory;
             else {
-                const C = u == null ? void 0 : u(i[t], l[t]);
-                C && (e[t] = C);
+                const F = u == null ? void 0 : u(i[t], l[t]);
+                F && (e[t] = F);
             }
         }
         const r = Object.keys(e).map((t)=>{
@@ -120,14 +120,14 @@ const W = (param)=>{
         }, 100);
     }, [
         h
-    ]), N = (e)=>[
+    ]), O = (e)=>[
             ...c.current.keys()
         ].reduce((r, o)=>{
             var t, s;
             return (s = (t = c.current.get(o)) == null ? void 0 : t.input) != null && s.disabled ? r : _object_spread_props(_object_spread({}, r), {
                 [o]: e[o]
             });
-        }, {}), O = n.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(p()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(b(N(i), N(l))).finally(()=>{
+        }, {}), C = n.useCallback((e)=>(e == null || e.preventDefault(), m("sending"), Object.keys(p()).length > 0 ? (m("filling"), Promise.resolve()) : Promise.resolve(b(O(i), O(l))).finally(()=>{
             f.current && m("filling");
         })), [
         b,
@@ -145,7 +145,7 @@ const W = (param)=>{
                 [e]: r
             }));
     }, []);
-    return /* @__PURE__ */ F(q.Provider, {
+    return /* @__PURE__ */ N(q.Provider, {
         value: {
             formStatus: w,
             values: i,
@@ -157,12 +157,12 @@ const W = (param)=>{
             register: j,
             jumpToNext: T,
             validate: p,
-            submit: O,
+            submit: C,
             formId: v
         },
-        children: /* @__PURE__ */ F("form", {
+        children: /* @__PURE__ */ N("form", {
             id: v,
-            onSubmit: O,
+            onSubmit: C,
             ref: d,
             className: B(L({
                 width: "100%"

package/dist-es/grid.js

@@ -28,7 +28,7 @@ function _object_spread(target) {
 }
 import c from "classnames";
 import * as d from "react";
-import { grid as G, gridTemplateColumns as C, gridTemplateColumnsAutoRepeat as M, gridTemplateRows as T, gridTemplateRowsAutoRepeat as j, gridAutoFlow as v, gridJustifyItems as N, gridAlignItems as V, gridJustifyContent as k, gridAlignContent as E, fullColumns as J, spanColumns as h, fullRows as w, spanRows as D, columnStart as F, rowStart as I, justifySelf as P, alignSelf as q, vars as p } from "./grid.css-mistica.js";
+import { grid as G, gridTemplateColumns as C, gridTemplateColumnsAutoRepeat as M, gridTemplateRows as T, gridTemplateRowsAutoRepeat as j, gridAutoFlow as v, gridJustifyItems as V, gridAlignItems as k, gridJustifyContent as E, gridAlignContent as J, fullColumns as N, spanColumns as h, fullRows as w, spanRows as D, columnStart as F, rowStart as I, justifySelf as P, alignSelf as q, vars as p } from "./grid.css-mistica.js";
 import { applyCssVars as B } from "./utils/css.js";
 import { getPrefixedDataAttributes as R } from "./utils/dom.js";
 import { sprinkles as H } from "./sprinkles.css-mistica.js";
@@ -60,7 +60,7 @@ const K = (t, e)=>{
     }
     return /*#__PURE__*/ d.createElement(z, _object_spread({
         ref: x,
-        className: c(G, g, e ? typeof e == "number" ? C[e] : M : "", t ? typeof t == "number" ? T[t] : j : "", f ? v[f] : "", o ? N[o] : "", r ? V[r] : "", l ? k[l] : "", n ? E[n] : ""),
+        className: c(G, g, e ? typeof e == "number" ? C[e] : M : "", t ? typeof t == "number" ? T[t] : j : "", f ? v[f] : "", o ? V[o] : "", r ? k[r] : "", l ? E[l] : "", n ? J[n] : ""),
         style: _object_spread({
             height: u,
             minHeight: y
@@ -70,7 +70,7 @@ const K = (t, e)=>{
     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__*/ d.createElement(u, _object_spread({
         ref: s,
-        className: c(f ? f === "full" ? J : h[f] : "", e ? e === "full" ? w : D[e] : "", i ? F[i] : "", t ? I[t] : "", r ? P[r] : "", l ? q[l] : "")
+        className: c(f ? f === "full" ? N : h[f] : "", e ? e === "full" ? w : D[e] : "", i ? F[i] : "", t ? I[t] : "", r ? P[r] : "", l ? q[l] : "")
     }, R(y)), n);
 });
 export { Y as Grid, Z as GridItem };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./hero.css.ts.vanilla.css-mistica.js";
-var t = "_16rbpto6 _1y2v1nfha _1y2v1nfhw _1y2v1nfhq", v = "_16rbpto2 _1y2v1nfha", n = "_1y2v1nfhp _1y2v1nfie", _ = "_1y2v1nfhg", i = "_16rbpto7", p = {
+var n = "_16rbpto7 _1y2v1nfha _1y2v1nfhw _1y2v1nfhq", o = "_16rbpto2 _1y2v1nfha", v = "_1y2v1nfhp _1y2v1nfie", i = "_16rbpto3", _ = "_1y2v1nfhg", e = "_16rbpto8", p = "_16rbpto9", h = {
     height: "var(--_16rbpto0)"
 };
-export { t as actions, v as container, n as containerDesktop, _ as containerMobile, i as layout, p as vars };
+export { n as actions, o as container, v as containerDesktop, i as containerMinHeight, _ as containerMobile, e as layout, p as mediaContainer, h as vars };

package/dist-es/hero.js

@@ -78,173 +78,184 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import * as I from "react";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import * as T from "react";
 import u from "classnames";
-import { useScreenSize as T } from "./hooks.js";
-import { Text3 as y, Text8 as D } from "./text.js";
-import O from "./grid-layout.js";
-import d from "./box.js";
-import x from "./stack.js";
-import j from "./button-group.js";
-import { vars as a } from "./skins/skin-contract.css-mistica.js";
-import { container as g, containerMobile as G, containerDesktop as b, layout as L, actions as $, vars as B } from "./hero.css-mistica.js";
-import { vars as N } from "./image.css-mistica.js";
-import { useIsInsideSlideshowContext as A } from "./carousel.js";
-import { getPrefixedDataAttributes as S } from "./utils/dom.js";
-import { sprinkles as k } from "./sprinkles.css-mistica.js";
-import { ThemeVariant as V } from "./theme-variant-context.js";
-import { applyCssVars as f } from "./utils/css.js";
-const C = (param)=>{
-    let { children: e, isInverse: o } = param;
-    return /* @__PURE__ */ r(V, {
-        isInverse: o,
-        children: /* @__PURE__ */ r("div", {
-            className: L,
-            children: e
-        })
+import { useScreenSize as j } from "./hooks.js";
+import { Text3 as b, Text8 as G } from "./text.js";
+import $ from "./grid-layout.js";
+import m from "./box.js";
+import N from "./stack.js";
+import A from "./button-group.js";
+import { vars as i } from "./skins/skin-contract.css-mistica.js";
+import { container as v, containerMobile as V, containerMinHeight as C, mediaContainer as z, layout as y, containerDesktop as B, actions as E, vars as R } from "./hero.css-mistica.js";
+import { vars as S } from "./image.css-mistica.js";
+import { useIsInsideSlideshowContext as K } from "./carousel.js";
+import { getPrefixedDataAttributes as k } from "./utils/dom.js";
+import { sprinkles as w } from "./sprinkles.css-mistica.js";
+import { useIsInverseVariant as M } from "./theme-variant-context.js";
+import { applyCssVars as h } from "./utils/css.js";
+import { InternalResponsiveLayout as U } from "./responsive-layout.js";
+const H = (param)=>{
+    let { children: o, isInverse: e, isInsideSlideShow: a } = param;
+    return /* @__PURE__ */ r(U, {
+        isInverse: e,
+        className: y,
+        innerDivClassName: y,
+        shouldExpandWhenNested: a ? "desktop" : !0,
+        backgroundColor: "transparent",
+        children: o
     });
-}, v = (param)=>{
-    let { headline: e, title: o, titleAs: i = "h1", pretitle: t, description: n, descriptionLinesMax: l, extra: s, button: p, secondaryButton: h, buttonLink: c } = param;
-    return /* @__PURE__ */ m("section", {
-        className: k({
+}, g = (param)=>{
+    let { headline: o, title: e, titleAs: a = "h1", pretitle: s, description: l, descriptionLinesMax: n, extra: t, button: c, secondaryButton: f, buttonLink: d } = param;
+    return /* @__PURE__ */ p("section", {
+        className: w({
             height: "100%",
             display: "flex",
             justifyContent: "space-between",
             flexDirection: "column"
         }),
         children: [
-            /* @__PURE__ */ m("div", {
+            /* @__PURE__ */ p("div", {
                 children: [
-                    /* @__PURE__ */ m(x, {
+                    /* @__PURE__ */ p(N, {
                         space: 16,
                         children: [
-                            e && e,
-                            /* @__PURE__ */ m(x, {
+                            o && o,
+                            /* @__PURE__ */ p(N, {
                                 space: 8,
                                 children: [
-                                    t && /* @__PURE__ */ r(y, {
+                                    s && /* @__PURE__ */ r(b, {
                                         as: "p",
                                         regular: !0,
-                                        children: t
+                                        children: s
                                     }),
-                                    o && /* @__PURE__ */ r(D, {
-                                        as: i,
-                                        children: o
+                                    e && /* @__PURE__ */ r(G, {
+                                        as: a,
+                                        children: e
                                     })
                                 ]
                             }),
-                            n && /* @__PURE__ */ r(y, {
+                            l && /* @__PURE__ */ r(b, {
                                 as: "p",
                                 regular: !0,
-                                color: a.colors.textSecondary,
-                                truncate: l,
-                                children: n
+                                color: i.colors.textSecondary,
+                                truncate: n,
+                                children: l
                             })
                         ]
                     }),
-                    s && /* @__PURE__ */ r("div", {
-                        children: s
+                    t && /* @__PURE__ */ r("div", {
+                        children: t
                     })
                 ]
             }),
-            (p || c) && /* @__PURE__ */ r("div", {
-                className: $,
-                children: /* @__PURE__ */ r(j, {
-                    primaryButton: p,
-                    secondaryButton: h,
-                    link: c
+            (c || d) && /* @__PURE__ */ r("div", {
+                className: E,
+                children: /* @__PURE__ */ r(A, {
+                    primaryButton: c,
+                    secondaryButton: f,
+                    link: d
                 })
             })
         ]
     });
-}, R = {
-    default: a.colors.background,
-    alternative: a.colors.backgroundAlternative,
-    brand: a.colors.backgroundBrand,
-    "brand-secondary": a.colors.backgroundBrandSecondary
-}, Y = /*#__PURE__*/ I.forwardRef((_param, s)=>{
-    var { height: e, background: o = "default", media: i, desktopMediaPosition: t = "left", dataAttributes: n } = _param, l = _object_without_properties(_param, [
+}, I = {
+    default: i.colors.background,
+    alternative: i.colors.backgroundAlternative,
+    brand: i.colors.backgroundBrand,
+    "brand-secondary": i.colors.backgroundBrandSecondary,
+    none: "transparent"
+}, W = /*#__PURE__*/ T.forwardRef((_param, c)=>{
+    var { height: o, background: e = "default", media: a, desktopMediaPosition: s = "left", dataAttributes: l, noPaddingY: n } = _param, t = _object_without_properties(_param, [
         "height",
         "background",
         "media",
         "desktopMediaPosition",
-        "dataAttributes"
+        "dataAttributes",
+        "noPaddingY"
     ]);
-    const { isTabletOrSmaller: p } = T(), h = A(), c = o === "brand" || o === "brand-secondary";
-    if (p) return /* @__PURE__ */ r("div", {
-        style: f({
-            [N.mediaBorderRadius]: "0px"
+    const { isTabletOrSmaller: f } = j(), d = K(), D = M(), x = e === "none" ? D : e === "brand" || e === "brand-secondary";
+    if (f) return /* @__PURE__ */ r("div", {
+        style: h({
+            [S.mediaBorderRadius]: "0px"
         }),
-        children: /* @__PURE__ */ m("div", _object_spread_props(_object_spread({}, S(_object_spread({
+        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, k(_object_spread({
             "component-name": "Hero"
-        }, n))), {
-            ref: s,
+        }, l))), {
+            ref: c,
             style: _object_spread({
-                backgroundColor: R[o]
-            }, e === "100vh" ? {
+                backgroundColor: I[e]
+            }, o === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, f({
-                [B.height]: e !== null && e !== void 0 ? e : "100%"
+            } : {}, h({
+                [R.height]: o !== null && o !== void 0 ? o : "100%"
             })),
-            className: u(g, G),
-            children: [
-                i,
-                /* @__PURE__ */ r(C, {
-                    isInverse: c,
-                    children: /* @__PURE__ */ r(d, {
+            className: u(v, V, {
+                [C]: !n
+            }),
+            children: /* @__PURE__ */ p(H, {
+                isInverse: x,
+                isInsideSlideShow: d,
+                children: [
+                    /* @__PURE__ */ r("div", {
+                        className: z,
+                        children: a
+                    }),
+                    /* @__PURE__ */ r(m, {
                         paddingTop: 24,
-                        paddingBottom: h ? 48 : 24,
-                        children: /* @__PURE__ */ r(v, _object_spread({}, l))
+                        paddingBottom: d ? 48 : n ? 0 : 24,
+                        className: y,
+                        children: /* @__PURE__ */ r(g, _object_spread({}, t))
                     })
-                })
-            ]
+                ]
+            })
         }))
     });
-    const H = t === "left" ? i : /* @__PURE__ */ r(d, {
+    const O = s === "left" ? a : /* @__PURE__ */ r(m, {
         paddingRight: 24,
-        children: /* @__PURE__ */ r(v, _object_spread({}, l))
-    }), w = t === "right" ? i : /* @__PURE__ */ r(d, {
+        children: /* @__PURE__ */ r(g, _object_spread({}, t))
+    }), L = s === "right" ? a : /* @__PURE__ */ r(m, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ r(v, _object_spread({}, l))
+        children: /* @__PURE__ */ r(g, _object_spread({}, t))
     });
     return /* @__PURE__ */ r("div", {
-        style: f({
-            [N.mediaBorderRadius]: a.borderRadii.container
+        style: h({
+            [S.mediaBorderRadius]: i.borderRadii.container
         }),
-        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, S(_object_spread({
+        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, k(_object_spread({
             "component-name": "Hero"
-        }, n))), {
-            ref: s,
+        }, l))), {
+            ref: c,
             style: _object_spread({
-                backgroundColor: R[o]
-            }, e === "100vh" ? {
+                backgroundColor: I[e]
+            }, o === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, f({
-                [B.height]: e !== null && e !== void 0 ? e : "100%"
+            } : {}, h({
+                [R.height]: o !== null && o !== void 0 ? o : "100%"
             })),
-            className: k({
-                height: "100%",
-                display: "flex",
-                alignItems: "center"
+            className: w({
+                height: "100%"
             }),
-            children: /* @__PURE__ */ r(C, {
-                isInverse: c,
-                children: /* @__PURE__ */ r(O, {
+            children: /* @__PURE__ */ r(H, {
+                isInverse: x,
+                children: /* @__PURE__ */ r($, {
                     template: "6+6",
-                    left: /* @__PURE__ */ r(d, {
-                        paddingY: 56,
-                        className: u(g, b),
-                        children: H
+                    left: /* @__PURE__ */ r(m, {
+                        paddingY: n ? 0 : 56,
+                        className: u(v, B, {
+                            [C]: !n
+                        }),
+                        children: O
                     }),
-                    right: /* @__PURE__ */ r(d, {
-                        paddingY: 56,
-                        className: u(g, b),
-                        children: w
+                    right: /* @__PURE__ */ r(m, {
+                        paddingY: n ? 0 : 56,
+                        className: u(v, B),
+                        children: L
                     })
                 })
             })
         }))
     });
-}), or = Y;
-export { or as default };
+}), lr = W;
+export { lr as default };

package/dist-es/horizontal-scroll.js

@@ -2,7 +2,7 @@ import { jsx as a } from "react/jsx-runtime";
 import t from "classnames";
 import * as s from "react";
 import { scroll as c, noScrollbar as m } from "./horizontal-scroll.css-mistica.js";
-const e = /*#__PURE__*/ s.forwardRef((param, l)=>{
+const n = /*#__PURE__*/ s.forwardRef((param, l)=>{
     let { children: o, noScrollbar: r } = param;
     return /* @__PURE__ */ a("div", {
         className: t(c, {
@@ -11,5 +11,5 @@ const e = /*#__PURE__*/ s.forwardRef((param, l)=>{
         ref: l,
         children: o
     });
-}), p = e;
+}), p = n;
 export { p as default };