@moises.ai/design-system 4.19.3 → 4.19.4

package/src/icons/Filter2Icon.jsx

@@ -4,23 +4,9 @@ export const Filter2Icon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M4.25 6H19.75M10.75 18H13.25M7.75 12H16.25"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Filter2 Icon">
+  <path d="M4 6H20M11 18H13M7.5 12H16.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 Filter2Icon.displayName = 'Filter2Icon'

package/src/icons/FitWidthIcon.jsx

@@ -0,0 +1,7 @@
+export const FitWidthIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Fit Width Icon">
+  <path d="M9 8L5 12L9 16M15 8L19 12L15 16M2 4V20M22 4V20M18 12H6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+FitWidthIcon.displayName = 'FitWidthIcon'

package/src/icons/FlatAndSharpIcon.jsx

@@ -4,22 +4,9 @@ export const FlatAndSharpIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M2 16.9845L5.85173 15.477C7.16341 14.9637 8.58065 15.9556 8.58065 17.3641C8.58065 19.0738 7.49405 20.6185 5.87659 21.1724L2 22.5V16.9845ZM2 16.9845V7.74377M15.3648 2.7571V5.97519M15.3648 5.97519V10.058M15.3648 5.97519L12.34 7.15342M15.3648 5.97519L19.1361 4.5062M15.3648 10.058V13.1282M15.3648 10.058L12.34 11.2362M15.3648 10.058L19.1361 8.58901M19.1361 1.5V4.5062M19.1361 4.5062V8.58901M19.1361 4.5062L22.0038 3.38917M19.1361 8.58901V11.8711M19.1361 8.58901L22.0038 7.47199"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Flat And Sharp Icon">
+  <path d="M4 10.9461L15.5488 7.69567M15.5488 7.69567L20 6.44288M15.5488 7.69567V4M4 18.5531L8.69509 17.2316M8.69509 17.2316L15.5488 15.3027M8.69509 17.2316V13.2M8.69509 17.2316V21.08M15.5488 15.3027L20 14.0499M15.5488 15.3027V11.2829M15.5488 15.3027V19.1622M8.69509 9.62V5.92" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+</svg>
 )
 
 FlatAndSharpIcon.displayName = 'FlatAndSharpIcon'

package/src/icons/GuitarAmpIcon.jsx

@@ -4,38 +4,12 @@ export const GuitarAmpIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M6 8C6 8.55228 5.55228 9 5 9C4.44772 9 4 8.55228 4 8C4 7.44772 4.44772 7 5 7C5.55228 7 6 7.44772 6 8Z"
-      fill="currentColor"
-    />
-    <path
-      d="M9 8C9 8.55228 8.55228 9 8 9C7.44772 9 7 8.55228 7 8C7 7.44772 7.44772 7 8 7C8.55228 7 9 7.44772 9 8Z"
-      fill="currentColor"
-    />
-    <path
-      d="M12 8C12 8.55228 11.5523 9 11 9C10.4477 9 10 8.55228 10 8C10 7.44772 10.4477 7 11 7C11.5523 7 12 7.44772 12 8Z"
-      fill="currentColor"
-    />
-    <path
-      d="M18 7.5C18 7.22386 18.2239 7 18.5 7H19.5C19.7761 7 20 7.22386 20 7.5V8.5C20 8.77614 19.7761 9 19.5 9H18.5C18.2239 9 18 8.77614 18 8.5V7.5Z"
-      fill="currentColor"
-    />
-    <path
-      d="M17 3C15.6154 3 14.0769 2 12 2C9.92308 2 9.07692 2.99997 7 3M2 11H22M3 21L6 18M6 18L9 15M6 18L9 21L12 18M6 18L3 15L6 12L9 15M9 15L12 12L15 15M9 15L12 18M21 21L18 18M18 18L15 15M18 18L15 21L12 18M18 18L21 15L18 12L15 15M15 15L12 18M3 22H21C21.5523 22 22 21.5523 22 21V6C22 5.44772 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V21C2 21.5523 2.44772 22 3 22Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Guitar Amp Icon">
+  <path d="M19 9C19 9.55228 18.5523 10 18 10C17.4477 10 17 9.55228 17 9C17 8.44772 17.4477 8 18 8C18.5523 8 19 8.44772 19 9Z" fill="currentColor"/>
+  <path d="M7 9C7 9.55228 6.55228 10 6 10C5.44772 10 5 9.55228 5 9C5 8.44772 5.44772 8 6 8C6.55228 8 7 8.44772 7 9Z" fill="currentColor"/>
+  <path d="M10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9Z" fill="currentColor"/>
+  <path d="M3 12H21M8 2.5C9.1227 1.84509 10.3992 1.5 11.6989 1.5H12.3011C13.6008 1.5 14.8773 1.84509 16 2.5M5 21H19C20.3807 21 21.5 19.8807 21.5 18.5V8C21.5 6.61929 20.3807 5.5 19 5.5H5C3.61929 5.5 2.5 6.61929 2.5 8V18.5C2.5 19.8807 3.61929 21 5 21Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 GuitarAmpIcon.displayName = 'GuitarAmpIcon'

package/src/icons/HelpIcon.jsx

@@ -1,7 +1,8 @@
 export const HelpIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
