arpeggi-framer-components 0.0.32 → 0.0.34

package/dist/index.es.js

@@ -2,7 +2,7 @@ var Qa = Object.defineProperty;
 var eo = (e, t, i) => t in e ? Qa(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
 var Yt = (e, t, i) => eo(e, typeof t != "symbol" ? t + "" : t, i);
 import * as to from "react";
-import le, { useState as gn, useLayoutEffect as zr, useEffect as Et, useMemo as Ze, useRef as Se, useReducer as no, useCallback as Ce, forwardRef as io, useImperativeHandle as ro, Fragment as ao, createContext as Mr, useContext as ui, useDebugValue as $r } from "react";
+import ce, { useState as gn, useLayoutEffect as zr, useEffect as Et, useMemo as Ze, useRef as Se, useReducer as no, useCallback as Ce, forwardRef as io, useImperativeHandle as ro, Fragment as ao, createContext as Mr, useContext as ui, useDebugValue as $r } from "react";
 var Kt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function Nr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -15,16 +15,16 @@ function oo() {
     return l.Date.now();
   };
   function w(v, O, B) {
-    var A, H, G, ne, ie, X, q = 0, ce = !1, me = !1, ye = !0;
+    var A, H, G, ne, ie, X, q = 0, le = !1, me = !1, ye = !0;
     if (typeof v != "function")
       throw new TypeError(e);
-    O = T(O) || 0, m(B) && (ce = !!B.leading, me = "maxWait" in B, G = me ? x(T(B.maxWait) || 0, O) : G, ye = "trailing" in B ? !!B.trailing : ye);
+    O = T(O) || 0, m(B) && (le = !!B.leading, me = "maxWait" in B, G = me ? x(T(B.maxWait) || 0, O) : G, ye = "trailing" in B ? !!B.trailing : ye);
     function se(F) {
       var U = A, K = H;
       return A = H = void 0, q = F, ne = v.apply(K, U), ne;
     }
     function ve(F) {
-      return q = F, ie = setTimeout(L, O), ce ? se(F) : ne;
+      return q = F, ie = setTimeout(L, O), le ? se(F) : ne;
     }
     function S(F) {
       var U = F - X, K = F - q, $ = O - U;
@@ -119,7 +119,7 @@ var Di;
 function lo() {
   if (Di) return It;
   Di = 1;
-  var e = le, t = Symbol.for("react.element"), i = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, r = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, a = { key: !0, ref: !0, __self: !0, __source: !0 };
+  var e = ce, t = Symbol.for("react.element"), i = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, r = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, a = { key: !0, ref: !0, __self: !0, __source: !0 };
   function o(s, c, p) {
     var l, u = {}, f = null, x = null;
     p !== void 0 && (f = "" + p), c.key !== void 0 && (f = "" + c.key), c.ref !== void 0 && (x = c.ref);
@@ -142,7 +142,7 @@ var Bt = {};
 var Fi;
 function po() {
   return Fi || (Fi = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = le, t = Symbol.for("react.element"), i = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), r = Symbol.for("react.strict_mode"), a = Symbol.for("react.profiler"), o = Symbol.for("react.provider"), s = Symbol.for("react.context"), c = Symbol.for("react.forward_ref"), p = Symbol.for("react.suspense"), l = Symbol.for("react.suspense_list"), u = Symbol.for("react.memo"), f = Symbol.for("react.lazy"), x = Symbol.for("react.offscreen"), h = Symbol.iterator, g = "@@iterator";
+    var e = ce, t = Symbol.for("react.element"), i = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), r = Symbol.for("react.strict_mode"), a = Symbol.for("react.profiler"), o = Symbol.for("react.provider"), s = Symbol.for("react.context"), c = Symbol.for("react.forward_ref"), p = Symbol.for("react.suspense"), l = Symbol.for("react.suspense_list"), u = Symbol.for("react.memo"), f = Symbol.for("react.lazy"), x = Symbol.for("react.offscreen"), h = Symbol.iterator, g = "@@iterator";
     function w(d) {
       if (d === null || typeof d != "object")
         return null;
@@ -231,13 +231,13 @@ function po() {
         }
       return null;
     }
-    var q = Object.assign, ce = 0, me, ye, se, ve, S, _, L;
+    var q = Object.assign, le = 0, me, ye, se, ve, S, _, L;
     function N() {
     }
     N.__reactDisabledLog = !0;
     function M() {
       {
-        if (ce === 0) {
+        if (le === 0) {
           me = console.log, ye = console.info, se = console.warn, ve = console.error, S = console.group, _ = console.groupCollapsed, L = console.groupEnd;
           var d = {
             configurable: !0,
@@ -255,12 +255,12 @@ function po() {
             groupEnd: d
           });
         }
-        ce++;
+        le++;
       }
     }
     function Y() {
       {
-        if (ce--, ce === 0) {
+        if (le--, le === 0) {
           var d = {
             configurable: !0,
             enumerable: !0,
@@ -290,7 +290,7 @@ function po() {
             })
           });
         }
-        ce < 0 && k("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        le < 0 && k("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
     var z = m.ReactCurrentDispatcher, F;
@@ -754,8 +754,8 @@ var ae = uo(), he = "colors", Ie = "sizes", I = "space", fo = { gap: I, gridGap:
             }
           }
           if (k && (w = f.slice(1) in n.media ? "@media " + n.media[f.slice(1)] : f, f = w.replace(/\(\s*([\w-]+)\s*(=|<|<=|>|>=)\s*([\w-]+)\s*(?:(<|<=|>|>=)\s*([\w-]+)\s*)?\)/g, (O, B, A, H, G, ne) => {
-            const ie = _n.test(B), X = 0.0625 * (ie ? -1 : 1), [q, ce] = ie ? [H, B] : [B, H];
-            return "(" + (A[0] === "=" ? "" : A[0] === ">" === ie ? "max-" : "min-") + q + ":" + (A[0] !== "=" && A.length === 1 ? ce.replace(_n, (me, ye, se) => Number(ye) + X * (A === ">" ? 1 : -1) + se) : ce) + (G ? ") and (" + (G[0] === ">" ? "min-" : "max-") + q + ":" + (G.length === 1 ? ne.replace(_n, (me, ye, se) => Number(ye) + X * (G === ">" ? -1 : 1) + se) : ne) : "") + ")";
+            const ie = _n.test(B), X = 0.0625 * (ie ? -1 : 1), [q, le] = ie ? [H, B] : [B, H];
+            return "(" + (A[0] === "=" ? "" : A[0] === ">" === ie ? "max-" : "min-") + q + ":" + (A[0] !== "=" && A.length === 1 ? le.replace(_n, (me, ye, se) => Number(ye) + X * (A === ">" ? 1 : -1) + se) : le) + (G ? ") and (" + (G[0] === ">" ? "min-" : "max-") + q + ":" + (G.length === 1 ? ne.replace(_n, (me, ye, se) => Number(ye) + X * (G === ">" ? -1 : 1) + se) : ne) : "") + ")";
           })), v) {
             const O = k ? u.concat(f) : [...u], B = k ? [...l] : go(l, f.split(bo));
             a !== void 0 && r(Li(...a)), a = void 0, c(x, B, O);
@@ -1049,9 +1049,9 @@ var ae = uo(), he = "colors", Ie = "sizes", I = "space", fo = { gap: I, gridGap:
   return t.styled = (({ config: i, sheet: n }) => Mo(i, () => {
     const r = Mi(i, n);
     return (...a) => {
-      const o = r(...a), s = o[pt].type, c = le.forwardRef((p, l) => {
+      const o = r(...a), s = o[pt].type, c = ce.forwardRef((p, l) => {
         const u = p && p.as || s, { props: f, deferredInjector: x } = o(p);
-        return delete f.as, f.ref = l, x ? le.createElement(le.Fragment, null, le.createElement(u, f), le.createElement(x, null)) : le.createElement(u, f);
+        return delete f.as, f.ref = l, x ? ce.createElement(ce.Fragment, null, ce.createElement(u, f), ce.createElement(x, null)) : ce.createElement(u, f);
       });
       return c.className = o.className, c.displayName = `Styled.${s.displayName || s.name || s}`, c.selector = o.selector, c.toString = () => o.selector, c[pt] = o[pt], c;
     };
@@ -2554,7 +2554,7 @@ function Go() {
         }
       }
     }
-    var v = c, O = p, B = s, A = o, H = t, G = l, ne = n, ie = h, X = x, q = i, ce = a, me = r, ye = u, se = !1;
+    var v = c, O = p, B = s, A = o, H = t, G = l, ne = n, ie = h, X = x, q = i, le = a, me = r, ye = u, se = !1;
     function ve(b) {
       return se || (se = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), S(b) || T(b) === c;
     }
@@ -2594,7 +2594,7 @@ function Go() {
     function be(b) {
       return T(b) === u;
     }
-    fe.AsyncMode = v, fe.ConcurrentMode = O, fe.ContextConsumer = B, fe.ContextProvider = A, fe.Element = H, fe.ForwardRef = G, fe.Fragment = ne, fe.Lazy = ie, fe.Memo = X, fe.Portal = q, fe.Profiler = ce, fe.StrictMode = me, fe.Suspense = ye, fe.isAsyncMode = ve, fe.isConcurrentMode = S, fe.isContextConsumer = _, fe.isContextProvider = L, fe.isElement = N, fe.isForwardRef = M, fe.isFragment = Y, fe.isLazy = z, fe.isMemo = F, fe.isPortal = U, fe.isProfiler = K, fe.isStrictMode = $, fe.isSuspense = be, fe.isValidElementType = C, fe.typeOf = T;
+    fe.AsyncMode = v, fe.ConcurrentMode = O, fe.ContextConsumer = B, fe.ContextProvider = A, fe.Element = H, fe.ForwardRef = G, fe.Fragment = ne, fe.Lazy = ie, fe.Memo = X, fe.Portal = q, fe.Profiler = le, fe.StrictMode = me, fe.Suspense = ye, fe.isAsyncMode = ve, fe.isConcurrentMode = S, fe.isContextConsumer = _, fe.isContextProvider = L, fe.isElement = N, fe.isForwardRef = M, fe.isFragment = Y, fe.isLazy = z, fe.isMemo = F, fe.isPortal = U, fe.isProfiler = K, fe.isStrictMode = $, fe.isSuspense = be, fe.isValidElementType = C, fe.typeOf = T;
   }()), fe;
 }
 var Yi;
@@ -2994,12 +2994,12 @@ Valid keys: ` + JSON.stringify(Object.keys(S), null, "  ")
           return !1;
       }
     }
-    function ce(S, _) {
+    function le(S, _) {
       return S === "symbol" ? !0 : _ ? _["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && _ instanceof Symbol : !1;
     }
     function me(S) {
       var _ = typeof S;
-      return Array.isArray(S) ? "array" : S instanceof RegExp ? "object" : ce(_, S) ? "symbol" : _;
+      return Array.isArray(S) ? "array" : S instanceof RegExp ? "object" : le(_, S) ? "symbol" : _;
     }
     function ye(S) {
       if (typeof S > "u" || S === null)
@@ -4792,7 +4792,7 @@ var mi = /* @__PURE__ */ io(function(e, t) {
     return {
       open: a
     };
-  }, [a]), /* @__PURE__ */ le.createElement(ao, null, i(Oe(Oe({}, o), {}, {
+  }, [a]), /* @__PURE__ */ ce.createElement(ao, null, i(Oe(Oe({}, o), {}, {
     open: a
   })));
 });
@@ -5000,10 +5000,10 @@ function ia() {
     return typeof w == "function" ? w : fr;
   }, [w]), X = Ze(function() {
     return typeof g == "function" ? g : fr;
-  }, [g]), q = Se(null), ce = Se(null), me = no(Ys, ei), ye = Ln(me, 2), se = ye[0], ve = ye[1], S = se.isFocused, _ = se.isFileDialogActive, L = Se(typeof window < "u" && window.isSecureContext && m && js()), N = function() {
+  }, [g]), q = Se(null), le = Se(null), me = no(Ys, ei), ye = Ln(me, 2), se = ye[0], ve = ye[1], S = se.isFocused, _ = se.isFileDialogActive, L = Se(typeof window < "u" && window.isSecureContext && m && js()), N = function() {
     !L.current && _ && setTimeout(function() {
-      if (ce.current) {
-        var j = ce.current.files;
+      if (le.current) {
+        var j = le.current.files;
         j.length || (ve({
           type: "closeDialog"
         }), X());
@@ -5014,7 +5014,7 @@ function ia() {
     return window.addEventListener("focus", N, !1), function() {
       window.removeEventListener("focus", N, !1);
     };
-  }, [ce, _, X, L]);
+  }, [le, _, X, L]);
   var M = Se([]), Y = function(j) {
     q.current && q.current.contains(j.target) || (j.preventDefault(), M.current = []);
   };
@@ -5122,13 +5122,13 @@ function ia() {
       }).catch(function(j) {
         Ps(j) ? (X(j), ve({
           type: "closeDialog"
-        })) : Is(j) ? (L.current = !1, ce.current ? (ce.current.value = null, ce.current.click()) : z(new Error("Cannot open the file picker because the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API is not supported and no <input> was provided."))) : z(j);
+        })) : Is(j) ? (L.current = !1, le.current ? (le.current.value = null, le.current.click()) : z(new Error("Cannot open the file picker because the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API is not supported and no <input> was provided."))) : z(j);
       });
       return;
     }
-    ce.current && (ve({
+    le.current && (ve({
       type: "openDialog"
-    }), ie(), ce.current.value = null, ce.current.click());
+    }), ie(), le.current.value = null, le.current.click());
   }, [ve, ie, X, m, $, z, ne, s]), P = Ce(function(E) {
     !q.current || !q.current.isEqualNode(E.target) || (E.key === " " || E.key === "Enter" || E.keyCode === 32 || E.keyCode === 13) && (E.preventDefault(), b());
   }, [q, b]), Z = Ce(function() {
@@ -5189,16 +5189,16 @@ function ia() {
         onChange: Te(Ue(ge, be)),
         onClick: Te(Ue(ke, Ne)),
         tabIndex: -1
-      }, pe, ce);
+      }, pe, le);
       return Oe(Oe({}, Je), et);
     };
-  }, [ce, i, s, be, n]);
+  }, [le, i, s, be, n]);
   return Oe(Oe({}, se), {}, {
     isFocused: S && !n,
     getRootProps: Ye,
     getInputProps: Ke,
     rootRef: q,
-    inputRef: ce,
+    inputRef: le,
     open: Te(b)
   });
 }
@@ -5374,9 +5374,9 @@ const oc = (e) => ({
       });
     }
   }), error: o, ...e };
-}, aa = le.createContext(
+}, aa = ce.createContext(
   {}
-), lu = () => le.useContext(aa), cc = qe(xt, {
+), lu = () => ce.useContext(aa), cc = qe(xt, {
   position: "relative",
   display: "flex",
   flexDirection: "column",
@@ -7141,7 +7141,7 @@ var Cr;
 function Ul() {
   if (Cr) return qn;
   Cr = 1;
-  var e = le;
+  var e = ce;
   function t(u, f) {
     return u === f && (u !== 0 || 1 / u === 1 / f) || u !== u && f !== f;
   }
@@ -7186,7 +7186,7 @@ var Ar;
 function Vl() {
   return Ar || (Ar = 1, process.env.NODE_ENV !== "production" && function() {
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-    var e = le, t = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    var e = ce, t = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
     function i(C) {
       {
         for (var T = arguments.length, v = new Array(T > 1 ? T - 1 : 0), O = 1; O < T; O++)
@@ -7332,7 +7332,7 @@ const Jl = () => ci, [li, pi] = Rn && window.addEventListener ? [
 }, tp = {
   initFocus: Zl,
   initReconnect: Ql
-}, Ut = !le.useId, mt = !Rn || "Deno" in window, ja = (e) => Kl() ? window.requestAnimationFrame(e) : setTimeout(e, 1), nt = mt ? Et : zr, Hn = typeof navigator < "u" && navigator.connection, Dr = !mt && Hn && ([
+}, Ut = !ce.useId, mt = !Rn || "Deno" in window, ja = (e) => Kl() ? window.requestAnimationFrame(e) : setTimeout(e, 1), nt = mt ? Et : zr, Hn = typeof navigator < "u" && navigator.connection, Dr = !mt && Hn && ([
   "slow-2g",
   "2g"
 ].includes(Hn.effectiveType) || Hn.saveData), Gt = (e) => {
@@ -7517,7 +7517,7 @@ const Fr = (e, t) => {
   }
   return i;
 }, pp = Mr({}), up = "$inf$", Ba = Rn && window.__SWR_DEVTOOLS_USE__, dp = Ba ? window.__SWR_DEVTOOLS_USE__ : [], fp = () => {
-  Ba && (window.__SWR_DEVTOOLS_REACT__ = le);
+  Ba && (window.__SWR_DEVTOOLS_REACT__ = ce);
 }, La = (e) => Me(e[1]) ? [
   e[0],
   e[1],
@@ -7553,7 +7553,7 @@ const Fr = (e, t) => {
   });
 };
 fp();
-const Pr = le.use || ((e) => {
+const Pr = ce.use || ((e) => {
   if (e.status === "pending")
     throw e;
   if (e.status === "fulfilled")
@@ -7566,7 +7566,7 @@ const Pr = le.use || ((e) => {
 }), Gn = {
   dedupe: !0
 }, gp = (e, t, i) => {
-  const { cache: n, compare: r, suspense: a, fallbackData: o, revalidateOnMount: s, revalidateIfStale: c, refreshInterval: p, refreshWhenHidden: l, refreshWhenOffline: u, keepPreviousData: f } = i, [x, h, g, w] = He.get(n), [m, k] = Gt(e), C = Se(!1), T = Se(!1), v = Se(m), O = Se(t), B = Se(i), A = () => B.current, H = () => A().isVisible() && A().isOnline(), [G, ne, ie, X] = bi(n, m), q = Se({}).current, ce = V(o) ? i.fallback[m] : o, me = (b, P) => {
+  const { cache: n, compare: r, suspense: a, fallbackData: o, revalidateOnMount: s, revalidateIfStale: c, refreshInterval: p, refreshWhenHidden: l, refreshWhenOffline: u, keepPreviousData: f } = i, [x, h, g, w] = He.get(n), [m, k] = Gt(e), C = Se(!1), T = Se(!1), v = Se(m), O = Se(t), B = Se(i), A = () => B.current, H = () => A().isVisible() && A().isOnline(), [G, ne, ie, X] = bi(n, m), q = Se({}).current, le = V(o) ? i.fallback[m] : o, me = (b, P) => {
     for (const Z in q) {
       const W = Z;
       if (W === "data") {
@@ -7605,7 +7605,7 @@ const Pr = le.use || ((e) => {
       n,
       m
     ]
-  ), ye[0], ye[1]), ve = !C.current, S = x[m] && x[m].length > 0, _ = se.data, L = V(_) ? ce : _, N = se.error, M = Se(L), Y = f ? V(_) ? M.current : _ : L, z = S && !V(N) ? !1 : ve && !V(s) ? s : A().isPaused() ? !1 : a ? V(L) ? !1 : c : V(L) || c, F = !!(m && t && ve && z), U = V(se.isValidating) ? F : se.isValidating, K = V(se.isLoading) ? F : se.isLoading, $ = Ce(
+  ), ye[0], ye[1]), ve = !C.current, S = x[m] && x[m].length > 0, _ = se.data, L = V(_) ? le : _, N = se.error, M = Se(L), Y = f ? V(_) ? M.current : _ : L, z = S && !V(N) ? !1 : ve && !V(s) ? s : A().isPaused() ? !1 : a ? V(L) ? !1 : c : V(L) || c, F = !!(m && t && ve && z), U = V(se.isValidating) ? F : se.isValidating, K = V(se.isLoading) ? F : se.isLoading, $ = Ce(
     async (b) => {
       const P = O.current;
       if (!m || !P || T.current || A().isPaused())
@@ -7747,7 +7747,7 @@ const Pr = le.use || ((e) => {
       return q.isLoading = !0, K;
     }
   };
-}, hp = Ma(gp), Ir = le.use || ((e) => {
+}, hp = Ma(gp), Ir = ce.use || ((e) => {
   if (e.status === "pending")
     throw e;
   if (e.status === "fulfilled")
@@ -7760,7 +7760,7 @@ const Pr = le.use || ((e) => {
 }), Yn = {
   dedupe: !0
 }, yp = (e, t, i) => {
-  const { cache: n, compare: r, suspense: a, fallbackData: o, revalidateOnMount: s, revalidateIfStale: c, refreshInterval: p, refreshWhenHidden: l, refreshWhenOffline: u, keepPreviousData: f } = i, [x, h, g, w] = He.get(n), [m, k] = Gt(e), C = Se(!1), T = Se(!1), v = Se(m), O = Se(t), B = Se(i), A = () => B.current, H = () => A().isVisible() && A().isOnline(), [G, ne, ie, X] = bi(n, m), q = Se({}).current, ce = V(o) ? i.fallback[m] : o, me = (b, P) => {
+  const { cache: n, compare: r, suspense: a, fallbackData: o, revalidateOnMount: s, revalidateIfStale: c, refreshInterval: p, refreshWhenHidden: l, refreshWhenOffline: u, keepPreviousData: f } = i, [x, h, g, w] = He.get(n), [m, k] = Gt(e), C = Se(!1), T = Se(!1), v = Se(m), O = Se(t), B = Se(i), A = () => B.current, H = () => A().isVisible() && A().isOnline(), [G, ne, ie, X] = bi(n, m), q = Se({}).current, le = V(o) ? i.fallback[m] : o, me = (b, P) => {
     for (const Z in q) {
       const W = Z;
       if (W === "data") {
@@ -7799,7 +7799,7 @@ const Pr = le.use || ((e) => {
       n,
       m
     ]
-  ), ye[0], ye[1]), ve = !C.current, S = x[m] && x[m].length > 0, _ = se.data, L = V(_) ? ce : _, N = se.error, M = Se(L), Y = f ? V(_) ? M.current : _ : L, z = S && !V(N) ? !1 : ve && !V(s) ? s : A().isPaused() ? !1 : a ? V(L) ? !1 : c : V(L) || c, F = !!(m && t && ve && z), U = V(se.isValidating) ? F : se.isValidating, K = V(se.isLoading) ? F : se.isLoading, $ = Ce(
+  ), ye[0], ye[1]), ve = !C.current, S = x[m] && x[m].length > 0, _ = se.data, L = V(_) ? le : _, N = se.error, M = Se(L), Y = f ? V(_) ? M.current : _ : L, z = S && !V(N) ? !1 : ve && !V(s) ? s : A().isPaused() ? !1 : a ? V(L) ? !1 : c : V(L) || c, F = !!(m && t && ve && z), U = V(se.isValidating) ? F : se.isValidating, K = V(se.isLoading) ? F : se.isLoading, $ = Ce(
     async (b) => {
       const P = O.current;
       if (!m || !P || T.current || A().isPaused())
@@ -7943,7 +7943,7 @@ const Pr = le.use || ((e) => {
   };
 }, bp = Ma(yp), Br = Ut ? (e) => {
   e();
-} : le.startTransition, wp = (e) => {
+} : ce.startTransition, wp = (e) => {
   const [, t] = gn({}), i = Se(!1), n = Se(e), r = Se({
     data: !1,
     error: !1,
@@ -8207,7 +8207,6 @@ const Ip = (e) => {
   height: "100%",
   width: "100%",
   background: "#ffffff",
-  transition: "transform 0.2s ease-in-out",
   transform: "translateX(var(--progress))",
   borderRadius: "12px"
 }), it = {
@@ -8310,8 +8309,8 @@ class Up {
   }
 }
 const sn = new Up(), qa = "Recording.wav", Vp = 1500, du = (e) => {
-  const [t, i] = le.useState(!1), [n, r] = le.useState(!1), [a, o] = le.useState(!1);
-  return le.useEffect(() => {
+  const [t, i] = ce.useState(!1), [n, r] = ce.useState(!1), [a, o] = ce.useState(!1);
+  return ce.useEffect(() => {
     var p;
     const c = async () => {
       sn.checkMicrophonePermission().then(i);
@@ -8365,7 +8364,7 @@ const sn = new Up(), qa = "Recording.wav", Vp = 1500, du = (e) => {
     refreshInterval: 1e3
   });
 }, Jp = () => {
-  const [e, t] = le.useState(null), [i, n] = le.useState(0), [r, a] = le.useState(0), { data: o, isLoading: s } = Kp(i), { trigger: c, isMutating: p } = Sp("/ml-inference-jobs", Gp);
+  const [e, t] = ce.useState(null), [i, n] = ce.useState(0), [r, a] = ce.useState(0), { data: o, isLoading: s } = Kp(i), { trigger: c, isMutating: p } = Sp("/ml-inference-jobs", Gp);
   return {
     file: e,
     setFile: t,
@@ -8393,7 +8392,7 @@ const sn = new Up(), qa = "Recording.wav", Vp = 1500, du = (e) => {
     },
     isMutating: p
   };
-}, Ua = le.createContext({}), Si = () => le.useContext(Ua), fu = ({ children: e }) => {
+}, Ua = ce.createContext({}), Si = () => ce.useContext(Ua), fu = ({ children: e }) => {
   const t = Jp();
   return /* @__PURE__ */ ae.jsx(Fp, { children: /* @__PURE__ */ ae.jsx(Ua.Provider, { value: t, children: e }) });
 }, Xp = qe("button", {
@@ -8426,24 +8425,24 @@ const sn = new Up(), qa = "Recording.wav", Vp = 1500, du = (e) => {
     cursor: "not-allowed"
   }
 }), mu = (e) => {
-  var s;
-  const { data: t, isMutating: i } = Si(), n = (s = t == null ? void 0 : t.lossyOutputFile) == null ? void 0 : s.url, { player: r, playPause: a } = Pp(n), o = le.useRef(null);
-  return le.useEffect(() => {
-    if (!r.isMySrc || r.isLoading)
+  var c;
+  const { data: t, isMutating: i } = Si(), n = (c = t == null ? void 0 : t.lossyOutputFile) == null ? void 0 : c.url, { player: r, playPause: a } = Pp(n), o = ce.useRef(null), s = ce.useRef();
+  return ce.useEffect(() => {
+    if (!r.isPlaying)
       return () => {
         var l;
-        (l = o.current) == null || l.style.setProperty("--progress", "0%");
+        (l = o.current) == null || l.style.setProperty("--progress", "0%"), cancelAnimationFrame(s.current);
       };
-    const c = r.audioRef.current, p = () => {
+    const p = () => {
       var u;
-      const l = c.currentTime / c.duration;
-      (u = o == null ? void 0 : o.current) == null || u.style.setProperty("--progress", `${-100 + l * 100}%`);
+      const l = r.audioRef.current.currentTime / r.audioRef.current.duration;
+      (u = o.current) == null || u.style.setProperty("--progress", `${-100 + l * 100}%`), s.current = requestAnimationFrame(p);
     };
-    return c.addEventListener("timeupdate", p), () => {
+    return s.current = requestAnimationFrame(p), () => {
       var l;
-      c.removeEventListener("timeupdate", p), (l = o == null ? void 0 : o.current) == null || l.style.setProperty("--progress", "0%");
+      cancelAnimationFrame(s.current), (l = o.current) == null || l.style.setProperty("--progress", "0%");
     };
-  }, [r.isMySrc, r.isLoading, r.audioRef]), /* @__PURE__ */ ae.jsxs(xt, { row: !0, align: "center", flex: "1", ...e, children: [
+  }, [r.isPlaying, r.audioRef]), /* @__PURE__ */ ae.jsxs(xt, { row: !0, align: "center", flex: "1", gap: "16", ...e, children: [
     /* @__PURE__ */ ae.jsx(Xp, { onClick: a, disabled: r.isLoading || !n, children: /* @__PURE__ */ ae.jsxs(lt, { children: [
       /* @__PURE__ */ ae.jsx(lt.If, { isTrue: r.isLoading || (t == null ? void 0 : t.jobStatus) === "running" || i, children: /* @__PURE__ */ ae.jsx(kp, {}) }),
       /* @__PURE__ */ ae.jsx(lt.If, { isTrue: r.isPlaying, children: /* @__PURE__ */ ae.jsx(Op, {}) }),
@@ -8452,8 +8451,8 @@ const sn = new Up(), qa = "Recording.wav", Vp = 1500, du = (e) => {
     /* @__PURE__ */ ae.jsx(it.Root, { ref: o, children: /* @__PURE__ */ ae.jsx(it.Bar, {}) })
   ] });
 }, Zp = 30, Qp = (e) => {
-  const t = le.useRef(), i = le.useRef(null);
-  return le.useEffect(() => {
+  const t = ce.useRef(), i = ce.useRef(null);
+  return ce.useEffect(() => {
     let n = 0;
     return t.current = setInterval(() => {
       var a;