@telefonica/mistica 14.20.1 → 14.22.0

package/dist/tooltip.css-mistica.js

@@ -19,10 +19,10 @@ _export(exports, {
         return _;
     },
     arrowRight: function() {
-        return n;
+        return e;
     },
     arrowTop: function() {
-        return e;
+        return n;
     },
     arrowWrapper: function() {
         return f;
@@ -31,43 +31,46 @@ _export(exports, {
         return p;
     },
     enter: function() {
-        return o;
+        return b;
     },
     enterActive: function() {
-        return b;
+        return o;
     },
     enterDone: function() {
         return x;
     },
     exit: function() {
-        return h;
+        return y;
     },
     exitActive: function() {
-        return y;
+        return h;
     },
     fadeInBottomKeyframes: function() {
         return m;
     },
     fadeInTopKeyframes: function() {
-        return d;
+        return i;
     },
     fadeInXKeyframes: function() {
-        return i;
+        return d;
     },
-    vars: function() {
+    textAlign: function() {
         return w;
     },
+    vars: function() {
+        return c;
+    },
     wrapper: function() {
         return s;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";
+}, s = "_1y2v1nfb9";

package/dist/tooltip.css.d.ts

@@ -17,7 +17,9 @@ export declare const arrowBottom: string;
 export declare const arrowLeft: string;
 export declare const arrowWrapper: string;
 export declare const wrapper: string;
+export declare const tooltipMinWidth = 40;
 export declare const container: string;
+export declare const textAlign: string;
 export declare const enter: string;
 export declare const enterActive: string;
 export declare const enterDone: string;

package/dist/tooltip.d.ts

@@ -12,6 +12,8 @@ type Props = {
     targetLabel: string;
     delay?: boolean;
     dataAttributes?: DataAttributes;
+    targetStyle?: React.CSSProperties;
+    unstable_offsetX?: number;
 };
 declare const Tooltip: React.FC<Props>;
 export default Tooltip;

package/dist/tooltip.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return Ht;
+        return oe;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -145,8 +145,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-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" ? _tooltipcssmistica.fadeInTopKeyframes : t === "bottom" ? _tooltipcssmistica.fadeInBottomKeyframes : _tooltipcssmistica.fadeInXKeyframes, Rt = (t)=>t ? "1" : "0.2", $t = (t)=>t === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : t === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : t === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : t === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.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, [
+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" ? _tooltipcssmistica.fadeInTopKeyframes : r === "bottom" ? _tooltipcssmistica.fadeInBottomKeyframes : _tooltipcssmistica.fadeInXKeyframes, Lt = (r)=>r ? "1" : "0.2", Vt = (r)=>r === "top" ? `2px 2px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "right" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "left" ? `0 0 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.shadowAlpha})` : r === "bottom" ? `-1px -1px 4px 0 rgba(0, 0, 0, ${_tooltipcssmistica.vars.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",
@@ -154,101 +154,135 @@ 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  } = (0, _hooks.useTheme)(), [l, T] = _react.useState(!1), { isTabletOrSmaller: u  } = (0, _hooks.useScreenSize)(), P = (0, _hooks.useAriaId)(), o = _react.useRef(!1), r = _react.useRef(null), f = _react.useRef(null), b = _react.useRef(null), e = _react.useRef({
+    const { isDarkMode: z  } = (0, _hooks.useTheme)(), [a, O] = _react.useState(!1), { isTabletOrSmaller: F  } = (0, _hooks.useScreenSize)(), D = (0, _hooks.useAriaId)(), h = _react.useRef(!1), c = _react.useRef(null), g = _react.useRef(null), R = _react.useRef(null), x = _react.useRef(null), t = _react.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 = (0, _environment.isClientSide)() ? window.matchMedia("(pointer: coarse)").matches : !1, S = ()=>{
-        l && T(!1);
+    }), [H, X] = _react.useState({}), q = (n)=>F ? n || Wt : n || Dt, [e, G] = _react.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 = (0, _environment.isClientSide)() ? window.matchMedia("(pointer: coarse)").matches : !1, W = ()=>{
+        a && O(!1);
     };
-    _react.useEffect(()=>(window.addEventListener("resize", S), ()=>{
-            window.removeEventListener("resize", S);
+    _react.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 === _keycodes.TAB && y();
-    }, X = (i, A)=>(0, _environment.isServerSide)() ? {} : ({
+    const $ = ()=>{
+        O(!1);
+    }, T = ()=>{
+        R.current && (t.current = R.current.getBoundingClientRect(), O(!a));
+    }, J = ()=>{
+        a || T();
+    }, Q = (n)=>{
+        n.keyCode === _keycodes.TAB && $();
+    }, 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 = _react.useCallback((n, u)=>{
+        if ((0, _environment.isServerSide)() || !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 = {
+        })[n];
+    }, [
+        f,
+        e
+    ]), b = (()=>C.width)(), Z = {
         top: _tooltipcssmistica.arrowTop,
         bottom: _tooltipcssmistica.arrowBottom,
         left: _tooltipcssmistica.arrowLeft,
         right: _tooltipcssmistica.arrowRight
-    }, W = (0, _dynamic.assignInlineVars)({
-        [_tooltipcssmistica.vars.enterTransform]: St(a),
-        [_tooltipcssmistica.vars.exitTransform]: Dt(a),
-        [_tooltipcssmistica.vars.enterActiveAnimationName]: Ot(a),
-        [_tooltipcssmistica.vars.enterDoneTransform]: yt(a),
-        [_tooltipcssmistica.vars.shadowAlpha]: Rt(M),
-        [_tooltipcssmistica.vars.arrowBoxShadow]: $t(a)
+    }, _ = i && (0, _dynamic.assignInlineVars)({
+        [_tooltipcssmistica.vars.enterTransform]: It(i),
+        [_tooltipcssmistica.vars.exitTransform]: Nt(i),
+        [_tooltipcssmistica.vars.enterActiveAnimationName]: kt(i),
+        [_tooltipcssmistica.vars.enterDoneTransform]: Mt(i),
+        [_tooltipcssmistica.vars.shadowAlpha]: Lt(z),
+        [_tooltipcssmistica.vars.arrowBoxShadow]: Vt(i)
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return _react.useEffect(()=>{
+        i && x.current && a && X(B(i, b || 0));
+    }, [
+        a,
+        B,
+        i,
+        b
+    ]), _react.useEffect(()=>{
+        x.current && (x.current.getBoundingClientRect(), a && G(x.current.getBoundingClientRect()));
+    }, [
+        a
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: b,
+                ref: R,
+                style: K,
                 className: _tooltipcssmistica.wrapper,
                 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__ */ (0, _jsxruntime.jsxs)(_portal.Portal, {
                 children: [
-                    l && v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
-                        onPress: y
+                    a && y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overlay.default, {
+                        onPress: $
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                        in: l,
-                        timeout: At,
+                        in: a,
+                        timeout: Bt,
                         classNames: {
                             enter: _tooltipcssmistica.enter,
                             enterActive: _tooltipcssmistica.enterActive,
@@ -257,43 +291,45 @@ const xt = "bottom", Tt = "top", bt = 12, h = 4 + bt, g = 16, vt = 340, At = 500
                             exitActive: _tooltipcssmistica.exitActive
                         },
                         unmountOnExit: !0,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(E, "Tooltip")), {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+                            ref: x
+                        }, (0, _dom.getPrefixedDataAttributes)(j, "Tooltip")), {
                             role: "tooltip",
-                            id: P,
-                            className: _tooltipcssmistica.container,
+                            id: D,
+                            className: (0, _classnames.default)(_tooltipcssmistica.container, _tooltipcssmistica.textAlign),
                             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__ */ (0, _jsxruntime.jsx)("div", {
-                                    className: (0, _classnames.default)(_tooltipcssmistica.arrowWrapper, K[a]),
-                                    style: L(),
+                                    style: U(i),
+                                    className: (0, _classnames.default)(_tooltipcssmistica.arrowWrapper, Z[i]),
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _tooltipcssmistica.arrow
                                     })
                                 }),
-                                (x || w) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                (Y || S) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                     space: 4,
                                     children: [
-                                        x && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                        Y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                             medium: !0,
-                                            children: x
+                                            children: Y
                                         }),
-                                        w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                        S && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                             regular: !0,
-                                            children: w
+                                            children: S
                                         })
                                     ]
                                 }),
-                                $ || t
+                                N || r
                             ]
                         }))
                     })
@@ -301,4 +337,4 @@ const xt = "bottom", Tt = "top", bt = 12, h = 4 + bt, g = 16, vt = 340, At = 500
             })
         ]
     });
