@moises.ai/design-system 4.18.3 → 4.18.5

package/dist/index.js

@@ -2,7 +2,7 @@
 import { jsx as a, jsxs as v, Fragment as we } from "react/jsx-runtime";
 import { h as mo, f as vr, ag as oc, a as Ls, g as Pe, ah as ic, P as De, i as be, u as Jt, ai as lc, aj as fo, e as Co, F as vo, ak as cc, E as dc, al as uc, am as hc, an as Ac, ao as pc, D as gc, c as Ks, ap as mc, aq as fc, J as yr, ar as Cc, as as vc, at as Je, au as Vs, av as yc, aw as kc, ax as bc, ay as Ic, az as Sc, aA as Ec, aB as wc, aC as Nc, aD as Rc, aE as Bc, aF as xc, aG as Tc, aH as Dc, aI as Jc, R as Qc, aJ as yo, aK as ko, aL as vs, aM as ys, aN as Mc, aO as Uc, aP as Oc, aQ as Pc, aR as Fc, aS as zc, aT as Wc, aU as Hc, aV as Lc, aW as Kc, aX as Vc, aY as jc, aZ as Gc, a_ as qc, a$ as Yc, b0 as bo, b1 as Nr, b2 as Rr, b3 as Br, b4 as Xc, b5 as Zc, b6 as Io, b7 as So, b8 as Eo, H as wo, O as _c, Q as $c, b9 as ed, ba as td, bb as nd, bc as rd, bd as sd, be as ad, bf as js, bg as Gs, bh as No, bi as qs, bj as Ys, bk as Ro, bl as Bo, bm as xo, _ as To, bn as od, bo as id, bp as Do, bq as Jo, br as ks, bs, a1 as ld, b as cd, C as dd, bt as ud, bu as hd, bv as Ad, bw as pd } from "./index-O6YxrN1Z.js";
 import * as A from "react";
-import Te, { createContext as fn, useContext as gt, useCallback as J, useRef as _, useState as j, useLayoutEffect as Qo, memo as Ge, forwardRef as Cn, useEffect as le, useMemo as ae, Children as gd, useImperativeHandle as md, Fragment as fd } from "react";
+import Te, { createContext as fn, useContext as gt, useCallback as J, useRef as _, useState as j, useLayoutEffect as Qo, memo as Ge, forwardRef as Cn, useEffect as le, useMemo as oe, Children as gd, useImperativeHandle as md, Fragment as fd } from "react";
 import { bd as xr, e7 as Mo, aJ as Cd, kq as vd, gY as Tr, kr as yd, ck as kd, G as bd, y as Id, cr as Sd, aR as Xs, C as Dr, bX as Ed, e8 as vn, eR as Uo, ks as wd, kt as Nd, iu as Rd, gz as Oo, gU as Po, g3 as Bd, aV as xd, ir as Td, fz as Is, b as Ss, cO as Rt, c7 as Dd, d_ as Jd, jo as Qd, ib as Md, el as Ud, ek as Zs, iV as _s, kj as Fo, gE as zo, ef as An, Z as $s, cJ as ea, k8 as Od, k6 as Es, iF as Pd, fe as Wo, jU as Fd, iM as zd, iN as Wd, ku as Hd, hH as ta, fn as Oa, i0 as ns, fm as Pa, dM as Ld, hG as Kd, f0 as Vd, hs as jd, d6 as Gd, jw as qd, N as Yd, it as Xd, g_ as Ho, e6 as Lo, is as Ko, dZ as Zd, k9 as Fa, aQ as _d, aT as $d, fr as eu, A as tu } from "./ChordGrid4Icon-2Br7uolD.js";
 import { useSensors as nu, useSensor as ru, PointerSensor as su, pointerWithin as au, useDndMonitor as ou, useDroppable as Vo, DndContext as iu, DragOverlay as lu } from "@dnd-kit/core";
 import { snapCenterToCursor as cu } from "@dnd-kit/modifiers";
