@moises.ai/design-system 3.6.22 → 3.6.24

package/dist/index.js

@@ -26,8 +26,8 @@ var jc = [" ", "Enter", "ArrowUp", "ArrowDown"], Wc = [" ", "Enter"], Bt = "Sele
     autoComplete: A,
     disabled: p,
     required: k,
-    form: f
-  } = n, m = Vn(e), [C, E] = d.useState(null), [B, I] = d.useState(null), [S, b] = d.useState(!1), w = ta(u), [Q, O] = xn({
+    form: v
+  } = n, m = Vn(e), [f, E] = d.useState(null), [B, I] = d.useState(null), [S, b] = d.useState(!1), w = ta(u), [Q, O] = xn({
     prop: s,
     defaultProp: a ?? !1,
     onChange: o,
@@ -37,13 +37,13 @@ var jc = [" ", "Enter", "ArrowUp", "ArrowDown"], Wc = [" ", "Enter"], Bt = "Sele
     defaultProp: l,
     onChange: c,
     caller: Bt
-  }), z = d.useRef(null), M = C ? f || !!C.closest("form") : !0, [U, J] = d.useState(/* @__PURE__ */ new Set()), x = Array.from(U).map((L) => L.props.value).join(";");
+  }), z = d.useRef(null), M = f ? v || !!f.closest("form") : !0, [U, J] = d.useState(/* @__PURE__ */ new Set()), x = Array.from(U).map((L) => L.props.value).join(";");
   return /* @__PURE__ */ r(Vi, { ...m, children: /* @__PURE__ */ g(
     Vc,
     {
       required: k,
       scope: e,
-      trigger: C,
+      trigger: f,
       onTriggerChange: E,
       valueNode: B,
       onValueNodeChange: I,
@@ -85,7 +85,7 @@ var jc = [" ", "Enter", "ArrowUp", "ArrowDown"], Wc = [" ", "Enter"], Bt = "Sele
             value: T,
             onChange: (L) => D(L.target.value),
             disabled: p,
-            form: f,
+            form: v,
             children: [
               T === void 0 ? /* @__PURE__ */ r("option", { value: "" }) : null,
               Array.from(U)
@@ -101,9 +101,9 @@ Ia.displayName = Bt;
 var ba = "SelectTrigger", Ba = d.forwardRef(
   (n, e) => {
     const { __scopeSelect: t, disabled: s = !1, ...a } = n, o = Vn(t), i = lt(ba, t), l = i.disabled || s, c = Se(e, i.onTriggerChange), u = Ln(t), h = d.useRef("touch"), [A, p, k] = Xa((m) => {
-      const C = u().filter((I) => !I.disabled), E = C.find((I) => I.value === i.value), B = Ya(C, m, E);
+      const f = u().filter((I) => !I.disabled), E = f.find((I) => I.value === i.value), B = Ya(f, m, E);
       B !== void 0 && i.onValueChange(B.value);
-    }), f = (m) => {
+    }), v = (m) => {
       l || (i.onOpenChange(!0), k()), m && (i.triggerPointerDownPosRef.current = {
         x: Math.round(m.pageX),
         y: Math.round(m.pageY)
@@ -126,16 +126,16 @@ var ba = "SelectTrigger", Ba = d.forwardRef(
         ...a,
         ref: c,
         onClick: ie(a.onClick, (m) => {
-          m.currentTarget.focus(), h.current !== "mouse" && f(m);
+          m.currentTarget.focus(), h.current !== "mouse" && v(m);
         }),
         onPointerDown: ie(a.onPointerDown, (m) => {
           h.current = m.pointerType;
-          const C = m.target;
-          C.hasPointerCapture(m.pointerId) && C.releasePointerCapture(m.pointerId), m.button === 0 && m.ctrlKey === !1 && m.pointerType === "mouse" && (f(m), m.preventDefault());
+          const f = m.target;
+          f.hasPointerCapture(m.pointerId) && f.releasePointerCapture(m.pointerId), m.button === 0 && m.ctrlKey === !1 && m.pointerType === "mouse" && (v(m), m.preventDefault());
         }),
         onKeyDown: ie(a.onKeyDown, (m) => {
-          const C = A.current !== "";
-          !(m.ctrlKey || m.altKey || m.metaKey) && m.key.length === 1 && p(m.key), !(C && m.key === " ") && jc.includes(m.key) && (f(), m.preventDefault());
+          const f = A.current !== "";
+          !(m.ctrlKey || m.altKey || m.metaKey) && m.key.length === 1 && p(m.key), !(f && m.key === " ") && jc.includes(m.key) && (v(), m.preventDefault());
         })
       }
     ) });
@@ -201,9 +201,9 @@ var Me = 10, [Ta, ct] = Lt(wt), Yc = "SelectContentImpl", Zc = tl("SelectContent
       arrowPadding: A,
       collisionBoundary: p,
       collisionPadding: k,
-      sticky: f,
+      sticky: v,
       hideWhenDetached: m,
-      avoidCollisions: C,
+      avoidCollisions: f,
       //
       ...E
     } = n, B = lt(wt, t), [I, S] = d.useState(null), [b, w] = d.useState(null), Q = Se(e, (V) => S(V)), [O, T] = d.useState(null), [D, z] = d.useState(
@@ -272,9 +272,9 @@ var Me = 10, [Ta, ct] = Lt(wt), Yc = "SelectContentImpl", Zc = tl("SelectContent
       arrowPadding: A,
       collisionBoundary: p,
       collisionPadding: k,
-      sticky: f,
+      sticky: v,
       hideWhenDetached: m,
-      avoidCollisions: C
+      avoidCollisions: f
     } : {};
     return /* @__PURE__ */ r(
       Ta,
@@ -356,8 +356,8 @@ var Me = 10, [Ta, ct] = Lt(wt), Yc = "SelectContentImpl", Zc = tl("SelectContent
 );
 Da.displayName = Yc;
 var _c = "SelectItemAlignedPosition", Ja = d.forwardRef((n, e) => {
-  const { __scopeSelect: t, onPlaced: s, ...a } = n, o = lt(wt, t), i = ct(wt, t), [l, c] = d.useState(null), [u, h] = d.useState(null), A = Se(e, (Q) => h(Q)), p = Ln(t), k = d.useRef(!1), f = d.useRef(!0), { viewport: m, selectedItem: C, selectedItemText: E, focusSelectedItem: B } = i, I = d.useCallback(() => {
-    if (o.trigger && o.valueNode && l && u && m && C && E) {
+  const { __scopeSelect: t, onPlaced: s, ...a } = n, o = lt(wt, t), i = ct(wt, t), [l, c] = d.useState(null), [u, h] = d.useState(null), A = Se(e, (Q) => h(Q)), p = Ln(t), k = d.useRef(!1), v = d.useRef(!0), { viewport: m, selectedItem: f, selectedItemText: E, focusSelectedItem: B } = i, I = d.useCallback(() => {
+    if (o.trigger && o.valueNode && l && u && m && f && E) {
       const Q = o.trigger.getBoundingClientRect(), O = u.getBoundingClientRect(), T = o.valueNode.getBoundingClientRect(), D = E.getBoundingClientRect();
       if (o.dir !== "rtl") {
         const te = D.left - O.left, ne = T.left - te, At = Q.left - ne, ht = Q.width + At, is = Math.max(ht, O.width), ls = window.innerWidth - Me, cs = Qn(ne, [
@@ -377,9 +377,9 @@ var _c = "SelectItemAlignedPosition", Ja = d.forwardRef((n, e) => {
         ]);
         l.style.minWidth = ht + "px", l.style.right = cs + "px";
       }
-      const z = p(), M = window.innerHeight - Me * 2, U = m.scrollHeight, J = window.getComputedStyle(u), x = parseInt(J.borderTopWidth, 10), L = parseInt(J.paddingTop, 10), G = parseInt(J.borderBottomWidth, 10), Z = parseInt(J.paddingBottom, 10), R = x + L + U + Z + G, H = Math.min(C.offsetHeight * 5, R), ae = window.getComputedStyle(m), Re = parseInt(ae.paddingTop, 10), xe = parseInt(ae.paddingBottom, 10), Qe = Q.top + Q.height / 2 - Me, le = M - Qe, be = C.offsetHeight / 2, V = C.offsetTop + be, ue = x + L + V, Te = R - ue;
+      const z = p(), M = window.innerHeight - Me * 2, U = m.scrollHeight, J = window.getComputedStyle(u), x = parseInt(J.borderTopWidth, 10), L = parseInt(J.paddingTop, 10), G = parseInt(J.borderBottomWidth, 10), Z = parseInt(J.paddingBottom, 10), R = x + L + U + Z + G, H = Math.min(f.offsetHeight * 5, R), ae = window.getComputedStyle(m), Re = parseInt(ae.paddingTop, 10), xe = parseInt(ae.paddingBottom, 10), Qe = Q.top + Q.height / 2 - Me, le = M - Qe, be = f.offsetHeight / 2, V = f.offsetTop + be, ue = x + L + V, Te = R - ue;
       if (ue <= Qe) {
-        const te = z.length > 0 && C === z[z.length - 1].ref.current;
+        const te = z.length > 0 && f === z[z.length - 1].ref.current;
         l.style.bottom = "0px";
         const ne = u.clientHeight - m.offsetTop - m.offsetHeight, At = Math.max(
           le,
@@ -388,7 +388,7 @@ var _c = "SelectItemAlignedPosition", Ja = d.forwardRef((n, e) => {
         ), ht = ue + At;
         l.style.height = ht + "px";
       } else {
-        const te = z.length > 0 && C === z[0].ref.current;
+        const te = z.length > 0 && f === z[0].ref.current;
         l.style.top = "0px";
         const At = Math.max(
           Qe,
@@ -406,7 +406,7 @@ var _c = "SelectItemAlignedPosition", Ja = d.forwardRef((n, e) => {
     l,
     u,
     m,
-    C,
+    f,
     E,
     o.dir,
     s
@@ -418,7 +418,7 @@ var _c = "SelectItemAlignedPosition", Ja = d.forwardRef((n, e) => {
   }, [u]);
   const w = d.useCallback(
     (Q) => {
-      Q && f.current === !0 && (I(), B == null || B(), f.current = !1);
+      Q && v.current === !0 && (I(), B == null || B(), v.current = !1);
     },
     [I, B]
   );
@@ -527,9 +527,9 @@ var [ed, Zs] = Lt(wt, {}), Ns = "SelectViewport", Pa = d.forwardRef(
             if (p != null && p.current && A) {
               const k = Math.abs(c.current - h.scrollTop);
               if (k > 0) {
-                const f = window.innerHeight - Me * 2, m = parseFloat(A.style.minHeight), C = parseFloat(A.style.height), E = Math.max(m, C);
-                if (E < f) {
-                  const B = E + k, I = Math.min(f, B), S = B - I;
+                const v = window.innerHeight - Me * 2, m = parseFloat(A.style.minHeight), f = parseFloat(A.style.height), E = Math.max(m, f);
+                if (E < v) {
+                  const B = E + k, I = Math.min(v, B), S = B - I;
                   A.style.height = I + "px", A.style.bottom === "0px" && (h.scrollTop = S > 0 ? S : 0, A.style.justifyContent = "flex-end");
                 }
               }
@@ -564,13 +564,13 @@ var Tn = "SelectItem", [sd, Fa] = Lt(Tn), Ha = d.forwardRef(
       disabled: a = !1,
       textValue: o,
       ...i
-    } = n, l = lt(Tn, t), c = ct(Tn, t), u = l.value === s, [h, A] = d.useState(o ?? ""), [p, k] = d.useState(!1), f = Se(
+    } = n, l = lt(Tn, t), c = ct(Tn, t), u = l.value === s, [h, A] = d.useState(o ?? ""), [p, k] = d.useState(!1), v = Se(
       e,
       (B) => {
         var I;
         return (I = c.itemRefCallback) == null ? void 0 : I.call(c, B, s, a);
       }
-    ), m = js(), C = d.useRef("touch"), E = () => {
+    ), m = js(), f = d.useRef("touch"), E = () => {
       a || (l.onValueChange(s), l.onOpenChange(!1));
     };
     if (s === "")
@@ -607,21 +607,21 @@ var Tn = "SelectItem", [sd, Fa] = Lt(Tn), Ha = d.forwardRef(
                 "data-disabled": a ? "" : void 0,
                 tabIndex: a ? void 0 : -1,
                 ...i,
-                ref: f,
+                ref: v,
                 onFocus: ie(i.onFocus, () => k(!0)),
                 onBlur: ie(i.onBlur, () => k(!1)),
                 onClick: ie(i.onClick, () => {
-                  C.current !== "mouse" && E();
+                  f.current !== "mouse" && E();
                 }),
                 onPointerUp: ie(i.onPointerUp, () => {
-                  C.current === "mouse" && E();
+                  f.current === "mouse" && E();
                 }),
                 onPointerDown: ie(i.onPointerDown, (B) => {
-                  C.current = B.pointerType;
+                  f.current = B.pointerType;
                 }),
                 onPointerMove: ie(i.onPointerMove, (B) => {
                   var I;
-                  C.current = B.pointerType, a ? (I = c.onItemLeave) == null || I.call(c) : C.current === "mouse" && B.currentTarget.focus({ preventScroll: !0 });
+                  f.current = B.pointerType, a ? (I = c.onItemLeave) == null || I.call(c) : f.current === "mouse" && B.currentTarget.focus({ preventScroll: !0 });
                 }),
                 onPointerLeave: ie(i.onPointerLeave, (B) => {
                   var I;
@@ -650,11 +650,11 @@ var rn = "SelectItemText", ja = d.forwardRef(
         var B;
         return (B = l.itemTextRefCallback) == null ? void 0 : B.call(l, E, c.value, c.disabled);
       }
-    ), k = h == null ? void 0 : h.textContent, f = d.useMemo(
+    ), k = h == null ? void 0 : h.textContent, v = d.useMemo(
       () => /* @__PURE__ */ r("option", { value: c.value, disabled: c.disabled, children: k }, c.value),
       [c.disabled, c.value, k]
-    ), { onNativeOptionAdd: m, onNativeOptionRemove: C } = u;
-    return ot(() => (m(f), () => C(f)), [m, C, f]), /* @__PURE__ */ g(pe, { children: [
+    ), { onNativeOptionAdd: m, onNativeOptionRemove: f } = u;
+    return ot(() => (m(v), () => f(v)), [m, f, v]), /* @__PURE__ */ g(pe, { children: [
       /* @__PURE__ */ r(fe.span, { id: c.textId, ...o, ref: p }),
       c.isSelected && i.valueNode && !i.valueNodeHasChildren ? Sa.createPortal(o.children, i.valueNode) : null
     ] });
@@ -836,14 +836,14 @@ var dd = Ia, ud = Ba, Ad = Ra, hd = Na, pd = xa, md = Qa, gd = Pa, fd = za, vd =
       onValueCommit: p = () => {
       },
       inverted: k = !1,
-      form: f,
+      form: v,
       ...m
-    } = n, C = d.useRef(/* @__PURE__ */ new Set()), E = d.useRef(0), I = i === "horizontal" ? Bd : wd, [S = [], b] = xn({
+    } = n, f = d.useRef(/* @__PURE__ */ new Set()), E = d.useRef(0), I = i === "horizontal" ? Bd : wd, [S = [], b] = xn({
       prop: h,
       defaultProp: u,
       onChange: (z) => {
         var U;
-        (U = [...C.current][E.current]) == null || U.focus(), A(z);
+        (U = [...f.current][E.current]) == null || U.focus(), A(z);
       }
     }), w = d.useRef(S);
     function Q(z) {
@@ -878,10 +878,10 @@ var dd = Ia, ud = Ba, Ad = Ra, hd = Na, pd = xa, md = Qa, gd = Pa, fd = za, vd =
         min: s,
         max: a,
         valueIndexToChangeRef: E,
-        thumbs: C.current,
+        thumbs: f.current,
         values: S,
         orientation: i,
-        form: f,
+        form: v,
         children: /* @__PURE__ */ r(Ds.Provider, { scope: n.__scopeSlider, children: /* @__PURE__ */ r(Ds.Slot, { scope: n.__scopeSlider, children: /* @__PURE__ */ r(
           I,
           {
@@ -930,10 +930,10 @@ var [no, so] = eo(Vt, {
       onSlideEnd: c,
       onStepKeyDown: u,
       ...h
-    } = n, [A, p] = d.useState(null), k = Se(e, (I) => p(I)), f = d.useRef(void 0), m = ta(a), C = m === "ltr", E = C && !o || !C && o;
+    } = n, [A, p] = d.useState(null), k = Se(e, (I) => p(I)), v = d.useRef(void 0), m = ta(a), f = m === "ltr", E = f && !o || !f && o;
     function B(I) {
-      const S = f.current || A.getBoundingClientRect(), b = [0, S.width], Q = _s(b, E ? [t, s] : [s, t]);
-      return f.current = S, Q(I - S.left);
+      const S = v.current || A.getBoundingClientRect(), b = [0, S.width], Q = _s(b, E ? [t, s] : [s, t]);
+      return v.current = S, Q(I - S.left);
     }
     return /* @__PURE__ */ r(
       no,
@@ -963,7 +963,7 @@ var [no, so] = eo(Vt, {
               l == null || l(S);
             },
             onSlideEnd: () => {
-              f.current = void 0, c == null || c();
+              v.current = void 0, c == null || c();
             },
             onStepKeyDown: (I) => {
               const b = $a[E ? "from-left" : "from-right"].includes(I.key);
@@ -986,9 +986,9 @@ var [no, so] = eo(Vt, {
       onStepKeyDown: c,
       ...u
     } = n, h = d.useRef(null), A = Se(e, h), p = d.useRef(void 0), k = !a;
-    function f(m) {
-      const C = p.current || h.current.getBoundingClientRect(), E = [0, C.height], I = _s(E, k ? [s, t] : [t, s]);
-      return p.current = C, I(m - C.top);
+    function v(m) {
+      const f = p.current || h.current.getBoundingClientRect(), E = [0, f.height], I = _s(E, k ? [s, t] : [t, s]);
+      return p.current = f, I(m - f.top);
     }
     return /* @__PURE__ */ r(
       no,
@@ -1009,12 +1009,12 @@ var [no, so] = eo(Vt, {
               "--radix-slider-thumb-transform": "translateY(50%)"
             },
             onSlideStart: (m) => {
-              const C = f(m.clientY);
-              o == null || o(C);
+              const f = v(m.clientY);
+              o == null || o(f);
             },
             onSlideMove: (m) => {
-              const C = f(m.clientY);
-              i == null || i(C);
+              const f = v(m.clientY);
+              i == null || i(f);
             },
             onSlideEnd: () => {
               p.current = void 0, l == null || l();
@@ -1109,7 +1109,7 @@ var Ps = "SliderThumb", lo = d.forwardRef(
   }
 ), Rd = d.forwardRef(
   (n, e) => {
-    const { __scopeSlider: t, index: s, name: a, ...o } = n, i = qn(Ps, t), l = so(Ps, t), [c, u] = d.useState(null), h = Se(e, (B) => u(B)), A = c ? i.form || !!c.closest("form") : !0, p = rl(c), k = i.values[s], f = k === void 0 ? 0 : uo(k, i.min, i.max), m = Qd(s, i.values.length), C = p == null ? void 0 : p[l.size], E = C ? Dd(C, f, l.direction) : 0;
+    const { __scopeSlider: t, index: s, name: a, ...o } = n, i = qn(Ps, t), l = so(Ps, t), [c, u] = d.useState(null), h = Se(e, (B) => u(B)), A = c ? i.form || !!c.closest("form") : !0, p = rl(c), k = i.values[s], v = k === void 0 ? 0 : uo(k, i.min, i.max), m = Qd(s, i.values.length), f = p == null ? void 0 : p[l.size], E = f ? Dd(f, v, l.direction) : 0;
     return d.useEffect(() => {
       if (c)
         return i.thumbs.add(c), () => {
@@ -1121,7 +1121,7 @@ var Ps = "SliderThumb", lo = d.forwardRef(
         style: {
           transform: "var(--radix-slider-thumb-transform)",
           position: "absolute",
-          [l.startEdge]: `calc(${f}% + ${E}px)`
+          [l.startEdge]: `calc(${v}% + ${E}px)`
         },
         children: [
           /* @__PURE__ */ r(Ds.ItemSlot, { scope: n.__scopeSlider, children: /* @__PURE__ */ r(
@@ -1263,7 +1263,7 @@ var Ao = to, ho = oo, po = io, mo = lo, go = { exports: {} };
   })();
 })(go);
 var Md = go.exports;
-const v = /* @__PURE__ */ Hc(Md), re = { asChild: { type: "boolean" } }, ye = { width: { type: "string", className: "rt-r-w", customProperties: ["--width"], responsive: !0 }, minWidth: { type: "string", className: "rt-r-min-w", customProperties: ["--min-width"], responsive: !0 }, maxWidth: { type: "string", className: "rt-r-max-w", customProperties: ["--max-width"], responsive: !0 } }, qt = { height: { type: "string", className: "rt-r-h", customProperties: ["--height"], responsive: !0 }, minHeight: { type: "string", className: "rt-r-min-h", customProperties: ["--min-height"], responsive: !0 }, maxHeight: { type: "string", className: "rt-r-max-h", customProperties: ["--max-height"], responsive: !0 } }, Od = ["1", "2", "3", "4"], fo = { ...re, align: { type: "enum", className: "rt-r-align", values: ["start", "center"], default: "center" }, size: { type: "enum", className: "rt-r-size", values: Od, default: "3", responsive: !0 }, width: ye.width, minWidth: ye.minWidth, maxWidth: { ...ye.maxWidth, default: "600px" }, ...qt }, vo = ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"], we = { color: { type: "enum", values: vo, default: void 0 } }, Kt = { color: { type: "enum", values: vo, default: "" } }, Ie = { highContrast: { type: "boolean", className: "rt-high-contrast", default: void 0 } }, Fd = ["normal", "start", "end", "both"], Kn = { trim: { type: "enum", className: "rt-r-lt", values: Fd, responsive: !0 } }, Hd = ["left", "center", "right"], Co = { align: { type: "enum", className: "rt-r-ta", values: Hd, responsive: !0 } }, jd = ["wrap", "nowrap", "pretty", "balance"], Nt = { wrap: { type: "enum", className: "rt-r-tw", values: jd, responsive: !0 } }, xt = { truncate: { type: "boolean", className: "rt-truncate" } }, Wd = ["light", "regular", "medium", "bold"], Gn = { weight: { type: "enum", className: "rt-r-weight", values: Wd, responsive: !0 } }, Ld = ["h1", "h2", "h3", "h4", "h5", "h6"], Vd = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], qd = { as: { type: "enum", values: Ld, default: "h1" }, ...re, size: { type: "enum", className: "rt-r-size", values: Vd, default: "6", responsive: !0 }, ...Gn, ...Co, ...Kn, ...xt, ...Nt, ...we, ...Ie }, $s = ["initial", "xs", "sm", "md", "lg", "xl"];
+const C = /* @__PURE__ */ Hc(Md), re = { asChild: { type: "boolean" } }, ye = { width: { type: "string", className: "rt-r-w", customProperties: ["--width"], responsive: !0 }, minWidth: { type: "string", className: "rt-r-min-w", customProperties: ["--min-width"], responsive: !0 }, maxWidth: { type: "string", className: "rt-r-max-w", customProperties: ["--max-width"], responsive: !0 } }, qt = { height: { type: "string", className: "rt-r-h", customProperties: ["--height"], responsive: !0 }, minHeight: { type: "string", className: "rt-r-min-h", customProperties: ["--min-height"], responsive: !0 }, maxHeight: { type: "string", className: "rt-r-max-h", customProperties: ["--max-height"], responsive: !0 } }, Od = ["1", "2", "3", "4"], fo = { ...re, align: { type: "enum", className: "rt-r-align", values: ["start", "center"], default: "center" }, size: { type: "enum", className: "rt-r-size", values: Od, default: "3", responsive: !0 }, width: ye.width, minWidth: ye.minWidth, maxWidth: { ...ye.maxWidth, default: "600px" }, ...qt }, vo = ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"], we = { color: { type: "enum", values: vo, default: void 0 } }, Kt = { color: { type: "enum", values: vo, default: "" } }, Ie = { highContrast: { type: "boolean", className: "rt-high-contrast", default: void 0 } }, Fd = ["normal", "start", "end", "both"], Kn = { trim: { type: "enum", className: "rt-r-lt", values: Fd, responsive: !0 } }, Hd = ["left", "center", "right"], Co = { align: { type: "enum", className: "rt-r-ta", values: Hd, responsive: !0 } }, jd = ["wrap", "nowrap", "pretty", "balance"], Nt = { wrap: { type: "enum", className: "rt-r-tw", values: jd, responsive: !0 } }, xt = { truncate: { type: "boolean", className: "rt-truncate" } }, Wd = ["light", "regular", "medium", "bold"], Gn = { weight: { type: "enum", className: "rt-r-weight", values: Wd, responsive: !0 } }, Ld = ["h1", "h2", "h3", "h4", "h5", "h6"], Vd = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], qd = { as: { type: "enum", values: Ld, default: "h1" }, ...re, size: { type: "enum", className: "rt-r-size", values: Vd, default: "6", responsive: !0 }, ...Gn, ...Co, ...Kn, ...xt, ...Nt, ...we, ...Ie }, $s = ["initial", "xs", "sm", "md", "lg", "xl"];
 function yo(n, e) {
   return Object.prototype.hasOwnProperty.call(n, e);
 }
@@ -1340,30 +1340,30 @@ function F(n, ...e) {
       if (!l || on(l) && !u) continue;
       if (on(l) && (c.default !== void 0 && l.initial === void 0 && (l.initial = c.default), c.type === "enum" && ([c.default, ...c.values].includes(l.initial) || (l.initial = c.default))), c.type === "enum") {
         const h = dn({ allowArbitraryValues: !1, value: l, className: c.className, propValues: c.values, parseValue: c.parseValue });
-        t = v(t, h);
+        t = C(t, h);
         continue;
       }
       if (c.type === "string" || c.type === "enum | string") {
         const h = c.type === "string" ? [] : c.values, [A, p] = nt({ className: c.className, customProperties: c.customProperties, propValues: h, parseValue: c.parseValue, value: l });
-        s = un(s, p), t = v(t, A);
+        s = un(s, p), t = C(t, A);
         continue;
       }
       if (c.type === "boolean" && l) {
-        t = v(t, c.className);
+        t = C(t, c.className);
         continue;
       }
     }
   }
-  return a.className = v(t, n.className), a.style = un(s, n.style), a;
+  return a.className = C(t, n.className), a.style = un(s, n.style), a;
 }
 const pt = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9"], X = { m: { type: "enum | string", values: pt, responsive: !0, className: "rt-r-m", customProperties: ["--m"] }, mx: { type: "enum | string", values: pt, responsive: !0, className: "rt-r-mx", customProperties: ["--ml", "--mr"] }, my: { type: "enum | string", values: pt, responsive: !0, className: "rt-r-my", customProperties: ["--mt", "--mb"] }, mt: { type: "enum | string", values: pt, responsive: !0, className: "rt-r-mt", customProperties: ["--mt"] }, mr: { type: "enum | string", values: pt, responsive: !0, className: "rt-r-mr", customProperties: ["--mr"] }, mb: { type: "enum | string", values: pt, responsive: !0, className: "rt-r-mb", customProperties: ["--mb"] }, ml: { type: "enum | string", values: pt, responsive: !0, className: "rt-r-ml", customProperties: ["--ml"] } }, Xn = d.forwardRef((n, e) => {
   const { children: t, className: s, asChild: a, as: o = "h1", color: i, ...l } = F(n, qd, X);
-  return d.createElement(ve, { "data-accent-color": i, ...l, ref: e, className: v("rt-Heading", s) }, a ? t : d.createElement(o, null, t));
+  return d.createElement(ve, { "data-accent-color": i, ...l, ref: e, className: C("rt-Heading", s) }, a ? t : d.createElement(o, null, t));
 });
 Xn.displayName = "Heading";
 const Xd = ["span", "div", "label", "p"], Yd = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], Zd = { as: { type: "enum", values: Xd, default: "span" }, ...re, size: { type: "enum", className: "rt-r-size", values: Yd, responsive: !0 }, ...Gn, ...Co, ...Kn, ...xt, ...Nt, ...we, ...Ie }, P = d.forwardRef((n, e) => {
   const { children: t, className: s, asChild: a, as: o = "span", color: i, ...l } = F(n, Zd, X);
-  return d.createElement(ve, { "data-accent-color": i, ...l, ref: e, className: v("rt-Text", s) }, a ? t : d.createElement(o, null, t));
+  return d.createElement(ve, { "data-accent-color": i, ...l, ref: e, className: C("rt-Text", s) }, a ? t : d.createElement(o, null, t));
 });
 P.displayName = "Text";
 function _d(n) {
@@ -1416,19 +1416,19 @@ const ko = d.forwardRef((n, e) => {
   d.useEffect(() => A(t), [t]);
   const [p, k] = d.useState(s);
   d.useEffect(() => k(s), [s]);
-  const [f, m] = d.useState(a);
+  const [v, m] = d.useState(a);
   d.useEffect(() => m(a), [a]);
-  const [C, E] = d.useState(o);
+  const [f, E] = d.useState(o);
   d.useEffect(() => E(o), [o]);
   const [B, I] = d.useState(i);
   d.useEffect(() => I(i), [i]);
   const [S, b] = d.useState(l);
-  return d.useEffect(() => b(l), [l]), d.createElement(er, { ...u, ref: e, isRoot: !0, hasBackground: c, appearance: h, accentColor: p, grayColor: f, panelBackground: C, radius: B, scaling: S, onAppearanceChange: A, onAccentColorChange: k, onGrayColorChange: m, onPanelBackgroundChange: E, onRadiusChange: I, onScalingChange: b });
+  return d.useEffect(() => b(l), [l]), d.createElement(er, { ...u, ref: e, isRoot: !0, hasBackground: c, appearance: h, accentColor: p, grayColor: v, panelBackground: f, radius: B, scaling: S, onAppearanceChange: A, onAccentColorChange: k, onGrayColorChange: m, onPanelBackgroundChange: E, onRadiusChange: I, onScalingChange: b });
 });
 ko.displayName = "ThemeRoot";
 const er = d.forwardRef((n, e) => {
-  const t = d.useContext(Dn), { asChild: s, isRoot: a, hasBackground: o, appearance: i = (t == null ? void 0 : t.appearance) ?? Je.appearance.default, accentColor: l = (t == null ? void 0 : t.accentColor) ?? Je.accentColor.default, grayColor: c = (t == null ? void 0 : t.resolvedGrayColor) ?? Je.grayColor.default, panelBackground: u = (t == null ? void 0 : t.panelBackground) ?? Je.panelBackground.default, radius: h = (t == null ? void 0 : t.radius) ?? Je.radius.default, scaling: A = (t == null ? void 0 : t.scaling) ?? Je.scaling.default, onAppearanceChange: p = Tt, onAccentColorChange: k = Tt, onGrayColorChange: f = Tt, onPanelBackgroundChange: m = Tt, onRadiusChange: C = Tt, onScalingChange: E = Tt, ...B } = n, I = s ? ve : "div", S = c === "auto" ? _d(l) : c, b = n.appearance === "light" || n.appearance === "dark", w = o === void 0 ? a || b : o;
-  return d.createElement(Dn.Provider, { value: d.useMemo(() => ({ appearance: i, accentColor: l, grayColor: c, resolvedGrayColor: S, panelBackground: u, radius: h, scaling: A, onAppearanceChange: p, onAccentColorChange: k, onGrayColorChange: f, onPanelBackgroundChange: m, onRadiusChange: C, onScalingChange: E }), [i, l, c, S, u, h, A, p, k, f, m, C, E]) }, d.createElement(I, { "data-is-root-theme": a ? "true" : "false", "data-accent-color": l, "data-gray-color": S, "data-has-background": w ? "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(Dn), { asChild: s, isRoot: a, hasBackground: o, appearance: i = (t == null ? void 0 : t.appearance) ?? Je.appearance.default, accentColor: l = (t == null ? void 0 : t.accentColor) ?? Je.accentColor.default, grayColor: c = (t == null ? void 0 : t.resolvedGrayColor) ?? Je.grayColor.default, panelBackground: u = (t == null ? void 0 : t.panelBackground) ?? Je.panelBackground.default, radius: h = (t == null ? void 0 : t.radius) ?? Je.radius.default, scaling: A = (t == null ? void 0 : t.scaling) ?? Je.scaling.default, onAppearanceChange: p = Tt, onAccentColorChange: k = Tt, onGrayColorChange: v = Tt, onPanelBackgroundChange: m = Tt, onRadiusChange: f = Tt, onScalingChange: E = Tt, ...B } = n, I = s ? ve : "div", S = c === "auto" ? _d(l) : c, b = n.appearance === "light" || n.appearance === "dark", w = o === void 0 ? a || b : o;
+  return d.createElement(Dn.Provider, { value: d.useMemo(() => ({ appearance: i, accentColor: l, grayColor: c, resolvedGrayColor: S, panelBackground: u, radius: h, scaling: A, onAppearanceChange: p, onAccentColorChange: k, onGrayColorChange: v, onPanelBackgroundChange: m, onRadiusChange: f, onScalingChange: E }), [i, l, c, S, u, h, A, p, k, v, m, f, E]) }, d.createElement(I, { "data-is-root-theme": a ? "true" : "false", "data-accent-color": l, "data-gray-color": S, "data-has-background": w ? "true" : "false", "data-panel-background": u, "data-radius": h, "data-scaling": A, ref: e, ...B, className: C("radix-themes", { light: i === "light", dark: i === "dark" }, B.className) }));
 });
 er.displayName = "ThemeImpl";
 const ut = (n) => {
@@ -1440,7 +1440,7 @@ const So = d.forwardRef(({ children: n, ...e }, t) => d.createElement(pl, { ...e
 So.displayName = "AlertDialog.Trigger";
 const Io = d.forwardRef(({ align: n, ...e }, t) => {
   const { align: s, ...a } = fo, { className: o } = F({ align: n }, { align: s }), { className: i, forceMount: l, container: c, ...u } = F(e, a);
-  return d.createElement(ll, { container: c, forceMount: l }, d.createElement(dt, { asChild: !0 }, d.createElement(cl, { className: "rt-BaseDialogOverlay rt-AlertDialogOverlay" }, d.createElement("div", { className: "rt-BaseDialogScroll rt-AlertDialogScroll" }, d.createElement("div", { className: `rt-BaseDialogScrollPadding rt-AlertDialogScrollPadding ${o}` }, d.createElement(dl, { ...u, ref: t, className: v("rt-BaseDialogContent", "rt-AlertDialogContent", i) }))))));
+  return d.createElement(ll, { container: c, forceMount: l }, d.createElement(dt, { asChild: !0 }, d.createElement(cl, { className: "rt-BaseDialogOverlay rt-AlertDialogOverlay" }, d.createElement("div", { className: "rt-BaseDialogScroll rt-AlertDialogScroll" }, d.createElement("div", { className: `rt-BaseDialogScrollPadding rt-AlertDialogScrollPadding ${o}` }, d.createElement(dl, { ...u, ref: t, className: C("rt-BaseDialogContent", "rt-AlertDialogContent", i) }))))));
 });
 Io.displayName = "AlertDialog.Content";
 const bo = d.forwardRef((n, e) => d.createElement(hl, { asChild: !0 }, d.createElement(Xn, { size: "5", mb: "3", trim: "start", ...n, asChild: !1, ref: e })));
@@ -1469,12 +1469,12 @@ function tr(n, e) {
 }
 const We = d.forwardRef((n, e) => {
   const { asChild: t, children: s, className: a, style: o, color: i, radius: l, ...c } = F(n, su, X);
-  return d.createElement(gl, { "data-accent-color": i, "data-radius": l, className: v("rt-reset", "rt-AvatarRoot", a), style: o, asChild: t }, tr({ asChild: t, children: s }, d.createElement(No, { ref: e, ...c })));
+  return d.createElement(gl, { "data-accent-color": i, "data-radius": l, className: C("rt-reset", "rt-AvatarRoot", a), style: o, asChild: t }, tr({ asChild: t, children: s }, d.createElement(No, { ref: e, ...c })));
 });
 We.displayName = "Avatar";
 const No = d.forwardRef(({ fallback: n, ...e }, t) => {
   const [s, a] = d.useState("idle");
-  return d.createElement(d.Fragment, null, s === "idle" || s === "loading" ? d.createElement("span", { className: "rt-AvatarFallback" }) : null, s === "error" ? d.createElement(fl, { className: v("rt-AvatarFallback", { "rt-one-letter": typeof n == "string" && n.length === 1, "rt-two-letters": typeof n == "string" && n.length === 2 }), delayMs: 0 }, n) : null, d.createElement(vl, { ref: t, className: "rt-AvatarImage", ...e, onLoadingStatusChange: (o) => {
+  return d.createElement(d.Fragment, null, s === "idle" || s === "loading" ? d.createElement("span", { className: "rt-AvatarFallback" }) : null, s === "error" ? d.createElement(fl, { className: C("rt-AvatarFallback", { "rt-one-letter": typeof n == "string" && n.length === 1, "rt-two-letters": typeof n == "string" && n.length === 2 }), delayMs: 0 }, n) : null, d.createElement(vl, { ref: t, className: "rt-AvatarImage", ...e, onLoadingStatusChange: (o) => {
     var i;
     (i = e.onLoadingStatusChange) == null || i.call(e, o), a(o);
   } }));
@@ -1482,17 +1482,17 @@ const No = d.forwardRef(({ fallback: n, ...e }, t) => {
 No.displayName = "AvatarImpl";
 const ru = ["1", "2", "3"], au = ["solid", "soft", "surface", "outline"], ou = { ...re, size: { type: "enum", className: "rt-r-size", values: ru, default: "1", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: au, default: "soft" }, ...Kt, ...Ie, ...Le }, nr = d.forwardRef((n, e) => {
   const { asChild: t, className: s, color: a, radius: o, ...i } = F(n, ou, X), l = t ? ve : "span";
-  return d.createElement(l, { "data-accent-color": a, "data-radius": o, ...i, ref: e, className: v("rt-reset", "rt-Badge", s) });
+  return d.createElement(l, { "data-accent-color": a, "data-radius": o, ...i, ref: e, className: C("rt-reset", "rt-Badge", s) });
 });
 nr.displayName = "Badge";
 const iu = d.forwardRef((n, e) => {
   const { asChild: t, children: s, className: a, ...o } = n, i = t ? ve : "blockquote";
-  return d.createElement(P, { asChild: !0, ...o, ref: e, className: v("rt-Blockquote", a) }, d.createElement(i, null, s));
+  return d.createElement(P, { asChild: !0, ...o, ref: e, className: C("rt-Blockquote", a) }, d.createElement(i, null, s));
 });
 iu.displayName = "Blockquote";
 const sr = ve, lu = ["div", "span"], cu = ["none", "inline", "inline-block", "block", "contents"], du = { as: { type: "enum", values: lu, default: "div" }, ...re, display: { type: "enum", className: "rt-r-display", values: cu, responsive: !0 } }, mt = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], ln = { p: { type: "enum | string", className: "rt-r-p", customProperties: ["--p"], values: mt, responsive: !0 }, px: { type: "enum | string", className: "rt-r-px", customProperties: ["--pl", "--pr"], values: mt, responsive: !0 }, py: { type: "enum | string", className: "rt-r-py", customProperties: ["--pt", "--pb"], values: mt, responsive: !0 }, pt: { type: "enum | string", className: "rt-r-pt", customProperties: ["--pt"], values: mt, responsive: !0 }, pr: { type: "enum | string", className: "rt-r-pr", customProperties: ["--pr"], values: mt, responsive: !0 }, pb: { type: "enum | string", className: "rt-r-pb", customProperties: ["--pb"], values: mt, responsive: !0 }, pl: { type: "enum | string", className: "rt-r-pl", customProperties: ["--pl"], values: mt, responsive: !0 } }, ds = ["visible", "hidden", "clip", "scroll", "auto"], uu = ["static", "relative", "absolute", "fixed", "sticky"], Xt = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", "-9"], Au = ["0", "1"], hu = ["0", "1"], pn = { ...ln, ...ye, ...qt, position: { type: "enum", className: "rt-r-position", values: uu, responsive: !0 }, inset: { type: "enum | string", className: "rt-r-inset", customProperties: ["--inset"], values: Xt, responsive: !0 }, top: { type: "enum | string", className: "rt-r-top", customProperties: ["--top"], values: Xt, responsive: !0 }, right: { type: "enum | string", className: "rt-r-right", customProperties: ["--right"], values: Xt, responsive: !0 }, bottom: { type: "enum | string", className: "rt-r-bottom", customProperties: ["--bottom"], values: Xt, responsive: !0 }, left: { type: "enum | string", className: "rt-r-left", customProperties: ["--left"], values: Xt, responsive: !0 }, overflow: { type: "enum", className: "rt-r-overflow", values: ds, responsive: !0 }, overflowX: { type: "enum", className: "rt-r-ox", values: ds, responsive: !0 }, overflowY: { type: "enum", className: "rt-r-oy", values: ds, responsive: !0 }, flexBasis: { type: "string", className: "rt-r-fb", customProperties: ["--flex-basis"], responsive: !0 }, flexShrink: { type: "enum | string", className: "rt-r-fs", customProperties: ["--flex-shrink"], values: Au, responsive: !0 }, flexGrow: { type: "enum | string", className: "rt-r-fg", customProperties: ["--flex-grow"], values: hu, responsive: !0 }, gridArea: { type: "string", className: "rt-r-ga", customProperties: ["--grid-area"], responsive: !0 }, gridColumn: { type: "string", className: "rt-r-gc", customProperties: ["--grid-column"], responsive: !0 }, gridColumnStart: { type: "string", className: "rt-r-gcs", customProperties: ["--grid-column-start"], responsive: !0 }, gridColumnEnd: { type: "string", className: "rt-r-gce", customProperties: ["--grid-column-end"], responsive: !0 }, gridRow: { type: "string", className: "rt-r-gr", customProperties: ["--grid-row"], responsive: !0 }, gridRowStart: { type: "string", className: "rt-r-grs", customProperties: ["--grid-row-start"], responsive: !0 }, gridRowEnd: { type: "string", className: "rt-r-gre", customProperties: ["--grid-row-end"], responsive: !0 } }, he = d.forwardRef((n, e) => {
   const { className: t, asChild: s, as: a = "div", ...o } = F(n, du, pn, X);
-  return d.createElement(s ? sr : a, { ...o, ref: e, className: v("rt-Box", t) });
+  return d.createElement(s ? sr : a, { ...o, ref: e, className: C("rt-Box", t) });
 });
 he.displayName = "Box";
 const pu = ["1", "2", "3", "4"], mu = ["classic", "solid", "soft", "surface", "outline", "ghost"], Tr = { ...re, size: { type: "enum", className: "rt-r-size", values: pu, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: mu, default: "solid" }, ...Kt, ...Ie, ...Le, loading: { type: "boolean", className: "rt-loading", default: !1 } }, us = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], xo = { gap: { type: "enum | string", className: "rt-r-gap", customProperties: ["--gap"], values: us, responsive: !0 }, gapX: { type: "enum | string", className: "rt-r-cg", customProperties: ["--column-gap"], values: us, responsive: !0 }, gapY: { type: "enum | string", className: "rt-r-rg", customProperties: ["--row-gap"], values: us, responsive: !0 } }, gu = ["div", "span"], fu = ["none", "inline-flex", "flex"], vu = ["row", "column", "row-reverse", "column-reverse"], Cu = ["start", "center", "end", "baseline", "stretch"], yu = ["start", "center", "end", "between"], ku = ["nowrap", "wrap", "wrap-reverse"], Qo = { as: { type: "enum", values: gu, default: "div" }, ...re, display: { type: "enum", className: "rt-r-display", values: fu, responsive: !0 }, direction: { type: "enum", className: "rt-r-fd", values: vu, responsive: !0 }, align: { type: "enum", className: "rt-r-ai", values: Cu, responsive: !0 }, justify: { type: "enum", className: "rt-r-jc", values: yu, parseValue: Eu, responsive: !0 }, wrap: { type: "enum", className: "rt-r-fw", values: ku, responsive: !0 }, ...xo };
@@ -1501,13 +1501,13 @@ function Eu(n) {
 }
 const y = d.forwardRef((n, e) => {
   const { className: t, asChild: s, as: a = "div", ...o } = F(n, Qo, pn, X);
-  return d.createElement(s ? sr : a, { ...o, ref: e, className: v("rt-Flex", t) });
+  return d.createElement(s ? sr : a, { ...o, ref: e, className: C("rt-Flex", t) });
 });
 y.displayName = "Flex";
 const Su = ["1", "2", "3"], Iu = { size: { type: "enum", className: "rt-r-size", values: Su, default: "2", responsive: !0 }, loading: { type: "boolean", default: !0 } }, rr = d.forwardRef((n, e) => {
   const { className: t, children: s, loading: a, ...o } = F(n, Iu, X);
   if (!a) return s;
-  const i = d.createElement("span", { ...o, ref: e, className: v("rt-Spinner", t) }, d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }));
+  const i = d.createElement("span", { ...o, ref: e, className: C("rt-Spinner", t) }, d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }), d.createElement("span", { className: "rt-SpinnerLeaf" }));
   return s === void 0 ? i : d.createElement(y, { asChild: !0, position: "relative", align: "center", justify: "center" }, d.createElement("span", null, d.createElement("span", { "aria-hidden": !0, style: { display: "contents", visibility: "hidden" }, inert: void 0 }, s), d.createElement(y, { asChild: !0, align: "center", justify: "center", position: "absolute", inset: "0" }, d.createElement("span", null, i))));
 });
 rr.displayName = "Spinner";
@@ -1531,26 +1531,26 @@ function wu(n) {
 }
 const ar = d.forwardRef((n, e) => {
   const { size: t = Tr.size.default } = n, { className: s, children: a, asChild: o, color: i, radius: l, disabled: c = n.loading, ...u } = F(n, Tr, X), h = o ? ve : "button";
-  return d.createElement(h, { "data-disabled": c || void 0, "data-accent-color": i, "data-radius": l, ...u, ref: e, className: v("rt-reset", "rt-BaseButton", s), disabled: c }, n.loading ? d.createElement(d.Fragment, null, d.createElement("span", { style: { display: "contents", visibility: "hidden" }, "aria-hidden": !0 }, a), d.createElement(bu, null, a), d.createElement(y, { asChild: !0, align: "center", justify: "center", position: "absolute", inset: "0" }, d.createElement("span", null, d.createElement(rr, { size: To(t, wu) })))) : a);
+  return d.createElement(h, { "data-disabled": c || void 0, "data-accent-color": i, "data-radius": l, ...u, ref: e, className: C("rt-reset", "rt-BaseButton", s), disabled: c }, n.loading ? d.createElement(d.Fragment, null, d.createElement("span", { style: { display: "contents", visibility: "hidden" }, "aria-hidden": !0 }, a), d.createElement(bu, null, a), d.createElement(y, { asChild: !0, align: "center", justify: "center", position: "absolute", inset: "0" }, d.createElement("span", null, d.createElement(rr, { size: To(t, wu) })))) : a);
 });
 ar.displayName = "BaseButton";
-const Do = d.forwardRef(({ className: n, ...e }, t) => d.createElement(ar, { ...e, ref: t, className: v("rt-Button", n) }));
+const Do = d.forwardRef(({ className: n, ...e }, t) => d.createElement(ar, { ...e, ref: t, className: C("rt-Button", n) }));
 Do.displayName = "Button";
 const Ru = ["1", "2", "3"], Nu = ["soft", "surface", "outline"], Dr = { ...re, size: { type: "enum", className: "rt-r-size", values: Ru, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: Nu, default: "soft" }, ...Kt, ...Ie }, Jo = d.createContext({}), or = d.forwardRef((n, e) => {
   const { size: t = Dr.size.default } = n, { asChild: s, children: a, className: o, color: i, ...l } = F(n, Dr, X), c = s ? ve : "div";
-  return d.createElement(c, { "data-accent-color": i, ...l, className: v("rt-CalloutRoot", o), ref: e }, d.createElement(Jo.Provider, { value: d.useMemo(() => ({ size: t }), [t]) }, a));
+  return d.createElement(c, { "data-accent-color": i, ...l, className: C("rt-CalloutRoot", o), ref: e }, d.createElement(Jo.Provider, { value: d.useMemo(() => ({ size: t }), [t]) }, a));
 });
 or.displayName = "Callout.Root";
-const ir = d.forwardRef(({ className: n, ...e }, t) => d.createElement("div", { ...e, className: v("rt-CalloutIcon", n), ref: t }));
+const ir = d.forwardRef(({ className: n, ...e }, t) => d.createElement("div", { ...e, className: C("rt-CalloutIcon", n), ref: t }));
 ir.displayName = "Callout.Icon";
 const lr = d.forwardRef(({ className: n, ...e }, t) => {
   const { size: s } = d.useContext(Jo);
-  return d.createElement(P, { as: "p", size: To(s, Bu), ...e, asChild: !1, ref: t, className: v("rt-CalloutText", n) });
+  return d.createElement(P, { as: "p", size: To(s, Bu), ...e, asChild: !1, ref: t, className: C("rt-CalloutText", n) });
 });
 lr.displayName = "Callout.Text";
 const xu = ["1", "2", "3", "4", "5"], Qu = ["surface", "classic", "ghost"], Tu = { ...re, size: { type: "enum", className: "rt-r-size", values: xu, default: "1", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: Qu, default: "surface" } }, cr = d.forwardRef((n, e) => {
   const { asChild: t, className: s, ...a } = F(n, Tu, X), o = t ? ve : "div";
-  return d.createElement(o, { ref: e, ...a, className: v("rt-reset", "rt-BaseCard", "rt-Card", s) });
+  return d.createElement(o, { ref: e, ...a, className: C("rt-reset", "rt-BaseCard", "rt-Card", s) });
 });
 cr.displayName = "Card";
 const Du = ["div", "span"], Ju = ["none", "inline-grid", "grid"], Pu = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], Uu = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], zu = ["row", "column", "dense", "row-dense", "column-dense"], Mu = ["start", "center", "end", "baseline", "stretch"], Ou = ["start", "center", "end", "between"], Jn = { as: { type: "enum", values: Du, default: "div" }, ...re, display: { type: "enum", className: "rt-r-display", values: Ju, responsive: !0 }, areas: { type: "string", className: "rt-r-gta", customProperties: ["--grid-template-areas"], responsive: !0 }, columns: { type: "enum | string", className: "rt-r-gtc", customProperties: ["--grid-template-columns"], values: Pu, parseValue: Jr, responsive: !0 }, rows: { type: "enum | string", className: "rt-r-gtr", customProperties: ["--grid-template-rows"], values: Uu, parseValue: Jr, responsive: !0 }, flow: { type: "enum", className: "rt-r-gaf", values: zu, responsive: !0 }, align: { type: "enum", className: "rt-r-ai", values: Mu, responsive: !0 }, justify: { type: "enum", className: "rt-r-jc", values: Ou, parseValue: Fu, responsive: !0 }, ...xo };
@@ -1562,7 +1562,7 @@ function Fu(n) {
 }
 const Po = d.forwardRef((n, e) => {
   const { className: t, asChild: s, as: a = "div", ...o } = F(n, Jn, pn, X);
-  return d.createElement(s ? sr : a, { ...o, ref: e, className: v("rt-Grid", t) });
+  return d.createElement(s ? sr : a, { ...o, ref: e, className: C("rt-Grid", t) });
 });
 Po.displayName = "Grid";
 const Hu = ge.forwardRef((n, e) => ge.createElement("svg", { width: "9", height: "9", viewBox: "0 0 9 9", fill: "currentcolor", xmlns: "http://www.w3.org/2000/svg", ...n, ref: e }, ge.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z" })));
@@ -1575,7 +1575,7 @@ const ju = ge.forwardRef((n, e) => ge.createElement("svg", { width: "9", height:
 ju.displayName = "ThickChevronRightIcon";
 const Wu = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], Lu = ["solid", "soft", "outline", "ghost"], Vu = { ...re, size: { type: "enum", className: "rt-r-size", values: Wu, responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: Lu, default: "soft" }, ...Gn, ...Kt, ...Ie, ...xt, ...Nt }, qu = d.forwardRef((n, e) => {
   const { asChild: t, className: s, color: a, ...o } = F(n, Vu, X), i = n.variant === "ghost" ? a || void 0 : a, l = t ? ve : "code";
-  return d.createElement(l, { "data-accent-color": i, ...o, ref: e, className: v("rt-reset", "rt-Code", s) });
+  return d.createElement(l, { "data-accent-color": i, ...o, ref: e, className: C("rt-reset", "rt-Code", s) });
 });
 qu.displayName = "Code";
 const Ku = ["1", "2", "3", "4"], Gu = ["none", "initial"], Xu = ["left", "center", "right"], Yu = { ...re, size: { type: "enum", className: "rt-r-size", values: Ku, default: "4", responsive: !0 }, display: { type: "enum", className: "rt-r-display", values: Gu, parseValue: Zu, responsive: !0 }, align: { type: "enum", className: "rt-r-ai", values: Xu, parseValue: _u, responsive: !0 } };
@@ -1586,8 +1586,8 @@ function _u(n) {
   return n === "left" ? "start" : n === "right" ? "end" : n;
 }
 const $u = d.forwardRef(({ width: n, minWidth: e, maxWidth: t, height: s, minHeight: a, maxHeight: o, ...i }, l) => {
-  const { asChild: c, children: u, className: h, ...A } = F(i, Yu, pn, X), { className: p, style: k } = F({ width: n, minWidth: e, maxWidth: t, height: s, minHeight: a, maxHeight: o }, ye, qt), f = c ? ve : "div";
-  return d.createElement(f, { ...A, ref: l, className: v("rt-Container", h) }, tr({ asChild: c, children: u }, (m) => d.createElement("div", { className: v("rt-ContainerInner", p), style: k }, m)));
+  const { asChild: c, children: u, className: h, ...A } = F(i, Yu, pn, X), { className: p, style: k } = F({ width: n, minWidth: e, maxWidth: t, height: s, minHeight: a, maxHeight: o }, ye, qt), v = c ? ve : "div";
+  return d.createElement(v, { ...A, ref: l, className: C("rt-Container", h) }, tr({ asChild: c, children: u }, (m) => d.createElement("div", { className: C("rt-ContainerInner", p), style: k }, m)));
 });
 $u.displayName = "Container";
 const eA = ["1", "2", "3"], Yt = { ...re, size: { values: eA, default: "1" }, ...Le, scrollbars: { default: "both" } };
@@ -1597,30 +1597,30 @@ function tA(n) {
 }
 const gt = X.m.values;
 function nA(n) {
-  const [e, t] = nt({ className: "rt-r-m", customProperties: ["--margin"], propValues: gt, value: n.m }), [s, a] = nt({ className: "rt-r-mx", customProperties: ["--margin-left", "--margin-right"], propValues: gt, value: n.mx }), [o, i] = nt({ className: "rt-r-my", customProperties: ["--margin-top", "--margin-bottom"], propValues: gt, value: n.my }), [l, c] = nt({ className: "rt-r-mt", customProperties: ["--margin-top"], propValues: gt, value: n.mt }), [u, h] = nt({ className: "rt-r-mr", customProperties: ["--margin-right"], propValues: gt, value: n.mr }), [A, p] = nt({ className: "rt-r-mb", customProperties: ["--margin-bottom"], propValues: gt, value: n.mb }), [k, f] = nt({ className: "rt-r-ml", customProperties: ["--margin-left"], propValues: gt, value: n.ml });
-  return [v(e, s, o, l, u, A, k), un(t, a, i, c, h, p, f)];
+  const [e, t] = nt({ className: "rt-r-m", customProperties: ["--margin"], propValues: gt, value: n.m }), [s, a] = nt({ className: "rt-r-mx", customProperties: ["--margin-left", "--margin-right"], propValues: gt, value: n.mx }), [o, i] = nt({ className: "rt-r-my", customProperties: ["--margin-top", "--margin-bottom"], propValues: gt, value: n.my }), [l, c] = nt({ className: "rt-r-mt", customProperties: ["--margin-top"], propValues: gt, value: n.mt }), [u, h] = nt({ className: "rt-r-mr", customProperties: ["--margin-right"], propValues: gt, value: n.mr }), [A, p] = nt({ className: "rt-r-mb", customProperties: ["--margin-bottom"], propValues: gt, value: n.mb }), [k, v] = nt({ className: "rt-r-ml", customProperties: ["--margin-left"], propValues: gt, value: n.ml });
+  return [C(e, s, o, l, u, A, k), un(t, a, i, c, h, p, v)];
 }
 const Qt = d.forwardRef((n, e) => {
-  const { rest: t, ...s } = tA(n), [a, o] = nA(s), { asChild: i, children: l, className: c, style: u, type: h, scrollHideDelay: A = h !== "scroll" ? 0 : void 0, dir: p, size: k = Yt.size.default, radius: f = Yt.radius.default, scrollbars: m = Yt.scrollbars.default, ...C } = t;
-  return d.createElement(aa, { type: h, scrollHideDelay: A, className: v("rt-ScrollAreaRoot", a, c), style: un(o, u), asChild: i }, tr({ asChild: i, children: l }, (E) => d.createElement(d.Fragment, null, d.createElement(oa, { ...C, ref: e, className: "rt-ScrollAreaViewport" }, E), d.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), m !== "vertical" ? d.createElement(Es, { "data-radius": f, orientation: "horizontal", className: v("rt-ScrollAreaScrollbar", dn({ className: "rt-r-size", value: k, propValues: Yt.size.values })) }, d.createElement(Ss, { className: "rt-ScrollAreaThumb" })) : null, m !== "horizontal" ? d.createElement(Es, { "data-radius": f, orientation: "vertical", className: v("rt-ScrollAreaScrollbar", dn({ className: "rt-r-size", value: k, propValues: Yt.size.values })) }, d.createElement(Ss, { className: "rt-ScrollAreaThumb" })) : null, m === "both" ? d.createElement(yl, { className: "rt-ScrollAreaCorner" }) : null)));
+  const { rest: t, ...s } = tA(n), [a, o] = nA(s), { asChild: i, children: l, className: c, style: u, type: h, scrollHideDelay: A = h !== "scroll" ? 0 : void 0, dir: p, size: k = Yt.size.default, radius: v = Yt.radius.default, scrollbars: m = Yt.scrollbars.default, ...f } = t;
+  return d.createElement(aa, { type: h, scrollHideDelay: A, className: C("rt-ScrollAreaRoot", a, c), style: un(o, u), asChild: i }, tr({ asChild: i, children: l }, (E) => d.createElement(d.Fragment, null, d.createElement(oa, { ...f, ref: e, className: "rt-ScrollAreaViewport" }, E), d.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), m !== "vertical" ? d.createElement(Es, { "data-radius": v, orientation: "horizontal", className: C("rt-ScrollAreaScrollbar", dn({ className: "rt-r-size", value: k, propValues: Yt.size.values })) }, d.createElement(Ss, { className: "rt-ScrollAreaThumb" })) : null, m !== "horizontal" ? d.createElement(Es, { "data-radius": v, orientation: "vertical", className: C("rt-ScrollAreaScrollbar", dn({ className: "rt-r-size", value: k, propValues: Yt.size.values })) }, d.createElement(Ss, { className: "rt-ScrollAreaThumb" })) : null, m === "both" ? d.createElement(yl, { className: "rt-ScrollAreaCorner" }) : null)));
 });
 Qt.displayName = "ScrollArea";
 const sA = ["start", "center", "end", "baseline", "stretch"], rA = ["horizontal", "vertical"], aA = ["1", "2", "3"], oA = { orientation: { type: "enum", className: "rt-r-orientation", values: rA, default: "horizontal", responsive: !0 }, size: { type: "enum", className: "rt-r-size", values: aA, default: "2", responsive: !0 }, trim: { ...Kn.trim, className: "rt-r-trim" } }, iA = { align: { type: "enum", className: "rt-r-ai", values: sA, responsive: !0 } }, lA = { ...ye, ...we, ...Ie }, Mo = d.forwardRef((n, e) => {
   const { className: t, ...s } = F(n, oA, X);
-  return d.createElement(P, { asChild: !0 }, d.createElement("dl", { ...s, ref: e, className: v("rt-DataListRoot", t) }));
+  return d.createElement(P, { asChild: !0 }, d.createElement("dl", { ...s, ref: e, className: C("rt-DataListRoot", t) }));
 });
 Mo.displayName = "DataList.Root";
 const Oo = d.forwardRef((n, e) => {
   const { className: t, ...s } = F(n, iA);
-  return d.createElement("div", { ...s, ref: e, className: v("rt-DataListItem", t) });
+  return d.createElement("div", { ...s, ref: e, className: C("rt-DataListItem", t) });
 });
 Oo.displayName = "DataList.Item";
 const Fo = d.forwardRef((n, e) => {
   const { className: t, color: s, ...a } = F(n, lA);
-  return d.createElement("dt", { ...a, "data-accent-color": s, ref: e, className: v("rt-DataListLabel", t) });
+  return d.createElement("dt", { ...a, "data-accent-color": s, ref: e, className: C("rt-DataListLabel", t) });
 });
 Fo.displayName = "DataList.Label";
-const Ho = d.forwardRef(({ children: n, className: e, ...t }, s) => d.createElement("dd", { ...t, ref: s, className: v(e, "rt-DataListValue") }, n));
+const Ho = d.forwardRef(({ children: n, className: e, ...t }, s) => d.createElement("dd", { ...t, ref: s, className: C(e, "rt-DataListValue") }, n));
 Ho.displayName = "DataList.Value";
 const PS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -1634,7 +1634,7 @@ const Wo = d.forwardRef(({ children: n, ...e }, t) => d.createElement(Rl, { ...e
 Wo.displayName = "Dialog.Trigger";
 const Lo = d.forwardRef(({ align: n, ...e }, t) => {
   const { align: s, ...a } = fo, { className: o } = F({ align: n }, { align: s }), { className: i, forceMount: l, container: c, ...u } = F(e, a);
-  return d.createElement(El, { container: c, forceMount: l }, d.createElement(dt, { asChild: !0 }, d.createElement(Sl, { className: "rt-BaseDialogOverlay rt-DialogOverlay" }, d.createElement("div", { className: "rt-BaseDialogScroll rt-DialogScroll" }, d.createElement("div", { className: `rt-BaseDialogScrollPadding rt-DialogScrollPadding ${o}` }, d.createElement(Il, { ...u, ref: t, className: v("rt-BaseDialogContent", "rt-DialogContent", i) }))))));
+  return d.createElement(El, { container: c, forceMount: l }, d.createElement(dt, { asChild: !0 }, d.createElement(Sl, { className: "rt-BaseDialogOverlay rt-DialogOverlay" }, d.createElement("div", { className: "rt-BaseDialogScroll rt-DialogScroll" }, d.createElement("div", { className: `rt-BaseDialogScrollPadding rt-DialogScrollPadding ${o}` }, d.createElement(Il, { ...u, ref: t, className: C("rt-BaseDialogContent", "rt-DialogContent", i) }))))));
 });
 Lo.displayName = "Dialog.Content";
 const Vo = d.forwardRef((n, e) => d.createElement(wl, { asChild: !0 }, d.createElement(Xn, { size: "5", mb: "3", trim: "start", ...n, asChild: !1, ref: e })));
@@ -1653,16 +1653,16 @@ const US = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Trigger: Wo
 }, Symbol.toStringTag, { value: "Module" })), cA = { ...re, ...xt, ...Nt }, dA = d.forwardRef((n, e) => {
   const { asChild: t, className: s, ...a } = F(n, cA), o = t ? ve : "em";
-  return d.createElement(o, { ...a, ref: e, className: v("rt-Em", s) });
+  return d.createElement(o, { ...a, ref: e, className: C("rt-Em", s) });
 });
 dA.displayName = "Em";
 const uA = ["1", "2", "3"], AA = { ...re, size: { type: "enum", className: "rt-r-size", values: uA, default: "2", responsive: !0 }, width: ye.width, minWidth: ye.minWidth, maxWidth: { ...ye.maxWidth, default: "480px" }, ...qt }, Go = (n) => d.createElement(Ql, { closeDelay: 150, openDelay: 200, ...n });
 Go.displayName = "HoverCard.Root";
-const Xo = d.forwardRef(({ children: n, className: e, ...t }, s) => d.createElement(Tl, { ref: s, className: v("rt-HoverCardTrigger", e), ...t, asChild: !0 }, ut(n)));
+const Xo = d.forwardRef(({ children: n, className: e, ...t }, s) => d.createElement(Tl, { ref: s, className: C("rt-HoverCardTrigger", e), ...t, asChild: !0 }, ut(n)));
 Xo.displayName = "HoverCard.Trigger";
 const Yo = d.forwardRef((n, e) => {
   const { className: t, forceMount: s, container: a, ...o } = F(n, AA);
-  return d.createElement(Nl, { container: a, forceMount: s }, d.createElement(dt, { asChild: !0 }, d.createElement(xl, { align: "start", sideOffset: 8, collisionPadding: 10, ...o, ref: e, className: v("rt-PopperContent", "rt-HoverCardContent", t) })));
+  return d.createElement(Nl, { container: a, forceMount: s }, d.createElement(dt, { asChild: !0 }, d.createElement(xl, { align: "start", sideOffset: 8, collisionPadding: 10, ...o, ref: e, className: C("rt-PopperContent", "rt-HoverCardContent", t) })));
 });
 Yo.displayName = "HoverCard.Content";
 const zS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -1670,7 +1670,7 @@ const zS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Content: Yo,
   Root: Go,
   Trigger: Xo
-}, Symbol.toStringTag, { value: "Module" })), dr = d.forwardRef(({ className: n, ...e }, t) => d.createElement(ar, { ...e, ref: t, className: v("rt-IconButton", n) }));
+}, Symbol.toStringTag, { value: "Module" })), dr = d.forwardRef(({ className: n, ...e }, t) => d.createElement(ar, { ...e, ref: t, className: C("rt-IconButton", n) }));
 dr.displayName = "IconButton";
 const hA = ["all", "x", "y", "top", "bottom", "left", "right"], pA = ["border-box", "padding-box"], ft = ["current", "0"], mA = { ...re, side: { type: "enum", className: "rt-r-side", values: hA, default: "all", responsive: !0 }, clip: { type: "enum", className: "rt-r-clip", values: pA, default: "border-box", responsive: !0 }, p: { type: "enum", className: "rt-r-p", values: ft, parseValue: vt, responsive: !0 }, px: { type: "enum", className: "rt-r-px", values: ft, parseValue: vt, responsive: !0 }, py: { type: "enum", className: "rt-r-py", values: ft, parseValue: vt, responsive: !0 }, pt: { type: "enum", className: "rt-r-pt", values: ft, parseValue: vt, responsive: !0 }, pr: { type: "enum", className: "rt-r-pr", values: ft, parseValue: vt, responsive: !0 }, pb: { type: "enum", className: "rt-r-pb", values: ft, parseValue: vt, responsive: !0 }, pl: { type: "enum", className: "rt-r-pl", values: ft, parseValue: vt, responsive: !0 } };
 function vt(n) {
@@ -1678,17 +1678,17 @@ function vt(n) {
 }
 const gA = d.forwardRef((n, e) => {
   const { asChild: t, className: s, ...a } = F(n, mA, X), o = t ? ve : "div";
-  return d.createElement(o, { ...a, ref: e, className: v("rt-Inset", s) });
+  return d.createElement(o, { ...a, ref: e, className: C("rt-Inset", s) });
 });
 gA.displayName = "Inset";
 const fA = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], vA = { ...re, size: { type: "enum", className: "rt-r-size", values: fA, responsive: !0 } }, CA = d.forwardRef((n, e) => {
   const { asChild: t, className: s, ...a } = F(n, vA, X), o = t ? ve : "kbd";
-  return d.createElement(o, { ...a, ref: e, className: v("rt-reset", "rt-Kbd", s) });
+  return d.createElement(o, { ...a, ref: e, className: C("rt-reset", "rt-Kbd", s) });
 });
 CA.displayName = "Kbd";
 const yA = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], kA = ["auto", "always", "hover", "none"], EA = { ...re, size: { type: "enum", className: "rt-r-size", values: yA, responsive: !0 }, ...Gn, ...Kn, ...xt, ...Nt, underline: { type: "enum", className: "rt-underline", values: kA, default: "auto" }, ...Kt, ...Ie }, SA = d.forwardRef((n, e) => {
   const { children: t, className: s, color: a, asChild: o, ...i } = F(n, EA);
-  return d.createElement(P, { ...i, "data-accent-color": a, ref: e, asChild: !0, className: v("rt-reset", "rt-Link", s) }, o ? t : d.createElement("a", null, t));
+  return d.createElement(P, { ...i, "data-accent-color": a, ref: e, asChild: !0, className: C("rt-reset", "rt-Link", s) }, o ? t : d.createElement("a", null, t));
 });
 SA.displayName = "Link";
 const IA = ["1", "2", "3", "4"], bA = { ...re, size: { type: "enum", className: "rt-r-size", values: IA, default: "2", responsive: !0 }, width: ye.width, minWidth: ye.minWidth, maxWidth: { ...ye.maxWidth, default: "480px" }, ...qt }, Yn = (n) => d.createElement(la, { ...n });
@@ -1697,7 +1697,7 @@ const Zn = d.forwardRef(({ children: n, ...e }, t) => d.createElement(ca, { ...e
 Zn.displayName = "Popover.Trigger";
 const _n = d.forwardRef((n, e) => {
   const { className: t, forceMount: s, container: a, ...o } = F(n, bA);
-  return d.createElement(Pl, { container: a, forceMount: s }, d.createElement(dt, { asChild: !0 }, d.createElement(ia, { align: "start", sideOffset: 8, collisionPadding: 10, ...o, ref: e, className: v("rt-PopperContent", "rt-PopoverContent", t) })));
+  return d.createElement(Pl, { container: a, forceMount: s }, d.createElement(dt, { asChild: !0 }, d.createElement(ia, { align: "start", sideOffset: 8, collisionPadding: 10, ...o, ref: e, className: C("rt-PopperContent", "rt-PopoverContent", t) })));
 });
 _n.displayName = "Popover.Content";
 const Zo = d.forwardRef(({ children: n, ...e }, t) => d.createElement(Jl, { ...e, ref: t, asChild: !0 }, ut(n)));
@@ -1713,34 +1713,34 @@ const MS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Trigger: Zn
 }, Symbol.toStringTag, { value: "Module" })), BA = ["1", "2", "3"], wA = ["classic", "surface", "soft"], RA = { size: { type: "enum", className: "rt-r-size", values: BA, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: wA, default: "surface" }, ...we, ...Ie, ...Le, duration: { type: "string" } }, NA = d.forwardRef((n, e) => {
   const { className: t, style: s, color: a, radius: o, duration: i, ...l } = F(n, RA, X);
-  return d.createElement(Ul, { "data-accent-color": a, "data-radius": o, ref: e, className: v("rt-ProgressRoot", t), style: un({ "--progress-duration": "value" in l ? void 0 : i, "--progress-value": "value" in l ? l.value : void 0, "--progress-max": "max" in l ? l.max : void 0 }, s), ...l, asChild: !1 }, d.createElement(zl, { className: "rt-ProgressIndicator" }));
+  return d.createElement(Ul, { "data-accent-color": a, "data-radius": o, ref: e, className: C("rt-ProgressRoot", t), style: un({ "--progress-duration": "value" in l ? void 0 : i, "--progress-value": "value" in l ? l.value : void 0, "--progress-max": "max" in l ? l.max : void 0 }, s), ...l, asChild: !1 }, d.createElement(zl, { className: "rt-ProgressIndicator" }));
 });
 NA.displayName = "Progress";
 const xA = { ...re, ...xt, ...Nt }, QA = d.forwardRef((n, e) => {
   const { asChild: t, className: s, ...a } = F(n, xA), o = t ? ve : "q";
-  return d.createElement(o, { ...a, ref: e, className: v("rt-Quote", s) });
+  return d.createElement(o, { ...a, ref: e, className: C("rt-Quote", s) });
 });
 QA.displayName = "Quote";
 const TA = ["1", "2", "3"], DA = ["surface", "classic"], JA = { ...re, size: { type: "enum", className: "rt-r-size", values: TA, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: DA, default: "surface" }, ...we, ...Ie, columns: { ...Jn.columns, default: "repeat(auto-fit, minmax(160px, 1fr))" }, gap: { ...Jn.gap, default: "4" } }, $n = d.forwardRef((n, e) => {
   const { className: t, color: s, ...a } = F(n, JA, X);
-  return d.createElement(Po, { asChild: !0 }, d.createElement(da, { "data-accent-color": s, ...a, ref: e, className: v("rt-RadioCardsRoot", t) }));
+  return d.createElement(Po, { asChild: !0 }, d.createElement(da, { "data-accent-color": s, ...a, ref: e, className: C("rt-RadioCardsRoot", t) }));
 });
 $n.displayName = "RadioCards.Root";
-const mn = d.forwardRef(({ className: n, ...e }, t) => d.createElement(ua, { ...e, asChild: !1, ref: t, className: v("rt-reset", "rt-BaseCard", "rt-RadioCardsItem", n) }));
+const mn = d.forwardRef(({ className: n, ...e }, t) => d.createElement(ua, { ...e, asChild: !1, ref: t, className: C("rt-reset", "rt-BaseCard", "rt-RadioCardsItem", n) }));
 mn.displayName = "RadioCards.Item";
 const PA = ["1", "2", "3"], UA = ["classic", "surface", "soft"], an = { ...re, size: { type: "enum", className: "rt-r-size", values: PA, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: UA, default: "surface" }, ...we, ...Ie }, $o = "RadioGroup", [zA] = Ws($o, [Aa]), ei = Aa(), [MA, ti] = zA($o), ni = d.forwardRef(({ color: n = an.color.default, highContrast: e = an.highContrast.default, size: t = an.size.default, variant: s = an.variant.default, ...a }, o) => {
   const { __scopeRadioGroup: i, className: l, ...c } = F(a, X), u = ei(i);
-  return d.createElement(MA, { scope: i, color: n, highContrast: e, size: t, variant: s }, d.createElement(da, { ...u, ...c, ref: o, className: v("rt-RadioGroupRoot", l) }));
+  return d.createElement(MA, { scope: i, color: n, highContrast: e, size: t, variant: s }, d.createElement(da, { ...u, ...c, ref: o, className: C("rt-RadioGroupRoot", l) }));
 });
 ni.displayName = "RadioGroup.Root";
 const si = d.forwardRef((n, e) => {
   const { __scopeRadioGroup: t, children: s, className: a, style: o, ...i } = n, { size: l } = ti("RadioGroupItem", t);
-  return s ? d.createElement(P, { as: "label", size: l, className: v("rt-RadioGroupItem", a), style: o }, d.createElement(Us, { __scopeRadioGroup: t, ...i, ref: e }), s && d.createElement("span", { className: "rt-RadioGroupItemInner" }, s)) : d.createElement(Us, { __scopeRadioGroup: t, ...i, ref: e, className: a, style: o });
+  return s ? d.createElement(P, { as: "label", size: l, className: C("rt-RadioGroupItem", a), style: o }, d.createElement(Us, { __scopeRadioGroup: t, ...i, ref: e }), s && d.createElement("span", { className: "rt-RadioGroupItemInner" }, s)) : d.createElement(Us, { __scopeRadioGroup: t, ...i, ref: e, className: a, style: o });
 });
 si.displayName = "RadioGroup.Item";
 const Us = d.forwardRef(({ __scopeRadioGroup: n, ...e }, t) => {
   const s = ti("RadioGroupItemRadio", n), a = ei(n), { color: o, className: i } = F({ ...e, ...s }, an, X);
-  return d.createElement(ua, { ...a, "data-accent-color": o, ...e, asChild: !1, ref: t, className: v("rt-reset", "rt-BaseRadioRoot", i) });
+  return d.createElement(ua, { ...a, "data-accent-color": o, ...e, asChild: !1, ref: t, className: C("rt-reset", "rt-BaseRadioRoot", i) });
 });
 Us.displayName = "RadioGroup.ItemRadio";
 const OS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -1749,17 +1749,17 @@ const OS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Root: ni
 }, Symbol.toStringTag, { value: "Module" })), OA = ["1", "2", "3"], FA = ["classic", "surface", "soft"], HA = { size: { type: "enum", className: "rt-r-size", values: OA, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: FA, default: "surface" }, ...we, ...Ie }, jA = d.forwardRef((n, e) => {
   const t = d.useRef(null), { className: s, color: a, onChange: o, onValueChange: i, ...l } = F(n, HA, X);
-  return d.createElement("input", { type: "radio", "data-accent-color": a, ...l, onChange: ie(o, (c) => i == null ? void 0 : i(c.currentTarget.value)), ref: ha(t, e), className: v("rt-reset", "rt-BaseRadioRoot", "rt-RadioRoot", s) });
+  return d.createElement("input", { type: "radio", "data-accent-color": a, ...l, onChange: ie(o, (c) => i == null ? void 0 : i(c.currentTarget.value)), ref: ha(t, e), className: C("rt-reset", "rt-BaseRadioRoot", "rt-RadioRoot", s) });
 });
 jA.displayName = "Radio";
 const WA = ["1", "2", "3"], LA = ["surface", "classic"], VA = { disabled: { type: "boolean", className: "disabled", default: !1 }, size: { type: "enum", className: "rt-r-size", values: WA, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: LA, default: "surface" }, ...Le }, ri = d.forwardRef((n, e) => {
   const { className: t, children: s, radius: a, value: o, defaultValue: i, onValueChange: l, ...c } = F(n, VA, X), [u, h] = xn({ prop: o, onChange: l, defaultProp: i });
-  return d.createElement(Ml, { "data-disabled": n.disabled || void 0, "data-radius": a, ref: e, className: v("rt-SegmentedControlRoot", t), onValueChange: (A) => {
+  return d.createElement(Ml, { "data-disabled": n.disabled || void 0, "data-radius": a, ref: e, className: C("rt-SegmentedControlRoot", t), onValueChange: (A) => {
     A && h(A);
   }, ...c, type: "single", value: u, asChild: !1, disabled: !!n.disabled }, s, d.createElement("div", { className: "rt-SegmentedControlIndicator" }));
 });
 ri.displayName = "SegmentedControl.Root";
-const ai = d.forwardRef(({ children: n, className: e, ...t }, s) => d.createElement(Ol, { ref: s, className: v("rt-reset", "rt-SegmentedControlItem", e), ...t, disabled: !1, asChild: !1 }, d.createElement("span", { className: "rt-SegmentedControlItemSeparator" }), d.createElement("span", { className: "rt-SegmentedControlItemLabel" }, d.createElement("span", { className: "rt-SegmentedControlItemLabelActive" }, n), d.createElement("span", { className: "rt-SegmentedControlItemLabelInactive", "aria-hidden": !0 }, n))));
+const ai = d.forwardRef(({ children: n, className: e, ...t }, s) => d.createElement(Ol, { ref: s, className: C("rt-reset", "rt-SegmentedControlItem", e), ...t, disabled: !1, asChild: !1 }, d.createElement("span", { className: "rt-SegmentedControlItemSeparator" }), d.createElement("span", { className: "rt-SegmentedControlItemLabel" }, d.createElement("span", { className: "rt-SegmentedControlItemLabelActive" }, n), d.createElement("span", { className: "rt-SegmentedControlItemLabelInactive", "aria-hidden": !0 }, n))));
 ai.displayName = "SegmentedControl.Item";
 const qA = ["1", "2", "3", "4"], KA = ["none", "initial"], GA = { ...re, size: { type: "enum", className: "rt-r-size", values: qA, default: "3", responsive: !0 }, display: { type: "enum", className: "rt-r-display", values: KA, parseValue: XA, responsive: !0 } };
 function XA(n) {
@@ -1767,7 +1767,7 @@ function XA(n) {
 }
 const YA = d.forwardRef((n, e) => {
   const { asChild: t, className: s, ...a } = F(n, GA, pn, X), o = t ? ve : "section";
-  return d.createElement(o, { ...a, ref: e, className: v("rt-Section", s) });
+  return d.createElement(o, { ...a, ref: e, className: C("rt-Section", s) });
 });
 YA.displayName = "Section";
 const ZA = ["1", "2", "3"], ur = { size: { type: "enum", className: "rt-r-size", values: ZA, default: "2", responsive: !0 } }, _A = ["classic", "surface", "soft", "ghost"], $A = { variant: { type: "enum", className: "rt-variant", values: _A, default: "surface" }, ...we, ...Le, placeholder: { type: "string" } }, eh = ["solid", "soft"], th = { variant: { type: "enum", className: "rt-variant", values: eh, default: "solid" }, ...we, ...Ie }, Ar = d.createContext({}), hr = (n) => {
@@ -1777,45 +1777,45 @@ const ZA = ["1", "2", "3"], ur = { size: { type: "enum", className: "rt-r-size",
 hr.displayName = "Select.Root";
 const pr = d.forwardRef((n, e) => {
   const t = d.useContext(Ar), { children: s, className: a, color: o, radius: i, placeholder: l, ...c } = F({ size: t == null ? void 0 : t.size, ...n }, { size: ur.size }, $A, X);
-  return d.createElement(ud, { asChild: !0 }, d.createElement("button", { "data-accent-color": o, "data-radius": i, ...c, ref: e, className: v("rt-reset", "rt-SelectTrigger", a) }, d.createElement("span", { className: "rt-SelectTriggerInner" }, d.createElement(Ad, { placeholder: l }, s)), d.createElement(hd, { asChild: !0 }, d.createElement(zo, { className: "rt-SelectIcon" }))));
+  return d.createElement(ud, { asChild: !0 }, d.createElement("button", { "data-accent-color": o, "data-radius": i, ...c, ref: e, className: C("rt-reset", "rt-SelectTrigger", a) }, d.createElement("span", { className: "rt-SelectTriggerInner" }, d.createElement(Ad, { placeholder: l }, s)), d.createElement(hd, { asChild: !0 }, d.createElement(zo, { className: "rt-SelectIcon" }))));
 });
 pr.displayName = "Select.Trigger";
 const mr = d.forwardRef((n, e) => {
   const t = d.useContext(Ar), { className: s, children: a, color: o, container: i, ...l } = F({ size: t == null ? void 0 : t.size, ...n }, { size: ur.size }, th), c = eu(), u = o || c.accentColor;
-  return d.createElement(pd, { container: i }, d.createElement(dt, { asChild: !0 }, d.createElement(md, { "data-accent-color": u, sideOffset: 4, ...l, asChild: !1, ref: e, className: v({ "rt-PopperContent": l.position === "popper" }, "rt-SelectContent", s) }, d.createElement(aa, { type: "auto", className: "rt-ScrollAreaRoot" }, d.createElement(gd, { asChild: !0, className: "rt-SelectViewport" }, d.createElement(oa, { className: "rt-ScrollAreaViewport", style: { overflowY: void 0 } }, a)), d.createElement(Es, { className: "rt-ScrollAreaScrollbar rt-r-size-1", orientation: "vertical" }, d.createElement(Ss, { className: "rt-ScrollAreaThumb" }))))));
+  return d.createElement(pd, { container: i }, d.createElement(dt, { asChild: !0 }, d.createElement(md, { "data-accent-color": u, sideOffset: 4, ...l, asChild: !1, ref: e, className: C({ "rt-PopperContent": l.position === "popper" }, "rt-SelectContent", s) }, d.createElement(aa, { type: "auto", className: "rt-ScrollAreaRoot" }, d.createElement(gd, { asChild: !0, className: "rt-SelectViewport" }, d.createElement(oa, { className: "rt-ScrollAreaViewport", style: { overflowY: void 0 } }, a)), d.createElement(Es, { className: "rt-ScrollAreaScrollbar rt-r-size-1", orientation: "vertical" }, d.createElement(Ss, { className: "rt-ScrollAreaThumb" }))))));
 });
 mr.displayName = "Select.Content";
 const oi = d.forwardRef((n, e) => {
   const { className: t, children: s, ...a } = n;
-  return d.createElement(Cd, { ...a, asChild: !1, ref: e, className: v("rt-SelectItem", t) }, d.createElement(kd, { className: "rt-SelectItemIndicator" }, d.createElement(Uo, { className: "rt-SelectItemIndicatorIcon" })), d.createElement(yd, null, s));
+  return d.createElement(Cd, { ...a, asChild: !1, ref: e, className: C("rt-SelectItem", t) }, d.createElement(kd, { className: "rt-SelectItemIndicator" }, d.createElement(Uo, { className: "rt-SelectItemIndicatorIcon" })), d.createElement(yd, null, s));
 });
 oi.displayName = "Select.Item";
-const gr = d.forwardRef(({ className: n, ...e }, t) => d.createElement(fd, { ...e, asChild: !1, ref: t, className: v("rt-SelectGroup", n) }));
+const gr = d.forwardRef(({ className: n, ...e }, t) => d.createElement(fd, { ...e, asChild: !1, ref: t, className: C("rt-SelectGroup", n) }));
 gr.displayName = "Select.Group";
-const nh = d.forwardRef(({ className: n, ...e }, t) => d.createElement(vd, { ...e, asChild: !1, ref: t, className: v("rt-SelectLabel", n) }));
+const nh = d.forwardRef(({ className: n, ...e }, t) => d.createElement(vd, { ...e, asChild: !1, ref: t, className: C("rt-SelectLabel", n) }));
 nh.displayName = "Select.Label";
-const sh = d.forwardRef(({ className: n, ...e }, t) => d.createElement(Ed, { ...e, asChild: !1, ref: t, className: v("rt-SelectSeparator", n) }));
+const sh = d.forwardRef(({ className: n, ...e }, t) => d.createElement(Ed, { ...e, asChild: !1, ref: t, className: C("rt-SelectSeparator", n) }));
 sh.displayName = "Select.Separator";
 const rh = ["horizontal", "vertical"], ah = ["1", "2", "3", "4"], oh = { orientation: { type: "enum", className: "rt-r-orientation", values: rh, default: "horizontal", responsive: !0 }, size: { type: "enum", className: "rt-r-size", values: ah, default: "1", responsive: !0 }, color: { ...we.color, default: "gray" }, decorative: { type: "boolean", default: !0 } }, Ge = d.forwardRef((n, e) => {
   const { className: t, color: s, decorative: a, ...o } = F(n, oh, X);
-  return d.createElement("span", { "data-accent-color": s, role: a ? void 0 : "separator", ...o, ref: e, className: v("rt-Separator", t) });
+  return d.createElement("span", { "data-accent-color": s, role: a ? void 0 : "separator", ...o, ref: e, className: C("rt-Separator", t) });
 });
 Ge.displayName = "Separator";
 const ih = parseFloat(d.version) >= 19 || "", lh = { loading: { type: "boolean", default: !0 }, ...ye, ...qt }, ch = d.forwardRef((n, e) => {
   const { children: t, className: s, loading: a, ...o } = F(n, lh, X);
   if (!a) return t;
   const i = d.isValidElement(t) ? ve : "span";
-  return d.createElement(i, { ref: e, "aria-hidden": !0, className: v("rt-Skeleton", s), "data-inline-skeleton": d.isValidElement(t) ? void 0 : !0, tabIndex: -1, inert: ih, ...o }, t);
+  return d.createElement(i, { ref: e, "aria-hidden": !0, className: C("rt-Skeleton", s), "data-inline-skeleton": d.isValidElement(t) ? void 0 : !0, tabIndex: -1, inert: ih, ...o }, t);
 });
 ch.displayName = "Skeleton";
 const dh = { ...re, ...xt, ...Nt }, uh = d.forwardRef((n, e) => {
   const { asChild: t, className: s, ...a } = F(n, dh), o = t ? ve : "strong";
-  return d.createElement(o, { ...a, ref: e, className: v("rt-Strong", s) });
+  return d.createElement(o, { ...a, ref: e, className: C("rt-Strong", s) });
 });
 uh.displayName = "Strong";
 const Ah = ["1", "2", "3"], hh = ["classic", "surface", "soft"], ph = { size: { type: "enum", className: "rt-r-size", values: Ah, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: hh, default: "surface" }, ...we, ...Ie, ...Le }, it = d.forwardRef((n, e) => {
   const { className: t, color: s, radius: a, ...o } = F(n, ph, X);
-  return d.createElement(Fl, { "data-accent-color": s, "data-radius": a, ...o, asChild: !1, ref: e, className: v("rt-reset", "rt-SwitchRoot", t) }, d.createElement(Hl, { className: v("rt-SwitchThumb", { "rt-high-contrast": n.highContrast }) }));
+  return d.createElement(Fl, { "data-accent-color": s, "data-radius": a, ...o, asChild: !1, ref: e, className: C("rt-reset", "rt-SwitchRoot", t) }, d.createElement(Hl, { className: C("rt-SwitchThumb", { "rt-high-contrast": n.highContrast }) }));
 });
 it.displayName = "Switch";
 const mh = ["1", "2"], gh = ["nowrap", "wrap", "wrap-reverse"], fh = ["start", "center", "end"], vh = { size: { type: "enum", className: "rt-r-size", values: mh, default: "2", responsive: !0 }, wrap: { type: "enum", className: "rt-r-fw", values: gh, responsive: !0 }, justify: { type: "enum", className: "rt-r-jc", values: fh, responsive: !0 }, ...we, ...Ie }, Ch = ["1", "2", "3"], yh = ["surface", "ghost"], kh = ["auto", "fixed"], As = { size: { type: "enum", className: "rt-r-size", values: Ch, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: yh, default: "ghost" }, layout: { type: "enum", className: "rt-r-tl", values: kh, responsive: !0 } }, Eh = ["start", "center", "end", "baseline"], Sh = { align: { type: "enum", className: "rt-r-va", values: Eh, parseValue: Ih, responsive: !0 } };
@@ -1828,31 +1828,31 @@ function Bh(n) {
 }
 const vr = d.forwardRef((n, e) => {
   const { layout: t, ...s } = As, { className: a, children: o, layout: i, ...l } = F(n, s, X), c = dn({ value: i, className: As.layout.className, propValues: As.layout.values });
-  return d.createElement("div", { ref: e, className: v("rt-TableRoot", a), ...l }, d.createElement(Qt, null, d.createElement("table", { className: v("rt-TableRootTable", c) }, o)));
+  return d.createElement("div", { ref: e, className: C("rt-TableRoot", a), ...l }, d.createElement(Qt, null, d.createElement("table", { className: C("rt-TableRootTable", c) }, o)));
 });
 vr.displayName = "Table.Root";
-const Cr = d.forwardRef(({ className: n, ...e }, t) => d.createElement("thead", { ...e, ref: t, className: v("rt-TableHeader", n) }));
+const Cr = d.forwardRef(({ className: n, ...e }, t) => d.createElement("thead", { ...e, ref: t, className: C("rt-TableHeader", n) }));
 Cr.displayName = "Table.Header";
-const yr = d.forwardRef(({ className: n, ...e }, t) => d.createElement("tbody", { ...e, ref: t, className: v("rt-TableBody", n) }));
+const yr = d.forwardRef(({ className: n, ...e }, t) => d.createElement("tbody", { ...e, ref: t, className: C("rt-TableBody", n) }));
 yr.displayName = "Table.Body";
 const es = d.forwardRef((n, e) => {
   const { className: t, ...s } = F(n, Sh);
-  return d.createElement("tr", { ...s, ref: e, className: v("rt-TableRow", t) });
+  return d.createElement("tr", { ...s, ref: e, className: C("rt-TableRow", t) });
 });
 es.displayName = "Table.Row";
 const Ht = d.forwardRef((n, e) => {
   const { className: t, ...s } = F(n, fr);
-  return d.createElement("td", { className: v("rt-TableCell", t), ref: e, ...s });
+  return d.createElement("td", { className: C("rt-TableCell", t), ref: e, ...s });
 });
 Ht.displayName = "Table.Cell";
 const Pn = d.forwardRef((n, e) => {
   const { className: t, ...s } = F(n, fr);
-  return d.createElement("th", { className: v("rt-TableCell", "rt-TableColumnHeaderCell", t), scope: "col", ref: e, ...s });
+  return d.createElement("th", { className: C("rt-TableCell", "rt-TableColumnHeaderCell", t), scope: "col", ref: e, ...s });
 });
 Pn.displayName = "Table.ColumnHeaderCell";
 const ii = d.forwardRef((n, e) => {
   const { className: t, ...s } = F(n, fr);
-  return d.createElement("th", { className: v("rt-TableCell", "rt-TableRowHeaderCell", t), scope: "row", ref: e, ...s });
+  return d.createElement("th", { className: C("rt-TableCell", "rt-TableRowHeaderCell", t), scope: "row", ref: e, ...s });
 });
 ii.displayName = "Table.RowHeaderCell";
 const FS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -1866,22 +1866,22 @@ const FS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   RowHeaderCell: ii
 }, Symbol.toStringTag, { value: "Module" })), li = d.forwardRef((n, e) => {
   const { className: t, ...s } = F(n, X);
-  return d.createElement(Ll, { ...s, ref: e, className: v("rt-TabsRoot", t) });
+  return d.createElement(Ll, { ...s, ref: e, className: C("rt-TabsRoot", t) });
 });
 li.displayName = "Tabs.Root";
 const ci = d.forwardRef((n, e) => {
   const { className: t, color: s, ...a } = F(n, vh, X);
-  return d.createElement(Wl, { "data-accent-color": s, ...a, asChild: !1, ref: e, className: v("rt-BaseTabList", "rt-TabsList", t) });
+  return d.createElement(Wl, { "data-accent-color": s, ...a, asChild: !1, ref: e, className: C("rt-BaseTabList", "rt-TabsList", t) });
 });
 ci.displayName = "Tabs.List";
 const di = d.forwardRef((n, e) => {
   const { className: t, children: s, ...a } = n;
-  return d.createElement(Vl, { ...a, asChild: !1, ref: e, className: v("rt-reset", "rt-BaseTabListTrigger", "rt-TabsTrigger", t) }, d.createElement("span", { className: "rt-BaseTabListTriggerInner rt-TabsTriggerInner" }, s), d.createElement("span", { className: "rt-BaseTabListTriggerInnerHidden rt-TabsTriggerInnerHidden" }, s));
+  return d.createElement(Vl, { ...a, asChild: !1, ref: e, className: C("rt-reset", "rt-BaseTabListTrigger", "rt-TabsTrigger", t) }, d.createElement("span", { className: "rt-BaseTabListTriggerInner rt-TabsTriggerInner" }, s), d.createElement("span", { className: "rt-BaseTabListTriggerInnerHidden rt-TabsTriggerInnerHidden" }, s));
 });
 di.displayName = "Tabs.Trigger";
 const ui = d.forwardRef((n, e) => {
   const { className: t, ...s } = F(n, X);
-  return d.createElement(jl, { ...s, ref: e, className: v("rt-TabsContent", t) });
+  return d.createElement(jl, { ...s, ref: e, className: C("rt-TabsContent", t) });
 });
 ui.displayName = "Tabs.Content";
 const HS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -1892,12 +1892,12 @@ const HS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Trigger: di
 }, Symbol.toStringTag, { value: "Module" })), wh = ["1", "2", "3"], Rh = ["classic", "surface", "soft"], Nh = ["none", "vertical", "horizontal", "both"], xh = { size: { type: "enum", className: "rt-r-size", values: wh, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: Rh, default: "surface" }, resize: { type: "enum", className: "rt-r-resize", values: Nh, responsive: !0 }, ...we, ...Le }, Ai = d.forwardRef((n, e) => {
   const { className: t, color: s, radius: a, style: o, ...i } = F(n, xh, X);
-  return d.createElement("div", { "data-accent-color": s, "data-radius": a, className: v("rt-TextAreaRoot", t), style: o }, d.createElement("textarea", { className: "rt-reset rt-TextAreaInput", ref: e, ...i }));
+  return d.createElement("div", { "data-accent-color": s, "data-radius": a, className: C("rt-TextAreaRoot", t), style: o }, d.createElement("textarea", { className: "rt-reset rt-TextAreaInput", ref: e, ...i }));
 });
 Ai.displayName = "TextArea";
 const Qh = ["1", "2", "3"], Th = ["classic", "surface", "soft"], Dh = { size: { type: "enum", className: "rt-r-size", values: Qh, default: "2", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: Th, default: "surface" }, ...we, ...Le }, Jh = ["left", "right"], Ph = { side: { type: "enum", values: Jh }, ...we, gap: Qo.gap, px: ln.px, pl: ln.pl, pr: ln.pr }, hi = d.forwardRef((n, e) => {
   const t = d.useRef(null), { children: s, className: a, color: o, radius: i, style: l, ...c } = F(n, Dh, X);
-  return d.createElement("div", { "data-accent-color": o, "data-radius": i, style: l, className: v("rt-TextFieldRoot", a), onPointerDown: (u) => {
+  return d.createElement("div", { "data-accent-color": o, "data-radius": i, style: l, className: C("rt-TextFieldRoot", a), onPointerDown: (u) => {
     const h = u.target;
     if (h.closest("input, button, a")) return;
     const A = t.current;
@@ -1918,12 +1918,12 @@ const Qh = ["1", "2", "3"], Th = ["classic", "surface", "soft"], Dh = { size: {
 hi.displayName = "TextField.Root";
 const pi = d.forwardRef((n, e) => {
   const { className: t, color: s, side: a, ...o } = F(n, Ph);
-  return d.createElement("div", { "data-accent-color": s, "data-side": a, ...o, ref: e, className: v("rt-TextFieldSlot", t) });
+  return d.createElement("div", { "data-accent-color": s, "data-side": a, ...o, ref: e, className: C("rt-TextFieldSlot", t) });
 });
 pi.displayName = "TextField.Slot";
 const Uh = { content: { type: "ReactNode", required: !0 }, width: ye.width, minWidth: ye.minWidth, maxWidth: { ...ye.maxWidth, default: "360px" } }, Gt = d.forwardRef((n, e) => {
   const { children: t, className: s, open: a, defaultOpen: o, onOpenChange: i, delayDuration: l, disableHoverableContent: c, content: u, container: h, forceMount: A, ...p } = F(n, Uh), k = { open: a, defaultOpen: o, onOpenChange: i, delayDuration: l, disableHoverableContent: c };
-  return d.createElement(Mn, { ...k }, d.createElement(On, { asChild: !0 }, t), d.createElement(pa, { container: h, forceMount: A }, d.createElement(dt, { asChild: !0 }, d.createElement(Fn, { sideOffset: 4, collisionPadding: 10, ...p, asChild: !1, ref: e, className: v("rt-TooltipContent", s) }, d.createElement(P, { as: "p", className: "rt-TooltipText", size: "1" }, u), d.createElement(Hn, { className: "rt-TooltipArrow" })))));
+  return d.createElement(Mn, { ...k }, d.createElement(On, { asChild: !0 }, t), d.createElement(pa, { container: h, forceMount: A }, d.createElement(dt, { asChild: !0 }, d.createElement(Fn, { sideOffset: 4, collisionPadding: 10, ...p, asChild: !1, ref: e, className: C("rt-TooltipContent", s) }, d.createElement(P, { as: "p", className: "rt-TooltipText", size: "1" }, u), d.createElement(Hn, { className: "rt-TooltipArrow" })))));
 });
 Gt.displayName = "Tooltip";
 const zh = "_upgradeItem_1isop_1", Mh = "_upgradeItemCollapsed_1isop_12", Oh = "_upgradeIcon_1isop_26", Fh = "_upgradeText_1isop_30", Hh = "_upgradeContent_1isop_44", jh = "_upgradeContentCollapsed_1isop_58", Wh = "_upgradeItemSelected_1isop_71", Ct = {
@@ -1955,7 +1955,7 @@ const zh = "_upgradeItem_1isop_1", Mh = "_upgradeItemCollapsed_1isop_12", Oh = "
         align: "center",
         role: "button",
         tabIndex: 0,
-        className: v(Ct.upgradeItem, {
+        className: C(Ct.upgradeItem, {
           [Ct.upgradeItemCollapsed]: e,
           [Ct.upgradeItemSelected]: l
         }),
@@ -1968,7 +1968,7 @@ const zh = "_upgradeItem_1isop_1", Mh = "_upgradeItemCollapsed_1isop_12", Oh = "
           /* @__PURE__ */ r(
             "div",
             {
-              className: v(Ct.upgradeContent, {
+              className: C(Ct.upgradeContent, {
                 [Ct.upgradeContentCollapsed]: e
               }),
               children: /* @__PURE__ */ r(P, { size: "2", className: Ct.upgradeText, children: o.label })
@@ -2024,7 +2024,7 @@ const zh = "_upgradeItem_1isop_1", Mh = "_upgradeItemCollapsed_1isop_12", Oh = "
       variant: t,
       color: A,
       size: a,
-      className: v(Ze.Button, e, Ze.button, {
+      className: C(Ze.Button, e, Ze.button, {
         [Ze[A]]: !0,
         [Ze[`size${a}`]]: !0,
         [Ze[t]]: !0,
@@ -2076,7 +2076,7 @@ const mp = "_iconButton_dxvji_1", gp = "_ghost_dxvji_7", fp = "_mint_dxvji_7", v
   dr,
   {
     onClick: n,
-    className: v(
+    className: C(
       yt.iconButton,
       {
         [yt[a]]: !0,
@@ -2128,7 +2128,7 @@ const Qp = ({
           size: "1",
           variant: "solid",
           color: e.color,
-          className: v(Ye.badge, {
+          className: C(Ye.badge, {
             [Ye.badgeGreen]: e.color === "green",
             [Ye.badgeNeutral]: e.color === "neutral"
           }),
@@ -2186,7 +2186,7 @@ const Tp = "_size1_18z9r_1", Dp = "_accent_18z9r_5", Jp = "_neutral_18z9r_15", P
     color: s,
     variant: "soft",
     highContrast: a,
-    className: v(
+    className: C(
       vn.Callout,
       e,
       vn[s],
@@ -2232,12 +2232,12 @@ const Fp = "_card_qkexv_1", Hp = "_iconContainer_qkexv_15", jp = "_icon_qkexv_15
       size: "3",
       color: t,
       onClick: i,
-      className: v(u, e, Ve.card, s && Ve.drop, a && Ve.dropHover),
+      className: C(u, e, Ve.card, s && Ve.drop, a && Ve.dropHover),
       ...l,
       children: /* @__PURE__ */ g(y, { gap: "5", align: "center", children: [
         /* @__PURE__ */ g(y, { className: Ve.iconContainer, children: [
-          o ? /* @__PURE__ */ r(o, { width: 16, height: 16, className: v(Ve.iconDefault, c) }) : /* @__PURE__ */ r(ma, { width: 16, height: 16, className: v(Ve.iconDefault, c) }),
-          /* @__PURE__ */ r(Vs, { width: 16, height: 16, className: v(Ve.iconHover, c) })
+          o ? /* @__PURE__ */ r(o, { width: 16, height: 16, className: C(Ve.iconDefault, c) }) : /* @__PURE__ */ r(ma, { width: 16, height: 16, className: C(Ve.iconDefault, c) }),
+          /* @__PURE__ */ r(Vs, { width: 16, height: 16, className: C(Ve.iconHover, c) })
         ] }),
         /* @__PURE__ */ r(he, { children: /* @__PURE__ */ r(P, { as: "div", size: "2", weight: "bold", children: n }) })
       ] })
@@ -2256,7 +2256,7 @@ const Gp = "_Checkbox_1hm4q_1", Xp = "_CheckboxIndicator_1hm4q_61", Yp = "_Check
     ql,
     {
       ...e,
-      className: v(Cn.Checkbox, n),
+      className: C(Cn.Checkbox, n),
       size: t,
       children: /* @__PURE__ */ g(Kl, { className: Cn.CheckboxIndicator, children: [
         /* @__PURE__ */ r(
@@ -2318,35 +2318,35 @@ const _p = "_clock_1g00b_2", $p = "_column_1g00b_10", em = "_sm_1g00b_18", tm =
     [se.md]: u === "md",
     [se.lg]: u === "lg"
   };
-  return l ? /* @__PURE__ */ r("div", { className: v(se.skeletonBox, p, h), children: /* @__PURE__ */ r("div", { className: se.skeleton }) }) : /* @__PURE__ */ g("div", { className: v(se.clock, h), children: [
+  return l ? /* @__PURE__ */ r("div", { className: C(se.skeletonBox, p, h), children: /* @__PURE__ */ r("div", { className: se.skeleton }) }) : /* @__PURE__ */ g("div", { className: C(se.clock, h), children: [
     A && t > 0 && /* @__PURE__ */ g(pe, { children: [
       /* @__PURE__ */ g(
         "div",
         {
-          className: v(se.column, p, {
+          className: C(se.column, p, {
             [se.days]: t > 0
           }),
           children: [
-            /* @__PURE__ */ r("p", { className: v(se.labelBig, p), children: yn(t) }),
-            /* @__PURE__ */ r("p", { className: v(se.labelSmall, p), children: n._("Days") })
+            /* @__PURE__ */ r("p", { className: C(se.labelBig, p), children: yn(t) }),
+            /* @__PURE__ */ r("p", { className: C(se.labelSmall, p), children: n._("Days") })
           ]
         }
       ),
-      /* @__PURE__ */ r("p", { className: v(se.colon, p), children: ":" })
+      /* @__PURE__ */ r("p", { className: C(se.colon, p), children: ":" })
     ] }),
-    /* @__PURE__ */ g("div", { className: v(se.column, p), children: [
-      /* @__PURE__ */ r("p", { className: v(se.labelBig, p), children: yn(s) }),
-      /* @__PURE__ */ r("p", { className: v(se.labelSmall, p), children: n._("Hours") })
+    /* @__PURE__ */ g("div", { className: C(se.column, p), children: [
+      /* @__PURE__ */ r("p", { className: C(se.labelBig, p), children: yn(s) }),
+      /* @__PURE__ */ r("p", { className: C(se.labelSmall, p), children: n._("Hours") })
     ] }),
-    /* @__PURE__ */ r("p", { className: v(se.colon, p), children: ":" }),
-    /* @__PURE__ */ g("div", { className: v(se.column, p), children: [
-      /* @__PURE__ */ r("p", { className: v(se.labelBig, p), children: yn(a) }),
-      /* @__PURE__ */ r("p", { className: v(se.labelSmall, p), children: n._("Minutes") })
+    /* @__PURE__ */ r("p", { className: C(se.colon, p), children: ":" }),
+    /* @__PURE__ */ g("div", { className: C(se.column, p), children: [
+      /* @__PURE__ */ r("p", { className: C(se.labelBig, p), children: yn(a) }),
+      /* @__PURE__ */ r("p", { className: C(se.labelSmall, p), children: n._("Minutes") })
     ] }),
-    (t <= 0 || !A) && /* @__PURE__ */ r("p", { className: v(se.colon, p), children: ":" }),
-    (t <= 0 || !A) && /* @__PURE__ */ g("div", { className: v(se.column, p), children: [
-      /* @__PURE__ */ r("p", { className: v(se.labelBig, p), children: yn(o) }),
-      /* @__PURE__ */ r("p", { className: v(se.labelSmall, p), children: n._("Sec") })
+    (t <= 0 || !A) && /* @__PURE__ */ r("p", { className: C(se.colon, p), children: ":" }),
+    (t <= 0 || !A) && /* @__PURE__ */ g("div", { className: C(se.column, p), children: [
+      /* @__PURE__ */ r("p", { className: C(se.labelBig, p), children: yn(o) }),
+      /* @__PURE__ */ r("p", { className: C(se.labelSmall, p), children: n._("Sec") })
     ] })
   ] });
 };
@@ -2385,7 +2385,7 @@ const dm = "_container_1k1mq_1", um = "_content_1k1mq_19", Am = "_title_1k1mq_26
     return () => clearInterval(c);
   }, [s]);
   const l = s && o && !o.ended;
-  return /* @__PURE__ */ g("div", { className: v(Zt.container, n), children: [
+  return /* @__PURE__ */ g("div", { className: C(Zt.container, n), children: [
     /* @__PURE__ */ g("div", { className: Zt.content, children: [
       /* @__PURE__ */ r("p", { className: Zt.title, children: e }),
       t && /* @__PURE__ */ r("p", { className: Zt.description, children: t })
@@ -2451,7 +2451,7 @@ const gm = "_menuContent_1j71o_1", fm = "_menuSubContent_1j71o_2", vm = "_slideD
         return /* @__PURE__ */ r(
           "div",
           {
-            className: v(
+            className: C(
               W.menuItem,
               W[`menuItem-size-${s}`]
             ),
@@ -2472,7 +2472,7 @@ const gm = "_menuContent_1j71o_1", fm = "_menuSubContent_1j71o_2", vm = "_slideD
         return /* @__PURE__ */ r(
           n.Label,
           {
-            className: v(
+            className: C(
               W.menuLabel,
               W[`menuLabel-size-${s}`]
             ),
@@ -2485,7 +2485,7 @@ const gm = "_menuContent_1j71o_1", fm = "_menuSubContent_1j71o_2", vm = "_slideD
           /* @__PURE__ */ g(
             n.SubTrigger,
             {
-              className: v(
+              className: C(
                 W.menuSubTrigger,
                 W[`menuSubTrigger-size-${s}`],
                 {
@@ -2507,7 +2507,7 @@ const gm = "_menuContent_1j71o_1", fm = "_menuSubContent_1j71o_2", vm = "_slideD
         return /* @__PURE__ */ g(
           n.Item,
           {
-            className: v(
+            className: C(
               W.menuItem,
               W[`menuItem-size-${s}`],
               {
@@ -2547,7 +2547,7 @@ const gm = "_menuContent_1j71o_1", fm = "_menuSubContent_1j71o_2", vm = "_slideD
             onSelect: (l) => {
               o || l.preventDefault();
             },
-            className: v(
+            className: C(
               W.menuItem,
               W.menuCheckboxItem,
               {
@@ -2606,7 +2606,7 @@ const gm = "_menuContent_1j71o_1", fm = "_menuSubContent_1j71o_2", vm = "_slideD
     (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ r(
       Yl,
       {
-        className: v(W.menuContent, t),
+        className: C(W.menuContent, t),
         side: l.side,
         align: l.align,
         sideOffset: 5,
@@ -2641,7 +2641,7 @@ const Km = "_MoreButton_ats8z_1", Gm = "_hovered_ats8z_29", Xm = "_icon_ats8z_39
   "button",
   {
     type: "button",
-    className: v(hs.MoreButton, n, {
+    className: C(hs.MoreButton, n, {
       [hs.hovered]: t
     }),
     "aria-label": e,
@@ -2689,17 +2689,17 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
   renderDataCell: k
 }) {
   var S;
-  const f = ee(!1), m = (b) => {
+  const v = ee(!1), m = (b) => {
     b.shiftKey ? (b.preventDefault(), A == null || A(e, t)) : u == null || u(e);
-  }, C = (b) => {
-    b.stopPropagation(), b.shiftKey && (b.preventDefault(), f.current = !0, A == null || A(e, t), setTimeout(() => {
-      f.current = !1;
+  }, f = (b) => {
+    b.stopPropagation(), b.shiftKey && (b.preventDefault(), v.current = !0, A == null || A(e, t), setTimeout(() => {
+      v.current = !1;
     }, 0));
   }, E = (b) => {
     b.stopPropagation(), b.shiftKey ? (b.preventDefault(), A == null || A(e, t)) : h == null || h(e.id, !a);
   }, B = (b) => {
-    if (f.current) {
-      f.current = !1;
+    if (v.current) {
+      v.current = !1;
       return;
     }
     h == null || h(e.id, b === !0);
@@ -2707,7 +2707,7 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
   return /* @__PURE__ */ g(
     es,
     {
-      className: v({
+      className: C({
         [Y.rowSelected]: a,
         [Y.showDropdownOnSelect]: I
       }),
@@ -2725,9 +2725,9 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
               {
                 size: "1",
                 checked: a,
-                onClick: C,
+                onClick: f,
                 onCheckedChange: B,
-                className: v(Y.checkboxCell, {
+                className: C(Y.checkboxCell, {
                   [Y.showCheckboxCell]: a || o
                 })
               }
@@ -2737,7 +2737,7 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
         s.map((b, w) => /* @__PURE__ */ r(
           Ht,
           {
-            className: v(
+            className: C(
               Y.projectCell,
               w === 0 ? Y.columnProject : Y.dataColumn,
               { [Y.sortedColumn]: l === b.id }
@@ -2752,7 +2752,7 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
         c && /* @__PURE__ */ r(
           Ht,
           {
-            className: v(Y.projectCell, Y.dropdownColumn, Y.dropdownColumnCell),
+            className: C(Y.projectCell, Y.dropdownColumn, Y.dropdownColumnCell),
             "data-column-id": "actions",
             children: (S = e.dropdownOptions) != null && S.length ? /* @__PURE__ */ r(
               gn,
@@ -2761,7 +2761,7 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
                   ss,
                   {
                     "aria-label": `More options for ${e.title}`,
-                    className: v(Y.dropdownTriggerWrapperIcon, Y.dropdownColumnCell)
+                    className: C(Y.dropdownTriggerWrapperIcon, Y.dropdownColumnCell)
                   }
                 ) }),
                 options: e.dropdownOptions,
@@ -2789,7 +2789,7 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
   stickyBodyOffset: A = 0,
   ...p
 }) => {
-  const [k, f] = q(!1), m = ee(null), C = i == null ? void 0 : i.field, E = _(() => new Set(s), [s]), B = N((R) => E.has(R), [E]), I = s.length, S = (t == null ? void 0 : t.length) ?? 0, b = I > 0, w = S > 0 && I === S, Q = _(
+  const [k, v] = q(!1), m = ee(null), f = i == null ? void 0 : i.field, E = _(() => new Set(s), [s]), B = N((R) => E.has(R), [E]), I = s.length, S = (t == null ? void 0 : t.length) ?? 0, b = I > 0, w = S > 0 && I === S, Q = _(
     () => t == null ? void 0 : t.some((R) => {
       var H;
       return (H = R.dropdownOptions) == null ? void 0 : H.length;
@@ -2849,7 +2849,7 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
   return /* @__PURE__ */ g(
     vr,
     {
-      className: v(Y.DataTable, n),
+      className: C(Y.DataTable, n),
       size: "1",
       style: {
         "--datatable-sticky-offset": G,
@@ -2861,13 +2861,13 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
         /* @__PURE__ */ r(
           Cr,
           {
-            onMouseEnter: () => f(!0),
-            onMouseLeave: () => f(!1),
+            onMouseEnter: () => v(!0),
+            onMouseLeave: () => v(!1),
             children: /* @__PURE__ */ g(es, { className: Y.headerRow, children: [
               /* @__PURE__ */ r(
                 Ht,
                 {
-                  className: v(Y.checkboxCell, Y.selectColumn, {
+                  className: C(Y.checkboxCell, Y.selectColumn, {
                     [Y.showCheckboxHeader]: k || b
                   }),
                   children: /* @__PURE__ */ r(
@@ -2884,10 +2884,10 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
               e.map((R, H) => /* @__PURE__ */ r(
                 Pn,
                 {
-                  className: v(Y.columnHeaderCell, {
+                  className: C(Y.columnHeaderCell, {
                     [Y.columnProject]: H === 0,
                     [Y.dataColumn]: H !== 0,
-                    [Y.sortedColumn]: Ur(C) === Ur(R.id)
+                    [Y.sortedColumn]: Ur(f) === Ur(R.id)
                   }),
                   children: /* @__PURE__ */ g(y, { align: "center", gap: "3", height: "24px", children: [
                     H === 0 ? /* @__PURE__ */ r(j, { size: "2", className: Y.headerTextFirst, children: R.label }) : /* @__PURE__ */ g(
@@ -2898,7 +2898,7 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
                         onClick: () => O(R.id),
                         children: [
                           /* @__PURE__ */ r(j, { size: "2", children: R.label }),
-                          C === R.id && ((i == null ? void 0 : i.sort) === "DESC" ? /* @__PURE__ */ r(oc, { width: 16, height: 16 }) : /* @__PURE__ */ r(ic, { width: 16, height: 16 }))
+                          f === R.id && ((i == null ? void 0 : i.sort) === "DESC" ? /* @__PURE__ */ r(oc, { width: 16, height: 16 }) : /* @__PURE__ */ r(ic, { width: 16, height: 16 }))
                         ]
                       }
                     ),
@@ -2930,7 +2930,7 @@ const Ym = "_DataTable_17x9s_1", Zm = "_titleText_17x9s_23", _m = "_artistText_1
             isSelected: B(R.id),
             anyRowSelected: b,
             selectedCount: I,
-            sortedKey: C,
+            sortedKey: f,
             hasDropdownOptions: Q,
             onRowClick: T,
             onSelectRow: z,
@@ -2968,12 +2968,12 @@ const yg = "_hasTriggerWithoutClick_4fnob_1", kg = "_hasLeftColor_4fnob_10", Eg
   const [u, h] = q(!1), A = (p) => {
     a && (p.preventDefault(), p.stopPropagation(), a(p));
   };
-  return /* @__PURE__ */ r(y, { className: v(Ue.container, t), ...c, children: /* @__PURE__ */ g(la, { open: o, onOpenChange: i, modal: !0, children: [
+  return /* @__PURE__ */ r(y, { className: C(Ue.container, t), ...c, children: /* @__PURE__ */ g(la, { open: o, onOpenChange: i, modal: !0, children: [
     a && /* @__PURE__ */ r(
       y,
       {
         as: "button",
-        className: v({
+        className: C({
           [Ue.triggerWithClick]: a,
           [Ue.hasLeftColor]: l
         }),
@@ -3003,7 +3003,7 @@ const yg = "_hasTriggerWithoutClick_4fnob_1", kg = "_hasLeftColor_4fnob_10", Eg
     /* @__PURE__ */ r(ca, { asChild: !0, children: /* @__PURE__ */ g(
       "div",
       {
-        className: v({
+        className: C({
           [Ue.hover]: u,
           [Ue.hasLeftColor]: l,
           [Ue.hasTriggerWithClick]: a,
@@ -3032,7 +3032,7 @@ const yg = "_hasTriggerWithoutClick_4fnob_1", kg = "_hasLeftColor_4fnob_10", Eg
           s && /* @__PURE__ */ r(
             "span",
             {
-              className: v(Ue.separator, {
+              className: C(Ue.separator, {
                 [Ue.hasLeftColor]: l
               })
             }
@@ -3042,7 +3042,7 @@ const yg = "_hasTriggerWithoutClick_4fnob_1", kg = "_hasLeftColor_4fnob_10", Eg
             {
               width: 8,
               height: 8,
-              className: v(Ue.chevron, {
+              className: C(Ue.chevron, {
                 [Ue.hover]: u
               })
             }
@@ -3096,7 +3096,7 @@ const zs = ({ children: n, ...e }) => /* @__PURE__ */ r(
             $l,
             {
               asChild: !0,
-              className: v(W.menuTrigger, {
+              className: C(W.menuTrigger, {
                 [W.showActiveTrigger]: s
               }),
               disabled: i,
@@ -3106,7 +3106,7 @@ const zs = ({ children: n, ...e }) => /* @__PURE__ */ r(
           l ? /* @__PURE__ */ r(br, { className: W.menuPortal, children: /* @__PURE__ */ r(zs, { asChild: !0, children: /* @__PURE__ */ r(
             Br,
             {
-              className: v(W.menuContent, t),
+              className: C(W.menuContent, t),
               size: a,
               side: A.side,
               align: A.align,
@@ -3136,7 +3136,7 @@ const zs = ({ children: n, ...e }) => /* @__PURE__ */ r(
           ) }) }) : /* @__PURE__ */ r(br, { className: W.menuPortal, children: /* @__PURE__ */ r(zs, { asChild: !0, children: /* @__PURE__ */ r(
             Br,
             {
-              className: v(W.menuContent, t),
+              className: C(W.menuContent, t),
               size: a,
               side: A.side,
               align: A.align,
@@ -3275,7 +3275,7 @@ function Dg({ initialScreen: n, animated: e, children: t }) {
   }, [e]), k = N(
     (T, D = {}) => p((z) => [...z, { name: T, params: D }], "forward"),
     [p]
-  ), f = N(
+  ), v = N(
     () => p((T) => T.length > 1 ? T.slice(0, -1) : T, "back"),
     [p]
   ), m = N(
@@ -3285,12 +3285,12 @@ function Dg({ initialScreen: n, animated: e, children: t }) {
       return D.slice(0, z + 1);
     }, "back"),
     [p]
-  ), C = N(
+  ), f = N(
     (T) => p(() => [{ name: T || n, params: {} }]),
     [p, n]
   ), E = s.length > 1, B = _(
-    () => ({ push: k, pop: f, popTo: m, reset: C, canGoBack: E, stack: s }),
-    [k, f, m, C, E, s]
+    () => ({ push: k, pop: v, popTo: m, reset: f, canGoBack: E, stack: s }),
+    [k, v, m, f, E, s]
   ), I = s[s.length - 1], S = A[I.name];
   if (!S) return null;
   const b = (T, D) => T in o ? o[T] : S[T] ?? D, w = S.component, Q = N(
@@ -3307,7 +3307,7 @@ function Dg({ initialScreen: n, animated: e, children: t }) {
       yi,
       {
         title: b("title"),
-        onBack: E ? f : void 0,
+        onBack: E ? v : void 0,
         headerLeft: b("headerLeft"),
         headerRight: b("headerRight"),
         allowClose: b("allowClose", !0),
@@ -3367,7 +3367,7 @@ const Jg = "_floatingBanner_uvpwv_1", Pg = "_white_uvpwv_12", Ug = "_error_uvpwv
   return /* @__PURE__ */ g(
     "div",
     {
-      className: v(Ne.floatingBanner, h, {
+      className: C(Ne.floatingBanner, h, {
         [Ne.white]: e === "white",
         [Ne.error]: e === "error",
         [Ne.warning]: e === "warning",
@@ -3378,7 +3378,7 @@ const Jg = "_floatingBanner_uvpwv_1", Pg = "_white_uvpwv_12", Ug = "_error_uvpwv
         /* @__PURE__ */ g(
           "div",
           {
-            className: v(Ne.container, {
+            className: C(Ne.container, {
               [Ne.column]: l
             }),
             children: [
@@ -3386,7 +3386,7 @@ const Jg = "_floatingBanner_uvpwv_1", Pg = "_white_uvpwv_12", Ug = "_error_uvpwv
                 t && /* @__PURE__ */ r(
                   "p",
                   {
-                    className: v(Ne.title, {
+                    className: C(Ne.title, {
                       [Ne.strong]: !!i
                     }),
                     children: t
@@ -3507,7 +3507,7 @@ const Zg = "_messageWithActionInfo_152jv_1", _g = "_messageWithAction_152jv_1",
   {
     size: "1",
     color: n === "error" ? "red" : n === "warn" ? "yellow" : "gray",
-    className: v(a, {
+    className: C(a, {
       [Or.messageWithActionInfo]: !o,
       [Or.messageWithAction]: o
     }),
@@ -3556,7 +3556,7 @@ function at({
             {
               size: "2",
               truncate: !0,
-              className: v(_e.neutral12, _e.truncate, {
+              className: C(_e.neutral12, _e.truncate, {
                 [_e.trucateWithInterval]: s
               }),
               children: n
@@ -3609,7 +3609,7 @@ const af = "_group_1wxsi_1", kn = {
     },
     u
   ) });
-  return /* @__PURE__ */ g(y, { className: v(n), style: s, gap: "3", children: [
+  return /* @__PURE__ */ g(y, { className: C(n), style: s, gap: "3", children: [
     o.length > 0 && o.map((c, u) => /* @__PURE__ */ r(
       y,
       {
@@ -3760,14 +3760,14 @@ const VS = os, lf = "_sliderRoot_7wkh4_23", cf = "_sliderTrack_7wkh4_31", df = "
       (S.key === "ArrowUp" || S.key === "ArrowDown") && A(), (S.key === "ArrowLeft" || S.key === "ArrowRight") && (S.preventDefault(), S.stopPropagation(), A());
     },
     [A]
-  ), f = N(
+  ), v = N(
     (S) => {
       n(S.map(c));
     },
     [n, c]
   ), m = N(() => {
     A();
-  }, [A]), C = N(() => {
+  }, [A]), f = N(() => {
     p();
   }, [p]), E = N(() => {
     n([1]), A();
@@ -3789,9 +3789,9 @@ const VS = os, lf = "_sliderRoot_7wkh4_23", cf = "_sliderTrack_7wkh4_31", df = "
       max: 6,
       step: 0.1,
       value: [h ? -60 : u],
-      onValueChange: f,
+      onValueChange: v,
       onPointerDown: m,
-      onPointerUp: C,
+      onPointerUp: f,
       disabled: t,
       children: /* @__PURE__ */ g("div", { className: kt.sliderContainer, children: [
         /* @__PURE__ */ r(ho, { className: kt.sliderTrack, children: /* @__PURE__ */ r(po, { className: kt.sliderRange }) }),
@@ -3802,7 +3802,7 @@ const VS = os, lf = "_sliderRoot_7wkh4_23", cf = "_sliderTrack_7wkh4_31", df = "
               className: kt.sliderThumb,
               onPointerDown: m,
               onKeyDown: k,
-              onBlur: C,
+              onBlur: f,
               onClick: B
             }
           ) }),
@@ -3842,7 +3842,7 @@ const VS = os, lf = "_sliderRoot_7wkh4_23", cf = "_sliderTrack_7wkh4_31", df = "
   return /* @__PURE__ */ g(
     $n,
     {
-      className: v(_t.RadioCardsRoot, c),
+      className: C(_t.RadioCardsRoot, c),
       columns: a,
       defaultValue: e,
       value: h,
@@ -3850,7 +3850,7 @@ const VS = os, lf = "_sliderRoot_7wkh4_23", cf = "_sliderTrack_7wkh4_31", df = "
       ...u,
       children: [
         n.map((p, k) => {
-          const f = p.Icon ?? p.icon, m = p.text ?? p.label ?? p.children;
+          const v = p.Icon ?? p.icon, m = p.text ?? p.label ?? p.children;
           return /* @__PURE__ */ r(
             mn,
             {
@@ -3858,7 +3858,7 @@ const VS = os, lf = "_sliderRoot_7wkh4_23", cf = "_sliderTrack_7wkh4_31", df = "
               disabled: p.disabled || !1,
               className: _t.RadioCardsItem,
               children: /* @__PURE__ */ g(y, { align: "center", gap: "3", className: _t.RadioCardsContent, children: [
-                f && /* @__PURE__ */ r("span", { className: _t.icon, children: typeof f == "function" ? /* @__PURE__ */ r(f, {}) : f }),
+                v && /* @__PURE__ */ r("span", { className: _t.icon, children: typeof v == "function" ? /* @__PURE__ */ r(v, {}) : v }),
                 m && /* @__PURE__ */ r(P, { as: "span", size: "2", weight: "regular", className: _t.text, children: m }),
                 p.children
               ] })
@@ -4006,7 +4006,7 @@ const wn = 19.5, Rn = 19.5, Fr = 14, Hr = 18, bf = [
       I.preventDefault(), c(!0), h(I.clientY);
     },
     [t]
-  ), f = N(
+  ), v = N(
     (I) => {
       if (!l || t) return;
       const S = u - I.clientY;
@@ -4017,7 +4017,7 @@ const wn = 19.5, Rn = 19.5, Fr = 14, Hr = 18, bf = [
     [l, u, n, e, s, t]
   ), m = N(() => {
     c(!1);
-  }, []), C = N(() => {
+  }, []), f = N(() => {
     c(!1);
   }, []), E = N(
     (I) => {
@@ -4032,7 +4032,7 @@ const wn = 19.5, Rn = 19.5, Fr = 14, Hr = 18, bf = [
     },
     [o, t, e, s]
   );
-  return Ot("wheel", p, i), Ot("mousedown", k, i), Ot("mousemove", f), Ot("mouseup", m), Ot("mouseleave", C), {
+  return Ot("wheel", p, i), Ot("mousedown", k, i), Ot("mousemove", v), Ot("mouseup", m), Ot("mouseleave", f), {
     containerRef: i,
     isDragging: l,
     handleClick: E,
@@ -4056,7 +4056,7 @@ const wn = 19.5, Rn = 19.5, Fr = 14, Hr = 18, bf = [
     dots: o || [],
     defaultDot: c,
     clickableDots: a
-  }), k = _(() => typeof e == "object" && e !== null ? e.position : wf(e, o), [e, o]), { pointerRotation: f, pointerColor: m } = _(() => Rf(k, s), [k, s]), C = (E) => {
+  }), k = _(() => typeof e == "object" && e !== null ? e.position : wf(e, o), [e, o]), { pointerRotation: v, pointerColor: m } = _(() => Rf(k, s), [k, s]), f = (E) => {
     const B = jr[E.color] || jr.neutral, I = E.position === k, S = i === E.position && a;
     return s ? B.default : I ? B.active : S ? B.hover : B.default;
   };
@@ -4064,14 +4064,14 @@ const wn = 19.5, Rn = 19.5, Fr = 14, Hr = 18, bf = [
     "div",
     {
       ref: u,
-      className: v(En.content, n),
+      className: C(En.content, n),
       "data-no-drag": "true",
       onClick: A,
       style: { cursor: s ? "default" : "ns-resize" },
       children: /* @__PURE__ */ r(
         "div",
         {
-          className: v(
+          className: C(
             En.pan,
             h && En.active,
             s && En.disabled
@@ -4091,7 +4091,7 @@ const wn = 19.5, Rn = 19.5, Fr = 14, Hr = 18, bf = [
             /* @__PURE__ */ r(
               "g",
               {
-                transform: `rotate(${f} ${wn} ${Rn})`,
+                transform: `rotate(${v} ${wn} ${Rn})`,
                 children: /* @__PURE__ */ r(
                   "path",
                   {
@@ -4106,7 +4106,7 @@ const wn = 19.5, Rn = 19.5, Fr = 14, Hr = 18, bf = [
             o == null ? void 0 : o.map((E) => {
               const B = Bi[E.position];
               if (!B) return null;
-              const I = C(E), S = a && !s;
+              const I = f(E), S = a && !s;
               return /* @__PURE__ */ g(ge.Fragment, { children: [
                 S && /* @__PURE__ */ r(
                   "circle",
@@ -4340,20 +4340,20 @@ const wi = ({
   ...i
 }) => {
   const l = _(() => Object.keys(Os), []), c = _(() => Object.keys(Ms), []), { color: u, graphic: h } = _(() => {
-    let f = n, m = e;
+    let v = n, m = e;
     if (a) {
-      const C = Pv(a);
-      f = f || C.color, m = m || C.graphic;
+      const f = Pv(a);
+      v = v || f.color, m = m || f.graphic;
     }
-    if (!f) {
-      const C = Math.floor(Math.random() * l.length);
-      f = l[C];
+    if (!v) {
+      const f = Math.floor(Math.random() * l.length);
+      v = l[f];
     }
     if (!m) {
-      const C = Math.floor(Math.random() * c.length);
-      m = c[C];
+      const f = Math.floor(Math.random() * c.length);
+      m = c[f];
     }
-    return { color: f, graphic: m };
+    return { color: v, graphic: m };
   }, [n, e, a, l, c]), A = Os[u], p = Ms[h], k = _(
     () => ({
       background: A.gradient,
@@ -4366,7 +4366,7 @@ const wi = ({
     {
       width: t + "px",
       height: s + "px",
-      className: v(o),
+      className: C(o),
       style: k,
       ...i,
       children: /* @__PURE__ */ r("img", { src: p, alt: h, width: t, height: s })
@@ -4389,7 +4389,7 @@ const Uv = ({
   size: A = "1",
   ...p
 }) => {
-  const k = (o == null ? void 0 : o.id) || a, f = (o == null ? void 0 : o.name) || t, m = (o == null ? void 0 : o.description) || s, C = (o == null ? void 0 : o.image) || e, E = (o == null ? void 0 : o.icon) || l, B = C && (C != null && C.startsWith("url(")) ? C == null ? void 0 : C.substring(4, (C == null ? void 0 : C.length) - 1).replace(/"/g, "") : C, I = (Q) => {
+  const k = (o == null ? void 0 : o.id) || a, v = (o == null ? void 0 : o.name) || t, m = (o == null ? void 0 : o.description) || s, f = (o == null ? void 0 : o.image) || e, E = (o == null ? void 0 : o.icon) || l, B = f && (f != null && f.startsWith("url(")) ? f == null ? void 0 : f.substring(4, (f == null ? void 0 : f.length) - 1).replace(/"/g, "") : f, I = (Q) => {
     Q.stopPropagation(), Q.preventDefault(), h == null || h();
   }, S = {
     1: { avatar: 60, icon: 15 },
@@ -4400,7 +4400,7 @@ const Uv = ({
     mn,
     {
       value: k,
-      className: v(
+      className: C(
         n,
         $.listCardsItem,
         $[`listCardsItemSize${A}`]
@@ -4414,7 +4414,7 @@ const Uv = ({
           wi,
           {
             id: k,
-            className: v(
+            className: C(
               $.listCardsAvatar,
               $[`listCardsAvatarSize${A}`]
             ),
@@ -4424,7 +4424,7 @@ const Uv = ({
         ) : c ? /* @__PURE__ */ r(
           "div",
           {
-            className: v(
+            className: C(
               $.listCardsAvatarIcon,
               $[`listCardsAvatarIconSize${A}`]
             ),
@@ -4433,7 +4433,7 @@ const Uv = ({
         ) : E ? /* @__PURE__ */ r(
           "div",
           {
-            className: v(
+            className: C(
               $.listCardsAvatarIcon,
               $[`listCardsAvatarIconSize${A}`]
             ),
@@ -4443,14 +4443,14 @@ const Uv = ({
           We,
           {
             src: B,
-            className: v(
+            className: C(
               $.listCardsAvatar,
               $[`listCardsAvatarSize${A}`]
             )
           }
         ) }),
         /* @__PURE__ */ g(y, { direction: "column", justify: "center", gap: "1", children: [
-          /* @__PURE__ */ r(P, { as: "div", size: "2", className: $.listCardsItemText, children: f }),
+          /* @__PURE__ */ r(P, { as: "div", size: "2", className: $.listCardsItemText, children: v }),
           /* @__PURE__ */ r(
             P,
             {
@@ -4479,13 +4479,13 @@ const Uv = ({
   children: A,
   ...p
 }) => {
-  const k = (a == null ? void 0 : a.id) || s, f = (a == null ? void 0 : a.name) || t, m = (a == null ? void 0 : a.avatar) || e, C = m && (m != null && m.startsWith("url(")) ? m == null ? void 0 : m.substring(4, (m == null ? void 0 : m.length) - 1).replace(/"/g, "") : m;
+  const k = (a == null ? void 0 : a.id) || s, v = (a == null ? void 0 : a.name) || t, m = (a == null ? void 0 : a.avatar) || e, f = m && (m != null && m.startsWith("url(")) ? m == null ? void 0 : m.substring(4, (m == null ? void 0 : m.length) - 1).replace(/"/g, "") : m;
   return /* @__PURE__ */ g("div", { className: $.cardWrapper, children: [
     /* @__PURE__ */ r(
       mn,
       {
         value: k,
-        className: v(n, $.listCardsItem),
+        className: C(n, $.listCardsItem),
         style: {
           "--color-surface": "transparent",
           width: "100%",
@@ -4503,9 +4503,9 @@ const Uv = ({
               overflow: "hidden"
             },
             children: [
-              !c && /* @__PURE__ */ r(We, { src: C, className: $.listCardsAvatar }),
+              !c && /* @__PURE__ */ r(We, { src: f, className: $.listCardsAvatar }),
               /* @__PURE__ */ g(y, { direction: "column", justify: "center", children: [
-                /* @__PURE__ */ r(P, { as: "div", size: "2", className: $.listCardsItemText, children: f }),
+                /* @__PURE__ */ r(P, { as: "div", size: "2", className: $.listCardsItemText, children: v }),
                 /* @__PURE__ */ r(
                   y,
                   {
@@ -4534,7 +4534,7 @@ const Uv = ({
         onClick: c ? (E) => {
           E.stopPropagation(), E.preventDefault(), c(E);
         } : void 0,
-        children: u ? /* @__PURE__ */ r("div", { className: $.avatarContent, children: u }) : /* @__PURE__ */ r(We, { src: C, className: $.listCardsAvatar })
+        children: u ? /* @__PURE__ */ r("div", { className: $.avatarContent, children: u }) : /* @__PURE__ */ r(We, { src: f, className: $.listCardsAvatar })
       }
     ) }),
     /* @__PURE__ */ r("div", { className: $.cardActions, children: /* @__PURE__ */ g(
@@ -4549,7 +4549,7 @@ const Uv = ({
           i && /* @__PURE__ */ r(
             "div",
             {
-              className: v(
+              className: C(
                 $.favoriteButton,
                 $.seeDetailsButton
               ),
@@ -4562,7 +4562,7 @@ const Uv = ({
           l && /* @__PURE__ */ r(
             "div",
             {
-              className: v(
+              className: C(
                 $.buttonGhost,
                 $.seeDetailsButton
               ),
@@ -4683,8 +4683,8 @@ const qS = ({
   placeholder: A = "Select options...",
   ...p
 }) => {
-  const k = (f) => {
-    t && t(f);
+  const k = (v) => {
+    t && t(v);
   };
   return /* @__PURE__ */ g(he, { width: "100%", children: [
     e && /* @__PURE__ */ g(y, { mb: "2", align: "center", gap: "2", children: [
@@ -4694,7 +4694,7 @@ const qS = ({
     /* @__PURE__ */ r(y, { direction: "column", maxWidth: h, children: /* @__PURE__ */ g(
       hr,
       {
-        className: v(n),
+        className: C(n),
         disabled: l || c,
         ...p,
         children: [
@@ -4705,25 +4705,25 @@ const qS = ({
               color: "gray",
               size: o,
               placeholder: A,
-              className: v($e.selectTrigger, {
+              className: C($e.selectTrigger, {
                 [$e.ghost]: i === "ghost",
                 [$e.soft]: i === "soft"
               }),
               children: A
             }
           ),
-          /* @__PURE__ */ r(mr, { position: "popper", style: { height: u }, children: /* @__PURE__ */ r(gr, { children: s.map((f) => /* @__PURE__ */ g(
+          /* @__PURE__ */ r(mr, { position: "popper", style: { height: u }, children: /* @__PURE__ */ r(gr, { children: s.map((v) => /* @__PURE__ */ g(
             y,
             {
               align: "center",
               gap: "2",
               p: "2",
-              className: v($e.selectItem, {
+              className: C($e.selectItem, {
                 [$e.hideIndicator]: !0,
                 [$e.size1]: o === "1",
                 [$e.size2]: o === "2"
               }),
-              onClick: () => k(f.value),
+              onClick: () => k(v.value),
               style: {
                 cursor: l || c ? "not-allowed" : "pointer",
                 width: "100%"
@@ -4733,13 +4733,13 @@ const qS = ({
                   ns,
                   {
                     disabled: l || c,
-                    checked: f.isActived || !1,
+                    checked: v.isActived || !1,
                     size: o
                   }
                 ),
                 /* @__PURE__ */ g(y, { align: "center", gap: "1", style: { flex: 1 }, children: [
-                  /* @__PURE__ */ r(P, { size: o, style: { color: "var(--neutral-12)" }, children: f.label }),
-                  f.aiDetected && /* @__PURE__ */ r(
+                  /* @__PURE__ */ r(P, { size: o, style: { color: "var(--neutral-12)" }, children: v.label }),
+                  v.aiDetected && /* @__PURE__ */ r(
                     P,
                     {
                       size: "1",
@@ -4750,7 +4750,7 @@ const qS = ({
                       children: "✦"
                     }
                   ),
-                  f.extra && /* @__PURE__ */ g(
+                  v.extra && /* @__PURE__ */ g(
                     P,
                     {
                       size: o,
@@ -4760,14 +4760,14 @@ const qS = ({
                       },
                       children: [
                         " ",
-                        f.extra
+                        v.extra
                       ]
                     }
                   )
                 ] })
               ]
             },
-            f.value
+            v.value
           )) }) })
         ]
       }
@@ -4790,7 +4790,7 @@ const qv = "_customCard_1klw4_2", Kv = "_selected_1klw4_18", Gv = "_disabled_1kl
     cr,
     {
       onClick: l ? void 0 : o,
-      className: v(Ft.customCard, {
+      className: C(Ft.customCard, {
         [Ft.selected]: i,
         [Ft.disabled]: l
       }),
@@ -4835,7 +4835,7 @@ const qv = "_customCard_1klw4_2", Kv = "_selected_1klw4_18", Gv = "_disabled_1kl
 }) => /* @__PURE__ */ r(Qt, { height: "100%", width: "100%", scrollbars: "vertical", children: /* @__PURE__ */ r(
   he,
   {
-    className: v(Ft.gridContainer, s),
+    className: C(Ft.gridContainer, s),
     pr: "3",
     ...o,
     children: n.map((i) => /* @__PURE__ */ r(
@@ -4867,7 +4867,7 @@ const $v = "_content_15nbm_1", eC = "_pan_15nbm_13", tC = "_disabled_15nbm_26",
   minValue: a = -0.65,
   maxValue: o = 0.65
 }) => {
-  const i = ee(null), [l, c] = q(!1), u = ee(), [h, A] = q(!1), p = ee(null), k = ee(0), f = ee(e), m = ee(0), C = N(() => {
+  const i = ee(null), [l, c] = q(!1), u = ee(), [h, A] = q(!1), p = ee(null), k = ee(0), v = ee(e), m = ee(0), f = N(() => {
     clearTimeout(u.current), c(!0);
   }, []), E = N(() => {
     h || (u.current = setTimeout(() => c(!1), 300));
@@ -4875,17 +4875,17 @@ const $v = "_content_15nbm_1", eC = "_pan_15nbm_13", tC = "_disabled_15nbm_26",
   de(() => {
     if (h) {
       const U = document.createElement("style");
-      U.textContent = "* { cursor: ns-resize !important; }", document.head.appendChild(U), p.current = U, C();
+      U.textContent = "* { cursor: ns-resize !important; }", document.head.appendChild(U), p.current = U, f();
     } else
       p.current && (document.head.removeChild(p.current), p.current = null), E();
     return () => {
       p.current && (document.head.removeChild(p.current), p.current = null), E(), m.current && cancelAnimationFrame(m.current);
     };
-  }, [h, C, E]);
+  }, [h, f, E]);
   const B = N(
     (U) => {
-      f.current = Lr(U), !m.current && (m.current = requestAnimationFrame(() => {
-        m.current = 0, t(f.current);
+      v.current = Lr(U), !m.current && (m.current = requestAnimationFrame(() => {
+        m.current = 0, t(v.current);
       }));
     },
     [t]
@@ -4942,7 +4942,7 @@ const $v = "_content_15nbm_1", eC = "_pan_15nbm_13", tC = "_disabled_15nbm_26",
     "div",
     {
       ref: i,
-      className: v(Dt.content, n),
+      className: C(Dt.content, n),
       "data-no-drag": "true",
       onClick: Q,
       style: { cursor: s ? "default" : "ns-resize" },
@@ -4950,7 +4950,7 @@ const $v = "_content_15nbm_1", eC = "_pan_15nbm_13", tC = "_disabled_15nbm_26",
         /* @__PURE__ */ r(On, { asChild: !0, children: /* @__PURE__ */ r(
           "div",
           {
-            className: v(
+            className: C(
               Dt.pan,
               h && Dt.active,
               s && Dt.disabled
@@ -5039,7 +5039,7 @@ const aC = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAkACQAAD/2wBDAAEBAQEBAQEBA
       width: e,
       height: e,
       draggable: !1,
-      className: v(n),
+      className: C(n),
       ...a
     }
   );
@@ -5073,7 +5073,7 @@ const dC = "_navItem_6drgg_1", uC = "_navItemIcon_6drgg_12", AC = "_navItemConte
         py: "2",
         role: "button",
         tabIndex: 0,
-        className: v(et.navItem, {
+        className: C(et.navItem, {
           [et.navItemSelected]: c,
           [et.collapsed]: s
         }),
@@ -5086,7 +5086,7 @@ const dC = "_navItem_6drgg_1", uC = "_navItemIcon_6drgg_12", AC = "_navItemConte
           /* @__PURE__ */ g(
             "div",
             {
-              className: v(et.navItemContent, {
+              className: C(et.navItemContent, {
                 [et.navItemContentCollapsed]: s
               }),
               children: [
@@ -5141,7 +5141,7 @@ function NC({ className: n, user: e, collapsed: t, ...s }) {
       onMouseLeave: () => {
         o(!1);
       },
-      className: v(Ke.userProfile, { [Ke.collapsed]: t }, n),
+      className: C(Ke.userProfile, { [Ke.collapsed]: t }, n),
       align: "center",
       justify: t ? "center" : "between",
       ...s,
@@ -5181,7 +5181,7 @@ const xC = ({
   return /* @__PURE__ */ r(
     gn,
     {
-      className: v(Ke.profileMenu, n),
+      className: C(Ke.profileMenu, n),
       trigger: /* @__PURE__ */ r(NC, { user: e, collapsed: s }),
       options: t,
       side: i ? "top" : "right",
@@ -5250,25 +5250,29 @@ const xC = ({
 }, xi = hn({
   onClickTrack: null,
   onInsertAllTracks: null,
+  onProjectClick: null,
   openedItem: null,
   setOpenedItem: () => {
   }
 }), jC = ({
   children: n,
-  onClickTrack: e,
-  onInsertAllTracks: t
+  projects: e = [],
+  onClickTrack: t,
+  onInsertAllTracks: s,
+  onProjectClick: a
 }) => {
-  const [s, a] = q(null);
+  const [o, i] = q(null), l = typeof n == "function" ? n(e) : n;
   return /* @__PURE__ */ r(
     xi.Provider,
     {
       value: {
-        onClickTrack: e,
-        onInsertAllTracks: t,
-        openedItem: s,
-        setOpenedItem: a
+        onClickTrack: t,
+        onInsertAllTracks: s,
+        onProjectClick: a,
+        openedItem: o,
+        setOpenedItem: i
       },
-      children: /* @__PURE__ */ r(y, { direction: "column", width: "100%", children: n })
+      children: /* @__PURE__ */ r(y, { direction: "column", width: "100%", children: l })
     }
   );
 }, WC = ({
@@ -5280,19 +5284,21 @@ const xC = ({
   tracks: o = [],
   ...i
 }) => {
-  const { onClickTrack: l, onInsertAllTracks: c, openedItem: u, setOpenedItem: h } = Wt(xi), [A, p] = q(!1), k = () => {
-    p(!1), h(u === n ? null : n);
-  }, f = (m) => {
-    m.preventDefault(), m.stopPropagation(), p(!A);
-  };
+  const { onClickTrack: l, onInsertAllTracks: c, onProjectClick: u, openedItem: h, setOpenedItem: A } = Wt(xi), [p, k] = q(!1), v = N(() => {
+    k(!1);
+    const f = projects.find((E) => E.id === n);
+    h === n ? (A(null), u == null || u(f, !1)) : (A(n), u == null || u(f, !0));
+  }, [n, h, A, u, projects]), m = N((f) => {
+    f.preventDefault(), f.stopPropagation(), k(!p);
+  }, [p]);
   return /* @__PURE__ */ g(
     y,
     {
       direction: "column",
       gap: "2",
       p: "1",
-      className: `${Oe.item} ${u === n ? Oe.opened : ""}`,
-      onClick: k,
+      className: `${Oe.item} ${h === n ? Oe.opened : ""}`,
+      onClick: v,
       ...i,
       children: [
         /* @__PURE__ */ g(y, { direction: "row", gap: "3", children: [
@@ -5302,30 +5308,30 @@ const xC = ({
             t && /* @__PURE__ */ r(P, { size: "1", className: Oe.projectArtist, children: t })
           ] })
         ] }),
-        u === n && /* @__PURE__ */ g(y, { direction: "column", children: [
+        h === n && /* @__PURE__ */ g(y, { direction: "column", children: [
           o.length === 0 && /* @__PURE__ */ g(y, { direction: "row", gap: "3", p: "5", pt: "2", align: "center", justify: "center", children: [
             /* @__PURE__ */ r(yc, { width: 16, height: 16, style: { color: "var(--neutral-alpha-10)" } }),
             /* @__PURE__ */ r(P, { size: "2", style: { color: "var(--neutral-alpha-10)" }, children: "This file has no tracks" })
           ] }),
           o.length > 0 && /* @__PURE__ */ g(y, { direction: "column", gap: "1", children: [
-            o.slice(0, A ? o.length : 6).map((m) => /* @__PURE__ */ g(
+            o.slice(0, p ? o.length : 6).map((f) => /* @__PURE__ */ g(
               y,
               {
                 direction: "row",
                 gap: "3",
                 className: Oe.itemTrack,
-                onClick: (C) => {
-                  C.stopPropagation(), l == null || l(m);
+                onClick: (E) => {
+                  E.stopPropagation(), l == null || l(f);
                 },
                 children: [
                   /* @__PURE__ */ g("div", { className: Oe.icon, children: [
-                    /* @__PURE__ */ r(y, { className: Oe.iconTrack, children: HC(m.id) }),
+                    /* @__PURE__ */ r(y, { className: Oe.iconTrack, children: HC(f.id) }),
                     /* @__PURE__ */ r(Is, { width: 16, height: 16, className: Oe.iconArrowLeft })
                   ] }),
-                  /* @__PURE__ */ r(y, { direction: "column", gap: "1", align: "start", justify: "center", children: /* @__PURE__ */ r(P, { size: "2", className: Oe.trackTitle, children: m.title }) })
+                  /* @__PURE__ */ r(y, { direction: "column", gap: "1", align: "start", justify: "center", children: /* @__PURE__ */ r(P, { size: "2", className: Oe.trackTitle, children: f.title }) })
                 ]
               },
-              m.id
+              f.id
             )),
             /* @__PURE__ */ g(y, { direction: "row", gap: "3", p: "2", align: "center", justify: "center", children: [
               /* @__PURE__ */ g(
@@ -5334,8 +5340,8 @@ const xC = ({
                   variant: "ghost",
                   color: "neutral",
                   style: { flex: "1" },
-                  onClick: (m) => {
-                    m.stopPropagation(), c == null || c(o);
+                  onClick: (f) => {
+                    f.stopPropagation(), c == null || c(o);
                   },
                   children: [
                     /* @__PURE__ */ r(Is, { width: 16, height: 16 }),
@@ -5345,9 +5351,9 @@ const xC = ({
               ),
               o.length > 6 && /* @__PURE__ */ g(pe, { children: [
                 /* @__PURE__ */ r(Ge, { orientation: "vertical" }),
-                /* @__PURE__ */ g(ke, { variant: "ghost", color: "gray", style: { flex: "1" }, onClick: f, children: [
-                  A ? "Show less" : "Show more",
-                  A ? /* @__PURE__ */ r(kc, { width: 16, height: 16 }) : /* @__PURE__ */ r(fa, { width: 16, height: 16 })
+                /* @__PURE__ */ g(ke, { variant: "ghost", color: "gray", style: { flex: "1" }, onClick: m, children: [
+                  p ? "Show less" : "Show more",
+                  p ? /* @__PURE__ */ r(kc, { width: 16, height: 16 }) : /* @__PURE__ */ r(fa, { width: 16, height: 16 })
                 ] })
               ] })
             ] })
@@ -5374,7 +5380,7 @@ const LC = "_RadioCardsGroup_95mfr_1", VC = "_RadioCardsGroupItem_95mfr_5", qC =
 }) => /* @__PURE__ */ r(
   $n,
   {
-    className: v(tn.RadioCardsGroup, n, {
+    className: C(tn.RadioCardsGroup, n, {
       [tn.showRadio]: t
     }),
     columns: a,
@@ -5413,29 +5419,29 @@ const YC = "_starButton_azi6g_1", ZC = "_disabled_azi6g_17", _C = "_readOnly_azi
   maxLabel: h,
   ...A
 }) => {
-  const [p, k] = q(t || 0), [f, m] = q(0), C = e !== void 0 ? e : p, E = e !== void 0, B = N(
+  const [p, k] = q(t || 0), [v, m] = q(0), f = e !== void 0 ? e : p, E = e !== void 0, B = N(
     (w) => {
       if (s || a) return;
-      const Q = w + 1, O = Q === C ? 0 : Q;
+      const Q = w + 1, O = Q === f ? 0 : Q;
       E || k(O), o == null || o({ value: O });
     },
-    [s, a, E, o, C]
+    [s, a, E, o, f]
   ), I = N(
     (w) => {
       if (s || a) return;
       const Q = w.currentTarget.getBoundingClientRect(), O = w.clientX - Q.left, T = Q.width / n, D = Math.floor(O / T), M = Math.max(0, Math.min(D, n - 1)) + 1;
-      M !== f && (m(M), i == null || i({ value: M }));
+      M !== v && (m(M), i == null || i({ value: M }));
     },
-    [s, a, n, f, i]
+    [s, a, n, v, i]
   ), S = N(() => {
     s || a || (m(0), i == null || i({ value: 0 }));
   }, [s, a, i]), b = (w) => {
-    const Q = f > 0 ? w < f : w < C, O = f > 0 && w < f, T = w < C;
+    const Q = v > 0 ? w < v : w < f, O = v > 0 && w < v, T = w < f;
     return /* @__PURE__ */ r(
       "button",
       {
         type: "button",
-        className: v(De.starButton, {
+        className: C(De.starButton, {
           [De.filled]: Q,
           [De.hovered]: O,
           [De.active]: T,
@@ -5458,7 +5464,7 @@ const YC = "_starButton_azi6g_1", ZC = "_disabled_azi6g_17", _C = "_readOnly_azi
       align: "center",
       gap: "2",
       width: "100%",
-      className: v(l),
+      className: C(l),
       children: [
         c && /* @__PURE__ */ r(P, { size: "2", weight: "medium", className: De.label, children: c }),
         /* @__PURE__ */ g(y, { direction: "column", gap: "1", width: "100%", children: [
@@ -5471,7 +5477,7 @@ const YC = "_starButton_azi6g_1", ZC = "_disabled_azi6g_17", _C = "_readOnly_azi
               justify: "center",
               className: De.starsContainer,
               role: "radiogroup",
-              "aria-label": `Rating: ${C} out of ${n} stars`,
+              "aria-label": `Rating: ${f} out of ${n} stars`,
               onMouseMove: I,
               onMouseLeave: S,
               children: Array.from({ length: n }, (w, Q) => b(Q))
@@ -5514,7 +5520,7 @@ const l1 = "_select_egrq6_1", c1 = "_levelMeter_egrq6_5", d1 = "_levelMeterTrack
     P,
     {
       size: a ? void 0 : n,
-      className: v(e, a && v1.textSize0),
+      className: C(e, a && v1.textSize0),
       ...s,
       children: t
     }
@@ -5545,7 +5551,7 @@ const C1 = "_selectContent_183an_2", y1 = "_selectTrigger_183an_68", k1 = "_soft
   showSelectIndicator: A = !0,
   maxWidth: p = "100%",
   placeholder: k = null,
-  ...f
+  ...v
 }) => /* @__PURE__ */ g(he, { width: "100%", children: [
   e && /* @__PURE__ */ g(y, { mb: "2", align: "center", gap: "2", children: [
     /* @__PURE__ */ r(P, { size: "1", weight: "bold", children: e }),
@@ -5556,9 +5562,9 @@ const C1 = "_selectContent_183an_2", y1 = "_selectTrigger_183an_68", k1 = "_soft
     {
       onValueChange: t,
       defaultValue: s,
-      className: v(n),
+      className: C(n),
       disabled: c || u,
-      ...f,
+      ...v,
       children: [
         /* @__PURE__ */ r(
           pr,
@@ -5566,7 +5572,7 @@ const C1 = "_selectContent_183an_2", y1 = "_selectTrigger_183an_68", k1 = "_soft
             variant: l,
             color: "gray",
             size: i,
-            className: v(qe.selectTrigger, {
+            className: C(qe.selectTrigger, {
               [qe.ghost]: l === "ghost",
               [qe.soft]: l === "soft"
             }),
@@ -5602,7 +5608,7 @@ const C1 = "_selectContent_183an_2", y1 = "_selectTrigger_183an_68", k1 = "_soft
                 oi,
                 {
                   value: m.value,
-                  className: v(qe.selectItem, {
+                  className: C(qe.selectItem, {
                     [qe.hideIndicator]: !A,
                     [qe.size1]: i === "1",
                     [qe.size2]: i === "2"
@@ -5680,9 +5686,9 @@ const w1 = "_sliderTrack_bq3k4_29", R1 = "_sliderTrackSize1_bq3k4_40", N1 = "_sl
   disabled: A = !1,
   highContrast: p = !1,
   markers: k = [],
-  ...f
+  ...v
 }) => {
-  const m = (C) => (C - l) / (c - l) * 100;
+  const m = (f) => (f - l) / (c - l) * 100;
   return /* @__PURE__ */ g(he, { width: "100%", children: [
     e && /* @__PURE__ */ g(y, { mb: "2", justify: "between", align: "center", children: [
       /* @__PURE__ */ g(y, { align: "center", gap: "2", children: [
@@ -5709,12 +5715,12 @@ const w1 = "_sliderTrack_bq3k4_29", R1 = "_sliderTrackSize1_bq3k4_40", N1 = "_sl
         onValueChange: t,
         disabled: A,
         className: n,
-        ...f,
+        ...v,
         children: /* @__PURE__ */ g(y, { className: Ce.sliderContainer, children: [
           /* @__PURE__ */ g(
             ho,
             {
-              className: v(Ce.sliderTrack, {
+              className: C(Ce.sliderTrack, {
                 [Ce.sliderTrackSize1]: h === "1",
                 [Ce.sliderTrackSize2]: h === "2",
                 [Ce.sliderTrackSize3]: h === "3"
@@ -5723,7 +5729,7 @@ const w1 = "_sliderTrack_bq3k4_29", R1 = "_sliderTrackSize1_bq3k4_40", N1 = "_sl
                 /* @__PURE__ */ r(
                   po,
                   {
-                    className: v(Ce.sliderRange, {
+                    className: C(Ce.sliderRange, {
                       [Ce.sliderRangeAccent]: s === "accent",
                       [Ce.sliderRangeNeutral]: s === "neutral",
                       [Ce.sliderRangeHighContrastNeutral]: p && s === "neutral",
@@ -5734,7 +5740,7 @@ const w1 = "_sliderTrack_bq3k4_29", R1 = "_sliderTrackSize1_bq3k4_40", N1 = "_sl
                 /* @__PURE__ */ r(
                   mo,
                   {
-                    className: v(Ce.sliderThumb, {
+                    className: C(Ce.sliderThumb, {
                       [Ce.sliderThumbSize1]: h === "1",
                       [Ce.sliderThumbSize2]: h === "2",
                       [Ce.sliderThumbSize3]: h === "3"
@@ -5744,14 +5750,14 @@ const w1 = "_sliderTrack_bq3k4_29", R1 = "_sliderTrackSize1_bq3k4_40", N1 = "_sl
               ]
             }
           ),
-          k.length > 0 && /* @__PURE__ */ r("div", { className: Ce.markersContainer, children: k.map((C, E) => /* @__PURE__ */ r(
+          k.length > 0 && /* @__PURE__ */ r("div", { className: Ce.markersContainer, children: k.map((f, E) => /* @__PURE__ */ r(
             "div",
             {
-              className: v(Ce.marker, {
+              className: C(Ce.marker, {
                 [Ce.markerSize3]: h === "3"
               }),
               style: {
-                left: `${m(C)}%`
+                left: `${m(f)}%`
               }
             },
             E
@@ -5777,7 +5783,7 @@ const L1 = ({
   inputVolume: A,
   onInputVolumeChange: p,
   inputVolumeDb: k,
-  inputLevel: f
+  inputLevel: v
 }) => /* @__PURE__ */ g(y, { direction: "column", gap: "4", width: "200px", children: [
   /* @__PURE__ */ g(y, { gap: "1", direction: "column", children: [
     /* @__PURE__ */ r(j, { size: "2", mb: "1", weight: "medium", children: n._("Source") }),
@@ -5808,15 +5814,15 @@ const L1 = ({
   ] }),
   /* @__PURE__ */ g(y, { gap: "2", direction: "column", children: [
     /* @__PURE__ */ r(j, { size: "2", weight: "medium", children: n._("Input Level") }),
-    /* @__PURE__ */ r("div", { className: tt.levelMeter, children: /* @__PURE__ */ r("div", { className: tt.levelMeterTrack, children: /* @__PURE__ */ r("div", { className: tt.levelMeterRow, children: Array.from({ length: 17 }, (m, C) => {
-      const E = Math.max(0, (f - 5) / 25) * 17, B = C < E;
+    /* @__PURE__ */ r("div", { className: tt.levelMeter, children: /* @__PURE__ */ r("div", { className: tt.levelMeterTrack, children: /* @__PURE__ */ r("div", { className: tt.levelMeterRow, children: Array.from({ length: 17 }, (m, f) => {
+      const E = Math.max(0, (v - 5) / 25) * 17, B = f < E;
       let I = "low";
-      return C >= 15 ? I = "high" : C >= 11 && (I = "mid"), /* @__PURE__ */ r(
+      return f >= 15 ? I = "high" : f >= 11 && (I = "mid"), /* @__PURE__ */ r(
         "div",
         {
           className: `${tt.levelMeterSegment} ${B ? `${tt.active} ${tt[I]}` : ""}`
         },
-        `level-${C}`
+        `level-${f}`
       );
     }) }) }) })
   ] }),
@@ -5897,7 +5903,7 @@ const V1 = "_sectionExpander_t40ea_1", q1 = "_sectionExpanderHeader_t40ea_6", K1
     {
       width: "100%",
       direction: "column",
-      className: v(Jt.sectionExpander, t),
+      className: C(Jt.sectionExpander, t),
       ...s,
       children: [
         /* @__PURE__ */ g(
@@ -5922,7 +5928,7 @@ const V1 = "_sectionExpander_t40ea_1", q1 = "_sectionExpanderHeader_t40ea_6", K1
                 /* @__PURE__ */ r(
                   Ic,
                   {
-                    className: v(Jt.sectionExpanderIcon, {
+                    className: C(Jt.sectionExpanderIcon, {
                       [Jt.expanded]: a
                     }),
                     width: 16,
@@ -5956,7 +5962,7 @@ const Un = ({
     onValueChange: s,
     variant: "surface",
     radius: "medium",
-    className: v("customSegmentedControl", n, {
+    className: C("customSegmentedControl", n, {
       hasIconSegmentedControl: a.some((l) => l.icon)
     }),
     ...i,
@@ -5964,7 +5970,7 @@ const Un = ({
       ai,
       {
         value: l.value,
-        className: v("customSegmentedControlItem", {
+        className: C("customSegmentedControlItem", {
           hasIcon: l.icon
         }),
         children: [
@@ -6048,7 +6054,7 @@ const _1 = "_tooltipTriggerWrapper_1hj63_1", $1 = "_newSetlistItem_1hj63_6", ey
     /* @__PURE__ */ r(pa, { children: /* @__PURE__ */ r(zs, { asChild: !0, children: /* @__PURE__ */ g(
       Fn,
       {
-        className: v(
+        className: C(
           Pt.TooltipContent,
           Pt[`TooltipContent--${s}`]
         ),
@@ -6056,7 +6062,7 @@ const _1 = "_tooltipTriggerWrapper_1hj63_1", $1 = "_newSetlistItem_1hj63_6", ey
         ...A,
         children: [
           /* @__PURE__ */ r(j, { size: "1", className: Pt.TooltipText, children: e }),
-          t && /* @__PURE__ */ r(j, { size: "0", className: v(
+          t && /* @__PURE__ */ r(j, { size: "0", className: C(
             Pt.TooltipShortcut,
             Pt[`TooltipShortcut--${s}`]
           ), children: t }),
@@ -6073,7 +6079,7 @@ function Jy({ onExpand: n, className: e, style: t, collapsed: s = !1 }) {
     "button",
     {
       type: "button",
-      className: v(
+      className: C(
         K.newSetlistItem,
         K.collapsedStackItem,
         K.collapsedTransition,
@@ -6101,11 +6107,11 @@ function Py({ onClick: n, className: e, collapsed: t = !1 }) {
         {
           width: 16,
           height: 16,
-          className: v(K.iconSwapLayer, K.iconVisible, K.plusIcon)
+          className: C(K.iconSwapLayer, K.iconVisible, K.plusIcon)
         }
       ) }),
       text: "New Setlist",
-      className: v(K.newSetlistItemButton, K.collapsedTransition, e),
+      className: C(K.newSetlistItemButton, K.collapsedTransition, e),
       collapsed: t
     }
   );
@@ -6156,7 +6162,7 @@ const Qi = ({
   collapsed: p = !1,
   isMobile: k = !1
 }) => {
-  const [f, m] = q(!1), C = () => {
+  const [v, m] = q(!1), f = () => {
     m(!0);
   }, E = () => {
     m(!1);
@@ -6173,12 +6179,12 @@ const Qi = ({
       role: e ? "button" : void 0,
       tabIndex: e ? 0 : void 0,
       onClick: e,
-      className: v(K.newSetlistItem, t, {
+      className: C(K.newSetlistItem, t, {
         [K.navItemSelected]: n,
         [K.collapsed]: p,
         [K.menuOpen]: c
       }),
-      onMouseEnter: C,
+      onMouseEnter: f,
       onMouseLeave: E,
       onKeyDown: e ? (S) => {
         (S.key === "Enter" || S.key === " ") && (S.preventDefault(), e == null || e());
@@ -6190,7 +6196,7 @@ const Qi = ({
           {
             gap: "3",
             align: "center",
-            className: v(K.contentInner, {
+            className: C(K.contentInner, {
               [K.collapsedInner]: p
             }),
             children: [
@@ -6207,7 +6213,7 @@ const Qi = ({
                 y,
                 {
                   direction: "column",
-                  className: v(K.textWrapper, {
+                  className: C(K.textWrapper, {
                     [K.textWrapperHidden]: p
                   }),
                   children: [
@@ -6237,7 +6243,7 @@ const Qi = ({
             ]
           }
         ),
-        l && !p && (f || c) && /* @__PURE__ */ r(
+        l && !p && (v || c) && /* @__PURE__ */ r(
           gn,
           {
             open: c,
@@ -6245,7 +6251,7 @@ const Qi = ({
             trigger: /* @__PURE__ */ r(
               y,
               {
-                className: v(K.dropdownTriggerWrapper, {
+                className: C(K.dropdownTriggerWrapper, {
                   [K.dropdownTriggerWrapperMobile]: k
                 }),
                 onPointerDown: B,
@@ -6271,16 +6277,16 @@ const Qi = ({
     t == null || t(x), l && i();
   }, A = () => {
     s == null || s(), l && i();
-  }, [p, k] = q(!1), [f, m] = q(!1), C = ee(null), E = ee(null), B = ee(null), I = 260, S = 4, b = a && s ? 1 : 0, w = a && !p, Q = w ? n.slice(0, S) : n, O = 2750, T = () => {
-    a && (C.current && (clearTimeout(C.current), C.current = null), E.current && (clearTimeout(E.current), E.current = null), m(!1));
+  }, [p, k] = q(!1), [v, m] = q(!1), f = ee(null), E = ee(null), B = ee(null), I = 260, S = 4, b = a && s ? 1 : 0, w = a && !p, Q = w ? n.slice(0, S) : n, O = 2750, T = () => {
+    a && (f.current && (clearTimeout(f.current), f.current = null), E.current && (clearTimeout(E.current), E.current = null), m(!1));
   }, D = () => {
-    a && p && (C.current && clearTimeout(C.current), C.current = setTimeout(() => {
-      C.current = null, m(!0), E.current = setTimeout(() => {
+    a && p && (f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+      f.current = null, m(!0), E.current = setTimeout(() => {
         E.current = null, k(!1), m(!1);
       }, I);
     }, O));
   }, z = (x) => {
-    a && (x.stopPropagation(), C.current && (clearTimeout(C.current), C.current = null), m(!1), k(!0));
+    a && (x.stopPropagation(), f.current && (clearTimeout(f.current), f.current = null), m(!1), k(!0));
   }, M = () => {
     a && k(!0);
   }, U = () => {
@@ -6291,7 +6297,7 @@ const Qi = ({
     }, 0);
   };
   de(() => () => {
-    C.current && clearTimeout(C.current), E.current && clearTimeout(E.current);
+    f.current && clearTimeout(f.current), E.current && clearTimeout(E.current);
   }, []);
   const J = (x) => {
     if (!a) return;
@@ -6320,7 +6326,7 @@ const Qi = ({
       type: "scroll",
       scrollbars: "vertical",
       style: { flex: 1, minHeight: 0 },
-      className: v({
+      className: C({
         [K.setlistsScrollArea]: a
       }),
       children: /* @__PURE__ */ r(
@@ -6336,10 +6342,10 @@ const Qi = ({
             y,
             {
               direction: "column",
-              className: v(K.setlistsContent, {
+              className: C(K.setlistsContent, {
                 [K.collapsedStack]: w,
                 [K.collapsedMask]: a,
-                [K.collapsedShrinking]: f
+                [K.collapsedShrinking]: v
               }),
               children: [
                 s && (w ? /* @__PURE__ */ r(
@@ -6380,7 +6386,7 @@ const Qi = ({
                       dropdownMenuOptions: x.dropdownMenuOptions,
                       collapsed: a,
                       isMobile: o,
-                      className: v({
+                      className: C({
                         [K.collapsedStackItem]: w,
                         [K.collapsedTransition]: a
                       }),
@@ -6448,17 +6454,17 @@ const Qi = ({
 }) => {
   const { isMobile: i, isOpen: l, open: c, close: u } = Ti(), [h, A] = q(!1), p = i ? !1 : t, k = () => {
     i || (A(!1), s((E) => !E));
-  }, f = () => {
+  }, v = () => {
     i || A(!0);
   }, m = () => {
     i || A(!1);
-  }, C = (E) => {
+  }, f = (E) => {
     p ? k() : a && a(E);
   };
   return /* @__PURE__ */ r(Lh, { value: { close: u, isMobile: i }, children: /* @__PURE__ */ g(
     "div",
     {
-      className: v(oe.root, {
+      className: C(oe.root, {
         [oe.rootCollapsed]: p
       }),
       ...o,
@@ -6468,7 +6474,7 @@ const Qi = ({
           {
             align: "center",
             justify: "between",
-            className: v(oe.mobileTopBar, {
+            className: C(oe.mobileTopBar, {
               [oe.mobileTopBarOpen]: i && l
             }),
             children: [
@@ -6503,14 +6509,14 @@ const Qi = ({
         /* @__PURE__ */ r(
           "div",
           {
-            className: v(oe.mobileDrawer, {
+            className: C(oe.mobileDrawer, {
               [oe.mobileDrawerOpen]: i && l
             }),
             children: /* @__PURE__ */ r(
               y,
               {
                 direction: "column",
-                className: v(oe.mobileDrawerContent, {
+                className: C(oe.mobileDrawerContent, {
                   [oe.mobileDrawerContentOpen]: i && l
                 }),
                 children: e
@@ -6523,7 +6529,7 @@ const Qi = ({
           {
             direction: "column",
             className: oe.desktopSidebar,
-            onMouseEnter: f,
+            onMouseEnter: v,
             onMouseLeave: m,
             children: [
               /* @__PURE__ */ g(
@@ -6531,7 +6537,7 @@ const Qi = ({
                 {
                   align: "center",
                   justify: "between",
-                  className: v(oe.header, {
+                  className: C(oe.header, {
                     [oe.headerCollapsed]: p
                   }),
                   children: [
@@ -6540,13 +6546,13 @@ const Qi = ({
                       {
                         align: "center",
                         gap: "2",
-                        onClick: C,
+                        onClick: f,
                         style: { cursor: "pointer" },
                         children: [
                           /* @__PURE__ */ g(
                             "div",
                             {
-                              className: v(oe.logoToggleContainer, {
+                              className: C(oe.logoToggleContainer, {
                                 [oe.logoToggleContainerCollapsed]: p
                               }),
                               children: [
@@ -6555,7 +6561,7 @@ const Qi = ({
                                   {
                                     width: 32,
                                     height: 17,
-                                    className: v(oe.logoInContainer, {
+                                    className: C(oe.logoInContainer, {
                                       [oe.logoInContainerHidden]: p && h
                                     })
                                   }
@@ -6565,7 +6571,7 @@ const Qi = ({
                                   {
                                     width: 16,
                                     height: 16,
-                                    className: v(oe.toggleInContainer, {
+                                    className: C(oe.toggleInContainer, {
                                       [oe.toggleInContainerVisible]: p && h
                                     })
                                   }
@@ -6577,7 +6583,7 @@ const Qi = ({
                             Rr,
                             {
                               height: 12.269,
-                              className: v(oe.moisesIcon, {
+                              className: C(oe.moisesIcon, {
                                 [oe.moisesIconHidden]: p
                               })
                             }
@@ -6591,7 +6597,7 @@ const Qi = ({
                         align: "center",
                         justify: "center",
                         onClick: k,
-                        className: v(oe.toggleButton, {
+                        className: C(oe.toggleButton, {
                           [oe.toggleButtonHidden]: p
                         }),
                         children: /* @__PURE__ */ r(Nr, { width: 16, height: 16 })
@@ -6633,7 +6639,7 @@ const lk = "_sectionTitle_bwlze_1", ck = "_separator_bwlze_17", qr = {
   onNewSetlistClick: h,
   children: A
 }) => {
-  const [p, k] = q(!1), { isMobile: f } = Ti(), m = f ? !1 : p;
+  const [p, k] = q(!1), { isMobile: v } = Ti(), m = v ? !1 : p;
   return /* @__PURE__ */ g(pe, { children: [
     /* @__PURE__ */ g(Di, { isCollapsed: p, onCollapsedChange: k, children: [
       /* @__PURE__ */ g(y, { direction: "column", children: [
@@ -6663,7 +6669,7 @@ const lk = "_sectionTitle_bwlze_1", ck = "_separator_bwlze_17", qr = {
                 onSetlistClick: u,
                 onNewSetlistClick: h,
                 collapsed: m,
-                isMobile: f
+                isMobile: v
               }
             )
           ]
@@ -6736,7 +6742,7 @@ const lk = "_sectionTitle_bwlze_1", ck = "_separator_bwlze_17", qr = {
       onChange: e,
       placeholder: t,
       disabled: c,
-      className: v(St.textArea, o, {
+      className: C(St.textArea, o, {
         [St.variantClassic]: i === "classic",
         [St.variantSoft]: i === "soft",
         [St.disabled]: c,
@@ -6779,7 +6785,7 @@ const In = (n) => {
   { value: "strings", label: n._("Strings"), icon: Ks },
   { value: "generic", label: n._("Others"), icon: Bc }
 ], Ek = {
-  steps: 30,
+  steps: 50,
   guidanceScale: null,
   autoGuidanceScale: !0,
   instrument: "generic",
@@ -6827,7 +6833,7 @@ const In = (n) => {
   onFetchSuggestedTags: h,
   suggestedTagsLoading: A
 }) => {
-  const p = ee(null), k = ee(null), [f, m] = q(!1), C = N((b) => {
+  const p = ee(null), k = ee(null), [v, m] = q(!1), f = N((b) => {
     const w = b.target, Q = w.scrollLeft + w.clientWidth >= w.scrollWidth - 2;
     m(Q);
   }, []), E = !!i || !!c, B = N(
@@ -6968,13 +6974,13 @@ const In = (n) => {
                         "div",
                         {
                           className: Fe.tagsWrapper,
-                          "data-scrolled-end": f || void 0,
+                          "data-scrolled-end": v || void 0,
                           children: /* @__PURE__ */ r(
                             "div",
                             {
                               ref: k,
                               className: Fe.tagsContainer,
-                              onScroll: C,
+                              onScroll: f,
                               children: u.map((b) => /* @__PURE__ */ r(
                                 ke,
                                 {
@@ -7108,14 +7114,14 @@ function Pk({
   var l, c, u, h, A, p;
   const o = n.customizeCreativeFreedom || !1, i = N(
     async (k) => {
-      var f, m, C;
+      var v, m, f;
       await a() || s({
         ...n,
         customizeCreativeFreedom: k,
         // initialize defaults for sliders when enabling
-        guidanceClap: k ? n.guidanceClap ?? ((f = je[n.instrument]) == null ? void 0 : f.clap) ?? 4 : null,
+        guidanceClap: k ? n.guidanceClap ?? ((v = je[n.instrument]) == null ? void 0 : v.clap) ?? 4 : null,
         guidanceContextAudio: k ? n.guidanceContextAudio ?? ((m = je[n.instrument]) == null ? void 0 : m.context) ?? 4 : null,
-        guidanceContextChroma: k ? n.instrument === "drums" ? null : n.guidanceContextChroma ?? ((C = je[n.instrument]) == null ? void 0 : C.chroma) ?? 4 : null
+        guidanceContextChroma: k ? n.instrument === "drums" ? null : n.guidanceContextChroma ?? ((f = je[n.instrument]) == null ? void 0 : f.chroma) ?? 4 : null
       });
     },
     [n, s, a]
@@ -7271,7 +7277,7 @@ function zk({
         variant: "soft",
         size: "2",
         disabled: s,
-        className: v([Gr.customIconButton], {
+        className: C([Gr.customIconButton], {
           [Gr.disabledIconButton]: s
         }),
         children: /* @__PURE__ */ r(ya, { width: 16, height: 16 })
@@ -7469,9 +7475,9 @@ const Nn = {
   onClickUpgradeConcurrency: A,
   error: p,
   generateFromTrack: k,
-  inpaintingTrack: f,
+  inpaintingTrack: v,
   generateFromSelectionTrack: m,
-  unmutedTracksCount: C,
+  unmutedTracksCount: f,
   onMountConcurrency: E,
   onClear: B,
   onInspireMe: I,
@@ -7489,10 +7495,10 @@ const Nn = {
     (le) => le.instrument === n.instrument
   ), H = _(() => {
     const le = M === "2" && R, be = M === "1" || !R;
-    return u || C === 0 || le && !n.presetId || be && !n.conditioningText && !n.conditioningAudio;
+    return u || f === 0 || le && !n.presetId || be && !n.conditioningText && !n.conditioningAudio;
   }, [
     u,
-    C,
+    f,
     M,
     R,
     n.presetId,
@@ -7705,9 +7711,9 @@ const Nn = {
                         Wk,
                         {
                           generateFromTrack: k,
-                          inpaintingTrack: f,
+                          inpaintingTrack: v,
                           generateFromSelectionTrack: m,
-                          unmutedTracksCount: C,
+                          unmutedTracksCount: f,
                           onClear: B,
                           i18n: i
                         }
@@ -7862,10 +7868,10 @@ const Xr = {
   showHiFiPaywall: A,
   onClearTrack: p,
   showStemsPaywall: k,
-  showHiFiSwitch: f
+  showHiFiSwitch: v
 }) => {
   var S;
-  const { submitted: m, handleSubmit: C } = Ir(i), E = [
+  const { submitted: m, handleSubmit: f } = Ir(i), E = [
     {
       value: "freeVocalInstruments",
       name: n._("Vocals & Instruments"),
@@ -8054,9 +8060,9 @@ const Xr = {
             title: n._("Separate Stems"),
             disabled: !((S = l == null ? void 0 : l.selectedStems) != null && S.length) || !(l != null && l.trackName),
             loading: u,
-            onClick: C,
+            onClick: f,
             besideFooter: /* @__PURE__ */ g(y, { align: "center", gap: "2", children: [
-              f && /* @__PURE__ */ r(it, { checked: !1, onCheckedChange: A }),
+              v && /* @__PURE__ */ r(it, { checked: !1, onCheckedChange: A }),
               /* @__PURE__ */ r(Dc, {})
             ] }),
             color: "cyan",
@@ -8262,10 +8268,10 @@ const Xr = {
   startSlot: A,
   endSlot: p,
   error: k,
-  secondaryText: f,
+  secondaryText: v,
   ...m
 }) => {
-  const C = A || (u ? /* @__PURE__ */ r(u, { width: 16, height: 16, className: He.icon }) : null);
+  const f = A || (u ? /* @__PURE__ */ r(u, { width: 16, height: 16, className: He.icon }) : null);
   return /* @__PURE__ */ g(y, { direction: "column", width: "100%", height: "100%", gap: "1", children: [
     s && /* @__PURE__ */ g(y, { align: "center", gap: "2", children: [
       /* @__PURE__ */ r(P, { size: c, weight: "medium", children: s }),
@@ -8278,7 +8284,7 @@ const Xr = {
         value: n,
         onChange: e,
         placeholder: t,
-        className: v(He.TextField, o, {
+        className: C(He.TextField, o, {
           [He.Disabled]: i,
           [He.ReadOnly]: l,
           [He.focusRing]: h || k,
@@ -8289,20 +8295,20 @@ const Xr = {
         disabled: i,
         ...m,
         children: [
-          C && /* @__PURE__ */ r(pi, { children: C }),
+          f && /* @__PURE__ */ r(pi, { children: f }),
           p && /* @__PURE__ */ r("div", { className: He.endSlot, children: p })
         ]
       }
     ),
-    f && /* @__PURE__ */ r(
+    v && /* @__PURE__ */ r(
       P,
       {
         size: "1",
         weight: "regular",
-        className: v(He.secondaryText, {
+        className: C(He.secondaryText, {
           [He.errorText]: k
         }),
-        children: f
+        children: v
       }
     )
   ] });
@@ -8597,7 +8603,7 @@ const fE = "_button_1270x_1", vE = "_active_1270x_7", CE = "_mute_1270x_16", yE
     return /* @__PURE__ */ r(
       ke,
       {
-        className: v(bn.button, t, {
+        className: C(bn.button, t, {
           [bn.mute]: a,
           [bn.solo]: !a,
           [bn.active]: e
@@ -8650,18 +8656,18 @@ const kE = "_track_1xe9y_1", EE = "_leftIcon_1xe9y_9", SE = "_name_1xe9y_15", IE
     // State change listeners
     onVolumeChange: p,
     onPanChange: k,
-    onMutedChange: f,
+    onMutedChange: v,
     onSoloChange: m,
-    onOpenChange: C,
+    onOpenChange: f,
     // Children (having content means group/takelanes)
     children: E
   }) => {
-    const B = !!E, I = N(() => C == null ? void 0 : C(!A), [A, C]);
-    return /* @__PURE__ */ g("div", { className: v(me.container, { [me.isOpen]: A }), children: [
+    const B = !!E, I = N(() => f == null ? void 0 : f(!A), [A, f]);
+    return /* @__PURE__ */ g("div", { className: C(me.container, { [me.isOpen]: A }), children: [
       /* @__PURE__ */ g(
         "div",
         {
-          className: v(me.track, {
+          className: C(me.track, {
             [me.isParentTrack]: B,
             [me.isCompact]: i
           }),
@@ -8741,7 +8747,7 @@ const kE = "_track_1xe9y_1", EE = "_leftIcon_1xe9y_9", SE = "_name_1xe9y_15", IE
                       className: me.rightButton,
                       variant: "mute",
                       isActive: u,
-                      onChange: f
+                      onChange: v
                     }
                   ),
                   /* @__PURE__ */ r(
@@ -8782,11 +8788,11 @@ function XS({ schema: n }) {
     }
     for (const m of i.current) m(e);
   }, [e]);
-  const c = N((m, C) => {
-    t((E) => ({ ...E, [m]: C })), a((E) => ({ ...E, [m]: null }));
-  }, []), u = (m, C) => {
+  const c = N((m, f) => {
+    t((E) => ({ ...E, [m]: f })), a((E) => ({ ...E, [m]: null }));
+  }, []), u = (m, f) => {
     const E = e[m], B = (I) => c(m, I);
-    return C === "checkbox" || C === "switch" ? { checked: !!E, onCheckedChange: B } : { value: E ?? "", onChange: (I) => {
+    return f === "checkbox" || f === "switch" ? { checked: !!E, onCheckedChange: B } : { value: E ?? "", onChange: (I) => {
       var S;
       return B(((S = I == null ? void 0 : I.target) == null ? void 0 : S.value) ?? I);
     } };
@@ -8794,24 +8800,24 @@ function XS({ schema: n }) {
     const m = n.safeParse(e);
     if (m.success)
       return a({}), { isValid: !0, data: m.data };
-    const C = {};
+    const f = {};
     for (const E of m.error.issues) {
       const B = E.path.join(".");
-      C[B] || (C[B] = E.message);
+      f[B] || (f[B] = E.message);
     }
-    return a(C), { isValid: !1, data: e };
+    return a(f), { isValid: !1, data: e };
   }, A = N((m) => (i.current.push(m), () => {
-    i.current = i.current.filter((C) => C !== m);
+    i.current = i.current.filter((f) => f !== m);
   }), []), p = (m) => {
-    const C = s[m];
-    return C ? /* @__PURE__ */ r(j, { size: "1", color: "red", children: C }) : null;
+    const f = s[m];
+    return f ? /* @__PURE__ */ r(j, { size: "1", color: "red", children: f }) : null;
   }, k = (m) => {
     t(m ?? n.parse({})), a({});
-  }, f = N(
+  }, v = N(
     (m) => /* @__PURE__ */ r(jE, { ...m, errorsRef: o }),
     []
   );
-  return { connectField: u, Field: f, error: p, values: e, set: c, reset: k, getValues: h, watchValues: A };
+  return { connectField: u, Field: v, error: p, values: e, set: c, reset: k, getValues: h, watchValues: A };
 }
 const WE = "_overlay_9c05p_1", LE = "_showOverlay_9c05p_18", Cs = {
   overlay: WE,
@@ -8847,7 +8853,7 @@ const VE = ({ isPlaying: n, image: e, name: t, children: s }) => {
         /* @__PURE__ */ r(
           "div",
           {
-            className: v(Cs.overlay, {
+            className: C(Cs.overlay, {
               [Cs.showOverlay]: n || a
             }),
             children: s
@@ -9229,11 +9235,11 @@ class _E extends fn {
       };
       const A = (p) => {
         if (p.button !== o || (c.set(p.pointerId, p), c.size > 1)) return;
-        let k = p.clientX, f = p.clientY, m = !1;
-        const C = Date.now(), E = t.getBoundingClientRect(), { left: B, top: I } = E, S = (T) => {
-          if (T.defaultPrevented || c.size > 1 || u && Date.now() - C < i) return;
-          const D = T.clientX, z = T.clientY, M = D - k, U = z - f;
-          (m || Math.abs(M) > a || Math.abs(U) > a) && (T.preventDefault(), T.stopPropagation(), m || (l.set({ type: "start", x: k - B, y: f - I }), m = !0), l.set({ type: "move", x: D - B, y: z - I, deltaX: M, deltaY: U }), k = D, f = z);
+        let k = p.clientX, v = p.clientY, m = !1;
+        const f = Date.now(), E = t.getBoundingClientRect(), { left: B, top: I } = E, S = (T) => {
+          if (T.defaultPrevented || c.size > 1 || u && Date.now() - f < i) return;
+          const D = T.clientX, z = T.clientY, M = D - k, U = z - v;
+          (m || Math.abs(M) > a || Math.abs(U) > a) && (T.preventDefault(), T.stopPropagation(), m || (l.set({ type: "start", x: k - B, y: v - I }), m = !0), l.set({ type: "move", x: D - B, y: z - I, deltaX: M, deltaY: U }), k = D, v = z);
         }, b = (T) => {
           if (c.delete(T.pointerId), m) {
             const D = T.clientX, z = T.clientY;
@@ -9411,17 +9417,17 @@ class _E extends fn {
     var e;
   }
   renderBarWaveform(e, t, s, a) {
-    const { width: o, height: i } = s.canvas, { halfHeight: l, barWidth: c, barRadius: u, barIndexScale: h, barSpacing: A, barMinHeight: p } = function({ width: f, height: m, length: C, options: E, pixelRatio: B }) {
+    const { width: o, height: i } = s.canvas, { halfHeight: l, barWidth: c, barRadius: u, barIndexScale: h, barSpacing: A, barMinHeight: p } = function({ width: v, height: m, length: f, options: E, pixelRatio: B }) {
       const I = m / 2, S = E.barWidth ? E.barWidth * B : 1, b = E.barGap ? E.barGap * B : E.barWidth ? S / 2 : 0, w = S + b || 1;
-      return { halfHeight: I, barWidth: S, barGap: b, barRadius: E.barRadius || 0, barMinHeight: E.barMinHeight ? E.barMinHeight * B : 0, barIndexScale: C > 0 ? f / w / C : 0, barSpacing: w };
-    }({ width: o, height: i, length: (e[0] || []).length, options: t, pixelRatio: this.getPixelRatio() }), k = function({ channelData: f, barIndexScale: m, barSpacing: C, barWidth: E, halfHeight: B, vScale: I, canvasHeight: S, barAlign: b, barMinHeight: w }) {
-      const Q = f[0] || [], O = f[1] || Q, T = Q.length, D = [];
+      return { halfHeight: I, barWidth: S, barGap: b, barRadius: E.barRadius || 0, barMinHeight: E.barMinHeight ? E.barMinHeight * B : 0, barIndexScale: f > 0 ? v / w / f : 0, barSpacing: w };
+    }({ width: o, height: i, length: (e[0] || []).length, options: t, pixelRatio: this.getPixelRatio() }), k = function({ channelData: v, barIndexScale: m, barSpacing: f, barWidth: E, halfHeight: B, vScale: I, canvasHeight: S, barAlign: b, barMinHeight: w }) {
+      const Q = v[0] || [], O = v[1] || Q, T = Q.length, D = [];
       let z = 0, M = 0, U = 0;
       for (let J = 0; J <= T; J++) {
         const x = Math.round(J * m);
         if (x > z) {
           const { topHeight: Z, totalHeight: R } = XE({ maxTop: M, maxBottom: U, halfHeight: B, vScale: I, barMinHeight: w, barAlign: b }), H = YE({ barAlign: b, halfHeight: B, topHeight: Z, totalHeight: R, canvasHeight: S });
-          D.push({ x: z * C, y: H, width: E, height: R }), z = x, M = 0, U = 0;
+          D.push({ x: z * f, y: H, width: E, height: R }), z = x, M = 0, U = 0;
         }
         const L = Math.abs(Q[J] || 0), G = Math.abs(O[J] || 0);
         L > M && (M = L), G > U && (U = G);
@@ -9429,22 +9435,22 @@ class _E extends fn {
       return D;
     }({ channelData: e, barIndexScale: h, barSpacing: A, barWidth: c, halfHeight: l, vScale: a, canvasHeight: i, barAlign: t.barAlign, barMinHeight: p });
     s.beginPath();
-    for (const f of k) u && "roundRect" in s ? s.roundRect(f.x, f.y, f.width, f.height, u) : s.rect(f.x, f.y, f.width, f.height);
+    for (const v of k) u && "roundRect" in s ? s.roundRect(v.x, v.y, v.width, v.height, u) : s.rect(v.x, v.y, v.width, v.height);
     s.fill(), s.closePath();
   }
   renderLineWaveform(e, t, s, a) {
     const { width: o, height: i } = s.canvas, l = function({ channelData: c, width: u, height: h, vScale: A }) {
       const p = h / 2, k = c[0] || [];
-      return [k, c[1] || k].map((f, m) => {
-        const C = f.length, E = C ? u / C : 0, B = p, I = m === 0 ? -1 : 1, S = [{ x: 0, y: B }];
+      return [k, c[1] || k].map((v, m) => {
+        const f = v.length, E = f ? u / f : 0, B = p, I = m === 0 ? -1 : 1, S = [{ x: 0, y: B }];
         let b = 0, w = 0;
-        for (let Q = 0; Q <= C; Q++) {
+        for (let Q = 0; Q <= f; Q++) {
           const O = Math.round(Q * E);
           if (O > b) {
             const D = B + (Math.round(w * p * A) || 1) * I;
             S.push({ x: b, y: D }), b = O, w = 0;
           }
-          const T = Math.abs(f[Q] || 0);
+          const T = Math.abs(v[Q] || 0);
           T > w && (w = T);
         }
         return S.push({ x: b, y: B }), S;
@@ -9470,7 +9476,7 @@ class _E extends fn {
       if (!A || A.length === 0) return h;
       let p = c ?? 0;
       if (!c) for (let k = 0; k < A.length; k++) {
-        const f = (u = A[k]) !== null && u !== void 0 ? u : 0, m = Math.abs(f);
+        const v = (u = A[k]) !== null && u !== void 0 ? u : 0, m = Math.abs(v);
         m > p && (p = m);
       }
       return p ? h / p : h;
@@ -9487,35 +9493,35 @@ class _E extends fn {
     }
   }
   renderMultiCanvas(e, t, s, a, o, i) {
-    const l = this.getPixelRatio(), { clientWidth: c } = this.scrollContainer, u = s / l, h = function({ clientWidth: f, totalWidth: m, options: C }) {
-      return _r(Math.min(8e3, f, m), C);
+    const l = this.getPixelRatio(), { clientWidth: c } = this.scrollContainer, u = s / l, h = function({ clientWidth: v, totalWidth: m, options: f }) {
+      return _r(Math.min(8e3, v, m), f);
     }({ clientWidth: c, totalWidth: u, options: t });
     let A = {};
     if (h === 0) return;
-    const p = (f) => {
-      if (f < 0 || f >= k || A[f]) return;
-      A[f] = !0;
-      const m = f * h;
-      let C = Math.min(u - m, h);
-      if (C = _r(C, t), C <= 0) return;
+    const p = (v) => {
+      if (v < 0 || v >= k || A[v]) return;
+      A[v] = !0;
+      const m = v * h;
+      let f = Math.min(u - m, h);
+      if (f = _r(f, t), f <= 0) return;
       const E = function({ channelData: B, offset: I, clampedWidth: S, totalWidth: b }) {
         return B.map((w) => {
           const Q = Math.floor(I / b * w.length), O = Math.floor((I + S) / b * w.length);
           return w.slice(Q, O);
         });
-      }({ channelData: e, offset: m, clampedWidth: C, totalWidth: u });
-      this.renderSingleCanvas(E, t, C, a, m, o, i);
+      }({ channelData: e, offset: m, clampedWidth: f, totalWidth: u });
+      this.renderSingleCanvas(E, t, f, a, m, o, i);
     }, k = Math.ceil(u / h);
     if (!this.isScrollable) {
-      for (let f = 0; f < k; f++) p(f);
+      for (let v = 0; v < k; v++) p(v);
       return;
     }
-    if ($r({ scrollLeft: this.scrollContainer.scrollLeft, totalWidth: u, numCanvases: k }).forEach((f) => p(f)), k > 1) {
-      const f = this.on("scroll", () => {
+    if ($r({ scrollLeft: this.scrollContainer.scrollLeft, totalWidth: u, numCanvases: k }).forEach((v) => p(v)), k > 1) {
+      const v = this.on("scroll", () => {
         const { scrollLeft: m } = this.scrollContainer;
-        Object.keys(A).length > 10 && (o.innerHTML = "", i.innerHTML = "", A = {}), $r({ scrollLeft: m, totalWidth: u, numCanvases: k }).forEach((C) => p(C));
+        Object.keys(A).length > 10 && (o.innerHTML = "", i.innerHTML = "", A = {}), $r({ scrollLeft: m, totalWidth: u, numCanvases: k }).forEach((f) => p(f));
       });
-      this.unsubscribeOnScroll.push(f);
+      this.unsubscribeOnScroll.push(v);
     }
   }
   renderChannel(e, t, s, a) {
@@ -9523,8 +9529,8 @@ class _E extends fn {
       var p = {};
       for (var k in h) Object.prototype.hasOwnProperty.call(h, k) && A.indexOf(k) < 0 && (p[k] = h[k]);
       if (h != null && typeof Object.getOwnPropertySymbols == "function") {
-        var f = 0;
-        for (k = Object.getOwnPropertySymbols(h); f < k.length; f++) A.indexOf(k[f]) < 0 && Object.prototype.propertyIsEnumerable.call(h, k[f]) && (p[k[f]] = h[k[f]]);
+        var v = 0;
+        for (k = Object.getOwnPropertySymbols(h); v < k.length; v++) A.indexOf(k[v]) < 0 && Object.prototype.propertyIsEnumerable.call(h, k[v]) && (p[k[v]] = h[k[v]]);
       }
       return p;
     }(t, ["overlay"]);
@@ -9538,8 +9544,8 @@ class _E extends fn {
       var t;
       this.timeouts.forEach((u) => u()), this.timeouts = [], this.canvasWrapper.innerHTML = "", this.progressWrapper.innerHTML = "", this.options.width != null && (this.scrollContainer.style.width = typeof this.options.width == "number" ? `${this.options.width}px` : this.options.width);
       const s = this.getPixelRatio(), a = this.scrollContainer.clientWidth, { scrollWidth: o, isScrollable: i, useParentWidth: l, width: c } = function({ duration: u, minPxPerSec: h = 0, parentWidth: A, fillParent: p, pixelRatio: k }) {
-        const f = Math.ceil(u * h), m = f > A, C = !!(p && !m);
-        return { scrollWidth: f, isScrollable: m, useParentWidth: C, width: (C ? A : f) * k };
+        const v = Math.ceil(u * h), m = v > A, f = !!(p && !m);
+        return { scrollWidth: v, isScrollable: m, useParentWidth: f, width: (f ? A : v) * k };
       }({ duration: e.duration, minPxPerSec: this.options.minPxPerSec || 0, parentWidth: a, fillParent: this.options.fillParent, pixelRatio: s });
       if (this.isScrollable = i, this.wrapper.style.width = l ? "100%" : `${o}px`, this.scrollContainer.style.overflowX = this.isScrollable ? "auto" : "hidden", this.scrollContainer.classList.toggle("noScrollbar", !!this.options.hideScrollbar), this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`, this.cursor.style.width = `${this.options.cursorWidth}px`, this.audioData = e, this.emit("render"), this.options.splitChannels) for (let u = 0; u < e.numberOfChannels; u++) {
         const h = Object.assign(Object.assign({}, this.options), (t = this.options.splitChannels) === null || t === void 0 ? void 0 : t[u]);
@@ -9752,14 +9758,14 @@ class An extends GE {
     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({}, eS, e);
     const { state: s, actions: a } = function(l) {
       var c, u, h, A, p, k;
-      const f = (c = l == null ? void 0 : l.currentTime) !== null && c !== void 0 ? c : Ae(0), m = (u = l == null ? void 0 : l.duration) !== null && u !== void 0 ? u : Ae(0), C = (h = l == null ? void 0 : l.isPlaying) !== null && h !== void 0 ? h : Ae(!1), E = (A = l == null ? void 0 : l.isSeeking) !== null && A !== void 0 ? A : Ae(!1), B = (p = l == null ? void 0 : l.volume) !== null && p !== void 0 ? p : Ae(1), I = (k = l == null ? void 0 : l.playbackRate) !== null && k !== void 0 ? k : Ae(1), S = Ae(null), b = Ae(null), w = Ae(""), Q = Ae(0), O = Ae(0), T = It(() => !C.value, [C]), D = It(() => S.value !== null, [S]), z = It(() => D.value && m.value > 0, [D, m]), M = It(() => f.value, [f]), U = It(() => m.value > 0 ? f.value / m.value : 0, [f, m]);
-      return { state: { currentTime: f, duration: m, isPlaying: C, isPaused: T, isSeeking: E, volume: B, playbackRate: I, audioBuffer: S, peaks: b, url: w, zoom: Q, scrollPosition: O, canPlay: D, isReady: z, progress: M, progressPercent: U }, actions: { setCurrentTime: (J) => {
+      const v = (c = l == null ? void 0 : l.currentTime) !== null && c !== void 0 ? c : Ae(0), m = (u = l == null ? void 0 : l.duration) !== null && u !== void 0 ? u : Ae(0), f = (h = l == null ? void 0 : l.isPlaying) !== null && h !== void 0 ? h : Ae(!1), E = (A = l == null ? void 0 : l.isSeeking) !== null && A !== void 0 ? A : Ae(!1), B = (p = l == null ? void 0 : l.volume) !== null && p !== void 0 ? p : Ae(1), I = (k = l == null ? void 0 : l.playbackRate) !== null && k !== void 0 ? k : Ae(1), S = Ae(null), b = Ae(null), w = Ae(""), Q = Ae(0), O = Ae(0), T = It(() => !f.value, [f]), D = It(() => S.value !== null, [S]), z = It(() => D.value && m.value > 0, [D, m]), M = It(() => v.value, [v]), U = It(() => m.value > 0 ? v.value / m.value : 0, [v, m]);
+      return { state: { currentTime: v, duration: m, isPlaying: f, isPaused: T, isSeeking: E, volume: B, playbackRate: I, audioBuffer: S, peaks: b, url: w, zoom: Q, scrollPosition: O, canPlay: D, isReady: z, progress: M, progressPercent: U }, actions: { setCurrentTime: (J) => {
         const x = Math.max(0, Math.min(m.value || 1 / 0, J));
-        f.set(x);
+        v.set(x);
       }, setDuration: (J) => {
         m.set(Math.max(0, J));
       }, setPlaying: (J) => {
-        C.set(J);
+        f.set(J);
       }, setSeeking: (J) => {
         E.set(J);
       }, setVolume: (J) => {
@@ -9990,8 +9996,8 @@ class An extends GE {
         const A = l.slice(Math.floor(h * u), Math.ceil((h + 1) * u));
         let p = 0;
         for (let k = 0; k < A.length; k++) {
-          const f = A[k];
-          Math.abs(f) > Math.abs(p) && (p = f);
+          const v = A[k];
+          Math.abs(v) > Math.abs(p) && (p = v);
         }
         c.push(Math.round(p * s) / s);
       }
@@ -10143,9 +10149,9 @@ function Hi({
   eventPlayed: A,
   showSkeleton: p = !1,
   classNamesButton: k,
-  onPlayStateChange: f
+  onPlayStateChange: v
 }) {
-  const [m, C] = q(!1), [E, B] = q(!1), [I, S] = q(!1), [b, w] = q(!1);
+  const [m, f] = q(!1), [E, B] = q(!1), [I, S] = q(!1), [b, w] = q(!1);
   de(() => {
     typeof navigator < "u" && w(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
   }, []);
@@ -10165,10 +10171,10 @@ function Hi({
     D.current && n && ((R = D.current) == null || R.load(n));
   }, [n]);
   const U = N((R) => {
-    D.current = R, B(!0), C(!1);
+    D.current = R, B(!0), f(!1);
   }, []), J = N(
     (R) => {
-      if (C(!0), t == null || t(!0), f == null || f(!0), c) {
+      if (f(!0), t == null || t(!0), v == null || v(!0), c) {
         if (c.state.active && c.state.active !== R) {
           const H = c.state.active.getCurrentTime();
           c.state.active.pause(), R.setTime(H);
@@ -10182,13 +10188,13 @@ function Hi({
       }
       A == null || A();
     },
-    [t, c, A, f]
+    [t, c, A, v]
   ), x = N(() => {
-    C(!1), t == null || t(!1), f == null || f(!1), c && c.setter((R) => ({
+    f(!1), t == null || t(!1), v == null || v(!1), c && c.setter((R) => ({
       ...R,
       isPlaying: !1
     }));
-  }, [t, c, f]), L = N(
+  }, [t, c, v]), L = N(
     (R) => {
       c && c.setter((H) => ({
         ...H,
@@ -10198,12 +10204,12 @@ function Hi({
     [c]
   ), G = N(() => {
     var R;
-    u ? (R = D.current) == null || R.play() : (C(!1), t == null || t(!1), f == null || f(!1), c && c.setter((H) => ({
+    u ? (R = D.current) == null || R.play() : (f(!1), t == null || t(!1), v == null || v(!1), c && c.setter((H) => ({
       ...H,
       isPlaying: !1,
       active: null
     })));
-  }, [u, t, c, f]), Z = N(() => {
+  }, [u, t, c, v]), Z = N(() => {
     var R, H, ae;
     (R = D.current) != null && R.isPlaying() ? z() : D.current && ((H = c == null ? void 0 : c.state) != null && H.active && c.state.active !== D.current && (c.state.active.pause(), c.setter((Re) => ({
       ...Re,
@@ -10229,7 +10235,7 @@ function Hi({
             size: "2",
             variant: "soft",
             color: "gray",
-            className: v(k, ks.customButton),
+            className: C(k, ks.customButton),
             children: m ? /* @__PURE__ */ r(Mc, { width: 20, height: 20 }) : /* @__PURE__ */ r(Oc, { width: 20, height: 20 })
           }
         ),
@@ -10325,7 +10331,7 @@ const dS = "_customButton_14z6y_1", uS = "_descriptionVoiceList_14z6y_5", ea = {
           onSelect: t,
           className: "voice-list",
           children: n.map((A) => {
-            var p, k, f;
+            var p, k, v;
             return /* @__PURE__ */ r(
               Rt.CardDetails,
               {
@@ -10362,7 +10368,7 @@ const dS = "_customButton_14z6y_1", uS = "_descriptionVoiceList_14z6y_5", ea = {
                     weight: "regular",
                     className: ea.descriptionVoiceList,
                     children: [
-                      (f = A == null ? void 0 : A.metadata) == null ? void 0 : f.vocalRange,
+                      (v = A == null ? void 0 : A.metadata) == null ? void 0 : v.vocalRange,
                       " ",
                       /* @__PURE__ */ r("span", { children: "|" }),
                       " ",
@@ -10617,7 +10623,7 @@ const BS = "_footerVoiceForm_lsc2c_2", wS = {
   onVoiceDetailsClick: s,
   onBackToList: a,
   voiceDetailsId: o,
-  i18n: i = { _: (C) => C },
+  i18n: i = { _: (f) => f },
   isLoading: l,
   limitReached: c,
   error: u,
@@ -10625,10 +10631,10 @@ const BS = "_footerVoiceForm_lsc2c_2", wS = {
   onSelectTrack: A,
   onMountConcurrency: p,
   showUpgradeConcurrency: k,
-  onClickUpgradeConcurrency: f,
+  onClickUpgradeConcurrency: v,
   onRemoveTrack: m
 }) => {
-  const [C, E] = q(null), [B, I] = q(null), { submitted: S, handleSubmit: b } = Ir(h), [w, Q] = q({
+  const [f, E] = q(null), [B, I] = q(null), { submitted: S, handleSubmit: b } = Ir(h), [w, Q] = q({
     lastPlayed: null,
     active: null,
     isPlaying: !1,
@@ -10694,7 +10700,7 @@ const BS = "_footerVoiceForm_lsc2c_2", wS = {
       AS,
       {
         voices: n,
-        selectedId: C,
+        selectedId: f,
         handleSelect: O,
         playingItem: B,
         handleAvatarClick: T,
@@ -10741,7 +10747,7 @@ const BS = "_footerVoiceForm_lsc2c_2", wS = {
                 IS,
                 {
                   showUpgrade: k,
-                  onClickUpgrade: f,
+                  onClickUpgrade: v,
                   i18n: i,
                   onMountConcurrency: p
                 }