-    <path d="M9.09003 9C9.32513 8.33167 9.78918 7.76811 10.4 7.40914C11.0108 7.05016 11.7289 6.91894 12.4272 7.03872C13.1255 7.15849 13.7588 7.52153 14.2151 8.06353C14.6714 8.60554 14.9211 9.29153 14.92 10C14.92 12 11.92 13 11.92 13V14.7662M12 18V18.0201M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Help Icon">
+  <path d="M9 9.57143C9 8.15127 10.3431 7 12 7C13.6569 7 15 8.15127 15 9.57143C15 10.5847 14.3162 11.4612 13.3225 11.8801C12.6319 12.1714 12 12.7505 12 13.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+  <circle cx="12" cy="16.75" r="1.25" fill="currentColor"/>
+</svg>
 )
 
 HelpIcon.displayName = 'HelpIcon'

package/src/icons/Info2Icon.jsx

@@ -1,8 +1,8 @@
 export const Info2Icon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 22 22" fill="none" className={className} {...props}>
-    <path d="M9.875 9.5C9.46079 9.5 9.125 9.83579 9.125 10.25C9.125 10.6642 9.46079 11 9.875 11V9.5ZM10.75 10.25H11.5C11.5 9.83579 11.1642 9.5 10.75 9.5V10.25ZM10 16.25C10 16.6642 10.3358 17 10.75 17C11.1642 17 11.5 16.6642 11.5 16.25H10ZM20 10.75C20 15.8586 15.8586 20 10.75 20V21.5C16.6871 21.5 21.5 16.6871 21.5 10.75H20ZM10.75 20C5.64137 20 1.5 15.8586 1.5 10.75H0C0 16.6871 4.81294 21.5 10.75 21.5V20ZM1.5 10.75C1.5 5.64137 5.64137 1.5 10.75 1.5V0C4.81294 0 0 4.81294 0 10.75H1.5ZM10.75 1.5C15.8586 1.5 20 5.64137 20 10.75H21.5C21.5 4.81294 16.6871 0 10.75 0V1.5ZM9.875 11H10.75V9.5H9.875V11ZM10 10.25V16.25H11.5V10.25H10ZM10.625 5.875V7.375C11.4534 7.375 12.125 6.70343 12.125 5.875H10.625ZM10.625 5.875H9.125C9.125 6.70343 9.79657 7.375 10.625 7.375V5.875ZM10.625 5.875V4.375C9.79657 4.375 9.125 5.04657 9.125 5.875H10.625ZM10.625 5.875H12.125C12.125 5.04657 11.4534 4.375 10.625 4.375V5.875Z"
-      fill="currentColor" />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Info 2 Icon">
+  <path d="M12 12V16M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+  <circle cx="12" cy="8.25" r="1.25" fill="currentColor"/>
+</svg>
 )
 
 Info2Icon.displayName = 'Info2Icon'

package/src/icons/Knob3Icon.jsx

@@ -1,21 +1,12 @@
 export const Knob3Icon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <g>
-      <path
-        d="M11.9999 0.75V1.25M19.9552 4.0452L19.6017 4.39875M23.2504 12.0005L22.7504 12.0005M0.749329 12.0005H1.24933M4.04459 4.04504L4.39814 4.39859M16.9551 7.04519L13.9999 9.99998M19.5131 12.0002C19.5131 16.1496 16.1494 19.5134 12 19.5134C7.85058 19.5134 4.48683 16.1496 4.48683 12.0002C4.48683 7.85083 7.85058 4.48707 12 4.48707C16.1494 4.48707 19.5131 7.85083 19.5131 12.0002Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Knob 3 Icon">
+  <path d="M16.9552 8.04542L14 11.0002M19.5133 13.0005C19.5133 17.1499 16.1495 20.5136 12.0001 20.5136C7.85069 20.5136 4.48694 17.1499 4.48694 13.0005C4.48694 8.85106 7.85069 5.4873 12.0001 5.4873C16.1495 5.4873 19.5133 8.85106 19.5133 13.0005Z" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+  <path d="M13 2C13 2.55228 12.5523 3 12 3C11.4477 3 11 2.55228 11 2C11 1.44772 11.4477 1 12 1C12.5523 1 13 1.44772 13 2Z" fill="currentColor"/>
+  <path d="M20.4853 5.92894C20.0948 6.31946 19.4616 6.31946 19.0711 5.92894C18.6806 5.53841 18.6806 4.90525 19.0711 4.51472C19.4616 4.1242 20.0948 4.1242 20.4853 4.51472C20.8758 4.90525 20.8758 5.53841 20.4853 5.92894Z" fill="currentColor"/>
+  <path d="M23 14C22.4477 14 22 13.5523 22 13C22 12.4477 22.4477 12 23 12C23.5523 12 24 12.4477 24 13C24 13.5523 23.5523 14 23 14Z" fill="currentColor"/>
+  <path d="M1.00012 14C0.447837 14 0.00012207 13.5523 0.00012207 13C0.00012207 12.4477 0.447837 12 1.00012 12C1.55241 12 2.00012 12.4477 2.00012 13C2.00012 13.5523 1.55241 14 1.00012 14Z" fill="currentColor"/>
+  <path d="M3.51479 5.92879C3.12426 5.53826 3.12426 4.9051 3.51479 4.51457C3.90531 4.12405 4.53848 4.12405 4.929 4.51457C5.31953 4.9051 5.31953 5.53826 4.929 5.92879C4.53848 6.31931 3.90531 6.31931 3.51479 5.92879Z" fill="currentColor"/>
 </svg>
 )
 

package/src/icons/LibraryIcon.jsx

@@ -4,22 +4,8 @@ export const LibraryIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <g>
-      <path
-        d="M3.16602 3.16602L3.16602 12.8327M6.49935 3.16602L6.49935 12.8327M9.25508 3.20901L13.6499 12.6337"
-        stroke="currentColor"
-        strokeLinecap="round"
-      />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Library Icon">
+  <path d="M4 4V20M9.40512 4L9.40512 20M13.8736 4.07117L21 19.6707" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>
 )
 

