@telefonica/mistica 14.42.1 → 14.43.0

package/dist-es/tooltip.js

@@ -51,28 +51,58 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as F, Fragment as mt, jsx as p } from "react/jsx-runtime";
+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];
+        }
+    }
+    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];
+    }
+    return target;
+}
+import { jsx as n, jsxs as B, Fragment as ht } 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 { useTheme as Tt, useAriaId as gt, useBoundingRect as it, useWindowSize as vt } from "./hooks.js";
+import { Portal as xt } from "./portal.js";
+import { Transition as bt } from "react-transition-group";
+import { content as Mt, CONTENT_MIN_WIDTH as Et, container as St, tooltipTransitionClasses as wt, tooltip as Ot, contentContainer as It, tooltipCenter as Rt, closeButtonIcon as _t, arrowContainer as Ct, arrow as Nt } from "./tooltip.css-mistica.js";
+import yt 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 Z from "classnames";
-import { vars as J } 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 ? J.colors.backgroundContainer : J.colors.border}`
-    }), lt = 496, Dt = 300, Wt = 500, Vt = 100, c = 20, O = 6, E = O + c / 2 + 1, Bt = (e)=>{
-    switch(e){
+import { getCssVarValue as kt } from "./utils/dom.js";
+import { TAB as Lt, ESC as At } from "./utils/keys.js";
+import { isTouchableDevice as $t } from "./utils/environment.js";
+import { isEqual as at } from "./utils/helpers.js";
+import tt from "classnames";
+import { vars as X } from "./skins/skin-contract.css-mistica.js";
+import { useIsInverseVariant as Ft, ThemeVariant as Dt } from "./theme-variant-context.js";
+import { combineRefs as Bt } from "./utils/common.js";
+import { useTooltipState as Wt, useSetTooltipState as Ht } from "./tooltip-context-provider.js";
+import { isRunningAcceptanceTest as Vt } from "./utils/platform.js";
+import Xt from "./icon-button.js";
+import zt from "./generated/mistica-icons/icon-close-regular.js";
+import Pt from "./box.js";
+const lt = (t)=>({
+        border: `1px solid ${t ? X.colors.backgroundContainer : X.colors.border}`
+    }), ct = 496, Yt = 300, Gt = 500, Kt = 100, p = 20, O = 6, N = O + p / 2 + 1, Ut = (t)=>{
+    switch(t){
         case "left":
             return `translateX(-${O}px)`;
         case "right":
@@ -84,76 +114,76 @@ const at = (e)=>({
         default:
             return "";
     }
-}, pt = (e)=>{
-    const I = parseFloat(getComputedStyle(e, null).paddingLeft) + parseFloat(getComputedStyle(e, null).paddingRight), m = parseFloat(getComputedStyle(e, null).paddingTop) + parseFloat(getComputedStyle(e, null).paddingBottom), w = e.offsetWidth - I, h = e.offsetHeight - m;
+}, pt = (t)=>{
+    const u = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), v = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), d = t.offsetWidth - u, x = t.offsetHeight - v;
     return {
-        width: w,
-        height: h
+        width: d,
+        height: x
     };
-}, ct = (e, I, m, w, h)=>{
-    if (!e || !I) return;
-    const { top: D, bottom: R, left: W, right: V } = e, M = w - R, g = h - V, S = D, n = W, { width: B, height: $ } = pt(I), y = B + E, d = $ + E, T = y <= Math.max(n, g), v = d <= Math.max(M, S);
-    if (!(!v && !T)) switch(m){
+}, ft = (t, u, v, d, x)=>{
+    if (!t || !u) return;
+    const { top: b, bottom: h, left: I, right: W } = t, o = d - h, R = x - W, _ = b, a = I, { width: z, height: H } = pt(u), C = z + N, T = H + N, M = C <= Math.max(a, R), E = T <= Math.max(o, _);
+    if (!(!E && !M)) switch(v){
         case "left":
-            return T ? y <= n ? "left" : "right" : M > S ? "bottom" : "top";
+            return M ? C <= a ? "left" : "right" : o > _ ? "bottom" : "top";
         case "right":
-            return T ? y <= g ? "right" : "left" : M > S ? "bottom" : "top";
+            return M ? C <= R ? "right" : "left" : o > _ ? "bottom" : "top";
         case "top":
-            return v ? d <= S ? "top" : "bottom" : n > g ? "left" : "right";
+            return E ? T <= _ ? "top" : "bottom" : a > R ? "left" : "right";
         case "bottom":
-            return v ? d <= M ? "bottom" : "top" : n > g ? "left" : "right";
+            return E ? T <= o ? "bottom" : "top" : a > R ? "left" : "right";
         default:
             return;
     }
-}, Xt = (param)=>{
-    let { children: e, extra: I, description: m, target: w, title: h, width: D, position: R = "top", dataAttributes: W, delay: V = !0, centerContent: M, open: g, textCenter: S } = param;
-    const n = ht(), { openTooltipId: B } = $t(), { openTooltip: $, closeTooltip: y } = Pt(), [d, T] = i.useState(), [v, X] = i.useState(), z = i.useRef(null), H = i.useRef(null), [_, ft] = i.useState(null), f = Nt(), Y = V ? Wt : 0, [Q, G] = i.useState(!1), [tt, P] = i.useState(!1), K = g !== void 0, [et, U] = i.useState(!1), x = K ? g : n === B, j = kt(), l = it(z, x), dt = it(H, x, !0), s = gt(), b = i.useCallback(()=>{
-        U(!1), G(!1), P(!1);
+}, jt = (param)=>{
+    let { content: t, target: u, width: v, position: d = "top", dataAttributes: x, delay: b = !0, centerContent: h, open: I, onClose: W, hasPointerInteractionOnly: o = !1, trackingEvent: R } = param;
+    const { texts: _ } = Tt(), a = gt(), { openTooltipId: z } = Wt(), { openTooltip: H, closeTooltip: C } = Ht(), [T, M] = i.useState(), [E, P] = i.useState(), Y = i.useRef(null), G = i.useRef(null), [y, dt] = i.useState(null), m = $t(), K = b ? Gt : 0, [et, U] = i.useState(!1), [j, k] = i.useState(!1), q = I !== void 0, [ot, Z] = i.useState(!1), S = q ? I : a === z, J = Ft(), f = it(Y, S), V = it(G, S, !0), l = vt(), w = i.useCallback(()=>{
+        Z(!1), U(!1), k(!1);
     }, []);
     i.useEffect(()=>{
-        x || b();
+        S || w();
     }, [
-        x,
-        b
+        S,
+        w
     ]), i.useEffect(()=>{
-        if (!_ || !x) return;
-        const r = ct(l, _, R, s.height, s.width);
-        if (!r || !l) {
-            T(void 0), X(void 0), b();
+        if (!y || !S) return;
+        const s = ft(f, y, d, l.height, l.width);
+        if (!s || !f) {
+            M(void 0), P(void 0), w();
             return;
         }
-        let o, t;
+        let r, e;
         var _parseInt;
-        const { left: a, right: C, top: N, bottom: k } = l, { width: L, height: A } = pt(_), ot = s.width - L, rt = s.height - A, u = (_parseInt = parseInt(wt(J.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
-        switch(r){
+        const { left: c, right: L, top: A, bottom: $ } = f, { width: F, height: D } = pt(y), rt = l.width - F, st = l.height - D, g = (_parseInt = parseInt(kt(X.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
+        switch(s){
             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)),
+                r = {
+                    left: Math.max(0, Math.min(rt, (c + L - F) / 2)),
+                    top: A - D - p / 2,
+                    padding: `0px 0px ${N}px 0px`
+                }, e = {
+                    left: Math.max(g, Math.min(l.width - g - p, (c + L - p) / 2)),
                     top: "100%"
                 };
                 break;
             case "bottom":
-                o = {
-                    left: Math.max(0, Math.min(ot, (a + C - L) / 2)),
-                    top: k - O,
-                    padding: `${E}px 0px 0px 0px`
-                }, t = {
-                    left: Math.max(u, Math.min(s.width - u - c, (a + C - c) / 2)),
+                r = {
+                    left: Math.max(0, Math.min(rt, (c + L - F) / 2)),
+                    top: $ - O,
+                    padding: `${N}px 0px 0px 0px`
+                }, e = {
+                    left: Math.max(g, Math.min(l.width - g - p, (c + L - p) / 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)),
+                r = {
+                    left: c - F - p / 2,
+                    top: Math.max(0, Math.min(st, (A + $ - D) / 2)),
+                    padding: `0px ${N}px 0px 0px`
+                }, e = {
+                    top: Math.max(g, Math.min(l.height - g - p, (A + $ - p) / 2)),
                     left: "100%",
                     transform: "rotate(-90deg)",
                     transformOrigin: "bottom"
@@ -161,172 +191,172 @@ const at = (e)=>({
                 break;
             case "right":
             default:
-                o = {
-                    left: C - O,
-                    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)),
+                r = {
+                    left: L - O,
+                    top: Math.max(0, Math.min(st, (A + $ - D) / 2)),
+                    padding: `0px 0px 0px ${N}px`
+                }, e = {
+                    top: Math.max(g, Math.min(l.height - g - p, (A + $ - p) / 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) || T(o), st(t, v) || X(t);
+        typeof e.top == "number" && (e.top -= r.top, e.top = `${e.top / D * 100}%`), typeof e.left == "number" && (e.left -= r.left, e.left = `${e.left / F * 100}%`), at(r, T) || M(r), at(e, E) || P(e);
     }, [
-        _,
-        l,
-        dt,
-        x,
-        R,
-        s,
-        d,
-        v,
-        j,
+        y,
         f,
-        n,
-        b
+        V,
+        S,
+        d,
+        l,
+        T,
+        E,
+        J,
+        m,
+        a,
+        w
     ]);
-    const q = i.useRef(!1);
+    const Q = i.useRef(!1);
     i.useEffect(()=>{
-        const r = (a)=>{
-            switch(a.key){
-                case Ct:
-                    b();
+        const s = (c)=>{
+            switch(c.key){
+                case At:
+                    o || w();
                     break;
-                case _t:
-                    q.current = !0;
+                case Lt:
+                    Q.current = !0;
                     break;
             }
-        }, o = ()=>q.current = !1, t = (a)=>{
-            f && l && (a.clientX < l.left || a.clientX > l.right || a.clientY < l.top || a.clientY > l.bottom) && b();
+        }, r = ()=>Q.current = !1, e = (c)=>{
+            !o && m && f && (c.clientX < f.left || c.clientX > f.right || c.clientY < f.top || c.clientY > f.bottom) && w();
         };
-        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);
+        return document.addEventListener("keydown", s, !1), document.addEventListener("keyup", r, !1), document.addEventListener("click", e, !1), ()=>{
+            document.removeEventListener("keydown", s, !1), document.removeEventListener("keyup", r, !1), document.removeEventListener("click", e, !1);
         };
     }, [
+        m,
+        w,
         f,
-        b,
-        l
+        o
     ]), i.useEffect(()=>{
-        K || (tt || Q || et ? $(n) : y(n));
+        q || (j || et || ot ? H(a) : C(a));
     }, [
-        tt,
-        Q,
+        j,
         et,
-        n,
-        $,
-        y,
-        K
+        ot,
+        a,
+        H,
+        C,
+        q
     ]);
-    const ut = ct(l, _, R, s.height, s.width);
-    return /* @__PURE__ */ F(mt, {
+    const mt = ft(f, y, d, l.height, l.width), ut = h !== void 0 ? h : (V == null ? void 0 : V.width) === Et;
+    return /* @__PURE__ */ B(ht, {
         children: [
-            /* @__PURE__ */ p("div", {
-                ref: (r)=>{
-                    const o = r == null ? void 0 : r.firstElementChild;
-                    o && o !== z.current && (z.current = o);
+            /* @__PURE__ */ n("div", {
+                ref: (s)=>{
+                    const r = s == null ? void 0 : s.firstElementChild;
+                    r && r !== Y.current && (Y.current = r);
                 },
                 onMouseOver: ()=>{
-                    f || P(!0);
+                    !m && !o && k(!0);
                 },
                 onMouseLeave: ()=>{
-                    f || P(!1);
+                    !m && !o && k(!1);
                 },
                 onClick: ()=>{
-                    f && P(!0);
+                    (m || o) && k(o ? !j : !0);
                 },
                 onFocus: ()=>{
-                    q.current && U(!0);
+                    Q.current && !o && Z(!0);
                 },
                 onBlur: ()=>{
-                    f || U(!1);
+                    !m && !o && Z(!1);
                 },
-                "aria-describedby": n,
-                children: w
+                "aria-describedby": a,
+                children: u
             }),
-            /* @__PURE__ */ p(Tt, {
-                children: /* @__PURE__ */ p(vt, {
-                    in: x,
-                    nodeRef: H,
-                    timeout: Ft() ? 0 : {
-                        enter: Dt + Y,
-                        exit: Vt
+            /* @__PURE__ */ n(xt, {
+                children: /* @__PURE__ */ n(bt, {
+                    in: S,
+                    nodeRef: G,
+                    timeout: Vt() ? 0 : {
+                        enter: Yt + K,
+                        exit: Kt
                     },
                     onExited: ()=>{
-                        T(void 0), X(void 0);
+                        M(void 0), P(void 0);
                     },
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    children: (r)=>/* @__PURE__ */ p("div", _object_spread_props(_object_spread({
+                    children: (s)=>/* @__PURE__ */ n("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)`,
+               */ width: `calc(100vw + ${ct}px)`,
                                 top: 0,
                                 left: 0,
                                 position: "fixed",
