@telefonica/mistica 14.33.0 → 14.35.0

package/dist-es/counter.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -66,7 +67,7 @@ import { useTheme as K } from "./hooks.js";
 import N from "classnames";
 import U from "./screen-reader-only.js";
 const x = 20, W = (param)=>{
-    let { value: h , defaultValue: b , min: m , max: s , onChangeValue: a  } = param;
+    let { value: h, defaultValue: b, min: m, max: s, onChangeValue: a } = param;
     const i = h !== void 0, f = V.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
         m,
         s
@@ -78,8 +79,8 @@ const x = 20, W = (param)=>{
         v
     ];
 }, X = (param)=>{
-    let { value: h , defaultValue: b , onChangeValue: m , onRemove: s , min: a , max: i , dataAttributes: f , disabled: e , removeLabel: p , increaseLabel: v , decreaseLabel: n , valueLabel: C  } = param;
-    const A = _(), { texts: u  } = K(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, T] = W({
+    let { value: h, defaultValue: b, onChangeValue: m, onRemove: s, min: a, max: i, dataAttributes: f, disabled: e, removeLabel: p, increaseLabel: v, decreaseLabel: n, valueLabel: C } = param;
+    const A = _(), { texts: u } = K(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, T] = W({
         value: h,
         defaultValue: b,
         min: l,

package/dist-es/credit-card-expiration-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -83,12 +84,12 @@ import { useForm as k, useFieldProps as v } from "./form-context.js";
 import { useTheme as $ } from "./hooks.js";
 import { TextFieldBaseAutosuggest as R } from "./text-field-base.js";
 const j = (_param)=>{
-    var { inputRef: g , defaultValue: s , value: l  } = _param, u = _object_without_properties(_param, [
+    var { inputRef: g, defaultValue: s, value: l } = _param, u = _object_without_properties(_param, [
         "inputRef",
         "defaultValue",
         "value"
     ]);
-    const { texts: p  } = $(), c = Y.useRef(""), i = (r)=>{
+    const { texts: p } = $(), c = Y.useRef(""), i = (r)=>{
         if (r.length === 2 && c.current === "Backspace") return r[0];
         let e = "";
         return [
@@ -114,7 +115,7 @@ const j = (_param)=>{
         ref: g
     }));
 }, B = (_param)=>{
-    var { disabled: g , error: s , helperText: l , name: u , optional: p , validate: c , onChange: i , onChangeValue: h , onBlur: r , value: e , autoComplete: x = "cc-exp" , defaultValue: D  } = _param, T = _object_without_properties(_param, [
+    var { disabled: g, error: s, helperText: l, name: u, optional: p, validate: c, onChange: i, onChangeValue: h, onBlur: r, value: e, autoComplete: x = "cc-exp", defaultValue: D } = _param, T = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -128,9 +129,9 @@ const j = (_param)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: f  } = $(), { setFormError: w , jumpToNext: I  } = k(), m = (t, n)=>{
+    const { texts: f } = $(), { setFormError: w, jumpToNext: I } = k(), m = (t, n)=>{
         if (!n) return p ? "" : f.formFieldErrorIsMandatory;
-        const { month: a , year: o  } = t;
+        const { month: a, year: o } = t;
         if (!a || !o) return f.formCreditCardExpirationError;
         const d = /* @__PURE__ */ new Date(), M = d.getMonth() + 1, y = d.getFullYear();
         return o < y || o === y && a < M ? f.formCreditCardExpirationError : c == null ? void 0 : c(t, n);

package/dist-es/credit-card-fields.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { useForm as C } from "./form-context.js";
 import { useTheme as n } from "./hooks.js";
@@ -8,8 +9,8 @@ import p from "./credit-card-expiration-field.js";
 import v from "./credit-card-number-field.js";
 import u from "./cvv-field.js";
 const b = (param)=>{
-    let { numberFieldName: t = "ccNum" , expirationFieldName: m = "ccExp" , cvvFieldName: a = "ccCvv" , acceptedCards: o  } = param;
-    const { values: d  } = C(), { texts: r  } = n(), l = s(String(d[t]));
+    let { numberFieldName: t = "ccNum", expirationFieldName: m = "ccExp", cvvFieldName: a = "ccCvv", acceptedCards: o } = param;
+    const { values: d } = C(), { texts: r } = n(), l = s(String(d[t]));
     return /* @__PURE__ */ i(f, {
         space: 16,
         children: [

package/dist-es/credit-card-number-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -98,7 +99,7 @@ const W = (r)=>{
     var _ref;
     return (_ref = (t = i.match(/.{1,4}/g)) == null ? void 0 : t.join(" ")) !== null && _ref !== void 0 ? _ref : i;
 }, X = (_param)=>{
-    var { inputRef: r , value: i , defaultValue: t , onChange: e  } = _param, a = _object_without_properties(_param, [
+    var { inputRef: r, value: i, defaultValue: t, onChange: e } = _param, a = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
@@ -128,7 +129,7 @@ const W = (r)=>{
     animationTarget: /* @__PURE__ */ o(V, {}),
     isAnimating: !1
 }, v = (r, param)=>{
-    let { type: i , value: t  } = param;
+    let { type: i, value: t } = param;
     if (i === "INPUT") {
         const e = Y(t);
         if (e && !r.showBackface) return {
@@ -149,8 +150,8 @@ const W = (r)=>{
         isAnimating: !1
     }) : r;
 }, rr = (param)=>{
-    let { value: r  } = param;
-    const [{ showBackface: i , animationTarget: t , isAnimating: e  }, a] = l.useReducer(v, Z);
+    let { value: r } = param;
+    const [{ showBackface: i, animationTarget: t, isAnimating: e }, a] = l.useReducer(v, Z);
     return l.useEffect(()=>{
         a({
             type: "INPUT",
@@ -180,11 +181,11 @@ const W = (r)=>{
         })
     });
 }, er = (_param)=>{
-    var { disabled: r , error: i , helperText: t , name: e , optional: a , validate: c , onChange: N , onChangeValue: m , onBlur: f , acceptedCards: u = {
+    var { disabled: r, error: i, helperText: t, name: e, optional: a, validate: c, onChange: N, onChangeValue: m, onBlur: f, acceptedCards: u = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    } , value: p , autoComplete: d = "cc-number" , defaultValue: g  } = _param, w = _object_without_properties(_param, [
+    }, value: p, autoComplete: d = "cc-number", defaultValue: g } = _param, w = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -199,7 +200,7 @@ const W = (r)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: E  } = D(), { jumpToNext: R , rawValues: F , setFormError: S  } = M(), h = (n, C)=>{
+    const { texts: E } = D(), { jumpToNext: R, rawValues: F, setFormError: S } = M(), h = (n, C)=>{
         const s = E.formCreditCardNumberError;
         return n ? I(n) && !u.americanExpress || x(n) && !u.visa || A(n) && !u.masterCard || !L(n) || T(n) !== n.length ? s : c == null ? void 0 : c(n, C) : a ? "" : E.formFieldErrorIsMandatory;
     }, b = (n)=>n.replace(/\s/g, ""), k = j({

package/dist-es/cvv-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -94,8 +95,8 @@ import J from "./divider.js";
 import g from "./text.js";
 import { vars as K } from "./skins/skin-contract.css-mistica.js";
 const O = (param)=>{
-    let { acceptedCards: t  } = param;
-    const { texts: e  } = h();
+    let { acceptedCards: t } = param;
+    const { texts: e } = h();
     return /* @__PURE__ */ r(A, {
         children: /* @__PURE__ */ r(H, {
             padding: 8,
@@ -134,11 +135,11 @@ const O = (param)=>{
         })
     });
 }, Q = (_param)=>{
-    var { disabled: t , error: e , helperText: I , name: n , optional: f , validate: s , onChange: x , onChangeValue: T , onBlur: F , acceptedCards: y = {
+    var { disabled: t, error: e, helperText: I, name: n, optional: f, validate: s, onChange: x, onChangeValue: T, onBlur: F, acceptedCards: y = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    } , maxLength: m = 4 , value: E , autoComplete: M = "cc-csc" , defaultValue: V  } = _param, j = _object_without_properties(_param, [
+    }, maxLength: m = 4, value: E, autoComplete: M = "cc-csc", defaultValue: V } = _param, j = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -154,7 +155,7 @@ const O = (param)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: l  } = h(), { setFormError: z , jumpToNext: B  } = R(), p = (o, i)=>o ? o.length !== m ? l.formCreditCardCvvError : s == null ? void 0 : s(o, i) : f ? "" : l.formFieldErrorIsMandatory, a = (o)=>o, u = S({
+    const { texts: l } = h(), { setFormError: z, jumpToNext: B } = R(), p = (o, i)=>o ? o.length !== m ? l.formCreditCardCvvError : s == null ? void 0 : s(o, i) : f ? "" : l.formFieldErrorIsMandatory, a = (o)=>o, u = S({
         name: n,
         value: E,
         defaultValue: V,
@@ -186,7 +187,6 @@ const O = (param)=>{
             children: /* @__PURE__ */ r(O, {
                 acceptedCards: y
             }),
-            targetLabel: l.formCreditCardCvvTooltipVisaMcButton,
             target: /* @__PURE__ */ r("div", {
                 style: {
                     width: 16,
@@ -203,6 +203,7 @@ const O = (param)=>{
                         // (40 - 16) / 2
                         top: -12
                     },
+                    "aria-label": l.formCreditCardCvvTooltipVisaMcButton,
                     children: /* @__PURE__ */ r(N, {
                         size: 16,
                         color: K.colors.neutralMedium

package/dist-es/date-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -88,7 +89,7 @@ import { getLocalDateString as r } from "./utils/time.js";
 import { useTheme as j } from "./hooks.js";
 import { isFirefox as z } from "./utils/platform.js";
 const A = /*#__PURE__*/ a.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), B = (_param)=>{
-    var { disabled: l , error: g , helperText: D , name: y , optional: m , validate: s , onChange: F , onChangeValue: n , onBlur: R , value: S , defaultValue: h , min: o , max: i  } = _param, d = _object_without_properties(_param, [
+    var { disabled: l, error: g, helperText: D, name: y, optional: m, validate: s, onChange: F, onChangeValue: n, onBlur: R, value: S, defaultValue: h, min: o, max: i } = _param, d = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -103,7 +104,7 @@ const A = /*#__PURE__*/ a.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "min",
         "max"
     ]);
-    const k = (e)=>e, I = a.useMemo(()=>z() ? !1 : b("date"), []), { texts: T  } = j(), f = (e)=>!(o && e && e < r(o) || i && e && e > r(i)), u = x({
+    const k = (e)=>e, I = a.useMemo(()=>z() ? !1 : b("date"), []), { texts: T } = j(), f = (e)=>!(o && e && e < r(o) || i && e && e > r(i)), u = x({
         name: y,
         value: S,
         defaultValue: h,

package/dist-es/date-time-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -88,11 +89,11 @@ import w from "./generated/mistica-icons/icon-calendar-regular.js";
 import { isFirefox as E } from "./utils/platform.js";
 import { useTheme as V } from "./hooks.js";
 const j = /*#__PURE__*/ m.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), z = (_param)=>{
-    var { disabled: T , error: g , helperText: F , name: h , optional: f , validate: n , onChange: y , onChangeValue: a , onBlur: R , value: S , defaultValue: k , min: i , /**
+    var { disabled: T, error: g, helperText: F, name: h, optional: f, validate: n, onChange: y, onChangeValue: a, onBlur: R, value: S, defaultValue: k, min: i, /**
    * When typing a datetime value into the input field (inside a test for example), some browsers like Chrome
    * force the year to have exactly 6 digits. In order to prevent this, in case max value was not provided we
    * set it so that it only accepts datetime values with years having up to 4 digits.
-   */ max: s = /* @__PURE__ */ new Date("9999-12-31T23:59")  } = _param, l = _object_without_properties(_param, [
+   */ max: s = /* @__PURE__ */ new Date("9999-12-31T23:59") } = _param, l = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -107,7 +108,7 @@ const j = /*#__PURE__*/ m.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "min",
         "max"
     ]);
-    const u = m.useMemo(()=>E() ? !1 : O("datetime-local"), []), d = (e)=>u ? e : e.replace(/\s/, "T"), { texts: v  } = V(), c = (e)=>{
+    const u = m.useMemo(()=>E() ? !1 : O("datetime-local"), []), d = (e)=>u ? e : e.replace(/\s/, "T"), { texts: v } = V(), c = (e)=>{
         const t = d(e);
         return !(i && t && t < o(i) || s && t && t > o(s));
     }, p = I({

package/dist-es/date-time-picker.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -112,17 +113,17 @@ const A = {
     const i = a.toLocaleLowerCase().split("-")[0];
     return A[i] || "en-gb";
 }, ie = (_param)=>{
-    var { withTime: a , mode: i , isValidDate: h , optional: u  } = _param, t = _object_without_properties(_param, [
+    var { withTime: a, mode: i, isValidDate: h, optional: u } = _param, t = _object_without_properties(_param, [
         "withTime",
         "mode",
         "isValidDate",
         "optional"
     ]);
-    const [m, y] = d.useState(!1), { texts: x , i18n: { locale: b  }  } = E(), n = d.useRef(null), { height: k , ref: v  } = V(), l = (e)=>{
+    const [m, y] = d.useState(!1), { texts: x, i18n: { locale: b } } = E(), n = d.useRef(null), { height: k, ref: v } = V(), l = (e)=>{
         t.disabled || y(e);
     }, C = ()=>{
         var f;
-        const { top: e = 0 , bottom: o = 0 , left: c = 0  } = ((f = n.current) == null ? void 0 : f.getBoundingClientRect()) || {}, M = 260 + o < window.innerHeight;
+        const { top: e = 0, bottom: o = 0, left: c = 0 } = ((f = n.current) == null ? void 0 : f.getBoundingClientRect()) || {}, M = 260 + o < window.innerHeight;
         return {
             width: L,
             top: M ? o : e - k,

package/dist-es/decimal-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -95,14 +96,14 @@ const j = (n)=>{
     const s = String(n !== null && n !== void 0 ? n : "").replace(/[^.,\d]/g, ""), e = /[.,]/.exec(s), t = s.split(/[.,]/);
     return t.length === 0 ? "" : e && r > 0 ? t.shift() + e[0] + t.join("").slice(0, r) : t[0];
 }, E = (_param)=>{
-    var { inputRef: n , value: r , defaultValue: s , onChange: e , maxDecimals: t  } = _param, c = _object_without_properties(_param, [
+    var { inputRef: n, value: r, defaultValue: s, onChange: e, maxDecimals: t } = _param, c = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange",
         "maxDecimals"
     ]);
-    const { i18n: u  } = C(), f = j(u.locale), m = (o)=>String(o !== null && o !== void 0 ? o : "").replace(/[.,]/g, f), [p, d] = y.useState(s !== null && s !== void 0 ? s : ""), i = y.useRef(null), l = typeof r < "u", g = l ? r : p, S = y.useCallback((o)=>{
+    const { i18n: u } = C(), f = j(u.locale), m = (o)=>String(o !== null && o !== void 0 ? o : "").replace(/[.,]/g, f), [p, d] = y.useState(s !== null && s !== void 0 ? s : ""), i = y.useRef(null), l = typeof r < "u", g = l ? r : p, S = y.useCallback((o)=>{
         l || d(o), i.current && (e == null || e(R(i.current, o)));
     }, [
         l,
@@ -122,7 +123,7 @@ const j = (n)=>{
         ref: b(n, i)
     }));
 }, L = (_param)=>{
-    var { disabled: n , error: r , helperText: s , name: e , optional: t , validate: c , onChange: u , onChangeValue: f , onBlur: m , value: p , defaultValue: d , maxDecimals: i = 1 / 0  } = _param, l = _object_without_properties(_param, [
+    var { disabled: n, error: r, helperText: s, name: e, optional: t, validate: c, onChange: u, onChangeValue: f, onBlur: m, value: p, defaultValue: d, maxDecimals: i = 1 / 0 } = _param, l = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -136,7 +137,7 @@ const j = (n)=>{
         "defaultValue",
         "maxDecimals"
     ]);
-    const { texts: g  } = C(), o = D({
+    const { texts: g } = C(), o = D({
         name: e,
         value: p,
         defaultValue: d,

package/dist-es/desktop-container-type-context.js

@@ -1,3 +1,11 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
 import * as t from "react";
-const e = /*#__PURE__*/ t.createContext(null), o = ()=>t.useContext(e), n = e;
-export { n as default, o as useDesktopContainerType };
+const e = /*#__PURE__*/ t.createContext(null), p = ()=>t.useContext(e), a = (param)=>/* @__PURE__ */ {
+    let { children: o, value: n } = param;
+    return r(e.Provider, {
+        value: n,
+        children: o
+    });
+};
+export { a as default, p as useDesktopContainerType };

package/dist-es/dialog.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./dialog.css.ts.vanilla.css-mistica.js";
-var _ = "_3dl29lb", f = "_3dl29l6", y = "_3dl29ll _1y2v1nf6o", a = "_3dl29lj _1y2v1nfbw _1y2v1nfda", l = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfb5 _1y2v1nfeg _1y2v1nffa", o = "_3dl29la _1y2v1nf32 _1y2v1nfe1", r = "_3dl29l5 _1y2v1nfb6 _1y2v1nfba _1y2v1nfbj _1y2v1nfbp _1y2v1nfbg _1y2v1nfeg _1y2v1nffa _1y2v1nffp _1y2v1nfev _1y2v1nf3d", t = {
+var _ = "_3dl29lb", f = "_3dl29l6", y = "_3dl29ll _1y2v1nf6o", a = "_3dl29lj _1y2v1nfbw _1y2v1nfda", l = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfb5 _1y2v1nfeh _1y2v1nffb", o = "_3dl29la _1y2v1nf32 _1y2v1nfe1", r = "_3dl29l5 _1y2v1nfb6 _1y2v1nfba _1y2v1nfbj _1y2v1nfbp _1y2v1nfbg _1y2v1nfeh _1y2v1nffb _1y2v1nffq _1y2v1nfew _1y2v1nf3d", t = {
     dialog: "_3dl29ld _1y2v1nfba _1y2v1nfbg _1y2v1nfbm _1y2v1nf96 _1y2v1nfaf _1y2v1nf6u _1y2v1nf7x",
     default: "_3dl29ld _1y2v1nfba _1y2v1nfbg _1y2v1nfbm _1y2v1nf6o _1y2v1nf7x _1y2v1nf96 _1y2v1nfaf"
-}, e = "_3dl29l3 _1y2v1nfb4";
-export { _ as closedModalContent, f as closedOpactityLayer, y as dialogActions, a as dialogContent, l as iconContainer, d as modalCloseButtonContainer, o as modalContent, r as modalOpacityLayer, t as variants, e as wrapper };
+}, b = "_3dl29l3 _1y2v1nfb4";
+export { _ as closedModalContent, f as closedOpactityLayer, y as dialogActions, a as dialogContent, l as iconContainer, d as modalCloseButtonContainer, o as modalContent, r as modalOpacityLayer, t as variants, b as wrapper };

package/dist-es/dialog.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -90,7 +91,7 @@ import V from "./theme-context.js";
 import { useTheme as N } from "./hooks.js";
 import j from "./button-layout.js";
 import { Text5 as K, Text4 as T, Text3 as _ } from "./text.js";
-import { ESC as z } from "./utils/key-codes.js";
+import { ESC as z } from "./utils/keys.js";
 import B from "./box.js";
 import { isRunningAcceptanceTest as U } from "./utils/platform.js";
 import { useSetModalStateEffect as q } from "./modal-context-provider.js";
@@ -98,7 +99,7 @@ import G from "./stack.js";
 import { wrapper as J, modalOpacityLayer as Q, closedOpactityLayer as X, modalContent as Y, closedModalContent as Z, modalCloseButtonContainer as $, variants as ee, iconContainer as te, dialogContent as oe, dialogActions as ne } from "./dialog.css-mistica.js";
 import { vars as P } from "./skins/skin-contract.css-mistica.js";
 const y = (e)=>process.env.NODE_ENV !== "test" && !U(e), ae = (e)=>{
-    const { texts: t  } = N(), { className: i , title: n , message: c , icon: l , extra: a , cancelText: r = t.dialogCancelButton , acceptText: d = t.dialogAcceptButton , onCancel: h , onAccept: g , showCancel: b = !1 , destructive: u = !1  } = e, v = !!e.forceWeb, m = {
+    const { texts: t } = N(), { className: i, title: n, message: c, icon: l, extra: a, cancelText: r = t.dialogCancelButton, acceptText: d = t.dialogAcceptButton, onCancel: h, onAccept: g, showCancel: b = !1, destructive: u = !1 } = e, v = !!e.forceWeb, m = {
         onPress: g || (()=>{}),
         dataAttributes: {
             testid: "dialog-accept-button"
@@ -174,7 +175,7 @@ const y = (e)=>process.env.NODE_ENV !== "test" && !U(e), ae = (e)=>{
         ]
     });
 }, ie = (param)=>{
-    let { showCancel: e , message: t , title: i , acceptText: n , cancelText: c , onAccept: l , onCancel: a  } = param;
+    let { showCancel: e, message: t, title: i, acceptText: n, cancelText: c, onAccept: l, onCancel: a } = param;
     return e ? M({
         message: t,
         title: i,
@@ -186,7 +187,7 @@ const y = (e)=>process.env.NODE_ENV !== "test" && !U(e), ae = (e)=>{
         buttonText: n
     }).then(l);
 }, le = (param)=>{
-    let { renderNative: e , onAccept: t , onCancel: i , acceptText: n , cancelText: c , showCancel: l , message: a , title: r  } = param;
+    let { renderNative: e, onAccept: t, onCancel: i, acceptText: n, cancelText: c, showCancel: l, message: a, title: r } = param;
     const d = s.useRef(t).current, h = s.useRef(i).current;
     s.useEffect(()=>{
         e && ie({
@@ -218,9 +219,9 @@ const y = (e)=>process.env.NODE_ENV !== "test" && !U(e), ae = (e)=>{
         onAccept: e.onAccept,
         onCancel: e.onCancel
     }), null), ce = (e)=>{
-    const { platformOverrides: t  } = N(), i = s.useContext(V), n = s.useRef(process.env.NODE_ENV === "test");
+    const { platformOverrides: t } = N(), i = s.useContext(V), n = s.useRef(process.env.NODE_ENV === "test");
     if (!i) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
-    const c = !e.forceWeb && H(), { onAccept: l , isClosing: a , onCancel: r , onCloseTransitionEnd: d  } = e, h = _object_without_properties(e, [
+    const c = !e.forceWeb && H(), { onAccept: l, isClosing: a, onCancel: r, onCloseTransitionEnd: d } = e, h = _object_without_properties(e, [
         "onAccept",
         "isClosing",
         "onCancel",
@@ -241,7 +242,7 @@ const y = (e)=>process.env.NODE_ENV !== "test" && !U(e), ae = (e)=>{
         u,
         e.showClose
     ]), m = s.useCallback((f)=>{
-        f.keyCode === z && (u(), f.stopPropagation(), f.preventDefault());
+        f.key === z && (u(), f.stopPropagation(), f.preventDefault());
     }, [
         u
     ]), x = s.useCallback(()=>{
@@ -334,10 +335,10 @@ class Pe extends s.Component {
         };
     }
     render() {
-        const { isClosing: t , dialogProps: i  } = this.state;
+        const { isClosing: t, dialogProps: i } = this.state;
         let n = null;
         if (i && this.state.instanceNumber === 1) {
-            const { onCancel: c , onAccept: l  } = i, a = _object_without_properties(i, [
+            const { onCancel: c, onAccept: l } = i, a = _object_without_properties(i, [
                 "onCancel",
                 "onAccept"
             ]);
@@ -374,7 +375,7 @@ class Pe extends s.Component {
     }
 }
 const E = (param)=>{
-    let { showCancel: e , showClose: t , forceWeb: i  } = param;
+    let { showCancel: e, showClose: t, forceWeb: i } = param;
     return (n)=>{
         if (!p) throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
         p.show(_object_spread({

package/dist-es/divider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e } from "react/jsx-runtime";
 import { useIsInverseVariant as s } from "./theme-variant-context.js";
 import { variants as i } from "./divider.css-mistica.js";

package/dist-es/double-field.js

@@ -3,7 +3,7 @@ import * as i from "react";
 import n from "./box.js";
 import { variants as m } from "./double-field.css-mistica.js";
 const u = (param)=>{
-    let { children: o , fullWidth: s , layout: l  } = param;
+    let { children: o, fullWidth: s, layout: l } = param;
     let e, t;
     l === "40/60" ? (t = "40%", e = "60%") : l === "60/40" ? (t = "60%", e = "40%") : (t = "50%", e = "50%");
     const h = ()=>{

package/dist-es/email-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -82,7 +83,7 @@ import { useFieldProps as M } from "./form-context.js";
 import { useTheme as g } from "./hooks.js";
 import { TextFieldBaseAutosuggest as y } from "./text-field-base.js";
 const A = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, I = (_param)=>{
-    var { disabled: o , error: i , helperText: m , name: n , optional: s , validate: r , onChange: l , onChangeValue: f , onBlur: u , value: c , autoComplete: a = "email" , defaultValue: d  } = _param, E = _object_without_properties(_param, [
+    var { disabled: o, error: i, helperText: m, name: n, optional: s, validate: r, onChange: l, onChangeValue: f, onBlur: u, value: c, autoComplete: a = "email", defaultValue: d } = _param, E = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -96,7 +97,7 @@ const A = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, I = (_param)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: t  } = g(), p = M({
+    const { texts: t } = g(), p = M({
         name: n,
         value: c,
         defaultValue: d,

package/dist-es/empty-state-card.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e, jsxs as p } from "react/jsx-runtime";
 import c from "./box.js";
 import { Boxed as g } from "./boxed.js";
@@ -8,9 +9,9 @@ import T from "./button-group.js";
 import { container as B, iconContainer as C, image as k } from "./empty-state-card.css-mistica.js";
 import { vars as v } from "./skins/skin-contract.css-mistica.js";
 const z = (param)=>{
-    let { title: n , description: h , button: r , secondaryButton: i , buttonLink: t , icon: o , imageUrl: a , "aria-label": f , dataAttributes: x  } = param;
+    let { title: n, description: h, button: r, secondaryButton: i, buttonLink: t, icon: o, imageUrl: a, "aria-label": f, dataAttributes: x } = param;
     var s;
-    const { isTabletOrSmaller: l  } = u(), { textPresets: S  } = y();
+    const { isTabletOrSmaller: l } = u(), { textPresets: S } = y();
     let m;
     return a && (m = /* @__PURE__ */ e("img", {
         className: k,

package/dist-es/empty-state.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -51,71 +52,71 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { assignInlineVars as y } from "@vanilla-extract/dynamic";
-import x from "classnames";
-import { useIsInverseVariant as k } from "./theme-variant-context.js";
-import { ButtonPrimary as I } from "./button.js";
+import y from "classnames";
+import { useIsInverseVariant as x } from "./theme-variant-context.js";
+import { ButtonPrimary as k } from "./button.js";
 import { useTheme as B } from "./hooks.js";
-import m from "./stack.js";
-import { Text6 as N, Text3 as C } from "./text.js";
-import S from "./button-group.js";
-import { container as E, inverseBorder as T, vars as V, contentVariants as l, iconContainer as $, largeImageContainer as b, largeImage as j, smallImage as A } from "./empty-state.css-mistica.js";
+import n from "./stack.js";
+import { Text6 as C, Text3 as I } from "./text.js";
+import N from "./button-group.js";
+import { container as S, inverseBorder as E, vars as T, contentVariants as l, iconContainer as V, largeImageContainer as $, largeImage as b, smallImage as j } from "./empty-state.css-mistica.js";
 import { vars as a } from "./skins/skin-contract.css-mistica.js";
-import { AspectRatioContainer as D } from "./utils/aspect-ratio-support.js";
-import { getPrefixedDataAttributes as P } from "./utils/dom.js";
-import { sprinkles as R } from "./sprinkles.css-mistica.js";
+import { AspectRatioContainer as A } from "./utils/aspect-ratio-support.js";
+import { getPrefixedDataAttributes as D } from "./utils/dom.js";
+import { sprinkles as P } from "./sprinkles.css-mistica.js";
+import { applyCssVars as R } from "./utils/css.js";
 const G = (param)=>{
-    let { title: c , description: d , button: e , buttonLink: p , largeImageUrl: o , imageUrl: i , icon: n , "aria-label": f , dataAttributes: g  } = param;
-    const { isDarkMode: v  } = B(), s = k(), h = i ? /* @__PURE__ */ r("img", {
-        className: A,
+    let { title: c, description: p, button: e, buttonLink: d, largeImageUrl: o, imageUrl: i, icon: m, "aria-label": f, dataAttributes: g } = param;
+    const { isDarkMode: v } = B(), s = x(), h = i ? /* @__PURE__ */ r("img", {
+        className: j,
         alt: "",
         src: i
-    }) : void 0, u = _object_spread_props(_object_spread({}, (e == null ? void 0 : e.type) === I ? {
+    }) : void 0, u = _object_spread_props(_object_spread({}, (e == null ? void 0 : e.type) === k ? {
         primaryButton: e
     } : {
         secondaryButton: e
     }), {
-        link: p
+        link: d
     });
     return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
-        className: x(E, s ? T : R({
+        className: y(S, s ? E : P({
             border: "regular"
         })),
-        style: y({
-            [V.backgroundColor]: s && !v ? a.colors.backgroundBrand : a.colors.backgroundContainer
+        style: R({
+            [T.backgroundColor]: s && !v ? a.colors.backgroundBrand : a.colors.backgroundContainer
         }),
         "aria-label": f,
         role: "region"
-    }, P(g, "EmptyState")), {
+    }, D(g, "EmptyState")), {
         children: [
             /* @__PURE__ */ r("div", {
                 style: {
                     flex: 1
                 },
-                children: /* @__PURE__ */ t(m, {
+                children: /* @__PURE__ */ t(n, {
                     space: 24,
                     className: o ? l.largeImage : l.default,
                     children: [
-                        h !== null && h !== void 0 ? h : n && /* @__PURE__ */ r("div", {
-                            className: $,
-                            children: n
+                        h !== null && h !== void 0 ? h : m && /* @__PURE__ */ r("div", {
+                            className: V,
+                            children: m
                         }),
-                        /* @__PURE__ */ t(m, {
+                        /* @__PURE__ */ t(n, {
                             space: 16,
                             children: [
-                                /* @__PURE__ */ r(N, {
+                                /* @__PURE__ */ r(C, {
                                     as: "h1",
                                     children: c
                                 }),
-                                /* @__PURE__ */ r(C, {
+                                /* @__PURE__ */ r(I, {
                                     regular: !0,
                                     as: "p",
                                     color: s ? a.colors.inverse : a.colors.textSecondary,
-                                    children: d
+                                    children: p
                                 })
                             ]
                         }),
-                        e && /* @__PURE__ */ r(S, _object_spread({}, u))
+                        e && /* @__PURE__ */ r(N, _object_spread({}, u))
                     ]
                 })
             }),
@@ -124,12 +125,12 @@ const G = (param)=>{
                     flex: 1,
                     position: "relative"
                 },
-                children: o && /* @__PURE__ */ r(D, {
+                children: o && /* @__PURE__ */ r(A, {
                     aspectRatio: 16 / 9,
-                    className: b,
+                    className: $,
                     height: "100%",
                     children: /* @__PURE__ */ r("div", {
-                        className: j,
+                        className: b,
                         style: {
                             backgroundImage: `url(${o})`
                         }

package/dist-es/fade-in.js

@@ -54,7 +54,7 @@ import { jsx as o } from "react/jsx-runtime";
 import { wrapper as r } from "./fade-in.css-mistica.js";
 import { getPrefixedDataAttributes as m } from "./utils/dom.js";
 const s = "0.3s", f = (param)=>/* @__PURE__ */ {
-    let { children: i , className: e = "" , duration: t = s , delay: a = "0" , dataAttributes: n  } = param;
+    let { children: i, className: e = "", duration: t = s, delay: a = "0", dataAttributes: n } = param;
     return o("div", _object_spread_props(_object_spread({}, m(n, "FadeIn")), {
         className: `${r} ${e}`,
         style: {