@moises.ai/design-system 4.18.17 → 4.19.0

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'

package/src/icons/PlusIcon.jsx

@@ -1,21 +1,7 @@
 export const PlusIcon = ({ 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="M12 3V21M3 12H21"
-      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 16 16" fill="none" className={className} {...props} aria-label="Plus">
+    <path d="M7.99992 2.3335V13.6668M2.33325 8.00016H13.6666" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 PlusIcon.displayName = 'PlusIcon'

package/src/icons/PowerSwitchIcon.jsx

@@ -1,7 +1,8 @@
 export const PowerSwitchIcon = ({ 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="M12 2V9M17 3.33975C18.9064 4.44042 20.3964 6.13939 21.2388 8.17316C22.0812 10.2069 22.229 12.4619 21.6593 14.5882C21.0895 16.7145 19.8341 18.5934 18.0876 19.9335C16.3412 21.2736 14.2013 22 12 22C9.79866 22 7.65883 21.2736 5.91239 19.9335C4.16595 18.5934 2.9105 16.7145 2.34075 14.5882C1.771 12.4619 1.91879 10.2069 2.76121 8.17317C3.60362 6.13939 5.09358 4.44042 7 3.33975" 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="Power Switch Icon">
+  <path d="M7.5 4.20577C5.78423 5.19637 4.44326 6.72545 3.68509 8.55585C2.92691 10.3862 2.7939 12.4157 3.30667 14.3294C3.81944 16.2431 4.94935 17.9341 6.52115 19.1402C8.09295 20.3463 10.0188 21 12 21C13.9812 21 15.9071 20.3463 17.4789 19.1402C19.0507 17.9341 20.1806 16.2431 20.6933 14.3294C21.2061 12.4157 21.0731 10.3862 20.3149 8.55585C19.5567 6.72545 18.2158 5.19638 16.5 4.20577M12 3V12" 
+  stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 PowerSwitchIcon.displayName = 'PowerSwitchIcon'

package/src/icons/RadioOffIcon.jsx

@@ -4,23 +4,9 @@ export const RadioOffIcon = ({
   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="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-      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="Radio Off Icon">
+  <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 RadioOffIcon.displayName = 'RadioOffIcon'

package/src/icons/RedoIcon.jsx

@@ -1,20 +1,7 @@
 export const RedoIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 13 13"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M9.5 6.54444L12.5 3.52222M12.5 3.52222L9.5 0.5M12.5 3.52222H4.625C4.0833 3.52222 3.5469 3.62971 3.04643 3.83855C2.54596 4.04738 2.09123 4.35348 1.70818 4.73936C1.32514 5.12523 1.0213 5.58334 0.813997 6.08751C0.606697 6.59169 0.5 7.13206 0.5 7.67778C0.5 8.22349 0.606697 8.76386 0.813997 9.26804C1.0213 9.77221 1.32514 10.2303 1.70818 10.6162C2.09123 11.0021 2.54596 11.3082 3.04643 11.517C3.5469 11.7258 4.0833 11.8333 4.625 11.8333H7.25"
-      stroke="currentColor"
-      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="Redo Icon">
+  <path d="M15.5 2.5L21 8L15.5 13.5M21 8H8.5C7.04131 8 5.64236 8.57946 4.61091 9.61091C3.57946 10.6424 3 12.0413 3 13.5C3 14.9587 3.57946 16.3576 4.61091 17.3891C5.64236 18.4205 7.04131 19 8.5 19H11.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 RedoIcon.displayName = 'RedoIcon'

package/src/icons/RefreshBackIcon.jsx

@@ -4,23 +4,9 @@ export const RefreshBackIcon = ({
   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="M2.625 8.68286C2.625 11.6968 5.06828 14.1401 8.08221 14.1401C11.0961 14.1401 13.5394 11.6968 13.5394 8.68286C13.5394 5.66892 11.0961 3.22565 8.08221 3.22565H6.03576M7.66746 0.75L5.14219 3.27653L7.66746 5.80307"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 14 14" fill="none" className={className} {...props} aria-label="RefreshBack">
+    <path d="M2.76656 5.03638C3.22089 4.05697 4.00077 3.26539 4.9733 2.79653C5.94584 2.32766 7.05086 2.21051 8.10008 2.46504C9.14931 2.71957 10.0778 3.33002 10.7274 4.1924C11.377 5.05478 11.7075 6.11571 11.6625 7.19443C11.6176 8.27315 11.2 9.30292 10.4809 10.1083C9.76186 10.9136 8.78578 11.4447 7.71902 11.6111C6.65226 11.7775 5.56081 11.5688 4.63065 11.0207C3.70049 10.4725 2.98916 9.61881 2.61788 8.605M5.24992 5.25017H2.62492C2.46384 5.25017 2.33325 5.11958 2.33325 4.9585V2.3335"
+     stroke="currentColor" strokeWidth="1.05" strokeMiterlimit="10" strokeLinecap="round"/>
 </svg>
 )
 

package/src/icons/RefreshIcon.jsx

@@ -4,23 +4,9 @@ export const RefreshIcon = ({
   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="M20.3092 13.0243C20.3092 17.5452 16.6443 21.2101 12.1234 21.2101C7.60248 21.2101 3.93757 17.5452 3.93757 13.0243C3.93757 8.50339 7.60248 4.83847 12.1234 4.83847H15.1931M12.7455 1.125L16.5334 4.9148L12.7455 8.7046"
-      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="Refresh Icon">
+  <path d="M19.2572 8.63351C18.4783 6.95453 17.1414 5.59754 15.4742 4.79377C13.807 3.98999 11.9127 3.78916 10.114 4.2255C8.31533 4.66183 6.72359 5.70834 5.61001 7.18669C4.49642 8.66505 3.92989 10.4838 4.00693 12.333C4.08398 14.1823 4.79984 15.9476 6.03254 17.3282C7.26525 18.7088 8.93852 19.6193 10.7673 19.9045C12.596 20.1897 14.467 19.832 16.0616 18.8923C17.6562 17.9526 18.8756 16.4891 19.5121 14.7512M15 9.00001H19.5C19.7761 9.00001 20 8.77615 20 8.50001V4.00001" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>  
 )
 
 RefreshIcon.displayName = 'RefreshIcon'

package/src/icons/SearchIcon.jsx

@@ -4,24 +4,9 @@ export const SearchIcon = ({
   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 14L11.1 11.1M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
-</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="Search Icon">
+  <path d="M21 21L19 19M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 SearchIcon.displayName = 'SearchIcon'

package/src/icons/Sections2Icon.jsx

@@ -1,11 +1,8 @@
 export const Sections2Icon = ({ 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}>
-    <path
-      d="M1.3335 10.3337H14.6668M1.3335 14.3337H14.6668M10.6668 1.66699H2.66683C1.93045 1.66699 1.3335 2.26395 1.3335 3.00033V5.00033C1.3335 5.73671 1.93045 6.33366 2.66683 6.33366H10.6668C11.4032 6.33366 12.0002 5.73671 12.0002 5.00033V3.00033C12.0002 2.26395 11.4032 1.66699 10.6668 1.66699Z"
-      stroke="currentColor"
-      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="Sections 2 Icon">
+  <path d="M19 8V7C19 5.34315 17.6569 4 16 4L8 4C6.34315 4 5 5.34315 5 7V8M19 16V17C19 18.6569 17.6569 20 16 20H8C6.34315 20 5 18.6569 5 17V16M22 12L2 12" 
+   stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 Sections2Icon.displayName = 'Sections2Icon'

package/src/icons/Setlist2Icon.jsx

@@ -4,23 +4,9 @@ export const Setlist2Icon = ({
   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 5.6H20M6 2H18M6.58826 22H17.4117C18.3418 22 19.1491 21.3589 19.3598 20.453L21.4295 11.553C21.7212 10.2989 20.7691 9.1 19.4815 9.1H4.51849C3.23092 9.1 2.27882 10.2989 2.57047 11.553L4.64024 20.453C4.85091 21.3589 5.65821 22 6.58826 22Z"
-      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="Setlist 2 Icon">
+  <path d="M4.5 7H19.7M6.3 3.5H17.7M4.48914 10.535H19.5109C20.5076 10.535 21.2271 11.4892 20.953 12.4475L19.1684 18.6874C18.8615 19.7604 17.8807 20.5 16.7648 20.5H7.23523C6.11928 20.5 5.13847 19.7604 4.83161 18.6874L3.04697 12.4475C2.77289 11.4892 3.49241 10.535 4.48914 10.535Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 Setlist2Icon.displayName = 'Setlist2Icon'