package/src/icons/LinkIcon.jsx

@@ -1,21 +1,8 @@
 export const LinkIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M9.99994 13C10.4294 13.5741 10.9773 14.0491 11.6065 14.3929C12.2357 14.7367 12.9314 14.9411 13.6466 14.9923C14.3617 15.0435 15.0795 14.9403 15.7513 14.6897C16.423 14.4392 17.0331 14.047 17.5399 13.54L20.5399 10.54C21.4507 9.59695 21.9547 8.33394 21.9433 7.02296C21.9319 5.71198 21.4061 4.45791 20.479 3.53087C19.552 2.60383 18.2979 2.07799 16.9869 2.0666C15.676 2.0552 14.413 2.55918 13.4699 3.46997L11.7499 5.17997M14 11C13.5705 10.4258 13.0226 9.95078 12.3934 9.60703C11.7642 9.26327 11.0684 9.05885 10.3533 9.00763C9.63816 8.95642 8.92037 9.0596 8.24861 9.31018C7.57685 9.56077 6.96684 9.9529 6.45996 10.46L3.45996 13.46C2.54917 14.403 2.04519 15.666 2.05659 16.977C2.06798 18.288 2.59382 19.542 3.52086 20.4691C4.4479 21.3961 5.70197 21.9219 7.01295 21.9333C8.32393 21.9447 9.58694 21.4408 10.53 20.53L12.24 18.82"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Link Icon">
+  <path d="M10.1898 12.906C10.5785 13.4262 11.0744 13.8566 11.6439 14.168C12.2134 14.4795 12.8431 14.6647 13.4904 14.7111C14.1377 14.7575 14.7874 14.664 15.3954 14.437C16.0034 14.21 16.5555 13.8547 17.0143 13.3953L19.7296 10.6772C20.554 9.82282 21.0101 8.67851 20.9998 7.49073C20.9895 6.30296 20.5136 5.16675 19.6745 4.32684C18.8354 3.48692 17.7004 3.01049 16.5138 3.00017C15.3272 2.98985 14.184 3.44646 13.3305 4.27165L11.7737 5.82095M13.8102 11.094C13.4215 10.5738 12.9256 10.1434 12.3561 9.83195C11.7866 9.5205 11.1569 9.33529 10.5096 9.28889C9.86233 9.24248 9.21264 9.33597 8.60463 9.56301C7.99661 9.79004 7.44449 10.1453 6.9857 10.6047L4.27037 13.3228C3.44601 14.1772 2.98986 15.3215 3.00017 16.5093C3.01048 17.697 3.48643 18.8332 4.3255 19.6732C5.16458 20.5131 6.29964 20.9895 7.48622 20.9998C8.67281 21.0101 9.81597 20.5535 10.6695 19.7283L12.2172 18.1791" 
+   stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 LinkIcon.displayName = 'LinkIcon'

package/src/icons/LoopSection2Icon.jsx

@@ -4,23 +4,10 @@ export const LoopSection2Icon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M10 2L14 6L10 10M13.0625 6H4C2.34315 6 1 7.34315 1 9V12C1 13.6569 2.34315 15 4 15H20C21.6569 15 23 13.6569 23 12V9C23 7.34315 21.6569 6 20 6H18M1 18V19C1 20.6569 2.34315 22 4 22H20C21.6569 22 23 20.6569 23 19V18"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Loop Section 2 Icon">
+  <path d="M18 12C19.6569 12 21 10.6569 21 9V7C21 5.34315 19.6569 4 18 4H6C4.34315 4 3 5.34315 3 7V9C3 10.6569 4.34315 12 6 12H14M10.5 8.5L14 12L10.5714 15.5M3 15V17C3 18.6569 4.34315 20 6 20H18C19.6569 20 21 18.6569 21 17V15"
+   stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 LoopSection2Icon.displayName = 'LoopSection2Icon'

package/src/icons/LyricsIcon.jsx

