@moises.ai/design-system 3.6.12 → 3.6.13

package/dist/index.js

@@ -2407,7 +2407,7 @@ const im = "_container_1k1mq_1", lm = "_content_1k1mq_19", cm = "_title_1k1mq_26
   ] });
 };
 Am.displayName = "CigarBar";
-const hm = "_menuContent_1j71o_1", pm = "_menuSubContent_1j71o_2", mm = "_slideDownAndFade_1j71o_1", gm = "_slideLeftAndFade_1j71o_1", fm = "_slideUpAndFade_1j71o_1", vm = "_slideRightAndFade_1j71o_1", Cm = "_menuPortal_1j71o_84", ym = "_menuItem_1j71o_91", km = "_label_1j71o_106", Em = "_secondaryTextBottom_1j71o_110", Sm = "_secondaryTextRight_1j71o_111", Im = "_keybinding_1j71o_115", bm = "_leftIcon_1j71o_147", Bm = "_rightIcon_1j71o_148", wm = "_checkboxIndicatorSlot_1j71o_149", Rm = "_menuCheckboxIndicator_1j71o_155", Nm = "_menuSeparator_1j71o_160", xm = "_labelContainer_1j71o_180", Qm = "_rightSlot_1j71o_204", Tm = "_menuSub_1j71o_2", Jm = "_menuSubTrigger_1j71o_241", Dm = "_menuTrigger_1j71o_275", Pm = "_showActiveTrigger_1j71o_275", Um = "_menuLabel_1j71o_291", zm = "_menuItemSelected_1j71o_314", Mm = "_menuItemIndicator_1j71o_342", Om = "_menuCheckboxItem_1j71o_375", Fm = "_red_1j71o_379", Hm = "_cyan_1j71o_396", L = {
+const hm = "_menuContent_1j71o_1", pm = "_menuSubContent_1j71o_2", mm = "_slideDownAndFade_1j71o_1", gm = "_slideLeftAndFade_1j71o_1", fm = "_slideUpAndFade_1j71o_1", vm = "_slideRightAndFade_1j71o_1", Cm = "_menuPortal_1j71o_84", ym = "_menuItem_1j71o_91", km = "_label_1j71o_106", Em = "_secondaryTextBottom_1j71o_110", Sm = "_secondaryTextRight_1j71o_111", Im = "_keybinding_1j71o_115", bm = "_leftIcon_1j71o_147", Bm = "_rightIcon_1j71o_148", wm = "_checkboxIndicatorSlot_1j71o_149", Rm = "_menuCheckboxIndicator_1j71o_155", Nm = "_menuSeparator_1j71o_160", xm = "_labelContainer_1j71o_180", Qm = "_rightSlot_1j71o_204", Tm = "_menuSub_1j71o_2", Jm = "_menuSubTrigger_1j71o_241", Dm = "_menuTrigger_1j71o_275", Pm = "_showActiveTrigger_1j71o_275", Um = "_menuLabel_1j71o_291", zm = "_menuItemSelected_1j71o_314", Mm = "_menuItemIndicator_1j71o_342", Om = "_menuCheckboxItem_1j71o_375", Fm = "_red_1j71o_379", Hm = "_cyan_1j71o_396", j = {
   menuContent: hm,
   menuSubContent: pm,
   slideDownAndFade: mm,
@@ -2448,12 +2448,23 @@ const hm = "_menuContent_1j71o_1", pm = "_menuSubContent_1j71o_2", mm = "_slideD
     var i;
     switch (t.type) {
       case "custom":
-        return /* @__PURE__ */ r("div", { className: L.menuItem, children: t.customRender() }, t.key);
+        return /* @__PURE__ */ r(
+          "div",
+          {
+            className: f(
+              j.menuItem,
+              j[`menuItem-size-${s}`]
+            ),
+            "data-disabled": t.disabled ? "" : void 0,
+            children: t.customRender()
+          },
+          t.key
+        );
       case "separator":
         return /* @__PURE__ */ r(
           n.Separator,
           {
-            className: L.menuSeparator
+            className: j.menuSeparator
           },
           t.key
         );
@@ -2462,33 +2473,33 @@ const hm = "_menuContent_1j71o_1", pm = "_menuSubContent_1j71o_2", mm = "_slideD
           n.Label,
           {
             className: f(
-              L.menuLabel,
-              L[`menuLabel-size-${s}`]
+              j.menuLabel,
+              j[`menuLabel-size-${s}`]
             ),
             children: t.label
           },
           t.key
         );
       case "sub":
-        return /* @__PURE__ */ g(n.Sub, { className: L.menuSub, children: [
+        return /* @__PURE__ */ g(n.Sub, { className: j.menuSub, children: [
           /* @__PURE__ */ g(
             n.SubTrigger,
             {
               className: f(
-                L.menuSubTrigger,
-                L[`menuSubTrigger-size-${s}`],
+                j.menuSubTrigger,
+                j[`menuSubTrigger-size-${s}`],
                 {
-                  [L.red]: t.color === "red" && !t.disabled,
-                  [L.cyan]: t.color === "cyan" && !t.disabled
+                  [j.red]: t.color === "red" && !t.disabled,
+                  [j.cyan]: t.color === "cyan" && !t.disabled
                 }
               ),
               children: [
                 t.label,
-                /* @__PURE__ */ r("div", { className: L.rightSlot, children: /* @__PURE__ */ r(sc, {}) })
+                /* @__PURE__ */ r("div", { className: j.rightSlot, children: /* @__PURE__ */ r(sc, {}) })
               ]
             }
           ),
-          /* @__PURE__ */ r(n.SubContent, { className: L.menuSubContent, children: (i = t == null ? void 0 : t.children) == null ? void 0 : i.map(
+          /* @__PURE__ */ r(n.SubContent, { className: j.menuSubContent, children: (i = t == null ? void 0 : t.children) == null ? void 0 : i.map(
             (l) => e(l, s, a, o)
           ) })
         ] }, t.key);
@@ -2497,11 +2508,11 @@ const hm = "_menuContent_1j71o_1", pm = "_menuSubContent_1j71o_2", mm = "_slideD
           n.Item,
           {
             className: f(
-              L.menuItem,
-              L[`menuItem-size-${s}`],
+              j.menuItem,
+              j[`menuItem-size-${s}`],
               {
-                [L.red]: t.color === "red" && !t.disabled,
-                [L.cyan]: t.color === "cyan" && !t.disabled
+                [j.red]: t.color === "red" && !t.disabled,
+                [j.cyan]: t.color === "cyan" && !t.disabled
               }
             ),
             onSelect: (l) => {
@@ -2510,15 +2521,15 @@ const hm = "_menuContent_1j71o_1", pm = "_menuSubContent_1j71o_2", mm = "_slideD
             },
             disabled: t.disabled,
             children: [
-              t.icon && /* @__PURE__ */ r("span", { className: L.leftIcon, children: t.icon }),
-              /* @__PURE__ */ g("div", { className: L.labelContainer, children: [
-                /* @__PURE__ */ r("span", { className: L.label, children: t.label }),
-                t.secondaryText && t.secondaryTextPosition === "bottom" && /* @__PURE__ */ r("span", { className: L.secondaryTextBottom, children: t.secondaryText })
+              t.icon && /* @__PURE__ */ r("span", { className: j.leftIcon, children: t.icon }),
+              /* @__PURE__ */ g("div", { className: j.labelContainer, children: [
+                /* @__PURE__ */ r("span", { className: j.label, children: t.label }),
+                t.secondaryText && t.secondaryTextPosition === "bottom" && /* @__PURE__ */ r("span", { className: j.secondaryTextBottom, children: t.secondaryText })
               ] }),
-              /* @__PURE__ */ g("div", { className: L.rightSlot, children: [
-                t.secondaryText && t.secondaryTextPosition !== "bottom" && /* @__PURE__ */ r("span", { className: L.secondaryTextRight, children: t.secondaryText }),
-                t.keybinding && /* @__PURE__ */ r("span", { className: L.keybinding, children: t.keybinding }),
-                t.rightIcon && /* @__PURE__ */ r("span", { className: L.rightIcon, children: t.rightIcon })
+              /* @__PURE__ */ g("div", { className: j.rightSlot, children: [
+                t.secondaryText && t.secondaryTextPosition !== "bottom" && /* @__PURE__ */ r("span", { className: j.secondaryTextRight, children: t.secondaryText }),
+                t.keybinding && /* @__PURE__ */ r("span", { className: j.keybinding, children: t.keybinding }),
+                t.rightIcon && /* @__PURE__ */ r("span", { className: j.rightIcon, children: t.rightIcon })
               ] })
             ]
           },
@@ -2537,21 +2548,21 @@ const hm = "_menuContent_1j71o_1", pm = "_menuSubContent_1j71o_2", mm = "_slideD
               o || l.preventDefault();
             },
             className: f(
-              L.menuItem,
-              L.menuCheckboxItem,
+              j.menuItem,
+              j.menuCheckboxItem,
               {
-                [L.menuItemSelected]: t.checked,
-                [L[`menuItem-size-${s}`]]: s,
-                [L.red]: t.color === "red" && !t.disabled,
-                [L.cyan]: t.color === "cyan" && !t.disabled
+                [j.menuItemSelected]: t.checked,
+                [j[`menuItem-size-${s}`]]: s,
+                [j.red]: t.color === "red" && !t.disabled,
+                [j.cyan]: t.color === "cyan" && !t.disabled
               }
             ),
             disabled: t.disabled,
             children: [
-              /* @__PURE__ */ r("span", { className: L.checkboxIndicatorSlot, children: /* @__PURE__ */ r(
+              /* @__PURE__ */ r("span", { className: j.checkboxIndicatorSlot, children: /* @__PURE__ */ r(
                 n.ItemIndicator,
                 {
-                  className: L.menuCheckboxIndicator,
+                  className: j.menuCheckboxIndicator,
                   children: /* @__PURE__ */ r(
                     ma,
                     {
@@ -2561,15 +2572,15 @@ const hm = "_menuContent_1j71o_1", pm = "_menuSubContent_1j71o_2", mm = "_slideD
                   )
                 }
               ) }),
-              t.icon && /* @__PURE__ */ r("span", { className: L.leftIcon, children: t.icon }),
-              /* @__PURE__ */ g("div", { className: L.labelContainer, children: [
-                /* @__PURE__ */ r("span", { className: L.label, children: t.label }),
-                t.secondaryText && t.secondaryTextPosition === "bottom" && /* @__PURE__ */ r("span", { className: L.secondaryTextBottom, children: t.secondaryText })
+              t.icon && /* @__PURE__ */ r("span", { className: j.leftIcon, children: t.icon }),
+              /* @__PURE__ */ g("div", { className: j.labelContainer, children: [
+                /* @__PURE__ */ r("span", { className: j.label, children: t.label }),
+                t.secondaryText && t.secondaryTextPosition === "bottom" && /* @__PURE__ */ r("span", { className: j.secondaryTextBottom, children: t.secondaryText })
               ] }),
-              /* @__PURE__ */ g("div", { className: L.rightSlot, children: [
-                t.secondaryText && t.secondaryTextPosition !== "bottom" && /* @__PURE__ */ r("span", { className: L.secondaryTextRight, children: t.secondaryText }),
-                t.keybinding && /* @__PURE__ */ r("span", { className: L.keybinding, children: t.keybinding }),
-                t.rightIcon && /* @__PURE__ */ r("span", { className: L.rightIcon, children: t.rightIcon })
+              /* @__PURE__ */ g("div", { className: j.rightSlot, children: [
+                t.secondaryText && t.secondaryTextPosition !== "bottom" && /* @__PURE__ */ r("span", { className: j.secondaryTextRight, children: t.secondaryText }),
+                t.keybinding && /* @__PURE__ */ r("span", { className: j.keybinding, children: t.keybinding }),
+                t.rightIcon && /* @__PURE__ */ r("span", { className: j.rightIcon, children: t.rightIcon })
               ] })
             ]
           },
@@ -2591,11 +2602,11 @@ const hm = "_menuContent_1j71o_1", pm = "_menuSubContent_1j71o_2", mm = "_slideD
     closeOnSelect: i = !0,
     ...l
   }) => o ? n : /* @__PURE__ */ g(Kl, { children: [
-    /* @__PURE__ */ r(Gl, { className: L.menuTrigger, asChild: !0, children: n }),
+    /* @__PURE__ */ r(Gl, { className: j.menuTrigger, asChild: !0, children: n }),
     (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ r(
       Xl,
       {
-        className: f(L.menuContent, t),
+        className: f(j.menuContent, t),
         side: l.side,
         align: l.align,
         sideOffset: 5,
@@ -2822,8 +2833,8 @@ const Km = "_DataTable_17x9s_1", Gm = "_titleText_17x9s_23", Xm = "_artistText_1
       }
     ),
     /* @__PURE__ */ g(y, { direction: "column", style: { minWidth: 0, flex: 1 }, children: [
-      /* @__PURE__ */ r(j, { size: "2", className: Z.titleText, children: R.title }),
-      /* @__PURE__ */ r(j, { size: "1", className: Z.artistText, children: R.artist })
+      /* @__PURE__ */ r(L, { size: "2", className: Z.titleText, children: R.title }),
+      /* @__PURE__ */ r(L, { size: "1", className: Z.artistText, children: R.artist })
     ] })
   ] }), []), U = x(
     (R) => {
@@ -2833,7 +2844,7 @@ const Km = "_DataTable_17x9s_1", Gm = "_titleText_17x9s_23", Xm = "_artistText_1
   ), D = x((R, H, le) => {
     var ct;
     const Qe = (R == null ? void 0 : R[H.id]) ?? (R == null ? void 0 : R[`${H.id}Formatted`]), De = ((ct = H.render) == null ? void 0 : ct.call(H, { row: R, value: Qe, column: H, index: le })) ?? Qe;
-    return typeof De == "string" || typeof De == "number" || De == null ? /* @__PURE__ */ r(j, { size: "2", className: Z.cellText, children: De }) : De;
+    return typeof De == "string" || typeof De == "number" || De == null ? /* @__PURE__ */ r(L, { size: "2", className: Z.cellText, children: De }) : De;
   }, []), { style: N, ...W } = p, X = typeof h == "number" ? `${h}px` : h, V = typeof A == "number" ? `${A}px` : A;
   return /* @__PURE__ */ g(
     fr,
@@ -2879,14 +2890,14 @@ const Km = "_DataTable_17x9s_1", Gm = "_titleText_17x9s_23", Xm = "_artistText_1
                     [Z.sortedColumn]: Pr(C) === Pr(R.id)
                   }),
                   children: /* @__PURE__ */ g(y, { align: "center", gap: "3", height: "24px", children: [
-                    H === 0 ? /* @__PURE__ */ r(j, { size: "2", className: Z.headerTextFirst, children: R.label }) : /* @__PURE__ */ g(
+                    H === 0 ? /* @__PURE__ */ r(L, { size: "2", className: Z.headerTextFirst, children: R.label }) : /* @__PURE__ */ g(
                       "button",
                       {
                         type: "button",
                         className: Z.sortButton,
                         onClick: () => M(R.id),
                         children: [
-                          /* @__PURE__ */ r(j, { size: "2", children: R.label }),
+                          /* @__PURE__ */ r(L, { size: "2", children: R.label }),
                           C === R.id && ((i == null ? void 0 : i.sort) === "DESC" ? /* @__PURE__ */ r(ac, { width: 16, height: 16 }) : /* @__PURE__ */ r(oc, { width: 16, height: 16 }))
                         ]
                       }
@@ -3085,17 +3096,17 @@ const Us = ({ children: n, ...e }) => /* @__PURE__ */ r(
             _l,
             {
               asChild: !0,
-              className: f(L.menuTrigger, {
-                [L.showActiveTrigger]: s
+              className: f(j.menuTrigger, {
+                [j.showActiveTrigger]: s
               }),
               disabled: i,
               children: n
             }
           ),
-          l ? /* @__PURE__ */ r(Ir, { className: L.menuPortal, children: /* @__PURE__ */ r(Us, { asChild: !0, children: /* @__PURE__ */ r(
+          l ? /* @__PURE__ */ r(Ir, { className: j.menuPortal, children: /* @__PURE__ */ r(Us, { asChild: !0, children: /* @__PURE__ */ r(
             br,
             {
-              className: f(L.menuContent, t),
+              className: f(j.menuContent, t),
               size: a,
               side: A.side,
               align: A.align,
@@ -3122,10 +3133,10 @@ const Us = ({ children: n, ...e }) => /* @__PURE__ */ r(
                 }
               )
             }
-          ) }) }) : /* @__PURE__ */ r(Ir, { className: L.menuPortal, children: /* @__PURE__ */ r(Us, { asChild: !0, children: /* @__PURE__ */ r(
+          ) }) }) : /* @__PURE__ */ r(Ir, { className: j.menuPortal, children: /* @__PURE__ */ r(Us, { asChild: !0, children: /* @__PURE__ */ r(
             br,
             {
-              className: f(L.menuContent, t),
+              className: f(j.menuContent, t),
               size: a,
               side: A.side,
               align: A.align,
@@ -4604,7 +4615,7 @@ const JS = ({
 }) => /* @__PURE__ */ g(y, { width: "200px", direction: "column", children: [
   /* @__PURE__ */ g(y, { gap: "4", direction: "column", children: [
     /* @__PURE__ */ g(y, { gap: "2", direction: "column", children: [
-      /* @__PURE__ */ r(j, { size: "2", weight: "medium", children: n._("Sub-division") }),
+      /* @__PURE__ */ r(L, { size: "2", weight: "medium", children: n._("Sub-division") }),
       /* @__PURE__ */ r(
         Pn,
         {
@@ -4619,11 +4630,11 @@ const JS = ({
       )
     ] }),
     /* @__PURE__ */ g(y, { gap: "2", direction: "column", children: [
-      /* @__PURE__ */ r(j, { size: "2", weight: "medium", children: n._("Metronome volume") }),
+      /* @__PURE__ */ r(L, { size: "2", weight: "medium", children: n._("Metronome volume") }),
       /* @__PURE__ */ r(Si, { onChangeValue: o, volume: t })
     ] }),
     /* @__PURE__ */ g(y, { gap: "1", direction: "column", children: [
-      /* @__PURE__ */ r(j, { size: "2", weight: "medium", children: "Count-in" }),
+      /* @__PURE__ */ r(L, { size: "2", weight: "medium", children: "Count-in" }),
       /* @__PURE__ */ r(
         Pn,
         {
@@ -5147,8 +5158,8 @@ function BC({ className: n, user: e, collapsed: t, ...s }) {
             }
           ),
           /* @__PURE__ */ g("div", { className: Ve.userContent, children: [
-            /* @__PURE__ */ r(j, { size: "2", weight: "regular", className: Ve.userName, children: e.name }),
-            /* @__PURE__ */ r(j, { size: "1", weight: "regular", className: Ve.userStatus, children: e.plan })
+            /* @__PURE__ */ r(L, { size: "2", weight: "regular", className: Ve.userName, children: e.name }),
+            /* @__PURE__ */ r(L, { size: "1", weight: "regular", className: Ve.userStatus, children: e.plan })
           ] })
         ] }),
         /* @__PURE__ */ r("div", { className: Ve.userMenuWrapper, children: /* @__PURE__ */ r(ns, { hovered: a }) })
@@ -5497,7 +5508,7 @@ const a1 = "_select_egrq6_1", o1 = "_levelMeter_egrq6_5", i1 = "_levelMeterTrack
   high: h1
 }, p1 = "_textSize0_1rdyc_1", m1 = {
   textSize0: p1
-}, j = ({ size: n, className: e, children: t, ...s }) => {
+}, L = ({ size: n, className: e, children: t, ...s }) => {
   const a = n === "0";
   return /* @__PURE__ */ r(
     P,
@@ -5509,7 +5520,7 @@ const a1 = "_select_egrq6_1", o1 = "_levelMeter_egrq6_5", i1 = "_levelMeterTrack
     }
   );
 };
-j.displayName = "Text";
+L.displayName = "Text";
 const g1 = "_selectContent_183an_2", f1 = "_selectTrigger_183an_68", v1 = "_soft_183an_68", C1 = "_ghost_183an_69", y1 = "_selectItem_183an_98", k1 = "_hideIndicator_183an_125", E1 = "_size1_183an_129", S1 = "_size2_183an_134", We = {
   selectContent: g1,
   selectTrigger: f1,
@@ -5769,7 +5780,7 @@ const H1 = ({
   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") }),
+    /* @__PURE__ */ r(L, { size: "2", mb: "1", weight: "medium", children: n._("Source") }),
     /* @__PURE__ */ r(
       Ft,
       {
@@ -5796,7 +5807,7 @@ const H1 = ({
     )
   ] }),
   /* @__PURE__ */ g(y, { gap: "2", direction: "column", children: [
-    /* @__PURE__ */ r(j, { size: "2", weight: "medium", children: n._("Input Level") }),
+    /* @__PURE__ */ r(L, { size: "2", weight: "medium", children: n._("Input Level") }),
     /* @__PURE__ */ r("div", { className: _e.levelMeter, children: /* @__PURE__ */ r("div", { className: _e.levelMeterTrack, children: /* @__PURE__ */ r("div", { className: _e.levelMeterRow, children: Array.from({ length: 17 }, (m, C) => {
       const E = Math.max(0, (v - 5) / 25) * 17, b = C < E;
       let I = "low";
@@ -5828,7 +5839,7 @@ const H1 = ({
   /* @__PURE__ */ r(He, { style: { width: "100%" } }),
   /* @__PURE__ */ g(y, { gap: "2", mb: "2", direction: "column", children: [
     /* @__PURE__ */ g(y, { align: "center", justify: "between", children: [
-      /* @__PURE__ */ r(j, { size: "2", weight: "medium", children: n._("Monitor (Feedback)") }),
+      /* @__PURE__ */ r(L, { size: "2", weight: "medium", children: n._("Monitor (Feedback)") }),
       /* @__PURE__ */ r(
         rt,
         {
@@ -5841,7 +5852,7 @@ const H1 = ({
     a && /* @__PURE__ */ g(y, { direction: "column", gap: "2", children: [
       /* @__PURE__ */ g(y, { align: "center", justify: "between", children: [
         /* @__PURE__ */ r(
-          j,
+          L,
           {
             size: "1",
             weight: "medium",
@@ -5850,7 +5861,7 @@ const H1 = ({
             children: n._("Monitor level")
           }
         ),
-        /* @__PURE__ */ g(j, { size: "1", style: { color: "var(--neutral-10)" }, children: [
+        /* @__PURE__ */ g(L, { size: "1", style: { color: "var(--neutral-10)" }, children: [
           Math.round(s),
           "%"
         ] })
@@ -6044,8 +6055,8 @@ const X1 = "_tooltipTriggerWrapper_1hj63_1", Y1 = "_newSetlistItem_1hj63_6", Z1
         sideOffset: 5,
         ...A,
         children: [
-          /* @__PURE__ */ r(j, { size: "1", className: Jt.TooltipText, children: e }),
-          t && /* @__PURE__ */ r(j, { size: "0", className: f(
+          /* @__PURE__ */ r(L, { size: "1", className: Jt.TooltipText, children: e }),
+          t && /* @__PURE__ */ r(L, { size: "0", className: f(
             Jt.TooltipShortcut,
             Jt[`TooltipShortcut--${s}`]
           ), children: t }),
@@ -6842,7 +6853,7 @@ const Sn = (n) => {
           children: [
             n.conditioningAudio ? /* @__PURE__ */ g(y, { direction: "row", align: "center", gap: "2", justify: "center", children: [
               /* @__PURE__ */ r(Bc, { width: 16, height: 16 }),
-              /* @__PURE__ */ g(j, { size: "1", children: [
+              /* @__PURE__ */ g(L, { size: "1", children: [
                 n.conditioningAudioName,
                 " (",
                 mk(n),
@@ -6863,7 +6874,7 @@ const Sn = (n) => {
                     onClick: s,
                     children: [
                       /* @__PURE__ */ r(Rc, { width: 16, height: 16 }),
-                      /* @__PURE__ */ r(j, { size: "1", children: t._("Select Reference Audio") })
+                      /* @__PURE__ */ r(L, { size: "1", children: t._("Select Reference Audio") })
                     ]
                   }
                 )
@@ -7121,7 +7132,7 @@ function Ik({
       ),
       a === "1" && /* @__PURE__ */ g(y, { justify: "between", align: "center", children: [
         /* @__PURE__ */ g(y, { align: "center", gap: "2", children: [
-          /* @__PURE__ */ r(j, { size: "2", children: t._("Optimize Conditioning") }),
+          /* @__PURE__ */ r(L, { size: "2", children: t._("Optimize Conditioning") }),
           /* @__PURE__ */ r(
             Je,
             {
@@ -7141,7 +7152,7 @@ function Ik({
       ] }),
       /* @__PURE__ */ g(y, { justify: "between", align: "center", children: [
         /* @__PURE__ */ g(y, { align: "center", gap: "2", children: [
-          /* @__PURE__ */ r(j, { size: "2", children: t._("Use Project Chords") }),
+          /* @__PURE__ */ r(L, { size: "2", children: t._("Use Project Chords") }),
           /* @__PURE__ */ r(
             Je,
             {
@@ -7536,7 +7547,7 @@ const Rn = {
                           showBackground: !1,
                           showIcon: !1,
                           children: /* @__PURE__ */ r(
-                            j,
+                            L,
                             {
                               size: "2",
                               style: {
@@ -7555,7 +7566,7 @@ const Rn = {
                           ctaLabel: i._("Clear"),
                           showBackground: !1,
                           showIcon: !1,
-                          children: /* @__PURE__ */ r(j, { size: "1", children: i._(
+                          children: /* @__PURE__ */ r(L, { size: "1", children: i._(
                             "An error occurred while generating the track. Please try again."
                           ) })
                         }
@@ -7608,7 +7619,7 @@ function Tk({
         onClick: s,
         showIcon: !1,
         showBackground: !1,
-        children: /* @__PURE__ */ r(j, { size: "2", children: n._("Select audio file to separate") })
+        children: /* @__PURE__ */ r(L, { size: "2", children: n._("Select audio file to separate") })
       }
     ),
     /* @__PURE__ */ r(
@@ -7819,7 +7830,7 @@ const Gr = {
   };
   return /* @__PURE__ */ g(y, { direction: "column", height: "100%", children: [
     e && /* @__PURE__ */ g(y, { direction: "column", pb: "2", children: [
-      /* @__PURE__ */ r(j, { size: "2", weight: "medium", mb: "2", children: n._("Basic Models") }),
+      /* @__PURE__ */ r(L, { size: "2", weight: "medium", mb: "2", children: n._("Basic Models") }),
       /* @__PURE__ */ r(
         Os,
         {
@@ -7832,7 +7843,7 @@ const Gr = {
           onSelect: I
         }
       ),
-      /* @__PURE__ */ r(j, { size: "2", weight: "medium", mt: "2", children: n._("Music Stems") })
+      /* @__PURE__ */ r(L, { size: "2", weight: "medium", mt: "2", children: n._("Music Stems") })
     ] }),
     /* @__PURE__ */ r(
       Os,
@@ -7902,14 +7913,14 @@ const Gr = {
                       handleFileChange: a
                     }
                   ),
-                  m && !h && /* @__PURE__ */ r(xe, { showIcon: !1, showBackground: !1, children: /* @__PURE__ */ r(j, { size: "2", children: n._("Stems separation initialized!") }) }),
+                  m && !h && /* @__PURE__ */ r(xe, { showIcon: !1, showBackground: !1, children: /* @__PURE__ */ r(L, { size: "2", children: n._("Stems separation initialized!") }) }),
                   h && /* @__PURE__ */ r(
                     xe,
                     {
                       type: "error",
                       showIcon: !1,
                       showBackground: !1,
-                      children: /* @__PURE__ */ r(j, { size: "2", children: h })
+                      children: /* @__PURE__ */ r(L, { size: "2", children: h })
                     }
                   )
                 ]
@@ -7965,7 +7976,7 @@ const Gr = {
         align: "center",
         height: s ? "84px" : "116px",
         children: /* @__PURE__ */ r(
-          j,
+          L,
           {
             size: "1",
             weight: "medium",
@@ -7980,7 +7991,7 @@ const Gr = {
     /* @__PURE__ */ g(y, { direction: "column", gap: "2", children: [
       /* @__PURE__ */ g(y, { width: "100%", justify: "between", align: "center", children: [
         /* @__PURE__ */ r(y, { align: "center", gap: "2", children: /* @__PURE__ */ r(
-          j,
+          L,
           {
             size: "1",
             weight: "medium",
@@ -7988,7 +7999,7 @@ const Gr = {
             children: e._("Tempo")
           }
         ) }),
-        /* @__PURE__ */ g(j, { size: "1", weight: "regular", children: [
+        /* @__PURE__ */ g(L, { size: "1", weight: "regular", children: [
           t,
           " ",
           e._("bpm")
@@ -7996,7 +8007,7 @@ const Gr = {
       ] }),
       /* @__PURE__ */ g(y, { width: "100%", justify: "between", align: "center", children: [
         /* @__PURE__ */ r(y, { align: "center", gap: "2", children: /* @__PURE__ */ r(
-          j,
+          L,
           {
             size: "1",
             weight: "medium",
@@ -8004,7 +8015,7 @@ const Gr = {
             children: e._("Time Signature")
           }
         ) }),
-        /* @__PURE__ */ g(j, { size: "1", weight: "regular", children: [
+        /* @__PURE__ */ g(L, { size: "1", weight: "regular", children: [
           o,
           " / ",
           i
@@ -8012,7 +8023,7 @@ const Gr = {
       ] }),
       l && /* @__PURE__ */ g(y, { width: "100%", justify: "between", align: "center", children: [
         /* @__PURE__ */ r(y, { align: "center", gap: "2", children: /* @__PURE__ */ r(
-          j,
+          L,
           {
             size: "1",
             weight: "medium",
@@ -8020,11 +8031,11 @@ const Gr = {
             children: e._("Root Key")
           }
         ) }),
-        /* @__PURE__ */ r(j, { size: "1", weight: "regular", children: l })
+        /* @__PURE__ */ r(L, { size: "1", weight: "regular", children: l })
       ] })
     ] }),
     /* @__PURE__ */ r(y, { width: "80%", mx: "auto", justify: "center", children: /* @__PURE__ */ g(
-      j,
+      L,
       {
         size: "1",
         weight: "regular",
@@ -8229,9 +8240,9 @@ const Dt = 30, gs = 200, Gk = [
     );
     return /* @__PURE__ */ g(he, { children: [
       /* @__PURE__ */ g(y, { mb: "2", mt: "3", width: "100%", justify: "between", align: "center", children: [
-        /* @__PURE__ */ r(y, { align: "center", gap: "2", children: /* @__PURE__ */ r(j, { size: "2", weight: "medium", children: t._("Tempo") }) }),
+        /* @__PURE__ */ r(y, { align: "center", gap: "2", children: /* @__PURE__ */ r(L, { size: "2", weight: "medium", children: t._("Tempo") }) }),
         /* @__PURE__ */ r(
-          j,
+          L,
           {
             size: "2",
             weight: "regular",
@@ -8307,7 +8318,7 @@ const Dt = 30, gs = 200, Gk = [
     return /* @__PURE__ */ g(he, { children: [
       /* @__PURE__ */ r(tE, { bpm: t, onTempoChange: n, i18n: l }),
       /* @__PURE__ */ g(y, { gap: "1", mt: "4", direction: "column", children: [
-        /* @__PURE__ */ r(j, { size: "2", children: l._("Time signature") }),
+        /* @__PURE__ */ r(L, { size: "2", children: l._("Time signature") }),
         /* @__PURE__ */ g(y, { width: "100%", gap: "1", align: "center", children: [
           /* @__PURE__ */ r(
             Ft,
@@ -8318,7 +8329,7 @@ const Dt = 30, gs = 200, Gk = [
               items: Yk
             }
           ),
-          /* @__PURE__ */ r(j, { size: "2", children: "/" }),
+          /* @__PURE__ */ r(L, { size: "2", children: "/" }),
           /* @__PURE__ */ r(
             Ft,
             {
@@ -8331,7 +8342,7 @@ const Dt = 30, gs = 200, Gk = [
         ] })
       ] }),
       /* @__PURE__ */ g(y, { gap: "1", mt: "4", direction: "column", children: [
-        /* @__PURE__ */ r(j, { size: "2", children: l._("Root Key") }),
+        /* @__PURE__ */ r(L, { size: "2", children: l._("Root Key") }),
         /* @__PURE__ */ r(y, { width: "100%", gap: "1", align: "center", children: /* @__PURE__ */ r(
           Ft,
           {
@@ -8363,7 +8374,7 @@ const Dt = 30, gs = 200, Gk = [
   timeSignatureBottom: p
 }) => /* @__PURE__ */ g(y, { width: "200px", direction: "column", children: [
   /* @__PURE__ */ g(y, { width: "100%", justify: "between", children: [
-    /* @__PURE__ */ g(j, { size: "2", children: [
+    /* @__PURE__ */ g(L, { size: "2", children: [
       " ",
       e._("AI Auto Detect")
     ] }),
@@ -8498,7 +8509,7 @@ const lE = "_track_1xe9y_1", cE = "_leftIcon_1xe9y_9", dE = "_name_1xe9y_15", uE
                     }
                   ),
                   /* @__PURE__ */ r(Er, { content: n, children: /* @__PURE__ */ r(
-                    j,
+                    L,
                     {
                       size: "2",
                       className: pe.name,
@@ -8585,7 +8596,7 @@ function NE({ name: n, errorsRef: e, children: t }) {
   const s = e.current[n];
   return /* @__PURE__ */ g(y, { direction: "column", gap: "1", children: [
     t,
-    s && /* @__PURE__ */ r(j, { size: "1", color: "red", children: s })
+    s && /* @__PURE__ */ r(L, { size: "1", color: "red", children: s })
   ] });
 }
 function US({ schema: n }) {
@@ -8621,7 +8632,7 @@ function US({ schema: n }) {
     i.current = i.current.filter((C) => C !== m);
   }), []), p = (m) => {
     const C = s[m];
-    return C ? /* @__PURE__ */ r(j, { size: "1", color: "red", children: C }) : null;
+    return C ? /* @__PURE__ */ r(L, { size: "1", color: "red", children: C }) : null;
   }, k = (m) => {
     t(m ?? n.parse({})), a({});
   }, v = x(
@@ -10310,7 +10321,7 @@ function oS({
     /* @__PURE__ */ r(Zn, { minWidth: "350px", maxWidth: "100%", side: "top", children: /* @__PURE__ */ r(Ae, { children: /* @__PURE__ */ g(y, { direction: "column", gap: "4", children: [
       /* @__PURE__ */ g(y, { justify: "between", align: "center", children: [
         /* @__PURE__ */ g(y, { align: "center", gap: "2", children: [
-          /* @__PURE__ */ r(j, { size: "2", style: { color: "var(--white)" }, children: s._("Isolate Vocals") }),
+          /* @__PURE__ */ r(L, { size: "2", style: { color: "var(--white)" }, children: s._("Isolate Vocals") }),
           /* @__PURE__ */ r(
             Je,
             {
@@ -10421,7 +10432,7 @@ function AS({
       onClick: a,
       showIcon: !1,
       showBackground: !1,
-      children: /* @__PURE__ */ r(j, { size: "2", children: t._("Select audio file to convert ") })
+      children: /* @__PURE__ */ r(L, { size: "2", children: t._("Select audio file to convert ") })
     }
   ) });
 }
@@ -10673,7 +10684,7 @@ export {
   wS as Table,
   RS as Tabs,
   sE as TempoControlsForm,
-  j as Text,
+  L as Text,
   Ji as TextArea,
   Di as TextField,
   Us as Theme,

package/package.json

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

package/src/lib/menu/renderItem.jsx

@@ -18,7 +18,14 @@ export const createRenderItem = (MenuPrimitives) => {
     switch (opt.type) {
       case 'custom':
         return (
-          <div key={opt.key} className={styles.menuItem}>
+          <div
+            key={opt.key}
+            className={classNames(
+              styles.menuItem,
+              styles[`menuItem-size-${size}`],
+            )}
+            data-disabled={opt.disabled ? '' : undefined}
+          >
             {opt.customRender()}
           </div>
         )