@telefonica/mistica 14.32.1 → 14.34.0

package/dist/grid-layout.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return A;
+        return L;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _dynamic = require("@vanilla-extract/dynamic");
 const _dom = require("./utils/dom.js");
 const _gridlayoutcssmistica = require("./grid-layout.css-mistica.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _desktopcontainertypecontext = /*#__PURE__*/ _interop_require_default(require("./desktop-container-type-context.js"));
+const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -71,108 +71,108 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const P = (i)=>{
-    const r = (0, _dom.getPrefixedDataAttributes)(i.dataAttributes), d = (n)=>({
+const y = (i)=>{
+    const t = (0, _dom.getPrefixedDataAttributes)(i.dataAttributes), l = (n)=>({
             className: (0, _classnames.default)(_gridlayoutcssmistica.span, {
                 [_gridlayoutcssmistica.desktopLargeColumn]: n >= 10,
                 [_gridlayoutcssmistica.desktopMediumColumn]: n > 5 && n < 10,
                 [_gridlayoutcssmistica.desktopSmallColumn]: n <= 5
             }),
-            style: (0, _dynamic.assignInlineVars)({
+            style: (0, _css.applyCssVars)({
                 [_gridlayoutcssmistica.vars.colSpan]: String(n)
             })
-        }), t = {
+        }), r = {
         className: _gridlayoutcssmistica.grid,
-        style: i.verticalSpace ? (0, _dynamic.assignInlineVars)({
+        style: i.verticalSpace ? (0, _css.applyCssVars)({
             [_gridlayoutcssmistica.vars.verticalSpace]: `${i.verticalSpace}px`
         }) : void 0
     };
-    return i.template === "6+6" ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, t, r), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_desktopcontainertypecontext.default.Provider, {
+    return i.template === "6+6" ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, r, t), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_desktopcontainertypecontext.default, {
             value: "medium",
             children: [
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(6)), {
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(6)), {
                     children: i.left
                 })),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(6)), {
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(6)), {
                     children: i.right
                 }))
             ]
         })
-    })) : i.template === "8+4" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : i.template === "8+4" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, r, t), {
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default.Provider, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "medium",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(8)), {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(8)), {
                     children: i.left
                 }))
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default.Provider, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "small",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(4)), {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(4)), {
                     children: i.right
                 }))
             })
         ]
-    })) : i.template === "4+6" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : i.template === "4+6" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, r, t), {
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default.Provider, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "small",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(4)), {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(4)), {
                     children: i.left
                 }))
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1))),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default.Provider, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1))),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "medium",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(6)), {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(6)), {
                     children: i.right
                 }))
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1)))
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1)))
         ]
-    })) : i.template === "5+4" ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, t, r), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_desktopcontainertypecontext.default.Provider, {
+    })) : i.template === "5+4" ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, r, t), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_desktopcontainertypecontext.default, {
             value: "small",
             children: [
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1))),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(5)), {
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1))),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(5)), {
                     children: i.left
                 })),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1))),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(4)), {
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1))),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(4)), {
                     children: i.right
                 })),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1)))
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1)))
             ]
         })
-    })) : i.template === "3+9" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : i.template === "3+9" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, r, t), {
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default.Provider, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "small",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(3)), {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(3)), {
                     children: i.left
                 }))
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default.Provider, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "medium",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(9)), {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(9)), {
                     children: i.right
                 }))
             })
         ]
-    })) : i.template === "10" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : i.template === "10" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, r, t), {
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1))),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default.Provider, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1))),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_desktopcontainertypecontext.default, {
                 value: "large",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, d(10)), {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, l(10)), {
                     children: i.children
                 }))
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, d(1)))
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread({}, l(1)))
         ]
-    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, t, r), {
+    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, r, t), {
         children: i.children
     }));
-}, A = P;
+}, L = y;

package/dist/grid.js

@@ -16,10 +16,10 @@ _export(exports, {
         return U;
     }
 });