@@ -4,30 +4,11 @@ export const LyricsIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M9.41667 10.4999C10.015 10.4999 10.5 10.0149 10.5 9.41659C10.5 8.81828 10.015 8.33325 9.41667 8.33325C8.81836 8.33325 8.33334 8.81828 8.33334 9.41659C8.33334 10.0149 8.81836 10.4999 9.41667 10.4999Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14.5 10.5C15.0983 10.5 15.5833 10.015 15.5833 9.41667C15.5833 8.81836 15.0983 8.33333 14.5 8.33333C13.9017 8.33333 13.4167 8.81836 13.4167 9.41667C13.4167 10.015 13.9017 10.5 14.5 10.5Z"
-      fill="currentColor"
-    />
-    <path
-      d="M8.51673 13.0489C10.7117 12.4503 11.0668 9.83178 10.0668 8.83178C9.06681 7.83178 7.88818 9.49223 8.96567 10.031C9.574 10.3352 10.0668 9.78158 9.88845 9.44035M13.4302 13.0489C15.6253 12.4503 15.9803 9.83178 14.9803 8.83178C13.9803 7.83178 12.8017 9.49223 13.8792 10.031C14.4875 10.3352 14.9803 9.78158 14.802 9.44035M8.48528 18.7061H19C20.6569 18.7061 22 17.3629 22 15.7061V5.70605C22 4.0492 20.6569 2.70605 19 2.70605H5C3.34315 2.70605 2 4.0492 2 5.70605V20.2918C2 21.1827 3.07714 21.6289 3.70711 20.9989L4.24264 20.4634C5.36786 19.3382 6.89398 18.7061 8.48528 18.7061Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Lyrics Icon">
+  <path d="M14.234 8.50742C14.7365 8.4593 15.2227 8.64692 15.6129 9.02012C16.3734 9.74763 16.4927 10.9613 16.236 11.8668C15.9793 12.7723 15.3236 13.7231 13.9891 14.1296C13.497 14.2795 13.1988 14.1715 13.0358 13.8745C12.8729 13.5776 12.982 13.1312 13.4393 12.9553C13.8966 12.7794 14.2574 12.3132 14.3776 11.6725C14.1285 11.6825 13.8668 11.6366 13.611 11.5143C13.1238 11.2811 12.7897 10.8587 12.7252 10.3346C12.6663 9.85539 12.8485 9.41937 13.1032 9.11387C13.362 8.80328 13.7561 8.5532 14.234 8.50742Z" fill="currentColor"/>
+  <path d="M9.52945 8.50742C10.0319 8.4593 10.5182 8.64692 10.9084 9.02012C11.6688 9.74763 11.7881 10.9613 11.5314 11.8668C11.2747 12.7723 10.619 13.7231 9.28452 14.1296C8.79241 14.2795 8.49422 14.1715 8.33126 13.8745C8.16829 13.5776 8.27747 13.1312 8.73475 12.9553C9.19204 12.7794 9.55281 12.3132 9.67301 11.6725C9.42395 11.6825 9.16222 11.6366 8.90641 11.5143C8.41923 11.2811 8.08517 10.8587 8.02066 10.3346C7.96169 9.85539 8.14394 9.41937 8.39859 9.11387C8.65748 8.80328 9.0515 8.5532 9.52945 8.50742Z" fill="currentColor"/>
+  <path d="M18.3 4H5.7C4.20883 4 3 5.15615 3 6.58234V20.1375C3 20.9044 3.96943 21.2884 4.5364 20.7462L5.01838 20.2852C6.03107 19.3166 7.40458 18.7725 8.83675 18.7725H18.3C19.7912 18.7725 21 17.6163 21 16.1901V6.58234C21 5.15615 19.7912 4 18.3 4Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+</svg>
 )
 
 LyricsIcon.displayName = 'LyricsIcon'

package/src/icons/MagicWandIcon.jsx

@@ -1,12 +1,9 @@
 export const MagicWandIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
-    <path
-      d="M19.3777 13.5788V16.3419M19.3777 16.3419V19.1051M19.3777 16.3419H22.1277M19.3777 16.3419H16.6277M14.2666 5.421L17.4999 8.66974M9.49993 5.42105C7.37965 5.42028 5.65952 3.69608 5.64637 1.56422C5.63324 3.69364 3.91687 5.41636 1.79993 5.42106C3.92455 5.42578 5.64553 7.16097 5.6463 9.30106C5.64707 7.15854 7.37197 5.42183 9.49993 5.42105ZM2.13661 19.1051L4.31785 21.2967C4.74742 21.7284 5.44391 21.7284 5.87348 21.2967L21.5589 5.53624C21.9885 5.10461 21.9885 4.40479 21.5589 3.97316L19.3777 1.78149C18.9481 1.34986 18.2517 1.34986 17.8221 1.78149L2.13661 17.542C1.70704 17.9736 1.70703 18.6734 2.13661 19.1051Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round" />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Magic Wand Icon">
+  <path d="M14 7.00002L17 10M3.43897 18.8674L5.13263 20.5611C5.71842 21.1469 6.66816 21.1469 7.25395 20.5611L20.561 7.25407C21.1467 6.66829 21.1467 5.71854 20.561 5.13275L18.8673 3.4391C18.2815 2.85331 17.3318 2.85331 16.746 3.4391L3.43897 16.7461C2.85319 17.3319 2.85319 18.2816 3.43897 18.8674Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M18.2461 15.8886C18.319 15.6332 18.6809 15.6332 18.7539 15.8886C19.0797 17.0289 19.971 17.9203 21.1114 18.2461C21.3667 18.319 21.3667 18.6809 21.1114 18.7539C19.971 19.0797 19.0797 19.971 18.7539 21.1114C18.6809 21.3667 18.319 21.3667 18.2461 21.1114C17.9203 19.971 17.0289 19.0797 15.8886 18.7539C15.6332 18.6809 15.6332 18.319 15.8886 18.2461C17.0289 17.9203 17.9203 17.0289 18.2461 15.8886Z" fill="currentColor"/>
+  <path d="M5.17355 2.14246C5.26735 1.81417 5.7326 1.81417 5.8264 2.14246C6.2453 3.60861 7.39135 4.75465 8.85749 5.17355C9.18579 5.26735 9.18579 5.7326 8.85749 5.8264C7.39135 6.2453 6.2453 7.39135 5.8264 8.85749C5.7326 9.18579 5.26735 9.18579 5.17355 8.85749C4.75465 7.39135 3.60861 6.2453 2.14246 5.8264C1.81417 5.7326 1.81417 5.26735 2.14246 5.17355C3.60861 4.75465 4.75465 3.60861 5.17355 2.14246Z" fill="currentColor"/>
+</svg>
 )
 
 MagicWandIcon.displayName = 'MagicWandIcon'

package/src/icons/MandolinIcon.jsx

