@moises.ai/design-system 4.17.1 → 4.17.3

package/package.json

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

package/src/components/SetlistList/SetlistList.jsx

@@ -292,6 +292,7 @@ export const SetlistList = ({
   droppable = false,
   activeDropSetlistId = null,
   enableDndDropTargets = false,
+  className,
 }) => {
   const { close, isMobile: isMobileDrawer } = useMobileDrawerContext()
   const [openSetlistMenuId, setOpenSetlistMenuId] = useState(null)
@@ -575,7 +576,7 @@ export const SetlistList = ({
             ) : (
               <NewSetlistButton
                 onClick={handleNewSetlistClick}
-                className={classNames({
+                className={classNames(className, {
                   [styles.staggerItem]: isStaggerActive,
                   [styles.staggerAnimateIn]: isStaggerActive && isExpanding,
                   [styles.staggerAnimateOut]: isStaggerActive && isShrinking,

package/src/components/SetlistList/SetlistList.module.css

@@ -26,9 +26,11 @@
     .avatarSetlist {
       background: var(--neutral-alpha-3);
     }
+
     .dropdownMenuTrigger {
       color: var(--neutral-alpha-7);
     }
+
     .dropdownTriggerWrapper {
       opacity: 1;
       pointer-events: auto;
@@ -83,7 +85,7 @@
   gap: 8px;
   aspect-ratio: 1/1;
   border-radius: 4px;
-  background: var(--neutral-2);
+  background: var(--neutral-3);
   color: var(--neutral-alpha-8);
   flex-shrink: 0;
   position: relative;
@@ -180,9 +182,11 @@
       background: var(--neutral-alpha-4) !important;
     }
   }
+
   .avatarSetlist {
     background: var(--neutral-alpha-4);
   }
+
   .dropdownMenuTrigger {
     color: var(--neutral-alpha-7);
   }
@@ -199,6 +203,7 @@
     pointer-events: auto;
   }
 }
+
 .setlistsSection {
   flex: 1;
   min-height: 0;
@@ -328,6 +333,7 @@ sectionTitle {
   from {
     transform: translateY(var(--stagger-in-y, 0)) scaleX(var(--stagger-in-scale, 1));
   }
+
   to {
     transform: translateY(0) scaleX(1);
   }
@@ -337,6 +343,7 @@ sectionTitle {
   from {
     transform: translateY(0) scaleX(1);
   }
+
   to {
     transform: translateY(var(--stagger-out-y, 0)) scaleX(var(--stagger-out-scale, 1));
   }
@@ -360,6 +367,7 @@ sectionTitle {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -369,6 +377,7 @@ sectionTitle {
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }
@@ -451,9 +460,11 @@ sectionTitle {
 .iconHidden {
   opacity: 0;
 }
+
 .newSetlistItemButton {
   color: var(--aqua-alpha-11) !important;
 }
+
 .plusIcon {
   color: var(--aqua-alpha-11);
-}
+}