-                                visibility: d ? "visible" : "hidden"
+                                visibility: T ? "visible" : "hidden"
                             }
-                        }, Rt(W, "Tooltip")), {
+                        }, x), {
                             role: "tooltip",
-                            "aria-label": n,
+                            "aria-label": a,
                             tabIndex: -1,
-                            children: /* @__PURE__ */ p("div", {
-                                className: Z(xt),
+                            children: /* @__PURE__ */ n("div", {
+                                className: tt(St),
                                 style: _object_spread_props(_object_spread({
-                                    pointerEvents: r === "entered" ? "auto" : "none",
-                                    transform: Bt(ut)
-                                }, d, bt[r]), {
-                                    transition: r === "entering" ? `opacity .1s linear ${Y}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${Y}ms` : "opacity .1s linear"
+                                    pointerEvents: s === "entered" ? "auto" : "none",
+                                    transform: Ut(mt)
+                                }, T, wt[s]), {
+                                    transition: s === "entering" ? `opacity .1s linear ${K}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${K}ms` : "opacity .1s linear"
                                 }),
-                                ref: At(ft, H),
+                                ref: Bt(dt, G),
                                 onMouseEnter: ()=>{
-                                    !f && r === "entered" && G(!0);
+                                    !m && s === "entered" && !o && U(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    f || G(!1);
+                                    !m && !o && U(!1);
                                 },
-                                children: /* @__PURE__ */ F("div", {
+                                children: /* @__PURE__ */ B("div", {
                                     className: Ot,
-                                    style: _object_spread({
-                                        width: D
-                                    }, at(j)),
+                                    style: _object_spread_props(_object_spread({
+                                        width: v
+                                    }, lt(J)), {
+                                        maxWidth: Math.min(ct, l.width)
+                                    }),
                                     children: [
-                                        /* @__PURE__ */ p("div", {
-                                            className: Z(It, M || S ? Mt : void 0),
-                                            style: {
-                                                maxWidth: Math.min(lt, s.width)
-                                            },
-                                            children: /* @__PURE__ */ F(Lt, {
+                                        /* @__PURE__ */ n("div", {
+                                            className: tt(It, {
+                                                [Rt]: ut
+                                            }),
+                                            children: /* @__PURE__ */ B(Dt, {
                                                 isInverse: !1,
                                                 children: [
-                                                    (h || m) && /* @__PURE__ */ F(Et, {
-                                                        space: 4,
-                                                        children: [
-                                                            h && /* @__PURE__ */ p(nt, {
-                                                                medium: !0,
-                                                                children: h
-                                                            }),
-                                                            m && /* @__PURE__ */ p(nt, {
-                                                                regular: !0,
-                                                                children: m
-                                                            })
-                                                        ]
-                                                    }),
-                                                    I || e
+                                                    t,
+                                                    W && /* @__PURE__ */ n(Xt, {
+                                                        className: _t,
+                                                        onPress: ()=>{
+                                                            k(!1), W();
+                                                        },
+                                                        trackingEvent: R,
+                                                        "aria-label": _.modalClose,
+                                                        children: /* @__PURE__ */ n(zt, {
+                                                            color: X.colors.neutralHigh
+                                                        })
+                                                    })
                                                 ]
                                             })
                                         }),
-                                        /* @__PURE__ */ p("div", {
-                                            className: St,
-                                            style: v,
-                                            children: /* @__PURE__ */ p("div", {
-                                                className: Z(yt),
-                                                style: at(j)
+                                        /* @__PURE__ */ n("div", {
+                                            className: Ct,
+                                            style: E,
+                                            children: /* @__PURE__ */ n("div", {
+                                                className: tt(Nt),
+                                                style: lt(J)
                                             })
                                         })
                                     ]
@@ -337,5 +367,40 @@ const at = (e)=>({
             })
         ]
     });
-}, se = Xt;
-export { se as default };
+}, qt = (_param)=>{
+    var { centerContent: t, textCenter: u, extra: v, children: d, dataAttributes: x, title: b, description: h } = _param, I = _object_without_properties(_param, [
+        "centerContent",
+        "textCenter",
+        "extra",
+        "children",
+        "dataAttributes",
+        "title",
+        "description"
+    ]);
+    return /* @__PURE__ */ n(jt, _object_spread({
+        content: /* @__PURE__ */ B(Pt, {
+            className: Mt,
+            children: [
+                (b || h) && /* @__PURE__ */ B(yt, {
+                    space: 4,
+                    children: [
+                        b && /* @__PURE__ */ n(nt, {
+                            medium: !0,
+                            children: b
+                        }),
+                        h && /* @__PURE__ */ n(nt, {
+                            regular: !0,
+                            children: h
+                        })
+                    ]
+                }),
+                v !== null && v !== void 0 ? v : d
+            ]
+        }),
+        centerContent: t !== null && t !== void 0 ? t : u,
+        dataAttributes: _object_spread({
+            "component-name": "Tooltip"
+        }, x)
+    }, I));
+}, ge = qt;
+export { jt as BaseTooltip, ge as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "14.42.1",
+    "version": "14.43.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -32,8 +32,8 @@
         "storybook-for-acceptance-tests": "cross-env NODE_ENV=production yarn storybook --ci 2>&1",
         "playroom": "playroom start",
         "gen-ts-defs": "rimraf dist-ts && tsc --project tsconfig.production.json --emitDeclarationOnly && cp -r dist-ts/src/* dist && rimraf dist-ts",
-        "vercel-build": "VERCEL_PROD_BUILD=1 yarn storybook-static && ./node_modules/.bin/playroom build && FORCE_MOBILE=1 ./node_modules/.bin/playroom build && FORCE_DESKTOP=1 ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
-        "vercel-preview-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
+        "vercel-build": "VERCEL_PROD_BUILD=1 yarn storybook-static && ./node_modules/.bin/playroom build && FORCE_MOBILE=1 ./node_modules/.bin/playroom build && FORCE_DESKTOP=1 ./node_modules/.bin/playroom build && cp img/favicon.ico public/ && cp img/favicon.svg public/",
+        "vercel-preview-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/ && cp img/favicon.svg public/",
         "storybook-static": "rimraf public && storybook build -s ./.storybook/css/fonts -o public --quiet",
         "serve-static-storybook": "node ./scripts/serve-static-storybook.js",
         "detect-circular-dependencies": "npx dpdm --circular src/index.tsx",
@@ -123,7 +123,7 @@
         "lodash": "^4.17.21",
         "mini-css-extract-plugin": "^1.6.2",
         "node-fetch": "^2.6.7",
-        "playroom": "^0.31.0",
+        "playroom": "^0.34.2",
         "postcss": "^8.4.18",
         "postcss-loader": "^4.2.0",
         "prettier": "^2.6.1",