-const _dynamic = require("@vanilla-extract/dynamic");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -47,7 +47,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -93,30 +95,30 @@ function _object_spread(target) {
     }
     return target;
 }
-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[_gridcssmistica.vars.rowMinSize] = m(i.minSize)), typeof i.maxSize < "u" && (t[_gridcssmistica.vars.rowMaxSize] = f(i.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (t[_gridcssmistica.vars.columnMinSize] = m(e.minSize)), typeof e.maxSize < "u" && (t[_gridcssmistica.vars.columnMaxSize] = f(e.maxSize))), t;
-}, Q = /*#__PURE__*/ _react.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[_gridcssmistica.vars.rowMinSize] = m(t.minSize)), typeof t.maxSize < "u" && (r[_gridcssmistica.vars.rowMaxSize] = f(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (r[_gridcssmistica.vars.columnMinSize] = m(e.minSize)), typeof e.maxSize < "u" && (r[_gridcssmistica.vars.columnMaxSize] = f(e.maxSize))), r;
+}, Q = /*#__PURE__*/ _react.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__*/ _react.createElement(g, _object_spread({
-        ref: R,
-        className: (0, _classnames.default)(_gridcssmistica.grid, e ? typeof e == "number" ? _gridcssmistica.gridTemplateColumns[e] : _gridcssmistica.gridTemplateColumnsAutoRepeat : "", i ? typeof i == "number" ? _gridcssmistica.gridTemplateRows[i] : _gridcssmistica.gridTemplateRowsAutoRepeat : "", m ? _gridcssmistica.gridAutoFlow[m] : "", f ? _gridcssmistica.gridJustifyItems[f] : "", r ? _gridcssmistica.gridAlignItems[r] : "", n ? _gridcssmistica.gridJustifyContent[n] : "", o ? _gridcssmistica.gridAlignContent[o] : ""),
+    return /*#__PURE__*/ _react.createElement(A, _object_spread({
+        ref: g,
+        className: (0, _classnames.default)(_gridcssmistica.grid, e ? typeof e == "number" ? _gridcssmistica.gridTemplateColumns[e] : _gridcssmistica.gridTemplateColumnsAutoRepeat : "", t ? typeof t == "number" ? _gridcssmistica.gridTemplateRows[t] : _gridcssmistica.gridTemplateRowsAutoRepeat : "", m ? _gridcssmistica.gridAutoFlow[m] : "", f ? _gridcssmistica.gridJustifyItems[f] : "", i ? _gridcssmistica.gridAlignItems[i] : "", o ? _gridcssmistica.gridJustifyContent[o] : "", n ? _gridcssmistica.gridAlignContent[n] : ""),
         style: _object_spread({
             height: u,
             minHeight: l
-        }, (0, _dynamic.assignInlineVars)(_object_spread({
+        }, (0, _css.applyCssVars)(_object_spread({
             [_gridcssmistica.vars.columnGap]: y ? `${y}px` : "",
             [_gridcssmistica.vars.rowGap]: x ? `${x}px` : ""
-        }, B(i, e))))
-    }, (0, _dom.getPrefixedDataAttributes)(A)), p);
+        }, B(t, e))))
+    }, (0, _dom.getPrefixedDataAttributes)(R)), p);
 }), U = /*#__PURE__*/ _react.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__*/ _react.createElement(u, _object_spread({
         ref: p,
-        className: (0, _classnames.default)(m ? m === "full" ? _gridcssmistica.fullColumns : _gridcssmistica.spanColumns[m] : "", e ? e === "full" ? _gridcssmistica.fullRows : _gridcssmistica.spanRows[e] : "", t ? _gridcssmistica.columnStart[t] : "", i ? _gridcssmistica.rowStart[i] : "", r ? _gridcssmistica.justifySelf[r] : "", n ? _gridcssmistica.alignSelf[n] : "")
-    }, (0, _dom.getPrefixedDataAttributes)(l)), o);
+        className: (0, _classnames.default)(m ? m === "full" ? _gridcssmistica.fullColumns : _gridcssmistica.spanColumns[m] : "", e ? e === "full" ? _gridcssmistica.fullRows : _gridcssmistica.spanRows[e] : "", r ? _gridcssmistica.columnStart[r] : "", t ? _gridcssmistica.rowStart[t] : "", i ? _gridcssmistica.justifySelf[i] : "", o ? _gridcssmistica.alignSelf[o] : "")
+    }, (0, _dom.getPrefixedDataAttributes)(l)), n);
 });