@@ -0,0 +1,8 @@
+export const MandolinIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Mandolin Icon">
+  <path d="M9.25 15.8848H14.7501M10.0049 3.3667V10.413C10.0049 10.9653 10.4526 11.413 11.0049 11.413H13C13.5523 11.413 14 10.9653 14 10.413V3.3667M9.99987 3C9.99987 5.50649 8.32904 7.21662 6.7742 9.20243C5.42128 10.9304 3.81249 13 4.15612 15.7188C4.68513 19.9042 8.72 21.25 11.9999 21.25C15.28 21.25 19.3146 19.9042 19.8436 15.7188C20.1872 13 18.5785 10.9304 17.2255 9.20243C15.6707 7.21662 13.9999 5.50649 13.9999 3" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+</svg>
+)
+
+MandolinIcon.displayName = 'MandolinIcon'

package/src/icons/MaracasIcon.jsx

@@ -4,21 +4,10 @@ export const MaracasIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M10.8065 3.80936C11.9248 2.69104 15.1256 3.69178 17.717 6.28318C20.3084 8.87459 21.3091 12.0754 20.1908 13.1937M8.48832 8.00436C9.25653 5.79428 12.5253 6.81031 14.8575 9.14257C17.1898 11.4748 18.2058 14.7436 15.9958 15.5118M20.1233 13.261C18.5553 14.8291 16.5498 15.6434 14.626 15.671C12.7991 15.6972 10.7288 15.2562 9.45092 16.3938C8.59883 17.1524 7.86446 18.2065 7.2154 19.6571C6.04697 22.2685 3.57056 23.3019 2.18829 21.9196L2.0804 21.8118C0.698121 20.4295 1.73153 17.9531 4.34291 16.7846C5.79353 16.1356 6.84766 15.4012 7.60624 14.5491C8.74387 13.2712 8.30288 11.2009 8.32905 9.37404C8.35661 7.45028 9.17097 5.44476 10.739 3.87674C13.6839 0.931834 18.172 0.645266 20.7634 3.23667C23.3548 5.82808 23.0682 10.3161 20.1233 13.261Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Maracas Icon">
+  <path d="M8.91723 8.18704C9.61003 6.1939 12.5579 7.1102 14.6612 9.21354C16.7646 11.3169 17.6809 14.2648 15.6878 14.9576M19.4102 12.9278C17.9961 14.3419 16.1874 15.0763 14.4525 15.1012C12.9395 15.1228 11.5418 15.0896 10.431 15.8786C10.2303 16.0212 10.0648 16.2064 9.91217 16.3997L6.49193 20.7307C5.60777 21.8504 3.94472 21.9477 2.93595 20.939C1.92717 19.9302 2.02454 18.2671 3.14415 17.383L7.47521 13.9627C7.66848 13.8101 7.85374 13.6446 7.99635 13.4439C8.78527 12.3331 8.75191 10.9353 8.77358 9.42229C8.79844 7.68736 9.53287 5.87869 10.947 4.46458C13.6028 1.80873 17.6504 1.5503 19.9874 3.88734C22.3244 6.22438 22.066 10.2719 19.4102 12.9278Z" 
+  stroke="currentColor" strokeWidth="1.8"/>
+</svg>
 )
 
 MaracasIcon.displayName = 'MaracasIcon'

package/src/icons/MasteringIcon.jsx

@@ -4,34 +4,11 @@ export const MasteringIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M4 4C4 2.89543 4.89543 2 6 2H18C19.1046 2 20 2.89543 20 4V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M16 14.6875C16 16.8966 14.2091 18.6875 12 18.6875C9.79086 18.6875 8 16.8966 8 14.6875C8 12.4784 9.79086 10.6875 12 10.6875C14.2091 10.6875 16 12.4784 16 14.6875Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M12.75 6.70079C12.75 7.115 12.4142 7.45079 12 7.45079C11.5858 7.45079 11.25 7.115 11.25 6.70079C11.25 6.28657 11.5858 5.95079 12 5.95079C12.4142 5.95079 12.75 6.28657 12.75 6.70079Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Mastering Icon">
+  <path d="M4.5 5.5C4.5 3.84315 5.84315 2.5 7.5 2.5H16.5C18.1569 2.5 19.5 3.84315 19.5 5.5V18.5C19.5 20.1569 18.1569 21.5 16.5 21.5H7.5C5.84315 21.5 4.5 20.1569 4.5 18.5V5.5Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
+  <path d="M15.5 14.5C15.5 16.433 13.933 18 12 18C10.067 18 8.5 16.433 8.5 14.5C8.5 12.567 10.067 11 12 11C13.933 11 15.5 12.567 15.5 14.5Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
+  <circle cx="12" cy="6.75" r="1.5" fill="currentColor"/>
+</svg>
 )
 
 MasteringIcon.displayName = 'MasteringIcon'

package/src/icons/MetronomeIcon.jsx

