@telefonica/mistica 14.20.1 → 14.22.0

package/dist-es/text.js

@@ -82,7 +82,7 @@ import * as R from "react";
 import $ from "classnames";
 import { assignInlineVars as L } from "@vanilla-extract/dynamic";
 import { useIsInverseVariant as j } from "./theme-variant-context.js";
-import { pxToRem as p } from "./utils/css.js";
+import { pxToRem as h } from "./utils/css.js";
 import { getPrefixedDataAttributes as B } from "./utils/dom.js";
 import { useTheme as a } from "./hooks.js";
 import { vars as m } from "./skins/skin-contract.css-mistica.js";
@@ -93,21 +93,21 @@ const J = {
     medium: 500,
     bold: 700
 }, K = (e)=>e === !0 ? 1 : e || "initial", n = (param)=>{
-    let { weight: e , color: i = m.colors.textPrimary , decoration: t , truncate: o , transform: g , wordBreak: c = !0 , hyphens: S , as: z = "span" , children: h , size: u , mobileSize: d = u , desktopSize: b = u , lineHeight: T , mobileLineHeight: f = T , desktopLineHeight: k = T , letterSpacing: w , textAlign: H , textShadow: v , id: A , role: P , "aria-level": y , dataAttributes: I  } = param;
+    let { weight: e , color: i = m.colors.textPrimary , decoration: t , truncate: o , transform: l , wordBreak: c = !0 , hyphens: S , as: z = "span" , children: g , size: u , mobileSize: d = u , desktopSize: b = u , lineHeight: T , mobileLineHeight: f = T , desktopLineHeight: k = T , letterSpacing: w , textAlign: H , textShadow: v , id: A , role: P , "aria-level": y , dataAttributes: I  } = param;
     const W = j(), V = K(o), C = {
         [m.colors.textPrimary]: m.colors.textPrimaryInverse,
         [m.colors.textSecondary]: m.colors.textSecondaryInverse,
         [m.colors.textLink]: m.colors.textLinkInverse
     };
-    if (!h && h !== 0) return null;
+    if (!g && g !== 0) return null;
     const D = $(E, c ? N : q, {
         [F]: o === 1 || o === !0,
         [G]: o && o > 1
     }), M = L({
-        [x.mobileSize]: d ? p(d) : "",
-        [x.mobileLineHeight]: f ? p(f) : "",
-        [x.desktopSize]: b ? p(b) : "",
-        [x.desktopLineHeight]: k ? p(k) : ""
+        [x.mobileSize]: d ? h(d) : "inherit",
+        [x.mobileLineHeight]: f ? h(f) : "inherit",
+        [x.desktopSize]: b ? h(b) : "inherit",
+        [x.desktopLineHeight]: k ? h(k) : "inherit"
     }), O = o ? L({
         [x.lineClamp]: String(V)
     }) : {};
@@ -122,21 +122,21 @@ const J = {
             hyphens: S,
             letterSpacing: w,
             fontWeight: e ? J[e] : "inherit",
-            textTransform: g || "inherit",
+            textTransform: l || "inherit",
             textDecoration: t !== null && t !== void 0 ? t : "inherit",
             overflowWrap: c ? "anywhere" : "inherit",
             color: W ? (_C_i = C[i]) !== null && _C_i !== void 0 ? _C_i : i : i,
             textAlign: H,
             textShadow: v
         })
-    }), h);
-}, l = (e)=>{
+    }), g);
+}, p = (e)=>{
     if (e.light) return "light";
     if (e.regular) return "regular";
     if (e.medium) return "medium";
     if (e.weight) return e.weight;
 }, s = (param)=>{
-    let { forceMobileSizes: e , mobileSize: i , mobileLineHeight: t , desktopSize: o , desktopLineHeight: g  } = param;
+    let { forceMobileSizes: e , mobileSize: i , mobileLineHeight: t , desktopSize: o , desktopLineHeight: l  } = param;
     return e ? {
         size: i,
         lineHeight: t
@@ -144,7 +144,7 @@ const J = {
         mobileSize: i,
         mobileLineHeight: t,
         desktopSize: o,
-        desktopLineHeight: g
+        desktopLineHeight: l
     };
 }, oe = (_param)=>{
     var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
@@ -266,12 +266,12 @@ const J = {
         desktopSize: 20,
         desktopLineHeight: "28px"
     })), {
-        weight: l(t),
+        weight: p(t),
         dataAttributes: _object_spread({
             "component-name": "Text4"
         }, e)
     }), t));
