@telefonica/mistica 14.32.1 → 14.34.0

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

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -26,55 +27,61 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsx as r, jsxs as N, Fragment as O } from "react/jsx-runtime";
+import { jsx as r, jsxs as O, Fragment as H } from "react/jsx-runtime";
 import * as a from "react";
-import { assignInlineVars as w } from "@vanilla-extract/dynamic";
-import B from "./dialog.js";
-import F from "./screen-size-context-provider.js";
-import $ from "./aria-id-getter-context.js";
-import { getTexts as V, dimensions as j, getMisticaLinkComponent as _, NAVBAR_HEIGHT_MOBILE as z } from "./theme.js";
-import { getPlatform as L, isInsideNovumNativeApp as G } from "./utils/platform.js";
-import h from "./theme-context.js";
-import { useIsomorphicLayoutEffect as q } from "./hooks.js";
+import { assignInlineVars as y } from "@vanilla-extract/dynamic";
+import V from "./dialog.js";
+import B from "./screen-size-context-provider.js";
+import F from "./aria-id-getter-context.js";
+import { getTexts as $, dimensions as h, getMisticaLinkComponent as j, NAVBAR_HEIGHT_MOBILE as G } from "./theme.js";
+import { getPlatform as w, isInsideNovumNativeApp as z } from "./utils/platform.js";
+import q from "./theme-context.js";
+import { useIsomorphicLayoutEffect as K } from "./hooks.js";
 import W from "./tab-focus.js";
 import J from "./modal-context-provider.js";
