@moises.ai/design-system 4.18.10 → 4.18.12

package/dist/index.js

@@ -36,12 +36,12 @@ var gu = [" ", "Enter", "ArrowUp", "ArrowDown"], mu = [" ", "Enter"], _t = "Sele
     defaultProp: o ?? !1,
     onChange: i,
     caller: _t
-  }), [P, T] = vr({
+  }), [O, T] = vr({
     prop: l,
     defaultProp: c,
     onChange: d,
     caller: _t
-  }), Q = A.useRef(null), D = k ? m || !!k.closest("form") : !0, [z, U] = A.useState(/* @__PURE__ */ new Set()), O = Array.from(z).map((V) => V.props.value).join(";");
+  }), Q = A.useRef(null), D = k ? m || !!k.closest("form") : !0, [z, U] = A.useState(/* @__PURE__ */ new Set()), P = Array.from(z).map((V) => V.props.value).join(";");
   return /* @__PURE__ */ a(oc, { ...f, children: /* @__PURE__ */ v(
     Cu,
     {
@@ -54,7 +54,7 @@ var gu = [" ", "Enter", "ArrowUp", "ArrowDown"], mu = [" ", "Enter"], _t = "Sele
       valueNodeHasChildren: R,
       onValueNodeHasChildrenChange: E,
       contentId: Ls(),
-      value: P,
+      value: O,
       onValueChange: T,
       open: B,
       onOpenChange: x,
@@ -86,16 +86,16 @@ var gu = [" ", "Enter", "ArrowUp", "ArrowDown"], mu = [" ", "Enter"], _t = "Sele
             tabIndex: -1,
             name: p,
             autoComplete: h,
-            value: P,
+            value: O,
             onChange: (V) => T(V.target.value),
             disabled: g,
             form: m,
             children: [
-              P === void 0 ? /* @__PURE__ */ a("option", { value: "" }) : null,
+              O === void 0 ? /* @__PURE__ */ a("option", { value: "" }) : null,
               Array.from(z)
             ]
           },
-          O
+          P
         ) : null
       ]
     }
@@ -210,9 +210,9 @@ var nt = 10, [ti, Ut] = yn($t), Iu = "SelectContentImpl", Su = mc("SelectContent
       avoidCollisions: k,
       //
       ...y
-    } = n, N = Mt($t, r), [I, R] = A.useState(null), [E, w] = A.useState(null), B = Pe(t, (M) => R(M)), [x, P] = A.useState(null), [T, Q] = A.useState(
+    } = n, N = Mt($t, r), [I, R] = A.useState(null), [E, w] = A.useState(null), B = Pe(t, (M) => R(M)), [x, O] = A.useState(null), [T, Q] = A.useState(
       null
-    ), D = Qr(r), [z, U] = A.useState(!1), O = A.useRef(!1);
+    ), D = Qr(r), [z, U] = A.useState(!1), P = A.useRef(!1);
     A.useEffect(() => {
       if (I) return uc(I);
     }, [I]), hc();