-}, pe = (_param)=>/* @__PURE__ */ {
+}, he = (_param)=>/* @__PURE__ */ {
     var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
@@ -283,12 +283,12 @@ const J = {
         desktopSize: 18,
         desktopLineHeight: "24px"
     })), {
-        weight: l(t),
+        weight: p(t),
         dataAttributes: _object_spread({
             "component-name": "Text3"
         }, e)
     }), t));
-}, le = (_param)=>/* @__PURE__ */ {
+}, pe = (_param)=>/* @__PURE__ */ {
     var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
@@ -300,12 +300,12 @@ const J = {
         desktopSize: 16,
         desktopLineHeight: "24px"
     })), {
-        weight: l(t),
+        weight: p(t),
         dataAttributes: _object_spread({
             "component-name": "Text2"
         }, e)
     }), t));
-}, ge = (_param)=>/* @__PURE__ */ {
+}, le = (_param)=>/* @__PURE__ */ {
     var { dataAttributes: e , forceMobileSizes: i  } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "forceMobileSizes"
@@ -317,10 +317,10 @@ const J = {
         desktopSize: 14,
         desktopLineHeight: "20px"
     })), {
-        weight: l(t),
+        weight: p(t),
         dataAttributes: _object_spread({
             "component-name": "Text1"
         }, e)
     }), t));
-}, he = n;
-export { n as Text, ge as Text1, oe as Text10, le as Text2, pe as Text3, xe as Text4, ae as Text5, me as Text6, se as Text7, re as Text8, ne as Text9, he as default };
+}, ge = n;
+export { n as Text, le as Text1, oe as Text10, pe as Text2, he as Text3, xe as Text4, ae as Text5, me as Text6, se as Text7, re as Text8, ne as Text9, ge as default };

package/dist-es/theme.js

