@telefonica/mistica 14.32.1 → 14.34.0

package/dist-es/select.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -64,12 +65,12 @@ import { isAndroid as Be, isIos as We } from "./utils/platform.js";
 import { cancelEvent as h } from "./utils/dom.js";
 import { Text3 as Le } from "./text.js";
 import { selectVariants as $e, arrowDown as qe, selectContainerVariants as ze, selectTextVariants as je, vars as C, optionsContainer as Ke, optionsAnimationsVariants as se, menuItem as Ue, menuItemSelected as Xe } from "./select.css-mistica.js";
-import { assignInlineVars as Je } from "@vanilla-extract/dynamic";
-import { Portal as Qe } from "./portal.js";
+import { Portal as Je } from "./portal.js";
+import { applyCssVars as Qe } from "./utils/css.js";
 const Ye = (param)=>{
-    let { id: re , label: d , helperText: ie , value: ce , onChangeValue: b , name: i , fullWidth: P , options: u , optional: V , disabled: le , error: ae , onBlur: D , autoFocus: $ = !1 , native: ue  } = param;
+    let { id: re, label: d, helperText: ie, value: ce, onChangeValue: b, name: i, fullWidth: P, options: u, optional: V, disabled: le, error: ae, onBlur: D, autoFocus: $ = !1, native: ue } = param;
     var Y;
-    const S = o.useRef(null), f = o.useRef(null), g = o.useRef(null), T = o.useRef(null), N = o.useRef(/* @__PURE__ */ new Map()), [de, fe] = o.useState(!0), [p, pe] = o.useState(), [M, q] = o.useState(!1), [z, j] = o.useState(!1), [K, x] = o.useState(!1), [a, H] = o.useState({}), [v, F] = o.useState(), G = o.useRef(null), Z = Ae(re), { rawValues: me , setRawValue: B , setValue: W , formStatus: he , formErrors: U , setFormError: Se , register: L  } = Re(), { platformOverrides: X  } = ke(), ge = ue || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Be(X) || We(X), I = le || he === "sending", R = ae || !!U[i], J = U[i] || ie, l = ce !== null && ce !== void 0 ? ce : me[i], A = (e)=>{
+    const S = o.useRef(null), f = o.useRef(null), g = o.useRef(null), T = o.useRef(null), N = o.useRef(/* @__PURE__ */ new Map()), [de, fe] = o.useState(!0), [p, pe] = o.useState(), [M, q] = o.useState(!1), [z, j] = o.useState(!1), [K, x] = o.useState(!1), [a, H] = o.useState({}), [v, F] = o.useState(), G = o.useRef(null), Z = Ae(re), { rawValues: me, setRawValue: B, setValue: W, formStatus: he, formErrors: U, setFormError: Se, register: L } = Re(), { platformOverrides: X } = ke(), ge = ue || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || Be(X) || We(X), E = le || he === "sending", R = ae || !!U[i], J = U[i] || ie, l = ce !== null && ce !== void 0 ? ce : me[i], A = (e)=>{
         b == null || b(e), Se({
             name: i,
             error: ""
@@ -80,7 +81,7 @@ const Ye = (param)=>{
             name: i,
             value: e
         });
-    }, E = (e)=>{
+    }, I = (e)=>{
         if (e) {
             if (g != null && g.current) {
                 const s = g.current.getBoundingClientRect(), m = s.top, w = s.width, O = s.left, Oe = s.height, y = m + Oe, k = Math.min(u.length, 8) * 48 + 16;
@@ -116,7 +117,7 @@ const Ye = (param)=>{
         } else j(!1), q(!1), F(void 0);
     }, Q = (e)=>{
         var t;
-        G.current = (t = T.current) == null ? void 0 : t.scrollTop, E(!1), A && typeof e == "string" && A(e), typeof l > "u" && pe(e);
+        G.current = (t = T.current) == null ? void 0 : t.scrollTop, I(!1), A && typeof e == "string" && A(e), typeof l > "u" && pe(e);
     }, Te = (e)=>{
         var n;
         const t = (n = T.current) == null ? void 0 : n.getBoundingClientRect();
@@ -128,7 +129,7 @@ const Ye = (param)=>{
             }
             s && s.top + s.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
         }
-    }, ve = f.current, Ie = S.current;
+    }, ve = f.current, Ee = S.current;
     o.useEffect(()=>{
         B({
             name: i,
@@ -156,7 +157,7 @@ const Ye = (param)=>{
         f,
         S,
         ve,
-        Ie
+        Ee
     ]), o.useEffect(()=>{
         const e = (n)=>{
             var m;
@@ -168,16 +169,16 @@ const Ye = (param)=>{
                 h(n);
                 var _ref;
                 const w = (_ref = (m = u[u.findIndex((param)=>{
-                    let { value: O  } = param;
+                    let { value: O } = param;
                     return O === v;
                 }) + s]) == null ? void 0 : m.value) !== null && _ref !== void 0 ? _ref : v;
                 F(w), Te(w);
             }
         }, t = (n)=>{
-            M && (n.keyCode === be && h(n), n.keyCode === Pe && E(!1), (n.keyCode === te || n.keyCode === ne) && (h(n), u.findIndex((param)=>{
-                let { value: c  } = param;
+            M && (n.keyCode === be && h(n), n.keyCode === Pe && I(!1), (n.keyCode === te || n.keyCode === ne) && (h(n), u.findIndex((param)=>{
+                let { value: c } = param;
                 return c === v;
-            }) !== -1 && v !== p && Q(v), E(!1))), z && e(n);
+            }) !== -1 && v !== p && Q(v), I(!1))), z && e(n);
         };
         return document.addEventListener("keydown", t, !1), ()=>{
             document.removeEventListener("keydown", t, !1);
@@ -189,10 +190,10 @@ const Ye = (param)=>{
     ]), o.useEffect(()=>{
         fe(!1);
     }, []);
-    const Ee = (e)=>{
+    const Ie = (e)=>{
         var t;
         return e ? (t = u.find((param)=>{
-            let { value: n  } = param;
+            let { value: n } = param;
             return n === e;
         })) == null ? void 0 : t.text : "";
     }, we = {
@@ -200,15 +201,15 @@ const Ye = (param)=>{
         onFocus: ()=>x(!0),
         onBlur: ()=>x(!1),
         onClick: ()=>{
-            E(!0), x(!0);
+            I(!0), x(!0);
         },
         onKeyDown: (e)=>{
-            !M && (e.keyCode === ne || e.keyCode === te) && (h(e), E(!0));
+            !M && (e.keyCode === ne || e.keyCode === te) && (h(e), I(!0));
         }
-    }, { isDesktopOrBigger: xe  } = _e();
+    }, { isDesktopOrBigger: xe } = _e();
     var _ref, _a_transformOrigin;
     return ge || de ? /* @__PURE__ */ _(Me, {
-        disabled: I,
+        disabled: E,
         helperText: /* @__PURE__ */ r(He, {
             error: R,
             leftText: J
@@ -224,12 +225,12 @@ const Ye = (param)=>{
                 children: d
             }),
             /* @__PURE__ */ _("select", {
-                className: $e[I ? "disabled" : "default"],
+                className: $e[E ? "disabled" : "default"],
                 id: Z,
                 "aria-invalid": !!R,
                 value: l,
                 required: !V,
-                disabled: I,
+                disabled: E,
                 onChange: (e)=>{
                     A && A(e.target.value);
                 },
@@ -255,7 +256,7 @@ const Ye = (param)=>{
                 },
                 children: [
                     u.every((param)=>{
-                        let { value: e  } = param;
+                        let { value: e } = param;
                         return !!e;
                     }) && // if no "empty" option exists, insert a dummy empty option
                     // this is needed to allow a native select with no selected option
@@ -266,7 +267,7 @@ const Ye = (param)=>{
                         }
                     }),
                     u.map((param)=>/* @__PURE__ */ {
-                        let { value: e , text: t  } = param;
+                        let { value: e, text: t } = param;
                         return r("option", {
                             value: e,
                             children: t
@@ -289,7 +290,7 @@ const Ye = (param)=>{
                 role: "button",
                 "aria-haspopup": "listbox",
                 ref: f
-            }, !I && we), {
+            }, !E && we), {
                 children: [
                     /* @__PURE__ */ r(Ge, {
                         style: {
@@ -306,29 +307,29 @@ const Ye = (param)=>{
                         name: i,
                         helperText: J,
                         required: !V,
-                        disabled: I,
+                        disabled: E,
                         id: Z,
                         error: R,
                         inputRef: S,
                         fieldRef: g
                     }),
                     /* @__PURE__ */ r("div", {
-                        className: je[I ? "disabled" : "default"],
+                        className: je[E ? "disabled" : "default"],
                         style: {
                             top: xe ? d ? 28 : 18 : d ? 25 : 16
                         },
-                        children: Ee(l !== null && l !== void 0 ? l : p)
+                        children: Ie(l !== null && l !== void 0 ? l : p)
                     })
                 ]
             })),
             M && /* @__PURE__ */ r(Ze, {
                 onPress: (e)=>{
-                    E(!1), h(e);
+                    I(!1), h(e);
                 },
                 disableScroll: !0,
-                children: /* @__PURE__ */ r(Qe, {
+                children: /* @__PURE__ */ r(Je, {
                     children: /* @__PURE__ */ r("ul", {
-                        style: Je({
+                        style: Qe({
                             [C.top]: a.top ? `${a.top}px` : "",
                             [C.left]: a.left ? `${a.left}px` : "",
                             [C.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
@@ -340,7 +341,7 @@ const Ye = (param)=>{
                         role: "listbox",
                         ref: T,
                         children: u.map((param)=>/* @__PURE__ */ {
-                            let { value: e , text: t  } = param;
+                            let { value: e, text: t } = param;
                             return r("li", {
                                 role: "option",
                                 "aria-selected": e === (p !== null && p !== void 0 ? p : l),

package/dist-es/sheet-root.js

@@ -1,3 +1,4 @@
+"use client";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -88,7 +89,7 @@ let p = null, n = null, l = null;
 const d = (r)=>Array.isArray(r) ? r.length ? r.join(`
 
 `) : void 0 : r, L = (param)=>{
-    let { title: r , subtitle: c , description: e , selectedId: s , items: t  } = param;
+    let { title: r, subtitle: c, description: e, selectedId: s, items: t } = param;
     return l({
         title: r,
         subtitle: c,
@@ -107,7 +108,7 @@ const d = (r)=>Array.isArray(r) ? r.length ? r.join(`
             }
         ]
     }).then((param)=>{
-        let { action: o , result: a  } = param;
+        let { action: o, result: a } = param;
         return o === "SUBMIT" ? {
             action: o,
             selectedId: a[0].selectedIds[0]
@@ -117,7 +118,7 @@ const d = (r)=>Array.isArray(r) ? r.length ? r.join(`
         };
     });
 }, k = (param)=>{
-    let { title: r , subtitle: c , description: e , items: s  } = param;
+    let { title: r, subtitle: c, description: e, items: s } = param;
     return l({
         title: r,
         subtitle: c,
@@ -134,7 +135,7 @@ const d = (r)=>Array.isArray(r) ? r.length ? r.join(`
             }
         ]
     }).then((param)=>{
-        let { action: t , result: o  } = param;
+        let { action: t, result: o } = param;
         return t === "SUBMIT" ? {
             action: t,
             selectedId: o[0].selectedIds[0]
@@ -145,7 +146,7 @@ const d = (r)=>Array.isArray(r) ? r.length ? r.join(`
     });
 }, b = function() {
     var _ref = _async_to_generator(function*(param) {
-        let { title: r , subtitle: c , description: e , items: s  } = param;
+        let { title: r, subtitle: c, description: e, items: s } = param;
         yield l({
             title: r,
             subtitle: c,
@@ -168,7 +169,7 @@ const d = (r)=>Array.isArray(r) ? r.length ? r.join(`
     };
 }(), C = function() {
     var _ref = _async_to_generator(function*(param) {
-        let { title: r , subtitle: c , description: e , button: s , secondaryButton: t , link: o  } = param;
+        let { title: r, subtitle: c, description: e, button: s, secondaryButton: t, link: o } = param;
         return l({
             title: r,
             subtitle: c,
@@ -184,10 +185,10 @@ const d = (r)=>Array.isArray(r) ? r.length ? r.join(`
                 }
             ]
         }).then((param)=>{
-            let { action: a , result: i  } = param;
+            let { action: a, result: i } = param;
             if (a === "SUBMIT") {
                 const f = i.find((param)=>{
-                    let { id: T  } = param;
+                    let { id: T } = param;
                     return T === "bottom-actions-0";
                 }), I = f == null ? void 0 : f.selectedIds[0];
                 if (I === "PRIMARY" || I === "SECONDARY" || I === "LINK") return {
@@ -218,7 +219,7 @@ const B = (r)=>{
     };
     if (l) {
         let e;
-        const { type: s , props: t  } = r;
+        const { type: s, props: t } = r;
         switch(s){
             case "INFO":
                 e = b(t);
@@ -242,7 +243,7 @@ const B = (r)=>{
         });
     } else return c();
 }, M = (r)=>{
-    const { isDarkMode: c  } = m(), [e, s] = S.useState(null), t = S.useRef(null);
+    const { isDarkMode: c } = m(), [e, s] = S.useState(null), t = S.useRef(null);
     if (S.useEffect(()=>{
         if (r.nativeImplementation) return l = r.nativeImplementation, ()=>{
             l = null;

package/dist-es/sheet.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -104,8 +105,8 @@ import Re from "./button-layout.js";
 import M from "./image.js";
 import { InternalResponsiveLayout as I } from "./responsive-layout.js";
 const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>{
-    let { closeModal: t  } = param;
-    const [i, a] = n.useState(0), f = n.useRef(!1), p = n.useRef(0), o = n.useRef(0), s = n.useRef(0), u = n.useRef(0), { isDesktopOrBigger: m  } = P(), r = n.useCallback((h)=>{
+    let { closeModal: t } = param;
+    const [i, a] = n.useState(0), f = n.useRef(!1), p = n.useRef(0), o = n.useRef(0), s = n.useRef(0), u = n.useRef(0), { isDesktopOrBigger: m } = P(), r = n.useCallback((h)=>{
         f.current = !0, p.current = 0, o.current = Date.now(), s.current = C(h);
     }, []), c = n.useCallback(()=>{
         f.current = !1, a(0);
@@ -175,8 +176,8 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         transitionEnd: "closed"
     }
 }, we = (t, i)=>be[t][i] || t, b = /*#__PURE__*/ n.forwardRef((param, f)=>{
-    let { onClose: t , children: i , dataAttributes: a  } = param;
-    const { texts: p  } = D(), [o, s] = n.useReducer(we, "closed"), u = n.useRef(!1), m = oe(), r = n.useCallback((v)=>{
+    let { onClose: t, children: i, dataAttributes: a } = param;
+    const { texts: p } = D(), [o, s] = n.useReducer(we, "closed"), u = n.useRef(!1), m = oe(), r = n.useCallback((v)=>{
         v.target === v.currentTarget && s("transitionEnd");
     }, []), c = ()=>{
         o === "open" && s("close");
@@ -198,7 +199,7 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
     ]);
     const _Se = Se({
         closeModal: c
-    }), { onScroll: h , overlayStyle: d  } = _Se, l = _object_without_properties(_Se, [
+    }), { onScroll: h, overlayStyle: d } = _Se, l = _object_without_properties(_Se, [
         "onScroll",
         "overlayStyle"
     ]);
@@ -269,7 +270,7 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         })
     });
 }), k = (param)=>{
-    let { title: t , subtitle: i , description: a , modalTitleId: f , button: p , secondaryButton: o , link: s , children: u  } = param;
+    let { title: t, subtitle: i, description: a, modalTitleId: f, button: p, secondaryButton: o, link: s, children: u } = param;
     const m = n.useRef(null), r = n.useRef(null), c = n.useRef(null);
     n.useEffect(()=>{
         r.current && (c.current = fe(r.current));
@@ -387,9 +388,8 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         ]
     });
 }, Qe = /*#__PURE__*/ n.forwardRef((param, r)=>{
-    let { title: t , subtitle: i , description: a , items: f , selectedId: p , onClose: o , onSelect: s , button: u , dataAttributes: m  } = param;
-    const [c, h] = n.useState(p), d = n.useRef(!1), { isDesktopOrBigger: l  } = P(), { texts: g  } = D();
-    var _ref, _R_title;
+    let { title: t, subtitle: i, description: a, items: f, selectedId: p, onClose: o, onSelect: s, button: u, dataAttributes: m } = param;
+    const [c, h] = n.useState(p), d = n.useRef(!1), { isDesktopOrBigger: l } = P(), { texts: g } = D();
     return /* @__PURE__ */ e(b, {
         onClose: o,
         ref: r,
@@ -397,7 +397,8 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             "component-name": "RadioListSheet"
         }),
         children: (param)=>/* @__PURE__ */ {
-            let { closeModal: v , modalTitleId: L  } = param;
+            let { closeModal: v, modalTitleId: L } = param;
+            var _ref;
             return e(k, {
                 title: t,
                 subtitle: i,
@@ -420,12 +421,15 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                             }, 200));
                         },
                         children: /* @__PURE__ */ e(le, {
-                            children: f.map((R)=>/* @__PURE__ */ e(ae, {
+                            children: f.map((R)=>/* @__PURE__ */ {
+                                var _R_title;
+                                return e(ae, {
                                     title: (_R_title = R.title) !== null && _R_title !== void 0 ? _R_title : "",
                                     description: R.description,
                                     asset: R.asset,
                                     radioValue: R.id
-                                }, R.id))
+                                }, R.id);
+                            })
                         })
                     })
                 })
@@ -433,8 +437,8 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         }
     });
 }), Ue = /*#__PURE__*/ n.forwardRef((param, u)=>{
-    let { title: t , subtitle: i , description: a , items: f , onClose: p , onSelect: o , dataAttributes: s  } = param;
-    const { isDarkMode: m  } = D();
+    let { title: t, subtitle: i, description: a, items: f, onClose: p, onSelect: o, dataAttributes: s } = param;
+    const { isDarkMode: m } = D();
     return /* @__PURE__ */ e(b, {
         onClose: p,
         ref: u,
@@ -442,7 +446,7 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             "component-name": "ActionsListSheet"
         }),
         children: (param)=>/* @__PURE__ */ {
-            let { closeModal: r , modalTitleId: c  } = param;
+            let { closeModal: r, modalTitleId: c } = param;
             return e(k, {
                 title: t,
                 subtitle: i,
@@ -450,7 +454,7 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
                 modalTitleId: c,
                 children: /* @__PURE__ */ e(Y, {
                     children: f.map((param)=>/* @__PURE__ */ {
-                        let { id: h , style: d , title: l , icon: g  } = param;
+                        let { id: h, style: d, title: l, icon: g } = param;
                         return e(de, {
                             onPress: ()=>{
                                 o == null || o(h), r();
@@ -483,8 +487,8 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         }
     });
 }), We = /*#__PURE__*/ n.forwardRef((param, s)=>{
-    let { title: t , subtitle: i , description: a , items: f , onClose: p , dataAttributes: o  } = param;
-    const { isDarkMode: u  } = D();
+    let { title: t, subtitle: i, description: a, items: f, onClose: p, dataAttributes: o } = param;
+    const { isDarkMode: u } = D();
     return /* @__PURE__ */ e(b, {
         onClose: p,
         ref: s,
@@ -492,7 +496,7 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             "component-name": "InfoSheet"
         }),
         children: (param)=>/* @__PURE__ */ {
-            let { modalTitleId: m  } = param;
+            let { modalTitleId: m } = param;
             return e(k, {
                 title: t,
                 subtitle: i,
@@ -541,11 +545,11 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
         }
     });
 }), Xe = /*#__PURE__*/ n.forwardRef((param, r)=>{
-    let { title: t , subtitle: i , description: a , button: f , secondaryButton: p , buttonLink: o , onClose: s , dataAttributes: u , onPressButton: m  } = param;
+    let { title: t, subtitle: i, description: a, button: f, secondaryButton: p, buttonLink: o, onClose: s, dataAttributes: u, onPressButton: m } = param;
     const c = (d, l)=>()=>{
             m == null || m(l), d();
         }, h = (_param)=>{
-        var { text: d  } = _param, l = _object_without_properties(_param, [
+        var { text: d } = _param, l = _object_without_properties(_param, [
             "text"
         ]);
         return _object_spread({
@@ -559,7 +563,7 @@ const C = (t)=>"touches" in t ? t.touches[0].clientY : t.clientY, Se = (param)=>
             "component-name": "ActionsSheet"
         }),
         children: (param)=>/* @__PURE__ */ {
-            let { modalTitleId: d , closeModal: l  } = param;
+            let { modalTitleId: d, closeModal: l } = param;
             return e(k, {
                 title: t,
                 subtitle: i,

package/dist-es/skeleton-base.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as i } from "react/jsx-runtime";
 import { useIsInverseVariant as l } from "./theme-variant-context.js";
 import m from "classnames";
 import { sprinkles as c } from "./sprinkles.css-mistica.js";
 import { vars as r } from "./skins/skin-contract.css-mistica.js";
 const d = (param)=>{
-    let { width: e = "100%" , height: o = 8 , radius: s = r.borderRadii.container , className: a , noBorderRadius: n = !1  } = param;
+    let { width: e = "100%", height: o = 8, radius: s = r.borderRadii.container, className: a, noBorderRadius: n = !1 } = param;
     const t = l();
     return /* @__PURE__ */ i("div", {
         className: m(a, c({

package/dist-es/skeletons.js

@@ -56,7 +56,7 @@ import c from "./stack.js";
 import { getPrefixedDataAttributes as d } from "./utils/dom.js";
 import { row as m, circle as h, line as u, animation as k } from "./skeletons.css-mistica.js";
 const o = (param)=>/* @__PURE__ */ {
-    let { children: n , ariaLabel: t , dataAttributes: i , width: a , height: l  } = param;
+    let { children: n, ariaLabel: t, dataAttributes: i, width: a, height: l } = param;
     return e("div", _object_spread_props(_object_spread({
         className: k,
         role: "status",
@@ -71,7 +71,7 @@ const o = (param)=>/* @__PURE__ */ {
         children: n
     }));
 }, g = (param)=>/* @__PURE__ */ {
-    let { width: n = "100%" , ariaLabel: t , dataAttributes: i  } = param;
+    let { width: n = "100%", ariaLabel: t, dataAttributes: i } = param;
     return e(o, {
         width: n,
         ariaLabel: t,
@@ -83,7 +83,7 @@ const o = (param)=>/* @__PURE__ */ {
         })
     });
 }, A = (param)=>/* @__PURE__ */ {
-    let { ariaLabel: n , dataAttributes: t  } = param;
+    let { ariaLabel: n, dataAttributes: t } = param;
     return e(o, {
         width: "100%",
         ariaLabel: n,
@@ -102,7 +102,7 @@ const o = (param)=>/* @__PURE__ */ {
         })
     });
 }, x = (param)=>/* @__PURE__ */ {
-    let { ariaLabel: n , size: t = 40 , dataAttributes: i  } = param;
+    let { ariaLabel: n, size: t = 40, dataAttributes: i } = param;
     return e(o, {
         width: t,
         height: t,
@@ -117,7 +117,7 @@ const o = (param)=>/* @__PURE__ */ {
         })
     });
 }, N = (param)=>/* @__PURE__ */ {
-    let { width: n = "100%" , ariaLabel: t , dataAttributes: i  } = param;
+    let { width: n = "100%", ariaLabel: t, dataAttributes: i } = param;
     return e(o, {
         width: n,
         ariaLabel: t,
@@ -141,7 +141,7 @@ const o = (param)=>/* @__PURE__ */ {
         })
     });
 }, R = (param)=>/* @__PURE__ */ {
-    let { width: n = "100%" , height: t = "100%" , ariaLabel: i , dataAttributes: a , noBorderRadius: l = !1  } = param;
+    let { width: n = "100%", height: t = "100%", ariaLabel: i, dataAttributes: a, noBorderRadius: l = !1 } = param;
     return e(o, {
         height: t,
         width: n,

package/dist-es/slider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as c, jsxs as z } from "react/jsx-runtime";
 import * as r from "react";
 import { useTheme as B, useScreenSize as L } from "./hooks.js";
@@ -5,8 +6,8 @@ import { sliderDisabled as W, container as X, targetContainer as _, rangeSlider
 import V from "classnames";
 import J from "./tooltip.js";
 const K = (param)=>{
-    let { disabled: u , steps: t = 1 , max: a = 100 , min: l = 0 , value: o , onChange: d , getStepArrayIndex: f , "arial-label": A , tooltip: $  } = param;
-    const { isIos: w  } = B(), { isTabletOrSmaller: k  } = L(), [i, g] = r.useState(l), [m, C] = r.useState(l), [b, M] = r.useState(a), [N, O] = r.useState(1), h = r.useRef(null), P = r.useMemo(()=>u ? "0.5" : "1", [
+    let { disabled: u, steps: t = 1, max: a = 100, min: l = 0, value: o, onChange: d, getStepArrayIndex: f, "arial-label": A, tooltip: $ } = param;
+    const { isIos: w } = B(), { isTabletOrSmaller: k } = L(), [i, g] = r.useState(l), [m, C] = r.useState(l), [b, M] = r.useState(a), [N, O] = r.useState(1), h = r.useRef(null), P = r.useMemo(()=>u ? "0.5" : "1", [
         u
     ]), j = 0, p = "50%", v = r.useMemo(()=>u && W, [
         u

package/dist-es/snackbar.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -65,8 +66,8 @@ import { Portal as X } from "./portal.js";
 import Y from "./generated/mistica-icons/icon-close-regular.js";
 import $ from "./icon-button.js";
 const q = 5e3, G = 1e4, J = (param)=>{
-    let { message: l , buttonText: o , duration: r , onClose: n , type: c , withDismiss: m = !1 , dataAttributes: f  } = param;
-    const { texts: d  } = E(), [i, e] = a.useState(!1), { width: N , ref: v  } = D(), { isDesktopOrBigger: B  } = M(), s = N > (B ? 160 : 128), T = r === 1 / 0 && !o || m, u = a.useCallback((h)=>{
+    let { message: l, buttonText: o, duration: r, onClose: n, type: c, withDismiss: m = !1, dataAttributes: f } = param;
+    const { texts: d } = E(), [i, e] = a.useState(!1), { width: N, ref: v } = D(), { isDesktopOrBigger: B } = M(), s = N > (B ? 160 : 128), T = r === 1 / 0 && !o || m, u = a.useCallback((h)=>{
         e(!1), setTimeout(()=>{
             n == null || n(h);
         }, _);
@@ -172,7 +173,7 @@ const q = 5e3, G = 1e4, J = (param)=>{
         })
     });
 }, K = (param)=>{
-    let { message: l , buttonText: o , duration: r , onClose: n = ()=>{} , type: c = "INFORMATIVE" , withDismiss: m  } = param;
+    let { message: l, buttonText: o, duration: r, onClose: n = ()=>{}, type: c = "INFORMATIVE", withDismiss: m } = param;
     const f = o ? G : q;
     r = Math.max(r !== null && r !== void 0 ? r : f, f);
     const d = R(), i = a.useRef(n);

package/dist-es/spinner.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -33,8 +34,8 @@ import { useTheme as N, useAriaId as g } from "./hooks.js";
 import { spinnerIos as v, spinnerIosSvgPath as i, spinnerDefault as u, spinnerDefaultPath as L } from "./spinner.css-mistica.js";
 import { vars as M } from "./skins/skin-contract.css-mistica.js";
 const Z = (param)=>{
-    let { color: t , delay: s = "500ms" , size: a = 24 , style: m , rolePresentation: p  } = param;
-    const { texts: h , platformOverrides: o  } = N();
+    let { color: t, delay: s = "500ms", size: a = 24, style: m, rolePresentation: p } = param;
+    const { texts: h, platformOverrides: o } = N();
     t = t || M.colors.controlActivated;
     const l = g(), n = !p, C = h.loading, d = c(o) === "ios" ? /* @__PURE__ */ r("svg", {
         "aria-labelledby": l,

package/dist-es/stack.js

@@ -53,9 +53,9 @@ function _object_spread_props(target, source) {
 import { jsx as l } from "react/jsx-runtime";
 import * as c from "react";
 import f from "classnames";
-import { assignInlineVars as b } from "@vanilla-extract/dynamic";
 import { getPrefixedDataAttributes as p } from "./utils/dom.js";
-import { flexStack as d, marginStack as u, vars as r } from "./stack.css-mistica.js";
+import { flexStack as b, marginStack as d, vars as r } from "./stack.css-mistica.js";
+import { applyCssVars as u } from "./utils/css.js";
 const a = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, k = (t)=>{
     if (typeof t == "number" || typeof t == "string") return {
         [r.space]: a(t)
@@ -65,11 +65,11 @@ const a = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, k = (t)=>{
         [r.spaceDesktop]: a(t.desktop)
     };
     return t.tablet && (e[r.spaceTablet] = a(t.tablet)), e;
-}, x = (param)=>/* @__PURE__ */ {
-    let { space: t , className: e , children: o , role: i , "aria-labelledby": s , dataAttributes: n  } = param;
+}, y = (param)=>/* @__PURE__ */ {
+    let { space: t, className: e, children: o, role: i, "aria-labelledby": s, dataAttributes: n } = param;
     return l("div", _object_spread_props(_object_spread({
-        className: f(e, typeof t == "string" ? d : u),
-        style: b(k(t)),
+        className: f(e, typeof t == "string" ? b : d),
+        style: u(k(t)),
         role: i,
         "aria-labelledby": s
     }, p(n)), {
@@ -78,5 +78,5 @@ const a = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, k = (t)=>{
                 children: m
             }))
     }));
-}, V = x;
+}, V = y;
 export { V as default };

package/dist-es/stacking-group.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as u, jsx as l } from "react/jsx-runtime";
 import * as d from "react";
 import { useIsInverseVariant as m } from "./theme-variant-context.js";
@@ -6,7 +7,7 @@ import f from "./inline.js";
 import { Text4 as h } from "./text.js";
 import { moreItems as b } from "./stacking-group.css-mistica.js";
 const g = (param)=>{
-    let { moreItemsStyle: e , stacked: i = !0 , maxItems: o = 1 / 0 , children: t  } = param;
+    let { moreItemsStyle: e, stacked: i = !0, maxItems: o = 1 / 0, children: t } = param;
     const s = m(), n = d.Children.count(t), a = n - o + 1, p = i ? -8 : 8, c = e.size;
     return /* @__PURE__ */ u(f, {
         space: p,