-}, Ht = It;
+}, oe = jt;

package/dist/touchable.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     base: function() {
-        return n;
+        return y;
     },
     notTouchable: function() {
         return f;
@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";
+var y = "mhti6u1 _1y2v1nfe4", f = "mhti6u4", _ = "mhti6u1 _1y2v1nfe4 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb7 _1y2v1nfdn _1y2v1nfbs _1y2v1nf2y _1y2v1nf5y _1y2v1nfe6";

package/dist/utils/animation.d.ts

@@ -6,7 +6,8 @@ type AnimationProps = {
     strokeDashoffset?: string;
     opacity?: number;
 };
-export declare const getAnimateDrawLineProps: (from: string, begin: string, platformOverrides: Theme['platformOverrides']) => null | AnimationProps;
+export declare const getAnimateCircleScaleInProps: (to: string | number, platformOverrides: Theme['platformOverrides']) => null | AnimationProps;
+export declare const getAnimateDrawLineProps: (from: string, begin: string, platformOverrides: Theme['platformOverrides'], keySplines?: string) => null | AnimationProps;
 export declare const getAnimateFadeInProps: (begin: string, platformOverrides: Theme['platformOverrides']) => null | AnimationProps;
 export declare const getAnimateHopInProps: (begin: string, platformOverrides: Theme['platformOverrides']) => null | AnimationProps;
 export declare const getAnimateSweepInProps: (begin: string, platformOverrides: Theme['platformOverrides']) => null | AnimationProps;

package/dist/utils/animation.js

@@ -9,20 +9,23 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    getAnimateCircleScaleInProps: function() {
+        return d;
+    },
     getAnimateDrawLineProps: function() {
-        return p;
+        return f;
     },
     getAnimateFadeInProps: function() {
-        return d;
+        return u;
     },
     getAnimateHopInProps: function() {
-        return f;
+        return y;
     },
     getAnimateSweepInProps: function() {
-        return u;
+        return k;
     },
     mergeProperties: function() {
-        return y;
+        return h;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -79,7 +82,18 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const i = (e)=>!(0, _platform.isRunningAcceptanceTest)(e), p = (e, t, a)=>i(a) ? {
+const a = (e)=>!(0, _platform.isRunningAcceptanceTest)(e), d = (e, t)=>a(t) ? {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("animate", {
+            attributeName: "r",
+            begin: "0s",
+            dur: "0.9s",
+            from: "0",
+            to: e,
+            keyTimes: "0;1",
+            calcMode: "spline",
+            keySplines: "0.56 0 0.2 1"
+        })
+    } : null, f = (e, t, i, s)=>a(i) ? {
         strokeDasharray: e.replace("-", ""),
         strokeDashoffset: e,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("animate", {
@@ -92,9 +106,9 @@ const i = (e)=>!(0, _platform.isRunningAcceptanceTest)(e), p = (e, t, a)=>i(a) ?
             fill: "freeze",
             keyTimes: "0;1",
             calcMode: "spline",
-            keySplines: "0.75 0 0.25 1"
+            keySplines: s !== null && s !== void 0 ? s : "0.75 0 0.25 1"
         })
-    } : null, d = (e, t)=>i(t) ? {
+    } : null, u = (e, t)=>a(t) ? {
         opacity: 0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("animate", {
             attributeName: "opacity",
@@ -108,7 +122,7 @@ const i = (e)=>!(0, _platform.isRunningAcceptanceTest)(e), p = (e, t, a)=>i(a) ?
             calcMode: "spline",
             keySplines: "0.75 0 0.25 1"
         })
-    } : null, f = (e, t)=>i(t) ? {
+    } : null, y = (e, t)=>a(t) ? {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("animate", {
@@ -135,7 +149,7 @@ const i = (e)=>!(0, _platform.isRunningAcceptanceTest)(e), p = (e, t, a)=>i(a) ?
                 })
             ]
         })
-    } : null, u = (e, t)=>i(t) ? {
+    } : null, k = (e, t)=>a(t) ? {
         opacity: 0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
@@ -190,7 +204,7 @@ const i = (e)=>!(0, _platform.isRunningAcceptanceTest)(e), p = (e, t, a)=>i(a) ?
                 })
             ]
         })