@@ -77,7 +77,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 const l = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar u ocultar contrase\xf1a",
@@ -110,8 +110,9 @@ const l = {
     carouselNextButton: "siguiente",
     carouselPrevButton: "anterior",
     playIconButtonLabel: "Reproducir",
-    pauseIconButtonLabel: "Pausar"
-}, n = {
+    pauseIconButtonLabel: "Pausar",
+    sheetConfirmButton: "Continuar"
+}, i = {
     expirationDatePlaceholder: "MM/YY",
     togglePasswordVisibilityLabel: "Toggle password visibility",
     loading: "Loading",
@@ -143,7 +144,8 @@ const l = {
     carouselNextButton: "next",
     carouselPrevButton: "previous",
     playIconButtonLabel: "Play",
-    pauseIconButtonLabel: "Pause"
+    pauseIconButtonLabel: "Pause",
+    sheetConfirmButton: "Continue"
 }, d = {
     expirationDatePlaceholder: "MM/JJ",
     togglePasswordVisibilityLabel: "Passwort un-/sichtbar machen",
@@ -176,7 +178,8 @@ const l = {
     carouselNextButton: "n\xe4chste",
     carouselPrevButton: "vorherige",
     playIconButtonLabel: "Abspielen",
-    pauseIconButtonLabel: "Pausieren"
+    pauseIconButtonLabel: "Pausieren",
+    sheetConfirmButton: "Fortfahren"
 }, s = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar ou ocultar senha",
@@ -209,7 +212,8 @@ const l = {
     carouselNextButton: "pr\xf3ximo",
     carouselPrevButton: "anterior",
     playIconButtonLabel: "Reproduzir",
-    pauseIconButtonLabel: "Pausar"
+    pauseIconButtonLabel: "Pausar",
+    sheetConfirmButton: "Continuar"
 }, b = (e)=>{
     switch(e.toLocaleLowerCase().split(/[-_]/)[0]){
         case "es":
@@ -219,55 +223,55 @@ const l = {
         case "de":
             return d;
         case "en":
-            return n;
+            return i;
         default:
-            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${e}`), n;
+            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${e}`), i;
     }
 }, c = 56, u = 80, E = {
     headerMobileHeight: c,
     headerDesktopHeight: u
 }, C = (_param)=>/* @__PURE__ */ {
-    var { to: e , innerRef: r  } = _param, a = _object_without_properties(_param, [
+    var { to: e , innerRef: r  } = _param, o = _object_without_properties(_param, [
         "to",
         "innerRef"
     ]);
-    return o("a", _object_spread_props(_object_spread({
+    return a("a", _object_spread_props(_object_spread({
         ref: r,
         href: typeof e == "string" ? e : e == null ? void 0 : e.pathname
-    }, a), {
-        children: a.children
+    }, o), {
+        children: o.children
     }));
 }, m = (e)=>e, f = (e)=>(_param)=>/* @__PURE__ */ {
-        var { innerRef: r  } = _param, a = _object_without_properties(_param, [
+        var { innerRef: r  } = _param, o = _object_without_properties(_param, [
             "innerRef"
         ]);
-        return o(e, _object_spread({
+        return a(e, _object_spread({
             ref: r
-        }, a));
+        }, o));
     }, p = (e)=>(_param)=>/* @__PURE__ */ {
-        var { to: r , innerRef: a , children: t  } = _param, i = _object_without_properties(_param, [
+        var { to: r , innerRef: o , children: t  } = _param, n = _object_without_properties(_param, [
             "to",
             "innerRef",
             "children"
         ]);
-        return o(e, {
+        return a(e, {
             href: r,
-            children: /* @__PURE__ */ o("a", _object_spread_props(_object_spread({
-                ref: a
-            }, i), {
+            children: /* @__PURE__ */ a("a", _object_spread_props(_object_spread({
+                ref: o
+            }, n), {
                 children: t
             }))
         });
     }, v = (e)=>(_param)=>/* @__PURE__ */ {
-        var { to: r , innerRef: a , children: t  } = _param, i = _object_without_properties(_param, [
+        var { to: r , innerRef: o , children: t  } = _param, n = _object_without_properties(_param, [
             "to",
             "innerRef",
             "children"
         ]);
-        return o(e, _object_spread_props(_object_spread({
+        return a(e, _object_spread_props(_object_spread({
             href: r,
-            ref: a
-        }, i), {
+            ref: o
+        }, n), {
             children: t
         }));
     }, h = (e)=>{

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

@@ -1,11 +1,11 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./tooltip.css.ts.vanilla.css-mistica.js";
-var v = "_1xhatbpb _1y2v1nfb0 _1y2v1nfe6 _1y2v1nfbx _1y2v1nfcd _1y2v1nfdo _1y2v1nf31 _1y2v1nfdl", t = "_1xhatbpe", _ = "_1xhatbpf", n = "_1xhatbpd", e = "_1xhatbpc", f = "_1y2v1nfb0 _1y2v1nfc0 _1y2v1nfcd _1y2v1nfe4 _1y2v1nf2", p = "_1xhatbpj _1y2v1nf68 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb0 _1y2v1nfeq _1y2v1nfbs _1y2v1nfdx _1y2v1nfdl", o = "_1xhatbpk", b = "_1xhatbpl", x = "_1xhatbpm", h = "_1xhatbpn", y = "_1xhatbpo", m = "_1xhatbp6", d = "_1xhatbp7", i = "_1xhatbp8", w = {
+var v = "_1xhatbpb _1y2v1nfb0 _1y2v1nfeb _1y2v1nfby _1y2v1nfce _1y2v1nfdp _1y2v1nf31 _1y2v1nfdm", t = "_1xhatbpe", _ = "_1xhatbpf", e = "_1xhatbpd", n = "_1xhatbpc", f = "_1y2v1nfb0 _1y2v1nfc1 _1y2v1nfce _1y2v1nfe5 _1y2v1nf2", p = "_1xhatbpj _1y2v1nf68 _1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb0 _1y2v1nfev _1y2v1nfbt _1y2v1nfdy _1y2v1nfdm", b = "_1xhatbpl", o = "_1xhatbpm", x = "_1xhatbpn", y = "_1xhatbpo", h = "_1xhatbpp", m = "_1xhatbp6", i = "_1xhatbp7", d = "_1xhatbp8", w = "_1xhatbpk", c = {
     shadowAlpha: "var(--_1xhatbp0)",
     enterTransform: "var(--_1xhatbp1)",
     enterDoneTransform: "var(--_1xhatbp2)",
     exitTransform: "var(--_1xhatbp3)",
     enterActiveAnimationName: "var(--_1xhatbp4)",
     arrowBoxShadow: "var(--_1xhatbp5)"
-}, s = "_1y2v1nfb8";
-export { v as arrow, t as arrowBottom, _ as arrowLeft, n as arrowRight, e as arrowTop, f as arrowWrapper, p as container, o as enter, b as enterActive, x as enterDone, h as exit, y as exitActive, m as fadeInBottomKeyframes, d as fadeInTopKeyframes, i as fadeInXKeyframes, w as vars, s as wrapper };
+}, s = "_1y2v1nfb9";
+export { v as arrow, t as arrowBottom, _ as arrowLeft, e as arrowRight, n as arrowTop, f as arrowWrapper, p as container, b as enter, o as enterActive, x as enterDone, y as exit, h as exitActive, m as fadeInBottomKeyframes, i as fadeInTopKeyframes, d as fadeInXKeyframes, w as textAlign, c as vars, s as wrapper };

package/dist-es/tooltip.js

@@ -77,22 +77,22 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as p, Fragment as z, jsx as s } from "react/jsx-runtime";
-import * as c from "react";
-import F from "classnames";
-import { CSSTransition as V } from "react-transition-group";
-import { useTheme as j, useScreenSize as q, useAriaId as G } from "./hooks.js";
-import { Portal as H } from "./portal.js";
-import J from "./overlay.js";
-import { Text2 as O } from "./text.js";
-import { TAB as Q } from "./utils/key-codes.js";
-import U from "./stack.js";
-import { vars as n, wrapper as Z, enter as _, enterActive as tt, enterDone as et, exit as rt, exitActive as nt, container as ot, arrowWrapper as at, arrow as it, fadeInTopKeyframes as st, fadeInBottomKeyframes as ct, fadeInXKeyframes as lt, arrowTop as ut, arrowBottom as ft, arrowLeft as mt, arrowRight as dt } from "./tooltip.css-mistica.js";
-import { assignInlineVars as pt } from "@vanilla-extract/dynamic";
-import { getPrefixedDataAttributes as ht } from "./utils/dom.js";
-import { isClientSide as gt, isServerSide as wt } from "./utils/environment.js";
-const xt = "bottom", Tt = "top", bt = 12, h = 4 + bt, g = 16, vt = 340, At = 500, d = 12, Yt = 500, R = ()=>{}, Pt = (t)=>t || vt, St = (t)=>t === "bottom" ? `translateY(${d}px)` : t === "top" ? `translateY(calc(-100% - ${d}px))` : t === "right" ? `translateX(${d}px) translateY(-50%)` : t === "left" ? `translateX(-${d}px) translateY(-50%)` : `translateY(-${d}px)`, yt = (t)=>t === "top" ? "translateY(-100%)" : t === "bottom" ? "translateY(0)" : "translateY(-50%)", Dt = (t)=>t === "bottom" ? "translateY(0)" : t === "top" ? "translateY(-100%)" : t === "right" || t === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", Ot = (t)=>t === "top" ? st : t === "bottom" ? ct : lt, Rt = (t)=>t ? "1" : "0.2", $t = (t)=>t === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${n.shadowAlpha})` : t === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${n.shadowAlpha})` : t === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${n.shadowAlpha})` : t === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${n.shadowAlpha})` : "", It = (_param)=>{
-    var { children: t , extra: $ , description: w , target: I , title: x , targetLabel: C , delay: B = !0 , dataAttributes: E  } = _param, Y = _object_without_properties(_param, [
+import { jsxs as P, Fragment as tt, jsx as w } from "react/jsx-runtime";
+import * as o from "react";
+import E from "classnames";
+import { CSSTransition as et } from "react-transition-group";
+import { useTheme as rt, useScreenSize as nt, useAriaId as ot } from "./hooks.js";
+import { Portal as it } from "./portal.js";
+import at from "./overlay.js";
+import { Text2 as I } from "./text.js";
+import { TAB as ct } from "./utils/key-codes.js";
+import st from "./stack.js";
+import { vars as s, wrapper as ut, enter as lt, enterActive as dt, enterDone as ft, exit as ht, exitActive as wt, container as mt, textAlign as pt, arrowWrapper as gt, arrow as xt, fadeInTopKeyframes as Tt, fadeInBottomKeyframes as vt, fadeInXKeyframes as bt, arrowTop as At, arrowBottom as Pt, arrowLeft as St, arrowRight as Yt } from "./tooltip.css-mistica.js";
+import { assignInlineVars as Ot } from "@vanilla-extract/dynamic";
+import { getPrefixedDataAttributes as Rt } from "./utils/dom.js";
+import { isClientSide as yt, isServerSide as Ct } from "./utils/environment.js";
+const Dt = "bottom", Wt = "top", $t = 12, m = 4 + $t, Bt = 500, v = 12, Et = 500, M = ()=>{}, It = (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)`, Mt = (r)=>r === "top" ? "translateY(-100%)" : r === "bottom" ? "translateY(0)" : "translateY(-50%)", Nt = (r)=>r === "bottom" ? "translateY(0)" : r === "top" ? "translateY(-100%)" : r === "right" || r === "left" ? "translateX(0px) translateY(-50%)" : "translateY(0px)", kt = (r)=>r === "top" ? Tt : r === "bottom" ? vt : bt, Lt = (r)=>r ? "1" : "0.2", Vt = (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})` : "", jt = (_param)=>{
+    var { children: r , extra: N , description: S , target: k , title: Y , targetLabel: L , delay: V = !0 , dataAttributes: j , targetStyle: K , unstable_offsetX: f  } = _param, C = _object_without_properties(_param, [
         "children",
         "extra",
         "description",
@@ -100,146 +100,182 @@ const xt = "bottom", Tt = "top", bt = 12, h = 4 + bt, g = 16, vt = 340, At = 500
         "title",
         "targetLabel",
         "delay",
-        "dataAttributes"
+        "dataAttributes",
+        "targetStyle",
+        "unstable_offsetX"
     ]);
-    const { isDarkMode: M  } = j(), [l, T] = c.useState(!1), { isTabletOrSmaller: u  } = q(), P = G(), o = c.useRef(!1), r = c.useRef(null), f = c.useRef(null), b = c.useRef(null), e = c.useRef({
+    const { isDarkMode: z  } = rt(), [a, O] = o.useState(!1), { isTabletOrSmaller: F  } = nt(), D = ot(), h = o.useRef(!1), c = o.useRef(null), g = o.useRef(null), R = o.useRef(null), x = o.useRef(null), t = o.useRef({
         top: 0,
         right: 0,
         left: 0,
         bottom: 0,
         width: 0,
         height: 0
-    }), a = function() {
-        let i = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : xt;
-        return u && (i === "left" || i === "right") ? Tt : i;
-    }(Y.position), v = gt() ? window.matchMedia("(pointer: coarse)").matches : !1, S = ()=>{
-        l && T(!1);
+    }), [H, X] = o.useState({}), q = (n)=>F ? n || Wt : n || Dt, [e, G] = 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];
+    })(q(C.position)), y = yt() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
+        a && O(!1);
     };
-    c.useEffect(()=>(window.addEventListener("resize", S), ()=>{
-            window.removeEventListener("resize", S);
+    o.useEffect(()=>(window.addEventListener("resize", W), ()=>{
+            window.removeEventListener("resize", W);
         }));
-    const y = ()=>{
-        T(!1);
-    }, m = ()=>{
-        b.current && (e.current = b.current.getBoundingClientRect(), T(!l));
-    }, N = ()=>{
-        l || m();
-    }, k = (i)=>{
-        i.keyCode === Q && y();
-    }, X = (i, A)=>wt() ? {} : ({
+    const $ = ()=>{
+        O(!1);
+    }, T = ()=>{
+        R.current && (t.current = R.current.getBoundingClientRect(), O(!a));
+    }, J = ()=>{
+        a || T();
+    }, Q = (n)=>{
+        n.keyCode === ct && $();
+    }, U = (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 (Ct() || !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: e.current.right + h,
-                top: window.pageYOffset + e.current.top + e.current.height / 2
+                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: e.current.left - A - h,
-                top: window.pageYOffset + e.current.top + e.current.height / 2
+                left: d,
+                top: p
             },
             top: {
-                top: window.pageYOffset + e.current.top - h,
-                left: u ? g : window.pageXOffset + e.current.left + e.current.width / 2 - A / 2
+                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: window.pageYOffset + e.current.bottom + h,
-                left: u ? g : window.pageXOffset + e.current.left + e.current.width / 2 - A / 2
+                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
             }
-        })[i], L = ()=>u ? {
-            left: e.current.left + e.current.width / 2 - g
-        } : {}, D = (()=>u ? window.innerWidth - g * 2 : Pt(Y.width))(), K = {
-        top: ut,
-        bottom: ft,
-        left: mt,
-        right: dt
-    }, W = pt({
-        [n.enterTransform]: St(a),
-        [n.exitTransform]: Dt(a),
-        [n.enterActiveAnimationName]: Ot(a),
-        [n.enterDoneTransform]: yt(a),
-        [n.shadowAlpha]: Rt(M),
-        [n.arrowBoxShadow]: $t(a)
+        })[n];
+    }, [
+        f,
+        e
+    ]), b = (()=>C.width)(), Z = {
+        top: At,
+        bottom: Pt,
+        left: St,
+        right: Yt
+    }, _ = i && Ot({
+        [s.enterTransform]: It(i),
+        [s.exitTransform]: Nt(i),
+        [s.enterActiveAnimationName]: kt(i),
+        [s.enterDoneTransform]: Mt(i),
+        [s.shadowAlpha]: Lt(z),
+        [s.arrowBoxShadow]: Vt(i)
     });
-    return /* @__PURE__ */ p(z, {
+    return o.useEffect(()=>{
+        i && x.current && a && X(B(i, b || 0));
+    }, [
+        a,
+        B,
+        i,
+        b
+    ]), o.useEffect(()=>{
+        x.current && (x.current.getBoundingClientRect(), a && G(x.current.getBoundingClientRect()));
+    }, [
+        a
+    ]), /* @__PURE__ */ P(tt, {
         children: [
-            /* @__PURE__ */ s("div", {
-                ref: b,
-                className: Z,
+            /* @__PURE__ */ w("div", {
+                ref: R,
+                style: K,
+                className: ut,
                 onPointerOver: ()=>{
-                    r.current && (clearTimeout(r.current), r.current = null), !o.current && (o.current = !0, B ? f.current = setTimeout(()=>{
-                        f.current = null, m();
-                    }, Yt) : m());
+                    c.current && (clearTimeout(c.current), c.current = null), !h.current && (h.current = !0, V ? g.current = setTimeout(()=>{
+                        g.current = null, T();
+                    }, Et) : T());
                 },
-                onPointerLeave: v ? R : ()=>{
-                    if (f.current) {
-                        clearTimeout(f.current), f.current = null, o.current = !1;
+                onPointerLeave: y ? M : ()=>{
+                    if (g.current) {
+                        clearTimeout(g.current), g.current = null, h.current = !1;
                         return;
                     }
-                    r.current = setTimeout(()=>{
-                        o.current && (r.current = null, o.current = !1, m());
+                    c.current = setTimeout(()=>{
+                        h.current && (c.current = null, h.current = !1, T());
                     }, 100);
                 },
-                onFocus: N,
-                onKeyDown: k,
+                onFocus: J,
+                onKeyDown: Q,
                 "touch-action": "auto",
                 role: "button",
                 tabIndex: 0,
-                "aria-describedby": P,
-                "aria-expanded": l,
-                "aria-label": C,
-                children: I
+                "aria-describedby": D,
+                "aria-expanded": a,
+                "aria-label": L,
+                children: k
             }),
-            /* @__PURE__ */ p(H, {
+            /* @__PURE__ */ P(it, {
                 children: [
-                    l && v && /* @__PURE__ */ s(J, {
-                        onPress: y
+                    a && y && /* @__PURE__ */ w(at, {
+                        onPress: $
                     }),
-                    /* @__PURE__ */ s(V, {
-                        in: l,
-                        timeout: At,
+                    /* @__PURE__ */ w(et, {
+                        in: a,
+                        timeout: Bt,
                         classNames: {
-                            enter: _,
-                            enterActive: tt,
-                            enterDone: et,
-                            exit: rt,
-                            exitActive: nt
+                            enter: lt,
+                            enterActive: dt,
+                            enterDone: ft,
+                            exit: ht,
+                            exitActive: wt
                         },
                         unmountOnExit: !0,
-                        children: /* @__PURE__ */ p("div", _object_spread_props(_object_spread({}, ht(E, "Tooltip")), {
+                        children: /* @__PURE__ */ P("div", _object_spread_props(_object_spread({
+                            ref: x
+                        }, Rt(j, "Tooltip")), {
                             role: "tooltip",
-                            id: P,
-                            className: ot,
+                            id: D,
+                            className: E(mt, pt),
                             style: _object_spread({
-                                width: D
-                            }, X(a, D), W),
+                                width: b
+                            }, H, _),
                             onPointerOver: ()=>{
-                                r.current && (clearTimeout(r.current), r.current = null);
+                                c.current && (clearTimeout(c.current), c.current = null);
                             },
-                            onPointerLeave: v ? R : ()=>{
-                                r.current = setTimeout(()=>{
-                                    o.current && (r.current = null, o.current = !1, m());
+                            onPointerLeave: y ? M : ()=>{
+                                c.current = setTimeout(()=>{
+                                    h.current && (c.current = null, h.current = !1, T());
                                 }, 100);
                             },
                             children: [
-                                /* @__PURE__ */ s("div", {
-                                    className: F(at, K[a]),
-                                    style: L(),
-                                    children: /* @__PURE__ */ s("div", {
-                                        className: it
+                                /* @__PURE__ */ w("div", {
+                                    style: U(i),
+                                    className: E(gt, Z[i]),
+                                    children: /* @__PURE__ */ w("div", {
+                                        className: xt
                                     })
                                 }),
-                                (x || w) && /* @__PURE__ */ p(U, {
+                                (Y || S) && /* @__PURE__ */ P(st, {
                                     space: 4,
                                     children: [
-                                        x && /* @__PURE__ */ s(O, {
+                                        Y && /* @__PURE__ */ w(I, {
                                             medium: !0,
-                                            children: x
+                                            children: Y
                                         }),
-                                        w && /* @__PURE__ */ s(O, {
+                                        S && /* @__PURE__ */ w(I, {
                                             regular: !0,
-                                            children: w
+                                            children: S
                                         })
                                     ]
                                 }),
-                                $ || t
+                                N || r
                             ]
                         }))
                     })
@@ -247,5 +283,5 @@ const xt = "bottom", Tt = "top", bt = 12, h = 4 + bt, g = 16, vt = 340, At = 500
             })
         ]
     });
-}, Ht = It;
-export { Ht as default };
+}, oe = jt;
+export { oe 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 n = "mhti6u1 _1y2v1nfe3", f = "mhti6u4", _ = "mhti6u1 _1y2v1nfe3 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb6 _1y2v1nfdm _1y2v1nfbr _1y2v1nf2y _1y2v1nf5y _1y2v1nfe5";
-export { n as base, f as notTouchable, _ as touchable };
+var y = "mhti6u1 _1y2v1nfe4", f = "mhti6u4", _ = "mhti6u1 _1y2v1nfe4 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb7 _1y2v1nfdn _1y2v1nfbs _1y2v1nf2y _1y2v1nf5y _1y2v1nfe6";
+export { y as base, f as notTouchable, _ as touchable };