@telefonica/mistica 14.33.0 → 14.34.0

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.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 @@ 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",
@@ -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: {

package/dist-es/feedback.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -101,7 +102,7 @@ import { vars as d } from "./skins/skin-contract.css-mistica.js";
 import { innerContainer as M, iconContainer as ve, feedbackData as Fe, feedbackDataAppear as A, feedbackDataAppearActiveFast as Ie, feedbackDataAppearActiveMedium as _, feedbackDataAppearActiveSlow as Ae, desktopContainer as Be, desktopContent as Ne, container as xe } from "./feedback.css-mistica.js";
 import G from "./icons/icon-success-vivo-new.js";
 const P = (r)=>!be(r), U = (param)=>{
-    let { primaryButton: r , secondaryButton: o  } = param;
+    let { primaryButton: r, secondaryButton: o } = param;
     return !!r || !!o;
 }, ye = ()=>{
     const o = `body {background:${ie() ? d.colors.backgroundBrand : d.colors.background}}`;
@@ -128,7 +129,7 @@ const P = (r)=>!be(r), U = (param)=>{
         return ()=>window.cancelAnimationFrame(t);
     }, []), r;
 }, X = (param, n, s)=>{
-    let { icon: r , title: o , description: t , extra: c  } = param;
+    let { icon: r, title: o, description: t, extra: c } = param;
     const a = t && Array.isArray(t) ? /* @__PURE__ */ e(b, {
         space: 16,
         children: t.map((m, u)=>/* @__PURE__ */ e("p", {
@@ -179,7 +180,7 @@ const P = (r)=>!be(r), U = (param)=>{
         ]
     });
 }, Z = (param)=>/* @__PURE__ */ {
-    let { isInverse: r , inlineFeedbackBody: o , imageFit: t , imageUrl: c , dataAttributes: n  } = param;
+    let { isInverse: r, inlineFeedbackBody: o, imageFit: t, imageUrl: c, dataAttributes: n } = param;
     return l(Se, {
         className: Be,
         isInverse: r,
@@ -205,9 +206,9 @@ const P = (r)=>!be(r), U = (param)=>{
         ]
     });
 }, V = (param)=>{
-    let { title: r , description: o , children: t , extra: c , primaryButton: n , secondaryButton: s , link: a , hapticFeedback: m , icon: u , animateText: f = !1 , isInverse: i = !1 , unstable_inlineInDesktop: h , imageUrl: g , imageFit: v , dataAttributes: C  } = param;
+    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: s, link: a, hapticFeedback: m, icon: u, animateText: f = !1, isInverse: i = !1, unstable_inlineInDesktop: h, imageUrl: g, imageFit: v, dataAttributes: C } = param;
     J(m);
-    const { platformOverrides: F , isDarkMode: p , skinName: z  } = N(), ee = se(), { isTabletOrSmaller: I  } = x(), [oe, re] = S.useState(typeof self < "u"), [w, te] = S.useState(0), T = oe ? "100vh" : `${ee - w}px`, D = U({
+    const { platformOverrides: F, isDarkMode: p, skinName: z } = N(), ee = se(), { isTabletOrSmaller: I } = x(), [oe, re] = S.useState(typeof self < "u"), [w, te] = S.useState(0), T = oe ? "100vh" : `${ee - w}px`, D = U({
         primaryButton: n,
         secondaryButton: s,
         link: a
@@ -282,10 +283,10 @@ const P = (r)=>!be(r), U = (param)=>{
         })
     });
 }, Qe = (_param)=>{
-    var { dataAttributes: r  } = _param, o = _object_without_properties(_param, [
+    var { dataAttributes: r } = _param, o = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: t  } = x(), { skinName: c  } = N();
+    const { isTabletOrSmaller: t } = x(), { skinName: c } = N();
     return /* @__PURE__ */ e(V, _object_spread_props(_object_spread({}, o), {
         isInverse: !o.unstable_inlineInDesktop || t,
         hapticFeedback: "success",
@@ -304,7 +305,7 @@ const P = (r)=>!be(r), U = (param)=>{
         }, r)
     }));
 }, Xe = (_param)=>/* @__PURE__ */ {
-    var { children: r , errorReference: o , dataAttributes: t  } = _param, c = _object_without_properties(_param, [
+    var { children: r, errorReference: o, dataAttributes: t } = _param, c = _object_without_properties(_param, [
         "children",
         "errorReference",
         "dataAttributes"
@@ -331,7 +332,7 @@ const P = (r)=>!be(r), U = (param)=>{
         })
     }));
 }, Ye = (_param)=>/* @__PURE__ */ {
-    var { dataAttributes: r , Icon: o = me  } = _param, t = _object_without_properties(_param, [
+    var { dataAttributes: r, Icon: o = me } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "Icon"
     ]);
@@ -344,9 +345,9 @@ const P = (r)=>!be(r), U = (param)=>{
         })
     }, t));
 }, Ze = (param)=>{
-    let { title: r , description: o , children: t , extra: c , primaryButton: n , secondaryButton: s , link: a , imageUrl: m , imageFit: u , dataAttributes: f  } = param;
+    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: s, link: a, imageUrl: m, imageFit: u, dataAttributes: f } = param;
     J("success");
