@telefonica/mistica 14.33.0 → 14.34.0

package/dist-es/inline.js

@@ -53,26 +53,26 @@ function _object_spread_props(target, source) {
 import { jsx as i } from "react/jsx-runtime";
 import * as d from "react";
 import u from "classnames";
-import { assignInlineVars as b } from "@vanilla-extract/dynamic";
 import { sprinkles as y } from "./sprinkles.css-mistica.js";
-import { getPrefixedDataAttributes as h } from "./utils/dom.js";
-import { wrap as c, fullWidth as v, noFullWidth as x, justifyVariants as W, vars as g } from "./inline.css-mistica.js";
-const I = (param)=>{
-    let { space: r , className: e , children: l , role: o , alignItems: n = "stretch" , "aria-labelledby": a , fullWidth: s , wrap: m , dataAttributes: f  } = param;
-    const p = s || typeof r == "string";
+import { getPrefixedDataAttributes as b } from "./utils/dom.js";
+import { wrap as h, fullWidth as c, noFullWidth as v, justifyVariants as x, vars as W } from "./inline.css-mistica.js";
+import { applyCssVars as g } from "./utils/css.js";
+const j = (param)=>{
+    let { space: r, className: l, children: e, role: o, alignItems: a = "stretch", "aria-labelledby": s, fullWidth: m, wrap: n, dataAttributes: f } = param;
+    const p = m || typeof r == "string";
     return /* @__PURE__ */ i("div", _object_spread_props(_object_spread({
-        className: u(e, y({
-            alignItems: n
-        }), m ? c : p ? v : x, typeof r != "number" && W[r]),
-        style: typeof r == "number" ? b({
-            [g.space]: `${r}px`
+        className: u(l, y({
+            alignItems: a
+        }), n ? h : p ? c : v, typeof r != "number" && x[r]),
+        style: typeof r == "number" ? g({
+            [W.space]: `${r}px`
         }) : void 0,
         role: o,
-        "aria-labelledby": a
-    }, h(f)), {
-        children: d.Children.map(l, (t)=>t || t === 0 ? /* @__PURE__ */ i("div", {
+        "aria-labelledby": s
+    }, b(f)), {
+        children: d.Children.map(e, (t)=>t || t === 0 ? /* @__PURE__ */ i("div", {
                 children: t
             }) : null)
     }));
-}, A = I;
-export { A as default };
+}, k = j;
+export { k as default };

package/dist-es/integer-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 x } from "./form-context.js";
 import { useTheme as F } from "./hooks.js";
 import { TextFieldBaseAutosuggest as v } from "./text-field-base.js";
 const T = (_param)=>{
-    var { inputRef: u , value: r , defaultValue: n , type: i = "text"  } = _param, o = _object_without_properties(_param, [
+    var { inputRef: u, value: r, defaultValue: n, type: i = "text" } = _param, o = _object_without_properties(_param, [
         "inputRef",
         "value",
         "defaultValue",
@@ -101,7 +102,7 @@ const T = (_param)=>{
         defaultValue: n === void 0 ? void 0 : t(n)
     }));
 }, h = (_param)=>{
-    var { disabled: u , error: r , helperText: n , name: i , optional: o , validate: t , onChange: c , onChangeValue: e , onBlur: m , value: p , defaultValue: a  } = _param, l = _object_without_properties(_param, [
+    var { disabled: u, error: r, helperText: n, name: i, optional: o, validate: t, onChange: c, onChangeValue: e, onBlur: m, value: p, defaultValue: a } = _param, l = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -114,7 +115,7 @@ const T = (_param)=>{
         "value",
         "defaultValue"
     ]);
-    const { texts: f  } = F(), g = x({
+    const { texts: f } = F(), g = x({
         name: i,
         value: p,
         defaultValue: a,

package/dist-es/list.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -106,7 +107,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         },
         children: e
     }) : e, ye = (param)=>{
-    let { withChevron: e , headline: n , title: r , titleLinesMax: o , subtitle: s , subtitleLinesMax: x , description: d , descriptionLinesMax: W , detail: m , asset: V , type: g = "basic" , badge: A , right: E , extra: X , labelId: l , disabled: v  } = param;
+    let { withChevron: e, headline: n, title: r, titleLinesMax: o, subtitle: s, subtitleLinesMax: x, description: d, descriptionLinesMax: W, detail: m, asset: V, type: g = "basic", badge: A, right: E, extra: X, labelId: l, disabled: v } = param;
     const h = p(), a = [
         n,
         r,
@@ -232,7 +233,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         ]
     });
 }, Re = (param)=>{
-    let { value: e , defaultValue: n , onChange: r  } = param;
+    let { value: e, defaultValue: n, onChange: r } = param;
     const o = e !== void 0, [s, x] = P.useState(!!n), d = ()=>{
         o || x(!s), r && r(o ? !e : !s);
     };
@@ -244,8 +245,8 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         d
     ];
 }, Ce = (e)=>e.switch !== void 0, Ne = (e)=>e.checkbox !== void 0, ke = (e)=>e.radioValue !== void 0, ee = /*#__PURE__*/ P.forwardRef((e, n)=>{
-    const r = ae(), o = p(), { asset: s , headline: x , title: d , titleLinesMax: W , subtitle: m , subtitleLinesMax: V , description: g , descriptionLinesMax: A , detail: E , badge: X , role: l , extra: v , dataAttributes: h  } = e, F = ce(), a = e.disabled || e.radioValue !== void 0 && F.disabled, f = !a && !o, w = !a && o, [Y, q] = Re(e.switch || e.checkbox || {}), y = (param)=>/* @__PURE__ */ {
-        let { type: c , right: b , labelId: D  } = param;
+    const r = ae(), o = p(), { asset: s, headline: x, title: d, titleLinesMax: W, subtitle: m, subtitleLinesMax: V, description: g, descriptionLinesMax: A, detail: E, badge: X, role: l, extra: v, dataAttributes: h } = e, F = ce(), a = e.disabled || e.radioValue !== void 0 && F.disabled, f = !a && !o, w = !a && o, [Y, q] = Re(e.switch || e.checkbox || {}), y = (param)=>/* @__PURE__ */ {
+        let { type: c, right: b, labelId: D } = param;
         return t(ye, {
             asset: s,
             headline: x,
@@ -348,7 +349,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                     "aria-labelledby": r,
                     onChange: q,
                     render: (param)=>/* @__PURE__ */ {
-                        let { controlElement: H  } = param;
+                        let { controlElement: H } = param;
                         return t("div", {
                             className: xe,
                             children: H
@@ -369,7 +370,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 checked: Y,
                 onChange: q,
                 render: (param)=>/* @__PURE__ */ {
-                    let { controlElement: H , labelId: te  } = param;
+                    let { controlElement: H, labelId: te } = param;
                     return t(u, {
                         paddingX: 16,
                         role: l,
@@ -410,7 +411,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 value: e.radioValue,
                 "aria-labelledby": r,
                 render: (param)=>/* @__PURE__ */ {
-                    let { controlElement: c  } = param;
+                    let { controlElement: c } = param;
                     return t(L, {
                         space: "around",
                         children: /* @__PURE__ */ t(u, {
@@ -434,7 +435,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             value: e.radioValue,
             "aria-labelledby": r,
             render: (param)=>/* @__PURE__ */ {
-                let { controlElement: c  } = param;
+                let { controlElement: c } = param;
                 return t(u, {
                     paddingX: 16,
                     children: y({
@@ -461,7 +462,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         })
     });
 }), qe = /*#__PURE__*/ P.forwardRef((_param, r)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, n = _object_without_properties(_param, [
+    var { dataAttributes: e } = _param, n = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return t(ee, _object_spread_props(_object_spread({}, n), {
@@ -471,7 +472,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         }, e)
     }));
 }), ze = (param)=>{
-    let { children: e , ariaLabelledby: n , role: r , dataAttributes: o  } = param;
+    let { children: e, ariaLabelledby: n, role: r, dataAttributes: o } = param;
     const s = P.Children.count(e) - 1;
     return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
         role: r,
@@ -488,7 +489,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             }, d))
     }));
 }, Ge = /*#__PURE__*/ P.forwardRef((_param, r)=>/* @__PURE__ */ {
-    var { dataAttributes: e  } = _param, n = _object_without_properties(_param, [
+    var { dataAttributes: e } = _param, n = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return t(de, {
@@ -500,7 +501,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         children: /* @__PURE__ */ t(ee, _object_spread({}, n))
     });
 }), Je = (param)=>/* @__PURE__ */ {
-    let { children: e , ariaLabelledby: n , role: r , dataAttributes: o  } = param;
+    let { children: e, ariaLabelledby: n, role: r, dataAttributes: o } = param;
     return t(L, {
         space: 16,
         role: r,

package/dist-es/loading-bar.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -57,7 +58,7 @@ import { TRANSITION_DURATION_MS as o, enter as a, enterActive as s, exit as m, e
 import { getPrefixedDataAttributes as g } from "./utils/dom.js";
 import { isRunningAcceptanceTest as u } from "./utils/platform.js";
 const x = (param)=>/* @__PURE__ */ {
-    let { visible: r , dataAttributes: t  } = param;
+    let { visible: r, dataAttributes: t } = param;
     return e(i, {
         in: r,
         timeout: u() ? 0 : o,

package/dist-es/logo.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -89,8 +90,8 @@ import { getTelefonicaSkin as v } from "./skins/telefonica.js";
 import { getPrefixedDataAttributes as f } from "./utils/dom.js";
 import { logoContainer as Z } from "./logo.css-mistica.js";
 const g = (param)=>{
-    let { size: t , type: a  } = param;
-    const { isDarkMode: e  } = n(), { colors: V  } = L(), H = M() && !e ? V.inverse : V.brand;
+    let { size: t, type: a } = param;
+    const { isDarkMode: e } = n(), { colors: V } = L(), H = M() && !e ? V.inverse : V.brand;
     return a === "vertical" ? /* @__PURE__ */ r("svg", {
         height: t,
         viewBox: "0 0 72 72",
@@ -166,8 +167,8 @@ const g = (param)=>{
         })
     });
 }, m = (param)=>{
-    let { size: t , type: a  } = param;
-    const { isDarkMode: e  } = n(), V = M(), { colors: i  } = c(), H = V && !e ? i.inverse : i.brand;
+    let { size: t, type: a } = param;
+    const { isDarkMode: e } = n(), V = M(), { colors: i } = c(), H = V && !e ? i.inverse : i.brand;
     return a === "vertical" ? /* @__PURE__ */ r("svg", {
         height: t,
         viewBox: "0 0 72 72",
@@ -225,8 +226,8 @@ const g = (param)=>{
         })
     });
 }, k = (param)=>{
-    let { size: t , type: a  } = param;
-    const { isDarkMode: e  } = n(), V = M(), { colors: i  } = o(), H = V && !e ? i.inverse : i.brand;
+    let { size: t, type: a } = param;
+    const { isDarkMode: e } = n(), V = M(), { colors: i } = o(), H = V && !e ? i.inverse : i.brand;
     return a === "vertical" ? /* @__PURE__ */ C("svg", {
         height: t,
         viewBox: "0 0 72 72",
@@ -250,8 +251,8 @@ const g = (param)=>{
         })
     });
 }, u = (param)=>{
-    let { size: t , type: a  } = param;
-    const { isDarkMode: e  } = n(), V = M(), { colors: i  } = v(), H = V && !e ? i.inverse : i.brand;
+    let { size: t, type: a } = param;
+    const { isDarkMode: e } = n(), V = M(), { colors: i } = v(), H = V && !e ? i.inverse : i.brand;
     return a === "vertical" ? /* @__PURE__ */ r("svg", {
         height: t,
         viewBox: "0 0 73 72",
@@ -425,8 +426,8 @@ const g = (param)=>{
         ]
     });
 }, w = (param)=>{
-    let { size: t , type: a  } = param;
-    const { isDarkMode: e  } = n(), V = M(), { colors: i  } = l(), H = V && !e ? i.inverse : i.brand, s = V && !e ? i.inverse : i.promo;
+    let { size: t, type: a } = param;
+    const { isDarkMode: e } = n(), V = M(), { colors: i } = l(), H = V && !e ? i.inverse : i.brand, s = V && !e ? i.inverse : i.promo;
     return a === "vertical" ? /* @__PURE__ */ r("svg", {
         height: t,
         viewBox: "0 0 73 72",
@@ -477,7 +478,7 @@ const g = (param)=>{
         ]
     });
 }, h = (param)=>{
-    let { size: t = 48 , skinName: a , type: e = "isotype"  } = param;
+    let { size: t = 48, skinName: a, type: e = "isotype" } = param;
     switch(a){
         case "Movistar":
             return /* @__PURE__ */ C(g, {
@@ -542,11 +543,11 @@ const g = (param)=>{
         children: t.children
     }));
 }, W = (_param)=>{
-    var { size: t , type: a = "isotype"  } = _param, e = _object_without_properties(_param, [
+    var { size: t, type: a = "isotype" } = _param, e = _object_without_properties(_param, [
         "size",
         "type"
     ]);
-    const { skinName: V  } = n();
+    const { skinName: V } = n();
     return /* @__PURE__ */ C(d, _object_spread_props(_object_spread({}, e), {
         children: /* @__PURE__ */ C(h, {
             skinName: V,
@@ -555,7 +556,7 @@ const g = (param)=>{
         })
     }));
 }, b = (_param)=>/* @__PURE__ */ {
-    var { type: t = "isotype" , size: a  } = _param, e = _object_without_properties(_param, [
+    var { type: t = "isotype", size: a } = _param, e = _object_without_properties(_param, [
         "type",
         "size"
     ]);
@@ -567,7 +568,7 @@ const g = (param)=>{
         })
     }));
 }, q = (_param)=>/* @__PURE__ */ {
-    var { size: t , type: a = "isotype"  } = _param, e = _object_without_properties(_param, [
+    var { size: t, type: a = "isotype" } = _param, e = _object_without_properties(_param, [
         "size",
         "type"
     ]);
@@ -579,7 +580,7 @@ const g = (param)=>{
         })
     }));
 }, F = (_param)=>/* @__PURE__ */ {
-    var { size: t , type: a = "isotype"  } = _param, e = _object_without_properties(_param, [
+    var { size: t, type: a = "isotype" } = _param, e = _object_without_properties(_param, [
         "size",
         "type"
     ]);
@@ -591,7 +592,7 @@ const g = (param)=>{
         })
     }));
 }, G = (_param)=>/* @__PURE__ */ {
-    var { size: t , type: a = "isotype"  } = _param, e = _object_without_properties(_param, [
+    var { size: t, type: a = "isotype" } = _param, e = _object_without_properties(_param, [
         "size",
         "type"
     ]);
@@ -603,7 +604,7 @@ const g = (param)=>{
         })
     }));
 }, J = (_param)=>/* @__PURE__ */ {
-    var { size: t , type: a = "isotype"  } = _param, e = _object_without_properties(_param, [
+    var { size: t, type: a = "isotype" } = _param, e = _object_without_properties(_param, [
         "size",
         "type"
     ]);

package/dist-es/master-detail-layout.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as t } from "react/jsx-runtime";
 import s from "./grid-layout.js";
 import { useScreenSize as l } from "./hooks.js";
 import o from "./responsive-layout.js";
 const m = (param)=>{
-    let { isOpen: i , master: r , detail: e  } = param;
-    const { isTabletOrSmaller: a  } = l();
+    let { isOpen: i, master: r, detail: e } = param;
+    const { isTabletOrSmaller: a } = l();
     return a ? /* @__PURE__ */ t(o, {
         children: i ? e : r
     }) : /* @__PURE__ */ t(o, {

package/dist-es/maybe-dismissable.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e, Fragment as m, jsxs as n } from "react/jsx-runtime";
 import * as i from "react";
 import c from "./generated/mistica-icons/icon-close-regular.js";
@@ -6,8 +7,8 @@ import u from "./icon-button.js";
 import { vars as d } from "./skins/skin-contract.css-mistica.js";
 import { dismissableContainer as f, dismissableButton as h, dismissableCircleContainer as p } from "./maybe-dismissable.css-mistica.js";
 const a = /*#__PURE__*/ i.createContext(!1), I = ()=>i.useContext(a), x = (param)=>{
-    let { children: s , width: r , onClose: t , "aria-label": o  } = param;
-    const { texts: l  } = b();
+    let { children: s, width: r, onClose: t, "aria-label": o } = param;
+    const { texts: l } = b();
     return t ? /* @__PURE__ */ n("section", {
         className: f,
         "aria-label": o,

package/dist-es/menu.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -50,25 +51,25 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as e, jsxs as C, Fragment as U } from "react/jsx-runtime";
+import { jsx as e, jsxs as S, Fragment as U } from "react/jsx-runtime";
 import * as o from "react";
 import ne from "classnames";
 import { TAB as oe, ENTER as W, SPACE as G, ESC as se, UP as re, LEFT as ie, DOWN as K, RIGHT as ce } from "./utils/key-codes.js";
-import { getPrefixedDataAttributes as le, cancelEvent as S } from "./utils/dom.js";
+import { getPrefixedDataAttributes as le, cancelEvent as C } from "./utils/dom.js";
 import ae from "./overlay.js";
 import { menuItem as ue, menuItemEnabled as me, menuItemDisabled as de, menuItemHovered as fe, menuSectionDivider as pe, menuTransitionClasses as he, vars as b, itemContent as Y, iconContainer as j, menuContainer as ge } from "./menu.css-mistica.js";
 import { useWindowSize as xe } from "./hooks.js";
 import { Portal as be } from "./portal.js";
-import { assignInlineVars as Ie } from "@vanilla-extract/dynamic";
 import y from "./box.js";
-import ve from "./inline.js";
-import Me from "./touchable.js";
+import Ie from "./inline.js";
+import ve from "./touchable.js";
 import { Text3 as X } from "./text.js";
 import { vars as q } from "./skins/skin-contract.css-mistica.js";
-import Oe from "./divider.js";
-import Te from "./checkbox.js";
-import { CSSTransition as Se } from "react-transition-group";
+import Me from "./divider.js";
+import Oe from "./checkbox.js";
+import { CSSTransition as Te } from "react-transition-group";
 import { combineRefs as Ce } from "./utils/common.js";
+import { applyCssVars as Se } from "./utils/css.js";
 import { isRunningAcceptanceTest as Ee } from "./utils/platform.js";
 const ke = 120, Q = /*#__PURE__*/ o.createContext({
     focusedItem: null,
@@ -80,8 +81,8 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
     const f = D(r).indexOf(d);
     return f < 0 ? null : f;
 }, qe = (param)=>{
-    let { label: r , Icon: d , destructive: f , disabled: u , onPress: E , controlType: s , checked: p  } = param;
-    const { focusedItem: n , setFocusedItem: v , closeMenu: i , isMenuOpen: k  } = Ne(), c = o.useRef(null), h = f ? q.colors.textLinkDanger : q.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, m = Re(M, x), l = ()=>s === "checkbox" ? /* @__PURE__ */ e(Te, {
+    let { label: r, Icon: d, destructive: f, disabled: u, onPress: E, controlType: s, checked: p } = param;
+    const { focusedItem: n, setFocusedItem: v, closeMenu: i, isMenuOpen: k } = Ne(), c = o.useRef(null), h = f ? q.colors.textLinkDanger : q.colors.neutralHigh, x = c == null ? void 0 : c.current, M = (x == null ? void 0 : x.closest("[role=menu]")) || null, m = Re(M, x), l = ()=>s === "checkbox" ? /* @__PURE__ */ e(Oe, {
             ref: c,
             name: r,
             checked: p,
@@ -91,15 +92,15 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
             disabled: u,
             role: "menuitemcheckbox",
             render: (param)=>/* @__PURE__ */ {
-                let { controlElement: N  } = param;
+                let { controlElement: N } = param;
                 return e(y, {
                     paddingX: 8,
                     paddingY: 12,
-                    children: /* @__PURE__ */ C(ve, {
+                    children: /* @__PURE__ */ S(Ie, {
                         space: "between",
                         alignItems: "center",
                         children: [
-                            /* @__PURE__ */ C("div", {
+                            /* @__PURE__ */ S("div", {
                                 className: Y,
                                 children: [
                                     d && /* @__PURE__ */ e("div", {
@@ -124,7 +125,7 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
                     })
                 });
             }
-        }) : /* @__PURE__ */ e(Me, {
+        }) : /* @__PURE__ */ e(ve, {
             ref: c,
             onPress: ()=>{
                 k && m !== null && (E(m), i());
@@ -134,7 +135,7 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
             children: /* @__PURE__ */ e(y, {
                 paddingX: 8,
                 paddingY: 12,
-                children: /* @__PURE__ */ C("div", {
+                children: /* @__PURE__ */ S("div", {
                     className: Y,
                     children: [
                         d && /* @__PURE__ */ e("div", {
@@ -164,24 +165,24 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
         children: l()
     });
 }, Ve = (param)=>{
-    let { children: r  } = param;
-    return r ? /* @__PURE__ */ C(U, {
+    let { children: r } = param;
+    return r ? /* @__PURE__ */ S(U, {
         children: [
             r,
             /* @__PURE__ */ e(y, {
                 paddingY: 8,
                 className: pe,
-                children: /* @__PURE__ */ e(Oe, {})
+                children: /* @__PURE__ */ e(Me, {})
             })
         ]
     }) : /* @__PURE__ */ e(U, {});
 }, V = 12, J = 8, Je = (param)=>{
-    let { renderTarget: r , renderMenu: d , width: f , position: u = "left" , dataAttributes: E  } = param;
+    let { renderTarget: r, renderMenu: d, width: f, position: u = "left", dataAttributes: E } = param;
     const [s, p] = o.useState(!1), [n, v] = o.useState(null), [i, k] = o.useState(null), [c, h] = o.useState(null), [x, M] = o.useState(!1), m = o.useRef(null), [l, N] = o.useState(null), R = xe();
     o.useEffect(()=>{
         const a = n == null ? void 0 : n.getBoundingClientRect();
         if (!i || !a || !s) return;
-        const { top: t , right: O , left: g , bottom: A  } = a, T = i.scrollHeight, I = u === "left" ? g : void 0, F = u === "right" ? R.width - O : void 0, L = t - J, $ = A + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
+        const { top: t, right: O, left: g, bottom: A } = a, T = i.scrollHeight, I = u === "left" ? g : void 0, F = u === "right" ? R.width - O : void 0, L = t - J, $ = A + J, H = R.height - $ - V, P = L - V, B = H > T, z = P > T, te = B || !z && H > P;
         N(te ? {
             left: I,
             right: F,
@@ -247,21 +248,21 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
             if (s) switch(t.keyCode){
                 case ce:
                 case K:
-                    S(t), _();
+                    C(t), _();
                     break;
                 case ie:
                 case re:
-                    S(t), _(!0);
+                    C(t), _(!0);
                     break;
                 case se:
                     p(!1);
                     break;
                 case G:
                 case W:
-                    S(t), c !== null && D(i)[c].click();
+                    C(t), c !== null && D(i)[c].click();
                     break;
                 case oe:
-                    S(t);
+                    C(t);
                     break;
             }
             else switch(t.keyCode){
@@ -282,13 +283,13 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
     }, [
         n,
         s
-    ]), /* @__PURE__ */ C("div", _object_spread_props(_object_spread({}, le(E, "Menu")), {
+    ]), /* @__PURE__ */ S("div", _object_spread_props(_object_spread({}, le(E, "Menu")), {
         children: [
             r(_object_spread_props(_object_spread({}, Z), {
                 isMenuOpen: s
             })),
             /* @__PURE__ */ e(be, {
-                children: /* @__PURE__ */ e(Se, {
+                children: /* @__PURE__ */ e(Te, {
                     in: s,
                     nodeRef: m,
                     timeout: Ee() ? 0 : ke,
@@ -298,11 +299,11 @@ const ke = 120, Q = /*#__PURE__*/ o.createContext({
                     onExit: ()=>n == null ? void 0 : n.focus(),
                     children: /* @__PURE__ */ e(ae, {
                         onPress: (a)=>{
-                            S(a), p(!1);
+                            C(a), p(!1);
                         },
                         disableScroll: !0,
                         children: /* @__PURE__ */ e("div", {
-                            style: _object_spread({}, Ie(_object_spread({}, l ? _object_spread({
+                            style: _object_spread({}, Se(_object_spread({}, l ? _object_spread({
                                 [b.top]: l.top,
                                 [b.bottom]: l.bottom,
                                 [b.transformOrigin]: l.transformOrigin

package/dist-es/modal-context-provider.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -31,7 +32,7 @@ import * as t from "react";
 const o = /*#__PURE__*/ t.createContext({
     isModalOpen: !1
 }), s = /*#__PURE__*/ t.createContext(()=>{}), S = (param)=>{
-    let { children: e  } = param;
+    let { children: e } = param;
     const [l, n] = t.useState({
         isModalOpen: !1
     }), d = t.useCallback((r)=>{

package/dist-es/month-field.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -87,7 +88,7 @@ import E from "./generated/mistica-icons/icon-calendar-regular.js";
 import { getLocalYearMonthString as r } from "./utils/time.js";
 import { useTheme as M } from "./hooks.js";
 const j = /*#__PURE__*/ f.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), z = (_param)=>{
-    var { disabled: l , error: h , helperText: g , name: y , optional: a , validate: s , onChange: D , onChangeValue: n , onBlur: R , value: S , defaultValue: k , min: o , max: i  } = _param, d = _object_without_properties(_param, [
+    var { disabled: l, error: h, helperText: g, name: y, optional: a, validate: s, onChange: D, onChangeValue: n, onBlur: R, value: S, defaultValue: k, min: o, max: i } = _param, d = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -102,7 +103,7 @@ const j = /*#__PURE__*/ f.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "min",
         "max"
     ]);
-    const F = (t)=>t, I = f.useMemo(()=>v("month"), []), { texts: T  } = M(), c = (t)=>!(o && t && t < r(o) || i && t && t > r(i)), u = O({
+    const F = (t)=>t, I = f.useMemo(()=>v("month"), []), { texts: T } = M(), c = (t)=>!(o && t && t < r(o) || i && t && t > r(i)), u = O({
         name: y,
         value: S,
         defaultValue: k,