@telefonica/mistica 14.34.0 → 14.36.0

package/dist-es/tooltip.js

@@ -51,239 +51,287 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = _object_without_properties_loose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
+import { jsxs as F, Fragment as mt, jsx as f } from "react/jsx-runtime";
+import * as i from "react";
+import { useAriaId as ht, useBoundingRect as it, useWindowSize as gt } from "./hooks.js";
+import { Portal as Tt } from "./portal.js";
+import { Transition as vt } from "react-transition-group";
+import { container as xt, tooltipTransitionClasses as bt, tooltip as Ot, content as It, tooltipCenter as Mt, arrowContainer as St, arrow as yt } from "./tooltip.css-mistica.js";
+import Et from "./stack.js";
+import { Text2 as nt } from "./text.js";
+import { getCssVarValue as wt, getPrefixedDataAttributes as Rt } from "./utils/dom.js";
+import { TAB as _t, ESC as Ct } from "./utils/keys.js";
+import { isTouchableDevice as Nt } from "./utils/environment.js";
+import { isEqual as st } from "./utils/helpers.js";
+import q from "classnames";
+import { vars as Z } from "./skins/skin-contract.css-mistica.js";
+import { useIsInverseVariant as kt, ThemeVariant as Lt } from "./theme-variant-context.js";
+import { combineRefs as At } from "./utils/common.js";
+import { useTooltipState as $t, useSetTooltipState as Pt } from "./tooltip-context-provider.js";
+import { isRunningAcceptanceTest as Ft } from "./utils/platform.js";
+const at = (e)=>({
+        border: `1px solid ${e ? Z.colors.backgroundContainer : Z.colors.border}`
+    }), lt = 496, Dt = 300, Wt = 500, Vt = 100, c = 20, b = 6, E = b + c / 2 + 1, Bt = (e)=>{
+    switch(e){
+        case "left":
+            return `translateX(-${b}px)`;
+        case "right":
+            return `translateX(${b}px)`;
+        case "top":
+            return `translateY(-${b}px)`;
+        case "bottom":
+            return `translateY(${b}px)`;
+        default:
+            return "";
     }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
+}, ft = (e)=>{
+    const O = parseFloat(getComputedStyle(e, null).paddingLeft) + parseFloat(getComputedStyle(e, null).paddingRight), m = parseFloat(getComputedStyle(e, null).paddingTop) + parseFloat(getComputedStyle(e, null).paddingBottom), w = e.offsetWidth - O, h = e.offsetHeight - m;
+    return {
+        width: w,
+        height: h
+    };
+}, ct = (e, O, m, w, h)=>{
+    if (!e || !O) return;
+    const { top: D, bottom: R, left: W, right: V } = e, I = w - R, g = h - V, M = D, n = W, { width: B, height: $ } = ft(O), S = B + E, d = $ + E, y = S <= Math.max(n, g), T = d <= Math.max(I, M);
+    if (!(!T && !y)) switch(m){
+        case "left":
+            return y ? S <= n ? "left" : "right" : I > M ? "bottom" : "top";
+        case "right":
+            return y ? S <= g ? "right" : "left" : I > M ? "bottom" : "top";
+        case "top":
+            return T ? d <= M ? "top" : "bottom" : n > g ? "left" : "right";
+        case "bottom":
+            return T ? d <= I ? "bottom" : "top" : n > g ? "left" : "right";
+        default:
+            return;
     }
-    return target;
-}
-import { jsxs as P, Fragment as et, jsx as w } from "react/jsx-runtime";
-import * as o from "react";
-import E from "classnames";
-import { CSSTransition as rt } from "react-transition-group";
-import { useTheme as nt, useScreenSize as ot, useAriaId as it } from "./hooks.js";
-import { Portal as at } from "./portal.js";
-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 { 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",
-        "target",
-        "title",
-        "targetLabel",
-        "delay",
-        "dataAttributes",
-        "targetStyle",
-        "unstable_offsetX",
-        "textCenter"
+}, Xt = (param)=>{
+    let { children: e, extra: O, description: m, target: w, title: h, width: D, position: R = "top", dataAttributes: W, delay: V = !0, centerContent: I, open: g, textCenter: M } = param;
+    const n = ht(), { openTooltipId: B } = $t(), { openTooltip: $, closeTooltip: S } = Pt(), [d, y] = i.useState(), [T, J] = i.useState(), X = i.useRef(null), z = i.useRef(null), [_, pt] = i.useState(null), p = Nt(), H = V ? Wt : 0, [Q, Y] = i.useState(!1), [tt, P] = i.useState(!1), G = g !== void 0, [et, K] = i.useState(!1), v = G ? g : n === B, U = kt(), l = it(X, v), dt = it(z, v, !0), s = gt(), x = i.useCallback(()=>{
+        K(!1), Y(!1), P(!1);
+    }, []);
+    i.useEffect(()=>{
+        v || x();
+    }, [
+        v,
+        x
+    ]), i.useEffect(()=>{
+        if (!_ || !v) return;
+        const r = ct(l, _, R, s.height, s.width);
+        if (!r || !l) {
+            y(void 0), J(void 0), x();
+            return;
+        }
+        let o, t;
+        const { left: a, right: C, top: N, bottom: k } = l, { width: L, height: A } = ft(_), ot = s.width - L, rt = s.height - A, u = parseInt(wt(Z.borderRadii.container)) || 8;
+        switch(r){
+            case "top":
+                o = {
+                    left: Math.max(0, Math.min(ot, (a + C - L) / 2)),
+                    top: N - A - c / 2,
+                    padding: `0px 0px ${E}px 0px`
+                }, t = {
+                    left: Math.max(u, Math.min(s.width - u - c, (a + C - c) / 2)),
+                    top: "100%"
+                };
+                break;
+            case "bottom":
+                o = {
+                    left: Math.max(0, Math.min(ot, (a + C - L) / 2)),
+                    top: k - b,
+                    padding: `${E}px 0px 0px 0px`
+                }, t = {
+                    left: Math.max(u, Math.min(s.width - u - c, (a + C - c) / 2)),
+                    bottom: "100%",
+                    transform: "rotate(180deg)"
+                };
+                break;
+            case "left":
+                o = {
+                    left: a - L - c / 2,
+                    top: Math.max(0, Math.min(rt, (N + k - A) / 2)),
+                    padding: `0px ${E}px 0px 0px`
+                }, t = {
+                    top: Math.max(u, Math.min(s.height - u - c, (N + k - c) / 2)),
+                    left: "100%",
+                    transform: "rotate(-90deg)",
+                    transformOrigin: "bottom"
+                };
+                break;
+            case "right":
+            default:
+                o = {
+                    left: C - b,
+                    top: Math.max(0, Math.min(rt, (N + k - A) / 2)),
+                    padding: `0px 0px 0px ${E}px`
+                }, t = {
+                    top: Math.max(u, Math.min(s.height - u - c, (N + k - c) / 2)),
+                    right: "100%",
+                    transform: "rotate(90deg)",
+                    transformOrigin: "bottom"
+                };
+                break;
+        }
+        typeof t.top == "number" && (t.top -= o.top, t.top = `${t.top / A * 100}%`), typeof t.left == "number" && (t.left -= o.left, t.left = `${t.left / L * 100}%`), st(o, d) || y(o), st(t, T) || J(t);
+    }, [
+        _,
+        l,
+        dt,
+        v,
+        R,
+        s,
+        d,
+        T,
+        U,
+        p,
+        n,
+        x
     ]);
-    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,
-        bottom: 0,
-        width: 0,
-        height: 0
-    }), [X, q] = o.useState({}), G = (n)=>H ? n || Bt : n || $t, [e, J] = o.useState(void 0), i = ((n)=>{
-        if (!e) return n;
-        const u = (d)=>{
-            const p = t.current.top > e.height;
-            return t.current.left < e.width ? p ? "top" : "bottom" : d;
-        }, l = (d)=>t.current.right + e.width > window.innerWidth ? u("left") : d;
-        return ({
-            top: t.current.top < e.height ? l("bottom") : l(n),
-            right: l(n),
-            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(R.position)), O = Rt() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
-        a && C(!1);
-    };
-    o.useEffect(()=>(window.addEventListener("resize", W), ()=>{
-            window.removeEventListener("resize", W);
-        }));
-    const $ = ()=>{
-        C(!1);
-    }, T = ()=>{
-        y.current && (t.current = y.current.getBoundingClientRect(), C(!a));
-    }, Q = ()=>{
-        a || T();
-    }, U = (n)=>{
-        n.keyCode === st && $();
-    }, Z = (n)=>{
-        if (!e) return {};
-        const u = e.width > t.current.width && t.current.left + t.current.width / 2 < e.width / 2 + 16 ? t.current.width / 2 : "50%";
-        return n === "bottom" || n === "top" ? {
-            left: u
-        } : {};
-    }, B = o.useCallback((n, u)=>{
-        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: {
-                left: t.current.right + e.width > window.innerWidth ? d : t.current.right + m,
-                top: t.current.right + e.width > window.innerWidth ? p : f || window.pageYOffset + t.current.top + t.current.height / 2
-            },
-            left: {
-                left: d,
-                top: p
-            },
-            top: {
-                top: t.current.right + e.width > window.innerWidth ? p : window.pageYOffset + t.current.top - m,
-                left: t.current.right + e.width > window.innerWidth ? d : A
-            },
-            bottom: {
-                top: t.current.right + e.width > window.innerWidth ? p : window.pageYOffset + t.current.bottom + m,
-                left: t.current.right + e.width > window.innerWidth ? d : A
+    const j = i.useRef(!1);
+    i.useEffect(()=>{
+        const r = (a)=>{
+            switch(a.key){
+                case Ct:
+                    x();
+                    break;
+                case _t:
+                    j.current = !0;
+                    break;
             }
-        })[n];
+        }, o = ()=>j.current = !1, t = (a)=>{
+            p && l && (a.clientX < l.left || a.clientX > l.right || a.clientY < l.top || a.clientY > l.bottom) && x();
+        };
+        return document.addEventListener("keydown", r, !1), document.addEventListener("keyup", o, !1), document.addEventListener("click", t, !1), ()=>{
+            document.removeEventListener("keydown", r, !1), document.removeEventListener("keyup", o, !1), document.removeEventListener("click", t, !1);
+        };
     }, [
-        f,
-        e
-    ]), 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),
-        [s.enterDoneTransform]: kt(i),
-        [s.shadowAlpha]: jt(F),
-        [s.arrowBoxShadow]: Kt(i)
-    });
-    return o.useEffect(()=>{
-        i && x.current && a && q(B(i, b || 0));
+        p,
+        x,
+        l
+    ]), i.useEffect(()=>{
+        G || (tt || Q || et ? $(n) : S(n));
     }, [
-        a,
-        B,
-        i,
-        b
-    ]), o.useEffect(()=>{
-        x.current && (x.current.getBoundingClientRect(), a && J(x.current.getBoundingClientRect()));
-    }, [
-        a
-    ]), /* @__PURE__ */ P(et, {
+        tt,
+        Q,
+        et,
+        n,
+        $,
+        S,
+        G
+    ]);
+    const ut = ct(l, _, R, s.height, s.width);
+    return /* @__PURE__ */ F(mt, {
         children: [
-            /* @__PURE__ */ w("div", {
-                ref: y,
-                style: K,
-                className: lt,
-                onPointerOver: ()=>{
-                    c.current && (clearTimeout(c.current), c.current = null), !h.current && (h.current = !0, V ? g.current = setTimeout(()=>{
-                        g.current = null, T();
-                    }, Mt) : T());
+            /* @__PURE__ */ f("div", {
+                ref: (r)=>{
+                    const o = r == null ? void 0 : r.firstElementChild;
+                    o && o !== X.current && (X.current = o);
                 },
-                onPointerLeave: O ? M : ()=>{
-                    if (g.current) {
-                        clearTimeout(g.current), g.current = null, h.current = !1;
-                        return;
-                    }
-                    c.current = setTimeout(()=>{
-                        h.current && (c.current = null, h.current = !1, T());
-                    }, 100);
+                onMouseOver: ()=>{
+                    p || P(!0);
                 },
-                onFocus: Q,
-                onKeyDown: U,
-                "touch-action": "auto",
-                role: "button",
-                tabIndex: 0,
-                "aria-describedby": D,
-                "aria-expanded": a,
-                "aria-label": L,
-                children: k
+                onMouseLeave: ()=>{
+                    p || P(!1);
+                },
+                onClick: ()=>{
+                    p && P(!0);
+                },
+                onFocus: ()=>{
+                    j.current && K(!0);
+                },
+                onBlur: ()=>{
+                    p || K(!1);
+                },
+                "aria-describedby": n,
+                children: w
             }),
-            /* @__PURE__ */ P(at, {
-                children: [
-                    a && O && /* @__PURE__ */ w(ct, {
-                        onPress: $
-                    }),
-                    /* @__PURE__ */ w(rt, {
-                        in: a,
-                        timeout: It,
-                        classNames: {
-                            enter: dt,
-                            enterActive: ft,
-                            enterDone: ht,
-                            exit: wt,
-                            exitActive: mt
-                        },
-                        unmountOnExit: !0,
-                        children: /* @__PURE__ */ P("div", _object_spread_props(_object_spread({
-                            ref: x
-                        }, Ot(j, "Tooltip")), {
+            /* @__PURE__ */ f(Tt, {
+                children: /* @__PURE__ */ f(vt, {
+                    in: v,
+                    nodeRef: z,
+                    timeout: Ft() ? 0 : {
+                        enter: Dt + H,
+                        exit: Vt
+                    },
+                    mountOnEnter: !0,
+                    unmountOnExit: !0,
+                    children: (r)=>/* @__PURE__ */ f("div", _object_spread_props(_object_spread({
+                            style: {
+                                /**
+               * Hack to prevent text from wrapping automatically when touching the viewport's edges,
+               * even if the content's width didn't reach the max width.
+               * https://stackoverflow.com/questions/66106629/how-to-disable-text-wrapping-when-viewport-border-is-reached
+               */ width: `calc(100vw + ${lt}px)`,
+                                top: 0,
+                                left: 0,
+                                position: "fixed",
+                                visibility: d ? "visible" : "hidden"
+                            }
+                        }, Rt(W, "Tooltip")), {
                             role: "tooltip",
-                            id: D,
-                            className: E(pt, gt, z ? xt : ""),
-                            style: _object_spread({
-                                width: b
-                            }, X, tt),
-                            onPointerOver: ()=>{
-                                c.current && (clearTimeout(c.current), c.current = null);
-                            },
-                            onPointerLeave: O ? M : ()=>{
-                                c.current = setTimeout(()=>{
-                                    h.current && (c.current = null, h.current = !1, T());
-                                }, 100);
-                            },
-                            children: [
-                                /* @__PURE__ */ w("div", {
-                                    style: Z(i),
-                                    className: E(Tt, _[i]),
-                                    children: /* @__PURE__ */ w("div", {
-                                        className: vt
-                                    })
+                            "aria-label": n,
+                            tabIndex: -1,
+                            children: /* @__PURE__ */ f("div", {
+                                className: q(xt),
+                                style: _object_spread_props(_object_spread({
+                                    pointerEvents: r === "entered" ? "auto" : "none",
+                                    transform: Bt(ut)
+                                }, d, bt[r]), {
+                                    transition: r === "entering" ? `opacity .1s linear ${H}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${H}ms` : "opacity .1s linear"
                                 }),
-                                (Y || S) && /* @__PURE__ */ P(ut, {
-                                    space: 4,
+                                ref: At(pt, z),
+                                onMouseEnter: ()=>{
+                                    !p && r === "entered" && Y(!0);
+                                },
+                                onMouseLeave: ()=>{
+                                    p || Y(!1);
+                                },
+                                children: /* @__PURE__ */ F("div", {
+                                    className: Ot,
+                                    style: _object_spread({
+                                        width: D
+                                    }, at(U)),
                                     children: [
-                                        Y && /* @__PURE__ */ w(I, {
-                                            medium: !0,
-                                            children: Y
+                                        /* @__PURE__ */ f("div", {
+                                            className: q(It, I || M ? Mt : void 0),
+                                            style: {
+                                                maxWidth: Math.min(lt, s.width)
+                                            },
+                                            children: /* @__PURE__ */ F(Lt, {
+                                                isInverse: !1,
+                                                children: [
+                                                    (h || m) && /* @__PURE__ */ F(Et, {
+                                                        space: 4,
+                                                        children: [
+                                                            h && /* @__PURE__ */ f(nt, {
+                                                                medium: !0,
+                                                                children: h
+                                                            }),
+                                                            m && /* @__PURE__ */ f(nt, {
+                                                                regular: !0,
+                                                                children: m
+                                                            })
+                                                        ]
+                                                    }),
+                                                    O || e
+                                                ]
+                                            })
                                         }),
-                                        S && /* @__PURE__ */ w(I, {
-                                            regular: !0,
-                                            children: S
+                                        /* @__PURE__ */ f("div", {
+                                            className: St,
+                                            style: T,
+                                            children: /* @__PURE__ */ f("div", {
+                                                className: q(yt),
+                                                style: at(U)
+                                            })
                                         })
                                     ]
-                                }),
-                                N || r
-                            ]
+                                })
+                            })
                         }))
-                    })
-                ]
+                })
             })
         ]
     });
-}, ae = zt;
-export { ae as default };
+}, se = Xt;
+export { se as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./touchable.css.ts.vanilla.css-mistica.js";
-var f = "mhti6u1 _1y2v1nfe9", y = "mhti6u4", _ = "mhti6u1 _1y2v1nfe9 _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbc _1y2v1nfds _1y2v1nfbx _1y2v1nf30 _1y2v1nf62 _1y2v1nfeb";
+var f = "mhti6u1 _1y2v1nfea", y = "mhti6u4", _ = "mhti6u1 _1y2v1nfea _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbc _1y2v1nfds _1y2v1nfbx _1y2v1nf30 _1y2v1nf62 _1y2v1nfec";
 export { f as base, y as notTouchable, _ as touchable };

package/dist-es/touchable.js

@@ -58,13 +58,13 @@ import A from "./screen-reader-only.js";
 import { notTouchable as _, touchable as H, base as K } from "./touchable.css-mistica.js";
 import { useTheme as j } from "./hooks.js";
 import { isInsideNovumNativeApp as B } from "./utils/platform.js";
-import { ENTER as S, SPACE as V } from "./utils/key-codes.js";
+import { ENTER as S, SPACE as V } from "./utils/keys.js";
 import { getPrefixedDataAttributes as W } from "./utils/dom.js";
 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(), x = E(), f = c.useRef(!1);
     let l = [];
     e.trackingEvent && (Array.isArray(e.trackingEvent) ? l = e.trackingEvent : l = [
         e.trackingEvent
@@ -89,28 +89,28 @@ const L = function(e) {
         e.onPress && e.onPress(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 : "" : "";
+        return e.href ? x(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();
         }));
-    }, x = (a)=>{
+    }, R = (a)=>{
         if (s(a), !l.length) {
             h(a);
             return;
         }
         g(()=>h(a));
-    }, R = (a)=>{
+    }, C = (a)=>{
         s(a), l.length && (a.preventDefault(), g(()=>L(k(), r, m)));
     }, D = (a)=>{
         s(a), y();
     }, w = (a)=>{
-        (a.keyCode === S || a.keyCode === V) && (a.preventDefault(), a.currentTarget.click());
+        (a.key === S || a.key === V) && (a.preventDefault(), a.currentTarget.click());
     };
     if (e.href || e.to && e.fullPageOnWebView && B(N)) return /* @__PURE__ */ I("a", _object_spread_props(_object_spread({}, n), {
         "aria-label": e["aria-label"],
         "aria-labelledby": e["aria-labelledby"],
-        onClick: R,
+        onClick: C,
         onKeyDown: w,
         href: e.disabled ? void 0 : k(),
         target: (()=>{
@@ -152,7 +152,7 @@ const L = function(e) {
             "aria-labelledby": e["aria-labelledby"],
             type: u,
             ref: t,
-            onClick: x,
+            onClick: R,
             children: o
         }));
     }

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

@@ -1,6 +1,6 @@
 import "../sprinkles.css.ts.vanilla.css-mistica.js";
 import "./aspect-ratio-support.css.ts.vanilla.css-mistica.js";
-var a = "yqswj62", n = "_1y2v1nfbx _1y2v1nfce _1y2v1nfeg _1y2v1nfev", e = {
+var a = "yqswj62", n = "_1y2v1nfbx _1y2v1nfce _1y2v1nfeh _1y2v1nfew", e = {
     aspectRatio: "var(--yqswj60)"
-}, y = "_1y2v1nfea _1y2v1nfdp _1y2v1nfdq _1y2v1nfb4";
+}, y = "_1y2v1nfeb _1y2v1nfdp _1y2v1nfdq _1y2v1nfb4";
 export { a as container, n as containerWithWrapper, e as vars, y as wrapper };

package/dist-es/utils/environment.js

@@ -1,2 +1,2 @@
-const e = ()=>typeof window > "u", i = ()=>!e();
-export { i as isClientSide, e as isServerSide };
+const e = ()=>typeof window > "u", i = ()=>!e(), o = ()=>i() ? window.matchMedia("(pointer: coarse)").matches : !1;
+export { i as isClientSide, e as isServerSide, o as isTouchableDevice };

package/dist-es/utils/keys.js

@@ -0,0 +1,2 @@
+const o = "ArrowLeft", t = "ArrowUp", n = "ArrowRight", r = "ArrowDown", c = "Enter", s = "Escape", E = " ", A = "Tab";
+export { r as DOWN, c as ENTER, s as ESC, o as LEFT, n as RIGHT, E as SPACE, A as TAB, t as UP };

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

@@ -1,3 +1,3 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
-var f = "_1y2v1nfeg _1y2v1nfev _1y2v1nfbc _1y2v1nf62 _1y2v1nfdp _1y2v1nfdq _1y2v1nfg4";
+var f = "_1y2v1nfeh _1y2v1nfew _1y2v1nfbc _1y2v1nf62 _1y2v1nfdp _1y2v1nfdq _1y2v1nfg5";
 export { f as video };