@telefonica/mistica 14.33.0 → 14.35.0

package/dist-es/grid-layout.js

@@ -51,114 +51,114 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { assignInlineVars as v } from "@vanilla-extract/dynamic";
 import { getPrefixedDataAttributes as m } from "./utils/dom.js";
-import { grid as h, vars as c, span as u, desktopLargeColumn as o, desktopMediumColumn as f, desktopSmallColumn as s } from "./grid-layout.css-mistica.js";
+import { grid as h, vars as c, span as u, desktopLargeColumn as f, desktopMediumColumn as s, desktopSmallColumn as o } from "./grid-layout.css-mistica.js";
 import g from "classnames";
-import l from "./desktop-container-type-context.js";
-const P = (i)=>{
-    const r = m(i.dataAttributes), d = (n)=>({
+import d from "./desktop-container-type-context.js";
+import { applyCssVars as v } from "./utils/css.js";
+const y = (i)=>{
+    const t = m(i.dataAttributes), l = (n)=>({
             className: g(u, {
-                [o]: n >= 10,
-                [f]: n > 5 && n < 10,
-                [s]: n <= 5
+                [f]: n >= 10,
+                [s]: n > 5 && n < 10,
+                [o]: n <= 5
             }),
             style: v({
                 [c.colSpan]: String(n)
             })
-        }), t = {
+        }), r = {
         className: h,
         style: i.verticalSpace ? v({
             [c.verticalSpace]: `${i.verticalSpace}px`
         }) : void 0
     };
-    return i.template === "6+6" ? /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, t, r), {
-        children: /* @__PURE__ */ a(l.Provider, {
+    return i.template === "6+6" ? /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, r, t), {
+        children: /* @__PURE__ */ a(d, {
             value: "medium",
             children: [
-                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(6)), {
+                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(6)), {
                     children: i.left
                 })),
-                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(6)), {
+                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(6)), {
                     children: i.right
                 }))
             ]
         })
-    })) : i.template === "8+4" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : i.template === "8+4" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, r, t), {
         children: [
-            /* @__PURE__ */ e(l.Provider, {
+            /* @__PURE__ */ e(d, {
                 value: "medium",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(8)), {
+                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(8)), {
                     children: i.left
                 }))
             }),
-            /* @__PURE__ */ e(l.Provider, {
+            /* @__PURE__ */ e(d, {
                 value: "small",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(4)), {
+                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(4)), {
                     children: i.right
                 }))
             })
         ]
-    })) : i.template === "4+6" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : i.template === "4+6" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, r, t), {
         children: [
-            /* @__PURE__ */ e(l.Provider, {
+            /* @__PURE__ */ e(d, {
                 value: "small",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(4)), {
+                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(4)), {
                     children: i.left
                 }))
             }),
-            /* @__PURE__ */ e("div", _object_spread({}, d(1))),
-            /* @__PURE__ */ e(l.Provider, {
+            /* @__PURE__ */ e("div", _object_spread({}, l(1))),
+            /* @__PURE__ */ e(d, {
                 value: "medium",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(6)), {
+                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(6)), {
                     children: i.right
                 }))
             }),
-            /* @__PURE__ */ e("div", _object_spread({}, d(1)))
+            /* @__PURE__ */ e("div", _object_spread({}, l(1)))
         ]
-    })) : i.template === "5+4" ? /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, t, r), {
-        children: /* @__PURE__ */ a(l.Provider, {
+    })) : i.template === "5+4" ? /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, r, t), {
+        children: /* @__PURE__ */ a(d, {
             value: "small",
             children: [
-                /* @__PURE__ */ e("div", _object_spread({}, d(1))),
-                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(5)), {
+                /* @__PURE__ */ e("div", _object_spread({}, l(1))),
+                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(5)), {
                     children: i.left
                 })),
-                /* @__PURE__ */ e("div", _object_spread({}, d(1))),
-                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(4)), {
+                /* @__PURE__ */ e("div", _object_spread({}, l(1))),
+                /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(4)), {
                     children: i.right
                 })),
