@telefonica/mistica 14.33.0 → 14.34.0

package/dist/button.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -63,7 +64,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)) {
@@ -161,7 +164,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const N = (param)=>{
-    let { content: e , defaultIconSize: r , renderText: n  } = param;
+    let { content: e, defaultIconSize: r, renderText: n } = param;
     const l = (0, _utils.flattenChildren)(e), f = l.length, d = [];
     let c = [];
     const g = ()=>{
@@ -197,7 +200,7 @@ const N = (param)=>{
             fill: "currentColor"
         })
     }), z = (param)=>{
-    let { showSpinner: e , children: r , small: n , loadingText: l , shouldRenderSpinner: f , setShouldRenderSpinner: d , renderText: c , textContentStyle: g , StartIcon: u , EndIcon: m , withChevron: o  } = param;
+    let { showSpinner: e, children: r, small: n, loadingText: l, shouldRenderSpinner: f, setShouldRenderSpinner: d, renderText: c, textContentStyle: g, StartIcon: u, EndIcon: m, withChevron: o } = param;
     const s = n ? _buttoncssmistica.SMALL_ICON_SIZE : _buttoncssmistica.ICON_SIZE, i = (0, _css.pxToRem)(n ? _buttoncssmistica.SMALL_SPINNER_SIZE : _buttoncssmistica.SPINNER_SIZE);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
@@ -287,7 +290,7 @@ const N = (param)=>{
         ]
     });
 }, _ = /*#__PURE__*/ _react.forwardRef((e, r)=>{
-    const { textPresets: n  } = (0, _hooks.useTheme)(), { eventFormat: l  } = (0, _analytics.useTrackingConfig)(), { formStatus: f , formId: d  } = (0, _formcontext.useForm)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: g  } = e, u = !!e.submit, m = f === "sending", [o, s] = _react.useState(!1), i = e.showSpinner || m && u || o, [v, L] = _react.useState(!!i);
+    const { textPresets: n } = (0, _hooks.useTheme)(), { eventFormat: l } = (0, _analytics.useTrackingConfig)(), { formStatus: f, formId: d } = (0, _formcontext.useForm)(), c = (0, _themevariantcontext.useIsInverseVariant)(), { loadingText: g } = e, u = !!e.submit, m = f === "sending", [o, s] = _react.useState(!1), i = e.showSpinner || m && u || o, [v, L] = _react.useState(!!i);
     _react.useEffect(()=>{
         i && !v && L(!0);
     }, [
@@ -380,7 +383,7 @@ const N = (param)=>{
     return null;
 }), Ne = /*#__PURE__*/ _react.forwardRef((e, r)=>{
     var _e_withChevron;
-    const { formStatus: n  } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: f , textPresets: d  } = (0, _hooks.useTheme)(), { loadingText: c  } = e, g = n === "sending", [u, m] = _react.useState(!1), o = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [i, v] = _react.useState(!!o);
+    const { formStatus: n } = (0, _formcontext.useForm)(), l = (0, _themevariantcontext.useIsInverseVariant)(), { analytics: f, textPresets: d } = (0, _hooks.useTheme)(), { loadingText: c } = e, g = n === "sending", [u, m] = _react.useState(!1), o = e.showSpinner || u, s = (_e_withChevron = e.withChevron) !== null && _e_withChevron !== void 0 ? _e_withChevron : !!e.href || !!e.to, [i, v] = _react.useState(!!o);
     _react.useEffect(()=>{
         o && !i && v(!0);
     }, [
@@ -465,7 +468,7 @@ const N = (param)=>{
     if (process.env.NODE_ENV !== "production") throw Error("Bad button props");
     return null;
 }), _e = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
@@ -477,7 +480,7 @@ const N = (param)=>{
         type: "primary"
     }));
 }), we = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({
@@ -489,7 +492,7 @@ const N = (param)=>{
         type: "secondary"
     }));
 }), xe = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, r = _object_without_properties(_param, [
+    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(_, _object_spread_props(_object_spread({

package/dist/callout.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -81,8 +82,8 @@ function _object_spread_props(target, source) {
     return target;
 }
 const P = (param)=>{
-    let { title: o , description: c , icon: a , onClose: i , button: l , secondaryButton: n , buttonLink: s , "aria-label": p , dataAttributes: u  } = param;
-    const f = (0, _themevariantcontext.useThemeVariant)(), { texts: d  } = (0, _hooks.useTheme)();
+    let { title: o, description: c, icon: a, onClose: i, button: l, secondaryButton: n, buttonLink: s, "aria-label": p, dataAttributes: u } = param;
+    const f = (0, _themevariantcontext.useThemeVariant)(), { texts: d } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_calloutcssmistica.container, (0, _sprinklescssmistica.sprinkles)({
             background: {

package/dist/card.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -69,10 +70,10 @@ const _spinner = /*#__PURE__*/ _interop_require_default(require("./spinner.js"))
 const _video = /*#__PURE__*/ _interop_require_default(require("./video.js"));
 const _themevariantcontext = require("./theme-variant-context.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _dynamic = require("@vanilla-extract/dynamic");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _dom = require("./utils/dom.js");
 const _platform = require("./utils/platform.js");
+const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -99,7 +100,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)) {
@@ -197,7 +200,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const be = (r, a)=>{
-    const { texts: i  } = (0, _hooks.useTheme)(), t = r ? [
+    const { texts: i } = (0, _hooks.useTheme)(), t = r ? [
         ...r
     ] : [];
     return a && t.push({
@@ -206,7 +209,7 @@ const be = (r, a)=>{
         Icon: _iconcloseregular.default
     }), t;
 }, Te = /*#__PURE__*/ _react.createContext("default"), xe = 48, er = (_param)=>{
-    var { Icon: r , label: a  } = _param, i = _object_without_properties(_param, [
+    var { Icon: r, label: a } = _param, i = _object_without_properties(_param, [
         "Icon",
         "label"
     ]);
@@ -235,7 +238,7 @@ const be = (r, a)=>{
         })
     }));
 }, U = (param)=>{
-    let { actions: r , padding: a = 8 , onClose: i , type: t = "default"  } = param;
+    let { actions: r, padding: a = 8, onClose: i, type: t = "default" } = param;
     const c = be(r, i);
     return c.length > 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Te.Provider, {
         value: t,
@@ -261,7 +264,7 @@ const be = (r, a)=>{
         "9:10": 9 / 10,
         auto: 0
     })[r] : 0, P = /*#__PURE__*/ _react.forwardRef((param, l)=>{
-    let { children: r , width: a = "100%" , height: i = "100%" , aspectRatio: t , dataAttributes: c , className: o , "aria-label": d  } = param;
+    let { children: r, width: a = "100%", height: i = "100%", aspectRatio: t, dataAttributes: c, className: o, "aria-label": d } = param;
     const u = rr(t);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c)), {
         ref: l,
@@ -270,7 +273,7 @@ const be = (r, a)=>{
         style: _object_spread({
             width: a,
             height: i
-        }, u ? (0, _dynamic.assignInlineVars)({
+        }, u ? (0, _css.applyCssVars)({
             [_cardcssmistica.vars.aspectRatio]: String(u)
         }) : {}),
         children: r
@@ -306,26 +309,26 @@ const be = (r, a)=>{
         reset: "loading"
     }
 }, nr = (r, a)=>ar[r][a] || r, ir = (param)=>/* @__PURE__ */ {
-    let { color: r  } = param;
+    let { color: r } = param;
     return (0, _jsxruntime.jsx)(_spinner.default, {
         color: r,
         size: 16,
         delay: "0"
     });
 }, Y = (param)=>/* @__PURE__ */ {
-    let { color: r  } = param;
+    let { color: r } = param;
     return (0, _jsxruntime.jsx)(_iconpausefilled.default, {
         color: r,
         size: 12
     });
 }, tr = (param)=>/* @__PURE__ */ {
-    let { color: r  } = param;
+    let { color: r } = param;
     return (0, _jsxruntime.jsx)(_iconplayfilled.default, {
         color: r,
         size: 12
     });
 }, Ie = (r, a, i)=>{
-    const { texts: t  } = (0, _hooks.useTheme)(), c = _react.useRef(null), [o, d] = _react.useReducer(nr, "loading");
+    const { texts: t } = (0, _hooks.useTheme)(), c = _react.useRef(null), [o, d] = _react.useReducer(nr, "loading");
     _react.useEffect(()=>{
         var h;
         const s = setTimeout(()=>d("showSpinner"), 2e3);
@@ -376,8 +379,8 @@ const be = (r, a)=>{
         videoAction: m
     };
 }, te = (param)=>{
-    let { headline: r , pretitle: a , pretitleLinesMax: i , title: t , titleLinesMax: c , subtitle: o , subtitleLinesMax: d , description: l , descriptionLinesMax: u , extra: m , button: s , buttonLink: h  } = param;
-    const { textPresets: f  } = (0, _hooks.useTheme)(), g = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
+    let { headline: r, pretitle: a, pretitleLinesMax: i, title: t, titleLinesMax: c, subtitle: o, subtitleLinesMax: d, description: l, descriptionLinesMax: u, extra: m, button: s, buttonLink: h } = param;
+    const { textPresets: f } = (0, _hooks.useTheme)(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
             type: "promo",
             children: r
         }) : r : null;
@@ -398,7 +401,7 @@ const be = (r, a)=>{
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                     space: 8,
                                     children: [
-                                        g(),
+                                        v(),
                                         /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                             space: 4,
                                             children: [
@@ -457,7 +460,7 @@ const be = (r, a)=>{
         ]
     });
 }, zr = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
-    var { media: r , icon: a , headline: i , pretitle: t , pretitleLinesMax: c , subtitle: o , subtitleLinesMax: d , title: l , titleLinesMax: u , description: m , descriptionLinesMax: s , extra: h , actions: f , button: g , buttonLink: w , dataAttributes: T , "aria-label": b , onClose: C  } = _param, p = _object_without_properties(_param, [
+    var { media: r, icon: a, headline: i, pretitle: t, pretitleLinesMax: c, subtitle: o, subtitleLinesMax: d, title: l, titleLinesMax: u, description: m, descriptionLinesMax: s, extra: h, actions: f, button: v, buttonLink: w, dataAttributes: T, "aria-label": b, onClose: C } = _param, p = _object_without_properties(_param, [
         "media",
         "icon",
         "headline",
@@ -519,7 +522,7 @@ const be = (r, a)=>{
                                         description: m,
                                         descriptionLinesMax: s,
                                         extra: h,
-                                        button: g,
+                                        button: v,
                                         buttonLink: w
                                     })
                                 }),
@@ -548,7 +551,7 @@ const be = (r, a)=>{
         ]
     });
 }), Dr = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
-    var { media: r , icon: a , headline: i , pretitle: t , pretitleLinesMax: c , subtitle: o , subtitleLinesMax: d , title: l , titleLinesMax: u , description: m , descriptionLinesMax: s , extra: h , actions: f , button: g , buttonLink: w , dataAttributes: T , "aria-label": b , onClose: C  } = _param, p = _object_without_properties(_param, [
+    var { media: r, icon: a, headline: i, pretitle: t, pretitleLinesMax: c, subtitle: o, subtitleLinesMax: d, title: l, titleLinesMax: u, description: m, descriptionLinesMax: s, extra: h, actions: f, button: v, buttonLink: w, dataAttributes: T, "aria-label": b, onClose: C } = _param, p = _object_without_properties(_param, [
         "media",
         "icon",
         "headline",
@@ -611,7 +614,7 @@ const be = (r, a)=>{
                                 description: m,
                                 descriptionLinesMax: s,
                                 extra: h,
-                                button: g,
+                                button: v,
                                 buttonLink: w
                             })
                         }),
@@ -638,7 +641,7 @@ const be = (r, a)=>{
         ]
     });
 }), Or = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
-    var { media: r , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: c , description: o , descriptionLinesMax: d , extra: l , dataAttributes: u , "aria-label": m  } = _param, s = _object_without_properties(_param, [
+    var { media: r, title: a, titleLinesMax: i, subtitle: t, subtitleLinesMax: c, description: o, descriptionLinesMax: d, extra: l, dataAttributes: u, "aria-label": m } = _param, s = _object_without_properties(_param, [
         "media",
         "title",
         "titleLinesMax",
@@ -650,7 +653,7 @@ const be = (r, a)=>{
         "dataAttributes",
         "aria-label"
     ]);
-    const f = s.href || s.to || s.onPress, g = r && r.type === _image.default && r.props.circular;
+    const f = s.href || s.to || s.onPress, v = r && r.type === _image.default && r.props.circular;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(P, {
         ref: h,
         dataAttributes: _object_spread({
@@ -673,7 +676,7 @@ const be = (r, a)=>{
                         children: [
                             f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_cardcssmistica.touchableNakedMediaOverlay, {
-                                    [_cardcssmistica.circularMediaOverlay]: g
+                                    [_cardcssmistica.circularMediaOverlay]: v
                                 })
                             }),
                             r
@@ -723,7 +726,7 @@ const be = (r, a)=>{
         }))
     });
 }), Hr = /*#__PURE__*/ _react.forwardRef((_param, M)=>{
-    var { icon: r , headline: a , pretitle: i , pretitleLinesMax: t , title: c , titleLinesMax: o , subtitle: d , subtitleLinesMax: l , description: u , descriptionLinesMax: m , extra: s , actions: h , button: f , buttonLink: g , dataAttributes: w , "aria-label": T , onClose: b , aspectRatio: C  } = _param, p = _object_without_properties(_param, [
+    var { icon: r, headline: a, pretitle: i, pretitleLinesMax: t, title: c, titleLinesMax: o, subtitle: d, subtitleLinesMax: l, description: u, descriptionLinesMax: m, extra: s, actions: h, button: f, buttonLink: v, dataAttributes: w, "aria-label": T, onClose: b, aspectRatio: C } = _param, p = _object_without_properties(_param, [
         "icon",
         "headline",
         "pretitle",
@@ -801,11 +804,11 @@ const be = (r, a)=>{
                                 s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     children: s
                                 }),
-                                (f || g) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                (f || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     className: _cardcssmistica.actions,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
                                         primaryButton: f,
-                                        link: g
+                                        link: v
                                     })
                                 })
                             ]
@@ -821,7 +824,7 @@ const be = (r, a)=>{
         ]
     });
 }), Vr = /*#__PURE__*/ _react.forwardRef((_param, h)=>{
-    var { icon: r , title: a , titleLinesMax: i , subtitle: t , subtitleLinesMax: c , dataAttributes: o , "aria-label": d , extra: l , isInverse: u = !1 , aspectRatio: m  } = _param, s = _object_without_properties(_param, [
+    var { icon: r, title: a, titleLinesMax: i, subtitle: t, subtitleLinesMax: c, dataAttributes: o, "aria-label": d, extra: l, isInverse: u = !1, aspectRatio: m } = _param, s = _object_without_properties(_param, [
         "icon",
         "title",
         "titleLinesMax",
@@ -833,7 +836,7 @@ const be = (r, a)=>{
         "isInverse",
         "aspectRatio"
     ]);
-    const f = s.href || s.to || s.onPress, g = u ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
+    const f = s.href || s.to || s.onPress, v = u ? _cardcssmistica.touchableCardOverlayInverse : _cardcssmistica.touchableCardOverlay;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(P, {
         dataAttributes: _object_spread({
             "component-name": "SnapCard"
@@ -853,7 +856,7 @@ const be = (r, a)=>{
                 "aria-label": d,
                 children: [
                     f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: g
+                        className: v
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
                         className: _cardcssmistica.snapCard,
@@ -896,7 +899,7 @@ const be = (r, a)=>{
         })
     });
 }), Be = /*#__PURE__*/ _react.forwardRef((_param, x)=>{
-    var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: t , poster: c , icon: o , headline: d , pretitle: l , pretitleLinesMax: u , title: m , titleLinesMax: s , description: h , descriptionLinesMax: f , extra: g , button: w , secondaryButton: T , onClose: b , actions: C , buttonLink: p , dataAttributes: M , width: A , height: D , aspectRatio: O , "aria-label": X  } = _param, I = _object_without_properties(_param, [
+    var { isInverse: r, backgroundImage: a, backgroundVideo: i, backgroundVideoRef: t, poster: c, icon: o, headline: d, pretitle: l, pretitleLinesMax: u, title: m, titleLinesMax: s, description: h, descriptionLinesMax: f, extra: v, button: w, secondaryButton: T, onClose: b, actions: C, buttonLink: p, dataAttributes: M, width: A, height: D, aspectRatio: O, "aria-label": X } = _param, I = _object_without_properties(_param, [
         "isInverse",
         "backgroundImage",
         "backgroundVideo",
@@ -922,7 +925,7 @@ const be = (r, a)=>{
         "aspectRatio",
         "aria-label"
     ]);
-    const H = a !== void 0, B = i !== void 0, Z = Ae(a), { video: F , videoAction: z  } = Ie(i, c, t);
+    const H = a !== void 0, B = i !== void 0, Z = Ae(a), { video: F, videoAction: z } = Ie(i, c, t);
     B && (C = z ? [
         z
     ] : []);
@@ -1029,7 +1032,7 @@ const be = (r, a)=>{
                                                                     })
                                                                 ]
                                                             }),
-                                                            g
+                                                            v
                                                         ]
                                                     }),
                                                     (w || T || p) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
@@ -1055,7 +1058,7 @@ const be = (r, a)=>{
         ]
     });
 }), Er = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
-    var { dataAttributes: r  } = _param, a = _object_without_properties(_param, [
+    var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(Be, _object_spread_props(_object_spread({}, a), {
@@ -1066,7 +1069,7 @@ const be = (r, a)=>{
         })
     }));
 }), Gr = /*#__PURE__*/ _react.forwardRef((_param, i)=>/* @__PURE__ */ {
-    var { dataAttributes: r  } = _param, a = _object_without_properties(_param, [
+    var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(Be, _object_spread_props(_object_spread({}, a), {
@@ -1076,7 +1079,7 @@ const be = (r, a)=>{
         })
     }));
 }), Pr = /*#__PURE__*/ _react.forwardRef((_param, X)=>{
-    var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: t , backgroundVideoRef: c , width: o , height: d , aspectRatio: l = "7:10" , ariaLabel: u , actions: m , onClose: s , icon: h , headline: f , pretitle: g , pretitleLinesMax: w , title: T , titleLinesMax: b , description: C , descriptionLinesMax: p , variant: M , isInverse: A , backgroundColor: D  } = _param, O = _object_without_properties(_param, [
+    var { dataAttributes: r, backgroundImage: a, backgroundVideo: i, poster: t, backgroundVideoRef: c, width: o, height: d, aspectRatio: l = "7:10", ariaLabel: u, actions: m, onClose: s, icon: h, headline: f, pretitle: v, pretitleLinesMax: w, title: T, titleLinesMax: b, description: C, descriptionLinesMax: p, variant: M, isInverse: A, backgroundColor: D } = _param, O = _object_without_properties(_param, [
         "dataAttributes",
         "backgroundImage",
         "backgroundVideo",
@@ -1100,11 +1103,11 @@ const be = (r, a)=>{
         "isInverse",
         "backgroundColor"
     ]);
-    const I = a !== void 0, x = i !== void 0, H = Ae(a), { video: B , videoAction: Z  } = Ie(i, t, c);
+    const I = a !== void 0, x = i !== void 0, H = Ae(a), { video: B, videoAction: Z } = Ie(i, t, c);
     x && (m = Z ? [
         Z
     ] : []);
-    const F = (0, _themevariantcontext.useIsInverseVariant)(), z = I || x, _ = z ? "0 0 16px rgba(0,0,0,0.4)" : void 0, k = (m == null ? void 0 : m.length) || s, { textPresets: W  } = (0, _hooks.useTheme)(), q = O.href || O.to || O.onPress, j = M || (A ? "inverse" : "default"), Q = ()=>D || ({
+    const F = (0, _themevariantcontext.useIsInverseVariant)(), z = I || x, _ = z ? "0 0 16px rgba(0,0,0,0.4)" : void 0, k = (m == null ? void 0 : m.length) || s, { textPresets: W } = (0, _hooks.useTheme)(), q = O.href || O.to || O.onPress, j = M || (A ? "inverse" : "default"), Q = ()=>D || ({
             default: _skincontractcssmistica.vars.colors.backgroundContainer,
             inverse: F ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundBrand,
             alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
@@ -1177,7 +1180,7 @@ const be = (r, a)=>{
                                                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                         space: 8,
                                                         children: [
-                                                            (f || g || T) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
+                                                            (f || v || T) && /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
                                                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                                     space: 16,
                                                                     children: [
@@ -1185,14 +1188,14 @@ const be = (r, a)=>{
                                                                         /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                                             space: 4,
                                                                             children: [
-                                                                                g && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                                                v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                                                                     forceMobileSizes: !0,
                                                                                     truncate: w,
                                                                                     as: "div",
                                                                                     regular: !0,
                                                                                     textShadow: _,
                                                                                     hyphens: "auto",
-                                                                                    children: g
+                                                                                    children: v
                                                                                 }),
                                                                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
                                                                                     desktopSize: 20,

package/dist/carousel.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -43,10 +44,10 @@ const _dom = require("./utils/dom.js");
 const _platform = require("./utils/platform.js");
 const _documentvisibility = require("./utils/document-visibility.js");
 const _carouselcssmistica = require("./carousel.css-mistica.js");
-const _dynamic = require("@vanilla-extract/dynamic");
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _desktopcontainertypecontext = require("./desktop-container-type-context.js");
 const _constants = require("./skins/constants.js");
+const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -73,7 +74,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)) {
@@ -147,8 +150,8 @@ const ce = (e, r)=>{
     const t = (0, _documentvisibility.useDocumentVisibility)();
     return (0, _hooks.useIsInViewport)(r, !1) && t && !!e;
 }, ie = (param)=>{
-    let { currentIndex: e , numPages: r , onPress: t  } = param;
-    const o = (0, _themevariantcontext.useIsInverseVariant)(), { isDesktopOrBigger: f  } = (0, _hooks.useScreenSize)(), m = (b)=>{
+    let { currentIndex: e, numPages: r, onPress: t } = param;
+    const o = (0, _themevariantcontext.useIsInverseVariant)(), { isDesktopOrBigger: f } = (0, _hooks.useScreenSize)(), m = (b)=>{
         const d = b === e;
         return o ? d ? _carouselcssmistica.bulletActiveInverse : _carouselcssmistica.bulletInverse : d ? _carouselcssmistica.bulletActive : _carouselcssmistica.bullet;
     };
@@ -207,18 +210,18 @@ const ce = (e, r)=>{
     for(let o = t.length - 1; o >= 0; o--)if (e - t[o] >= -1) return o;
     return 0;
 }, ae = 5e3, ue = (param)=>{
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: f , initialActiveItem: m , itemsPerPage: b , itemsToScroll: d , mobilePageOffset: g , gap: N , free: R , centered: A , autoplay: v , onPageChange: P , dataAttributes: F  } = param;
-    const { texts: T , platformOverrides: x , skinName: y  } = (0, _hooks.useTheme)(), c = (0, _desktopcontainertypecontext.useDesktopContainerType)(), i = Ze(c || "large", b), { isDesktopOrBigger: w , isTablet: C  } = (0, _hooks.useScreenSize)(), U = C ? i.tablet : i.mobile, I = Math.max(Math.floor(w ? i.desktop : U), 1), p = _react.useRef(null), S = Math.ceil(e.length / I), [{ scrollLeft: H , scrollRight: q  }, de] = _react.useState({
+    let { items: e, itemStyle: r, itemClassName: t, withBullets: o, renderBullets: f, initialActiveItem: m, itemsPerPage: b, itemsToScroll: d, mobilePageOffset: p, gap: N, free: R, centered: A, autoplay: v, onPageChange: P, dataAttributes: F } = param;
+    const { texts: T, platformOverrides: x, skinName: y } = (0, _hooks.useTheme)(), c = (0, _desktopcontainertypecontext.useDesktopContainerType)(), i = Ze(c || "large", b), { isDesktopOrBigger: w, isTablet: C } = (0, _hooks.useScreenSize)(), U = C ? i.tablet : i.mobile, I = Math.max(Math.floor(w ? i.desktop : U), 1), g = _react.useRef(null), S = Math.ceil(e.length / I), [{ scrollLeft: H, scrollRight: q }, de] = _react.useState({
         scrollLeft: 0,
         scrollRight: 0
     }), [K, he] = _react.useState([]), W = _react.useMemo(()=>ee(K, S), [
         K,
         S
-    ]), O = d ? ee(K, Math.ceil(e.length / d)) : W, me = q !== 0, ge = H !== 0;
+    ]), O = d ? ee(K, Math.ceil(e.length / d)) : W, me = q !== 0, pe = H !== 0;
     _react.useEffect(()=>{
-        if (p.current) {
-            const l = p.current, a = ()=>{
-                const { scrollWidth: z , clientWidth: M  } = l, _ = Math.round(l.scrollLeft), j = Math.round(z - (_ + M));
+        if (g.current) {
+            const l = g.current, a = ()=>{
+                const { scrollWidth: z, clientWidth: M } = l, _ = Math.round(l.scrollLeft), j = Math.round(z - (_ + M));
                 de({
                     scrollLeft: _,
                     scrollRight: j
@@ -252,7 +255,7 @@ const ce = (e, r)=>{
     ]);
     const D = _react.useCallback(function(l) {
         let a = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-        const u = p.current;
+        const u = g.current;
         if (u) {
             const h = W[l];
             u.scrollTo({
@@ -262,10 +265,10 @@ const ce = (e, r)=>{
         }
     }, [
         W
-    ]), pe = _react.useCallback(()=>{
-        const l = p.current;
+    ]), ge = _react.useCallback(()=>{
+        const l = g.current;
         if (l) {
-            const { scrollLeft: a  } = l, u = [
+            const { scrollLeft: a } = l, u = [
                 ...O
             ].reverse().find((h)=>h - a < -1);
             l.scrollTo({
@@ -276,9 +279,9 @@ const ce = (e, r)=>{
     }, [
         O
     ]), Y = _react.useCallback(()=>{
-        const l = p.current;
+        const l = g.current;
         if (l) {
-            const { scrollLeft: a  } = l, u = O.find((h)=>h - a > 1);
+            const { scrollLeft: a } = l, u = O.find((h)=>h - a > 1);
             l.scrollTo({
                 left: u,
                 behavior: "smooth"
@@ -286,7 +289,7 @@ const ce = (e, r)=>{
         }
     }, [
         O
-    ]), J = ce(!!v, p);
+    ]), J = ce(!!v, g);
     _react.useEffect(()=>{
         m !== void 0 && D(Math.floor(m / I), !1);
     }, [
@@ -297,7 +300,7 @@ const ce = (e, r)=>{
         if (J && v) {
             const l = typeof v == "boolean" ? ae : v.time, a = typeof v == "object" && v.loop, u = setInterval(()=>{
                 var h;
-                q !== 0 ? Y() : a && ((h = p.current) == null || h.scrollTo({
+                q !== 0 ? Y() : a && ((h = g.current) == null || h.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
@@ -355,8 +358,8 @@ const ce = (e, r)=>{
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                             className: _carouselcssmistica.carouselPrevArrowButton,
                             "aria-label": T.carouselPrevButton,
-                            onPress: pe,
-                            disabled: !ge,
+                            onPress: ge,
+                            disabled: !pe,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronleftregular.default, {})
                         })
                     }),
@@ -365,11 +368,11 @@ const ce = (e, r)=>{
                             [_carouselcssmistica.centeredCarousel]: A,
                             [_carouselcssmistica.carouselWithScroll]: S > 1
                         }),
-                        style: _object_spread_props(_object_spread({}, (0, _dynamic.assignInlineVars)(_object_spread({
+                        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread({
                             [_carouselcssmistica.vars.itemsPerPageDesktop]: String(i.desktop),
                             [_carouselcssmistica.vars.itemsPerPageTablet]: String(i.tablet),
                             [_carouselcssmistica.vars.itemsPerPageMobile]: String(i.mobile)
-                        }, g === "large" ? {
+                        }, p === "large" ? {
                             [_carouselcssmistica.vars.mobilePageOffset]: be
                         } : y === _constants.VIVO_NEW_SKIN ? {
                             [_carouselcssmistica.vars.mobilePageOffset]: ve
@@ -384,7 +387,7 @@ const ce = (e, r)=>{
                             // slides border:
                             paddingBottom: (0, _platform.isIos)(x) && !(0, _platform.isRunningAcceptanceTest)(x) ? 0.5 : void 0
                         }),
-                        ref: p,
+                        ref: g,
                         children: e.map((l, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_carouselcssmistica.carouselItem, t),
                                 style: _object_spread_props(_object_spread({}, r), {
@@ -413,7 +416,7 @@ const ce = (e, r)=>{
         ]
     });
 }, It = (e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(ue, _object_spread({}, e)), Pt = (param)=>/* @__PURE__ */ {
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: f , initialActiveItem: m , onPageChange: b , dataAttributes: d  } = param;
+    let { items: e, itemStyle: r, itemClassName: t, withBullets: o, renderBullets: f, initialActiveItem: m, onPageChange: b, dataAttributes: d } = param;
     return (0, _jsxruntime.jsx)(ue, {
         items: e,
         itemStyle: r,
@@ -433,37 +436,37 @@ const ce = (e, r)=>{
         dataAttributes: d
     });
 }, fe = /*#__PURE__*/ _react.createContext(!1), xt = ()=>_react.useContext(fe), et = (param)=>/* @__PURE__ */ {
-    let { children: e  } = param;
+    let { children: e } = param;
     return (0, _jsxruntime.jsx)(fe.Provider, {
         value: !0,
         children: e
     });
 }, wt = (param)=>{
-    let { items: e , withBullets: r , autoplay: t , onPageChange: o , dataAttributes: f , inverseBullets: m = !0  } = param;
-    const { texts: b , platformOverrides: d  } = (0, _hooks.useTheme)(), g = _react.useRef(null), [{ scrollLeft: N , scrollRight: R  }, A] = _react.useState({
+    let { items: e, withBullets: r, autoplay: t, onPageChange: o, dataAttributes: f, inverseBullets: m = !0 } = param;
+    const { texts: b, platformOverrides: d } = (0, _hooks.useTheme)(), p = _react.useRef(null), [{ scrollLeft: N, scrollRight: R }, A] = _react.useState({
         scrollLeft: 0,
         scrollRight: 0
     }), v = _react.useCallback(()=>{
-        const c = g.current;
+        const c = p.current;
         c && c.scrollBy({
             left: -c.clientWidth,
             behavior: "smooth"
         });
     }, []), P = _react.useCallback(()=>{
-        const c = g.current;
+        const c = p.current;
         c && c.scrollBy({
             left: c.clientWidth,
             behavior: "smooth"
         });
-    }, []), F = R !== 0, T = N !== 0, x = g.current ? Math.floor((N + g.current.clientWidth / 2) / g.current.clientWidth) : 0;
+    }, []), F = R !== 0, T = N !== 0, x = p.current ? Math.floor((N + p.current.clientWidth / 2) / p.current.clientWidth) : 0;
     _react.useLayoutEffect(()=>{
-        const c = g.current;
+        const c = p.current;
         if (c) {
             const i = ()=>{
-                const { scrollWidth: C , clientWidth: U  } = c, I = Math.round(c.scrollLeft), p = Math.round(C - (I + U));
+                const { scrollWidth: C, clientWidth: U } = c, I = Math.round(c.scrollLeft), g = Math.round(C - (I + U));
                 A({
                     scrollLeft: I,
-                    scrollRight: p
+                    scrollRight: g
                 });
             };
             i(), c.addEventListener("scroll", i);
@@ -475,12 +478,12 @@ const ce = (e, r)=>{
     }, [
         e.length
     ]);
-    const y = ce(!!t, g);
+    const y = ce(!!t, p);
     return _react.useEffect(()=>{
         if (y && t) {
             const c = typeof t == "boolean" ? ae : t.time, i = typeof t == "object" && t.loop, w = setInterval(()=>{
                 var C;
-                R !== 0 ? P() : i && ((C = g.current) == null || C.scrollTo({
+                R !== 0 ? P() : i && ((C = p.current) == null || C.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
@@ -516,7 +519,7 @@ const ce = (e, r)=>{
                     value: !1,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _carouselcssmistica.slideshow,
-                        ref: g,
+                        ref: p,
                         children: e.map((c, i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _carouselcssmistica.slideshowItem,
                                 style: {