@moises.ai/design-system 4.19.3 → 4.19.5

package/src/icons/CropIcon.jsx

@@ -1,21 +1,6 @@
 export const CropIcon = ({ 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="M4.08602 0.666016L3.99935 10.666C3.99935 11.0196 4.13982 11.3588 4.38987 11.6088C4.63992 11.8589 4.97906 11.9993 5.33268 11.9993H15.3327M0.666016 4.08602L10.666 3.99935C11.0196 3.99935 11.3588 4.13982 11.6088 4.38987C11.8589 4.63992 11.9993 4.97906 11.9993 5.33268V15.3327"
-        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="Crop Icon">
+  <path d="M5.63636 5.6363V15.8636C5.63636 17.2443 6.75564 18.3636 8.13635 18.3636L18.3636 18.3636M5.63636 5.6363V2M5.63636 5.6363H2M9 5.6363H15.8636C17.2443 5.6363 18.3636 6.75559 18.3636 8.1363V15M22 18.3636L18.3636 18.3636M18.3636 18.3636V22" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
 </svg>
 )
 

package/src/icons/CrownIcon.jsx

@@ -1,21 +1,7 @@
 export const CrownIcon = ({ 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="M4.02691 16.5391L2 9.55957L5.55306 11.6447C6.3077 12.0875 7.27631 11.8714 7.77115 11.1498L12 4.98291L16.2289 11.1498C16.7237 11.8714 17.6923 12.0875 18.4469 11.6447L22 9.55957L19.9721 16.5427C19.67 17.9238 16.2161 19.013 11.9999 19.013C7.77997 19.013 4.32381 17.9219 4.02691 16.5391Z"
-      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="Crown Icon">
+  <path d="M7.5205 10.1673L11.3216 4.08547C11.635 3.58414 12.3651 3.58414 12.6784 4.08547L16.4796 10.1673C16.7686 10.6296 17.3746 10.7753 17.8421 10.4948L21.0308 8.58156C21.4031 8.35823 21.8635 8.68272 21.7784 9.10836L20.1233 17.3837C20.0467 17.767 19.7775 18.0835 19.4115 18.2207C14.633 20.0127 9.36708 20.0127 4.58856 18.2207C4.22258 18.0835 3.95343 17.767 3.87678 17.3837L2.22171 9.10836C2.13658 8.68272 2.59704 8.35823 2.96925 8.58156L6.158 10.4948C6.62551 10.7753 7.23154 10.6296 7.5205 10.1673Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>  
+</svg>
 )
 
 CrownIcon.displayName = 'CrownIcon'

package/src/icons/DelayIcon.jsx

@@ -1,20 +1,7 @@
 export const DelayIcon = ({ 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="M1 21H23M4.86204 12.1265L7.12652 4.57826C7.9817 1.72766 12.0183 1.72766 12.8735 4.57826L14.7172 10.7241C15.4786 13.262 17.8145 15 20.4642 15H23C21.2194 15 19.6496 13.832 19.138 12.1265L16.8735 4.57826C16.0183 1.72766 11.9817 1.72766 11.1265 4.57826L9.28277 10.7241C8.5214 13.262 6.18547 15 3.53582 15H1C2.78061 15 4.35039 13.832 4.86204 12.1265Z"
-      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="Delay Icon">
+  <path d="M15.5 4.25C16.2938 4.59636 16.9201 5.27916 17.1775 6.14803L19.1751 12.8908C19.5457 14.1419 20.6952 15 22 15H18.0401C16.7115 15 15.5411 14.1261 15.1637 12.8522L13.1775 6.14784C12.8001 4.87393 11.6297 4 10.3011 4H9.69894C8.3703 4 7.19992 4.87393 6.82251 6.14784L4.82492 12.8906C4.45427 14.1417 3.30485 15 2 15L5.95989 15.0002C7.28853 15.0002 8.45891 14.1263 8.83631 12.8523L10.309 7.88121M2 20H22" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 DelayIcon.displayName = 'DelayIcon'

package/src/icons/DownloadIcon.jsx

@@ -0,0 +1,7 @@
+export const DownloadIcon = ({ 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="Download Icon">
+  <path d="M7 8.5L12 13L17 8.5M12 13V3M20.5 14.5V18C20.5 19.6569 19.1569 21 17.5 21H6.5C4.84315 21 3.5 19.6569 3.5 18V14.5" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+DownloadIcon.displayName = 'DownloadIcon'

package/src/icons/DynamicMicrophone2Icon.jsx

@@ -1,13 +1,8 @@
 export const DynamicMicrophone2Icon = ({ 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="M10.5846 8.14349L3.4361 14.6667L1.33331 12.5639L7.8565 5.41543M7.30522 8.69477L6.37888 9.62111M13.6616 7.19124C12.3215 8.53131 10.1488 8.53131 8.80876 7.19124C7.46868 5.85116 7.46868 3.67847 8.80876 2.3384C10.1488 0.998325 12.3215 0.998325 13.6616 2.3384C15.0017 3.67847 15.0017 5.85116 13.6616 7.19124Z" 
-      stroke="currentColor" 
-      strokeWidth="0.666667" 
-      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="Dynamic Microphone 2 Icon">
+  <path d="M14.9892 12.6937L6.6758 20.2799C5.92769 20.9626 4.77499 20.9362 4.05885 20.2201L3.7799 19.9412C3.06376 19.225 3.03742 18.0723 3.72009 17.3242L11.3063 9.01081M19.1432 11.4082C17.3341 13.2173 14.4009 13.2173 12.5918 11.4082C10.7827 9.59905 10.7827 6.66592 12.5918 4.85682C14.4009 3.04773 17.3341 3.04773 19.1432 4.85682C20.9523 6.66592 20.9523 9.59905 19.1432 11.4082Z" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 DynamicMicrophone2Icon.displayName = 'DynamicMicrophone2Icon'

package/src/icons/EditIcon.jsx

@@ -1,20 +1,7 @@
 export const EditIcon = ({ 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="M11.5 3.99998H6.5C4.01472 3.99998 2 6.0147 2 8.49998V17.5C2 19.9853 4.01472 22 6.5 22H15.5C17.9853 22 20 19.9853 20 17.5V13.5M18.5 2.49998C18.8978 2.10216 19.4374 1.87866 20 1.87866C20.5626 1.87866 21.1022 2.10216 21.5 2.49998C21.8978 2.89781 22.1213 3.43737 22.1213 3.99998C22.1213 4.56259 21.8978 5.10216 21.5 5.49998L12 15L8 16L9 12L18.5 2.49998Z"
-      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="Edit Icon">
+  <path d="M20.5 13.2501V17.5001C20.5 19.1569 19.1569 20.5001 17.5 20.5001H6.5C4.84315 20.5001 3.5 19.1569 3.5 17.5001V6.50005C3.5 4.8432 4.84315 3.50005 6.5 3.50005H10.75M8.60026 15.7068L11.793 15.6312C12.0499 15.6252 12.2947 15.5204 12.4764 15.3386L19.7141 8.10093C20.7676 7.04746 20.7676 5.33943 19.7141 4.28596C18.6607 3.23248 16.9526 3.23248 15.8992 4.28596L8.66145 11.5237C8.47971 11.7054 8.37492 11.9501 8.36884 12.2071L8.29325 15.3998C8.28919 15.571 8.42905 15.7109 8.60026 15.7068Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 EditIcon.displayName = 'EditIcon'

package/src/icons/EffectsIcon.jsx

@@ -4,22 +4,10 @@ export const EffectsIcon = ({
   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="M15.2486 3.59735C14.6392 3.74079 14.7468 4.37013 15.2486 4.47777C15.7504 4.58541 16.1629 3.8175 15.748 3.29925C15.1614 2.56662 12.7979 2.44024 11.3223 4.64333C10.1661 6.36945 9.79213 8.62073 8.77094 12.3934C7.73858 16.2074 7.33043 18.0246 6.10679 19.7354C4.88315 21.4461 3.00037 21.547 2.72512 20.7092C2.44841 19.867 3.60635 19.7354 3.60667 20.196M7.06739 8.39558H12.4102M15.2989 9.78433L17.7995 12.8456M17.7995 12.8456L20.5477 16.2101M17.7995 12.8456L20.2887 9.78433M17.7995 12.8456L15.0636 16.2101"
-      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="Effects Icon">
+  <path d="M3 18L3 18.0547C3 19.1291 3.87093 20 4.94527 20C5.85441 20 6.6423 19.3703 6.8427 18.4835L9.98347 4.58509C10.1929 3.6582 11.0314 3 11.9816 3C13.0862 3 14 3.89543 14 5M14.3333 10.0123L16.9938 14M16.9938 14L19.6667 18M16.9938 14L21 10M16.9938 14L13 17.9877M5.5 10L14 10"
+   stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 EffectsIcon.displayName = 'EffectsIcon'

package/src/icons/EmailIcon.jsx

@@ -1,28 +1,7 @@
 export const EmailIcon = ({ width = 20, height = 20, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 20 20"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M3.33 3.33h13.34c.92 0 1.66.75 1.66 1.67v10c0 .92-.74 1.67-1.66 1.67H3.33c-.92 0-1.66-.75-1.66-1.67V5c0-.92.74-1.67 1.66-1.67z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18.33 5l-8.33 5.83L1.67 5"
-      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="Email Icon">
+  <path d="M21 7L13.8418 12.5675C12.7585 13.4101 11.2415 13.4101 10.1582 12.5675L3 7M5.5 20H18.5C20.1569 20 21.5 18.6569 21.5 17V7C21.5 5.34315 20.1569 4 18.5 4H5.5C3.84315 4 2.5 5.34315 2.5 7V17C2.5 18.6569 3.84315 20 5.5 20Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
+</svg>
 )
 
 EmailIcon.displayName = 'EmailIcon'

package/src/icons/ExternalLinkIcon.jsx

@@ -1,7 +1,7 @@
 export const ExternalLinkIcon = ({ 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="M16 3H21M21 3V8M21 3L9 15M11.5 3.99998H6.5C4.01472 3.99998 2 6.0147 2 8.49998V17.5C2 19.9853 4.01472 22 6.5 22H15.5C17.9853 22 20 19.9853 20 17.5V13.5" 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="External Link Icon">
+  <path d="M20.5 14.25V17.5C20.5 19.1569 19.1569 20.5 17.5 20.5H6.5C4.84315 20.5 3.5 19.1569 3.5 17.5V6.5C3.5 4.84315 4.84315 3.5 6.5 3.5H9.75M15 3H21V9M21 3L12.1214 11.9602" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ExternalLinkIcon.displayName = 'ExternalLinkIcon'

package/src/icons/EyeIcon.jsx

@@ -1,30 +1,8 @@
 export const EyeIcon = ({ 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="M0.667 8s2.666-5.333 7.333-5.333C12.667 2.667 15.333 8 15.333 8s-2.666 5.333-7.333 5.333C3.333 13.333.667 8 .667 8z"
-      stroke="currentColor"
-      strokeWidth="1.2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <circle
-      cx="8"
-      cy="8"
-      r="2"
-      stroke="currentColor"
-      strokeWidth="1.2"
-      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="Eye Icon">
+  <path d="M12 4C7.35988 4 4.03799 7.51515 2.32554 9.88529C1.40386 11.161 1.40386 12.839 2.32554 14.1147C4.03799 16.4848 7.35988 20 12 20C16.64 20 19.9619 16.4848 21.6744 14.1147C22.5961 12.839 22.5961 11.161 21.6744 9.88529C19.9619 7.51515 16.64 4 12 4Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.49996 13.933 8.49996 12C8.49996 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 EyeIcon.displayName = 'EyeIcon'

package/src/icons/EyeOffIcon.jsx

@@ -1,28 +1,7 @@
 export const EyeOffIcon = ({ 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="M9.41 9.41a2 2 0 11-2.83-2.83M6.59 2.89A6.5 6.5 0 018 2.67c4.67 0 7.33 5.33 7.33 5.33a12.1 12.1 0 01-1.44 2.18m-3.18 1.64A6.5 6.5 0 018 13.33C3.33 13.33.67 8 .67 8a12.1 12.1 0 013.15-3.81"
-      stroke="currentColor"
-      strokeWidth="1.2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M.667.667l14.666 14.666"
-      stroke="currentColor"
-      strokeWidth="1.2"
-      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="Eye Off Icon">
+  <path d="M18.8579 10.9348L20.9963 14.6387M14.4547 12.9934L15.1216 16.7756M9.5372 12.9916L8.87018 16.7744M5.13835 10.9318L2.98962 14.6535M3 8.83203C4.57617 10.783 7.4657 13.25 12.0001 13.25C16.5344 13.25 19.4239 10.783 21.0001 8.83205" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 EyeOffIcon.displayName = 'EyeOffIcon'

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'