-                /* @__PURE__ */ e("div", _object_spread({}, d(1)))
+                /* @__PURE__ */ e("div", _object_spread({}, l(1)))
             ]
         })
-    })) : i.template === "3+9" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : i.template === "3+9" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, r, t), {
         children: [
-            /* @__PURE__ */ e(l.Provider, {
+            /* @__PURE__ */ e(d, {
                 value: "small",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(3)), {
+                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(3)), {
                     children: i.left
                 }))
             }),
-            /* @__PURE__ */ e(l.Provider, {
+            /* @__PURE__ */ e(d, {
                 value: "medium",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(9)), {
+                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(9)), {
                     children: i.right
                 }))
             })
         ]
-    })) : i.template === "10" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : i.template === "10" ? /* @__PURE__ */ a("div", _object_spread_props(_object_spread({}, r, t), {
         children: [
-            /* @__PURE__ */ e("div", _object_spread({}, d(1))),
-            /* @__PURE__ */ e(l.Provider, {
+            /* @__PURE__ */ e("div", _object_spread({}, l(1))),
+            /* @__PURE__ */ e(d, {
                 value: "large",
-                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, d(10)), {
+                children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, l(10)), {
                     children: i.children
                 }))
             }),
-            /* @__PURE__ */ e("div", _object_spread({}, d(1)))
+            /* @__PURE__ */ e("div", _object_spread({}, l(1)))
         ]
-    })) : /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, r, t), {
         children: i.children
     }));
-}, A = P;
-export { A as default };
+}, L = y;
+export { L as default };

package/dist-es/grid.js

@@ -26,36 +26,36 @@ function _object_spread(target) {
     }
     return target;
 }
-import { assignInlineVars as S } from "@vanilla-extract/dynamic";
 import s from "classnames";
 import * as d from "react";
-import { grid as b, gridTemplateColumns as c, gridTemplateColumnsAutoRepeat as G, gridTemplateRows as M, gridTemplateRowsAutoRepeat as C, gridAutoFlow as T, gridJustifyItems as v, gridAlignItems as V, gridJustifyContent as E, gridAlignContent as I, vars as a, fullColumns as J, spanColumns as N, fullRows as D, spanRows as F, columnStart as P, rowStart as h, justifySelf as k, alignSelf as q } from "./grid.css-mistica.js";
+import { grid as S, gridTemplateColumns as b, gridTemplateColumnsAutoRepeat as c, gridTemplateRows as G, gridTemplateRowsAutoRepeat as M, gridAutoFlow as C, gridJustifyItems as T, gridAlignItems as v, gridJustifyContent as V, gridAlignContent as E, vars as a, fullColumns as J, spanColumns as N, fullRows as D, spanRows as F, columnStart as I, rowStart as P, justifySelf as h, alignSelf as k } from "./grid.css-mistica.js";
+import { applyCssVars as q } from "./utils/css.js";
 import { getPrefixedDataAttributes as z } from "./utils/dom.js";