@@ -4,20 +4,10 @@ export const MetronomeIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M21 17.625L21.668 17.2839C21.7219 17.3895 21.75 17.5064 21.75 17.625H21ZM3 17.625H2.25C2.25 17.5064 2.27812 17.3895 2.33205 17.2839L3 17.625ZM13.3359 2.61611L14.0039 2.27503L13.3359 2.61611ZM10.6641 2.61611L11.332 2.9572L10.6641 2.61611ZM22.3826 1.57416C22.6178 1.23317 23.0848 1.14739 23.4258 1.38255C23.7668 1.61771 23.8526 2.08477 23.6174 2.42576L22.3826 1.57416ZM22.5638 3.95346C22.3287 4.29444 21.8616 4.38023 21.5206 4.14507C21.1796 3.9099 21.0938 3.44284 21.329 3.10186L22.5638 3.95346ZM19.054 6.40091C19.2957 6.06457 19.7644 5.98788 20.1007 6.22964C20.437 6.47139 20.5137 6.94003 20.272 7.27638L19.054 6.40091ZM3.75 17.625V20H2.25V17.625H3.75ZM5 21.25H19V22.75H5V21.25ZM20.25 20V17.625H21.75V20H20.25ZM20.332 17.966L12.668 2.9572L14.0039 2.27503L21.668 17.2839L20.332 17.966ZM11.332 2.9572L3.66796 17.966L2.33205 17.2839L9.99614 2.27503L11.332 2.9572ZM12.668 2.9572C12.3895 2.41197 11.6105 2.41197 11.332 2.9572L9.99614 2.27503C10.8314 0.639363 13.1686 0.63936 14.0039 2.27503L12.668 2.9572ZM19 21.25C19.6904 21.25 20.25 20.6903 20.25 20H21.75C21.75 21.5187 20.5188 22.75 19 22.75V21.25ZM3.75 20C3.75 20.6903 4.30965 21.25 5 21.25V22.75C3.48122 22.75 2.25 21.5187 2.25 20H3.75ZM23.6174 2.42576L22.5638 3.95346L21.329 3.10186L22.3826 1.57416L23.6174 2.42576ZM20.272 7.27638L12.609 17.9377L11.391 17.0622L19.054 6.40091L20.272 7.27638ZM19.5867 5.17184C19.5867 5.84883 20.1355 6.39764 20.8125 6.39764V7.89764C19.3071 7.89764 18.0867 6.67726 18.0867 5.17184H19.5867ZM20.8125 6.39764C21.4895 6.39764 22.0383 5.84883 22.0383 5.17184H23.5383C23.5383 6.67726 22.3179 7.89764 20.8125 7.89764V6.39764ZM22.0383 5.17184C22.0383 4.49484 21.4895 3.94603 20.8125 3.94603V2.44603C22.3179 2.44603 23.5383 3.66641 23.5383 5.17184H22.0383ZM20.8125 3.94603C20.1355 3.94603 19.5867 4.49484 19.5867 5.17184H18.0867C18.0867 3.66641 19.3071 2.44603 20.8125 2.44603V3.94603ZM20.5 18.25L12 18.25V16.75L20.5 16.75L20.5 18.25ZM12 18.25L3.50001 18.25V16.75L12 16.75V18.25Z"
-      fill="currentColor"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Metronome Icon">
+  <path d="M10.8125 4.18822L10.0204 3.76096V3.76096L10.8125 4.18822ZM4 16.8184L3.20788 16.3911L3.1 16.5911V16.8184H4ZM13.1875 4.18822L13.9796 3.76096V3.76096L13.1875 4.18822ZM20 16.8184L20.9 16.8184V16.5911L20.7921 16.3911L20 16.8184ZM20 19L19.1 19V19L20 19ZM19.1667 5.42725C19.4027 4.98978 19.2393 4.44384 18.8018 4.20788C18.3643 3.97191 17.8184 4.13527 17.5824 4.57275L18.3746 5L19.1667 5.42725ZM18.7325 12.5727C18.4966 12.1353 17.9506 11.9719 17.5132 12.2079C17.0757 12.4438 16.9123 12.9898 17.1483 13.4273L17.9404 13L18.7325 12.5727ZM6 21V21.9H18V21V20.1H6V21ZM10.8125 4.18822L10.0204 3.76096L3.20788 16.3911L4 16.8184L4.79212 17.2456L11.6046 4.61548L10.8125 4.18822ZM13.1875 4.18822L13.9796 3.76096C13.1446 2.21301 10.8553 2.21301 10.0204 3.76096L10.8125 4.18822L11.6046 4.61548C11.6741 4.48668 11.8143 4.4 12 4.4C12.1857 4.4 12.3259 4.48668 12.3954 4.61548L13.1875 4.18822ZM15.9733 9.35299L16.7654 8.92574L13.9796 3.76096L13.1875 4.18822L12.3954 4.61548L15.1812 9.78025L15.9733 9.35299ZM4 16.8184V17.7184H12V16.8184V15.9184H4V16.8184ZM12 16.8184V17.7184H20V16.8184V15.9184H12V16.8184ZM4 19H4.9V16.8184H4H3.1V19H4ZM20 19L20.9 19L20.9 16.8184L20 16.8184L19.1 16.8184L19.1 19L20 19ZM18.3746 5L17.5824 4.57275L11.2079 16.3911L12 16.8184L12.7921 17.2456L19.1667 5.42725L18.3746 5ZM20 16.8184L20.7921 16.3911L18.7325 12.5727L17.9404 13L17.1483 13.4273L19.2079 17.2456L20 16.8184ZM6 21V20.1C5.39249 20.1 4.9 19.6075 4.9 19H4H3.1C3.1 20.6016 4.39837 21.9 6 21.9V21ZM18 21V21.9C19.6016 21.9 20.9 20.6016 20.9 19L20 19L19.1 19C19.1 19.6075 18.6075 20.1 18 20.1V21Z" 
+  fill="currentColor"/>
+</svg>
 )
 
 MetronomeIcon.displayName = 'MetronomeIcon'

package/src/icons/Mixer2Icon.jsx