-    const { isTabletOrSmaller: i  } = x(), { skinName: h , platformOverrides: g  } = N(), v = Q(), F = X({
+    const { isTabletOrSmaller: i } = x(), { skinName: h, platformOverrides: g } = N(), v = Q(), F = X({
         icon: h === W ? /* @__PURE__ */ e(j, {
             size: "100%"
         }) : h === K ? /* @__PURE__ */ e(G, {

package/dist-es/fixed-footer-layout.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -55,20 +56,19 @@ import * as l from "react";
 import W from "classnames";
 import { debounce as $ } from "./utils/helpers.js";
 import { isRunningAcceptanceTest as k } from "./utils/platform.js";
-import { useScreenSize as z, useTheme as N, useElementDimensions as P, useWindowHeight as j, useScreenHeight as B, useIsomorphicLayoutEffect as _, useIsWithinIFrame as H } from "./hooks.js";
+import { useScreenSize as z, useTheme as N, useElementDimensions as P, useIsWithinIFrame as j, useWindowHeight as B, useScreenHeight as _, useIsomorphicLayoutEffect as H } from "./hooks.js";
 import { getScrollableParentElement as V, addPassiveEventListener as v, removePassiveEventListener as h, hasScroll as q, getScrollDistanceToBottom as G } from "./utils/dom.js";
 import { container as J, vars as E, footer as K, withoutFooter as M, elevated as Q, fixedFooter as U } from "./fixed-footer-layout.css-mistica.js";
-import { assignInlineVars as X } from "@vanilla-extract/dynamic";
-import { safeAreaInsetBottom as x } from "./utils/css.js";
+import { applyCssVars as X, safeAreaInsetBottom as x } from "./utils/css.js";
 const Y = 2, Z = (e)=>e === document.documentElement ? window : e, C = (e)=>{
     const n = setTimeout(e, 0);
     return {
         cancel: ()=>clearTimeout(n)
     };
 }, ee = (param)=>{
-    let { isFooterVisible: e = !0 , footer: n , footerHeight: S = "auto" , footerBgColor: T , containerBgColor: m , children: g , onChangeFooterHeight: o  } = param;
-    const [y, w] = l.useState(!1), d = l.useRef(null), { isTabletOrSmaller: F  } = z(), { platformOverrides: u  } = N(), { height: s , ref: I  } = P(), b = H(), f = j(), A = B(), i = f - s > (b ? f : A) / Y;
-    _(()=>{
+    let { isFooterVisible: e = !0, footer: n, footerHeight: S = "auto", footerBgColor: T, containerBgColor: m, children: y, onChangeFooterHeight: o } = param;
+    const [g, w] = l.useState(!1), d = l.useRef(null), { isTabletOrSmaller: F } = z(), { platformOverrides: u } = N(), { height: s, ref: I } = P(), b = j(), f = B(), A = _(), i = f - s > (b ? f : A) / Y;
+    H(()=>{
         o == null || o(s);
     }, [
         o,
@@ -98,12 +98,12 @@ const Y = 2, Z = (e)=>e === document.documentElement ? window : e, C = (e)=>{
                 }), {
                     [E.footerHeight]: p ? `calc(${x} + ${s}px)` : "0px"
                 })),
-                children: g
+                children: y
             }),
             /* @__PURE__ */ c("div", {
                 className: W(K, {
                     [M]: !e,
-                    [Q]: y,
+                    [Q]: g,
                     [U]: p
                 }),
                 style: {
@@ -123,5 +123,5 @@ const Y = 2, Z = (e)=>e === document.documentElement ? window : e, C = (e)=>{
             })
         ]
     });
-}, me = ee;
-export { me as default };
+}, le = ee;
+export { le as default };

package/dist-es/fixed-to-top.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx as s } from "react/jsx-runtime";
 import * as e from "react";
 const t = /*#__PURE__*/ e.createContext(0), c = (param)=>{
-    let { children: r , height: n  } = param;
+    let { children: r, height: n } = param;
     const o = e.useContext(t);
     return /* @__PURE__ */ s(t.Provider, {
         value: o + n,

package/dist-es/focus-trap.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import u from "react-focus-lock";
 const a = (param)=>/* @__PURE__ */ {
-    let { children: o , disabled: r , className: s , group: c  } = param;
+    let { children: o, disabled: r, className: s, group: c } = param;
     return t(u, {
         noFocusGuards: !0,
         disabled: r,

package/dist-es/form-context.js

@@ -1,3 +1,4 @@
+"use client";
 import * as R from "react";
 const k = /*#__PURE__*/ R.createContext({
     values: {},
@@ -13,8 +14,8 @@ const k = /*#__PURE__*/ R.createContext({
     validate: ()=>({}),
     formId: ""
 }), P = ()=>R.useContext(k), y = (param)=>{
-    let { name: r , value: t , defaultValue: o , onChange: e , disabled: p  } = param;
-    const { setRawValue: f , setValue: c , rawValues: l , setFormError: d , register: u , formStatus: w  } = P();
+    let { name: r, value: t, defaultValue: o, onChange: e, disabled: p } = param;
+    const { setRawValue: f, setValue: c, rawValues: l, setFormError: d, register: u, formStatus: w } = P();
     var _l_r;
     return R.useEffect(()=>{
         if (l[r] === void 0) {
@@ -57,9 +58,9 @@ const k = /*#__PURE__*/ R.createContext({
         disabled: w === "sending" || p
     };
 }, z = (param)=>{
-    let { name: r , value: t , defaultValue: o , processValue: e , helperText: p , optional: f , error: c , disabled: l , onBlur: d , validate: u , onChange: w , onChangeValue: s  } = param;
+    let { name: r, value: t, defaultValue: o, processValue: e, helperText: p, optional: f, error: c, disabled: l, onBlur: d, validate: u, onChange: w, onChangeValue: s } = param;
     var _ref, _ref1;
-    const { setRawValue: E , setValue: V , rawValues: v , values: j , formErrors: b , formStatus: q , setFormError: S , register: I  } = P(), x = (_ref1 = (_ref = t !== null && t !== void 0 ? t : o) !== null && _ref !== void 0 ? _ref : v[r]) !== null && _ref1 !== void 0 ? _ref1 : "", N = R.useRef(e);
+    const { setRawValue: E, setValue: V, rawValues: v, values: j, formErrors: b, formStatus: q, setFormError: S, register: I } = P(), x = (_ref1 = (_ref = t !== null && t !== void 0 ? t : o) !== null && _ref !== void 0 ? _ref : v[r]) !== null && _ref1 !== void 0 ? _ref1 : "", N = R.useRef(e);
     var _v_r;
     return R.useEffect(()=>{
         E({

package/dist-es/form.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -58,27 +59,27 @@ import B from "classnames";
 import { sprinkles as L } from "./sprinkles.css-mistica.js";
 process.env.NODE_ENV !== "test" && typeof document < "u" && !("scrollBehavior" in document.documentElement.style) && import("scroll-behavior-polyfill").finally(()=>{});
 const W = (param)=>{
-    let { children: S , className: x , onSubmit: b , initialValues: h = {} , autoJump: k = !1 , onValidationErrors: a , id: C  } = param;
-    const f = n.useRef(!0), [i, E] = n.useState(h), [l, I] = n.useState(h), [w, m] = n.useState("filling"), [V, y] = n.useState({}), c = n.useRef(/* @__PURE__ */ new Map()), d = n.useRef(null), { texts: g  } = A(), v = _(C);
+    let { children: S, className: x, onSubmit: b, initialValues: h = {}, autoJump: k = !1, onValidationErrors: a, id: C } = param;
+    const f = n.useRef(!0), [i, E] = n.useState(h), [l, I] = n.useState(h), [w, m] = n.useState("filling"), [V, y] = n.useState({}), c = n.useRef(/* @__PURE__ */ new Map()), d = n.useRef(null), { texts: g } = A(), v = _(C);
     n.useEffect(()=>(f.current = !0, ()=>{
             f.current = !1;
         }), []);
     const j = n.useCallback((e, param)=>{
-        let { input: r , validator: o , focusableElement: t  } = param;
+        let { input: r, validator: o, focusableElement: t } = param;
         r || t ? c.current.set(e, {
             input: r,
             validator: o,
             focusableElement: t
         }) : c.current.delete(e);
     }, []), P = (param)=>{
-        let { name: e , error: r  } = param;
+        let { name: e, error: r } = param;
         return y((o)=>_object_spread_props(_object_spread({}, o), {
                 [e]: r
             }));
     }, p = n.useCallback(()=>{
         var o;
         const e = {};
-        for (const [t, { input: s , validator: u  }] of c.current)if (s) {
+        for (const [t, { input: s, validator: u }] of c.current)if (s) {
             if (s.disabled) continue;
             if (s.required && !((o = l[t]) != null && o.trim())) e[t] = g.formFieldErrorIsMandatory;
             else {
@@ -134,12 +135,12 @@ const W = (param)=>{
         p,
         i
     ]), D = n.useCallback((param)=>{
-        let { name: e , value: r  } = param;
+        let { name: e, value: r } = param;
         E((o)=>_object_spread_props(_object_spread({}, o), {
                 [e]: r
             }));
     }, []), M = n.useCallback((param)=>{
-        let { name: e , value: r  } = param;
+        let { name: e, value: r } = param;
         I((o)=>_object_spread_props(_object_spread({}, o), {
                 [e]: r
             }));

package/dist-es/generated/mistica-icons/icon-2-g-filled.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -81,7 +82,7 @@ import { jsx as o } from "react/jsx-runtime";
 import { useIsInverseVariant as i } from "../../theme-variant-context.js";
 import { vars as r } from "../../skins/skin-contract.css-mistica.js";
 const n = (_param)=>{
-    var { color: e , size: a = 24  } = _param, l = _object_without_properties(_param, [
+    var { color: e, size: a = 24 } = _param, l = _object_without_properties(_param, [
         "color",
         "size"
     ]);

package/dist-es/generated/mistica-icons/icon-2-g-regular.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -81,7 +82,7 @@ import { jsx as r } from "react/jsx-runtime";
 import { useIsInverseVariant as t } from "../../theme-variant-context.js";
 import { vars as v } from "../../skins/skin-contract.css-mistica.js";
 const s = (_param)=>{
-    var { color: o , size: a = 24  } = _param, h = _object_without_properties(_param, [
+    var { color: o, size: a = 24 } = _param, h = _object_without_properties(_param, [
         "color",
         "size"
     ]);

package/dist-es/generated/mistica-icons/icon-3-d-view-filled.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -81,7 +82,7 @@ import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import { useIsInverseVariant as n } from "../../theme-variant-context.js";
 import { vars as e } from "../../skins/skin-contract.css-mistica.js";
 const v = (_param)=>{
-    var { color: i , size: o = 24  } = _param, s = _object_without_properties(_param, [
+    var { color: i, size: o = 24 } = _param, s = _object_without_properties(_param, [
         "color",
         "size"
     ]);

package/dist-es/generated/mistica-icons/icon-3-d-view-light.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -81,7 +82,7 @@ import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import { useIsInverseVariant as n } from "../../theme-variant-context.js";
 import { vars as s } from "../../skins/skin-contract.css-mistica.js";
 const a = (_param)=>{
-    var { color: e , size: o = 24  } = _param, i = _object_without_properties(_param, [
+    var { color: e, size: o = 24 } = _param, i = _object_without_properties(_param, [
         "color",
         "size"
     ]);

package/dist-es/generated/mistica-icons/icon-3-d-view-regular.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -81,7 +82,7 @@ import { jsx as o } from "react/jsx-runtime";
 import { useIsInverseVariant as a } from "../../theme-variant-context.js";
 import { vars as e } from "../../skins/skin-contract.css-mistica.js";
 const i = (_param)=>{
-    var { color: l , size: r = 24  } = _param, t = _object_without_properties(_param, [
+    var { color: l, size: r = 24 } = _param, t = _object_without_properties(_param, [
         "color",
         "size"
     ]);