-const B = (i, e)=>{
-    const t = {}, m = (r)=>typeof r == "number" ? `min(${r}px, 100%)` : r, f = (r)=>typeof r == "number" ? `${r}px` : r;
-    return i && typeof i != "number" && (typeof i.minSize < "u" && (t[a.rowMinSize] = m(i.minSize)), typeof i.maxSize < "u" && (t[a.rowMaxSize] = f(i.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (t[a.columnMinSize] = m(e.minSize)), typeof e.maxSize < "u" && (t[a.columnMaxSize] = f(e.maxSize))), t;
-}, Q = /*#__PURE__*/ d.forwardRef((param, R)=>{
-    let { rows: i , columns: e , gap: t = 0 , flow: m , justifyItems: f , alignItems: r , justifyContent: n , alignContent: o , height: u , minHeight: l , children: p , as: g = "div" , dataAttributes: A  } = param;
-    const [y, x] = Array.isArray(t) ? t : [
-        t,
-        t
+const B = (t, e)=>{
+    const r = {}, m = (i)=>typeof i == "number" ? `min(${i}px, 100%)` : i, f = (i)=>typeof i == "number" ? `${i}px` : i;
+    return t && typeof t != "number" && (typeof t.minSize < "u" && (r[a.rowMinSize] = m(t.minSize)), typeof t.maxSize < "u" && (r[a.rowMaxSize] = f(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (r[a.columnMinSize] = m(e.minSize)), typeof e.maxSize < "u" && (r[a.columnMaxSize] = f(e.maxSize))), r;
+}, Q = /*#__PURE__*/ d.forwardRef((param, g)=>{
+    let { rows: t, columns: e, gap: r = 0, flow: m, justifyItems: f, alignItems: i, justifyContent: o, alignContent: n, height: u, minHeight: l, children: p, as: A = "div", dataAttributes: R } = param;
+    const [y, x] = Array.isArray(r) ? r : [
+        r,
+        r
     ];
-    return /*#__PURE__*/ d.createElement(g, _object_spread({
-        ref: R,
-        className: s(b, e ? typeof e == "number" ? c[e] : G : "", i ? typeof i == "number" ? M[i] : C : "", m ? T[m] : "", f ? v[f] : "", r ? V[r] : "", n ? E[n] : "", o ? I[o] : ""),
+    return /*#__PURE__*/ d.createElement(A, _object_spread({
+        ref: g,
+        className: s(S, e ? typeof e == "number" ? b[e] : c : "", t ? typeof t == "number" ? G[t] : M : "", m ? C[m] : "", f ? T[f] : "", i ? v[i] : "", o ? V[o] : "", n ? E[n] : ""),
         style: _object_spread({
             height: u,
             minHeight: l
-        }, S(_object_spread({
+        }, q(_object_spread({
             [a.columnGap]: y ? `${y}px` : "",
             [a.rowGap]: x ? `${x}px` : ""
-        }, B(i, e))))
-    }, z(A)), p);
+        }, B(t, e))))
+    }, z(R)), p);
 }), U = /*#__PURE__*/ d.forwardRef((param, p)=>{
-    let { rowStart: i , rowSpan: e , columnStart: t , columnSpan: m , span: f , justifySelf: r , alignSelf: n , children: o , as: u = "div" , dataAttributes: l  } = param;
+    let { rowStart: t, rowSpan: e, columnStart: r, columnSpan: m, span: f, justifySelf: i, alignSelf: o, children: n, as: u = "div", dataAttributes: l } = param;
     return f && (Array.isArray(f) ? (m = f[0], e = f[1]) : (m = f, e = f)), /*#__PURE__*/ d.createElement(u, _object_spread({
         ref: p,
-        className: s(m ? m === "full" ? J : N[m] : "", e ? e === "full" ? D : F[e] : "", t ? P[t] : "", i ? h[i] : "", r ? k[r] : "", n ? q[n] : "")
-    }, z(l)), o);
+        className: s(m ? m === "full" ? J : N[m] : "", e ? e === "full" ? D : F[e] : "", r ? I[r] : "", t ? P[t] : "", i ? h[i] : "", o ? k[o] : "")
+    }, z(l)), n);
 });
 export { Q as Grid, U as GridItem };

package/dist-es/header.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -91,14 +92,14 @@ import { hideOnTabletOrSmaller as R, hideOnDesktop as j, breadcrumbs as G } from
 import { getPrefixedDataAttributes as I } from "./utils/dom.js";
 import { Title2 as O, Title3 as P } from "./title.js";
 const $ = (param)=>{
-    let { pretitle: t , title: e , description: o , dataAttributes: d , small: m = !1 , preamount: s , amount: p , button: n , subtitle: i , isErrorAmount: h , secondaryButton: b  } = param;
+    let { pretitle: t, title: e, description: o, dataAttributes: d, small: m = !1, preamount: s, amount: p, button: n, subtitle: i, isErrorAmount: h, secondaryButton: b } = param;
     const H = S(), g = (f, v)=>{
         if (typeof f == "string") return /* @__PURE__ */ r(x, _object_spread_props(_object_spread({
             regular: !0
         }, v), {
             children: f
         }));
-        const { text: V  } = f, L = _object_without_properties(f, [
+        const { text: V } = f, L = _object_without_properties(f, [
             "text"
         ]);
         return /* @__PURE__ */ r(x, _object_spread_props(_object_spread({
@@ -166,7 +167,7 @@ const $ = (param)=>{
         ]
     });
 }, E = (param)=>/* @__PURE__ */ {
-    let { title: t , description: e , button: o  } = param;
+    let { title: t, description: e, button: o } = param;
     return l(a, {
         space: 32,
         children: [
@@ -190,7 +191,7 @@ const $ = (param)=>{
         ]
     });
 }, Y = (param)=>{
-    let { isInverse: t = !0 , breadcrumbs: e , header: o , extra: d , sideBySideExtraOnDesktop: m = !1 , dataAttributes: s , bleed: p = !1 , noPaddingY: n = !1  } = param;
+    let { isInverse: t = !0, breadcrumbs: e, header: o, extra: d, sideBySideExtraOnDesktop: m = !1, dataAttributes: s, bleed: p = !1, noPaddingY: n = !1 } = param;
     const i = p && t && d, h = /* @__PURE__ */ l("div", {
         children: [
             e && /* @__PURE__ */ r("div", {
@@ -251,7 +252,7 @@ const $ = (param)=>{
         ]
     }));
 }, rr = (param)=>/* @__PURE__ */ {
-    let { isInverse: t = !0 , children: e , dataAttributes: o  } = param;
+    let { isInverse: t = !0, children: e, dataAttributes: o } = param;
     return l(k, {
         isInverse: t,
         dataAttributes: _object_spread({

package/dist-es/hero.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -77,55 +78,55 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import * as R from "react";
-import f from "classnames";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import * as I from "react";
+import h from "classnames";
 import { useScreenSize as T } from "./hooks.js";
-import { MediaBorderRadiusProvider as v } from "./image.js";
-import { Text3 as x, Text8 as D } from "./text.js";
+import { Text3 as y, Text8 as D } from "./text.js";
 import O from "./grid-layout.js";
-import l from "./box.js";
-import y from "./stack.js";
+import s from "./box.js";
+import x from "./stack.js";
 import j from "./button-group.js";
-import { vars as c } from "./skins/skin-contract.css-mistica.js";
-import { vars as b, container as h, containerMobile as G, containerDesktop as S, layout as L, actions as A } from "./hero.css-mistica.js";
-import { assignInlineVars as B } from "@vanilla-extract/dynamic";
-import { useIsInsideSlideshowContext as V } from "./carousel.js";
-import { getPrefixedDataAttributes as N } from "./utils/dom.js";
-import { sprinkles as H } from "./sprinkles.css-mistica.js";
-import { ThemeVariant as Y } from "./theme-variant-context.js";
-const k = (param)=>/* @__PURE__ */ {
-    let { children: e , isInverse: o  } = param;
-    return r(Y, {
+import { vars as n } from "./skins/skin-contract.css-mistica.js";
+import { container as u, containerMobile as G, containerDesktop as b, layout as L, actions as $, vars as B } from "./hero.css-mistica.js";
+import { vars as S } from "./image.css-mistica.js";
+import { useIsInsideSlideshowContext as A } from "./carousel.js";
+import { getPrefixedDataAttributes as C } 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 p } from "./utils/css.js";
+const N = (param)=>/* @__PURE__ */ {
+    let { children: e, isInverse: o } = param;
+    return r(V, {
         isInverse: o,
         children: /* @__PURE__ */ r("div", {
             className: L,
             children: e
         })
     });
-}, u = (param)=>/* @__PURE__ */ {
-    let { headline: e , title: o , pretitle: n , description: i , descriptionLinesMax: d , extra: a , button: t , secondaryButton: p , buttonLink: m  } = param;
-    return s("section", {
-        className: H({
+}, g = (param)=>/* @__PURE__ */ {
+    let { headline: e, title: o, pretitle: a, description: t, descriptionLinesMax: d, extra: i, button: l, secondaryButton: f, buttonLink: m } = param;
+    return c("section", {
+        className: k({
             height: "100%",
             display: "flex",
             justifyContent: "space-between",
             flexDirection: "column"
         }),
         children: [
-            /* @__PURE__ */ s("div", {
+            /* @__PURE__ */ c("div", {
                 children: [
-                    /* @__PURE__ */ s(y, {
+                    /* @__PURE__ */ c(x, {
                         space: 16,
                         children: [
                             e && e,
-                            /* @__PURE__ */ s(y, {
+                            /* @__PURE__ */ c(x, {
                                 space: 8,
                                 children: [
-                                    n && /* @__PURE__ */ r(x, {
+                                    a && /* @__PURE__ */ r(y, {
                                         as: "p",
                                         regular: !0,
-                                        children: n
+                                        children: a
                                     }),
                                     o && /* @__PURE__ */ r(D, {
                                         as: "h1",
@@ -133,113 +134,117 @@ const k = (param)=>/* @__PURE__ */ {
                                     })
                                 ]
                             }),
-                            i && /* @__PURE__ */ r(x, {
+                            t && /* @__PURE__ */ r(y, {
                                 as: "p",
                                 regular: !0,
-                                color: c.colors.textSecondary,
+                                color: n.colors.textSecondary,
                                 truncate: d,
-                                children: i
+                                children: t
                             })
                         ]
                     }),
-                    a && /* @__PURE__ */ r("div", {
-                        children: a
+                    i && /* @__PURE__ */ r("div", {
+                        children: i
                     })
                 ]
             }),
-            (t || m) && /* @__PURE__ */ r("div", {
-                className: A,
+            (l || m) && /* @__PURE__ */ r("div", {
+                className: $,
                 children: /* @__PURE__ */ r(j, {
-                    primaryButton: t,
-                    secondaryButton: p,
+                    primaryButton: l,
+                    secondaryButton: f,
                     link: m
                 })
             })
         ]
     });
-}, C = {
-    default: c.colors.background,
-    alternative: c.colors.backgroundAlternative,
-    brand: c.colors.backgroundBrand,
-    "brand-secondary": c.colors.backgroundBrandSecondary
-}, $ = /*#__PURE__*/ R.forwardRef((_param, t)=>{
-    var { height: e , background: o = "default" , media: n , desktopMediaPosition: i = "left" , dataAttributes: d  } = _param, a = _object_without_properties(_param, [
+}, R = {
+    default: n.colors.background,
+    alternative: n.colors.backgroundAlternative,
+    brand: n.colors.backgroundBrand,
+    "brand-secondary": n.colors.backgroundBrandSecondary
+}, Y = /*#__PURE__*/ I.forwardRef((_param, l)=>{
+    var { height: e, background: o = "default", media: a, desktopMediaPosition: t = "left", dataAttributes: d } = _param, i = _object_without_properties(_param, [
         "height",
         "background",
         "media",
         "desktopMediaPosition",
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: p  } = T(), m = V(), g = o === "brand" || o === "brand-secondary";
-    if (p) return /* @__PURE__ */ r(v, {
-        value: !1,
-        children: /* @__PURE__ */ s("div", _object_spread_props(_object_spread({}, N(_object_spread({
+    const { isTabletOrSmaller: f } = T(), m = A(), v = o === "brand" || o === "brand-secondary";
+    if (f) return /* @__PURE__ */ r("div", {
+        style: p({
+            [S.mediaBorderRadius]: "0px"
+        }),
+        children: /* @__PURE__ */ c("div", _object_spread_props(_object_spread({}, C(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: t,
+            ref: l,
             style: _object_spread({
-                backgroundColor: C[o]
+                backgroundColor: R[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, B({
-                [b.height]: e !== null && e !== void 0 ? e : "100%"
+            } : {}, p({
+                [B.height]: e !== null && e !== void 0 ? e : "100%"
             })),
-            className: f(h, G),
+            className: h(u, G),
             children: [
-                n,
-                /* @__PURE__ */ r(k, {
-                    isInverse: g,
-                    children: /* @__PURE__ */ r(l, {
+                a,
+                /* @__PURE__ */ r(N, {
+                    isInverse: v,
+                    children: /* @__PURE__ */ r(s, {
                         paddingTop: 24,
                         paddingBottom: m ? 48 : 24,
-                        children: /* @__PURE__ */ r(u, _object_spread({}, a))
+                        children: /* @__PURE__ */ r(g, _object_spread({}, i))
                     })
                 })
             ]
         }))
     });
-    const w = i === "left" ? n : /* @__PURE__ */ r(l, {
+    const H = t === "left" ? a : /* @__PURE__ */ r(s, {
         paddingRight: 24,
-        children: /* @__PURE__ */ r(u, _object_spread({}, a))
-    }), I = i === "right" ? n : /* @__PURE__ */ r(l, {
+        children: /* @__PURE__ */ r(g, _object_spread({}, i))
+    }), w = t === "right" ? a : /* @__PURE__ */ r(s, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ r(u, _object_spread({}, a))
+        children: /* @__PURE__ */ r(g, _object_spread({}, i))
     });
-    return /* @__PURE__ */ r(v, {
-        value: !0,
-        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, N(_object_spread({
+    return /* @__PURE__ */ r("div", {
+        style: p({
+            [S.mediaBorderRadius]: n.borderRadii.container
+        }),
+        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, C(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: t,
+            ref: l,
             style: _object_spread({
-                backgroundColor: C[o]
+                backgroundColor: R[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, B({
-                [b.height]: e !== null && e !== void 0 ? e : "100%"
+            } : {}, p({
+                [B.height]: e !== null && e !== void 0 ? e : "100%"
             })),
-            className: H({
+            className: k({
                 height: "100%",
                 display: "flex",
                 alignItems: "center"
             }),
-            children: /* @__PURE__ */ r(k, {
-                isInverse: g,
+            children: /* @__PURE__ */ r(N, {
+                isInverse: v,
                 children: /* @__PURE__ */ r(O, {
                     template: "6+6",
-                    left: /* @__PURE__ */ r(l, {
+                    left: /* @__PURE__ */ r(s, {
                         paddingY: 56,
-                        className: f(h, S),
-                        children: w
+                        className: h(u, b),
+                        children: H
                     }),
-                    right: /* @__PURE__ */ r(l, {
+                    right: /* @__PURE__ */ r(s, {
                         paddingY: 56,
-                        className: f(h, S),
-                        children: I
+                        className: h(u, b),
+                        children: w
                     })
                 })
             })
         }))
     });
-}), or = $;
+}), or = Y;
 export { or as default };

package/dist-es/highlighted-card.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -90,7 +91,7 @@ import { vars as E } from "./skins/skin-contract.css-mistica.js";
 import { useTheme as N } from "./hooks.js";
 const L = /*#__PURE__*/ h.forwardRef((e, i)=>{
     var _e_isInverse;
-    const { title: r , description: a , imageUrl: o , imageFit: l  } = e, g = v(), u = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : g, d = T(), { textPresets: f  } = N(), n = /* @__PURE__ */ c(C, {
+    const { title: r, description: a, imageUrl: o, imageFit: l } = e, g = v(), u = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : g, d = T(), { textPresets: f } = N(), n = /* @__PURE__ */ c(C, {
         ref: i,
         isInverse: u,
         className: H,
@@ -170,7 +171,7 @@ const L = /*#__PURE__*/ h.forwardRef((e, i)=>{
         children: n
     }) : n;
 }), R = /*#__PURE__*/ h.forwardRef((_param, r)=>{
-    var { "aria-label": e  } = _param, i = _object_without_properties(_param, [
+    var { "aria-label": e } = _param, i = _object_without_properties(_param, [
         "aria-label"
     ]);
     const a = e !== null && e !== void 0 ? e : i.title;