@@ -4,22 +4,10 @@ export const Mixer2Icon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M5.75 7L2 7.00005M5.75 7C5.75 8.38071 6.86929 9.5 8.25 9.5C9.63071 9.5 10.75 8.38071 10.75 7C10.75 5.61929 9.63071 4.5 8.25 4.5C6.86929 4.5 5.75 5.61929 5.75 7ZM22 7.00005L14.125 7M22 17L20.2188 17M2 17L11.75 17M11.75 17C11.75 15.6193 12.8693 14.5 14.25 14.5C15.6307 14.5 16.75 15.6193 16.75 17C16.75 18.3807 15.6307 19.5 14.25 19.5C12.8693 19.5 11.75 18.3807 11.75 17Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Mixer 2 Icon">
+  <path d="M6 7L3 7.00005M6 7C6 8.38071 7.11929 9.5 8.5 9.5C9.88071 9.5 11 8.38071 11 7C11 5.61929 9.88071 4.5 8.5 4.5C7.11929 4.5 6 5.61929 6 7ZM3 17H10.5M10.5 17C10.5 18.3808 11.6193 19.5 13 19.5C14.3807 19.5 15.5 18.3807 15.5 17C15.5 15.6193 14.3807 14.5 13 14.5C11.6193 14.5 10.5 15.6193 10.5 17ZM21 7.00005L14 7M18.5 17L21 17" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+</svg>
 )
 
 Mixer2Icon.displayName = 'Mixer2Icon'

package/src/icons/MixerVerticalIcon.jsx

@@ -0,0 +1,7 @@
+export const MixerVerticalIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Mixer Vertical Icon">
+  <path d="M17 6L16.9999 3M17 6C15.6193 6 14.5 7.11929 14.5 8.5C14.5 9.88071 15.6193 11 17 11C18.3807 11 19.5 9.88071 19.5 8.5C19.5 7.11929 18.3807 6 17 6ZM6.99995 3L6.99995 10.5M6.99995 10.5C5.61924 10.5 4.5 11.6193 4.5 13C4.5 14.3807 5.61929 15.5 7 15.5C8.38071 15.5 9.5 14.3807 9.5 13C9.5 11.6193 8.38066 10.5 6.99995 10.5ZM16.9999 21L17 14M7 18.5L6.99995 21" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+</svg>
+)
+
+MixerVerticalIcon.displayName = 'MixerVerticalIcon'

package/src/icons/More2Icon.jsx

@@ -1,44 +1 @@
-export const More2Icon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M13.2622 6.05877C13.2622 6.75582 12.6971 7.3209 12 7.3209C11.303 7.3209 10.7379 6.75582 10.7379 6.05877C10.7379 5.36171 11.303 4.79663 12 4.79663C12.6971 4.79663 13.2622 5.36171 13.2622 6.05877Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12.7499 6.05876C12.7499 6.47298 12.4141 6.80876 11.9999 6.80876C11.5857 6.80876 11.2499 6.47298 11.2499 6.05876C11.2499 5.64455 11.5857 5.30876 11.9999 5.30876C12.4141 5.30876 12.7499 5.64455 12.7499 6.05876Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M13.2622 11.9999C13.2622 12.697 12.6971 13.2621 12 13.2621C11.303 13.2621 10.7379 12.697 10.7379 11.9999C10.7379 11.3029 11.303 10.7378 12 10.7378C12.6971 10.7378 13.2622 11.3029 13.2622 11.9999Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12.7499 11.9999C12.7499 12.4142 12.4141 12.7499 11.9999 12.7499C11.5857 12.7499 11.2499 12.4142 11.2499 11.9999C11.2499 11.5857 11.5857 11.2499 11.9999 11.2499C12.4141 11.2499 12.7499 11.5857 12.7499 11.9999Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M13.2622 17.9411C13.2622 18.6382 12.6971 19.2033 12 19.2033C11.303 19.2033 10.7379 18.6382 10.7379 17.9411C10.7379 17.2441 11.303 16.679 12 16.679C12.6971 16.679 13.2622 17.2441 13.2622 17.9411Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12.7499 17.9411C12.7499 18.3553 12.4141 18.6911 11.9999 18.6911C11.5857 18.6911 11.2499 18.3553 11.2499 17.9411C11.2499 17.5269 11.5857 17.1911 11.9999 17.1911C12.4141 17.1911 12.7499 17.5269 12.7499 17.9411Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-  </svg>
-)
-
-More2Icon.displayName = 'More2Icon'
+export { MoreIcon as More2Icon } from './MoreIcon'

package/src/icons/MoreIcon.jsx

@@ -1,45 +1,8 @@
 export const MoreIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <g>