@@ -218,9 +218,9 @@ var nt = 10, [ti, Ut] = yn($t), Iu = "SelectContentImpl", Su = mc("SelectContent
     }, [I]), hc();
     const V = A.useCallback(
       (M) => {
-        const [L, ...ie] = D().map((ee) => ee.ref.current), [ce] = ie.slice(-1), oe = document.activeElement;
+        const [L, ...ie] = D().map((ee) => ee.ref.current), [ce] = ie.slice(-1), ae = document.activeElement;
         for (const ee of M)
-          if (ee === oe || (ee == null || ee.scrollIntoView({ block: "nearest" }), ee === L && E && (E.scrollTop = 0), ee === ce && E && (E.scrollTop = E.scrollHeight), ee == null || ee.focus(), document.activeElement !== oe)) return;
+          if (ee === ae || (ee == null || ee.scrollIntoView({ block: "nearest" }), ee === L && E && (E.scrollTop = 0), ee === ce && E && (E.scrollTop = E.scrollHeight), ee == null || ee.focus(), document.activeElement !== ae)) return;
       },
       [D, E]
     ), $ = A.useCallback(
@@ -235,9 +235,9 @@ var nt = 10, [ti, Ut] = yn($t), Iu = "SelectContentImpl", Su = mc("SelectContent
       if (I) {
         let M = { x: 0, y: 0 };
         const L = (ce) => {
-          var oe, ee;
+          var ae, ee;
           M = {
-            x: Math.abs(Math.round(ce.pageX) - (((oe = W.current) == null ? void 0 : oe.x) ?? 0)),
+            x: Math.abs(Math.round(ce.pageX) - (((ae = W.current) == null ? void 0 : ae.x) ?? 0)),
             y: Math.abs(Math.round(ce.pageY) - (((ee = W.current) == null ? void 0 : ee.y) ?? 0))
           };
         }, ie = (ce) => {
@@ -254,7 +254,7 @@ var nt = 10, [ti, Ut] = yn($t), Iu = "SelectContentImpl", Su = mc("SelectContent
       };
     }, [G]);
     const [q, he] = Ci((M) => {
-      const L = D().filter((oe) => !oe.disabled), ie = L.find((oe) => oe.ref.current === document.activeElement), ce = vi(L, M, ie);
+      const L = D().filter((ae) => !ae.disabled), ie = L.find((ae) => ae.ref.current === document.activeElement), ce = vi(L, M, ie);
       ce && setTimeout(() => ce.ref.current.focus());
     }), de = A.useCallback(
       (M, L, ie) => {
@@ -340,9 +340,9 @@ var nt = 10, [ti, Ut] = yn($t), Iu = "SelectContentImpl", Su = mc("SelectContent
                     onKeyDown: be(y.onKeyDown, (M) => {
                       const L = M.ctrlKey || M.altKey || M.metaKey;
                       if (M.key === "Tab" && M.preventDefault(), !L && M.key.length === 1 && he(M.key), ["ArrowUp", "ArrowDown", "Home", "End"].includes(M.key)) {
-                        let ce = D().filter((oe) => !oe.disabled).map((oe) => oe.ref.current);
+                        let ce = D().filter((ae) => !ae.disabled).map((ae) => ae.ref.current);
                         if (["ArrowUp", "End"].includes(M.key) && (ce = ce.slice().reverse()), ["ArrowUp", "ArrowDown"].includes(M.key)) {
-                          const oe = M.target, ee = ce.indexOf(oe);
+                          const ae = M.target, ee = ce.indexOf(ae);
                           ce = ce.slice(ee + 1);
                         }
                         setTimeout(() => V(ce)), M.preventDefault();
@@ -364,7 +364,7 @@ var Eu = "SelectItemAlignedPosition", ri = A.forwardRef((n, t) => {
     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();
       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 ae = T.left - x.left, ee = P.left - ae, 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,7 +375,7 @@ 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 ae = x.right - T.right, ee = window.innerWidth - P.right - ae, 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)
         ]);
@@ -383,21 +383,21 @@ var Eu = "SelectItemAlignedPosition", ri = A.forwardRef((n, t) => {
       }
       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;
       if (L <= K) {
-        const oe = Q.length > 0 && k === Q[Q.length - 1].ref.current;
+        const ae = Q.length > 0 && k === Q[Q.length - 1].ref.current;
         c.style.bottom = "0px";
         const ee = u.clientHeight - f.offsetTop - f.offsetHeight, Ie = Math.max(
           X,
           F + // viewport might have padding bottom, include it to avoid a scrollable viewport
-          (oe ? ge : 0) + ee + $
+          (ae ? ge : 0) + ee + $
         ), Se = L + Ie;
         c.style.height = Se + "px";
       } else {
-        const oe = Q.length > 0 && k === Q[0].ref.current;
+        const ae = Q.length > 0 && k === Q[0].ref.current;
         c.style.top = "0px";
         const Ie = Math.max(
           K,
           O + f.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
-          (oe ? de : 0) + F
+          (ae ? de : 0) + F
         ) + ie;
         c.style.height = Ie + "px", f.scrollTop = L - K + f.offsetTop;
       }
@@ -3081,7 +3081,7 @@ const Xf = "_DataTable_kyf7f_1", Zf = "_titleText_kyf7f_23", _f = "_artistText_k
     ru(su, {
       activationConstraint: { distance: 6 }
     })
-  ), f = ae(
+  ), f = oe(
     () => new Map(n.map((B) => [B.id, B])),
     [n]
   ), k = J(() => {
@@ -3146,7 +3146,7 @@ const Xf = "_DataTable_kyf7f_1", Zf = "_titleText_kyf7f_23", _f = "_artistText_k
       f,
       t
     ]
-  ), E = ae(
+  ), E = oe(
     () => ({
       sensors: m,
       collisionDetection: au,
@@ -3156,7 +3156,7 @@ const Xf = "_DataTable_kyf7f_1", Zf = "_titleText_kyf7f_23", _f = "_artistText_k
       onDragEnd: N
     }),
     [I, N, R, y, m]
-  ), w = ae(
+  ), w = oe(
     () => ({
       onDragStart: y,
       onDragOver: R,
@@ -3578,16 +3578,16 @@ 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 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 = oe(() => {
     if (t != null && t.length)
       return !T || T === Q ? D : T;
-  }, [t, T, Q, D]), U = ae(
+  }, [t, T, Q, D]), U = oe(
     () => r.map((fe, Ce) => OC(fe, Ce)),
     [r]
-  ), O = ae(
+  ), O = oe(
     () => new Set((s ?? []).map((fe) => String(fe))),
     [s]
-  ), V = ae(
+  ), V = oe(
     () => U.filter((fe) => fe.id && O.has(fe.id)),
     [U, O]
   ), $ = J(
@@ -3596,7 +3596,7 @@ const YC = Te.memo(function({
       return Ee != null && O.has(Ee);
     },
     [O]
-  ), G = s.length, W = (r == null ? void 0 : r.length) ?? 0, q = G > 0, he = W > 0 && G === W, de = ae(
+  ), G = s.length, W = (r == null ? void 0 : r.length) ?? 0, q = G > 0, he = W > 0 && G === W, de = oe(
     () => r == null ? void 0 : r.some((fe) => {
       var Ce;
       return (Ce = fe.dropdownOptions) == null ? void 0 : Ce.length;
@@ -3630,7 +3630,7 @@ const YC = Te.memo(function({
     overDragRowId: L,
     activeDragContext: ie,
     sortableItems: ce,
-    monitorHandlers: oe
+    monitorHandlers: ae
   } = KC({
     rows: U,
     selectedSet: O,
@@ -3640,8 +3640,8 @@ const YC = Te.memo(function({
     onRowDragStart: k,
     onRowDragEnd: R,
     dndScopeId: B
-  }), ee = _(oe);
-  ee.current = oe;
+  }), ee = _(ae);
+  ee.current = ae;
   const { style: Ie, ...Se } = x, Ve = typeof h == "number" ? `${h}px` : h, me = typeof g == "number" ? `${g}px` : g, ze = /* @__PURE__ */ v(
     Ba,
     {
@@ -4355,7 +4355,7 @@ function zv(n, t) {
 function Wv({ initialScreen: n, animated: t, children: r }) {
   const [s, o] = j([{ name: n, params: {} }]), [i, l] = j({}), [c, d] = j(0), u = _(s), p = _(null);
   u.current = s;
-  const h = ae(() => {
+  const h = oe(() => {
     const Q = {};
     return gd.forEach(r, (D) => {
       (D == null ? void 0 : D.type) === Jl && (Q[D.props.name] = D.props);
@@ -4378,12 +4378,12 @@ function Wv({ initialScreen: n, animated: t, children: r }) {
   ), k = J(
     (Q) => g(() => [{ name: Q || n, params: {} }]),
     [g, n]
-  ), y = s.length > 1, R = ae(
+  ), y = s.length > 1, R = oe(
     () => ({ push: C, pop: m, popTo: f, reset: k, canGoBack: y, stack: s }),
     [C, m, f, k, y, s]
   ), I = s[s.length - 1], N = h[I.name];
   if (!N) return null;
-  const E = ae(
+  const E = oe(
     () => s.map((Q, D) => {
       var z;
       return (z = h[Q.name]) != null && z.keepMounted ? { entry: Q, stackIndex: D } : null;
@@ -4394,7 +4394,7 @@ function Wv({ initialScreen: n, animated: t, children: r }) {
       u.current[u.current.length - 1].name === I.name && l((z) => ({ ...z, ...Q }));
     },
     [I.name]
-  ), T = ae(
+  ), T = oe(
     () => ({ name: I.name, params: I.params || {}, setOptions: P }),
     [I.name, I.params, P]
   );
@@ -4877,10 +4877,10 @@ const aR = $r, g1 = "_sliderRoot_19e7a_23", m1 = "_sliderTrack_19e7a_31", f1 = "
     if (N < 1e-3) return -1 / 0;
     const E = 20 * Math.log10(N);
     return E < -60 ? -60 : E;
-  }, []), d = J((N) => N === -1 / 0 || N <= -60 ? 0 : Math.pow(10, N / 20), []), u = ae(() => {
+  }, []), d = J((N) => N === -1 / 0 || N <= -60 ? 0 : Math.pow(10, N / 20), []), u = oe(() => {
     const N = c(t);
     return N === -1 / 0 ? -60 : Math.max(-60, Math.min(6, N));
-  }, [t, c]), p = ae(() => t < 1e-3, [t]), h = J(() => {
+  }, [t, c]), p = oe(() => t < 1e-3, [t]), h = J(() => {
     clearTimeout(i.current), o(!0);
   }, []), g = J(() => {
     i.current = setTimeout(() => {
@@ -4905,7 +4905,7 @@ const aR = $r, g1 = "_sliderRoot_19e7a_23", m1 = "_sliderTrack_19e7a_31", f1 = "
   }, [n, h]), R = J(() => {
     const N = Date.now();
     N - l.current < 300 && y(), l.current = N;
-  }, [y]), I = ae(
+  }, [y]), I = oe(
     () => /* @__PURE__ */ v(we, { children: [
       p ? "-∞ dB" : `${u.toFixed(1)} dB`,
       /* @__PURE__ */ a(Ys, { className: Vt.tooltipArrow })
@@ -5288,14 +5288,14 @@ const Z1 = Cn(function({
   className: d,
   ...u
 }, p) {
-  const h = o ?? i, g = ae(() => {
+  const h = o ?? i, g = oe(() => {
     if (typeof c == "number") return c;
     if (c && typeof c == "object") {
       const m = c.initial, f = typeof m == "string" ? parseInt(m, 10) : m;
       return Number.isFinite(f) ? f : 2;
     }
     return 2;
-  }, [c]), C = ae(
+  }, [c]), C = oe(
     () => ({ gridTemplateColumns: `repeat(${g}, minmax(0, 1fr))` }),
     [g]
   );
@@ -5558,14 +5558,14 @@ const Ar = 19.5, pr = 19.5, $a = 14, eo = 18, ly = [
     tooltipCloseDelay: d
   });
   k.current = { tooltipDelayDuration: c, tooltipCloseDelay: d };
-  const y = Array.isArray(i) && i.length > 0, R = ae(() => (i == null ? void 0 : i.find((W) => W.default)) || (i == null ? void 0 : i[0]) || { position: 0, color: "neutral", default: !0 }, [i]), { containerRef: I, isDragging: N, handleClick: E, handleDotClick: w } = hy({
+  const y = Array.isArray(i) && i.length > 0, R = oe(() => (i == null ? void 0 : i.find((W) => W.default)) || (i == null ? void 0 : i[0]) || { position: 0, color: "neutral", default: !0 }, [i]), { containerRef: I, isDragging: N, handleClick: E, handleDotClick: w } = hy({
     value: t,
     onChange: r,
     disabled: s,
     dots: i || [],
     defaultDot: R,
     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 = oe(() => typeof t == "object" && t !== null ? t.position : dy(t, i), [t, i]), x = oe(() => typeof t == "object" && t !== null ? t : (i == null ? void 0 : i.find((W) => W.position === B)) ?? null, [t, i, B]), { pointerRotation: P, pointerColor: T } = oe(() => uy(B, s), [B, s]);
   if (le(() => () => {
     m.current != null && clearTimeout(m.current), f.current != null && clearTimeout(f.current);
   }, []), !y)
@@ -5866,7 +5866,7 @@ const Wl = ({
   className: i,
   ...l
 }) => {
-  const c = ae(() => Object.keys(Ws), []), d = ae(() => Object.keys(zs), []), { color: u, graphic: p } = ae(() => {
+  const c = oe(() => Object.keys(Ws), []), d = oe(() => Object.keys(zs), []), { color: u, graphic: p } = oe(() => {
     let m = n, f = t;
     if (o) {
       const k = qy(o);
@@ -5881,7 +5881,7 @@ const Wl = ({
       f = d[k];
     }
     return { color: m, graphic: f };
-  }, [n, t, o, c, d]), h = Ws[u], g = zs[p], C = ae(
+  }, [n, t, o, c, d]), h = Ws[u], g = zs[p], C = oe(
     () => ({
       background: h.gradient,
       opacity: h.opacity
@@ -6574,17 +6574,17 @@ const Vk = "_content_15iux_1", jk = "_pan_15iux_13", Gk = "_disabled_15iux_26",
       }
     },
     [s, t, B]
-  ), { arcPath: U, pointerRotation: O, 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;
+  ), { arcPath: U, pointerRotation: O, arcColor: V, pointerColor: $ } = oe(() => {
+    const M = ds(t, o, i), L = cs(M), ie = ls + L * Math.PI, ce = xn + jt * Math.cos(ls), ae = 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)}
+      arcPath: `M ${ce.toFixed(3)} ${ae.toFixed(3)}
                 A ${jt} ${jt} 0 ${Se} ${Ve}
                 ${ee.toFixed(3)} ${Ie.toFixed(3)}`,
       pointerRotation: L * 180,
       arcColor: s ? "#5A6169" : "#19E4F1",
       pointerColor: s ? "#43484E" : "#B0B4BA"
     };
-  }, [t, s, o, i]), G = ae(() => {
+  }, [t, s, o, i]), G = oe(() => {
     const M = ds(t, o, i), L = Math.round(M * 100);
     return `Pan: ${Math.abs(L) < 1 ? 0 : L}`;
   }, [t, o, i]), W = cs(ds(t, o, i)), q = Math.round(W * 100), he = () => {
@@ -8047,7 +8047,7 @@ function v0(n, t) {
   return r;
 }
 function y0(n, t) {
-  const [r, s] = j(null), o = ae(() => v0(t, ["plugins"]), [t]), i = ae(() => Object.entries(o).flat(), [o]);
+  const [r, s] = j(null), o = oe(() => v0(t, ["plugins"]), [t]), i = oe(() => Object.entries(o).flat(), [o]);
   return le(() => {
     if (!(n != null && n.current)) return;
     const l = jn.create(Object.assign(Object.assign({}, o), { plugins: t.plugins, container: n.current }));
@@ -8058,7 +8058,7 @@ function y0(n, t) {
 }
 const Gl = /^on([A-Z])/, k0 = (n) => Gl.test(n);
 function b0(n, t) {
-  const r = ae(() => Object.entries(t).flat(), [t]);
+  const r = oe(() => Object.entries(t).flat(), [t]);
   le(() => {
     if (!n) return;
     const s = Object.entries(t);
@@ -8074,7 +8074,7 @@ function b0(n, t) {
 }
 const ql = Ge((n) => {
   const t = _(null), [r, s] = function(o) {
-    return ae(() => {
+    return oe(() => {
       const i = Object.assign({}, o), l = Object.assign({}, o);
       for (const c in i) k0(c) ? delete i[c] : delete l[c];
       return [i, l];
@@ -8128,11 +8128,11 @@ const ql = Ge((n) => {
           previousWasPlaying: !1,
           wasPlaying: !!((Se = o == null ? void 0 : o.state) != null && Se.isPlaying)
         };
-      const ce = (Ve = L.getCurrentTime) == null ? void 0 : Ve.call(L), oe = !!((me = L == null ? void 0 : L.isPlaying) != null && me.call(L)), ee = oe || !!((ze = o == null ? void 0 : o.state) != null && ze.isPlaying);
+      const ce = (Ve = L.getCurrentTime) == null ? void 0 : Ve.call(L), ae = !!((me = L == null ? void 0 : L.isPlaying) != null && me.call(L)), ee = ae || !!((ze = o == null ? void 0 : o.state) != null && ze.isPlaying);
       return L !== M && (L.pause(), D(L)), typeof X == "number" ? K.setTime(X) : F && typeof ce == "number" && K.setTime(ce), {
         isHandoff: !0,
         previousActive: L,
-        previousWasPlaying: oe,
+        previousWasPlaying: ae,
         wasPlaying: ee
       };
     },
@@ -8207,7 +8207,7 @@ const ql = Ge((n) => {
     [D, o]
   ), q = J(
     (K, X) => {
-      var ce, oe;
+      var ce, ae;
       if (T || i == null || i(), !o) return;
       const F = o.state.active;
       if (!(F && F !== K)) {
@@ -8221,7 +8221,7 @@ const ql = Ge((n) => {
       const L = typeof X == "number" ? X : ((ce = K.getCurrentTime) == null ? void 0 : ce.call(K)) ?? 0, ie = z(K, {
         seekTime: L
       });
-      x.current = L, B.current = !0, ie.previousWasPlaying || (oe = F.emit) == null || oe.call(F, "pause"), N || K.setOptions({ progressColor: p }), ie.wasPlaying && K.play(), o.setter((ee) => ({
+      x.current = L, B.current = !0, ie.previousWasPlaying || (ae = F.emit) == null || ae.call(F, "pause"), N || K.setOptions({ progressColor: p }), ie.wasPlaying && K.play(), o.setter((ee) => ({
         ...ee,
         active: K,
         lastPlayed: K,
@@ -8522,7 +8522,7 @@ const nb = ({
     onProjectClick: C,
     openedItem: m,
     setOpenedItem: f
-  } = gt(ts), [k, y] = j(!1), R = ae(() => k ? i : i.slice(0, 6), [i, k]), I = J(() => {
+  } = gt(ts), [k, y] = j(!1), R = oe(() => k ? i : i.slice(0, 6), [i, k]), I = J(() => {
     if (c) return;
     y(!1);
     const w = h.find((B) => B.id === n);
@@ -8768,18 +8768,23 @@ const nb = ({
   ...n
 }) => {
   var N;
-  const { onClickTrack: t } = gt(ts), { projectId: r, id: s, title: o, cover: i, transfers: l, audioUrl: c, onChangeTransfer: d, loading: u } = n, p = ae(() => l && l.length > 0, [l]), [h, g] = j(p ? parseInt(((N = l == null ? void 0 : l[0]) == null ? void 0 : N.pitchShift) ?? 0) : 0), C = ae(() => p ? Math.min(...l == null ? void 0 : l.map((E) => parseInt(E.pitchShift))) : 0, [l]), m = ae(() => p ? Math.max(...l == null ? void 0 : l.map((E) => parseInt(E.pitchShift))) : 0, [l]), [f, k] = j(u);
+  const { onClickTrack: t } = gt(ts), { projectId: r, id: s, title: o, cover: i, transfers: l, audioUrl: c, onChangeTransfer: d, loading: u } = n, p = oe(() => l && l.length > 0, [l]), h = 24, g = -24, [C, m] = j(p ? parseInt(((N = l == null ? void 0 : l[0]) == null ? void 0 : N.pitchShift) ?? 0) : 0), [f, k] = j(u);
   le(() => {
-    k(u);
-  }, [u]);
+    var E;
+    k(u), !f && p && m(parseInt(((E = l == null ? void 0 : l[0]) == null ? void 0 : E.pitchShift) ?? 0));
+  }, [u, p, l]);
   const y = J((E) => {
     var w;
     return p ? (w = l == null ? void 0 : l.find((B) => parseInt(B.pitchShift) === E)) == null ? void 0 : w.audioUrl : c;
   }, [p, l, c]), R = J((E) => {
-    g(E), d == null || d(r, {
+    m(E);
+    const w = y(E);
+    d == null || d(r, {
       id: s,
       title: o,
-      audioUrl: y(E)
+      audioUrl: w,
+      processTrack: !w,
+      pitchShift: E
     });
   }, [d, r, s, o, l]), I = J((E) => {
     if (E.stopPropagation(), f)
@@ -8789,10 +8794,10 @@ const nb = ({
       ...n,
       id: s,
       title: o,
-      audioUrl: p || c ? y(h) : null,
+      audioUrl: p || c ? y(C) : null,
       processTrack: w
     });
-  }, [t, n, s, o, y, h, p, f, c]);
+  }, [t, n, s, o, y, C, p, f, c]);
   return /* @__PURE__ */ a(S, { direction: "column", gap: "1", children: /* @__PURE__ */ v(
     S,
     {
@@ -8819,9 +8824,9 @@ const nb = ({
         !p && !c && !f ? /* @__PURE__ */ a(S, { align: "center", justify: "center", p: "2", children: /* @__PURE__ */ a(Oe, { variant: "soft", color: "gray", size: "1", children: "Process" }) }) : f ? /* @__PURE__ */ a(S, { align: "center", justify: "center", p: "2", children: /* @__PURE__ */ a(Sn, {}) }) : /* @__PURE__ */ a(
           Cb,
           {
-            min: C,
-            max: m,
-            value: h,
+            min: g,
+            max: h,
+            value: C,
             onChange: R
           }
         )
@@ -9838,7 +9843,7 @@ const Zl = ({
     }, L);
   }, ce = () => {
     p && (U.current && (clearTimeout(U.current), U.current = null), x ? P(!1) : w || ie());
-  }, oe = () => {
+  }, ae = () => {
     p && w && (O.current && (clearTimeout(O.current), O.current = null), Q(!1), P(!0), U.current = setTimeout(() => {
       U.current = null, B(!1), P(!1);
     }, L));
@@ -9937,7 +9942,7 @@ const Zl = ({
           ref: V,
           className: b(se.hoverRegion, se.scrollShadow),
           onMouseEnter: ce,
-          onMouseLeave: oe,
+          onMouseLeave: ae,
           onFocusCapture: Ie,
           onBlurCapture: Se,
           children: /* @__PURE__ */ v(
@@ -10509,12 +10514,12 @@ const sE = "_sectionTitle_bwlze_1", aE = "_separator_bwlze_17", co = {
   }, []), le(() => {
     const F = k.current;
     if (!F) return;
-    const M = 24, L = 150, ie = 50, ce = (oe) => {
+    const M = 24, L = 150, ie = 50, ce = (ae) => {
       var fe, Ce;
       const ee = T.current;
       if (ee.disabled) return;
-      oe.preventDefault();
-      const { deltaX: Ie, deltaY: Se, deltaMode: Ve } = oe, me = D.current, ze = (Ee) => Math.min(ee.max, Math.max(ee.min, Ee));
+      ae.preventDefault();
+      const { deltaX: Ie, deltaY: Se, deltaMode: Ve } = ae, me = D.current, ze = (Ee) => Math.min(ee.max, Math.max(ee.min, Ee));
       if (Ve !== 0 || Math.max(Math.abs(Ie), Math.abs(Se)) >= ie) {
         me.accum = 0, me.axis = null;
         const Ee = Math.abs(Ie) > Math.abs(Se) ? Ie : -Se;
@@ -10523,7 +10528,7 @@ const sE = "_sectionTitle_bwlze_1", aE = "_separator_bwlze_17", co = {
         $e !== ee.value && ((fe = ee.onValueChange) == null || fe.call(ee, $e));
         return;
       }
-      if (oe.timeStamp - me.lastTime > L && (me.accum = 0, me.axis = null), me.lastTime = oe.timeStamp, me.axis === null) {
+      if (ae.timeStamp - me.lastTime > L && (me.accum = 0, me.axis = null), me.lastTime = ae.timeStamp, me.axis === null) {
         if (Ie === 0 && Se === 0) return;
         me.axis = Math.abs(Ie) > Math.abs(Se) ? "x" : "y";
       }
@@ -11058,7 +11063,7 @@ const dr = (n) => {
   handlePresetChange: t,
   presets: r
 }) => {
-  const s = ae(() => r.filter(
+  const s = oe(() => r.filter(
     (o) => o.instrument === n.instrument
   ), [r, n.instrument]);
   return /* @__PURE__ */ a(
@@ -11470,12 +11475,12 @@ const fr = {
   onFetchSuggestedTags: x,
   suggestedTagsLoading: P
 }) => {
-  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, O] = j(D), { submitted: V, handleSubmit: $ } = Ma(d), G = oe(() => [
     { value: "2", label: l._("Presets") },
     { value: "1", label: l._("Custom") }
   ], []), W = (r ?? []).some(
     (X) => X.instrument === n.instrument
-  ), q = ae(() => {
+  ), q = oe(() => {
     const X = D === "2" && W, F = D === "1" || !W;
     return u || k === 0 || X && !n.presetId || F && !n.conditioningText && !n.conditioningAudio;
   }, [
@@ -11486,7 +11491,7 @@ const fr = {
     n.presetId,
     n.conditioningText,
     n.conditioningAudio
-  ]), he = ae(
+  ]), he = oe(
     () => RE(l),
     [l]
   ), de = J(
@@ -12633,7 +12638,7 @@ const ms = (n, t) => typeof n == "string" ? { title: n, description: "", variant
   ), g = J(
     (m) => p(ms(m, "error")),
     [p]
-  ), C = ae(
+  ), C = oe(
     () => ({
       show: p,
       success: h,
@@ -13275,7 +13280,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 = oe(() => s, [s]), x = oe(() => o ? !1 : !B || B && f, [B, f, o]), P = _(null), T = _(null);
   le(() => {
     I || (!p || i) && N(!0);
   }, [p, i, I]);
@@ -13783,16 +13788,16 @@ const MN = "_footerVoiceForm_lsc2c_2", UN = {
       })), s(O);
     },
     [s, w]
-  ), Q = ae(
+  ), Q = oe(
     () => ({
       state: w,
       setter: B
     }),
     [w]
-  ), D = ae(
+  ), D = oe(
     () => n.find((O) => O.identifier === i) || n[0],
     [n, i]
-  ), z = ae(
+  ), z = oe(
     () => !!(t.trackName || t.trackId || t.customAudio),
     [t.trackName, t.trackId, t.customAudio]
   ), U = J(() => {

package/package.json

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

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

@@ -15,15 +15,19 @@ const ProjectTrackVoice = ({
 
   const hasTransfers = useMemo(() => transfers && transfers.length > 0, [transfers])
 
+  const max = 24
+  const min = -24
   const [pitchShiftSelected, setpitchShiftSelected] = useState(hasTransfers ? parseInt(transfers?.[0]?.pitchShift ?? 0) : 0)
-  const min = useMemo(() => hasTransfers ? Math.min(...transfers?.map((transfer) => parseInt(transfer.pitchShift))) : 0, [transfers])
-  const max = useMemo(() => hasTransfers ? Math.max(...transfers?.map((transfer) => parseInt(transfer.pitchShift))) : 0, [transfers])
 
   const [loading, setLoading] = useState(_loading)
 
   useEffect(() => {
     setLoading(_loading)
-  }, [_loading])
+
+    if (!loading && hasTransfers) {
+      setpitchShiftSelected(parseInt(transfers?.[0]?.pitchShift ?? 0))
+    }
+  }, [_loading, hasTransfers, transfers])
 
   const getAudioUrl = useCallback((pitchShift) => {
     return hasTransfers ? transfers?.find((transfer) => parseInt(transfer.pitchShift) === pitchShift)?.audioUrl : audioUrl
@@ -31,10 +35,13 @@ const ProjectTrackVoice = ({
 
   const handleChangeTransfer = useCallback((value) => {
     setpitchShiftSelected(value)
+    const newAudioUrl = getAudioUrl(value)
     onChangeTransfer?.(projectId, {
       id,
       title,
-      audioUrl: getAudioUrl(value),
+      audioUrl: newAudioUrl,
+      processTrack: !newAudioUrl,
+      pitchShift: value,
     })
   }, [onChangeTransfer, projectId, id, title, transfers])