package/dist/header.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -120,14 +121,14 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 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 = (0, _themevariantcontext.useIsInverseVariant)(), g = (f, v)=>{
         if (typeof f == "string") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _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__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
@@ -195,7 +196,7 @@ const $ = (param)=>{
         ]
     });
 }, E = (param)=>/* @__PURE__ */ {
-    let { title: t , description: e , button: o  } = param;
+    let { title: t, description: e, button: o } = param;
     return (0, _jsxruntime.jsxs)(_stack.default, {
         space: 32,
         children: [
@@ -219,7 +220,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__ */ (0, _jsxruntime.jsxs)("div", {
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -280,7 +281,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 (0, _jsxruntime.jsxs)(_responsivelayout.default, {
         isInverse: t,
         dataAttributes: _object_spread({

package/dist/hero.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -20,11 +21,11 @@ const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _buttongroup = /*#__PURE__*/ _interop_require_default(require("./button-group.js"));
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _herocssmistica = require("./hero.css-mistica.js");
-const _dynamic = require("@vanilla-extract/dynamic");
 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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -51,7 +52,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -148,8 +151,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const k = (param)=>/* @__PURE__ */ {
-    let { children: e , isInverse: o  } = param;
+const N = (param)=>/* @__PURE__ */ {
+    let { children: e, isInverse: o } = param;
     return (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
         isInverse: o,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -158,7 +161,7 @@ const k = (param)=>/* @__PURE__ */ {
         })
     });
 }, u = (param)=>/* @__PURE__ */ {
-    let { headline: e , title: o , pretitle: n , description: i , descriptionLinesMax: d , extra: a , button: t , secondaryButton: p , buttonLink: m  } = param;
+    let { headline: e, title: o, pretitle: a, description: t, descriptionLinesMax: d, extra: n, button: i, secondaryButton: p, buttonLink: m } = param;
     return (0, _jsxruntime.jsxs)("section", {
         className: (0, _sprinklescssmistica.sprinkles)({
             height: "100%",
@@ -176,10 +179,10 @@ const k = (param)=>/* @__PURE__ */ {
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                 space: 8,
                                 children: [
-                                    n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         as: "p",
                                         regular: !0,
-                                        children: n
+                                        children: a
                                     }),
                                     o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
                                         as: "h1",
@@ -187,89 +190,89 @@ const k = (param)=>/* @__PURE__ */ {
                                     })
                                 ]
                             }),
-                            i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                 as: "p",
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
                                 truncate: d,
-                                children: i
+                                children: t
                             })
                         ]
                     }),
-                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        children: a
+                    n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        children: n
                     })
                 ]
             }),
-            (t || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            (i || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _herocssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                    primaryButton: t,
+                    primaryButton: i,
                     secondaryButton: p,
                     link: m
                 })
             })
         ]
     });
