@moises.ai/design-system 3.9.0 → 3.9.1

package/dist/index.js

@@ -27,7 +27,7 @@ var _c = [" ", "Enter", "ArrowUp", "ArrowDown"], $c = [" ", "Enter"], Dt = "Sele
     disabled: p,
     required: y,
     form: f
-  } = n, m = sr(e), [k, E] = d.useState(null), [b, I] = d.useState(null), [S, w] = d.useState(!1), B = ua(u), [x, O] = Hn({
+  } = n, m = sr(e), [k, E] = d.useState(null), [I, b] = d.useState(null), [S, w] = d.useState(!1), B = ua(u), [x, O] = Hn({
     prop: r,
     defaultProp: a ?? !1,
     onChange: o,
@@ -45,8 +45,8 @@ var _c = [" ", "Enter", "ArrowUp", "ArrowDown"], $c = [" ", "Enter"], Dt = "Sele
       scope: e,
       trigger: k,
       onTriggerChange: E,
-      valueNode: b,
-      onValueNodeChange: I,
+      valueNode: I,
+      onValueNodeChange: b,
       valueNodeHasChildren: S,
       onValueNodeHasChildrenChange: w,
       contentId: _r(),
@@ -101,8 +101,8 @@ Oa.displayName = Dt;
 var Fa = "SelectTrigger", Ha = d.forwardRef(
   (n, e) => {
     const { __scopeSelect: t, disabled: r = !1, ...a } = n, o = sr(t), i = ht(Fa, t), l = i.disabled || r, c = be(e, i.onTriggerChange), u = rr(t), h = d.useRef("touch"), [A, p, y] = uo((m) => {
-      const k = u().filter((I) => !I.disabled), E = k.find((I) => I.value === i.value), b = Ao(k, m, E);
-      b !== void 0 && i.onValueChange(b.value);
+      const k = u().filter((b) => !b.disabled), E = k.find((b) => b.value === i.value), I = Ao(k, m, E);
+      I !== void 0 && i.onValueChange(I.value);
     }), f = (m) => {
       l || (i.onOpenChange(!0), y()), m && (i.triggerPointerDownPosRef.current = {
         x: Math.round(m.pageX),
@@ -206,12 +206,12 @@ var Oe = 10, [Ka, pt] = Yt(Jt), od = "SelectContentImpl", id = ml("SelectContent
       avoidCollisions: k,
       //
       ...E
-    } = n, b = ht(Jt, t), [I, S] = d.useState(null), [w, B] = d.useState(null), x = be(e, (q) => S(q)), [O, N] = d.useState(null), [T, P] = d.useState(
+    } = n, I = ht(Jt, t), [b, S] = d.useState(null), [w, B] = d.useState(null), x = be(e, (q) => S(q)), [O, N] = d.useState(null), [T, P] = d.useState(
       null
     ), M = rr(t), [z, D] = d.useState(!1), Q = d.useRef(!1);
     d.useEffect(() => {
-      if (I) return dl(I);
-    }, [I]), ul();
+      if (b) return dl(b);
+    }, [b]), ul();
     const j = d.useCallback(
       (q) => {
         const [le, ...Be] = M().map((te) => te.ref.current), [ae] = Be.slice(-1), ee = document.activeElement;
@@ -220,15 +220,15 @@ var Oe = 10, [Ka, pt] = Yt(Jt), od = "SelectContentImpl", id = ml("SelectContent
       },
       [M, w]
     ), U = d.useCallback(
-      () => j([O, I]),
-      [j, O, I]
+      () => j([O, b]),
+      [j, O, b]
     );
     d.useEffect(() => {
       z && U();
     }, [z, U]);
-    const { onOpenChange: G, triggerPointerDownPosRef: F } = b;
+    const { onOpenChange: G, triggerPointerDownPosRef: F } = I;
     d.useEffect(() => {
-      if (I) {
+      if (b) {
         let q = { x: 0, y: 0 };
         const le = (ae) => {
           var ee, te;
@@ -237,13 +237,13 @@ var Oe = 10, [Ka, pt] = Yt(Jt), od = "SelectContentImpl", id = ml("SelectContent
             y: Math.abs(Math.round(ae.pageY) - (((te = F.current) == null ? void 0 : te.y) ?? 0))
           };
         }, Be = (ae) => {
-          q.x <= 10 && q.y <= 10 ? ae.preventDefault() : I.contains(ae.target) || G(!1), document.removeEventListener("pointermove", le), F.current = null;
+          q.x <= 10 && q.y <= 10 ? ae.preventDefault() : b.contains(ae.target) || G(!1), document.removeEventListener("pointermove", le), F.current = null;
         };
         return F.current !== null && (document.addEventListener("pointermove", le), document.addEventListener("pointerup", Be, { capture: !0, once: !0 })), () => {
           document.removeEventListener("pointermove", le), document.removeEventListener("pointerup", Be, { capture: !0 });
         };
       }
-    }, [I, G, F]), d.useEffect(() => {
+    }, [b, G, F]), d.useEffect(() => {
       const q = () => G(!1);
       return window.addEventListener("blur", q), window.addEventListener("resize", q), () => {
         window.removeEventListener("blur", q), window.removeEventListener("resize", q);
@@ -255,15 +255,15 @@ var Oe = 10, [Ka, pt] = Yt(Jt), od = "SelectContentImpl", id = ml("SelectContent
     }), Ke = d.useCallback(
       (q, le, Be) => {
         const ae = !Q.current && !Be;
-        (b.value !== void 0 && b.value === le || ae) && (N(q), ae && (Q.current = !0));
+        (I.value !== void 0 && I.value === le || ae) && (N(q), ae && (Q.current = !0));
       },
-      [b.value]
-    ), ft = d.useCallback(() => I == null ? void 0 : I.focus(), [I]), Fe = d.useCallback(
+      [I.value]
+    ), ft = d.useCallback(() => b == null ? void 0 : b.focus(), [b]), Fe = d.useCallback(
       (q, le, Be) => {
         const ae = !Q.current && !Be;
-        (b.value !== void 0 && b.value === le || ae) && P(q);
+        (I.value !== void 0 && I.value === le || ae) && P(q);
       },
-      [b.value]
+      [I.value]
     ), Ae = r === "popper" ? zr : Xa, Ee = Ae === zr ? {
       side: l,
       sideOffset: c,
@@ -280,7 +280,7 @@ var Oe = 10, [Ka, pt] = Yt(Jt), od = "SelectContentImpl", id = ml("SelectContent
       Ka,
       {
         scope: t,
-        content: I,
+        content: b,
         viewport: w,
         onViewportChange: B,
         itemRefCallback: Ke,
@@ -296,13 +296,13 @@ var Oe = 10, [Ka, pt] = Yt(Jt), od = "SelectContentImpl", id = ml("SelectContent
           hl,
           {
             asChild: !0,
-            trapped: b.open,
+            trapped: I.open,
             onMountAutoFocus: (q) => {
               q.preventDefault();
             },
             onUnmountAutoFocus: de(a, (q) => {
               var le;
-              (le = b.trigger) == null || le.focus({ preventScroll: !0 }), q.preventDefault();
+              (le = I.trigger) == null || le.focus({ preventScroll: !0 }), q.preventDefault();
             }),
             children: /* @__PURE__ */ s(
               pl,
@@ -312,14 +312,14 @@ var Oe = 10, [Ka, pt] = Yt(Jt), od = "SelectContentImpl", id = ml("SelectContent
                 onEscapeKeyDown: o,
                 onPointerDownOutside: i,
                 onFocusOutside: (q) => q.preventDefault(),
-                onDismiss: () => b.onOpenChange(!1),
+                onDismiss: () => I.onOpenChange(!1),
                 children: /* @__PURE__ */ s(
                   Ae,
                   {
                     role: "listbox",
-                    id: b.contentId,
-                    "data-state": b.open ? "open" : "closed",
-                    dir: b.dir,
+                    id: I.contentId,
+                    "data-state": I.open ? "open" : "closed",
+                    dir: I.dir,
                     onContextMenu: (q) => q.preventDefault(),
                     ...E,
                     ...Ee,
@@ -356,7 +356,7 @@ var Oe = 10, [Ka, pt] = Yt(Jt), od = "SelectContentImpl", id = ml("SelectContent
 );
 Ga.displayName = od;
 var ld = "SelectItemAlignedPosition", Xa = d.forwardRef((n, e) => {
-  const { __scopeSelect: t, onPlaced: r, ...a } = n, o = ht(Jt, t), i = pt(Jt, t), [l, c] = d.useState(null), [u, h] = d.useState(null), A = be(e, (x) => h(x)), p = rr(t), y = d.useRef(!1), f = d.useRef(!0), { viewport: m, selectedItem: k, selectedItemText: E, focusSelectedItem: b } = i, I = d.useCallback(() => {
+  const { __scopeSelect: t, onPlaced: r, ...a } = n, o = ht(Jt, t), i = pt(Jt, t), [l, c] = d.useState(null), [u, h] = d.useState(null), A = be(e, (x) => h(x)), p = rr(t), y = d.useRef(!1), f = d.useRef(!0), { viewport: m, selectedItem: k, selectedItemText: E, focusSelectedItem: I } = i, b = d.useCallback(() => {
     if (o.trigger && o.valueNode && l && u && m && k && E) {
       const x = o.trigger.getBoundingClientRect(), O = u.getBoundingClientRect(), N = o.valueNode.getBoundingClientRect(), T = E.getBoundingClientRect();
       if (o.dir !== "rtl") {
@@ -411,16 +411,16 @@ var ld = "SelectItemAlignedPosition", Xa = d.forwardRef((n, e) => {
     o.dir,
     r
   ]);
-  dt(() => I(), [I]);
+  dt(() => b(), [b]);
   const [S, w] = d.useState();
   dt(() => {
     u && w(window.getComputedStyle(u).zIndex);
   }, [u]);
   const B = d.useCallback(
     (x) => {
-      x && f.current === !0 && (I(), b == null || b(), f.current = !1);
+      x && f.current === !0 && (b(), I == null || I(), f.current = !1);
     },
-    [I, b]
+    [b, I]
   );
   return /* @__PURE__ */ s(
     dd,
@@ -529,8 +529,8 @@ var [dd, os] = Yt(Jt, {}), Or = "SelectViewport", Ya = d.forwardRef(
               if (y > 0) {
                 const f = window.innerHeight - Oe * 2, m = parseFloat(A.style.minHeight), k = parseFloat(A.style.height), E = Math.max(m, k);
                 if (E < f) {
-                  const b = E + y, I = Math.min(f, b), S = b - I;
-                  A.style.height = I + "px", A.style.bottom === "0px" && (h.scrollTop = S > 0 ? S : 0, A.style.justifyContent = "flex-end");
+                  const I = E + y, b = Math.min(f, I), S = I - b;
+                  A.style.height = b + "px", A.style.bottom === "0px" && (h.scrollTop = S > 0 ? S : 0, A.style.justifyContent = "flex-end");
                 }
               }
             }
@@ -566,9 +566,9 @@ var Ln = "SelectItem", [hd, to] = Yt(Ln), no = d.forwardRef(
       ...i
     } = n, l = ht(Ln, t), c = pt(Ln, t), u = l.value === r, [h, A] = d.useState(o ?? ""), [p, y] = d.useState(!1), f = be(
       e,
-      (b) => {
-        var I;
-        return (I = c.itemRefCallback) == null ? void 0 : I.call(c, b, r, a);
+      (I) => {
+        var b;
+        return (b = c.itemRefCallback) == null ? void 0 : b.call(c, I, r, a);
       }
     ), m = _r(), k = d.useRef("touch"), E = () => {
       a || (l.onValueChange(r), l.onOpenChange(!1));
@@ -585,8 +585,8 @@ var Ln = "SelectItem", [hd, to] = Yt(Ln), no = d.forwardRef(
         disabled: a,
         textId: m,
         isSelected: u,
-        onItemTextChange: d.useCallback((b) => {
-          A((I) => I || ((b == null ? void 0 : b.textContent) ?? "").trim());
+        onItemTextChange: d.useCallback((I) => {
+          A((b) => b || ((I == null ? void 0 : I.textContent) ?? "").trim());
         }, []),
         children: /* @__PURE__ */ s(
           nr.ItemSlot,
@@ -616,20 +616,20 @@ var Ln = "SelectItem", [hd, to] = Yt(Ln), no = d.forwardRef(
                 onPointerUp: de(i.onPointerUp, () => {
                   k.current === "mouse" && E();
                 }),
-                onPointerDown: de(i.onPointerDown, (b) => {
-                  k.current = b.pointerType;
+                onPointerDown: de(i.onPointerDown, (I) => {
+                  k.current = I.pointerType;
                 }),
-                onPointerMove: de(i.onPointerMove, (b) => {
-                  var I;
-                  k.current = b.pointerType, a ? (I = c.onItemLeave) == null || I.call(c) : k.current === "mouse" && b.currentTarget.focus({ preventScroll: !0 });
+                onPointerMove: de(i.onPointerMove, (I) => {
+                  var b;
+                  k.current = I.pointerType, a ? (b = c.onItemLeave) == null || b.call(c) : k.current === "mouse" && I.currentTarget.focus({ preventScroll: !0 });
                 }),
-                onPointerLeave: de(i.onPointerLeave, (b) => {
-                  var I;
-                  b.currentTarget === document.activeElement && ((I = c.onItemLeave) == null || I.call(c));
+                onPointerLeave: de(i.onPointerLeave, (I) => {
+                  var b;
+                  I.currentTarget === document.activeElement && ((b = c.onItemLeave) == null || b.call(c));
                 }),
-                onKeyDown: de(i.onKeyDown, (b) => {
+                onKeyDown: de(i.onKeyDown, (I) => {
                   var S;
-                  ((S = c.searchRef) == null ? void 0 : S.current) !== "" && b.key === " " || ($c.includes(b.key) && E(), b.key === " " && b.preventDefault());
+                  ((S = c.searchRef) == null ? void 0 : S.current) !== "" && I.key === " " || ($c.includes(I.key) && E(), I.key === " " && I.preventDefault());
                 })
               }
             )
@@ -647,8 +647,8 @@ var hn = "SelectItemText", ro = d.forwardRef(
       (E) => A(E),
       c.onItemTextChange,
       (E) => {
-        var b;
-        return (b = l.itemTextRefCallback) == null ? void 0 : b.call(l, E, c.value, c.disabled);
+        var I;
+        return (I = l.itemTextRefCallback) == null ? void 0 : I.call(l, E, c.value, c.disabled);
       }
     ), y = h == null ? void 0 : h.textContent, f = d.useMemo(
       () => /* @__PURE__ */ s("option", { value: c.value, disabled: c.disabled, children: y }, c.value),
@@ -838,7 +838,7 @@ var yd = Oa, kd = Ha, Ed = La, Sd = ja, Id = Va, bd = qa, wd = Ya, Bd = _a, Rd =
       inverted: y = !1,
       form: f,
       ...m
-    } = n, k = d.useRef(/* @__PURE__ */ new Set()), E = d.useRef(0), I = i === "horizontal" ? Ud : Md, [S = [], w] = Hn({
+    } = n, k = d.useRef(/* @__PURE__ */ new Set()), E = d.useRef(0), b = i === "horizontal" ? Ud : Md, [S = [], w] = Hn({
       prop: h,
       defaultProp: u,
       onChange: (P) => {
@@ -883,7 +883,7 @@ var yd = Oa, kd = Ha, Ed = La, Sd = ja, Id = Va, bd = qa, wd = Ya, Bd = _a, Rd =
         orientation: i,
         form: f,
         children: /* @__PURE__ */ s(Lr.Provider, { scope: n.__scopeSlider, children: /* @__PURE__ */ s(Lr.Slot, { scope: n.__scopeSlider, children: /* @__PURE__ */ s(
-          I,
+          b,
           {
             "aria-disabled": l,
             "data-disabled": l ? "" : void 0,
@@ -930,10 +930,10 @@ var [vo, Co] = go(Zt, {
       onSlideEnd: c,
       onStepKeyDown: u,
       ...h
-    } = n, [A, p] = d.useState(null), y = be(e, (I) => p(I)), f = d.useRef(void 0), m = ua(a), k = m === "ltr", E = k && !o || !k && o;
-    function b(I) {
+    } = n, [A, p] = d.useState(null), y = be(e, (b) => p(b)), f = d.useRef(void 0), m = ua(a), k = m === "ltr", E = k && !o || !k && o;
+    function I(b) {
       const S = f.current || A.getBoundingClientRect(), w = [0, S.width], x = is(w, E ? [t, r] : [r, t]);
-      return f.current = S, x(I - S.left);
+      return f.current = S, x(b - S.left);
     }
     return /* @__PURE__ */ s(
       vo,
@@ -954,20 +954,20 @@ var [vo, Co] = go(Zt, {
               ...h.style,
               "--radix-slider-thumb-transform": "translateX(-50%)"
             },
-            onSlideStart: (I) => {
-              const S = b(I.clientX);
+            onSlideStart: (b) => {
+              const S = I(b.clientX);
               i == null || i(S);
             },
-            onSlideMove: (I) => {
-              const S = b(I.clientX);
+            onSlideMove: (b) => {
+              const S = I(b.clientX);
               l == null || l(S);
             },
             onSlideEnd: () => {
               f.current = void 0, c == null || c();
             },
-            onStepKeyDown: (I) => {
-              const w = mo[E ? "from-left" : "from-right"].includes(I.key);
-              u == null || u({ event: I, direction: w ? -1 : 1 });
+            onStepKeyDown: (b) => {
+              const w = mo[E ? "from-left" : "from-right"].includes(b.key);
+              u == null || u({ event: b, direction: w ? -1 : 1 });
             }
           }
         )
@@ -987,8 +987,8 @@ var [vo, Co] = go(Zt, {
       ...u
     } = n, h = d.useRef(null), A = be(e, h), p = d.useRef(void 0), y = !a;
     function f(m) {
-      const k = p.current || h.current.getBoundingClientRect(), E = [0, k.height], I = is(E, y ? [r, t] : [t, r]);
-      return p.current = k, I(m - k.top);
+      const k = p.current || h.current.getBoundingClientRect(), E = [0, k.height], b = is(E, y ? [r, t] : [t, r]);
+      return p.current = k, b(m - k.top);
     }
     return /* @__PURE__ */ s(
       vo,
@@ -1109,7 +1109,7 @@ var Vr = "SliderThumb", Io = d.forwardRef(
   }
 ), zd = d.forwardRef(
   (n, e) => {
-    const { __scopeSlider: t, index: r, name: a, ...o } = n, i = ar(Vr, t), l = Co(Vr, t), [c, u] = d.useState(null), h = be(e, (b) => u(b)), A = c ? i.form || !!c.closest("form") : !0, p = vl(c), y = i.values[r], f = y === void 0 ? 0 : wo(y, i.min, i.max), m = Hd(r, i.values.length), k = p == null ? void 0 : p[l.size], E = k ? Ld(k, f, l.direction) : 0;
+    const { __scopeSlider: t, index: r, name: a, ...o } = n, i = ar(Vr, t), l = Co(Vr, t), [c, u] = d.useState(null), h = be(e, (I) => u(I)), A = c ? i.form || !!c.closest("form") : !0, p = vl(c), y = i.values[r], f = y === void 0 ? 0 : wo(y, i.min, i.max), m = Hd(r, i.values.length), k = p == null ? void 0 : p[l.size], E = k ? Ld(k, f, l.direction) : 0;
     return d.useEffect(() => {
       if (c)
         return i.thumbs.add(c), () => {
@@ -1420,15 +1420,15 @@ const Uo = d.forwardRef((n, e) => {
   d.useEffect(() => m(a), [a]);
   const [k, E] = d.useState(o);
   d.useEffect(() => E(o), [o]);
-  const [b, I] = d.useState(i);
-  d.useEffect(() => I(i), [i]);
+  const [I, b] = d.useState(i);
+  d.useEffect(() => b(i), [i]);
   const [S, w] = d.useState(l);
-  return d.useEffect(() => w(l), [l]), d.createElement(cs, { ...u, ref: e, isRoot: !0, hasBackground: c, appearance: h, accentColor: p, grayColor: f, panelBackground: k, radius: b, scaling: S, onAppearanceChange: A, onAccentColorChange: y, onGrayColorChange: m, onPanelBackgroundChange: E, onRadiusChange: I, onScalingChange: w });
+  return d.useEffect(() => w(l), [l]), d.createElement(cs, { ...u, ref: e, isRoot: !0, hasBackground: c, appearance: h, accentColor: p, grayColor: f, panelBackground: k, radius: I, scaling: S, onAppearanceChange: A, onAccentColorChange: y, onGrayColorChange: m, onPanelBackgroundChange: E, onRadiusChange: b, onScalingChange: w });
 });
 Uo.displayName = "ThemeRoot";
 const cs = d.forwardRef((n, e) => {
-  const t = d.useContext(jn), { asChild: r, isRoot: a, hasBackground: o, appearance: i = (t == null ? void 0 : t.appearance) ?? Pe.appearance.default, accentColor: l = (t == null ? void 0 : t.accentColor) ?? Pe.accentColor.default, grayColor: c = (t == null ? void 0 : t.resolvedGrayColor) ?? Pe.grayColor.default, panelBackground: u = (t == null ? void 0 : t.panelBackground) ?? Pe.panelBackground.default, radius: h = (t == null ? void 0 : t.radius) ?? Pe.radius.default, scaling: A = (t == null ? void 0 : t.scaling) ?? Pe.scaling.default, onAppearanceChange: p = Ft, onAccentColorChange: y = Ft, onGrayColorChange: f = Ft, onPanelBackgroundChange: m = Ft, onRadiusChange: k = Ft, onScalingChange: E = Ft, ...b } = n, I = r ? ke : "div", S = c === "auto" ? lu(l) : c, w = n.appearance === "light" || n.appearance === "dark", B = o === void 0 ? a || w : o;
-  return d.createElement(jn.Provider, { value: d.useMemo(() => ({ appearance: i, accentColor: l, grayColor: c, resolvedGrayColor: S, panelBackground: u, radius: h, scaling: A, onAppearanceChange: p, onAccentColorChange: y, onGrayColorChange: f, onPanelBackgroundChange: m, onRadiusChange: k, onScalingChange: E }), [i, l, c, S, u, h, A, p, y, f, m, k, E]) }, d.createElement(I, { "data-is-root-theme": a ? "true" : "false", "data-accent-color": l, "data-gray-color": S, "data-has-background": B ? "true" : "false", "data-panel-background": u, "data-radius": h, "data-scaling": A, ref: e, ...b, className: v("radix-themes", { light: i === "light", dark: i === "dark" }, b.className) }));
+  const t = d.useContext(jn), { asChild: r, isRoot: a, hasBackground: o, appearance: i = (t == null ? void 0 : t.appearance) ?? Pe.appearance.default, accentColor: l = (t == null ? void 0 : t.accentColor) ?? Pe.accentColor.default, grayColor: c = (t == null ? void 0 : t.resolvedGrayColor) ?? Pe.grayColor.default, panelBackground: u = (t == null ? void 0 : t.panelBackground) ?? Pe.panelBackground.default, radius: h = (t == null ? void 0 : t.radius) ?? Pe.radius.default, scaling: A = (t == null ? void 0 : t.scaling) ?? Pe.scaling.default, onAppearanceChange: p = Ft, onAccentColorChange: y = Ft, onGrayColorChange: f = Ft, onPanelBackgroundChange: m = Ft, onRadiusChange: k = Ft, onScalingChange: E = Ft, ...I } = n, b = r ? ke : "div", S = c === "auto" ? lu(l) : c, w = n.appearance === "light" || n.appearance === "dark", B = o === void 0 ? a || w : o;
+  return d.createElement(jn.Provider, { value: d.useMemo(() => ({ appearance: i, accentColor: l, grayColor: c, resolvedGrayColor: S, panelBackground: u, radius: h, scaling: A, onAppearanceChange: p, onAccentColorChange: y, onGrayColorChange: f, onPanelBackgroundChange: m, onRadiusChange: k, onScalingChange: E }), [i, l, c, S, u, h, A, p, y, f, m, k, E]) }, d.createElement(b, { "data-is-root-theme": a ? "true" : "false", "data-accent-color": l, "data-gray-color": S, "data-has-background": B ? "true" : "false", "data-panel-background": u, "data-radius": h, "data-scaling": A, ref: e, ...I, className: v("radix-themes", { light: i === "light", dark: i === "dark" }, I.className) }));
 });
 cs.displayName = "ThemeImpl";
 const gt = (n) => {
@@ -2749,8 +2749,8 @@ const cg = "_DataTable_1adwg_1", dg = "_titleText_1adwg_23", ug = "_artistText_1
   isDragging: m,
   isDragOver: k,
   onDragStart: E,
-  onDragOver: b,
-  onDragLeave: I,
+  onDragOver: I,
+  onDragLeave: b,
   onDrop: S,
   onDragEnd: w
 }) {
@@ -2783,7 +2783,7 @@ const cg = "_DataTable_1adwg_1", dg = "_titleText_1adwg_23", ug = "_artistText_1
       });
     }
   }, D = (U) => {
-    U.preventDefault(), U.dataTransfer.dropEffect = "move", b == null || b(t);
+    U.preventDefault(), U.dataTransfer.dropEffect = "move", I == null || I(t);
   }, Q = (U) => {
     U.preventDefault();
     const G = parseInt(U.dataTransfer.getData("text/plain"), 10);
@@ -2803,7 +2803,7 @@ const cg = "_DataTable_1adwg_1", dg = "_titleText_1adwg_23", ug = "_artistText_1
       draggable: f,
       onDragStart: f ? z : void 0,
       onDragOver: f ? D : void 0,
-      onDragLeave: f ? I : void 0,
+      onDragLeave: f ? b : void 0,
       onDrop: f ? Q : void 0,
       onDragEnd: f ? w : void 0,
       children: [
@@ -2885,7 +2885,7 @@ const cg = "_DataTable_1adwg_1", dg = "_titleText_1adwg_23", ug = "_artistText_1
   onReorder: y,
   ...f
 }) => {
-  const [m, k] = K(!1), [E, b] = K(null), [I, S] = K(null), w = ne(null), B = i == null ? void 0 : i.field, x = _(() => new Set(r), [r]), O = R((H) => x.has(H), [x]), N = r.length, T = (t == null ? void 0 : t.length) ?? 0, P = N > 0, M = T > 0 && N === T, z = _(
+  const [m, k] = K(!1), [E, I] = K(null), [b, S] = K(null), w = ne(null), B = i == null ? void 0 : i.field, x = _(() => new Set(r), [r]), O = R((H) => x.has(H), [x]), N = r.length, T = (t == null ? void 0 : t.length) ?? 0, P = N > 0, M = T > 0 && N === T, z = _(
     () => t == null ? void 0 : t.some((H) => {
       var X;
       return (X = H.dropdownOptions) == null ? void 0 : X.length;
@@ -2938,18 +2938,18 @@ const cg = "_DataTable_1adwg_1", dg = "_titleText_1adwg_23", ug = "_artistText_1
     },
     [P, M, c]
   ), se = R((H) => {
-    b(H);
+    I(H);
   }, []), Te = R((H) => {
     S(H);
   }, []), Ke = R(() => {
     S(null);
   }, []), ft = R(
     (H, X) => {
-      b(null), S(null), !(H === X || H + 1 === X) && (y == null || y({ order: H, move_before: X }));
+      I(null), S(null), !(H === X || H + 1 === X) && (y == null || y({ order: H, move_before: X }));
     },
     [y]
   ), Fe = R(() => {
-    b(null), S(null);
+    I(null), S(null);
   }, []), Ae = R(() => {
     S((t == null ? void 0 : t.length) ?? 0);
   }, [t == null ? void 0 : t.length]), Ee = R(() => {
@@ -2958,7 +2958,7 @@ const cg = "_DataTable_1adwg_1", dg = "_titleText_1adwg_23", ug = "_artistText_1
     (H) => {
       H.preventDefault();
       const X = parseInt(H.dataTransfer.getData("text/plain"), 10), pe = (t == null ? void 0 : t.length) ?? 0;
-      b(null), S(null), !(X === pe || X + 1 === pe) && (y == null || y({ order: X, move_before: pe }));
+      I(null), S(null), !(X === pe || X + 1 === pe) && (y == null || y({ order: X, move_before: pe }));
     },
     [t == null ? void 0 : t.length, y]
   ), le = 1 + ((e == null ? void 0 : e.length) ?? 0) + (z ? 1 : 0), Be = p && (t == null ? void 0 : t.length) && E !== null, ae = R((H, X, pe) => {
@@ -3060,7 +3060,7 @@ const cg = "_DataTable_1adwg_1", dg = "_titleText_1adwg_23", ug = "_artistText_1
               renderDataCell: ae,
               reorderable: p,
               isDragging: E === X,
-              isDragOver: I === X,
+              isDragOver: b === X,
               onDragStart: se,
               onDragOver: Te,
               onDragLeave: Ke,
@@ -3073,7 +3073,7 @@ const cg = "_DataTable_1adwg_1", dg = "_titleText_1adwg_23", ug = "_artistText_1
             yn,
             {
               className: v(Y.dropAfterRow, {
-                [Y.dropAfterRowActive]: I === t.length
+                [Y.dropAfterRowActive]: b === t.length
               }),
               onDragOver: (H) => {
                 H.preventDefault(), H.dataTransfer.dropEffect = "move", Ae();
@@ -3432,21 +3432,21 @@ function $g({ initialScreen: n, animated: e, children: t }) {
   ), k = R(
     (N) => p(() => [{ name: N || n, params: {} }]),
     [p, n]
-  ), E = r.length > 1, b = _(
+  ), E = r.length > 1, I = _(
     () => ({ push: y, pop: f, popTo: m, reset: k, canGoBack: E, stack: r }),
     [y, f, m, k, E, r]
-  ), I = r[r.length - 1], S = A[I.name];
+  ), b = r[r.length - 1], S = A[b.name];
   if (!S) return null;
   const w = (N, T) => N in o ? o[N] : S[N] ?? T, B = S.component, x = R(
     (N) => {
-      u.current[u.current.length - 1].name === I.name && i((P) => ({ ...P, ...N }));
+      u.current[u.current.length - 1].name === b.name && i((P) => ({ ...P, ...N }));
     },
-    [I.name]
+    [b.name]
   ), O = _(
-    () => ({ name: I.name, params: I.params || {}, setOptions: x }),
-    [I.name, I.params, x]
+    () => ({ name: b.name, params: b.params || {}, setOptions: x }),
+    [b.name, b.params, x]
   );
-  return /* @__PURE__ */ s(Qi.Provider, { value: b, children: /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }, children: [
+  return /* @__PURE__ */ s(Qi.Provider, { value: I, children: /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }, children: [
     /* @__PURE__ */ s(
       Di,
       {
@@ -3915,10 +3915,10 @@ const JS = Cr, Rf = "_sliderRoot_7wkh4_23", Nf = "_sliderTrack_7wkh4_31", xf = "
     p();
   }, [p]), E = R(() => {
     n([1]), A();
-  }, [n, A]), b = R(() => {
+  }, [n, A]), I = R(() => {
     const S = Date.now();
     S - i.current < 300 && E(), i.current = S;
-  }, [E]), I = _(
+  }, [E]), b = _(
     () => /* @__PURE__ */ g(ge, { children: [
       h ? "-∞ dB" : `${u.toFixed(1)} dB`,
       /* @__PURE__ */ s($n, { className: wt.tooltipArrow })
@@ -3947,7 +3947,7 @@ const JS = Cr, Rf = "_sliderRoot_7wkh4_23", Nf = "_sliderTrack_7wkh4_31", xf = "
               onPointerDown: m,
               onKeyDown: y,
               onBlur: k,
-              onClick: b
+              onClick: I
             }
           ) }),
           /* @__PURE__ */ s(
@@ -3957,7 +3957,7 @@ const JS = Cr, Rf = "_sliderRoot_7wkh4_23", Nf = "_sliderTrack_7wkh4_31", xf = "
               side: "bottom",
               align: "center",
               sideOffset: 10,
-              children: I
+              children: b
             }
           )
         ] }) })
@@ -4131,9 +4131,9 @@ const zn = 19.5, On = 19.5, Ys = 14, Zs = 18, Vf = [
     n == null && e(a);
   }, [n, e, a]);
   const p = R(
-    (I) => {
-      if (I.preventDefault(), I.stopPropagation(), t) return;
-      const S = I.wheelDelta ?? -I.deltaY * 25;
+    (b) => {
+      if (b.preventDefault(), b.stopPropagation(), t) return;
+      const S = b.wheelDelta ?? -b.deltaY * 25;
       if (!S || Math.abs(S) <= 50) return;
       const w = Date.now();
       if (w - A.current < 100) return;
@@ -4142,21 +4142,21 @@ const zn = 19.5, On = 19.5, Ys = 14, Zs = 18, Vf = [
     },
     [e, n, r, t]
   ), y = R(
-    (I) => {
+    (b) => {
       if (t) {
-        I.preventDefault();
+        b.preventDefault();
         return;
       }
-      I.preventDefault(), c(!0), h(I.clientY);
+      b.preventDefault(), c(!0), h(b.clientY);
     },
     [t]
   ), f = R(
-    (I) => {
+    (b) => {
       if (!l || t) return;
-      const S = u - I.clientY;
+      const S = u - b.clientY;
       if (Math.abs(S) <= 20) return;
       const w = S > 0 ? 1 : -1, B = $s(n, r, w);
-      e(B), h(I.clientY), A.current = Date.now();
+      e(B), h(b.clientY), A.current = Date.now();
     },
     [l, u, n, e, r, t]
   ), m = R(() => {
@@ -4164,14 +4164,14 @@ const zn = 19.5, On = 19.5, Ys = 14, Zs = 18, Vf = [
   }, []), k = R(() => {
     c(!1);
   }, []), E = R(
-    (I) => {
-      I.detail === 2 && !t && e(a);
+    (b) => {
+      b.detail === 2 && !t && e(a);
     },
     [e, a, t]
-  ), b = R(
-    (I) => {
+  ), I = R(
+    (b) => {
       if (!o || t) return;
-      const S = qf(r, I);
+      const S = qf(r, b);
       S && e(S);
     },
     [o, t, e, r]
@@ -4180,7 +4180,7 @@ const zn = 19.5, On = 19.5, Ys = 14, Zs = 18, Vf = [
     containerRef: i,
     isDragging: l,
     handleClick: E,
-    handleDotClick: b
+    handleDotClick: I
   };
 }, Yf = ({
   className: n,
@@ -4201,8 +4201,8 @@ const zn = 19.5, On = 19.5, Ys = 14, Zs = 18, Vf = [
     defaultDot: c,
     clickableDots: a
   }), y = _(() => typeof e == "object" && e !== null ? e.position : Kf(e, o), [e, o]), { pointerRotation: f, pointerColor: m } = _(() => Gf(y, r), [y, r]), k = (E) => {
-    const b = _s[E.color] || _s.neutral, I = E.position === y, S = i === E.position && a;
-    return r ? b.default : I ? b.active : S ? b.hover : b.default;
+    const I = _s[E.color] || _s.neutral, b = E.position === y, S = i === E.position && a;
+    return r ? I.default : b ? I.active : S ? I.hover : I.default;
   };
   return /* @__PURE__ */ s(
     "div",
@@ -4248,15 +4248,15 @@ const zn = 19.5, On = 19.5, Ys = 14, Zs = 18, Vf = [
               }
             ),
             o == null ? void 0 : o.map((E) => {
-              const b = Oi[E.position];
-              if (!b) return null;
-              const I = k(E), S = a && !r;
+              const I = Oi[E.position];
+              if (!I) return null;
+              const b = k(E), S = a && !r;
               return /* @__PURE__ */ g(ve.Fragment, { children: [
                 S && /* @__PURE__ */ s(
                   "circle",
                   {
-                    cx: b.x,
-                    cy: b.y,
+                    cx: I.x,
+                    cy: I.y,
                     r: 4,
                     style: {
                       cursor: "pointer",
@@ -4272,10 +4272,10 @@ const zn = 19.5, On = 19.5, Ys = 14, Zs = 18, Vf = [
                 /* @__PURE__ */ s(
                   "circle",
                   {
-                    cx: b.x,
-                    cy: b.y,
+                    cx: I.x,
+                    cy: I.y,
                     r: 1,
-                    fill: I,
+                    fill: b,
                     style: {
                       cursor: S ? "pointer" : "default",
                       transition: "fill 0.2s ease",
@@ -4533,7 +4533,7 @@ const nC = ({
   size: A = "1",
   ...p
 }) => {
-  const y = (o == null ? void 0 : o.id) || a, f = (o == null ? void 0 : o.name) || t, m = (o == null ? void 0 : o.description) || r, k = (o == null ? void 0 : o.image) || e, E = (o == null ? void 0 : o.icon) || l, b = k && (k != null && k.startsWith("url(")) ? k == null ? void 0 : k.substring(4, (k == null ? void 0 : k.length) - 1).replace(/"/g, "") : k, I = (x) => {
+  const y = (o == null ? void 0 : o.id) || a, f = (o == null ? void 0 : o.name) || t, m = (o == null ? void 0 : o.description) || r, k = (o == null ? void 0 : o.image) || e, E = (o == null ? void 0 : o.icon) || l, I = k && (k != null && k.startsWith("url(")) ? k == null ? void 0 : k.substring(4, (k == null ? void 0 : k.length) - 1).replace(/"/g, "") : k, b = (x) => {
     x.stopPropagation(), x.preventDefault(), h == null || h();
   }, S = {
     1: { avatar: 60, icon: 15 },
@@ -4551,7 +4551,7 @@ const nC = ({
       ),
       style: { "--color-surface": "transparent" },
       "data-state": u ? "checked" : "unchecked",
-      onClick: I,
+      onClick: b,
       ...p,
       children: /* @__PURE__ */ g(C, { gap: "2", children: [
         /* @__PURE__ */ s(C, { width: `${B.avatar}px`, height: `${B.avatar}px`, children: i ? /* @__PURE__ */ s(
@@ -4586,7 +4586,7 @@ const nC = ({
         ) : /* @__PURE__ */ s(
           je,
           {
-            src: b,
+            src: I,
             className: v(
               re.listCardsAvatar,
               re[`listCardsAvatarSize${A}`]
@@ -5026,24 +5026,24 @@ const CC = "_content_15nbm_1", yC = "_pan_15nbm_13", kC = "_disabled_15nbm_26",
       p.current && (document.head.removeChild(p.current), p.current = null), E(), m.current && cancelAnimationFrame(m.current);
     };
   }, [h, k, E]);
-  const b = R(
+  const I = R(
     (z) => {
       f.current = ea(z), !m.current && (m.current = requestAnimationFrame(() => {
         m.current = 0, t(f.current);
       }));
     },
     [t]
-  ), I = R(
+  ), b = R(
     (z) => {
       z.preventDefault(), z.stopPropagation();
       const D = z.wheelDelta ?? -z.deltaY * 25;
       if (!D) return;
       const Q = e + (D > 0 ? wr : -wr);
-      b(Q);
+      I(Q);
     },
-    [e, b]
+    [e, I]
   );
-  Kt("wheel", I, i);
+  Kt("wheel", b, i);
   const S = R(
     (z) => {
       var Q;
@@ -5057,17 +5057,17 @@ const CC = "_content_15nbm_1", yC = "_pan_15nbm_13", kC = "_disabled_15nbm_26",
     (z) => {
       if (!h) return;
       const D = y.current - z.clientY, Q = e + D * wr;
-      b(Q), y.current = z.clientY;
+      I(Q), y.current = z.clientY;
     },
-    [h, e, b]
+    [h, e, I]
   ), B = R((z) => {
     var D, Q;
     (Q = (D = z.currentTarget) == null ? void 0 : D.releasePointerCapture) == null || Q.call(D, z.pointerId), A(!1);
   }, []), x = R(
     (z) => {
-      z.detail === 2 && b(0);
+      z.detail === 2 && I(0);
     },
-    [b]
+    [I]
   ), { arcPath: O, pointerRotation: N, arcColor: T, pointerColor: P } = _(() => {
     const z = ta(e, a, o), D = ea(z), Q = br + D * Math.PI, j = an + Bt * Math.cos(br), U = on + Bt * Math.sin(br), G = an + Bt * Math.cos(Q), F = on + Bt * Math.sin(Q), se = 0, Te = D > 0 ? 1 : 0;
     return {
@@ -5367,12 +5367,12 @@ const YC = ({
     onProjectClick: p,
     openedItem: y,
     setOpenedItem: f
-  } = At(yr), [m, k] = K(!1), E = _(() => m ? o : o.slice(0, 6), [o, m]), b = R(() => {
+  } = At(yr), [m, k] = K(!1), E = _(() => m ? o : o.slice(0, 6), [o, m]), I = R(() => {
     if (l) return;
     k(!1);
     const w = h.find((B) => B.id === n);
     y === n ? (f(null), p == null || p(w, !1)) : (f(n), p == null || p(w, !0));
-  }, [n, y, f, p, h, l]), I = R((w) => {
+  }, [n, y, f, p, h, l]), b = R((w) => {
     w.preventDefault(), w.stopPropagation(), k(!m);
   }, [m]), S = R((w) => {
     w.stopPropagation(), A == null || A(o);
@@ -5384,7 +5384,7 @@ const YC = ({
       gap: "2",
       p: "1",
       className: `${Rt.item} ${y === n ? Rt.opened : ""} ${l ? Rt.failed : ""}`,
-      onClick: b,
+      onClick: I,
       ...u,
       children: [
         /* @__PURE__ */ g(C, { direction: "row", gap: "3", children: [
@@ -5417,7 +5417,7 @@ const YC = ({
             /* @__PURE__ */ s(J, { size: "2", style: { color: "var(--neutral-alpha-10)" }, children: "Loading tracks..." })
           ] }),
           o.length > 0 && /* @__PURE__ */ g(C, { direction: "column", gap: "1", children: [
-            typeof c == "function" ? c(E) : c,
+            typeof c == "function" ? c({ projectId: n, tracks: E }) : c,
             /* @__PURE__ */ g(C, { direction: "row", gap: "3", p: "2", align: "center", justify: "center", children: [
               /* @__PURE__ */ g(
                 Vn,
@@ -5434,7 +5434,7 @@ const YC = ({
               ),
               o.length > 6 && /* @__PURE__ */ g(ge, { children: [
                 /* @__PURE__ */ s($e, { orientation: "vertical" }),
-                /* @__PURE__ */ g(Vn, { variant: "ghost", color: "gray", style: { flex: "1" }, onClick: I, children: [
+                /* @__PURE__ */ g(Vn, { variant: "ghost", color: "gray", style: { flex: "1" }, onClick: b, children: [
                   m ? "Show less" : "Show more",
                   m ? /* @__PURE__ */ s(Sc, { width: 16, height: 16 }) : /* @__PURE__ */ s(Qa, { width: 16, height: 16 })
                 ] })
@@ -5609,33 +5609,33 @@ const p1 = ({
 }, y1 = ({
   ...n
 }) => {
-  var k;
-  const { onClickTrack: e } = At(yr), { id: t, title: r, cover: a, transfers: o, audioUrl: i, onChangeTransfer: l } = n, c = _(() => o && o.length > 0, [o]), [u, h] = K(c ? parseInt(((k = o == null ? void 0 : o[0]) == null ? void 0 : k.pitchShift) ?? 0) : 0), A = _(() => c ? Math.min(...o == null ? void 0 : o.map((E) => parseInt(E.pitchShift))) : 0, [o]), p = _(() => c ? Math.max(...o == null ? void 0 : o.map((E) => parseInt(E.pitchShift))) : 0, [o]), y = R((E) => {
+  var E;
+  const { onClickTrack: e } = At(yr), { projectId: t, id: r, title: a, cover: o, transfers: i, audioUrl: l, onChangeTransfer: c } = n, u = _(() => i && i.length > 0, [i]), [h, A] = K(u ? parseInt(((E = i == null ? void 0 : i[0]) == null ? void 0 : E.pitchShift) ?? 0) : 0), p = _(() => u ? Math.min(...i == null ? void 0 : i.map((I) => parseInt(I.pitchShift))) : 0, [i]), y = _(() => u ? Math.max(...i == null ? void 0 : i.map((I) => parseInt(I.pitchShift))) : 0, [i]), f = R((I) => {
     var b;
-    return c ? (b = o == null ? void 0 : o.find((I) => parseInt(I.pitchShift) === E)) == null ? void 0 : b.audioUrl : i;
-  }, [c, o, i]), f = R((E) => {
-    h(E), l == null || l({
-      id: t,
-      title: r,
-      audioUrl: y(E)
+    return u ? (b = i == null ? void 0 : i.find((S) => parseInt(S.pitchShift) === I)) == null ? void 0 : b.audioUrl : l;
+  }, [u, i, l]), m = R((I) => {
+    A(I), c == null || c(t, {
+      id: r,
+      title: a,
+      audioUrl: f(I)
     });
-  }, [l, t, r, o]), m = R((E) => {
-    E.stopPropagation(), e == null || e({
-      id: t,
-      title: r,
-      audioUrl: y(u)
+  }, [c, t, r, a, i]), k = R((I) => {
+    I.stopPropagation(), e == null || e({
+      id: r,
+      title: a,
+      audioUrl: f(h)
     });
-  }, [e, t, r, y, u]);
+  }, [e, r, a, f, h]);
   return /* @__PURE__ */ s(C, { direction: "column", gap: "1", children: /* @__PURE__ */ g(
     C,
     {
       direction: "row",
       gap: "3",
       className: cn.itemTrack,
-      onClick: m,
+      onClick: k,
       children: [
         /* @__PURE__ */ g("div", { className: cn.cover, children: [
-          /* @__PURE__ */ s(C, { className: cn.coverImage, children: a ? /* @__PURE__ */ s("img", { src: a, alt: r, width: 48, height: 48 }) : /* @__PURE__ */ s(Tc, { width: 16, height: 16 }) }),
+          /* @__PURE__ */ s(C, { className: cn.coverImage, children: o ? /* @__PURE__ */ s("img", { src: o, alt: a, width: 48, height: 48 }) : /* @__PURE__ */ s(Tc, { width: 16, height: 16 }) }),
           /* @__PURE__ */ s(tr, { width: 16, height: 16, className: cn.iconArrowLeft })
         ] }),
         /* @__PURE__ */ s(
@@ -5646,16 +5646,16 @@ const p1 = ({
             align: "start",
             justify: "center",
             style: { flex: 1, minWidth: 0 },
-            children: /* @__PURE__ */ s(J, { size: "2", asChild: !0, children: /* @__PURE__ */ s("span", { className: cn.trackTitle, children: r }) })
+            children: /* @__PURE__ */ s(J, { size: "2", asChild: !0, children: /* @__PURE__ */ s("span", { className: cn.trackTitle, children: a }) })
           }
         ),
-        c && /* @__PURE__ */ s(
+        u && i.length > 1 && /* @__PURE__ */ s(
           p1,
           {
-            min: A,
-            max: p,
-            value: u,
-            onChange: f
+            min: p,
+            max: y,
+            value: h,
+            onChange: m
           }
         )
       ]
@@ -5741,14 +5741,14 @@ const B1 = "_starButton_azi6g_1", R1 = "_disabled_azi6g_17", N1 = "_readOnly_azi
   maxLabel: h,
   ...A
 }) => {
-  const [p, y] = K(t || 0), [f, m] = K(0), k = e !== void 0 ? e : p, E = e !== void 0, b = R(
+  const [p, y] = K(t || 0), [f, m] = K(0), k = e !== void 0 ? e : p, E = e !== void 0, I = R(
     (B) => {
       if (r || a) return;
       const x = B + 1, O = x === k ? 0 : x;
       E || y(O), o == null || o({ value: O });
     },
     [r, a, E, o, k]
-  ), I = R(
+  ), b = R(
     (B) => {
       if (r || a) return;
       const x = B.currentTarget.getBoundingClientRect(), O = B.clientX - x.left, N = x.width / n, T = Math.floor(O / N), M = Math.max(0, Math.min(T, n - 1)) + 1;
@@ -5770,7 +5770,7 @@ const B1 = "_starButton_azi6g_1", R1 = "_disabled_azi6g_17", N1 = "_readOnly_azi
           [De.disabled]: r,
           [De.readOnly]: a
         }),
-        onClick: () => b(B),
+        onClick: () => I(B),
         disabled: r || a,
         "aria-label": `Rate ${B + 1} out of ${n}`,
         ...A,
@@ -5800,7 +5800,7 @@ const B1 = "_starButton_azi6g_1", R1 = "_disabled_azi6g_17", N1 = "_readOnly_azi
               className: De.starsContainer,
               role: "radiogroup",
               "aria-label": `Rating: ${k} out of ${n} stars`,
-              onMouseMove: I,
+              onMouseMove: b,
               onMouseLeave: S,
               children: Array.from({ length: n }, (B, x) => w(x))
             }
@@ -6122,12 +6122,12 @@ const Cy = ({
   /* @__PURE__ */ g(C, { gap: "2", direction: "column", children: [
     /* @__PURE__ */ s(W, { size: "2", weight: "medium", children: n._("Input Level") }),
     /* @__PURE__ */ s("div", { className: at.levelMeter, children: /* @__PURE__ */ s("div", { className: at.levelMeterTrack, children: /* @__PURE__ */ s("div", { className: at.levelMeterRow, children: Array.from({ length: 17 }, (m, k) => {
-      const E = Math.max(0, (f - 5) / 25) * 17, b = k < E;
-      let I = "low";
-      return k >= 15 ? I = "high" : k >= 11 && (I = "mid"), /* @__PURE__ */ s(
+      const E = Math.max(0, (f - 5) / 25) * 17, I = k < E;
+      let b = "low";
+      return k >= 15 ? b = "high" : k >= 11 && (b = "mid"), /* @__PURE__ */ s(
         "div",
         {
-          className: `${at.levelMeterSegment} ${b ? `${at.active} ${at[I]}` : ""}`
+          className: `${at.levelMeterSegment} ${I ? `${at.active} ${at[b]}` : ""}`
         },
         `level-${k}`
       );
@@ -6473,10 +6473,10 @@ const ji = ({
     m(!0);
   }, E = () => {
     m(!1);
-  }, b = (S) => {
-    S.stopPropagation();
   }, I = (S) => {
     S.stopPropagation();
+  }, b = (S) => {
+    S.stopPropagation();
   };
   return /* @__PURE__ */ g(
     C,
@@ -6563,8 +6563,8 @@ const ji = ({
                 className: v(Z.dropdownTriggerWrapper, {
                   [Z.dropdownTriggerWrapperMobile]: y
                 }),
-                onPointerDown: b,
-                onClick: I,
+                onPointerDown: I,
+                onClick: b,
                 children: /* @__PURE__ */ s(gr, { hovered: c })
               }
             ),
@@ -6586,13 +6586,13 @@ const ji = ({
     t == null || t(Q), l && i();
   }, A = () => {
     r == null || r(), l && i();
-  }, [p, y] = K(!1), [f, m] = K(!1), k = ne(null), E = ne(null), b = ne(null), I = 260, S = 4, w = a && r ? 1 : 0, B = a && !p, x = B ? n.slice(0, S) : n, O = 2750, N = () => {
+  }, [p, y] = K(!1), [f, m] = K(!1), k = ne(null), E = ne(null), I = ne(null), b = 260, S = 4, w = a && r ? 1 : 0, B = a && !p, x = B ? n.slice(0, S) : n, O = 2750, N = () => {
     a && (k.current && (clearTimeout(k.current), k.current = null), E.current && (clearTimeout(E.current), E.current = null), m(!1));
   }, T = () => {
     a && p && (k.current && clearTimeout(k.current), k.current = setTimeout(() => {
       k.current = null, m(!0), E.current = setTimeout(() => {
         E.current = null, y(!1), m(!1);
-      }, I);
+      }, b);
     }, O));
   }, P = (Q) => {
     a && (Q.stopPropagation(), k.current && (clearTimeout(k.current), k.current = null), m(!1), y(!0));
@@ -6600,7 +6600,7 @@ const ji = ({
     a && y(!0);
   }, z = () => {
     if (!a) return;
-    const Q = b.current;
+    const Q = I.current;
     Q && setTimeout(() => {
       Q.contains(document.activeElement) || y(!1);
     }, 0);
@@ -6641,7 +6641,7 @@ const ji = ({
       children: /* @__PURE__ */ s(
         "div",
         {
-          ref: b,
+          ref: I,
           className: Z.hoverRegion,
           onMouseEnter: N,
           onMouseLeave: T,
@@ -7145,7 +7145,7 @@ const Pn = (n) => {
   const p = ne(null), y = ne(null), [f, m] = K(!1), k = R((w) => {
     const B = w.target, x = B.scrollLeft + B.clientWidth >= B.scrollWidth - 2;
     m(x);
-  }, []), E = !!i || !!c, b = R(
+  }, []), E = !!i || !!c, I = R(
     (w) => {
       if (E) return;
       const B = w.target.value;
@@ -7166,7 +7166,7 @@ const Pn = (n) => {
   }, [n.conditioningText, h]), ue(() => {
     m(!1);
   }, [u]);
-  const I = R(
+  const b = R(
     (w) => {
       e((B) => ({
         ...B,
@@ -7217,7 +7217,7 @@ const Pn = (n) => {
                     {
                       value: n.conditioningText,
                       onFocus: a,
-                      onChange: b,
+                      onChange: I,
                       placeholder: t._(
                         `Describe your desired sound characteristics (ex: ${Xk(
                           n.instrument,
@@ -7296,7 +7296,7 @@ const Pn = (n) => {
                                   className: He.tagChip,
                                   variant: "ghost",
                                   size: "2",
-                                  onClick: () => I(w),
+                                  onClick: () => b(w),
                                   style: {
                                     borderRadius: "9999px",
                                     color: "rgba(241, 247, 254, 0.71)",
@@ -7788,8 +7788,8 @@ const Fn = {
   generateFromSelectionTrack: m,
   unmutedTracksCount: k,
   onMountConcurrency: E,
-  onClear: b,
-  onInspireMe: I,
+  onClear: I,
+  onInspireMe: b,
   inspireMeLoading: S,
   onBoost: w,
   boostLoading: B,
@@ -7943,7 +7943,7 @@ const Fn = {
                   i18n: i,
                   onAddConditioningAudio: r,
                   onTextConditioningFocus: a,
-                  onInspireMe: I,
+                  onInspireMe: b,
                   inspireMeLoading: S,
                   onBoost: w,
                   boostLoading: B,
@@ -8023,7 +8023,7 @@ const Fn = {
                           inpaintingTrack: f,
                           generateFromSelectionTrack: m,
                           unmutedTracksCount: k,
-                          onClear: b,
+                          onClear: I,
                           i18n: i
                         }
                       ) }),
@@ -8049,7 +8049,7 @@ const Fn = {
                         Ue,
                         {
                           type: "error",
-                          onClick: b,
+                          onClick: I,
                           ctaLabel: i._("Clear"),
                           showBackground: !1,
                           showIcon: !1,
@@ -8291,7 +8291,7 @@ const aa = {
       name: n._("Other"),
       category: "paid"
     }
-  ], b = async (w) => {
+  ], I = async (w) => {
     if (w.isLocked) {
       y(w.value);
       return;
@@ -8309,7 +8309,7 @@ const aa = {
       }
       return O.includes("other") && O.length === 1 ? { ...x, selectedStems: [] } : { ...x, selectedStems: O };
     });
-  }, I = (w) => {
+  }, b = (w) => {
     c((B) => ({
       ...B,
       selectedStems: w.value
@@ -8327,7 +8327,7 @@ const aa = {
             icon: aa[w.value]
           })),
           value: l.selectedStems,
-          onSelect: I
+          onSelect: b
         }
       ),
       /* @__PURE__ */ s(W, { size: "2", weight: "medium", mt: "2", children: n._("Music Stems") })
@@ -8346,7 +8346,7 @@ const aa = {
           };
         }),
         value: l.selectedStems,
-        onSelect: b,
+        onSelect: I,
         style: {
           marginBottom: "12px"
         }
@@ -8971,13 +8971,13 @@ const YE = "_track_1xe9y_1", ZE = "_leftIcon_1xe9y_9", _E = "_name_1xe9y_15", $E
     // Children (having content means group/takelanes)
     children: E
   }) => {
-    const b = !!E, I = R(() => k == null ? void 0 : k(!A), [A, k]);
+    const I = !!E, b = R(() => k == null ? void 0 : k(!A), [A, k]);
     return /* @__PURE__ */ g("div", { className: v(fe.container, { [fe.isOpen]: A }), children: [
       /* @__PURE__ */ g(
         "div",
         {
           className: v(fe.track, {
-            [fe.isParentTrack]: b,
+            [fe.isParentTrack]: I,
             [fe.isCompact]: i
           }),
           style: { height: `${o}px` },
@@ -8992,7 +8992,7 @@ const YE = "_track_1xe9y_1", ZE = "_leftIcon_1xe9y_9", _E = "_name_1xe9y_15", $E
                       onPointerDown: (S) => S.stopPropagation(),
                       onMouseDown: (S) => S.stopPropagation(),
                       onTouchStart: (S) => S.stopPropagation(),
-                      children: /* @__PURE__ */ s(m0, { isOpen: A, onToggleOpen: I })
+                      children: /* @__PURE__ */ s(m0, { isOpen: A, onToggleOpen: b })
                     }
                   ),
                   /* @__PURE__ */ s(Ts, { content: n, children: /* @__PURE__ */ s(
@@ -9000,7 +9000,7 @@ const YE = "_track_1xe9y_1", ZE = "_leftIcon_1xe9y_9", _E = "_name_1xe9y_15", $E
                     {
                       size: "2",
                       className: fe.name,
-                      onClick: b ? I : void 0,
+                      onClick: I ? b : void 0,
                       children: n
                     }
                   ) })
@@ -9074,7 +9074,7 @@ const YE = "_track_1xe9y_1", ZE = "_leftIcon_1xe9y_9", _E = "_name_1xe9y_15", $E
           ]
         }
       ),
-      b && A && /* @__PURE__ */ s("div", { className: fe.group, children: E })
+      I && A && /* @__PURE__ */ s("div", { className: fe.group, children: E })
     ] });
   }
 );
@@ -9100,10 +9100,10 @@ function zS({ schema: n }) {
   const c = R((m, k) => {
     t((E) => ({ ...E, [m]: k })), a((E) => ({ ...E, [m]: null }));
   }, []), u = (m, k) => {
-    const E = e[m], b = (I) => c(m, I);
-    return k === "checkbox" || k === "switch" ? { checked: !!E, onCheckedChange: b } : { value: E ?? "", onChange: (I) => {
+    const E = e[m], I = (b) => c(m, b);
+    return k === "checkbox" || k === "switch" ? { checked: !!E, onCheckedChange: I } : { value: E ?? "", onChange: (b) => {
       var S;
-      return b(((S = I == null ? void 0 : I.target) == null ? void 0 : S.value) ?? I);
+      return I(((S = b == null ? void 0 : b.target) == null ? void 0 : S.value) ?? b);
     } };
   }, h = () => {
     const m = n.safeParse(e);
@@ -9111,8 +9111,8 @@ function zS({ schema: n }) {
       return a({}), { isValid: !0, data: m.data };
     const k = {};
     for (const E of m.error.issues) {
-      const b = E.path.join(".");
-      k[b] || (k[b] = E.message);
+      const I = E.path.join(".");
+      k[I] || (k[I] = E.message);
     }
     return a(k), { isValid: !1, data: e };
   }, A = R((m) => (i.current.push(m), () => {
@@ -9545,14 +9545,14 @@ class B0 extends Bn {
       const A = (p) => {
         if (p.button !== o || (c.set(p.pointerId, p), c.size > 1)) return;
         let y = p.clientX, f = p.clientY, m = !1;
-        const k = Date.now(), E = t.getBoundingClientRect(), { left: b, top: I } = E, S = (N) => {
+        const k = Date.now(), E = t.getBoundingClientRect(), { left: I, top: b } = E, S = (N) => {
           if (N.defaultPrevented || c.size > 1 || u && Date.now() - k < i) return;
           const T = N.clientX, P = N.clientY, M = T - y, z = P - f;
-          (m || Math.abs(M) > a || Math.abs(z) > a) && (N.preventDefault(), N.stopPropagation(), m || (l.set({ type: "start", x: y - b, y: f - I }), m = !0), l.set({ type: "move", x: T - b, y: P - I, deltaX: M, deltaY: z }), y = T, f = P);
+          (m || Math.abs(M) > a || Math.abs(z) > a) && (N.preventDefault(), N.stopPropagation(), m || (l.set({ type: "start", x: y - I, y: f - b }), m = !0), l.set({ type: "move", x: T - I, y: P - b, deltaX: M, deltaY: z }), y = T, f = P);
         }, w = (N) => {
           if (c.delete(N.pointerId), m) {
             const T = N.clientX, P = N.clientY;
-            l.set({ type: "end", x: T - b, y: P - I });
+            l.set({ type: "end", x: T - I, y: P - b });
           }
           h();
         }, B = (N) => {
@@ -9726,16 +9726,16 @@ class B0 extends Bn {
     var e;
   }
   renderBarWaveform(e, t, r, a) {
-    const { width: o, height: i } = r.canvas, { halfHeight: l, barWidth: c, barRadius: u, barIndexScale: h, barSpacing: A, barMinHeight: p } = function({ width: f, height: m, length: k, options: E, pixelRatio: b }) {
-      const I = m / 2, S = E.barWidth ? E.barWidth * b : 1, w = E.barGap ? E.barGap * b : E.barWidth ? S / 2 : 0, B = S + w || 1;
-      return { halfHeight: I, barWidth: S, barGap: w, barRadius: E.barRadius || 0, barMinHeight: E.barMinHeight ? E.barMinHeight * b : 0, barIndexScale: k > 0 ? f / B / k : 0, barSpacing: B };
-    }({ width: o, height: i, length: (e[0] || []).length, options: t, pixelRatio: this.getPixelRatio() }), y = function({ channelData: f, barIndexScale: m, barSpacing: k, barWidth: E, halfHeight: b, vScale: I, canvasHeight: S, barAlign: w, barMinHeight: B }) {
+    const { width: o, height: i } = r.canvas, { halfHeight: l, barWidth: c, barRadius: u, barIndexScale: h, barSpacing: A, barMinHeight: p } = function({ width: f, height: m, length: k, options: E, pixelRatio: I }) {
+      const b = m / 2, S = E.barWidth ? E.barWidth * I : 1, w = E.barGap ? E.barGap * I : E.barWidth ? S / 2 : 0, B = S + w || 1;
+      return { halfHeight: b, barWidth: S, barGap: w, barRadius: E.barRadius || 0, barMinHeight: E.barMinHeight ? E.barMinHeight * I : 0, barIndexScale: k > 0 ? f / B / k : 0, barSpacing: B };
+    }({ width: o, height: i, length: (e[0] || []).length, options: t, pixelRatio: this.getPixelRatio() }), y = function({ channelData: f, barIndexScale: m, barSpacing: k, barWidth: E, halfHeight: I, vScale: b, canvasHeight: S, barAlign: w, barMinHeight: B }) {
       const x = f[0] || [], O = f[1] || x, N = x.length, T = [];
       let P = 0, M = 0, z = 0;
       for (let D = 0; D <= N; D++) {
         const Q = Math.round(D * m);
         if (Q > P) {
-          const { topHeight: G, totalHeight: F } = I0({ maxTop: M, maxBottom: z, halfHeight: b, vScale: I, barMinHeight: B, barAlign: w }), se = b0({ barAlign: w, halfHeight: b, topHeight: G, totalHeight: F, canvasHeight: S });
+          const { topHeight: G, totalHeight: F } = I0({ maxTop: M, maxBottom: z, halfHeight: I, vScale: b, barMinHeight: B, barAlign: w }), se = b0({ barAlign: w, halfHeight: I, topHeight: G, totalHeight: F, canvasHeight: S });
           T.push({ x: P * k, y: se, width: E, height: F }), P = Q, M = 0, z = 0;
         }
         const j = Math.abs(x[D] || 0), U = Math.abs(O[D] || 0);
@@ -9751,18 +9751,18 @@ class B0 extends Bn {
     const { width: o, height: i } = r.canvas, l = function({ channelData: c, width: u, height: h, vScale: A }) {
       const p = h / 2, y = c[0] || [];
       return [y, c[1] || y].map((f, m) => {
-        const k = f.length, E = k ? u / k : 0, b = p, I = m === 0 ? -1 : 1, S = [{ x: 0, y: b }];
+        const k = f.length, E = k ? u / k : 0, I = p, b = m === 0 ? -1 : 1, S = [{ x: 0, y: I }];
         let w = 0, B = 0;
         for (let x = 0; x <= k; x++) {
           const O = Math.round(x * E);
           if (O > w) {
-            const T = b + (Math.round(B * p * A) || 1) * I;
+            const T = I + (Math.round(B * p * A) || 1) * b;
             S.push({ x: w, y: T }), w = O, B = 0;
           }
           const N = Math.abs(f[x] || 0);
           N > B && (B = N);
         }
-        return S.push({ x: w, y: b }), S;
+        return S.push({ x: w, y: I }), S;
       });
     }({ channelData: e, width: o, height: i, vScale: a });
     r.beginPath();
@@ -9813,9 +9813,9 @@ class B0 extends Bn {
       const m = f * h;
       let k = Math.min(u - m, h);
       if (k = la(k, t), k <= 0) return;
-      const E = function({ channelData: b, offset: I, clampedWidth: S, totalWidth: w }) {
-        return b.map((B) => {
-          const x = Math.floor(I / w * B.length), O = Math.floor((I + S) / w * B.length);
+      const E = function({ channelData: I, offset: b, clampedWidth: S, totalWidth: w }) {
+        return I.map((B) => {
+          const x = Math.floor(b / w * B.length), O = Math.floor((b + S) / w * B.length);
           return B.slice(x, O);
         });
       }({ channelData: e, offset: m, clampedWidth: k, totalWidth: u });
@@ -10067,8 +10067,8 @@ class kn extends S0 {
     super({ media: t, mediaControls: e.mediaControls, autoplay: e.autoplay, playbackRate: e.audioRate }), this.plugins = [], this.decodedData = null, this.stopAtPosition = null, this.subscriptions = [], this.mediaSubscriptions = [], this.abortController = null, this.reactiveCleanups = [], this.options = Object.assign({}, N0, e);
     const { state: r, actions: a } = function(l) {
       var c, u, h, A, p, y;
-      const f = (c = l == null ? void 0 : l.currentTime) !== null && c !== void 0 ? c : he(0), m = (u = l == null ? void 0 : l.duration) !== null && u !== void 0 ? u : he(0), k = (h = l == null ? void 0 : l.isPlaying) !== null && h !== void 0 ? h : he(!1), E = (A = l == null ? void 0 : l.isSeeking) !== null && A !== void 0 ? A : he(!1), b = (p = l == null ? void 0 : l.volume) !== null && p !== void 0 ? p : he(1), I = (y = l == null ? void 0 : l.playbackRate) !== null && y !== void 0 ? y : he(1), S = he(null), w = he(null), B = he(""), x = he(0), O = he(0), N = xt(() => !k.value, [k]), T = xt(() => S.value !== null, [S]), P = xt(() => T.value && m.value > 0, [T, m]), M = xt(() => f.value, [f]), z = xt(() => m.value > 0 ? f.value / m.value : 0, [f, m]);
-      return { state: { currentTime: f, duration: m, isPlaying: k, isPaused: N, isSeeking: E, volume: b, playbackRate: I, audioBuffer: S, peaks: w, url: B, zoom: x, scrollPosition: O, canPlay: T, isReady: P, progress: M, progressPercent: z }, actions: { setCurrentTime: (D) => {
+      const f = (c = l == null ? void 0 : l.currentTime) !== null && c !== void 0 ? c : he(0), m = (u = l == null ? void 0 : l.duration) !== null && u !== void 0 ? u : he(0), k = (h = l == null ? void 0 : l.isPlaying) !== null && h !== void 0 ? h : he(!1), E = (A = l == null ? void 0 : l.isSeeking) !== null && A !== void 0 ? A : he(!1), I = (p = l == null ? void 0 : l.volume) !== null && p !== void 0 ? p : he(1), b = (y = l == null ? void 0 : l.playbackRate) !== null && y !== void 0 ? y : he(1), S = he(null), w = he(null), B = he(""), x = he(0), O = he(0), N = xt(() => !k.value, [k]), T = xt(() => S.value !== null, [S]), P = xt(() => T.value && m.value > 0, [T, m]), M = xt(() => f.value, [f]), z = xt(() => m.value > 0 ? f.value / m.value : 0, [f, m]);
+      return { state: { currentTime: f, duration: m, isPlaying: k, isPaused: N, isSeeking: E, volume: I, playbackRate: b, audioBuffer: S, peaks: w, url: B, zoom: x, scrollPosition: O, canPlay: T, isReady: P, progress: M, progressPercent: z }, actions: { setCurrentTime: (D) => {
         const Q = Math.max(0, Math.min(m.value || 1 / 0, D));
         f.set(Q);
       }, setDuration: (D) => {
@@ -10079,10 +10079,10 @@ class kn extends S0 {
         E.set(D);
       }, setVolume: (D) => {
         const Q = Math.max(0, Math.min(1, D));
-        b.set(Q);
+        I.set(Q);
       }, setPlaybackRate: (D) => {
         const Q = Math.max(0.1, Math.min(16, D));
-        I.set(Q);
+        b.set(Q);
       }, setAudioBuffer: (D) => {
         S.set(D), D && m.set(D.duration);
       }, setPeaks: (D) => {
@@ -10460,14 +10460,14 @@ function el({
   classNamesButton: y,
   onPlayStateChange: f
 }) {
-  const [m, k] = K(!1), [E, b] = K(!1), [I, S] = K(!1), [w, B] = K(!1);
+  const [m, k] = K(!1), [E, I] = K(!1), [b, S] = K(!1), [w, B] = K(!1);
   ue(() => {
     typeof navigator < "u" && B(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
   }, []);
   const x = _(() => r, [r]), O = _(() => a ? !1 : !x || x && m, [x, m, a]), N = ne(null), T = ne(null);
   ue(() => {
-    I || (!h || o) && S(!0);
-  }, [h, o, I]);
+    b || (!h || o) && S(!0);
+  }, [h, o, b]);
   const P = R(() => {
     var F;
     T.current && ((F = T.current) == null || F.pause());
@@ -10480,7 +10480,7 @@ function el({
     T.current && n && ((F = T.current) == null || F.load(n));
   }, [n]);
   const z = R((F) => {
-    T.current = F, b(!0), k(!1);
+    T.current = F, I(!0), k(!1);
   }, []), D = R(
     (F) => {
       if (k(!0), t == null || t(!0), f == null || f(!0), c) {
@@ -10943,7 +10943,7 @@ const tS = "_footerVoiceForm_lsc2c_2", nS = {
   onClickUpgradeConcurrency: f,
   onRemoveTrack: m
 }) => {
-  const [k, E] = K(null), [b, I] = K(null), { submitted: S, handleSubmit: w } = Ds(h), [B, x] = K({
+  const [k, E] = K(null), [I, b] = K(null), { submitted: S, handleSubmit: w } = Ds(h), [B, x] = K({
     lastPlayed: null,
     active: null,
     isPlaying: !1,
@@ -10960,12 +10960,12 @@ const tS = "_footerVoiceForm_lsc2c_2", nS = {
     [n, t]
   ), N = R(
     (Q) => {
-      b !== Q && I(Q);
+      I !== Q && b(Q);
     },
-    [b, I]
+    [I, b]
   ), T = R(
     (Q) => {
-      I(null), B.active && B.active.pause(), x((j) => ({
+      b(null), B.active && B.active.pause(), x((j) => ({
         ...j,
         isPlaying: !1,
         active: null
@@ -10997,12 +10997,12 @@ const tS = "_footerVoiceForm_lsc2c_2", nS = {
   return ue(() => {
     var Q;
     if (B.isPlaying === !1)
-      I(null);
+      b(null);
     else if (B.isPlaying === !0 && B.active) {
       const j = (Q = n.find(
         (U) => B.active && U.metadata.previewUrl === B.active.url
       )) == null ? void 0 : Q.identifier;
-      j && I(j);
+      j && b(j);
     }
   }, [B, n]), /* @__PURE__ */ g(C, { direction: "column", height: "100%", children: [
     /* @__PURE__ */ s(
@@ -11011,11 +11011,11 @@ const tS = "_footerVoiceForm_lsc2c_2", nS = {
         voices: n,
         selectedId: k,
         handleSelect: O,
-        playingItem: b,
+        playingItem: I,
         handleAvatarClick: N,
         handleDetailsClick: T,
         wavegroup: P,
-        setPlayingItem: I,
+        setPlayingItem: b,
         style: { display: o ? "none" : "block" },
         i18n: i
       }