-    } : null, o = (param, t)=>/* @__PURE__ */ {
+    } : null, m = (param, t)=>/* @__PURE__ */ {
     let { children: e  } = param;
     return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
@@ -198,12 +212,12 @@ const i = (e)=>!(0, _platform.isRunningAcceptanceTest)(e), p = (e, t, a)=>i(a) ?
             t
         ]
     });
-}, y = function() {
+}, h = function() {
     for(var _len = arguments.length, e = new Array(_len), _key = 0; _key < _len; _key++){
         e[_key] = arguments[_key];
     }
-    return e.reduce((t, a)=>_object_spread_props(_object_spread({}, t, a || {}), {
-            children: o(t, a ? a.children : null)
+    return e.reduce((t, i)=>_object_spread_props(_object_spread({}, t, i || {}), {
+            children: m(t, i ? i.children : null)
         }), {
         children: null
     });

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

@@ -24,6 +24,6 @@ _export(exports, {
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
 require("./aspect-ratio-support.css.ts.vanilla.css-mistica.js");
-var a = "yqswj62", n = "_1y2v1nfbr _1y2v1nfc8 _1y2v1nfe6 _1y2v1nfel", y = {
+var a = "yqswj62", n = "_1y2v1nfbs _1y2v1nfc9 _1y2v1nfeb _1y2v1nfeq", y = {
     aspectRatio: "var(--yqswj60)"
-}, e = "_1y2v1nfe4 _1y2v1nfdj _1y2v1nfdk _1y2v1nfaz";
+}, e = "_1y2v1nfe5 _1y2v1nfdk _1y2v1nfdl _1y2v1nfaz";

package/dist/utils/dom.d.ts

@@ -19,4 +19,5 @@ export declare const getScrollDistanceToBottom: (el: HTMLElement) => number;
 export declare const hasScroll: (el: HTMLElement) => boolean;
 type ResizeListener = (entries: Array<ResizeObserverEntry>, observer: ResizeObserver) => void;
 export declare const listenResize: (element: Element, handler: ResizeListener) => (() => void);
+export declare const getCssVarValue: (cssVar: string, element?: Element) => string;
 export {};