-}, C = {
+}, k = {
     default: _skincontractcssmistica.vars.colors.background,
     alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
     brand: _skincontractcssmistica.vars.colors.backgroundBrand,
     "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary
-}, $ = /*#__PURE__*/ _react.forwardRef((_param, t)=>{
-    var { height: e , background: o = "default" , media: n , desktopMediaPosition: i = "left" , dataAttributes: d  } = _param, a = _object_without_properties(_param, [
+}, $ = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+    var { height: e, background: o = "default", media: a, desktopMediaPosition: t = "left", dataAttributes: d } = _param, n = _object_without_properties(_param, [
         "height",
         "background",
         "media",
         "desktopMediaPosition",
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: p  } = (0, _hooks.useScreenSize)(), m = (0, _carousel.useIsInsideSlideshowContext)(), g = o === "brand" || o === "brand-secondary";
+    const { isTabletOrSmaller: p } = (0, _hooks.useScreenSize)(), m = (0, _carousel.useIsInsideSlideshowContext)(), g = o === "brand" || o === "brand-secondary";
     if (p) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.MediaBorderRadiusProvider, {
         value: !1,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: t,
+            ref: i,
             style: _object_spread({
-                backgroundColor: C[o]
+                backgroundColor: k[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, (0, _dynamic.assignInlineVars)({
+            } : {}, (0, _css.applyCssVars)({
                 [_herocssmistica.vars.height]: e !== null && e !== void 0 ? e : "100%"
             })),
             className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerMobile),
             children: [
-                n,
-                /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
+                a,
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
                     isInverse: g,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingTop: 24,
                         paddingBottom: m ? 48 : 24,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, _object_spread({}, a))
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, _object_spread({}, n))
                     })
                 })
             ]
         }))
     });
-    const w = i === "left" ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    const w = t === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingRight: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, _object_spread({}, a))
-    }), I = i === "right" ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, _object_spread({}, n))
+    }), R = t === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, _object_spread({}, a))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, _object_spread({}, n))
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.MediaBorderRadiusProvider, {
         value: !0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: t,
+            ref: i,
             style: _object_spread({
-                backgroundColor: C[o]
+                backgroundColor: k[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, (0, _dynamic.assignInlineVars)({
+            } : {}, (0, _css.applyCssVars)({
                 [_herocssmistica.vars.height]: e !== null && e !== void 0 ? e : "100%"
             })),
             className: (0, _sprinklescssmistica.sprinkles)({
@@ -277,7 +280,7 @@ const k = (param)=>/* @__PURE__ */ {
                 display: "flex",
                 alignItems: "center"
             }),
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
                 isInverse: g,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                     template: "6+6",
@@ -289,7 +292,7 @@ const k = (param)=>/* @__PURE__ */ {
                     right: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingY: 56,
                         className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
-                        children: I
+                        children: R
                     })
                 })
             })

package/dist/highlighted-card.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -45,7 +46,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -144,7 +147,7 @@ function _object_without_properties_loose(source, excluded) {
 }
 const L = /*#__PURE__*/ _react.forwardRef((e, i)=>{
     var _e_isInverse;
-    const { title: r , description: a , imageUrl: o , imageFit: l  } = e, g = (0, _themevariantcontext.useIsInverseVariant)(), u = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : g, m = (0, _maybedismissable.useIsDismissable)(), { textPresets: f  } = (0, _hooks.useTheme)(), n = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
+    const { title: r, description: a, imageUrl: o, imageFit: l } = e, g = (0, _themevariantcontext.useIsInverseVariant)(), u = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : g, d = (0, _maybedismissable.useIsDismissable)(), { textPresets: f } = (0, _hooks.useTheme)(), n = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
         ref: i,
         isInverse: u,
         className: _highlightedcardcssmistica.container,
@@ -152,11 +155,12 @@ const L = /*#__PURE__*/ _react.forwardRef((e, i)=>{
             "component-name": "HighlightedCard"
         }, e.dataAttributes),
         width: e.width ? `${e.width}px` : "100%",
+        minHeight: "100%",
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                role: m ? void 0 : "region",
+                role: d ? void 0 : "region",
                 className: _highlightedcardcssmistica.textContainerVariant[o ? "withImage" : "withoutImage"],
-                "aria-label": m ? void 0 : e["aria-label"],
+                "aria-label": d ? void 0 : e["aria-label"],
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
                         mobileSize: 18,
@@ -223,7 +227,7 @@ const L = /*#__PURE__*/ _react.forwardRef((e, i)=>{
         children: n
     }) : n;
 }), R = /*#__PURE__*/ _react.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;