@telefonica/mistica 14.33.0 → 14.35.0

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

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -49,7 +50,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)) {
@@ -152,7 +155,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",
@@ -182,7 +185,7 @@ const W = (r)=>{
     animationTarget: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcreditcardvisaregular.default, {}),
     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 {
@@ -203,8 +206,8 @@ const W = (r)=>{
         isAnimating: !1
     }) : r;
 }, rr = (param)=>{
-    let { value: r  } = param;
-    const [{ showBackface: i , animationTarget: t , isAnimating: e  }, a] = _react.useReducer(v, Z);
+    let { value: r } = param;
+    const [{ showBackface: i, animationTarget: t, isAnimating: e }, a] = _react.useReducer(v, Z);
     return _react.useEffect(()=>{
         a({
             type: "INPUT",
@@ -234,11 +237,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",
@@ -253,7 +256,7 @@ const W = (r)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: E  } = (0, _hooks.useTheme)(), { jumpToNext: R , rawValues: F , setFormError: S  } = (0, _formcontext.useForm)(), h = (n, C)=>{
+    const { texts: E } = (0, _hooks.useTheme)(), { jumpToNext: R, rawValues: F, setFormError: S } = (0, _formcontext.useForm)(), h = (n, C)=>{
         const s = E.formCreditCardNumberError;
         return n ? (0, _creditcard.isAmericanExpress)(n) && !u.americanExpress || (0, _creditcard.isVisa)(n) && !u.visa || (0, _creditcard.isMasterCard)(n) && !u.masterCard || !(0, _creditcard.isValidCreditCardNumber)(n) || (0, _creditcard.getCreditCardNumberLength)(n) !== n.length ? s : c == null ? void 0 : c(n, C) : a ? "" : E.formFieldErrorIsMandatory;
     }, b = (n)=>n.replace(/\s/g, ""), k = (0, _formcontext.useFieldProps)({

package/dist/cvv-field.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -109,8 +110,8 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const O = (param)=>{
-    let { acceptedCards: t  } = param;
-    const { texts: e  } = (0, _hooks.useTheme)();
+    let { acceptedCards: t } = param;
+    const { texts: e } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
             padding: 8,
@@ -149,11 +150,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",
@@ -169,7 +170,7 @@ const O = (param)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: l  } = (0, _hooks.useTheme)(), { setFormError: z , jumpToNext: B  } = (0, _formcontext.useForm)(), p = (o, i)=>o ? o.length !== m ? l.formCreditCardCvvError : s == null ? void 0 : s(o, i) : f ? "" : l.formFieldErrorIsMandatory, a = (o)=>o, u = (0, _formcontext.useFieldProps)({
+    const { texts: l } = (0, _hooks.useTheme)(), { setFormError: z, jumpToNext: B } = (0, _formcontext.useForm)(), p = (o, i)=>o ? o.length !== m ? l.formCreditCardCvvError : s == null ? void 0 : s(o, i) : f ? "" : l.formFieldErrorIsMandatory, a = (o)=>o, u = (0, _formcontext.useFieldProps)({
         name: n,
         value: E,
         defaultValue: V,
@@ -201,7 +202,6 @@ const O = (param)=>{
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
                 acceptedCards: y
             }),
-            targetLabel: l.formCreditCardCvvTooltipVisaMcButton,
             target: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     width: 16,
@@ -218,6 +218,7 @@ const O = (param)=>{
                         // (40 - 16) / 2
                         top: -12
                     },
+                    "aria-label": l.formCreditCardCvvTooltipVisaMcButton,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconinformationregular.default, {
                         size: 16,
                         color: _skincontractcssmistica.vars.colors.neutralMedium

package/dist/date-field.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -44,7 +45,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)) {
@@ -142,7 +145,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const A = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* 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",
@@ -157,7 +160,7 @@ const A = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "min",
         "max"
     ]);
-    const k = (e)=>e, I = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("date"), []), { texts: T  } = (0, _hooks.useTheme)(), f = (e)=>!(o && e && e < (0, _time.getLocalDateString)(o) || i && e && e > (0, _time.getLocalDateString)(i)), u = (0, _formcontext.useFieldProps)({
+    const k = (e)=>e, I = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("date"), []), { texts: T } = (0, _hooks.useTheme)(), f = (e)=>!(o && e && e < (0, _time.getLocalDateString)(o) || i && e && e > (0, _time.getLocalDateString)(i)), u = (0, _formcontext.useFieldProps)({
         name: y,
         value: S,
         defaultValue: h,

package/dist/date-time-field.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -44,7 +45,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)) {
@@ -142,11 +145,11 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const j = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* 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",
@@ -161,7 +164,7 @@ const j = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/
         "min",
         "max"
     ]);
-    const u = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("datetime-local"), []), d = (e)=>u ? e : e.replace(/\s/, "T"), { texts: v  } = (0, _hooks.useTheme)(), c = (e)=>{
+    const u = _react.useMemo(()=>(0, _platform.isFirefox)() ? !1 : (0, _dom.isInputTypeSupported)("datetime-local"), []), d = (e)=>u ? e : e.replace(/\s/, "T"), { texts: v } = (0, _hooks.useTheme)(), c = (e)=>{
         const t = d(e);
         return !(i && t && t < (0, _time.getLocalDateTimeString)(i) || s && t && t > (0, _time.getLocalDateTimeString)(s));
     }, p = (0, _formcontext.useFieldProps)({

package/dist/date-time-picker.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -51,7 +52,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -166,17 +169,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] = _react.useState(!1), { texts: x , i18n: { locale: b  }  } = (0, _hooks.useTheme)(), n = _react.useRef(null), { height: k , ref: v  } = (0, _hooks.useElementDimensions)(), l = (e)=>{
+    const [m, y] = _react.useState(!1), { texts: x, i18n: { locale: b } } = (0, _hooks.useTheme)(), n = _react.useRef(null), { height: k, ref: v } = (0, _hooks.useElementDimensions)(), 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: _textfieldcomponentscssmistica.DEFAULT_WIDTH,
             top: M ? o : e - k,

package/dist/decimal-field.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -45,7 +46,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -152,14 +155,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  } = (0, _hooks.useTheme)(), f = j(u.locale), m = (o)=>String(o !== null && o !== void 0 ? o : "").replace(/[.,]/g, f), [p, d] = _react.useState(s !== null && s !== void 0 ? s : ""), i = _react.useRef(null), l = typeof r < "u", g = l ? r : p, S = _react.useCallback((o)=>{
+    const { i18n: u } = (0, _hooks.useTheme)(), f = j(u.locale), m = (o)=>String(o !== null && o !== void 0 ? o : "").replace(/[.,]/g, f), [p, d] = _react.useState(s !== null && s !== void 0 ? s : ""), i = _react.useRef(null), l = typeof r < "u", g = l ? r : p, S = _react.useCallback((o)=>{
         l || d(o), i.current && (e == null || e((0, _dom.createChangeEvent)(i.current, o)));
     }, [
         l,
@@ -179,7 +182,7 @@ const j = (n)=>{
         ref: (0, _common.combineRefs)(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",
@@ -193,7 +196,7 @@ const j = (n)=>{
         "defaultValue",
         "maxDecimals"
     ]);
-    const { texts: g  } = (0, _hooks.useTheme)(), o = (0, _formcontext.useFieldProps)({
+    const { texts: g } = (0, _hooks.useTheme)(), o = (0, _formcontext.useFieldProps)({
         name: e,
         value: p,
         defaultValue: d,

package/dist/desktop-container-type-context.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
 export type DesktopContainerType = 'small' | 'medium' | 'large';
-declare const DesktopContainerTypeContext: React.Context<DesktopContainerType | null>;
 export declare const useDesktopContainerType: () => DesktopContainerType | null;
-export default DesktopContainerTypeContext;
+declare const _default: ({ children, value }: {
+    children: React.ReactNode;
+    value: DesktopContainerType;
+}) => JSX.Element;
+export default _default;

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

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -10,12 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     default: function() {
-        return n;
+        return a;
     },
     useDesktopContainerType: function() {
-        return o;
+        return p;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -38,7 +40,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)) {
@@ -56,4 +60,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const e = /*#__PURE__*/ _react.createContext(null), o = ()=>_react.useContext(e), n = e;
+const e = /*#__PURE__*/ _react.createContext(null), p = ()=>_react.useContext(e), a = (param)=>/* @__PURE__ */ {
+    let { children: o, value: n } = param;
+    return (0, _jsxruntime.jsx)(e.Provider, {
+        value: n,
+        children: o
+    });
+};

package/dist/dialog.css-mistica.js

@@ -37,12 +37,12 @@ _export(exports, {
         return t;
     },
     wrapper: function() {
-        return e;
+        return b;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";
+}, b = "_3dl29l3 _1y2v1nfb4";

package/dist/dialog.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -35,7 +36,7 @@ const _themecontext = /*#__PURE__*/ _interop_require_default(require("./theme-co
 const _hooks = require("./hooks.js");
 const _buttonlayout = /*#__PURE__*/ _interop_require_default(require("./button-layout.js"));
 const _text = require("./text.js");
-const _keycodes = require("./utils/key-codes.js");
+const _keys = require("./utils/keys.js");
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _platform = require("./utils/platform.js");
 const _modalcontextprovider = require("./modal-context-provider.js");
@@ -68,7 +69,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)) {
@@ -166,7 +169,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 const y = (e)=>process.env.NODE_ENV !== "test" && !(0, _platform.isRunningAcceptanceTest)(e), ae = (e)=>{
-    const { texts: t  } = (0, _hooks.useTheme)(), { 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 } = (0, _hooks.useTheme)(), { 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"
@@ -242,7 +245,7 @@ const y = (e)=>process.env.NODE_ENV !== "test" && !(0, _platform.isRunningAccept
         ]
     });
 }, 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 ? (0, _webviewbridge.nativeConfirm)({
         message: t,
         title: i,
@@ -254,7 +257,7 @@ const y = (e)=>process.env.NODE_ENV !== "test" && !(0, _platform.isRunningAccept
         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 = _react.useRef(t).current, h = _react.useRef(i).current;
     _react.useEffect(()=>{
         e && ie({
@@ -286,9 +289,9 @@ const y = (e)=>process.env.NODE_ENV !== "test" && !(0, _platform.isRunningAccept
         onAccept: e.onAccept,
         onCancel: e.onCancel
     }), null), ce = (e)=>{
-    const { platformOverrides: t  } = (0, _hooks.useTheme)(), i = _react.useContext(_themecontext.default), n = _react.useRef(process.env.NODE_ENV === "test");
+    const { platformOverrides: t } = (0, _hooks.useTheme)(), i = _react.useContext(_themecontext.default), n = _react.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 && (0, _webviewbridge.isWebViewBridgeAvailable)(), { onAccept: l , isClosing: a , onCancel: r , onCloseTransitionEnd: d  } = e, h = _object_without_properties(e, [
+    const c = !e.forceWeb && (0, _webviewbridge.isWebViewBridgeAvailable)(), { onAccept: l, isClosing: a, onCancel: r, onCloseTransitionEnd: d } = e, h = _object_without_properties(e, [
         "onAccept",
         "isClosing",
         "onCancel",
@@ -309,7 +312,7 @@ const y = (e)=>process.env.NODE_ENV !== "test" && !(0, _platform.isRunningAccept
         u,
         e.showClose
     ]), m = _react.useCallback((f)=>{
-        f.keyCode === _keycodes.ESC && (u(), f.stopPropagation(), f.preventDefault());
+        f.key === _keys.ESC && (u(), f.stopPropagation(), f.preventDefault());
     }, [
         u
     ]), x = _react.useCallback(()=>{
@@ -402,10 +405,10 @@ class Pe extends _react.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"
             ]);
@@ -442,7 +445,7 @@ class Pe extends _react.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/divider.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/dist/double-field.js

@@ -38,7 +38,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)) {
@@ -57,7 +59,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 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/email-field.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -92,7 +93,7 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 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",
@@ -106,7 +107,7 @@ const A = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, I = (_param)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: t  } = (0, _hooks.useTheme)(), p = (0, _formcontext.useFieldProps)({
+    const { texts: t } = (0, _hooks.useTheme)(), p = (0, _formcontext.useFieldProps)({
         name: n,
         value: c,
         defaultValue: d,

package/dist/empty-state-card.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -23,9 +24,9 @@ function _interop_require_default(obj) {
     };
 }
 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  } = (0, _hooks.useScreenSize)(), { textPresets: S  } = (0, _hooks.useTheme)();
+    const { isTabletOrSmaller: l } = (0, _hooks.useScreenSize)(), { textPresets: S } = (0, _hooks.useTheme)();
     let m;
     return a && (m = /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
         className: _emptystatecardcssmistica.image,

package/dist/empty-state.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -9,7 +10,6 @@ Object.defineProperty(exports, "default", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _dynamic = require("@vanilla-extract/dynamic");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _themevariantcontext = require("./theme-variant-context.js");
 const _button = require("./button.js");
@@ -22,6 +22,7 @@ const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _aspectratiosupport = require("./utils/aspect-ratio-support.js");
 const _dom = require("./utils/dom.js");
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -80,8 +81,8 @@ function _object_spread_props(target, source) {
     return target;
 }
 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  } = (0, _hooks.useTheme)(), s = (0, _themevariantcontext.useIsInverseVariant)(), h = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
+    let { title: c, description: p, button: e, buttonLink: d, largeImageUrl: o, imageUrl: i, icon: m, "aria-label": f, dataAttributes: g } = param;
+    const { isDarkMode: v } = (0, _hooks.useTheme)(), s = (0, _themevariantcontext.useIsInverseVariant)(), h = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
         className: _emptystatecssmistica.smallImage,
         alt: "",
         src: i
@@ -90,13 +91,13 @@ const G = (param)=>{
     } : {
         secondaryButton: e
     }), {
-        link: p
+        link: d
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_emptystatecssmistica.container, s ? _emptystatecssmistica.inverseBorder : (0, _sprinklescssmistica.sprinkles)({
             border: "regular"
         })),
-        style: (0, _dynamic.assignInlineVars)({
+        style: (0, _css.applyCssVars)({
             [_emptystatecssmistica.vars.backgroundColor]: s && !v ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.backgroundContainer
         }),
         "aria-label": f,
@@ -111,9 +112,9 @@ const G = (param)=>{
                     space: 24,
                     className: o ? _emptystatecssmistica.contentVariants.largeImage : _emptystatecssmistica.contentVariants.default,
                     children: [
-                        h !== null && h !== void 0 ? h : n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        h !== null && h !== void 0 ? h : m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _emptystatecssmistica.iconContainer,
-                            children: n
+                            children: m
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 16,
@@ -126,7 +127,7 @@ const G = (param)=>{
                                     regular: !0,
                                     as: "p",
                                     color: s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.textSecondary,
-                                    children: d
+                                    children: p
                                 })
                             ]
                         }),

package/dist/fade-in.js

@@ -64,7 +64,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 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 (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(n, "FadeIn")), {
         className: `${_fadeincssmistica.wrapper} ${e}`,
         style: {