@@ -258,13 +258,13 @@ var nt = 10, [ti, Ut] = yn($t), Iu = "SelectContentImpl", Su = mc("SelectContent
       ce && setTimeout(() => ce.ref.current.focus());
     }), de = A.useCallback(
       (M, L, ie) => {
-        const ce = !O.current && !ie;
-        (N.value !== void 0 && N.value === L || ce) && (P(M), ce && (O.current = !0));
+        const ce = !P.current && !ie;
+        (N.value !== void 0 && N.value === L || ce) && (O(M), ce && (P.current = !0));
       },
       [N.value]
     ), ge = A.useCallback(() => I == null ? void 0 : I.focus(), [I]), K = A.useCallback(
       (M, L, ie) => {
-        const ce = !O.current && !ie;
+        const ce = !P.current && !ie;
         (N.value !== void 0 && N.value === L || ce) && Q(M);
       },
       [N.value]
@@ -362,9 +362,9 @@ ni.displayName = Iu;
 var Eu = "SelectItemAlignedPosition", ri = A.forwardRef((n, t) => {
   const { __scopeSelect: r, onPlaced: s, ...o } = n, i = Mt($t, r), l = Ut($t, r), [c, d] = A.useState(null), [u, p] = A.useState(null), h = Pe(t, (B) => p(B)), g = Qr(r), C = A.useRef(!1), m = A.useRef(!0), { viewport: f, selectedItem: k, selectedItemText: y, focusSelectedItem: N } = l, I = A.useCallback(() => {
     if (i.trigger && i.valueNode && c && u && f && k && y) {
-      const B = i.trigger.getBoundingClientRect(), x = u.getBoundingClientRect(), P = i.valueNode.getBoundingClientRect(), T = y.getBoundingClientRect();
+      const B = i.trigger.getBoundingClientRect(), x = u.getBoundingClientRect(), O = i.valueNode.getBoundingClientRect(), T = y.getBoundingClientRect();
       if (i.dir !== "rtl") {
-        const oe = T.left - x.left, ee = P.left - oe, Ie = B.left - ee, Se = B.width + Ie, Ve = Math.max(Se, x.width), me = window.innerWidth - nt, ze = yr(ee, [
+        const oe = T.left - x.left, ee = O.left - oe, Ie = B.left - ee, Se = B.width + Ie, Ve = Math.max(Se, x.width), me = window.innerWidth - nt, ze = yr(ee, [
           nt,
           // Prevents the content from going off the starting edge of the
           // viewport. It may still go off the ending edge, but this can be
@@ -375,13 +375,13 @@ var Eu = "SelectItemAlignedPosition", ri = A.forwardRef((n, t) => {
         ]);
         c.style.minWidth = Se + "px", c.style.left = ze + "px";
       } else {
-        const oe = x.right - T.right, ee = window.innerWidth - P.right - oe, Ie = window.innerWidth - B.right - ee, Se = B.width + Ie, Ve = Math.max(Se, x.width), me = window.innerWidth - nt, ze = yr(ee, [
+        const oe = x.right - T.right, ee = window.innerWidth - O.right - oe, Ie = window.innerWidth - B.right - ee, Se = B.width + Ie, Ve = Math.max(Se, x.width), me = window.innerWidth - nt, ze = yr(ee, [
           nt,
           Math.max(nt, me - Ve)
         ]);
         c.style.minWidth = Se + "px", c.style.right = ze + "px";
       }
-      const Q = g(), D = window.innerHeight - nt * 2, z = f.scrollHeight, U = window.getComputedStyle(u), O = parseInt(U.borderTopWidth, 10), V = parseInt(U.paddingTop, 10), $ = parseInt(U.borderBottomWidth, 10), G = parseInt(U.paddingBottom, 10), W = O + V + z + G + $, q = Math.min(k.offsetHeight * 5, W), he = window.getComputedStyle(f), de = parseInt(he.paddingTop, 10), ge = parseInt(he.paddingBottom, 10), K = B.top + B.height / 2 - nt, X = D - K, F = k.offsetHeight / 2, M = k.offsetTop + F, L = O + V + M, ie = W - L;
+      const Q = g(), D = window.innerHeight - nt * 2, z = f.scrollHeight, U = window.getComputedStyle(u), P = parseInt(U.borderTopWidth, 10), V = parseInt(U.paddingTop, 10), $ = parseInt(U.borderBottomWidth, 10), G = parseInt(U.paddingBottom, 10), W = P + V + z + G + $, q = Math.min(k.offsetHeight * 5, W), he = window.getComputedStyle(f), de = parseInt(he.paddingTop, 10), ge = parseInt(he.paddingBottom, 10), K = B.top + B.height / 2 - nt, X = D - K, F = k.offsetHeight / 2, M = k.offsetTop + F, L = P + V + M, ie = W - L;
       if (L <= K) {
         const oe = Q.length > 0 && k === Q[Q.length - 1].ref.current;
         c.style.bottom = "0px";
@@ -396,7 +396,7 @@ var Eu = "SelectItemAlignedPosition", ri = A.forwardRef((n, t) => {
         c.style.top = "0px";
         const Ie = Math.max(
           K,
-          O + f.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
+          P + f.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
           (oe ? de : 0) + F
         ) + ie;
         c.style.height = Ie + "px", f.scrollTop = L - K + f.offsetTop;
@@ -857,12 +857,12 @@ var Ou = Go, Pu = Yo, Fu = Zo, zu = _o, Wu = $o, Hu = ei, Lu = si, Ku = oi, Vu =
     function x(Q) {
       T(Q, y.current);
     }
-    function P() {
+    function O() {
       const Q = w.current[y.current];
       R[y.current] !== Q && g(R);
     }
     function T(Q, D, { commit: z } = { commit: !1 }) {
-      const U = dh(i), O = uh(Math.round((Q - s) / i) * i + s, U), V = yr(O, [s, o]);
+      const U = dh(i), P = uh(Math.round((Q - s) / i) * i + s, U), V = yr(P, [s, o]);
       E(($ = []) => {
         const G = sh($, V, D);
         if (ch(G, d * i)) {
@@ -901,12 +901,12 @@ var Ou = Go, Pu = Yo, Fu = Zo, zu = _o, Wu = $o, Hu = ei, Lu = si, Ku = oi, Vu =
             inverted: C,
             onSlideStart: c ? void 0 : B,
             onSlideMove: c ? void 0 : x,
-            onSlideEnd: c ? void 0 : P,
+            onSlideEnd: c ? void 0 : O,
             onHomeKeyDown: () => !c && T(s, 0, { commit: !0 }),
             onEndKeyDown: () => !c && T(o, R.length - 1, { commit: !0 }),
             onStepKeyDown: ({ event: Q, direction: D }) => {
               if (!c) {
-                const O = yi.includes(Q.key) || Q.shiftKey && ki.includes(Q.key) ? 10 : 1, V = y.current, $ = R[V], G = i * O * D;
+                const P = yi.includes(Q.key) || Q.shiftKey && ki.includes(Q.key) ? 10 : 1, V = y.current, $ = R[V], G = i * P * D;
                 T($ + G, V, { commit: !0 });
               }
             }
@@ -2345,8 +2345,8 @@ const km = "_Callout_1lwt5_1", bm = "_size1_1lwt5_5", Im = "_onlyButton_1lwt5_5"
     }
     if (!N.current || !I.current) return;
     const B = () => {
-      const P = N.current.scrollHeight, T = I.current.scrollHeight;
-      E(P <= T ? "center" : "start");
+      const O = N.current.scrollHeight, T = I.current.scrollHeight;
+      E(O <= T ? "center" : "start");
     };
     B();
     const x = new ResizeObserver(B);
@@ -3091,10 +3091,10 @@ const Xf = "_DataTable_kyf7f_1", Zf = "_titleText_kyf7f_23", _f = "_artistText_k
       var z;
       const x = String(((z = B.active) == null ? void 0 : z.id) ?? "");
       if (!x) return;
-      const P = f.get(x);
-      if (!P) return;
-      const T = t.has(x), Q = T && r.length > 0 ? r : [P], D = {
-        row: P,
+      const O = f.get(x);
+      if (!O) return;
+      const T = t.has(x), Q = T && r.length > 0 ? r : [O], D = {
+        row: O,
         selectedRows: Q,
         isDraggedRowSelected: T
       };
@@ -3112,26 +3112,26 @@ const Xf = "_DataTable_kyf7f_1", Zf = "_titleText_kyf7f_23", _f = "_artistText_k
   ), R = J(
     (B) => {
       var Q, D;
-      const x = String(((Q = B.active) == null ? void 0 : Q.id) ?? ""), P = (D = B.over) != null && D.id ? String(B.over.id) : null, T = f.get(x) ?? (g == null ? void 0 : g.row);
-      if (T && (l == null || l(T, B.activatorEvent)), s && P && x) {
-        const z = n.findIndex((O) => O.id === x);
+      const x = String(((Q = B.active) == null ? void 0 : Q.id) ?? ""), O = (D = B.over) != null && D.id ? String(B.over.id) : null, T = f.get(x) ?? (g == null ? void 0 : g.row);
+      if (T && (l == null || l(T, B.activatorEvent)), s && O && x) {
+        const z = n.findIndex((P) => P.id === x);
         let U = null;
-        if (P === Ms)
+        if (O === Ms)
           U = 0;
-        else if (P === Us)
+        else if (O === Us)
           U = n.length;
-        else if (x !== P) {
-          const O = n.findIndex((V) => V.id === P);
-          O >= 0 && (U = O > z ? O + 1 : O);
+        else if (x !== O) {
+          const P = n.findIndex((V) => V.id === O);
+          P >= 0 && (U = P > z ? P + 1 : P);
         }
         if (z >= 0 && U != null) {
-          const O = zC({
+          const P = zC({
             data: n,
             selectedSet: t,
             order: z,
             moveBefore: U
           });
-          O && (o == null || o(O));
+          P && (o == null || o(P));
         }
       }
       k();
@@ -3300,7 +3300,7 @@ const YC = Te.memo(function({
   dndScopeId: I
 }) {
   var X;
-  const R = _(!1), E = _(!1), w = _(!1), B = _(!1), { listeners: x, setNodeRef: P, transform: T, transition: Q, isDragging: D } = du({
+  const R = _(!1), E = _(!1), w = _(!1), B = _(!1), { listeners: x, setNodeRef: O, transform: T, transition: Q, isDragging: D } = du({
     id: r,
     disabled: !Va({ row: t, rowDraggable: k, reorderable: y }),
     data: {
@@ -3313,7 +3313,7 @@ const YC = Te.memo(function({
   }), z = {
     ...T ? { transform: Au.Transform.toString(T) } : {},
     ...Q ? { transition: Q } : {}
-  }, U = i ? { ...z, "--row-bg": "var(--aqua-alpha-2)" } : z, O = (F) => {
+  }, U = i ? { ...z, "--row-bg": "var(--aqua-alpha-2)" } : z, P = (F) => {
     if (E.current) {
       E.current = !1;
       return;
@@ -3361,7 +3361,7 @@ const YC = Te.memo(function({
   return /* @__PURE__ */ v(
     Yn,
     {
-      ref: P,
+      ref: O,
       "data-row-id": r ?? void 0,
       className: b({
         [ne.rowSelected]: i,
@@ -3408,14 +3408,14 @@ const YC = Te.memo(function({
             ),
             "data-column-id": F.id,
             "data-sorted": d === F.id,
-            onClick: M === 0 ? void 0 : O,
+            onClick: M === 0 ? void 0 : P,
             onPointerUp: M === 0 ? void 0 : V,
             children: M === 0 ? /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
                 className: ne.rowActionButton,
-                onClick: O,
+                onClick: P,
                 onPointerUp: V,
                 children: m(t)
               }
@@ -3578,24 +3578,24 @@ const YC = Te.memo(function({
   ...x
 }) => {
   var Z, Me;
-  const P = _(null), T = c == null ? void 0 : c.field, Q = (Z = t == null ? void 0 : t[0]) == null ? void 0 : Z.id, D = (Me = t == null ? void 0 : t[1]) == null ? void 0 : Me.id, z = ae(() => {
+  const O = _(null), T = c == null ? void 0 : c.field, Q = (Z = t == null ? void 0 : t[0]) == null ? void 0 : Z.id, D = (Me = t == null ? void 0 : t[1]) == null ? void 0 : Me.id, z = ae(() => {
     if (t != null && t.length)
       return !T || T === Q ? D : T;
   }, [t, T, Q, D]), U = ae(
     () => r.map((fe, Ce) => OC(fe, Ce)),
     [r]
-  ), O = ae(
+  ), P = ae(
     () => new Set((s ?? []).map((fe) => String(fe))),
     [s]
   ), V = ae(
-    () => U.filter((fe) => fe.id && O.has(fe.id)),
-    [U, O]
+    () => U.filter((fe) => fe.id && P.has(fe.id)),
+    [U, P]
   ), $ = J(
     (fe, Ce) => {
       const Ee = Xt(fe, Ce);
-      return Ee != null && O.has(Ee);
+      return Ee != null && P.has(Ee);
     },
-    [O]
+    [P]
   ), G = s.length, W = (r == null ? void 0 : r.length) ?? 0, q = G > 0, he = W > 0 && G === W, de = ae(
     () => r == null ? void 0 : r.some((fe) => {
       var Ce;
@@ -3610,18 +3610,18 @@ const YC = Te.memo(function({
   ), K = J(
     (fe, Ce) => {
       if (!p) return;
-      const Ee = P.current, $e = Ee != null ? Math.min(Ee, Ce) : Ce, qe = Ee != null ? Math.max(Ee, Ce) : Ce;
+      const Ee = O.current, $e = Ee != null ? Math.min(Ee, Ce) : Ce, qe = Ee != null ? Math.max(Ee, Ce) : Ce;
       for (let Zn = $e; Zn <= qe; Zn++) {
         const Ua = Xt(r[Zn], Zn);
         Ua != null && p(Ua, !0);
       }
-      Ee == null && (P.current = Ce);
+      Ee == null && (O.current = Ce);
     },
     [r, p]
   ), X = J(
     (fe, Ce) => {
       const Ee = (r == null ? void 0 : r.findIndex(($e, qe) => Xt($e, qe) === String(fe))) ?? -1;
-      Ee >= 0 && (P.current = Ee), p == null || p(String(fe), Ce);
+      Ee >= 0 && (O.current = Ee), p == null || p(String(fe), Ce);
     },
     [r, p]
   ), {
@@ -3633,7 +3633,7 @@ const YC = Te.memo(function({
     monitorHandlers: oe
   } = KC({
     rows: U,
-    selectedSet: O,
+    selectedSet: P,
     selectedRows: V,
     reorderable: C,
     onReorder: m,
@@ -4008,7 +4008,7 @@ const dv = "_container_5ow1v_1", uv = "_triggerWithClick_5ow1v_12", hv = "_chevr
       p && (D.preventDefault(), D.stopPropagation(), p(D));
     }, x = J((D) => {
       D.key === "Tab" && D.stopPropagation();
-    }, []), P = J((D) => {
+    }, []), O = J((D) => {
       D.preventDefault();
       const z = D.currentTarget.querySelector("[data-tools-dropdown-panel]");
       z == null || z.focus({ preventScroll: !0 });
@@ -4031,7 +4031,7 @@ const dv = "_container_5ow1v_1", uv = "_triggerWithClick_5ow1v_12", hv = "_chevr
         style: w,
         sideOffset: d,
         alignOffset: 0,
-        onOpenAutoFocus: P,
+        onOpenAutoFocus: O,
         onCloseAutoFocus: (D) => {
           D.preventDefault();
         },
@@ -4104,8 +4104,8 @@ const vv = "_popoverPortal_j8b3y_1", yv = "_popoverContent_j8b3y_9", kv = "_cont
   }) => {
     const g = h.open !== void 0, [C, m] = j(!1), f = g ? h.open : C, k = J(
       (x) => {
-        var P;
-        g || m(x), (P = h == null ? void 0 : h.onOpenChange) == null || P.call(h, x);
+        var O;
+        g || m(x), (O = h == null ? void 0 : h.onOpenChange) == null || O.call(h, x);
       },
       [g, h == null ? void 0 : h.onOpenChange]
     ), y = J(() => k(!1), [k]), N = u ? u(y) : y, I = {
@@ -4118,8 +4118,8 @@ const vv = "_popoverPortal_j8b3y_1", yv = "_popoverContent_j8b3y_9", kv = "_cont
       x.key === "Tab" && x.stopPropagation();
     }, []), E = J((x) => {
       x.preventDefault();
-      const P = x.currentTarget.querySelector("[data-tools-popover-panel]");
-      P == null || P.focus({ preventScroll: !0 });
+      const O = x.currentTarget.querySelector("[data-tools-popover-panel]");
+      O == null || O.focus({ preventScroll: !0 });
     }, []), w = () => /* @__PURE__ */ a(
       "div",
       {
@@ -4389,14 +4389,14 @@ function Wv({ initialScreen: n, animated: t, children: r }) {
       return (z = h[Q.name]) != null && z.keepMounted ? { entry: Q, stackIndex: D } : null;
     }).filter(Boolean),
     [s, h]
-  ), w = (Q, D) => Q in i ? i[Q] : R[Q] ?? D, B = R.component, x = R.keepMounted === !0, P = J(
+  ), w = (Q, D) => Q in i ? i[Q] : R[Q] ?? D, B = R.component, x = R.keepMounted === !0, O = J(
     (Q) => {
       u.current[u.current.length - 1].name === I.name && l((z) => ({ ...z, ...Q }));
     },
     [I.name]
   ), T = ae(
-    () => ({ name: I.name, params: I.params || {}, setOptions: P }),
-    [I.name, I.params, P]
+    () => ({ name: I.name, params: I.params || {}, setOptions: O }),
+    [I.name, I.params, O]
   );
   return /* @__PURE__ */ a(Tl.Provider, { value: N, children: /* @__PURE__ */ v("div", { style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }, children: [
     /* @__PURE__ */ a(
@@ -4426,12 +4426,12 @@ function Wv({ initialScreen: n, animated: t, children: r }) {
           E.map(({ entry: Q, stackIndex: D }) => {
             const z = h[Q.name];
             if (!(z != null && z.component)) return null;
-            const U = z.component, O = Q.name === I.name, V = O ? T : { name: Q.name, params: Q.params || {}, setOptions: () => {
+            const U = z.component, P = Q.name === I.name, V = P ? T : { name: Q.name, params: Q.params || {}, setOptions: () => {
             } };
             return /* @__PURE__ */ a(
               "div",
               {
-                style: O ? {
+                style: P ? {
                   position: "relative",
                   display: "flex",
                   flexDirection: "column",
@@ -5116,7 +5116,7 @@ const Qa = Ge(function({
   le(() => {
     I.current = 0, w(0);
   }, [d]), le(() => () => clearTimeout(R.current), []);
-  const P = Math.max(
+  const O = Math.max(
     0,
     Math.min(100, Ul(r) * 100)
   ), T = Fs(h), Q = Fs(g), D = Math.max(T, Q);
@@ -5129,7 +5129,7 @@ const Qa = Ge(function({
       });
     }, 400)), D <= 0 && (I.current = 0, w(0));
   }, [D]);
-  const z = z1(E), U = E > 0, O = J(
+  const z = z1(E), U = E > 0, P = J(
     (q) => {
       var de;
       if (!s) return;
@@ -5172,7 +5172,7 @@ const Qa = Ge(function({
       onMouseLeave: () => {
         C || m(!1);
       },
-      onPointerDown: O,
+      onPointerDown: P,
       onPointerMove: V,
       onPointerUp: $,
       children: /* @__PURE__ */ v("div", { ref: k, className: W, children: [
@@ -5182,7 +5182,7 @@ const Qa = Ge(function({
           Ol,
           {
             ref: y,
-            faderPercent: P,
+            faderPercent: O,
             isPressed: C,
             hover: c,
             volume: r,
@@ -5565,7 +5565,7 @@ const Ar = 19.5, pr = 19.5, $a = 14, eo = 18, ly = [
     dots: i || [],
     defaultDot: N,
     clickableDots: o
-  }), B = ae(() => typeof t == "object" && t !== null ? t.position : dy(t, i), [t, i]), x = ae(() => typeof t == "object" && t !== null ? t : (i == null ? void 0 : i.find((W) => W.position === B)) ?? null, [t, i, B]), { pointerRotation: P, pointerColor: T } = ae(() => uy(B, s), [B, s]);
+  }), B = ae(() => typeof t == "object" && t !== null ? t.position : dy(t, i), [t, i]), x = ae(() => typeof t == "object" && t !== null ? t : (i == null ? void 0 : i.find((W) => W.position === B)) ?? null, [t, i, B]), { pointerRotation: O, pointerColor: T } = ae(() => uy(B, s), [B, s]);
   if (le(() => () => {
     m.current != null && clearTimeout(m.current), f.current != null && clearTimeout(f.current);
   }, []), !y)
@@ -5595,7 +5595,7 @@ const Ar = 19.5, pr = 19.5, $a = 14, eo = 18, ly = [
     f.current = setTimeout(() => {
       f.current = null, C(!1);
     }, W);
-  }, O = (W) => {
+  }, P = (W) => {
     const q = to[W.color] || to.neutral, he = W.position === B, de = p === W.position && o;
     return s ? q.default : he ? q.active : de ? q.hover : q.default;
   }, V = u ? u(x ?? t) : (x == null ? void 0 : x.label) ?? (x == null ? void 0 : x.value) ?? B, $ = !s && (g || R), G = /* @__PURE__ */ a(
@@ -5623,7 +5623,7 @@ const Ar = 19.5, pr = 19.5, $a = 14, eo = 18, ly = [
         /* @__PURE__ */ a(
           "g",
           {
-            transform: `rotate(${P} ${Ar} ${pr})`,
+            transform: `rotate(${O} ${Ar} ${pr})`,
             children: /* @__PURE__ */ a(
               "path",
               {
@@ -5638,7 +5638,7 @@ const Ar = 19.5, pr = 19.5, $a = 14, eo = 18, ly = [
         i == null ? void 0 : i.map((W) => {
           const q = zl[W.position];
           if (!q) return null;
-          const he = O(W), de = o && !s;
+          const he = P(W), de = o && !s;
           return /* @__PURE__ */ v(Te.Fragment, { children: [
             de && /* @__PURE__ */ a(
               "circle",
@@ -6528,7 +6528,7 @@ const Vk = "_content_15iux_1", jk = "_pan_15iux_13", Gk = "_disabled_15iux_26",
     [t, B]
   );
   pn("wheel", x, u);
-  const P = J(
+  const O = J(
     (M) => {
       var ie;
       if (s) return;
@@ -6574,7 +6574,7 @@ const Vk = "_content_15iux_1", jk = "_pan_15iux_13", Gk = "_disabled_15iux_26",
       }
     },
     [s, t, B]
-  ), { arcPath: U, pointerRotation: O, arcColor: V, pointerColor: $ } = ae(() => {
+  ), { arcPath: U, pointerRotation: P, arcColor: V, pointerColor: $ } = ae(() => {
     const M = ds(t, o, i), L = cs(M), ie = ls + L * Math.PI, ce = xn + jt * Math.cos(ls), oe = Tn + jt * Math.sin(ls), ee = xn + jt * Math.cos(ie), Ie = Tn + jt * Math.sin(ie), Se = 0, Ve = L > 0 ? 1 : 0;
     return {
       arcPath: `M ${ce.toFixed(3)} ${oe.toFixed(3)}
@@ -6628,7 +6628,7 @@ const Vk = "_content_15iux_1", jk = "_pan_15iux_13", Gk = "_disabled_15iux_26",
         p && or.active,
         s && or.disabled
       ),
-      onPointerDown: P,
+      onPointerDown: O,
       onPointerMove: T,
       onPointerUp: Q,
       onPointerCancel: Q,
@@ -6662,7 +6662,7 @@ const Vk = "_content_15iux_1", jk = "_pan_15iux_13", Gk = "_disabled_15iux_26",
         /* @__PURE__ */ a(
           "g",
           {
-            transform: `rotate(${O} ${xn} ${Tn})`,
+            transform: `rotate(${P} ${xn} ${Tn})`,
             children: /* @__PURE__ */ a(
               "path",
               {
@@ -7152,11 +7152,11 @@ class m0 extends Xn {
           T.relatedTarget && T.relatedTarget !== document.documentElement || w(T);
         }, x = (T) => {
           k && (T.stopPropagation(), T.preventDefault());
-        }, P = (T) => {
+        }, O = (T) => {
           T.defaultPrevented || d.size > 1 || k && T.preventDefault();
         };
-        document.addEventListener("pointermove", E), document.addEventListener("pointerup", w), document.addEventListener("pointerout", B), document.addEventListener("pointercancel", B), document.addEventListener("touchmove", P, { passive: !1 }), document.addEventListener("click", x, { capture: !0 }), p = () => {
-          document.removeEventListener("pointermove", E), document.removeEventListener("pointerup", w), document.removeEventListener("pointerout", B), document.removeEventListener("pointercancel", B), document.removeEventListener("touchmove", P), setTimeout(() => {
+        document.addEventListener("pointermove", E), document.addEventListener("pointerup", w), document.addEventListener("pointerout", B), document.addEventListener("pointercancel", B), document.addEventListener("touchmove", O, { passive: !1 }), document.addEventListener("click", x, { capture: !0 }), p = () => {
+          document.removeEventListener("pointermove", E), document.removeEventListener("pointerup", w), document.removeEventListener("pointerout", B), document.removeEventListener("pointercancel", B), document.removeEventListener("touchmove", O), setTimeout(() => {
             document.removeEventListener("click", x, { capture: !0 });
           }, 10);
         };
@@ -7330,13 +7330,13 @@ class m0 extends Xn {
       const I = f / 2, R = y.barWidth ? y.barWidth * N : 1, E = y.barGap ? y.barGap * N : y.barWidth ? R / 2 : 0, w = R + E || 1;
       return { halfHeight: I, barWidth: R, barGap: E, barRadius: y.barRadius || 0, barMinHeight: y.barMinHeight ? y.barMinHeight * N : 0, barIndexScale: k > 0 ? m / w / k : 0, barSpacing: w };
     }({ width: i, height: l, length: (t[0] || []).length, options: r, pixelRatio: this.getPixelRatio() }), C = function({ channelData: m, barIndexScale: f, barSpacing: k, barWidth: y, halfHeight: N, vScale: I, canvasHeight: R, barAlign: E, barMinHeight: w }) {
-      const B = m[0] || [], x = m[1] || B, P = B.length, T = [];
+      const B = m[0] || [], x = m[1] || B, O = B.length, T = [];
       let Q = 0, D = 0, z = 0;
-      for (let U = 0; U <= P; U++) {
-        const O = Math.round(U * f);
-        if (O > Q) {
+      for (let U = 0; U <= O; U++) {
+        const P = Math.round(U * f);
+        if (P > Q) {
           const { topHeight: G, totalHeight: W } = A0({ maxTop: D, maxBottom: z, halfHeight: N, vScale: I, barMinHeight: w, barAlign: E }), q = p0({ barAlign: E, halfHeight: N, topHeight: G, totalHeight: W, canvasHeight: R });
-          T.push({ x: Q * k, y: q, width: y, height: W }), Q = O, D = 0, z = 0;
+          T.push({ x: Q * k, y: q, width: y, height: W }), Q = P, D = 0, z = 0;
         }
         const V = Math.abs(B[U] || 0), $ = Math.abs(x[U] || 0);
         V > D && (D = V), $ > z && (z = $);
@@ -7359,8 +7359,8 @@ class m0 extends Xn {
             const T = N + (Math.round(w * g * h) || 1) * I;
             R.push({ x: E, y: T }), E = x, w = 0;
           }
-          const P = Math.abs(m[B] || 0);
-          P > w && (w = P);
+          const O = Math.abs(m[B] || 0);
+          O > w && (w = O);
         }
         return R.push({ x: E, y: N }), R;
       });
@@ -7705,10 +7705,10 @@ class jn extends h0 {
     super({ media: r, mediaControls: t.mediaControls, autoplay: t.autoplay, playbackRate: t.audioRate }), this.plugins = [], this.decodedData = null, this.stopAtPosition = null, this.subscriptions = [], this.mediaSubscriptions = [], this.abortController = null, this._isDestroyed = !1, this._loadVersion = 0, this.reactiveCleanups = [], this.options = Object.assign({}, C0, t);
     const { state: s, actions: o } = function(c) {
       var d, u, p, h, g, C;
-      const m = (d = c == null ? void 0 : c.currentTime) !== null && d !== void 0 ? d : Re(0), f = (u = c == null ? void 0 : c.duration) !== null && u !== void 0 ? u : Re(0), k = (p = c == null ? void 0 : c.isPlaying) !== null && p !== void 0 ? p : Re(!1), y = (h = c == null ? void 0 : c.isSeeking) !== null && h !== void 0 ? h : Re(!1), N = (g = c == null ? void 0 : c.volume) !== null && g !== void 0 ? g : Re(1), I = (C = c == null ? void 0 : c.playbackRate) !== null && C !== void 0 ? C : Re(1), R = Re(null), E = Re(null), w = Re(""), B = Re(0), x = Re(0), P = Yt(() => !k.value, [k]), T = Yt(() => R.value !== null, [R]), Q = Yt(() => T.value && f.value > 0, [T, f]), D = Yt(() => m.value, [m]), z = Yt(() => f.value > 0 ? m.value / f.value : 0, [m, f]);
-      return { state: { currentTime: m, duration: f, isPlaying: k, isPaused: P, isSeeking: y, volume: N, playbackRate: I, audioBuffer: R, peaks: E, url: w, zoom: B, scrollPosition: x, canPlay: T, isReady: Q, progress: D, progressPercent: z }, actions: { setCurrentTime: (U) => {
-        const O = Math.max(0, Math.min(f.value || 1 / 0, U));
-        m.set(O);
+      const m = (d = c == null ? void 0 : c.currentTime) !== null && d !== void 0 ? d : Re(0), f = (u = c == null ? void 0 : c.duration) !== null && u !== void 0 ? u : Re(0), k = (p = c == null ? void 0 : c.isPlaying) !== null && p !== void 0 ? p : Re(!1), y = (h = c == null ? void 0 : c.isSeeking) !== null && h !== void 0 ? h : Re(!1), N = (g = c == null ? void 0 : c.volume) !== null && g !== void 0 ? g : Re(1), I = (C = c == null ? void 0 : c.playbackRate) !== null && C !== void 0 ? C : Re(1), R = Re(null), E = Re(null), w = Re(""), B = Re(0), x = Re(0), O = Yt(() => !k.value, [k]), T = Yt(() => R.value !== null, [R]), Q = Yt(() => T.value && f.value > 0, [T, f]), D = Yt(() => m.value, [m]), z = Yt(() => f.value > 0 ? m.value / f.value : 0, [m, f]);
+      return { state: { currentTime: m, duration: f, isPlaying: k, isPaused: O, isSeeking: y, volume: N, playbackRate: I, audioBuffer: R, peaks: E, url: w, zoom: B, scrollPosition: x, canPlay: T, isReady: Q, progress: D, progressPercent: z }, actions: { setCurrentTime: (U) => {
+        const P = Math.max(0, Math.min(f.value || 1 / 0, U));
+        m.set(P);
       }, setDuration: (U) => {
         f.set(Math.max(0, U));
       }, setPlaying: (U) => {
@@ -7716,11 +7716,11 @@ class jn extends h0 {
       }, setSeeking: (U) => {
         y.set(U);
       }, setVolume: (U) => {
-        const O = Math.max(0, Math.min(1, U));
-        N.set(O);
+        const P = Math.max(0, Math.min(1, U));
+        N.set(P);
       }, setPlaybackRate: (U) => {
-        const O = Math.max(0.1, Math.min(16, U));
-        I.set(O);
+        const P = Math.max(0.1, Math.min(16, U));
+        I.set(P);
       }, setAudioBuffer: (U) => {
         R.set(U), U && f.set(U.duration);
       }, setPeaks: (U) => {
@@ -8105,7 +8105,7 @@ const ql = Ge((n) => {
   id: C,
   tabIndex: m
 }, f) {
-  const [k, y] = j(!1), [N, I] = j(!1), [R, E] = j(!1), w = _(null), B = _(!1), x = _(null), P = _(null), T = s || !N;
+  const [k, y] = j(!1), [N, I] = j(!1), [R, E] = j(!1), w = _(null), B = _(!1), x = _(null), O = _(null), T = s || !N;
   le(() => {
     typeof navigator < "u" && E(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
   }, []);
@@ -8140,7 +8140,7 @@ const ql = Ge((n) => {
   ), U = J(() => {
     const K = w.current;
     K && (R || K.setOptions({ progressColor: p }), K.play());
-  }, [R, p]), O = J(() => {
+  }, [R, p]), P = J(() => {
     var M;
     const K = w.current;
     if (T || !K) return;
@@ -8149,15 +8149,15 @@ const ql = Ge((n) => {
       const L = z(K, {
         syncTime: !0
       });
-      P.current = L.previousActive;
+      O.current = L.previousActive;
     } else
-      P.current = null;
+      O.current = null;
     U();
   }, [T, U, z, o]);
   md(
     f,
     () => ({
-      play: O,
+      play: P,
       pause: Q,
       isReady: () => N,
       isPlaying: () => {
@@ -8165,7 +8165,7 @@ const ql = Ge((n) => {
         return !!((K = w.current) != null && K.isPlaying());
       }
     }),
-    [O, Q, N]
+    [P, Q, N]
   ), le(() => {
     w.current && t && (w.current.load(t), I(!1));
   }, [t]);
@@ -8173,12 +8173,12 @@ const ql = Ge((n) => {
     w.current = K, I(!0), y(!1);
   }, []), $ = J(
     (K) => {
-      const X = B.current, F = P.current, M = x.current;
+      const X = B.current, F = O.current, M = x.current;
       y(!0), l == null || l(!0), X || i == null || i(), o && (z(K, {
         seekTime: X ? M : void 0,
         syncTime: !X && !F,
         skipPauseFor: F
-      }), B.current = !1, x.current = null, P.current = null, o.setter((L) => ({
+      }), B.current = !1, x.current = null, O.current = null, o.setter((L) => ({
         ...L,
         isPlaying: !0,
         lastPlayed: K,
@@ -8249,9 +8249,9 @@ const ql = Ge((n) => {
         Q();
         return;
       }
-      O();
+      P();
     }
-  }, [T, Q, O]), ge = J(() => {
+  }, [T, Q, P]), ge = J(() => {
     T || i == null || i();
   }, [T, i]);
   return /* @__PURE__ */ v(
@@ -8532,7 +8532,12 @@ const nb = ({
   }, [n, m, f, C, h, c]), R = J((w) => {
     w.preventDefault(), w.stopPropagation(), y(!k);
   }, [k]), E = J((w) => {
-    w.stopPropagation(), g == null || g(i);
+    w.stopPropagation();
+    const B = i.filter((x) => {
+      var O;
+      return !x.loading && ((O = x.transfers) == null ? void 0 : O.length) > 0;
+    });
+    g == null || g(B);
   }, [g, i]);
   return /* @__PURE__ */ v(
     S,
@@ -8565,7 +8570,7 @@ const nb = ({
           )
         ] }),
         m === n && /* @__PURE__ */ v(S, { direction: "column", children: [
-          i.length === 0 && !l && /* @__PURE__ */ v(S, { direction: "row", gap: "3", p: "5", pt: "2", align: "center", justify: "center", children: [
+          o !== "voice" && i.length === 0 && !l && /* @__PURE__ */ v(S, { direction: "row", gap: "3", p: "5", pt: "2", align: "center", justify: "center", children: [
             /* @__PURE__ */ a(Bd, { width: 16, height: 16, style: { color: "var(--neutral-alpha-10)" } }),
             /* @__PURE__ */ a(H, { size: "2", style: { color: "var(--neutral-alpha-10)" }, children: u.noTracks || "This file has no tracks" })
           ] }),
@@ -8775,7 +8780,7 @@ const nb = ({
   const y = ae(() => {
     if (!g && h || g && f === null)
       return !0;
-    if (f) {
+    if (f !== null) {
       const E = u.find((w) => parseInt(w.pitchShift) === f);
       return (E == null ? void 0 : E.loading) === !0 || !(E != null && E.audioUrl);
     }
@@ -8825,8 +8830,20 @@ const nb = ({
             children: /* @__PURE__ */ a(H, { size: "2", asChild: !0, children: /* @__PURE__ */ a("span", { className: ln.trackTitle, children: c }) })
           }
         ),
-        y && /* @__PURE__ */ a(S, { align: "center", justify: "center", pl: "2", children: /* @__PURE__ */ a(Sn, {}) }),
-        !g && !p && !y ? /* @__PURE__ */ a(S, { align: "center", justify: "center", pr: "2", children: /* @__PURE__ */ a(Oe, { variant: "soft", color: "gray", size: "1", children: o.process || "Process" }) }) : g ? /* @__PURE__ */ a(
+        (g || p) && y && /* @__PURE__ */ a(S, { align: "center", justify: "center", pl: "2", children: /* @__PURE__ */ a(Sn, {}) }),
+        !g && !p ? /* @__PURE__ */ a(S, { align: "center", justify: "center", pr: "2", pr: "0", children: /* @__PURE__ */ a(
+          Oe,
+          {
+            variant: "soft",
+            color: "gray",
+            size: "1",
+            disabled: y,
+            loading: y,
+            onClick: R,
+            style: { minWidth: "63px" },
+            children: o.process || "Process"
+          }
+        ) }) : g ? /* @__PURE__ */ a(
           Cb,
           {
             min: m,
@@ -8932,14 +8949,14 @@ const Db = "_starButton_1311l_1", Jb = "_disabled_1311l_17", Qb = "_readOnly_131
   ), I = J(
     (w) => {
       if (s || o) return;
-      const B = w.currentTarget.getBoundingClientRect(), x = w.clientX - B.left, P = B.width / n, T = Math.floor(x / P), D = Math.max(0, Math.min(T, n - 1)) + 1;
+      const B = w.currentTarget.getBoundingClientRect(), x = w.clientX - B.left, O = B.width / n, T = Math.floor(x / O), D = Math.max(0, Math.min(T, n - 1)) + 1;
       D !== m && (f(D), l == null || l({ value: D }));
     },
     [s, o, n, m, l]
   ), R = J(() => {
     s || o || (f(0), l == null || l({ value: 0 }));
   }, [s, o, l]), E = (w) => {
-    const B = m > 0 ? w < m : w < k, x = m > 0 && w < m, P = w < k;
+    const B = m > 0 ? w < m : w < k, x = m > 0 && w < m, O = w < k;
     return /* @__PURE__ */ a(
       "button",
       {
@@ -8947,7 +8964,7 @@ const Db = "_starButton_1311l_1", Jb = "_disabled_1311l_17", Qb = "_readOnly_131
         className: b(Xe.starButton, {
           [Xe.filled]: B,
           [Xe.hovered]: x,
-          [Xe.active]: P,
+          [Xe.active]: O,
           [Xe.disabled]: s,
           [Xe.readOnly]: o
         }),
@@ -9211,11 +9228,11 @@ const iI = "_boxVertical_ujop8_21", lI = "_sliderRoot_ujop8_27", cI = "_sliderRo
       u,
       o
     ]
-  ), x = typeof k == "number" ? `${k}px` : k, P = typeof f == "number" ? `${f}px` : f;
+  ), x = typeof k == "number" ? `${k}px` : k, O = typeof f == "number" ? `${f}px` : f;
   return /* @__PURE__ */ v(
     Ne,
     {
-      width: E ? "100%" : P,
+      width: E ? "100%" : O,
       className: b(E && ve.boxVertical),
       style: E ? { "--slider-vertical-height": x } : void 0,
       children: [
@@ -9707,22 +9724,22 @@ const Zl = ({
   onDrop: E,
   isLoading: w = !1
 }) => {
-  const [B, x] = j(!1), P = !!y, { setNodeRef: T, isOver: Q } = Vo({
+  const [B, x] = j(!1), O = !!y, { setNodeRef: T, isOver: Q } = Vo({
     id: y ?? "__setlist-item-noop__",
-    disabled: !P
+    disabled: !O
   }), D = () => {
     x(!0);
   }, z = () => {
     x(!1);
   }, U = (V) => {
     V.stopPropagation();
-  }, O = (V) => {
+  }, P = (V) => {
     V.stopPropagation();
   };
   return /* @__PURE__ */ v(
     S,
     {
-      ref: P ? T : void 0,
+      ref: O ? T : void 0,
       gap: "3",
       align: "center",
       role: r ? "button" : void 0,
@@ -9813,7 +9830,7 @@ const Zl = ({
                   [se.dropdownTriggerWrapperMobile]: m
                 }),
                 onPointerDown: U,
-                onClick: O,
+                onClick: P,
                 children: /* @__PURE__ */ a(Xr, { hovered: u })
               }
             ),
@@ -9845,15 +9862,15 @@ const Zl = ({
     r == null || r(Z), y && k();
   }, E = () => {
     c == null || c(), y && k();
-  }, [w, B] = j(!1), [x, P] = j(!1), [T, Q] = j(!1), [D, z] = j(!1), U = _(null), O = _(null), V = _(null), $ = _(p), G = 50, W = 200, q = 44, he = 4, de = p && c ? 1 : 0, ge = p && !w && !D, K = n, X = n.length + (c ? 1 : 0), F = Math.min(4, X), M = W + Math.max(0, F - 1) * G, L = M, ie = () => {
-    U.current && (clearTimeout(U.current), U.current = null), O.current && (clearTimeout(O.current), O.current = null), P(!1), Q(!0), B(!0), O.current = setTimeout(() => {
-      Q(!1), O.current = null;
+  }, [w, B] = j(!1), [x, O] = j(!1), [T, Q] = j(!1), [D, z] = j(!1), U = _(null), P = _(null), V = _(null), $ = _(p), G = 50, W = 200, q = 44, he = 4, de = p && c ? 1 : 0, ge = p && !w && !D, K = n, X = n.length + (c ? 1 : 0), F = Math.min(4, X), M = W + Math.max(0, F - 1) * G, L = M, ie = () => {
+    U.current && (clearTimeout(U.current), U.current = null), P.current && (clearTimeout(P.current), P.current = null), O(!1), Q(!0), B(!0), P.current = setTimeout(() => {
+      Q(!1), P.current = null;
     }, L);
   }, ce = () => {
-    p && (U.current && (clearTimeout(U.current), U.current = null), x ? P(!1) : w || ie());
+    p && (U.current && (clearTimeout(U.current), U.current = null), x ? O(!1) : w || ie());
   }, oe = () => {
-    p && w && (O.current && (clearTimeout(O.current), O.current = null), Q(!1), P(!0), U.current = setTimeout(() => {
-      U.current = null, B(!1), P(!1);
+    p && w && (P.current && (clearTimeout(P.current), P.current = null), Q(!1), O(!0), U.current = setTimeout(() => {
+      U.current = null, B(!1), O(!1);
     }, L));
   }, ee = (Z) => {
     p && (Z.stopPropagation(), ie());
@@ -9868,17 +9885,17 @@ const Zl = ({
   };
   if ($.current !== p) {
     const Z = $.current;
-    $.current = p, p && !Z ? (z(!0), Q(!1), P(!0)) : !p && Z && (B(!1), z(!0), P(!1), Q(!0));
+    $.current = p, p && !Z ? (z(!0), Q(!1), O(!0)) : !p && Z && (B(!1), z(!0), O(!1), Q(!0));
   }
   le(() => {
     if (!D) return;
-    U.current && (clearTimeout(U.current), U.current = null), O.current && (clearTimeout(O.current), O.current = null);
+    U.current && (clearTimeout(U.current), U.current = null), P.current && (clearTimeout(P.current), P.current = null);
     const Z = setTimeout(() => {
-      z(!1), P(!1), Q(!1);
+      z(!1), O(!1), Q(!1);
     }, L);
     return () => clearTimeout(Z);
   }, [D, L]), le(() => () => {
-    U.current && clearTimeout(U.current), O.current && clearTimeout(O.current);
+    U.current && clearTimeout(U.current), P.current && clearTimeout(P.current);
   }, []);
   const Ve = (Z) => {
     if (!p) return;
@@ -10128,7 +10145,7 @@ const Zl = ({
     h || k(!0);
   }, x = () => {
     h || k(!1);
-  }, P = (G) => {
+  }, O = (G) => {
     E ? w() : l && l(G);
   }, T = () => {
     h || !r || R(!0);
@@ -10140,7 +10157,7 @@ const Zl = ({
     T();
   }, U = (G) => {
     h || !r || (G.preventDefault(), T());
-  }, O = E ? "Expand menu" : "Moises", V = "Moises";
+  }, P = E ? "Expand menu" : "Moises", V = "Moises";
   le(() => {
     if (!I) return;
     const G = () => {
@@ -10216,7 +10233,7 @@ const Zl = ({
                 {
                   type: "button",
                   className: Ae.logoButton,
-                  onClick: P,
+                  onClick: O,
                   "aria-label": V,
                   children: /* @__PURE__ */ v(
                     S,
@@ -10292,8 +10309,8 @@ const Zl = ({
                       {
                         type: "button",
                         className: Ae.logoButton,
-                        onClick: P,
-                        "aria-label": O,
+                        onClick: O,
+                        "aria-label": P,
                         children: /* @__PURE__ */ a(
                           S,
                           {
@@ -10335,8 +10352,8 @@ const Zl = ({
                       {
                         type: "button",
                         className: Ae.logoButton,
-                        onClick: P,
-                        "aria-label": O,
+                        onClick: O,
+                        "aria-label": P,
                         children: /* @__PURE__ */ a(
                           S,
                           {
@@ -10500,7 +10517,7 @@ const sE = "_sectionTitle_bwlze_1", aE = "_separator_bwlze_17", co = {
   className: g,
   ...C
 }, m) {
-  const f = C["aria-label"], k = _(null), y = _(null), N = _(null), I = _(null), [R, E] = j(!1), [w, B] = j(!1), [x, P] = j(!1), T = _({ value: t, min: s, max: o, step: i, disabled: l, onValueChange: r });
+  const f = C["aria-label"], k = _(null), y = _(null), N = _(null), I = _(null), [R, E] = j(!1), [w, B] = j(!1), [x, O] = j(!1), T = _({ value: t, min: s, max: o, step: i, disabled: l, onValueChange: r });
   T.current = { value: t, min: s, max: o, step: i, disabled: l, onValueChange: r };
   const Q = _({
     tooltipDelayDuration: d,
@@ -10550,7 +10567,7 @@ const sE = "_sectionTitle_bwlze_1", aE = "_separator_bwlze_17", co = {
     return F.addEventListener("wheel", ce, { passive: !1 }), () => F.removeEventListener("wheel", ce);
   }, []), le(() => {
     if (!x) return;
-    const F = () => P(!1);
+    const F = () => O(!1);
     return window.addEventListener("pointerup", F), window.addEventListener("pointercancel", F), () => {
       window.removeEventListener("pointerup", F), window.removeEventListener("pointercancel", F);
     };
@@ -10567,15 +10584,15 @@ const sE = "_sectionTitle_bwlze_1", aE = "_separator_bwlze_17", co = {
     },
     [m]
   ), U = () => {
-    l || P(!0);
-  }, O = () => {
+    l || O(!0);
+  }, P = () => {
     N.current != null && (clearTimeout(N.current), N.current = null);
   }, V = () => {
     I.current != null && (clearTimeout(I.current), I.current = null);
   }, $ = () => {
     y.current === "keyboard" && E(!0);
   }, G = () => E(!1), W = () => E(!1), q = () => {
-    V(), O();
+    V(), P();
     const { tooltipDelayDuration: F } = Q.current;
     if (F <= 0) {
       B(!0);
@@ -10585,7 +10602,7 @@ const sE = "_sectionTitle_bwlze_1", aE = "_separator_bwlze_17", co = {
       N.current = null, B(!0);
     }, F);
   }, he = () => {
-    O();
+    P();
     const { tooltipCloseDelay: F } = Q.current;
     if (F <= 0) {
       B(!1);
@@ -11481,9 +11498,9 @@ const fr = {
   boostLoading: w,
   suggestedTags: B,
   onFetchSuggestedTags: x,
-  suggestedTagsLoading: P
+  suggestedTagsLoading: O
 }) => {
-  const [T, Q] = j(!1), [D, z] = j("2"), [U, O] = j(D), { submitted: V, handleSubmit: $ } = Ma(d), G = ae(() => [
+  const [T, Q] = j(!1), [D, z] = j("2"), [U, P] = j(D), { submitted: V, handleSubmit: $ } = Ma(d), G = ae(() => [
     { value: "2", label: l._("Presets") },
     { value: "1", label: l._("Custom") }
   ], []), W = (r ?? []).some(
@@ -11550,7 +11567,7 @@ const fr = {
     if (D !== U) {
       Q(!0);
       const X = setTimeout(() => {
-        O(D), Q(!1);
+        P(D), Q(!1);
       }, fr.timeouts.animationDuration);
       return () => clearTimeout(X);
     }
@@ -11635,7 +11652,7 @@ const fr = {
                   boostLoading: w,
                   suggestedTags: B,
                   onFetchSuggestedTags: x,
-                  suggestedTagsLoading: P
+                  suggestedTagsLoading: O
                 }
               ),
               U === "2" && W && /* @__PURE__ */ a(
@@ -11986,11 +12003,11 @@ const Ao = {
     d((B) => {
       let x = [...B.selectedStems];
       if (x.includes(w))
-        x = x.filter((P) => P !== w);
+        x = x.filter((O) => O !== w);
       else {
-        const P = $E[w] || [];
+        const O = $E[w] || [];
         x = x.filter(
-          (T) => !P.includes(T)
+          (T) => !O.includes(T)
         ), x.push(w);
       }
       return x.includes("other") && x.length === 1 ? { ...B, selectedStems: [] } : { ...B, selectedStems: x };
@@ -12877,16 +12894,16 @@ const Pw = "_track_2k5w9_1", Fw = "_name_2k5w9_11", zw = "_line_2k5w9_22", Ww =
     onVolumeReset: w,
     onPanChange: B,
     onMutedChange: x,
-    onRecordChange: P,
+    onRecordChange: O,
     onSoloChange: T,
     onOpenChange: Q,
     onInstrumentChange: D,
     onDeviceChange: z,
     onChannelChange: U,
     // Children (having content means group/takelanes)
-    children: O
+    children: P
   }) => {
-    const V = !!O, $ = J(
+    const V = !!P, $ = J(
       () => Q == null ? void 0 : Q(!y),
       [y, Q]
     );
@@ -13000,7 +13017,7 @@ const Pw = "_track_2k5w9_1", Fw = "_name_2k5w9_11", zw = "_line_2k5w9_22", Ww =
                                       {
                                         type: "record",
                                         selected: m,
-                                        onClick: () => P == null ? void 0 : P()
+                                        onClick: () => O == null ? void 0 : O()
                                       }
                                     )
                                   }
@@ -13075,7 +13092,7 @@ const Pw = "_track_2k5w9_1", Fw = "_name_2k5w9_11", zw = "_line_2k5w9_22", Ww =
               )
             }
           ),
-          V && y && /* @__PURE__ */ a("div", { className: xe.group, children: O })
+          V && y && /* @__PURE__ */ a("div", { className: xe.group, children: P })
         ]
       }
     );
@@ -13288,7 +13305,7 @@ function ac({
   le(() => {
     typeof navigator < "u" && w(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
   }, []);
-  const B = ae(() => s, [s]), x = ae(() => o ? !1 : !B || B && f, [B, f, o]), P = _(null), T = _(null);
+  const B = ae(() => s, [s]), x = ae(() => o ? !1 : !B || B && f, [B, f, o]), O = _(null), T = _(null);
   le(() => {
     I || (!p || i) && R(!0);
   }, [p, i, I]);
@@ -13322,7 +13339,7 @@ function ac({
       h == null || h();
     },
     [r, d, h, m]
-  ), O = J(() => {
+  ), P = J(() => {
     k(!1), r == null || r(!1), m == null || m(!1), d && d.setter((W) => ({
       ...W,
       isPlaying: !1
@@ -13380,7 +13397,7 @@ function ac({
               display: x && y ? "block" : "none",
               cursor: "pointer"
             },
-            ref: P,
+            ref: O,
             children: /* @__PURE__ */ a(
               ql,
               {
@@ -13395,7 +13412,7 @@ function ac({
                 onReady: z,
                 onSeeking: V,
                 onPlay: U,
-                onPause: O,
+                onPause: P,
                 onFinish: $,
                 backend: E ? "WebAudio" : "MediaElement"
               }
@@ -13773,27 +13790,27 @@ const MN = "_footerVoiceForm_lsc2c_2", UN = {
     isPlaying: !1,
     id: "voice-form"
   }), x = J(
-    (O) => {
-      y(O);
-      const V = n.find(($) => $.identifier === O);
+    (P) => {
+      y(P);
+      const V = n.find(($) => $.identifier === P);
       r(($) => ({
         ...$,
         selectedVoice: V
       }));
     },
     [n, r]
-  ), P = J(
-    (O) => {
-      N !== O && I(O);
+  ), O = J(
+    (P) => {
+      N !== P && I(P);
     },
     [N, I]
   ), T = J(
-    (O) => {
+    (P) => {
       I(null), w.active && w.active.pause(), B((V) => ({
         ...V,
         isPlaying: !1,
         active: null
-      })), s(O);
+      })), s(P);
     },
     [s, w]
   ), Q = ae(
@@ -13803,7 +13820,7 @@ const MN = "_footerVoiceForm_lsc2c_2", UN = {
     }),
     [w]
   ), D = ae(
-    () => n.find((O) => O.identifier === i) || n[0],
+    () => n.find((P) => P.identifier === i) || n[0],
     [n, i]
   ), z = ae(
     () => !!(t.trackName || t.trackId || t.customAudio),
@@ -13813,19 +13830,19 @@ const MN = "_footerVoiceForm_lsc2c_2", UN = {
       E();
       return;
     }
-    D && (x(D.identifier), o(), r((O) => {
+    D && (x(D.identifier), o(), r((P) => {
       var V;
-      return ((V = O.selectedVoice) == null ? void 0 : V.identifier) === D.identifier ? O : { ...O, selectedVoice: D };
+      return ((V = P.selectedVoice) == null ? void 0 : V.identifier) === D.identifier ? P : { ...P, selectedVoice: D };
     })), z && (D ? E({ selectedVoice: D }) : E());
   }, [i, E, D, x, o]);
   return le(() => {
-    var O;
+    var P;
     if (w.isPlaying === !1)
       I(null);
     else if (w.isPlaying === !0 && w.active) {
-      const V = (O = n.find(
+      const V = (P = n.find(
         ($) => w.active && $.metadata.previewUrl === w.active.url
-      )) == null ? void 0 : O.identifier;
+      )) == null ? void 0 : P.identifier;
       V && I(V);
     }
   }, [w, n]), /* @__PURE__ */ v(S, { direction: "column", height: "100%", children: [
@@ -13836,7 +13853,7 @@ const MN = "_footerVoiceForm_lsc2c_2", UN = {
         selectedId: k,
         handleSelect: x,
         playingItem: N,
-        handleAvatarClick: P,
+        handleAvatarClick: O,
         handleDetailsClick: T,
         wavegroup: Q,
         setPlayingItem: I,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.18.10",
+  "version": "4.18.12",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/ProjectsList/ProjectItem/ProjectItem.jsx

@@ -53,7 +53,8 @@ const ProjectItem = ({
 
   const handleInsertAllTracks = useCallback((e) => {
     e.stopPropagation()
-    onInsertAllTracks?.(allTracks)
+    const tracksFiltered = allTracks.filter((track) => !track.loading && track.transfers?.length > 0)
+    onInsertAllTracks?.(tracksFiltered)
   }, [onInsertAllTracks, allTracks])
 
   return (
@@ -100,7 +101,7 @@ const ProjectItem = ({
 
       {openedItem === id && (
         <Flex direction="column">
-          {allTracks.length === 0 && !loading && (
+          {type !== 'voice' && allTracks.length === 0 && !loading && (
             <Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
               <NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
               <Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>{labels.noTracks || 'This file has no tracks'}</Text>

package/src/components/ProjectsList/ProjectTrackVoice/ProjectTrackVoice.jsx

@@ -31,7 +31,7 @@ const ProjectTrackVoice = ({ ...props }) => {
       return true
     }
 
-    if (pitchShiftSelected) {
+    if (pitchShiftSelected !== null) {
       const currentTransfer = transfers.find((transfer) => parseInt(transfer.pitchShift) === pitchShiftSelected)
       return currentTransfer?.loading === true || !currentTransfer?.audioUrl
     }
@@ -104,15 +104,23 @@ const ProjectTrackVoice = ({ ...props }) => {
           </Text>
         </Flex>
 
-        {loading && (
+        {(hasTransfers || audioUrl) && loading && (
           <Flex align="center" justify="center" pl="2">
             <Spinner />
           </Flex>
         )}
 
-        {!hasTransfers && !audioUrl && !loading ? (
-          <Flex align="center" justify="center" pr="2">
-            <Button variant="soft" color="gray" size="1">
+        {!hasTransfers && !audioUrl ? (
+          <Flex align="center" justify="center" pr="2" pr="0">
+            <Button
+              variant="soft"
+              color="gray"
+              size="1"
+              disabled={loading}
+              loading={loading}
+              onClick={handleClickTrack}
+              style={{ minWidth: '63px' }}
+            >
               {labels.process || 'Process'}
             </Button>
           </Flex>

package/src/components/ProjectsList/ProjectsList.stories.jsx

@@ -261,6 +261,13 @@ export const WithTrackVoiceStates = {
       "duration": 30.72,
       "type": "voice",
       "tracks": [
+        {
+          "id": "q8pzli0h38ptcxq09h2al-0",
+          "title": "Ana",
+          "type": "voice",
+          "cover": "https://picsum.photos/101/101",
+          "transfers": [],
+        },
         {
           "id": "q8pzli0h38ptcx211133q09h2al-0",
           "title": "Joyce",
@@ -268,11 +275,15 @@ export const WithTrackVoiceStates = {
           "loading": true,
         },
         {
-          "id": "q8pzli0h38ptcxq09h2al-0",
-          "title": "Ana",
+          "id": "q8pzli0h38ptcx211133q09h2al-0",
+          "title": "Carlos",
           "type": "voice",
-          "cover": "https://picsum.photos/101/101",
-          "transfers": [],
+          "loading": true,
+          "transfers": [{
+            "id": "q8pzli0h38ptcxq09h1122al",
+            "pitchShift": "12",
+            "audioUrl": null
+          }],
         },
         {
           "id": "q8pzli0h38ptcxq09h2al3-0",
@@ -288,6 +299,21 @@ export const WithTrackVoiceStates = {
             "pitchShift": "13",
             "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0a6c2a03-320e-49f2-9ea6-a5ad7bbb6141/vocals.m4a"
           }],
+        },
+        {
+          "id": "q8pzli0h38ptcxq09h2al3-0",
+          "title": "Claudia",
+          "type": "voice",
+          "cover": "https://picsum.photos/105/105",
+          "transfers": [{
+            "id": "q8pzli0h38ptcxq09h1122al",
+            "pitchShift": "1",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0b926e1f-52ce-4581-9f76-09545eed1c61/vocals.m4"
+          }, {
+            "id": "q8pzli0h38ptcxq03339h2al2",
+            "pitchShift": "2",
+            "audioUrl": null
+          }],
         }
       ]
     }],