@telefonica/mistica 15.4.0 → 15.5.0

package/dist-es/hero.js

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

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "15.4.0";
+const o = "15.5.0";
 export { o as PACKAGE_VERSION };

package/dist-es/responsive-layout.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
-var e = 16, r = 40, n = 32, v = {
+var e = 16, a = 40, n = 32, t = {
     inverse: "_1y2v1nf3z",
     alternative: "_1y2v1nf44"
-}, i = "_17lofg74", t = "_17lofg73", _ = "_17lofg7a _1y2v1nfi7", f = "_17lofg75", l = "_17lofg78", p = "_17lofg72 _1y2v1nfi7";
-export { e as MOBILE_SIDE_MARGIN, r as SMALL_DESKTOP_SIDE_MARGIN, n as TABLET_SIDE_MARGIN, v as backgroundVariant, i as expandedResponsiveLayoutContainerDesktop, t as expandedResponsiveLayoutContainerMobile, _ as fullWidth, f as fullwidthContainer, l as responsiveLayout, p as responsiveLayoutContainer };
+}, i = "_17lofg77", v = "_17lofg78", _ = "_17lofg7a", f = "_17lofg7f _1y2v1nfi7", l = "_17lofg79", g = "_17lofg73", s = "_17lofg72", M = "_17lofg75", p = "_17lofg74", C = "_17lofg7d", D = "_17lofg76";
+export { e as MOBILE_SIDE_MARGIN, a as SMALL_DESKTOP_SIDE_MARGIN, n as TABLET_SIDE_MARGIN, t as backgroundVariant, i as desktopContainer, v as forcedMarginDesktopContainer, _ as forcedMarginMobileContainer, f as fullWidth, l as mobileContainer, g as resetContainerDesktop, s as resetContainerMobile, M as resetDesktop, p as resetMobile, C as responsiveLayout, D as responsiveLayoutContainer };

package/dist-es/responsive-layout.js

@@ -78,38 +78,54 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as a } from "react/jsx-runtime";
-import r from "classnames";
-import { getPrefixedDataAttributes as l } from "./utils/dom.js";
-import { fullwidthContainer as c, responsiveLayoutContainer as f, backgroundVariant as y, expandedResponsiveLayoutContainerMobile as L, expandedResponsiveLayoutContainerDesktop as x, fullWidth as R, responsiveLayout as V } from "./responsive-layout.css-mistica.js";
-import { useThemeVariant as h, ThemeVariant as b } from "./theme-variant-context.js";
-const C = (param)=>{
-    let { children: n, isInverse: o = !1, variant: p, backgroundColor: s, className: u, fullWidth: e, dataAttributes: d, shouldExpandWhenNested: i = !1, innerDivClassName: m } = param;
-    const v = h(), t = p || o && "inverse" || void 0;
-    return /* @__PURE__ */ a(b, {
-        variant: t !== null && t !== void 0 ? t : v,
-        children: /* @__PURE__ */ a("div", _object_spread_props(_object_spread({
-            className: r(e ? c : f, u, t && t !== "default" && y[t], {
-                [L]: i === !0 && !e,
-                [x]: i && !e
-            }),
+import { jsx as t } from "react/jsx-runtime";
+import o from "classnames";
+import { getPrefixedDataAttributes as f } from "./utils/dom.js";
+import { backgroundVariant as v, desktopContainer as p, forcedMarginDesktopContainer as y, mobileContainer as h, forcedMarginMobileContainer as C, responsiveLayoutContainer as L, fullWidth as b, responsiveLayout as R, resetContainerMobile as V, resetContainerDesktop as g, resetMobile as M, resetDesktop as N } from "./responsive-layout.css-mistica.js";
+import { useThemeVariant as x, ThemeVariant as D } from "./theme-variant-context.js";
+const k = (param)=>{
+    let { children: a, isInverse: e = !1, variant: r, backgroundColor: s, className: d, fullWidth: i, dataAttributes: m, shouldExpandWhenNested: l = !1, innerDivClassName: c } = param;
+    const u = x(), n = r || e && "inverse" || void 0;
+    return /* @__PURE__ */ t(D, {
+        variant: n !== null && n !== void 0 ? n : u,
+        children: /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
+            className: o(d, n && n !== "default" && v[n], ...i ? [] : [
+                l ? p : y,
+                l === !0 ? h : C,
+                L
+            ]),
             style: s ? {
                 background: s
             } : void 0
-        }, l(d)), {
-            children: /* @__PURE__ */ a("div", {
-                className: r(e ? R : V, m),
-                children: n
+        }, f(m)), {
+            children: /* @__PURE__ */ t("div", {
+                className: o(i ? b : R, c),
+                children: a
             })
         }))
     });
-}, g = (_param)=>{
-    var { children: n } = _param, o = _object_without_properties(_param, [
+}, T = (_param)=>{
+    var { children: a } = _param, e = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ a(C, _object_spread_props(_object_spread({}, o), {
+    return /* @__PURE__ */ t(k, _object_spread_props(_object_spread({}, e), {
         shouldExpandWhenNested: !0,
-        children: n
+        children: a
     }));
-}, w = g;
-export { C as InternalResponsiveLayout, w as default };
+}, q = (param)=>{
+    let { children: a, skipMobile: e = !1, skipDesktop: r = !1 } = param;
+    return /* @__PURE__ */ t("div", {
+        className: o({
+            [V]: !e,
+            [g]: !r
+        }),
+        children: /* @__PURE__ */ t("div", {
+            className: o({
+                [M]: !e,
+                [N]: !r
+            }),
+            children: a
+        })
+    });
+}, w = T;
+export { k as InternalResponsiveLayout, q as ResetResponsiveLayout, w as default };