-      <path
-        d="M11.9613 8.84105C11.4966 8.84105 11.1199 8.46433 11.1199 7.99963C11.1199 7.53492 11.4966 7.1582 11.9613 7.1582C12.426 7.1582 12.8027 7.53492 12.8027 7.99963C12.8027 8.46433 12.426 8.84105 11.9613 8.84105Z"
-        stroke="currentColor"
-        strokeWidth="0.666667"
-      />
-      <path
-        d="M11.9613 8.49953C11.6852 8.49953 11.4613 8.27567 11.4613 7.99953C11.4613 7.72339 11.6852 7.49953 11.9613 7.49953C12.2375 7.49953 12.4613 7.72339 12.4613 7.99953C12.4613 8.27567 12.2375 8.49953 11.9613 8.49953Z"
-        stroke="currentColor"
-        strokeWidth="0.666667"
-      />
-      <path
-        d="M8.00053 8.84105C7.53582 8.84105 7.1591 8.46433 7.1591 7.99963C7.1591 7.53492 7.53582 7.1582 8.00053 7.1582C8.46523 7.1582 8.84195 7.53492 8.84195 7.99963C8.84195 8.46433 8.46523 8.84105 8.00053 8.84105Z"
-        stroke="currentColor"
-        strokeWidth="0.666667"
-      />
-      <path
-        d="M8.00053 8.49953C7.72438 8.49953 7.50053 8.27567 7.50053 7.99953C7.50053 7.72339 7.72438 7.49953 8.00053 7.49953C8.27667 7.49953 8.50053 7.72339 8.50053 7.99953C8.50053 8.27567 8.27667 8.49953 8.00053 8.49953Z"
-        stroke="currentColor"
-        strokeWidth="0.666667"
-      />
-      <path
-        d="M4.03974 8.84105C3.57504 8.84105 3.19832 8.46433 3.19832 7.99963C3.19832 7.53492 3.57504 7.1582 4.03974 7.1582C4.50445 7.1582 4.88116 7.53492 4.88116 7.99963C4.88116 8.46433 4.50445 8.84105 4.03974 8.84105Z"
-        stroke="currentColor"
-        strokeWidth="0.666667"
-      />
-      <path
-        d="M4.03974 8.49953C3.7636 8.49953 3.53974 8.27567 3.53974 7.99953C3.53974 7.72339 3.7636 7.49953 4.03974 7.49953C4.31588 7.49953 4.53974 7.72339 4.53974 7.99953C4.53974 8.27567 4.31588 8.49953 4.03974 8.49953Z"
-        stroke="currentColor"
-        strokeWidth="0.666667"
-      />
-    </g>
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="More Icon">
+  <path d="M13.5 6.51514C13.5 7.34356 12.8284 8.01514 12 8.01514C11.1716 8.01514 10.5 7.34356 10.5 6.51514C10.5 5.68671 11.1716 5.01514 12 5.01514C12.8284 5.01514 13.5 5.68671 13.5 6.51514Z" fill="currentColor"/>
+  <path d="M13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12Z" fill="currentColor"/>
+  <path d="M13.5 17.4956C13.5 18.324 12.8284 18.9956 12 18.9956C11.1716 18.9956 10.5 18.324 10.5 17.4956C10.5 16.6672 11.1716 15.9956 12 15.9956C12.8284 15.9956 13.5 16.6672 13.5 17.4956Z" fill="currentColor"/>
 </svg>
 )
 

package/src/icons/MoreMenuIcon.jsx

@@ -0,0 +1,9 @@
+export const MoreMenuIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="More Menu Icon">
+  <path d="M17.4902 13.5054C16.6618 13.5054 15.9902 12.8338 15.9902 12.0054C15.9902 11.1769 16.6618 10.5054 17.4902 10.5054C18.3187 10.5054 18.9902 11.1769 18.9902 12.0054C18.9902 12.8338 18.3187 13.5054 17.4902 13.5054Z" fill="currentColor"/>
+  <path d="M12.0054 13.5054C11.1769 13.5054 10.5054 12.8338 10.5054 12.0054C10.5054 11.1769 11.1769 10.5054 12.0054 10.5054C12.8338 10.5054 13.5054 11.1769 13.5054 12.0054C13.5054 12.8338 12.8338 13.5054 12.0054 13.5054Z" fill="currentColor"/>
+  <path d="M6.50977 13.5054C5.68134 13.5054 5.00977 12.8338 5.00977 12.0054C5.00977 11.1769 5.68134 10.5054 6.50977 10.5054C7.33819 10.5054 8.00977 11.1769 8.00977 12.0054C8.00977 12.8338 7.33819 13.5054 6.50977 13.5054Z" fill="currentColor"/>
+</svg>
+)
+
+MoreMenuIcon.displayName = 'MoreMenuIcon'

package/src/icons/MusicAddIcon.jsx

@@ -4,23 +4,9 @@ export const MusicAddIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M6.5 11.75V3.25M2.25 7.5H10.75M15.3389 16.1562V19.9193C15.3389 20.827 14.7276 21.6135 13.8499 21.8454L11.7009 22.4133C10.4323 22.7486 9.18994 21.7919 9.18994 20.4797V19.3213C9.18994 18.4135 9.80131 17.6196 10.6789 17.3877L15.3389 16.1562ZM15.3389 16.1562V3.45193C15.3389 6.99994 21 6.99994 21 12.9999"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeMiterlimit="10"
-      strokeLinecap="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Music Add Icon">
+  <path d="M20.5 11.0556V9.67989C20.5 8.35152 19.8405 7.10981 18.74 6.36593L15.28 4.02722C14.9479 3.80278 14.5 4.04068 14.5 4.44147V18M6.5 10.5L6.5 6.5M6.5 6.5V2.5M6.5 6.5H2.5M6.5 6.5H10.5M14.5 14.5L10.1217 15.9594C9.15324 16.2823 8.5 17.1886 8.5 18.2094C8.5 19.8283 10.086 20.9713 11.6217 20.4594L13.8162 19.7279C14.2246 19.5918 14.5 19.2097 14.5 18.7792V14.5Z" stroke="white" stroke-width="1.8" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>
 )
 
 MusicAddIcon.displayName = 'MusicAddIcon'

package/src/icons/MusicBookIcon.jsx

@@ -0,0 +1,8 @@
+export const MusicBookIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Music Book Icon">
+  <path d="M12 8.2C12 7.35131 11.6552 6.53737 11.0414 5.93726C10.4277 5.33714 9.59525 5 8.72727 5H3V17H12M12 8.2C12 7.35131 12.3448 6.53737 12.9586 5.93726C13.5723 5.33714 14.4047 5 15.2727 5H21M12 8.2V17M12 17V21M20.6789 15.2276V16.8728C20.6789 17.7561 20.0745 18.5302 19.2031 18.7632L18.459 18.9621C17.4726 19.2257 16.5 18.4998 16.5 17.5C16.5 16.8165 16.9678 16.2176 17.6422 16.0377L20.6789 15.2276ZM20.6789 15.2276V9.45199" 
+  stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+MusicBookIcon.displayName = 'MusicBookIcon'