-import { DocumentVisibilityProvider as K } from "./utils/document-visibility.js";
-import { AspectRatioSupportProvider as Q } from "./utils/aspect-ratio-support.js";
-import { TrackingConfig as U } from "./utils/analytics.js";
-import { vars as X } from "./skins/skin-contract.css-mistica.js";
-import { fromHexToRgb as Y } from "./utils/color.js";
-import { defaultTextPresetsConfig as e, defaultBorderRadiiConfig as Z } from "./skins/defaults.js";
-const tt = "(prefers-color-scheme: dark)", et = ()=>{
+import { DocumentVisibilityProvider as Q } from "./utils/document-visibility.js";
+import { AspectRatioSupportProvider as U } from "./utils/aspect-ratio-support.js";
+import { TrackingConfig as X } from "./utils/analytics.js";
+import { vars as Y } from "./skins/skin-contract.css-mistica.js";
+import { fromHexToRgb as Z } from "./utils/color.js";
+import { defaultTextPresetsConfig as e, defaultBorderRadiiConfig as tt } from "./skins/defaults.js";
+import { isClientSide as et } from "./utils/environment.js";
+import { PACKAGE_VERSION as I } from "./package-version.js";
+if (process.env.NODE_ENV !== "production" && et()) {
+    if (window.__mistica_version__ && window.__mistica_version__ !== I) throw new Error("There is more than one version of @telefonica/mistica running on the same page");
+    window.__mistica_version__ = I;
+}
+const rt = "(prefers-color-scheme: dark)", ot = ()=>{
     const [t, c] = a.useState(!1);
-    return q(()=>{
+    return K(()=>{
         if (!window.matchMedia) return;
-        const o = window.matchMedia(tt), i = ()=>{
+        const o = window.matchMedia(rt), i = ()=>{
             c(o.matches);
         };
         return o.addListener(i), i(), ()=>o.removeListener(i);
     }, []), t;
-}, rt = ()=>(t)=>t, ot = (t)=>({
-        headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? z : t == null ? void 0 : t.headerMobileHeight
-    }), it = (param)=>{
-    let { theme: t , children: c , as: o  } = param;
+}, it = ()=>(t)=>t, st = (t)=>({
+        headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? G : t == null ? void 0 : t.headerMobileHeight
+    }), nt = (param)=>{
+    let { theme: t, children: c, as: o } = param;
     var _t_colorScheme, _t_skin_borderRadii;
-    const i = a.useRef(1), R = a.useCallback(()=>`aria-id-hook-${i.current++}`, []), H = et(), u = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", S = t.skin.colors, y = _object_spread({}, t.skin.colors, t.skin.darkModeColors), k = u === "auto" && H || u === "dark", m = k ? y : S, p = a.useMemo(()=>{
-        var s, n, d, x, f, b, P, g, M, C, T, D, I, E;
+    const i = a.useRef(1), N = a.useCallback(()=>`aria-id-hook-${i.current++}`, []), R = ot(), u = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", S = t.skin.colors, A = _object_spread({}, t.skin.colors, t.skin.darkModeColors), m = u === "auto" && R || u === "dark", k = m ? A : S, p = a.useMemo(()=>{
+        var s, n, d, x, f, b, P, g, _, C, M, E, T, D;
         const l = _object_spread({
-            platform: L(),
-            insideNovumNativeApp: G()
+            platform: w(),
+            insideNovumNativeApp: z()
         }, t.platformOverrides);
         var _t_useHrefDecorator;
         return {
             skinName: t.skin.name,
             i18n: t.i18n,
             platformOverrides: l,
-            texts: _object_spread({}, V(t.i18n.locale), t.texts),
+            texts: _object_spread({}, $(t.i18n.locale), t.texts),
             analytics: _object_spread({
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _object_spread({}, j, ot(t.dimensions)),
+            dimensions: _object_spread({}, h, st(t.dimensions)),
             textPresets: {
                 text5: _object_spread({}, e.text5, (s = t.skin.textPresets) == null ? void 0 : s.text5),
                 text6: _object_spread({}, e.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
@@ -84,54 +91,54 @@ const tt = "(prefers-color-scheme: dark)", et = ()=>{
                 text10: _object_spread({}, e.text10, (b = t.skin.textPresets) == null ? void 0 : b.text10),
                 cardTitle: _object_spread({}, e.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle),
                 button: _object_spread({}, e.button, (g = t.skin.textPresets) == null ? void 0 : g.button),
-                link: _object_spread({}, e.link, (M = t.skin.textPresets) == null ? void 0 : M.link),
+                link: _object_spread({}, e.link, (_ = t.skin.textPresets) == null ? void 0 : _.link),
                 title1: _object_spread({}, e.title1, (C = t.skin.textPresets) == null ? void 0 : C.title1),
-                title2: _object_spread({}, e.title2, (T = t.skin.textPresets) == null ? void 0 : T.title2),
-                navigationBar: _object_spread({}, e.navigationBar, (D = t.skin.textPresets) == null ? void 0 : D.navigationBar),
-                indicator: _object_spread({}, e.indicator, (I = t.skin.textPresets) == null ? void 0 : I.indicator),
-                tabsLabel: _object_spread({}, e.tabsLabel, (E = t.skin.textPresets) == null ? void 0 : E.tabsLabel)
+                title2: _object_spread({}, e.title2, (M = t.skin.textPresets) == null ? void 0 : M.title2),
+                navigationBar: _object_spread({}, e.navigationBar, (E = t.skin.textPresets) == null ? void 0 : E.navigationBar),
+                indicator: _object_spread({}, e.indicator, (T = t.skin.textPresets) == null ? void 0 : T.indicator),
+                tabsLabel: _object_spread({}, e.tabsLabel, (D = t.skin.textPresets) == null ? void 0 : D.tabsLabel)
             },
-            Link: _(t.Link),
-            isDarkMode: k,
-            isIos: L(l) === "ios",
-            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : rt,
+            Link: j(t.Link),
+            isDarkMode: m,
+            isIos: w(l) === "ios",
+            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : it,
             useId: t.useId
         };
     }, [
         t,
-        k
-    ]), A = Object.fromEntries(Object.entries(m).map((param)=>{
+        m
+    ]), L = Object.fromEntries(Object.entries(k).map((param)=>{
         let [l, s] = param;
         let n = "";
         if (s.startsWith("#")) {
-            const [d, x, f] = Y(s);
+            const [d, x, f] = Z(s);
             n = `${d}, ${x}, ${f}`;
         }
         return [
             l,
             n
         ];
-    })), v = w(X, {
-        colors: m,
-        rawColors: A,
-        borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : Z
+    })), v = y(Y, {
+        colors: k,
+        rawColors: L,
+        borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : tt
     });
     return /* @__PURE__ */ r(W, {
         disabled: !t.enableTabFocus,
         children: /* @__PURE__ */ r(J, {
-            children: /* @__PURE__ */ r(h.Provider, {
+            children: /* @__PURE__ */ r(q.Provider, {
                 value: p,
-                children: /* @__PURE__ */ r(U, {
+                children: /* @__PURE__ */ r(X, {
                     eventFormat: p.analytics.eventFormat,
-                    children: /* @__PURE__ */ r(Q, {
-                        children: /* @__PURE__ */ r(K, {
-                            children: /* @__PURE__ */ r($.Provider, {
-                                value: R,
-                                children: /* @__PURE__ */ r(F, {
-                                    children: /* @__PURE__ */ r(B, {
+                    children: /* @__PURE__ */ r(U, {
+                        children: /* @__PURE__ */ r(Q, {
+                            children: /* @__PURE__ */ r(F.Provider, {
+                                value: N,
+                                children: /* @__PURE__ */ r(B, {
+                                    children: /* @__PURE__ */ r(V, {
                                         children: o ? /*#__PURE__*/ a.createElement(o, {
                                             style: v
-                                        }, c) : /* @__PURE__ */ N(O, {
+                                        }, c) : /* @__PURE__ */ O(H, {
                                             children: [
                                                 (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ r("style", {
                                                     children: `:root {${v}}`
@@ -148,5 +155,5 @@ const tt = "(prefers-color-scheme: dark)", et = ()=>{
             })
         })
     });
-}, Ct = it;
-export { Ct as default, et as useIsOsDarkModeEnabled };
+}, Dt = nt;
+export { Dt as default, ot as useIsOsDarkModeEnabled };

package/dist-es/theme-context.js

@@ -1,3 +1,4 @@
+"use client";
 import * as t from "react";
 const e = /*#__PURE__*/ t.createContext(null), o = e;
 export { o as default };

package/dist-es/theme-variant-context.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx as o } from "react/jsx-runtime";
 import * as e from "react";
 const t = /*#__PURE__*/ e.createContext("default"), m = (param)=>/* @__PURE__ */ {
-    let { isInverse: r , variant: a , children: n  } = param;
+    let { isInverse: r, variant: a, children: n } = param;
     return o(t.Provider, {
         value: a !== null && a !== void 0 ? a : r ? "inverse" : "default",
         children: n

package/dist-es/theme.js

@@ -267,7 +267,7 @@ const l = {
     headerMobileHeight: u,
     headerDesktopHeight: d
 }, m = (_param)=>/* @__PURE__ */ {
-    var { to: e , innerRef: r  } = _param, a = _object_without_properties(_param, [
+    var { to: e, innerRef: r } = _param, a = _object_without_properties(_param, [
         "to",
         "innerRef"
     ]);
@@ -278,14 +278,14 @@ const l = {
         children: a.children
     }));
 }, C = (e)=>e, f = (e)=>(_param)=>/* @__PURE__ */ {
-        var { innerRef: r  } = _param, a = _object_without_properties(_param, [
+        var { innerRef: r } = _param, a = _object_without_properties(_param, [
             "innerRef"
         ]);
         return o(e, _object_spread({
             ref: r
         }, a));
     }, p = (e)=>(_param)=>/* @__PURE__ */ {
-        var { to: r , innerRef: a , children: t  } = _param, n = _object_without_properties(_param, [
+        var { to: r, innerRef: a, children: t } = _param, n = _object_without_properties(_param, [
             "to",
             "innerRef",
             "children"
@@ -299,7 +299,7 @@ const l = {
             }))
         });
     }, b = (e)=>(_param)=>/* @__PURE__ */ {
-        var { to: r , innerRef: a , children: t  } = _param, n = _object_without_properties(_param, [
+        var { to: r, innerRef: a, children: t } = _param, n = _object_without_properties(_param, [
             "to",
             "innerRef",
             "children"

package/dist-es/title.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -58,8 +59,8 @@ import { vars as f } from "./skins/skin-contract.css-mistica.js";
 import { useTheme as l } from "./hooks.js";
 import { getPrefixedDataAttributes as g } from "./utils/dom.js";
 const m = (param)=>{
-    let { title: t , right: i , dataAttributes: o  } = param;
-    const { textPresets: r  } = l();
+    let { title: t, right: i, dataAttributes: o } = param;
+    const { textPresets: r } = l();
     return i ? /* @__PURE__ */ a(x, {
         space: "between",
         alignItems: "baseline",
@@ -78,8 +79,8 @@ const m = (param)=>{
         children: t
     }));
 }, P = (param)=>{
-    let { children: t , as: i = "h3" , id: o , right: r , dataAttributes: s  } = param;
-    const { textPresets: n  } = l();
+    let { children: t, as: i = "h3", id: o, right: r, dataAttributes: s } = param;
+    const { textPresets: n } = l();
     return /* @__PURE__ */ e(m, {
         title: /* @__PURE__ */ e(p, {
             color: f.colors.textSecondary,
@@ -96,8 +97,8 @@ const m = (param)=>{
         }, s)
     });
 }, A = (param)=>{
-    let { children: t , as: i = "h3" , id: o , right: r , dataAttributes: s  } = param;
-    const { textPresets: n  } = l();
+    let { children: t, as: i = "h3", id: o, right: r, dataAttributes: s } = param;
+    const { textPresets: n } = l();
     return /* @__PURE__ */ e(m, {
         title: /* @__PURE__ */ e(c, {
             as: i,
@@ -115,7 +116,7 @@ const m = (param)=>{
         }, s)
     });
 }, S = (param)=>/* @__PURE__ */ {
-    let { children: t , as: i = "h3" , id: o , right: r , dataAttributes: s  } = param;
+    let { children: t, as: i = "h3", id: o, right: r, dataAttributes: s } = param;
     return e(m, {
         title: /* @__PURE__ */ e(h, {
             as: i,

package/dist-es/tooltip.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -87,12 +88,12 @@ import ct from "./overlay.js";
 import { Text2 as I } from "./text.js";
 import { TAB as st } from "./utils/key-codes.js";
 import ut from "./stack.js";
-import { vars as s, wrapper as lt, enter as dt, enterActive as ft, enterDone as ht, exit as wt, exitActive as mt, container as pt, textAlign as gt, textCenter as xt, arrowWrapper as Tt, arrow as vt, fadeInTopKeyframes as bt, fadeInBottomKeyframes as At, fadeInXKeyframes as Pt, arrowTop as St, arrowBottom as Yt, arrowLeft as Ct, arrowRight as Ot } from "./tooltip.css-mistica.js";
-import { assignInlineVars as Rt } from "@vanilla-extract/dynamic";
-import { getPrefixedDataAttributes as yt } from "./utils/dom.js";
-import { isClientSide as Dt, isServerSide as Wt } from "./utils/environment.js";
-const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500, M = ()=>{}, Nt = (r)=>r === "bottom" ? `translateY(${v}px)` : r === "top" ? `translateY(calc(-100% - ${v}px))` : r === "right" ? `translateX(${v}px) translateY(-50%)` : r === "left" ? `translateX(-${v}px) translateY(-50%)` : `translateY(-${v}px)`, kt = (r)=>r === "top" ? "translateY(-100%)" : r === "bottom" ? "translateY(0)" : "translateY(-50%)", Lt = (r)=>r === "bottom" ? "translateY(0)" : r === "top" ? "translateY(-100%)" : r === "right" || r === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", Vt = (r)=>r === "top" ? bt : r === "bottom" ? At : Pt, jt = (r)=>r ? "1" : "0.2", Kt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : "", zt = (_param)=>{
-    var { children: r , extra: N , description: S , target: k , title: Y , targetLabel: L , delay: V = !0 , dataAttributes: j , targetStyle: K , unstable_offsetX: f , textCenter: z  } = _param, y = _object_without_properties(_param, [
+import { wrapper as lt, enter as dt, enterActive as ft, enterDone as ht, exit as wt, exitActive as mt, container as pt, textAlign as gt, textCenter as xt, arrowWrapper as Tt, arrow as vt, arrowTop as bt, arrowBottom as At, arrowLeft as Pt, arrowRight as St, vars as s, fadeInTopKeyframes as Yt, fadeInBottomKeyframes as Ct, fadeInXKeyframes as yt } from "./tooltip.css-mistica.js";
+import { getPrefixedDataAttributes as Ot } from "./utils/dom.js";
+import { isClientSide as Rt, isServerSide as Dt } from "./utils/environment.js";
+import { applyCssVars as Wt } from "./utils/css.js";
+const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500, M = ()=>{}, Nt = (r)=>r === "bottom" ? `translateY(${v}px)` : r === "top" ? `translateY(calc(-100% - ${v}px))` : r === "right" ? `translateX(${v}px) translateY(-50%)` : r === "left" ? `translateX(-${v}px) translateY(-50%)` : `translateY(-${v}px)`, kt = (r)=>r === "top" ? "translateY(-100%)" : r === "bottom" ? "translateY(0)" : "translateY(-50%)", Lt = (r)=>r === "bottom" ? "translateY(0)" : r === "top" ? "translateY(-100%)" : r === "right" || r === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", Vt = (r)=>r === "top" ? Yt : r === "bottom" ? Ct : yt, jt = (r)=>r ? "1" : "0.2", Kt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${s.shadowAlpha})` : "", zt = (_param)=>{
+    var { children: r, extra: N, description: S, target: k, title: Y, targetLabel: L, delay: V = !0, dataAttributes: j, targetStyle: K, unstable_offsetX: f, textCenter: z } = _param, R = _object_without_properties(_param, [
         "children",
         "extra",
         "description",
@@ -105,7 +106,7 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
         "unstable_offsetX",
         "textCenter"
     ]);
-    const { isDarkMode: F  } = nt(), [a, C] = o.useState(!1), { isTabletOrSmaller: H  } = ot(), D = it(), h = o.useRef(!1), c = o.useRef(null), g = o.useRef(null), O = o.useRef(null), x = o.useRef(null), t = o.useRef({
+    const { isDarkMode: F } = nt(), [a, C] = o.useState(!1), { isTabletOrSmaller: H } = ot(), D = it(), h = o.useRef(!1), c = o.useRef(null), g = o.useRef(null), y = o.useRef(null), x = o.useRef(null), t = o.useRef({
         top: 0,
         right: 0,
         left: 0,
@@ -124,7 +125,7 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
             left: t.current.left < e.width ? t.current.right + e.width > window.innerWidth ? t.current.top < e.height ? "bottom" : "top" : "right" : n,
             bottom: t.current.bottom + e.height > window.innerHeight ? l("top") : l(n)
         })[n];
-    })(G(y.position)), R = Dt() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
+    })(G(R.position)), O = Rt() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
         a && C(!1);
     };
     o.useEffect(()=>(window.addEventListener("resize", W), ()=>{
@@ -133,7 +134,7 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
     const $ = ()=>{
         C(!1);
     }, T = ()=>{
-        O.current && (t.current = O.current.getBoundingClientRect(), C(!a));
+        y.current && (t.current = y.current.getBoundingClientRect(), C(!a));
     }, Q = ()=>{
         a || T();
     }, U = (n)=>{
@@ -145,7 +146,7 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
             left: u
         } : {};
     }, B = o.useCallback((n, u)=>{
-        if (Wt() || !e) return {};
+        if (Dt() || !e) return {};
         const l = e.width > t.current.width && t.current.left + t.current.width / 2 < e.width / 2 + 16 ? Math.round(e.width / 2 - t.current.width / 2) : 0, A = f || (u ? window.pageXOffset + t.current.left + t.current.width / 2 - u / 2 : window.pageXOffset + t.current.left + l + t.current.width / 2 - e.width / 2), d = t.current.left < e.width ? A : u ? t.current.left - u - m : t.current.left - e.width - m, p = t.current.left < e.width ? t.current.top < e.height ? window.pageYOffset + t.current.bottom + m : window.pageYOffset + t.current.top - m : f || window.pageYOffset + t.current.top + t.current.height / 2;
         return ({
             right: {
@@ -168,12 +169,12 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
     }, [
         f,
         e
-    ]), b = (()=>y.width)(), _ = {
-        top: St,
-        bottom: Yt,
-        left: Ct,
-        right: Ot
-    }, tt = i && Rt({
+    ]), b = (()=>R.width)(), _ = {
+        top: bt,
+        bottom: At,
+        left: Pt,
+        right: St
+    }, tt = i && Wt({
         [s.enterTransform]: Nt(i),
         [s.exitTransform]: Lt(i),
         [s.enterActiveAnimationName]: Vt(i),
@@ -195,7 +196,7 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
     ]), /* @__PURE__ */ P(et, {
         children: [
             /* @__PURE__ */ w("div", {
-                ref: O,
+                ref: y,
                 style: K,
                 className: lt,
                 onPointerOver: ()=>{
@@ -203,7 +204,7 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
                         g.current = null, T();
                     }, Mt) : T());
                 },
-                onPointerLeave: R ? M : ()=>{
+                onPointerLeave: O ? M : ()=>{
                     if (g.current) {
                         clearTimeout(g.current), g.current = null, h.current = !1;
                         return;
@@ -224,7 +225,7 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
             }),
             /* @__PURE__ */ P(at, {
                 children: [
-                    a && R && /* @__PURE__ */ w(ct, {
+                    a && O && /* @__PURE__ */ w(ct, {
                         onPress: $
                     }),
                     /* @__PURE__ */ w(rt, {
@@ -240,7 +241,7 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
                         unmountOnExit: !0,
                         children: /* @__PURE__ */ P("div", _object_spread_props(_object_spread({
                             ref: x
-                        }, yt(j, "Tooltip")), {
+                        }, Ot(j, "Tooltip")), {
                             role: "tooltip",
                             id: D,
                             className: E(pt, gt, z ? xt : ""),
@@ -250,7 +251,7 @@ const $t = "bottom", Bt = "top", Et = 12, m = 4 + Et, It = 500, v = 12, Mt = 500
                             onPointerOver: ()=>{
                                 c.current && (clearTimeout(c.current), c.current = null);
                             },
-                            onPointerLeave: R ? M : ()=>{
+                            onPointerLeave: O ? M : ()=>{
                                 c.current = setTimeout(()=>{
                                     h.current && (c.current = null, h.current = !1, T());
                                 }, 100);

package/dist-es/touchable.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -63,12 +64,11 @@ const L = function(e) {
     let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, d = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
     t ? window.open(e, "_blank") : d ? window.open(e, "_top") : document.location.href = e;
 }, T = /*#__PURE__*/ c.forwardRef((e, t)=>{
-    const { texts: d , analytics: v , platformOverrides: N , Link: P , useHrefDecorator: E  } = j(), C = E(), f = c.useRef(!1);
+    const { texts: d, analytics: v, platformOverrides: N, Link: P, useHrefDecorator: E } = j(), C = E(), f = c.useRef(!1);
     let l = [];
     e.trackingEvent && (Array.isArray(e.trackingEvent) ? l = e.trackingEvent : l = [
         e.trackingEvent
     ]);
-    var _e_to_pathname;
     const o = e.children, n = _object_spread({
         className: e.className,
         disabled: e.disabled,
@@ -87,7 +87,10 @@ const L = function(e) {
         e.stopPropagation && a.stopPropagation();
     }, h = (a)=>{
         e.onPress && e.onPress(a);
-    }, k = ()=>e.href ? C(e.href) : e.to && e.fullPageOnWebView ? typeof e.to == "string" ? e.to : (_e_to_pathname = e.to.pathname) !== null && _e_to_pathname !== void 0 ? _e_to_pathname : "" : "", y = ()=>Promise.all(l.map((a)=>v.logEvent(a))), g = (a)=>{
+    }, k = ()=>{
+        var _e_to_pathname;
+        return e.href ? C(e.href) : e.to && e.fullPageOnWebView ? typeof e.to == "string" ? e.to : (_e_to_pathname = e.to.pathname) !== null && _e_to_pathname !== void 0 ? _e_to_pathname : "" : "";
+    }, y = ()=>Promise.all(l.map((a)=>v.logEvent(a))), g = (a)=>{
         f.current || (f.current = !0, y().finally(()=>{
             f.current = !1, a();
         }));

package/dist-es/utils/analytics.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as s } from "react/jsx-runtime";
 import * as e from "react";
 const a = {
@@ -9,7 +10,7 @@ const a = {
 }, n = /*#__PURE__*/ e.createContext({
     eventFormat: "universal-analytics"
 }), p = (param)=>{
-    let { children: o , eventFormat: t  } = param;
+    let { children: o, eventFormat: t } = param;
     const r = e.useMemo(()=>({
             eventFormat: t
         }), [

package/dist-es/utils/animation.js

@@ -175,7 +175,7 @@ const a = (e)=>!o(e), d = (e, t)=>a(t) ? {
             ]
         })
     } : null, m = (param, t)=>/* @__PURE__ */ {
-    let { children: e  } = param;
+    let { children: e } = param;
     return n(l, {
         children: [
             e,

package/dist-es/utils/aspect-ratio-support.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -51,15 +52,15 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { jsx as h } from "react/jsx-runtime";
-import { assignInlineVars as m } from "@vanilla-extract/dynamic";
-import l from "classnames";
-import * as c from "react";
-import { useIsomorphicLayoutEffect as f } from "../hooks.js";
-import { container as w, containerWithWrapper as R, vars as b, wrapper as g } from "./aspect-ratio-support.css-mistica.js";
-const u = /*#__PURE__*/ c.createContext(!0), x = (param)=>{
-    let { children: t  } = param;
-    const [o, s] = c.useState(!0);
-    return f(()=>{
+import m from "classnames";
+import * as n from "react";
+import { useIsomorphicLayoutEffect as l } from "../hooks.js";
+import { container as f, containerWithWrapper as w, vars as R, wrapper as b } from "./aspect-ratio-support.css-mistica.js";
+import { applyCssVars as y } from "./css.js";
+const u = /*#__PURE__*/ n.createContext(!0), x = (param)=>{
+    let { children: t } = param;
+    const [o, s] = n.useState(!0);
+    return l(()=>{
         try {
             CSS.supports("aspect-ratio", "1 / 1") || s(!1);
         } catch (e) {
@@ -69,26 +70,26 @@ const u = /*#__PURE__*/ c.createContext(!0), x = (param)=>{
         value: o,
         children: t
     });
-}, N = ()=>c.useContext(u), W = (t)=>{
+}, N = ()=>n.useContext(u), W = (t)=>{
     const o = N(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
     let i = t.width, a = t.height;
     t.width !== void 0 && t.height !== void 0 ? (i = t.width, a = t.height) : typeof t.width == "number" ? a = t.aspectRatio !== 0 ? t.width / t.aspectRatio : void 0 : typeof t.height == "number" ? i = t.aspectRatio !== 0 ? t.height * t.aspectRatio : void 0 : i = t.width || "100%";
     var _t_as;
-    const n = s && !o, r = /*#__PURE__*/ c.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
-        className: l(t.className, w, {
-            [R]: n
+    const c = s && !o, r = /*#__PURE__*/ n.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
+        className: m(t.className, f, {
+            [w]: c
         }),
-        style: _object_spread({}, n ? _object_spread_props(_object_spread({}, t.style), {
+        style: _object_spread({}, c ? _object_spread_props(_object_spread({}, t.style), {
             position: e ? "absolute" : "static",
             width: "100%"
         }) : _object_spread_props(_object_spread({}, t.style), {
             width: isNaN(Number(i)) ? i : Number(i),
             height: isNaN(Number(a)) ? a : Number(a)
-        }), m({
-            [b.aspectRatio]: e ? String(e) : "unset"
+        }), y({
+            [R.aspectRatio]: e ? String(e) : "unset"
         }))
-    }, !n && t.dataAttributes), t.children);
-    if (n) {
+    }, !c && t.dataAttributes), t.children);
+    if (c) {
         const d = (()=>e ? t.width && typeof t.width == "string" && t.width.endsWith("%") ? `${Number(t.width.replace("%", "")) / e}%` : `${100 / e}%` : 0)();
         return /* @__PURE__ */ h("div", _object_spread_props(_object_spread({
             style: {
@@ -96,7 +97,7 @@ const u = /*#__PURE__*/ c.createContext(!0), x = (param)=>{
                 height: a,
                 paddingTop: d
             },
-            className: g
+            className: b
         }, t.dataAttributes), {
             children: r
         }));

package/dist-es/utils/css.js

@@ -1,7 +1,36 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { assignInlineVars as t } from "@vanilla-extract/dynamic";
 import { isRunningAcceptanceTest as e } from "./platform.js";
-const t = 16, r = (a)=>`${(parseFloat(a) / t).toFixed(3)}rem`;
+const s = 16, o = (a)=>`${(parseFloat(a) / s).toFixed(3)}rem`, i = (a)=>_object_spread({}, t(a));
 e();
 e();
-const n = e() ? "max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset--bottom, 0px))" : "env(safe-area-inset-bottom)";
+const c = e() ? "max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset--bottom, 0px))" : "env(safe-area-inset-bottom)";
 e();
-export { r as pxToRem, n as safeAreaInsetBottom };
+export { i as applyCssVars, o as pxToRem, c as safeAreaInsetBottom };

package/dist-es/utils/document-visibility.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as a } from "react/jsx-runtime";
 import * as t from "react";
 import { useTheme as v } from "../hooks.js";
 import { isAndroid as b } from "./platform.js";
 const i = ()=>typeof document < "u" && document.visibilityState === "visible", u = /*#__PURE__*/ t.createContext(!0), E = (param)=>{
-    let { hidden: m , children: l  } = param;
-    const { platformOverrides: d  } = v(), [o, e] = t.useState(!m);
+    let { hidden: m, children: l } = param;
+    const { platformOverrides: d } = v(), [o, e] = t.useState(!m);
     t.useEffect(()=>{
         const s = ()=>{
             e(i());

package/dist-es/utils/dom.js

@@ -111,7 +111,7 @@ const h = (e, t, r)=>e.addEventListener(t, r, c ? {
 }, i = (e)=>e.startsWith("var(") || e.startsWith("--"), l = (e, t)=>{
     if (!i(e)) throw new Error(`Invalid css var: ${e}`);
     if (e.startsWith("var(")) {
-        const { varName: r , fallback: n  } = v(e), s = l(r, t);
+        const { varName: r, fallback: n } = v(e), s = l(r, t);
         return !s && n ? i(n) ? l(n, t) : n : s;
     }
     return getComputedStyle(t !== null && t !== void 0 ? t : document.documentElement).getPropertyValue(e);

package/dist-es/video.js

@@ -1,3 +1,4 @@
+"use client";
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
     var target = _object_without_properties_loose(source, excluded);
@@ -65,7 +66,7 @@ const q = {
     "16:9": 16 / 9,
     "4:3": 4 / 3
 }, _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", z = /*#__PURE__*/ n.forwardRef((_param, A)=>{
-    var { src: r , poster: u , autoPlay: p = "when-loaded" , muted: x = !0 , loop: N = !0 , preload: k = "none" , loadingTimeout: T = 1e4 , onLoad: y , onError: h , onPause: R , onPlay: b , aspectRatio: c = "1:1" , dataAttributes: B  } = _param, o = _object_without_properties(_param, [
+    var { src: r, poster: u, autoPlay: p = "when-loaded", muted: x = !0, loop: N = !0, preload: k = "none", loadingTimeout: T = 1e4, onLoad: y, onError: h, onPause: R, onPlay: b, aspectRatio: c = "1:1", dataAttributes: B } = _param, o = _object_without_properties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -140,7 +141,7 @@ const q = {
             height: "100%"
         },
         children: U.map((param, i)=>/* @__PURE__ */ {
-            let { src: e , type: t  } = param;
+            let { src: e, type: t } = param;
             return l("source", {
                 src: e,
                 type: t