@moises.ai/design-system 4.19.3 → 4.19.5

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'

package/src/icons/MusicNoteIcon.jsx

@@ -1,21 +1,7 @@
 export const MusicNoteIcon = ({ width, height, 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="M11.3389 15.1561V18.9192C11.3389 19.827 10.7276 20.6135 9.84994 20.8454L7.70094 21.4133C6.43228 21.7486 5.18994 20.7919 5.18994 19.4797V18.3213C5.18994 17.4135 5.80131 16.6196 6.67894 16.3876L11.3389 15.1561ZM11.3389 15.1561V2.4519C11.3389 5.99992 17 5.99991 17 11.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 Note Icon">
+  <path d="M18 11.0556V9.67989C18 8.35152 17.3405 7.10981 16.24 6.36593L12.78 4.02722C12.4479 3.80278 12 4.04068 12 4.44147V18M12 14.5L7.62171 15.9594C6.65324 16.2823 6 17.1886 6 18.2094C6 19.8283 7.58595 20.9713 9.12171 20.4594L11.3162 19.7279C11.7246 19.5918 12 19.2097 12 18.7792V14.5Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 MusicNoteIcon.displayName = 'MusicNoteIcon'

package/src/icons/MusicRemoveIcon.jsx

@@ -4,23 +4,9 @@ export const MusicRemoveIcon = ({
   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.25 7.49997H9.75M15.3389 16.1561V19.9192C15.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.3876L15.3389 16.1561ZM15.3389 16.1561V3.4519C15.3389 6.99992 21 6.99991 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 Remove 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.44147V18M9.5 6.5H3.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="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 MusicRemoveIcon.displayName = 'MusicRemoveIcon'

package/src/icons/NoChords2Icon.jsx

@@ -4,22 +4,9 @@ export const NoChords2Icon = ({
   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="M11.5 19.5H3.80001C3.63432 19.5 3.50001 19.3657 3.50001 19.2V12.5M3.50001 12.5H9.00001M3.50001 12.5V6.5M15 3.5V13M15 13C15 10.5 16.7046 8.98404 18.1189 8.98404C19.8229 8.98404 20.7771 10.9777 20.4023 12.8521C20.0936 14.3954 19.0727 15.6395 17.7038 16.3495M15 13V13.8M11.5 5H6.50001M2.06067 1L22.2132 21.1525"
-      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="No Chords 2 Icon">
+  <path d="M11 5H5M11 19.5H5C4.17157 19.5 3.5 18.8284 3.5 18V12.5M3.5 8.5V12.5M3.5 12.5H7.5M15 3.5V13M15 13C15 10.5 16.7046 8.98404 18.1189 8.98404C19.8229 8.98404 20.7771 10.9777 20.4023 12.8521C20.0249 14.739 18.5828 16.1787 16.7416 16.7416M15 13V15M21 21L16.7416 16.7416M3 3L15 15M15 15L16.7416 16.7416" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>    
 )
 
 NoChords2Icon.displayName = 'NoChords2Icon'

package/src/icons/NoChordsDetectionIcon.jsx

@@ -4,28 +4,12 @@ export const NoChordsDetectionIcon = ({
   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="M3 22V22.75H4.5V22H3ZM4.5 9.12497C4.5 8.71076 4.16421 8.37497 3.75 8.37497C3.33579 8.37497 3 8.71076 3 9.12497H4.5ZM10 1.99997C10 1.58576 9.66422 1.24997 9.25 1.24997C8.83579 1.24997 8.5 1.58576 8.5 1.99997H10ZM15.5 1.99997C15.5 1.58576 15.1642 1.24997 14.75 1.24997C14.3358 1.24997 14 1.58576 14 1.99997H15.5ZM14 22V22.75H15.5V22H14ZM15.5 20.125C15.5 19.7108 15.1642 19.375 14.75 19.375C14.3358 19.375 14 19.7108 14 20.125H15.5ZM2.45406 1.39338C2.16117 1.10048 1.68629 1.10048 1.3934 1.39338C1.10051 1.68627 1.10051 2.16114 1.3934 2.45404L2.45406 1.39338ZM21.5459 22.6066C21.8388 22.8995 22.3137 22.8995 22.6066 22.6066C22.8995 22.3137 22.8995 21.8388 22.6066 21.5459L21.5459 22.6066ZM5.75 2.74997H18.25V1.24997H5.75V2.74997ZM19.5 3.99997V20.25H21V3.99997H19.5ZM18.25 2.74997C18.9404 2.74997 19.5 3.30961 19.5 3.99997H21C21 2.48119 19.7688 1.24997 18.25 1.24997V2.74997ZM4.5 22V9.12497H3V22H4.5ZM10 9.24998V1.99997H8.5V9.24998H10ZM10 20.7969V14.75H8.5V20.7969H10ZM15.5 14.75V1.99997H14V14.75H15.5ZM15.5 22V20.125H14V22H15.5ZM9 13.75H3.75V15.25H9V13.75ZM10 14.75C10 14.1977 9.55229 13.75 9 13.75V15.25C8.72386 15.25 8.5 15.0261 8.5 14.75H10ZM14.5 15.25H20.25V13.75H14.5V15.25ZM1.3934 2.45404L3.23347 4.29411L4.29413 3.23345L2.45406 1.39338L1.3934 2.45404ZM3.23347 4.29411L21.5459 22.6066L22.6066 21.5459L4.29413 3.23345L3.23347 4.29411ZM5.75 1.24997C4.34056 1.24997 3.17971 2.30964 3.01894 3.67614L4.50866 3.85141C4.58161 3.23141 5.11012 2.74997 5.75 2.74997V1.24997Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.25 20.75C11.25 21.8546 10.3546 22.75 9.25 22.75C8.14543 22.75 7.25 21.8546 7.25 20.75C7.25 19.6454 8.14543 18.75 9.25 18.75C10.3546 18.75 11.25 19.6454 11.25 20.75Z"
-      fill="currentColor"
-    />
-    <path
-      d="M16.75 8.25C16.75 9.35457 15.8546 10.25 14.75 10.25C13.6454 10.25 12.75 9.35457 12.75 8.25C12.75 7.14543 13.6454 6.25 14.75 6.25C15.8546 6.25 16.75 7.14543 16.75 8.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="No Chords Detection Icon">
+  <path d="M9.25 4H6.75C5.96831 4 5.25645 4.29897 4.72252 4.78879M9.25 4H14.75M9.25 4V8.99756M14.75 4H17.25C18.9069 4 20.25 5.34315 20.25 7V13.9951M14.75 4L14.75 13.9951H20.25M20.25 13.9951V20M14.75 19.4078L14.75 20M3.75 13.9951H8.25C8.80229 13.9951 9.25 14.4428 9.25 14.9951V20M3.75 13.9951V8.5M3.75 13.9951V20M21 21L3 3" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M10.9985 19.1499C10.9985 20.1164 10.215 20.8999 9.24848 20.8999C8.28198 20.8999 7.49848 20.1164 7.49848 19.1499C7.49848 18.1834 8.28198 17.3999 9.24848 17.3999C10.215 17.3999 10.9985 18.1834 10.9985 19.1499Z" fill="currentColor"/>
+  <path d="M16.5 9.1499C16.5 10.1164 15.7165 10.8999 14.75 10.8999C13.7835 10.8999 13 10.1164 13 9.1499C13 8.1834 13.7835 7.3999 14.75 7.3999C15.7165 7.3999 16.5 8.1834 16.5 9.1499Z" fill="currentColor"/>
+</svg>
 )
 
 NoChordsDetectionIcon.displayName = 'NoChordsDetectionIcon'

package/src/icons/NoEyeIcon.jsx

@@ -1,7 +1,8 @@
 export const NoEyeIcon = ({ 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="M14.1055 9.86303C13.5639 9.32934 12.8204 9 12 9C10.3431 9 9 10.3431 9 12C9 12.7233 9.25599 13.3869 9.68233 13.905M17.8137 5.96708C16.2117 4.83579 14.2626 4 12 4C5 4 1 12 1 12C1 12 2.75463 15.5093 5.97337 17.8793M9.36697 19.6126C10.1899 19.8583 11.0684 20 12 20C19 20 23 12 23 12C23 12 22.1782 10.3564 20.6277 8.55912M20 4L4 20" 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="No Eye Icon">
+  <path d="M14.5 9.55055C13.8647 8.90225 12.9793 8.5 12 8.5C10.067 8.5 8.49996 10.067 8.49996 12C8.49996 12.9537 8.88138 13.8183 9.5 14.4495M20.125 8C20.7357 8.65147 21.2536 9.30295 21.6744 9.88529C22.5961 11.161 22.5961 12.839 21.6744 14.1147C19.9619 16.4848 16.64 20 12 20C10.8399 20 9.76231 19.7803 8.77162 19.4137M6 17.8989C4.40681 16.7319 3.17033 15.284 2.32554 14.1147C1.40386 12.839 1.40386 11.161 2.32554 9.88529C4.03799 7.51515 7.35988 4 12 4C14.2844 4 16.2494 4.85204 17.86 6M4 20L20 4" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 NoEyeIcon.displayName = 'NoEyeIcon'

package/src/icons/NoMusicIcon.jsx

@@ -4,23 +4,8 @@ export const NoMusicIcon = ({
   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="M14.1476 7.79232V1.53617C14.1476 1.09781 13.7318 0.778757 13.3084 0.892231L6.05437 2.83624C5.76292 2.91435 5.56027 3.17846 5.56027 3.48019V5.33398M14.1476 7.79232V10.3072C14.1476 10.9124 13.74 11.4417 13.1549 11.5963L12.0976 11.8757M14.1476 7.79232L11.0342 8.63079C10.4521 8.78755 10.0476 9.3154 10.0476 9.91825V9.99024M5.56027 10.1048L2.45361 10.9258C1.86851 11.0804 1.46094 11.6097 1.46094 12.2149V12.9872C1.46094 13.862 2.28917 14.4998 3.13494 14.2763L4.5676 13.8977C5.15269 13.743 5.56027 13.2138 5.56027 12.6086V10.1048ZM5.56027 10.1048V8.66732M2.00098 2.00066L14.001 14.0007"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="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="No Music Icon">
+  <path d="M20 20L4 4M17.3025 16.8893L18.7716 16.3884C19.2064 16.2402 19.5 15.8218 19.5 15.3503V11.001L15.8121 12.2584C14.9937 12.5374 14.3997 13.2455 14.2341 14.0917M7.8125 16.469V12.7122M7.8125 7.72901C7.8125 6.78648 8.39913 5.94995 9.26826 5.65312L16.7058 3.11297C18.0812 2.6432 19.5 3.69723 19.5 5.18886V12.4774M7.8125 14.9856L4.12415 16.2439C3.15455 16.5747 2.5 17.5077 2.5 18.5591C2.5 20.2221 4.08152 21.3975 5.61523 20.8743L7.08428 20.3731C7.51902 20.2248 7.8125 19.8065 7.8125 19.3351V14.9856Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
 </svg>
 )
 

package/src/icons/NoMusicNoteIcon.jsx

@@ -4,22 +4,9 @@ export const NoMusicNoteIcon = ({
   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="M17 11.9999C17 5.99991 11.3389 5.99992 11.3389 2.4519V11.25M4 3.99991L20 19.9999M5.18994 18.3213V19.4797C5.18994 20.7919 6.43228 21.7486 7.70094 21.4133L9.84994 20.8454C10.7276 20.6135 11.3389 19.827 11.3389 18.9192V16.4547C11.3389 15.7986 10.7178 15.3203 10.0834 15.4879L6.67894 16.3876C5.80131 16.6196 5.18994 17.4135 5.18994 18.3213Z"
-      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="No Music Note Icon">
+  <path d="M18 11.0556V9.67994C18 8.35158 17.3405 7.10987 16.24 6.36598L12.78 4.02728C12.4479 3.80283 12 4.04073 12 4.44152V12.0001M20 20.0001L4 4.00005M11.3162 19.728L9.12171 20.4595C7.58595 20.9714 6 19.8283 6 18.2095C6 17.1886 6.65324 16.2823 7.62171 15.9595L10.2992 15.067L12 16.7509V18.7793C12 19.2097 11.7246 19.5919 11.3162 19.728Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 NoMusicNoteIcon.displayName = 'NoMusicNoteIcon'

package/src/icons/NoSearchIcon.jsx

@@ -4,23 +4,9 @@ export const NoSearchIcon = ({
   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="M17.3929 6.18983C15.9329 4.2525 13.6127 3 11 3C6.58172 3 3 6.58172 3 11C3 13.6261 4.26531 15.9566 6.21953 17.4152M18.9034 9.7529C18.967 10.1593 19 10.5758 19 11C19 15.4183 15.4183 19 11 19C10.5993 19 10.2055 18.9705 9.82064 18.9137M21 21L16.65 16.65M20 4L4 20"
-      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="No Search Icon">
+  <path d="M20 4L4 20M21 21L19 19M17.5 6.33528C16.0479 4.31542 13.6776 3 11 3C6.58172 3 3 6.58172 3 11C3 13.6409 4.27961 15.9828 6.25262 17.4398M18.9381 10C18.979 10.3276 19 10.6613 19 11C19 15.4183 15.4183 19 11 19C10.6613 19 10.3276 18.979 10 18.9381" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 NoSearchIcon.displayName = 'NoSearchIcon'

package/src/icons/NoSpliterIcon.jsx

@@ -4,20 +4,9 @@ export const NoSpliterIcon = ({
   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="M14.8239 8.5973L15.3507 9.13117L14.8239 8.5973ZM20.75 2.75H21.5C21.5 2.55109 21.421 2.36032 21.2803 2.21967C21.1397 2.07902 20.9489 2 20.75 2V2.75ZM15.75 2C15.3358 2 15 2.33579 15 2.75C15 3.16422 15.3358 3.5 15.75 3.5L15.75 2ZM20 7.75C20 8.16422 20.3358 8.5 20.75 8.5C21.1642 8.5 21.5 8.16422 21.5 7.75H20ZM20 20.75C20 21.1642 20.3358 21.5 20.75 21.5C21.1642 21.5 21.5 21.1642 21.5 20.75H20ZM21.5 15.75C21.5 15.3358 21.1642 15 20.75 15C20.3358 15 20 15.3358 20 15.75H21.5ZM2.75 13C2.33579 13 2 13.3358 2 13.75C2 14.1642 2.33579 14.5 2.75 14.5V13ZM9.59375 14.5C10.008 14.5 10.3438 14.1642 10.3438 13.75C10.3438 13.3358 10.008 13 9.59375 13V14.5ZM2.75 9C2.33579 9 2 9.33579 2 9.75C2 10.1642 2.33579 10.5 2.75 10.5V9ZM5.6875 10.5C6.10171 10.5 6.4375 10.1642 6.4375 9.75C6.4375 9.33579 6.10171 9 5.6875 9V10.5ZM15.75 20C15.3358 20 15 20.3358 15 20.75C15 21.1642 15.3358 21.5 15.75 21.5V20ZM16.75 21.5C17.1642 21.5 17.5 21.1642 17.5 20.75C17.5 20.3358 17.1642 20 16.75 20V21.5ZM2.53033 1.46967C2.23744 1.17678 1.76256 1.17678 1.46967 1.46967C1.17678 1.76256 1.17678 2.23744 1.46967 2.53033L2.53033 1.46967ZM21.6222 22.6829C21.9151 22.9758 22.39 22.9758 22.6829 22.6829C22.9758 22.39 22.9758 21.9151 22.6829 21.6222L21.6222 22.6829ZM15.3507 9.13117L21.2768 3.28387L20.2232 2.21613L14.2971 8.06343L15.3507 9.13117ZM12.0145 10.5C13.2632 10.5 14.4618 10.0082 15.3507 9.13117L14.2971 8.06343C13.6889 8.66354 12.8689 9 12.0145 9V10.5ZM15.75 3.5L20.75 3.5V2L15.75 2L15.75 3.5ZM20 2.75V7.75H21.5V2.75H20ZM21.5 20.75V15.75H20V20.75H21.5ZM9.75 10.5H12.0145V9H9.75V10.5ZM2.75 14.5H9.59375V13H2.75V14.5ZM2.75 10.5H5.6875V9H2.75V10.5ZM15.75 21.5H16.75V20H15.75V21.5ZM1.46967 2.53033L21.6222 22.6829L22.6829 21.6222L2.53033 1.46967L1.46967 2.53033Z"
-      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="No Spliter Icon">
+  <path d="M20.5 3.5L15.5739 8.34729C14.8254 9.08589 13.8161 9.5 12.7645 9.5L9.5 9.5M20.5 9V3.5H15M20.5 20.5V15M15 20.5L16 20.5M3.5 14.5L10 14.5M3.5 9.5L5 9.5M22 22L2 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 NoSpliterIcon.displayName = 'NoSpliterIcon'

package/src/icons/NoVolume2Icon.jsx

@@ -4,23 +4,9 @@ export const NoVolume2Icon = ({
   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.41406 9H2V15H6L11 19V15.5742M19.07 4.92999C20.9447 6.80527 21.9979 9.34835 21.9979 12C21.9979 14.6516 20.9447 17.1947 19.07 19.07M15.54 8.45999C16.4774 9.39763 17.0039 10.6692 17.0039 11.995C17.0039 13.3208 16.4774 14.5924 15.54 15.53M7.74162 7.60671L11 5V11M3 3L21 21"
-      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="No Volume 2 Icon">
+  <path d="M20 20L4 4M18.6063 6.21988C20.139 7.75303 21 9.83214 21 12C21 14.1679 20.139 16.247 18.6063 17.7801M15.723 10C16.2523 10.5294 16.5496 11.2474 16.5496 11.9959C16.5496 12.7445 16.2523 13.4624 15.723 13.9918M4 8.00002C3.44772 8.00002 3 8.44774 3 9.00002V15C3 15.5523 3.44772 16 4 16H6L10.8519 20.0432C11.3078 20.4232 12 20.099 12 19.5055V15.7528M7.1038 7.08019L10.8519 3.9568C11.3078 3.57685 12 3.90107 12 4.49455V12" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
 )
 
 NoVolume2Icon.displayName = 'NoVolume2Icon'

package/src/icons/NowPlayingIcon.jsx

@@ -0,0 +1,7 @@
+export const NowPlayingIcon = ({ 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="Now Playing Icon">
+    <path d="M4 3L4 21M14.6668 8.25005V15.75M9.33333 5.625L9.33333 18.375M20 13.125V10.875" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+NowPlayingIcon.displayName = 'NowPlayingIcon'

package/src/icons/PenIcon.jsx

@@ -1,7 +1,7 @@
 export const PenIcon = ({ 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="M14.5 6.5L17.5 9.5M16.1038 4.66848C16.3158 4.45654 16.5674 4.28843 16.8443 4.17373C17.1212 4.05903 17.418 4 17.7177 4C18.0174 4 18.3142 4.05903 18.5911 4.17373C18.868 4.28843 19.1196 4.45654 19.3315 4.66848C19.5435 4.88041 19.7116 5.13201 19.8263 5.40891C19.941 5.68582 20 5.9826 20 6.28232C20 6.58204 19.941 6.87882 19.8263 7.15573C19.7116 7.43263 19.5435 7.68423 19.3315 7.89617L8.43807 18.7896L4 20L5.21038 15.5619L16.1038 4.66848Z" stroke="currentColor" strokeWidth="1.5" 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="Pen Icon">
+  <path d="M14.2728 7L17.0001 9.72721M3.60032 20.7068L6.79305 20.6312C7.05 20.6252 7.29474 20.5204 7.47648 20.3386L19.7142 8.10093C20.7677 7.04746 20.7677 5.33943 19.7142 4.28596C18.6607 3.23248 16.9527 3.23248 15.8992 4.28596L3.66151 16.5237C3.47976 16.7054 3.37498 16.9501 3.36889 17.2071L3.2933 20.3998C3.28925 20.571 3.4291 20.7109 3.60032 20.7068Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 PenIcon.displayName = 'PenIcon'

package/src/icons/PlayOnRepeatIcon.jsx

@@ -4,23 +4,10 @@ export const PlayOnRepeatIcon = ({
   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="M16.75 6H17C20.3137 6 23 8.68629 23 12C23 15.3137 20.3137 18 17 18H11.75M7.08974 18H7C3.68629 18 1 15.3137 1 12C1 8.68629 3.68629 6 7 6H12.5M9 2L13 6L9 10M15 22L11 18L15 14"
-      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="Play On Repeat Icon">
+  <path d="M9 2.5L12.5 6L9 9.5M15 21.5L11.5 18L15 14.5M11.5 5.99991L8 5.99991C6.4087 5.99991 4.88258 6.63205 3.75736 7.75727C2.63214 8.88249 2 10.4086 2 11.9999C2 13.5912 2.63214 15.1173 3.75736 16.2425C4.64405 17.1292 5.77969 17.7097 7 17.916M12.5 18.0001H16C17.5913 18.0001 19.1174 17.3679 20.2426 16.2427C21.3679 15.1175 22 13.5914 22 12.0001C22 10.4088 21.3679 8.88267 20.2426 7.75745C19.356 6.87076 18.2203 6.29025 17 6.08398" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 PlayOnRepeatIcon.displayName = 'PlayOnRepeatIcon'