@moises.ai/design-system 4.18.16 → 4.18.18

package/package.json

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

package/src/components/IconButton/IconButton.module.css

@@ -113,6 +113,16 @@
   color: var(--neutral-alpha-8) !important;
 }
 
+/* size 0 → 20×20px */
+.ghost.size0 {
+  margin: 0 !important;
+  width: 20px;
+  height: 20px;
+  padding: 0 !important;
+  border-radius: 2px;
+}
+
+
 /* size 1 → 24×24px */
 .ghost.size1 {
   margin: 0 !important;
@@ -149,6 +159,10 @@
   border-radius: 12px;
 }
 
+.size0 {
+  border-radius: 2px;
+}
+
 .size1 {
   border-radius: 4px;
 }

package/src/components/IconButton/IconButton.stories.jsx

@@ -151,7 +151,7 @@ const MyComponent = () => (
     },
     size: {
       control: { type: 'select' },
-      options: ['1', '2', '3', '4'],
+      options: ['0', '1', '2', '3', '4'],
       description: 'Button size (24px → 48px hit target).',
       table: {
         type: { summary: 'string' },

package/src/icons/AcousticGuitarIcon.jsx

@@ -1,16 +1,9 @@
 export const AcousticGuitarIcon = ({ width, height, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-  >
-    <path
-      d="M3.12278 6.00186L2.75109 5.66743L2.75109 5.66743L3.12278 6.00186ZM3.51398 3.19534L3.07231 3.42971L3.07231 3.42971L3.51398 3.19534ZM12.8766 6.00186L13.2483 5.66743L13.2483 5.66743L12.8766 6.00186ZM12.4854 3.19534L12.0437 2.96097L12.0437 2.96097L12.4854 3.19534ZM5.33301 7.5833C5.05687 7.5833 4.83301 7.80716 4.83301 8.0833C4.83301 8.35945 5.05687 8.5833 5.33301 8.5833V7.5833ZM10.6663 8.5833C10.9425 8.5833 11.1663 8.35945 11.1663 8.0833C11.1663 7.80716 10.9425 7.5833 10.6663 7.5833V8.5833ZM1.33301 9.95372H0.833008C0.833008 11.6829 1.67395 13.0803 2.99384 14.0288C4.30295 14.9695 6.07809 15.4697 7.99967 15.4697V14.9697V14.4697C6.23936 14.4697 4.68117 14.0099 3.57741 13.2167C2.48445 12.4313 1.83301 11.3207 1.83301 9.95372H1.33301ZM3.12278 6.00186L2.75109 5.66743C1.38444 7.18629 0.833008 8.46751 0.833008 9.95372H1.33301H1.83301C1.83301 8.78243 2.24114 7.72923 3.49447 6.3363L3.12278 6.00186ZM3.51398 3.19534L3.07231 3.42971C3.31909 3.89477 3.37623 4.27786 3.32135 4.61149C3.26546 4.95122 3.08381 5.29765 2.75109 5.66743L3.12278 6.00186L3.49447 6.3363C3.9106 5.87383 4.2119 5.35852 4.30808 4.7738C4.40527 4.18299 4.28358 3.57896 3.95565 2.96097L3.51398 3.19534ZM2.92392 1.39868H2.42392C2.42392 2.18312 2.71865 2.76323 3.07231 3.42971L3.51398 3.19534L3.95565 2.96097C3.59817 2.2873 3.42392 1.90724 3.42392 1.39868H2.92392ZM2.92392 1.03027H2.42392V1.39868H2.92392H3.42392V1.03027H2.92392ZM14.6663 9.95372H14.1663C14.1663 11.3207 13.5149 12.4313 12.4219 13.2167C11.3182 14.0099 9.75999 14.4697 7.99967 14.4697V14.9697V15.4697C9.92126 15.4697 11.6964 14.9695 13.0055 14.0288C14.3254 13.0803 15.1663 11.6829 15.1663 9.95372H14.6663ZM12.8766 6.00186L12.5049 6.3363C13.7582 7.72922 14.1663 8.78243 14.1663 9.95372H14.6663H15.1663C15.1663 8.46751 14.6149 7.18629 13.2483 5.66743L12.8766 6.00186ZM12.4854 3.19534L12.0437 2.96097C11.7158 3.57896 11.5941 4.18299 11.6913 4.77381C11.7874 5.35852 12.0888 5.87383 12.5049 6.3363L12.8766 6.00186L13.2483 5.66743C12.9155 5.29765 12.7339 4.95122 12.678 4.61149C12.6231 4.27786 12.6803 3.89477 12.927 3.42971L12.4854 3.19534ZM13.0754 1.39868H12.5754C12.5754 1.90724 12.4012 2.2873 12.0437 2.96097L12.4854 3.19534L12.927 3.42971C13.2807 2.76323 13.5754 2.18312 13.5754 1.39868H13.0754ZM13.0754 1.03027H12.5754V1.39868H13.0754H13.5754V1.03027H13.0754ZM9.99967 3.3333H9.49967C9.49967 4.16173 8.8281 4.8333 7.99967 4.8333V5.3333V5.8333C9.38039 5.8333 10.4997 4.71402 10.4997 3.3333H9.99967ZM7.99967 5.3333V4.8333C7.17125 4.8333 6.49967 4.16173 6.49967 3.3333H5.99967H5.49967C5.49967 4.71402 6.61896 5.8333 7.99967 5.8333V5.3333ZM5.99967 3.3333H6.49967C6.49967 2.50488 7.17125 1.8333 7.99967 1.8333V1.3333V0.833304C6.61896 0.833304 5.49967 1.95259 5.49967 3.3333H5.99967ZM7.99967 1.3333V1.8333C8.8281 1.8333 9.49967 2.50488 9.49967 3.3333H9.99967H10.4997C10.4997 1.95259 9.38039 0.833304 7.99967 0.833304V1.3333ZM5.33301 8.0833V8.5833H10.6663V8.0833V7.5833H5.33301V8.0833Z"
-      fill="currentColor"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none" aria-label="Acoustic Guitar" className={className} {...props}>
+  <path 
+  d="M3.30497 1.83325C3.30497 2.43126 3.52187 2.93569 3.85078 3.55551C4.38238 4.55732 4.1816 5.38171 3.48891 6.15154C2.27717 7.49824 1.83337 8.57791 1.83337 9.80701C1.83337 12.6709 4.66715 14.1749 8.07291 14.1749C11.4787 14.1749 14.1667 12.6709 14.1667 9.80701C14.1667 8.57791 13.7229 7.49824 12.5112 6.15154C11.8185 5.38171 11.6177 4.55732 12.1493 3.55551C12.4782 2.93569 12.6951 2.43126 12.6951 1.83325M5.86671 8.07687H10.1334M9.64587 3.68312C9.64587 4.59209 8.90901 5.32896 8.00004 5.32896C7.09107 5.32896 6.35421 4.59209 6.35421 3.68312C6.35421 2.77415 7.09107 2.03729 8.00004 2.03729C8.90901 2.03729 9.64587 2.77415 9.64587 3.68312Z" 
+  stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
+</svg>
 )
 
 AcousticGuitarIcon.displayName = 'AcousticGuitarIcon'

package/src/icons/BassIcon.jsx

@@ -1,39 +1,13 @@
 export const BassIcon = ({ 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="M7.73906 18.1901L12.4459 3.29455C12.4459 3.29455 12.7347 2.51967 13.0491 2.1545C13.2535 1.91705 13.5053 1.66859 13.8339 1.478C14.5211 1.07946 15.7851 0.746696 17.2647 1.26753C18.6491 1.75494 19.3409 3.02358 19.4676 4.01173C19.6087 5.11325 19.2732 5.98742 18.7529 6.56404C18.2729 7.09605 17.7634 7.61184 17.4794 8.22423C17.175 8.8802 17.3189 9.75025 17.4579 10.3914C17.823 12.0751 18.2095 13.4829 17.2646 15.6501C16.6341 17.0961 15.8902 18.8741 15.8043 20.701L15.8041 23H10.6836C10.6836 23 10.6642 22.0829 10.4538 21.68C10.3442 21.4702 10.1501 21.1796 9.62833 20.9994C8.81891 20.72 7.93193 20.5313 7.6742 19.7253C7.55572 19.3549 7.5297 18.8394 7.73906 18.1901Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M9.08325 2.67741C9.08325 3.09163 8.74747 3.42741 8.33325 3.42741C7.91904 3.42741 7.58325 3.09163 7.58325 2.67741C7.58325 2.2632 7.91904 1.92741 8.33325 1.92741C8.74747 1.92741 9.08325 2.2632 9.08325 2.67741Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M7.7448 7.07517C7.7448 7.48938 7.40902 7.82517 6.9948 7.82517C6.58059 7.82517 6.2448 7.48938 6.2448 7.07517C6.2448 6.66096 6.58059 6.32517 6.9948 6.32517C7.40902 6.32517 7.7448 6.66096 7.7448 7.07517Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M6.40649 11.4728C6.40649 11.887 6.07071 12.2228 5.65649 12.2228C5.24228 12.2228 4.90649 11.887 4.90649 11.4728C4.90649 11.0586 5.24228 10.7228 5.65649 10.7228C6.07071 10.7228 6.40649 11.0586 6.40649 11.4728Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M5.06812 15.8705C5.06812 16.2847 4.73233 16.6205 4.31812 16.6205C3.9039 16.6205 3.56812 16.2847 3.56812 15.8705C3.56812 15.4563 3.9039 15.1205 4.31812 15.1205C4.73233 15.1205 5.06812 15.4563 5.06812 15.8705Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-  </svg>
+  <svg 
+  xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none" aria-label="Bass" className={className} {...props}>
+  <path d="M7.9952 2.4115C7.67397 2.73272 7.15316 2.73272 6.83194 2.4115C6.51072 2.09027 6.51072 1.56947 6.83194 1.24824C7.15316 0.927018 7.67397 0.927018 7.9952 1.24824C8.31642 1.56947 8.31642 2.09027 7.9952 2.4115Z" fill="currentColor"/>
+  <path d="M6.13401 4.27261C5.81278 4.59384 5.29197 4.59384 4.97075 4.27261C4.64953 3.95139 4.64953 3.43058 4.97075 3.10936C5.29197 2.78813 5.81278 2.78813 6.13401 3.10936C6.45523 3.43058 6.45523 3.95139 6.13401 4.27261Z" fill="currentColor"/>
+  <path d="M4.27273 6.13381C3.9515 6.45503 3.4307 6.45503 3.10947 6.13381C2.78825 5.81258 2.78825 5.29177 3.10947 4.97055C3.4307 4.64933 3.9515 4.64933 4.27273 4.97055C4.59395 5.29177 4.59395 5.81258 4.27273 6.13381Z" fill="currentColor"/> 
+  <path d="M2.41162 7.995C2.0904 8.31622 1.56959 8.31622 1.24836 7.995C0.92714 7.67377 0.92714 7.15297 1.24836 6.83174C1.56959 6.51052 2.0904 6.51052 2.41162 6.83174C2.73285 7.15297 2.73285 7.67377 2.41162 7.995Z" fill="currentColor"/>
+  <path d="M2.83337 14.2084V11.2046C2.83337 10.5906 3.07728 10.0018 3.51145 9.56761L9.6173 3.46175C10.5396 2.53945 12.0379 2.54237 12.9602 3.46467C13.7982 4.30271 13.8366 5.65259 13.0442 6.53392C12.7714 6.83731 12.4117 7.0491 12.014 7.14037L11.8842 7.17017C11.4331 7.27372 11.0816 7.62726 10.9807 8.07898L10.1836 11.6463C10.1232 11.9169 9.90304 12.1228 9.62898 12.1652C8.65956 12.3149 7.8995 13.0765 7.75171 14.0462L7.72699 14.2084" 
+  stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
 )
 
 BassIcon.displayName = 'BassIcon'

package/src/icons/ChevronDownIcon.jsx

@@ -4,23 +4,9 @@ export const ChevronDownIcon = ({
   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 9L12 15L20 9"
-      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="ChevronDown">
+    <path d="M4 6.6665L7.57321 9.64418C7.82044 9.85021 8.17956 9.8502 8.42679 9.64418L12 6.6665" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ChevronDownIcon.displayName = 'ChevronDownIcon'

package/src/icons/CymbalsIcon.jsx

@@ -4,23 +4,10 @@ export const CymbalsIcon = ({
   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 22.4952V18.5312M12 6.98657V1.5M9.40695 6.52942C8.62766 6.77381 8.10044 7.20112 8.01283 7.75139C7.92522 8.30166 8.29104 8.87192 8.95505 9.34687C9.61753 9.82336 10.5797 10.2061 11.6803 10.3829C12.7808 10.5596 13.8137 10.4966 14.593 10.2507C15.3723 10.0063 15.8995 9.57897 15.9872 9.0287V9.03023C16.0748 8.47996 15.709 7.90971 15.0449 7.43322M22.9647 11.1459C22.7238 12.6592 21.2739 13.8342 19.1309 14.5063C16.9878 15.1826 14.1473 15.3559 11.1208 14.8698C8.0943 14.3837 5.44824 13.3312 3.62643 12.0209C1.80039 10.7148 0.794374 9.14656 1.03531 7.63332C1.27625 6.12007 2.72609 4.94498 4.86915 4.2729C7.01221 3.60081 9.85271 3.42328 12.8792 3.90938C15.9057 4.39548 18.5518 5.44799 20.3736 6.75834C22.1996 8.06869 23.2056 9.63689 22.9647 11.1501V11.1459Z"
-      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="Cymbals">
+  <path d="M8.00003 14.6957V11.7917M8.00003 4.62988V1.30469M10.1162 6.68266C9.49336 6.87923 8.66778 6.9296 7.78816 6.78832C6.90853 6.64704 6.13947 6.34113 5.60997 5.96029M14.6453 7.15069C14.4993 8.06781 13.6206 8.77998 12.3218 9.18731C11.0229 9.59719 9.30143 9.70223 7.46719 9.40762C5.63295 9.11302 4.02928 8.47513 2.92515 7.68098C1.81846 6.88939 1.20875 5.93897 1.35477 5.02185C1.5008 4.10473 2.37949 3.39255 3.67831 2.98523C4.97714 2.57791 6.69865 2.47031 8.53289 2.76492C10.3671 3.05952 11.9708 3.69741 13.0749 4.49156C14.1816 5.28571 14.7913 6.23613 14.6453 7.15325V7.15069Z" 
+  stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 CymbalsIcon.displayName = 'CymbalsIcon'

package/src/icons/DrumsIcon.jsx

@@ -1,18 +1,9 @@
-export const DrumsIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 26 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M13.75 12.8236C13.75 12.4094 13.4142 12.0736 13 12.0736C12.5858 12.0736 12.25 12.4094 12.25 12.8236H13.75ZM21.2795 11.8824C21.2795 11.4682 20.9437 11.1324 20.5295 11.1324C20.1152 11.1324 19.7795 11.4682 19.7795 11.8824H21.2795ZM6.22048 11.8824C6.22048 11.4682 5.8847 11.1324 5.47048 11.1324C5.05627 11.1324 4.72048 11.4682 4.72048 11.8824H6.22048ZM25.0444 10.5C25.0444 10.0857 24.7086 9.74995 24.2944 9.74995C23.8802 9.74995 23.5444 10.0857 23.5444 10.5H25.0444ZM2.45605 10.5C2.45605 10.0857 2.12027 9.74995 1.70605 9.74995C1.29184 9.74995 0.956055 10.0857 0.956055 10.5H2.45605ZM24.3824 2.64522C24.7387 2.43405 24.8564 1.97399 24.6452 1.61765C24.4341 1.2613 23.974 1.14361 23.6176 1.35478L24.3824 2.64522ZM9.32342 9.82541C8.96708 10.0366 8.84939 10.4966 9.06055 10.853C9.27172 11.2093 9.73178 11.327 10.0881 11.1158L9.32342 9.82541ZM12.25 12.8236V21.7648H13.75V12.8236H12.25ZM19.7795 11.8824V20.8236H21.2795V11.8824H19.7795ZM4.72048 11.8824V20.8236H6.22048V11.8824H4.72048ZM23.5444 10.4707C23.5444 10.6622 23.4286 10.964 22.9426 11.347C22.465 11.7234 21.7275 12.0951 20.7492 12.4212C18.8006 13.0708 16.0608 13.4854 13.0002 13.4854V14.9854C16.1772 14.9854 19.0845 14.5572 21.2236 13.8442C22.2892 13.489 23.2056 13.0495 23.8711 12.5251C24.5281 12.0073 25.0444 11.3188 25.0444 10.4707H23.5444ZM13.0002 13.4854C9.9396 13.4854 7.19986 13.0708 5.25121 12.4212C4.27297 12.0951 3.53542 11.7234 3.05784 11.347C2.5718 10.964 2.45605 10.6622 2.45605 10.4707H0.956055C0.956055 11.3188 1.47238 12.0073 2.12938 12.5251C2.79483 13.0495 3.71127 13.489 4.77687 13.8442C6.9159 14.5572 9.82325 14.9854 13.0002 14.9854V13.4854ZM2.45605 10.4707C2.45605 10.2792 2.5718 9.97735 3.05784 9.59431C3.53542 9.21794 4.27297 8.84619 5.25121 8.52011C7.19986 7.87056 9.9396 7.45593 13.0002 7.45593V5.95593C9.82325 5.95593 6.9159 6.38407 4.77687 7.09708C3.71127 7.45228 2.79483 7.89176 2.12938 8.4162C1.47238 8.93397 0.956055 9.62256 0.956055 10.4707H2.45605ZM13.0002 7.45593C16.0608 7.45593 18.8006 7.87056 20.7492 8.52011C21.7275 8.84619 22.465 9.21794 22.9426 9.59431C23.4286 9.97735 23.5444 10.2792 23.5444 10.4707H25.0444C25.0444 9.62256 24.5281 8.93397 23.8711 8.4162C23.2056 7.89176 22.2892 7.45228 21.2236 7.09708C19.0845 6.38407 16.1772 5.95593 13.0002 5.95593V7.45593ZM23.5444 17.7647C23.5444 17.9562 23.4286 18.258 22.9426 18.6411C22.465 19.0174 21.7275 19.3892 20.7492 19.7153C18.8006 20.3648 16.0608 20.7794 13.0002 20.7794V22.2794C16.1772 22.2794 19.0845 21.8513 21.2236 21.1383C22.2892 20.7831 23.2056 20.3436 23.8711 19.8192C24.5281 19.3014 25.0444 18.6128 25.0444 17.7647H23.5444ZM13.0002 20.7794C9.9396 20.7794 7.19986 20.3648 5.25121 19.7153C4.27297 19.3892 3.53542 19.0174 3.05784 18.6411C2.5718 18.258 2.45605 17.9562 2.45605 17.7647H0.956055C0.956055 18.6128 1.47238 19.3014 2.12938 19.8192C2.79483 20.3436 3.71127 20.7831 4.77687 21.1383C6.9159 21.8513 9.82325 22.2794 13.0002 22.2794V20.7794ZM25.0444 17.7647V10.5H23.5444V17.7647H25.0444ZM2.45605 17.7647V10.5H0.956055V17.7647H2.45605ZM23.6176 1.35478L9.32342 9.82541L10.0881 11.1158L24.3824 2.64522L23.6176 1.35478Z"
-      fill="currentColor"
-    />
-  </svg>
+export const DrumsIcon = ({ 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} aria-label="Drums">
+  <path 
+  d="M10.5056 12.9092C10.2712 12.6748 9.89135 12.6748 9.65703 12.9092C9.42272 13.1435 9.42272 13.5234 9.65703 13.7577L10.0813 13.3334L10.5056 12.9092ZM10.9904 15.091C11.2247 15.3253 11.6046 15.3253 11.8389 15.091C12.0732 14.8567 12.0732 14.4768 11.8389 14.2425L11.4146 14.6667L10.9904 15.091ZM3.2576 13.7577C3.49191 13.5234 3.49191 13.1435 3.2576 12.9092C3.02328 12.6748 2.64338 12.6748 2.40907 12.9092L2.83333 13.3334L3.2576 13.7577ZM1.07574 14.2425C0.841421 14.4768 0.841421 14.8567 1.07574 15.091C1.31005 15.3253 1.68995 15.3253 1.92426 15.091L1.5 14.6667L1.07574 14.2425ZM10.748 5.64592L10.148 5.64591C10.148 5.84944 10.2511 6.03909 10.422 6.14966L10.748 5.64592ZM13.5813 7.47925H14.1813C14.1813 7.27572 14.0782 7.08607 13.9073 6.9755L13.5813 7.47925ZM12.9813 14.5834C12.9813 14.9148 13.25 15.1834 13.5813 15.1834C13.9127 15.1834 14.1813 14.9148 14.1813 14.5834H13.5813H12.9813ZM10.748 10.376H10.148C10.148 12.4143 8.49561 14.0667 6.45732 14.0667V14.6667V15.2667C9.15835 15.2667 11.348 13.077 11.348 10.376H10.748ZM6.45732 14.6667V14.0667C4.41903 14.0667 2.76667 12.4143 2.76667 10.376H2.16667H1.56667C1.56667 13.077 3.75629 15.2667 6.45732 15.2667V14.6667ZM2.16667 10.376H2.76667C2.76667 8.33773 4.41903 6.68537 6.45732 6.68537V6.08537V5.48537C3.75629 5.48537 1.56667 7.67499 1.56667 10.376H2.16667ZM6.45732 6.08537V6.68537C8.49561 6.68537 10.148 8.33773 10.148 10.376H10.748H11.348C11.348 7.67499 9.15835 5.48537 6.45732 5.48537V6.08537ZM10.0813 13.3334L9.65703 13.7577L10.9904 15.091L11.4146 14.6667L11.8389 14.2425L10.5056 12.9092L10.0813 13.3334ZM2.83333 13.3334L2.40907 12.9092L1.07574 14.2425L1.5 14.6667L1.92426 15.091L3.2576 13.7577L2.83333 13.3334ZM14.5234 2.6355H13.9234C13.9234 2.57507 13.9594 2.59929 13.8404 2.69946C13.7243 2.79715 13.5206 2.91213 13.2164 3.02041C12.6132 3.23509 11.7406 3.37925 10.748 3.37925V3.97925V4.57925C11.8405 4.57925 12.8555 4.42259 13.6188 4.15094C13.9978 4.01605 14.347 3.84147 14.613 3.61763C14.8761 3.39628 15.1234 3.06699 15.1234 2.6355H14.5234ZM10.748 3.97925V3.37925C9.7554 3.37925 8.88273 3.23509 8.27956 3.02041C7.97533 2.91213 7.77167 2.79715 7.65558 2.69946C7.53654 2.59929 7.57258 2.57507 7.57258 2.6355H6.97258H6.37257C6.37257 3.06699 6.6199 3.39628 6.88295 3.61763C7.14895 3.84147 7.49819 4.01605 7.87718 4.15094C8.64043 4.42259 9.65546 4.57925 10.748 4.57925V3.97925ZM6.97258 2.6355H7.57258C7.57258 2.69592 7.53654 2.67171 7.65558 2.57153C7.77167 2.47384 7.97533 2.35887 8.27956 2.25059C8.88273 2.0359 9.7554 1.89175 10.748 1.89175V1.29175V0.691748C9.65546 0.691748 8.64043 0.848401 7.87718 1.12006C7.49819 1.25495 7.14895 1.42953 6.88295 1.65336C6.6199 1.87472 6.37257 2.20401 6.37257 2.6355H6.97258ZM10.748 1.29175V1.89175C11.7406 1.89175 12.6132 2.0359 13.2164 2.25059C13.5206 2.35887 13.7243 2.47384 13.8404 2.57153C13.9594 2.67171 13.9234 2.69592 13.9234 2.6355H14.5234H15.1234C15.1234 2.20401 14.8761 1.87472 14.613 1.65336C14.347 1.42953 13.9978 1.25495 13.6188 1.12006C12.8555 0.848401 11.8405 0.691748 10.748 0.691748V1.29175ZM10.748 3.97925L10.148 3.97924L10.148 5.64591L10.748 5.64592L11.348 5.64592L11.348 3.97925L10.748 3.97925ZM13.5813 7.47925H12.9813V14.5834H13.5813H14.1813V7.47925H13.5813ZM10.748 5.64592L10.422 6.14966L13.2554 7.98299L13.5813 7.47925L13.9073 6.9755L11.0739 5.14217L10.748 5.64592Z" 
+  fill="currentColor"/>
+</svg>
 )
 
 DrumsIcon.displayName = 'DrumsIcon'

package/src/icons/ElectricGuitarIcon.jsx

@@ -4,51 +4,15 @@ export const ElectricGuitarIcon = ({
   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.96815 2.98026C4.85773 2.99071 4.78159 3.09639 4.80545 3.20471C5.8508 7.95033 6.18035 12.8592 5.76884 17.7011L5.74214 18.0153C5.73195 18.1352 5.78143 18.2524 5.87445 18.3288C7.27021 19.474 8.0793 21.1945 8.0793 22.9999H15.9241C15.9241 21.1945 16.7331 19.474 18.1289 18.3288C18.2219 18.2524 18.2714 18.1352 18.2612 18.0153L18.2345 17.7011C17.823 12.8592 18.1525 7.95033 19.1979 3.20471C19.2218 3.09639 19.1456 2.99071 19.0352 2.98026L17.7975 2.86305C17.3655 2.82214 16.9593 2.63862 16.643 2.34142C15.5467 1.3112 13.9185 1.08785 12.5853 1.78483L12.0017 2.08992L11.4181 1.78483C10.0849 1.08785 8.45661 1.3112 7.36032 2.34142C7.04406 2.63862 6.6379 2.82214 6.20584 2.86305L4.96815 2.98026Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M22.624 6.55481C22.624 6.96902 22.2882 7.30481 21.874 7.30481C21.4598 7.30481 21.124 6.96902 21.124 6.55481C21.124 6.1406 21.4598 5.80481 21.874 5.80481C22.2882 5.80481 22.624 6.1406 22.624 6.55481Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M22.3706 11.2933C22.3706 11.7075 22.0348 12.0433 21.6206 12.0433C21.2064 12.0433 20.8706 11.7075 20.8706 11.2933C20.8706 10.8791 21.2064 10.5433 21.6206 10.5433C22.0348 10.5433 22.3706 10.8791 22.3706 11.2933Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M22.1172 16.0319C22.1172 16.4461 21.7814 16.7819 21.3672 16.7819C20.953 16.7819 20.6172 16.4461 20.6172 16.0319C20.6172 15.6176 20.953 15.2819 21.3672 15.2819C21.7814 15.2819 22.1172 15.6176 22.1172 16.0319Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M1.37939 6.55481C1.37939 6.96902 1.71518 7.30481 2.12939 7.30481C2.54361 7.30481 2.87939 6.96902 2.87939 6.55481C2.87939 6.1406 2.54361 5.80481 2.12939 5.80481C1.71518 5.80481 1.37939 6.1406 1.37939 6.55481Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M1.63281 11.2933C1.63281 11.7075 1.9686 12.0433 2.38281 12.0433C2.79703 12.0433 3.13281 11.7075 3.13281 11.2933C3.13281 10.8791 2.79703 10.5433 2.38281 10.5433C1.9686 10.5433 1.63281 10.8791 1.63281 11.2933Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M1.88623 16.0319C1.88623 16.4461 2.22202 16.7819 2.63623 16.7819C3.05044 16.7819 3.38623 16.4461 3.38623 16.0319C3.38623 15.6176 3.05044 15.2819 2.63623 15.2819C2.22202 15.2819 1.88623 15.6176 1.88623 16.0319Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none" aria-label="Electric Guitar" className={className} {...props}>
+  <path d="M5.99997 14.6666C5.99997 13.8613 5.5097 13.1371 4.762 12.838L4.58853 12.7687C4.43666 12.7079 4.34141 12.5577 4.35085 12.3945C4.4089 11.3901 4.56231 7.73287 4.03071 3.56878C4.01197 3.42199 4.06691 3.27466 4.17828 3.17722L5.24758 2.2416C6.04613 1.54288 7.24966 1.58295 7.99997 2.33323C8.75029 1.58295 9.95381 1.54288 10.7524 2.2416L11.8217 3.17722C11.933 3.27466 11.988 3.42199 11.9692 3.56878C11.4376 7.73287 11.591 11.3901 11.6491 12.3945C11.6585 12.5577 11.5633 12.7079 11.4114 12.7687L11.2379 12.838C10.4903 13.1371 9.99998 13.8613 9.99998 14.6666" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
+  <path d="M15.1042 4.86436C15.0881 5.32432 14.7022 5.68416 14.2423 5.6681C13.7823 5.65204 13.4225 5.26615 13.4385 4.80619C13.4546 4.34624 13.8405 3.98639 14.3004 4.00245C14.7604 4.01851 15.1202 4.4044 15.1042 4.86436Z" fill="currentColor"/>
+  <path d="M14.9995 7.86253C14.9834 8.32249 14.5975 8.68234 14.1376 8.66627C13.6776 8.65021 13.3178 8.26432 13.3338 7.80436C13.3499 7.34441 13.7358 6.98456 14.1957 7.00062C14.6557 7.01668 15.0155 7.40257 14.9995 7.86253Z" fill="currentColor"/>
+  <path d="M14.8948 10.8607C14.8787 11.3207 14.4928 11.6805 14.0329 11.6644C13.5729 11.6484 13.2131 11.2625 13.2291 10.8025C13.2452 10.3426 13.6311 9.98273 14.091 9.99879C14.551 10.0149 14.9108 10.4007 14.8948 10.8607Z" fill="currentColor"/>
+  <path d="M2.56143 4.80597C2.57749 5.26593 2.21765 5.65182 1.75769 5.66788C1.29773 5.68394 0.911843 5.32409 0.895781 4.86414C0.879719 4.40418 1.23957 4.01829 1.69952 4.00223C2.15948 3.98616 2.54537 4.34601 2.56143 4.80597Z" fill="currentColor"/>  
+  <path d="M2.66613 7.80414C2.68219 8.2641 2.32235 8.64999 1.86239 8.66605C1.40243 8.68211 1.01654 8.32226 1.00048 7.86231C0.984418 7.40235 1.34427 7.01646 1.80422 7.0004C2.26418 6.98434 2.65007 7.34418 2.66613 7.80414Z" fill="currentColor"/>
+  <path d="M2.77083 10.8023C2.78689 11.2623 2.42704 11.6482 1.96709 11.6642C1.50713 11.6803 1.12124 11.3204 1.10518 10.8605C1.08912 10.4005 1.44896 10.0146 1.90892 9.99857C2.36888 9.98251 2.75477 10.3424 2.77083 10.8023Z" fill="currentColor"/>  
+</svg>
 )
 
 ElectricGuitarIcon.displayName = 'ElectricGuitarIcon'

package/src/icons/HiFi1Icon.jsx

@@ -0,0 +1,14 @@
+export const HiFi1Icon = ({ width = 59, height = 14, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 59 14" fill="none" className={className} {...props} aria-label="HiFi1">
+  <g opacity="0.8">
+    <path d="M6.99995 0L1.52588e-05 8.61531H7.03361C5.74099 8.9735 4.84613 10.1501 4.84613 11.4914V13.9993L11.8461 5.38401H6.99995V2.692V0Z" fill="currentColor"/>
+    <path d="M56.6509 3.18579H58.8668V10.8147H56.6509V3.18579Z" fill="currentColor"/>
+    <path d="M55.3045 5.1371H46.8488V6.51515H54.4005V8.42236H46.8488V10.8147H44.7101V3.18579H55.3045V5.1371Z" fill="currentColor"/>
+    <path d="M36.7051 6.2832H43.1543V8.0471H36.7051V6.2832Z" fill="currentColor"/>
+    <path d="M32.9326 3.18579H35.1485V10.8147H32.9326V3.18579Z" fill="currentColor"/>
+    <path d="M28.8732 3.18579H31.0891V10.8147H28.8732V7.97037H21.4649V10.8147H19.249V3.18579H21.4649V6.05213H28.8732V3.18579Z" fill="currentColor"/>
+  </g>
+</svg>
+)
+
+HiFi1Icon.displayName = 'HiFi1Icon'

package/src/icons/HiFiIcon.jsx

@@ -1,112 +1,44 @@
-export const HiFiIcon = ({ width = 57, height = 14, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 57 14"
-    fill="none"
-    {...props}
-    className={className}
-  >
-    <path
-      d="M6.77798 0.222229L0 8.56436H6.81057C5.55893 8.91119 4.69245 10.0504 4.69245 11.3492V13.7776L11.4704 5.43552L6.77798 5.43552V2.82887V0.222229Z"
-      fill="url(#paint0_linear_29457_74696)"
-    />
-    <path
-      d="M54.8542 3.30688H56.9999V10.6938H54.8542V3.30688Z"
-      fill="url(#paint1_linear_29457_74696)"
-    />
-    <path
-      d="M53.5519 5.19632H45.3644V6.53067H52.6766V8.37741H45.3644V10.6938H43.2935V3.30688H53.5519V5.19632Z"
-      fill="url(#paint2_linear_29457_74696)"
-    />
-    <path
-      d="M35.542 6.30609H41.7867V8.01406H35.542V6.30609Z"
-      fill="url(#paint3_linear_29457_74696)"
-    />
-    <path
-      d="M31.8889 3.30688H34.0345V10.6938H31.8889V3.30688Z"
-      fill="url(#paint4_linear_29457_74696)"
-    />
-    <path
-      d="M27.9585 3.30688H30.1041V10.6938H27.9585V7.93975H20.785V10.6938H18.6394V3.30688H20.785V6.08233H27.9585V3.30688Z"
-      fill="url(#paint5_linear_29457_74696)"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear_29457_74696"
-        x1="-28.6665"
-        y1="-4.12207"
-        x2="42.107"
-        y2="10.3082"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.137148" stopColor="white" />
-        <stop offset="0.378105" stopColor="#9E9E9E" />
-        <stop offset="0.572686" stopColor="white" />
-      </linearGradient>
-      <linearGradient
-        id="paint1_linear_29457_74696"
-        x1="17.6558"
-        y1="0.93948"
-        x2="76.9441"
-        y2="20.7787"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.137148" stopColor="white" />
-        <stop offset="0.378105" stopColor="#9E9E9E" />
-        <stop offset="0.572686" stopColor="white" />
-      </linearGradient>
-      <linearGradient
-        id="paint2_linear_29457_74696"
-        x1="17.6559"
-        y1="0.93948"
-        x2="76.9442"
-        y2="20.7787"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.137148" stopColor="white" />
-        <stop offset="0.378105" stopColor="#9E9E9E" />
-        <stop offset="0.572686" stopColor="white" />
-      </linearGradient>
-      <linearGradient
-        id="paint3_linear_29457_74696"
-        x1="17.6564"
-        y1="0.939069"
-        x2="76.9447"
-        y2="20.7783"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.137148" stopColor="white" />
-        <stop offset="0.378105" stopColor="#9E9E9E" />
-        <stop offset="0.572686" stopColor="white" />
-      </linearGradient>
-      <linearGradient
-        id="paint4_linear_29457_74696"
-        x1="17.6558"
-        y1="0.939488"
-        x2="76.9442"
-        y2="20.7787"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.137148" stopColor="white" />
-        <stop offset="0.378105" stopColor="#9E9E9E" />
-        <stop offset="0.572686" stopColor="white" />
-      </linearGradient>
-      <linearGradient
-        id="paint5_linear_29457_74696"
-        x1="17.656"
-        y1="0.939472"
-        x2="76.9443"
-        y2="20.7787"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.137148" stopColor="white" />
-        <stop offset="0.378105" stopColor="#9E9E9E" />
-        <stop offset="0.572686" stopColor="white" />
-      </linearGradient>
-    </defs>
-  </svg>
+export const HiFiIcon = ({ width = 76, height = 22, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 76 22" fill="none" className={className} {...props} aria-label="HiFi">
+  <path d="M9.02149 2.95728L0 14.0607H9.06487C7.39894 14.5223 6.24565 16.0386 6.24565 17.7673V20.9995L15.2671 9.89616L9.02149 9.89616V6.42672V2.95728Z" fill="url(#paint0_linear_42429_315976)"/>
+  <path d="M73.0114 7.06323H75.8673V16.8953H73.0114V7.06323Z" fill="url(#paint1_linear_42429_315976)"/>
+  <path d="M71.2762 9.57808H60.3785V11.3541H70.1111V13.8121H60.3785V16.8953H57.6221V7.06323H71.2762V9.57808Z" fill="url(#paint2_linear_42429_315976)"/>
+  <path d="M47.3054 11.0552H55.6171V13.3285H47.3054V11.0552Z" fill="url(#paint3_linear_42429_315976)"/>
+  <path d="M42.4434 7.06323H45.2993V16.8953H42.4434V7.06323Z" fill="url(#paint4_linear_42429_315976)"/>
+  <path d="M37.2117 7.06323H40.0675V16.8953H37.2117V13.2296H27.6638V16.8953H24.808V7.06323H27.6638V10.7574H37.2117V7.06323Z" fill="url(#paint5_linear_42429_315976)"/>
+  <defs>
+    <linearGradient id="paint0_linear_42429_315976" x1="-38.1551" y1="-2.82499" x2="56.0444" y2="16.3817" gradientUnits="userSpaceOnUse">
+      <stop offset="0.137148" stopColor="white"/>
+      <stop offset="0.378105" stopColor="#9E9E9E"/>
+      <stop offset="0.572686" stopColor="white"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_42429_315976" x1="23.5002" y1="3.91222" x2="102.413" y2="30.3182" gradientUnits="userSpaceOnUse">
+      <stop offset="0.137148" stopColor="white"/>
+      <stop offset="0.378105" stopColor="#9E9E9E"/>
+      <stop offset="0.572686" stopColor="white"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_42429_315976" x1="23.4985" y1="3.91222" x2="102.411" y2="30.3182" gradientUnits="userSpaceOnUse">
+      <stop offset="0.137148" stopColor="white"/>
+      <stop offset="0.378105" stopColor="#9E9E9E"/>
+      <stop offset="0.572686" stopColor="white"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_42429_315976" x1="23.4996" y1="3.91167" x2="102.412" y2="30.3177" gradientUnits="userSpaceOnUse">
+      <stop offset="0.137148" stopColor="white"/>
+      <stop offset="0.378105" stopColor="#9E9E9E"/>
+      <stop offset="0.572686" stopColor="white"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_42429_315976" x1="23.4992" y1="3.91223" x2="102.412" y2="30.3182" gradientUnits="userSpaceOnUse">
+      <stop offset="0.137148" stopColor="white"/>
+      <stop offset="0.378105" stopColor="#9E9E9E"/>
+      <stop offset="0.572686" stopColor="white"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_42429_315976" x1="23.4991" y1="3.91221" x2="102.412" y2="30.3182" gradientUnits="userSpaceOnUse">
+      <stop offset="0.137148" stopColor="white"/>
+      <stop offset="0.378105" stopColor="#9E9E9E"/>
+      <stop offset="0.572686" stopColor="white"/>
+    </linearGradient>
+  </defs>
+</svg>
 )
 
 HiFiIcon.displayName = 'HiFiIcon'

package/src/icons/HiHatIcon.jsx

@@ -1,21 +1,9 @@
 export const HiHatIcon = ({ 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.9835 1V6.0625M11.9835 23V18.625M4.55722 8.99113C3.91491 9.58623 3.54999 10.2669 3.54999 10.9911C3.54999 12.1563 4.49446 13.2086 6.01896 13.9734C7.54346 14.7382 9.65311 15.2105 11.9835 15.2105C14.3139 15.2105 16.4235 14.7382 17.948 13.9734C19.4725 13.2086 20.417 12.1563 20.417 10.9911C20.417 10.2669 20.0521 9.58623 19.4098 8.99113M4.55722 8.99113C4.94824 9.35341 5.44207 9.68399 6.01896 9.9734C7.54346 10.7382 9.65311 11.2105 11.9835 11.2105C14.3139 11.2105 16.4235 10.7382 17.948 9.9734C18.5249 9.68399 19.0187 9.35341 19.4098 8.99113M4.55722 8.99113C3.91491 8.39604 3.54999 7.7154 3.54999 6.99113C3.54999 5.82594 4.49446 4.77368 6.01896 4.00887C7.54346 3.24405 9.65311 2.77182 11.9835 2.77182C14.3139 2.77182 16.4235 3.24405 17.948 4.00887C19.4725 4.77368 20.417 5.82594 20.417 6.99113C20.417 7.7154 20.0521 8.39604 19.4098 8.99113"
-      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="HiHat">
+  <path
+   d="M2.60605 6.3675C2.01057 6.76041 1.66663 7.2228 1.66663 7.71865C1.66663 8.16126 1.94067 8.57721 2.42303 8.94088C2.71668 9.16227 3.08753 9.36429 3.52075 9.54115C4.66561 10.0085 6.24991 10.2971 7.99996 10.2971C9.75001 10.2971 11.3343 10.0085 12.4792 9.54115C12.9124 9.36429 13.2832 9.16227 13.5769 8.94088C14.0593 8.57721 14.3333 8.16126 14.3333 7.71865C14.3333 7.21745 13.9819 6.75045 13.3745 6.35482M7.99996 1.25V4.34375M7.99996 12.5V14.75M14.3333 4.91115C14.3333 4.19909 13.624 3.55605 12.4792 3.08866C11.3343 2.62127 9.75001 2.33268 7.99996 2.33268C6.24991 2.33268 4.66561 2.62127 3.52075 3.08866C2.3759 3.55605 1.66663 4.19909 1.66663 4.91115C1.66663 5.35376 1.94067 5.76971 2.42303 6.13338C2.71668 6.35477 3.08753 6.55679 3.52075 6.73365C4.66561 7.20104 6.24991 7.48963 7.99996 7.48963C9.75001 7.48963 11.3343 7.20104 12.4792 6.73365C12.9124 6.55679 13.2832 6.35477 13.5769 6.13338C14.0592 5.76971 14.3333 5.35376 14.3333 4.91115Z"
+    stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 HiHatIcon.displayName = 'HiHatIcon'

package/src/icons/KickdrumIcon.jsx

@@ -4,27 +4,11 @@ export const KickdrumIcon = ({
   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.29373 11.5471C5.4058 10.5872 6.2748 9.89989 7.23468 10.012C8.19457 10.124 8.88185 10.993 8.76978 11.9529C8.65771 12.9128 7.78871 13.6001 6.82883 13.488C5.86894 13.3759 5.18165 12.5069 5.29373 11.5471Z"
-      fill="currentColor"
-    />
-    <path
-      d="M7.43674 1.40002C5.9721 1.40002 4.64821 2.58757 3.68938 4.50523C2.73055 6.42289 2.13678 9.07507 2.13678 11.9999C2.13678 13.2259 2.24109 14.4039 2.43288 15.5M7.43674 1.40002C8.90137 1.40002 10.2253 2.58757 11.1841 4.50523M7.43674 1.40002H16.5632C18.0278 1.40002 19.3517 2.58757 20.3106 4.50523M11.1841 4.50523C12.1429 6.42289 12.7367 9.07507 12.7367 11.9999M11.1841 4.50523H20.3106M12.7367 11.9999C12.7367 14.9248 12.1429 17.577 11.1841 19.4947M12.7367 11.9999H21.8632M11.1841 19.4947C10.2253 21.4123 8.90137 22.5999 7.43674 22.5999M11.1841 19.4947H20.3106M7.46754 22.5999H16.5632C18.0279 22.5999 19.3517 21.4123 20.3106 19.4947M20.3106 4.50523C21.2694 6.42289 21.8632 9.07507 21.8632 11.9999M21.8632 11.9999C21.8632 14.9248 21.2694 17.577 20.3106 19.4947M7.03172 11.76V17.4159C7.03172 17.8936 6.8607 18.3556 6.54961 18.7182L3.21924 22.5999H7.89412"
-      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="Kickdrum">
+  <path 
+  d="M5.37842 1.91016C4.53695 1.91016 3.77634 2.59243 3.22547 3.69417C2.6746 4.79591 2.33346 6.31965 2.33346 8.00006C2.33346 8.70438 2.39339 9.38119 2.50358 10.0109M5.37842 1.91016C6.21989 1.91016 6.98049 2.59243 7.53136 3.69417C8.08223 4.79591 8.42337 6.31965 8.42337 8.00006C8.42337 9.68047 8.08223 11.2042 7.53136 12.3059C6.98049 13.4077 6.21989 14.09 5.37842 14.09M5.37842 1.91016H10.6218C11.4632 1.91016 12.2239 2.59243 12.7747 3.69417C13.3256 4.79591 13.6667 6.31965 13.6667 8.00006C13.6667 9.68047 13.3256 11.2042 12.7747 12.3059C12.2239 13.4077 11.4633 14.09 10.6218 14.09H5.39611M5.14572 7.86221V10.9403C5.14572 11.32 4.98389 11.6816 4.7008 11.9346L2.2887 14.09H5.6412" 
+  stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 KickdrumIcon.displayName = 'KickdrumIcon'

package/src/icons/LockIcon.jsx

@@ -1,16 +1,8 @@
 export const LockIcon = ({ 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.66667 7.33398V4.66732C4.66667 3.78326 5.01786 2.93542 5.64298 2.3103C6.2681 1.68517 7.11595 1.33398 8 1.33398C8.88406 1.33398 9.7319 1.68517 10.357 2.3103C10.9821 2.93542 11.3333 3.78326 11.3333 4.66732V7.33398M3.33333 7.33398H12.6667C13.403 7.33398 14 7.93094 14 8.66732V13.334C14 14.0704 13.403 14.6673 12.6667 14.6673H3.33333C2.59695 14.6673 2 14.0704 2 13.334V8.66732C2 7.93094 2.59695 7.33398 3.33333 7.33398Z"
-        stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 12 12" fill="none" aria-label="Lock" className={className} {...props}>
+  <path 
+  d="M8.25 4.75V3.5C8.25 2.25736 7.24264 1.25 6 1.25C4.75736 1.25 3.75 2.25736 3.75 3.5V4.75M3.25 10.5H8.75C9.57843 10.5 10.25 9.82843 10.25 9V6.25C10.25 5.42157 9.57843 4.75 8.75 4.75H3.25C2.42157 4.75 1.75 5.42157 1.75 6.25V9C1.75 9.82843 2.42157 10.5 3.25 10.5Z" 
+  stroke="currentColor" strokeWidth="1.2" strokeMiterlimit="10"/>
 </svg>
 )
 

package/src/icons/MinusIcon.jsx

@@ -1,15 +1,7 @@
 export const MinusIcon = ({ 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="M3.33325 8H12.6666" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
-    </g>
-  </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="Minus">
+    <path d="M3.33325 8H12.6666" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 MinusIcon.displayName = 'MinusIcon'

package/src/icons/MusicIcon.jsx

@@ -1,20 +1,7 @@
 export const MusicIcon = ({ 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="M5.56027 10.1048V12.6086C5.56027 13.2138 5.15269 13.743 4.5676 13.8977L3.13494 14.2763C2.28917 14.4998 1.46094 13.862 1.46094 12.9872V12.2149C1.46094 11.6097 1.86851 11.0804 2.45361 10.9258L5.56027 10.1048ZM5.56027 10.1048V3.48019C5.56027 3.17846 5.76292 2.91435 6.05437 2.83624L13.3084 0.892231C13.7318 0.778757 14.1476 1.09781 14.1476 1.53617V7.79232M14.1476 7.79232V10.3072C14.1476 10.9124 13.74 11.4417 13.1549 11.5963L11.7216 11.975C10.8758 12.1985 10.0476 11.5607 10.0476 10.6859V9.91825C10.0476 9.3154 10.4521 8.78755 11.0342 8.63079L14.1476 7.79232Z"
-        stroke="currentColor"
-        strokeMiterlimit="10"
-      />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none" className={className} {...props} aria-label="Music">
+  <path d="M5.20835 10.9794V5.15268C5.20835 4.52432 5.59944 3.96663 6.17886 3.76874L11.1372 2.07531C12.0542 1.76213 13 2.46482 13 3.45924V8.31825M5.20835 9.99042L2.74945 10.8293C2.10306 11.0498 1.66669 11.6718 1.66669 12.3727C1.66669 13.4814 2.72103 14.265 3.7435 13.9162L4.72287 13.5821C5.0127 13.4832 5.20835 13.2043 5.20835 12.89V9.99042ZM13 7.33403L10.5414 8.17227C9.89488 8.39271 9.45835 9.01485 9.45835 9.71591C9.45835 10.8246 10.5125 11.6082 11.535 11.2596L12.5144 10.9256C12.8043 10.8268 13 10.5479 13 10.2335V7.33403Z" 
+  stroke="currentColor" strokeWidth="1.2" strokeMiterlimit="10" strokeLinecap="round"/>
 </svg>
 )
 

package/src/icons/PercussionIcon.jsx

@@ -0,0 +1,8 @@
+export const PercussionIcon = ({ 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} aria-label="Percussion">
+  <path 
+  d="M11.3948 2.32064C12.1078 3.20612 12.5417 5.0625 12.5417 6.49403C12.5417 9.29657 11.6684 12.1672 10.3602 13.8126C8.89849 14.6512 7.10159 14.6512 5.63993 13.8126C4.33164 12.1672 3.45837 9.29657 3.45837 6.49403C3.45837 5.22895 3.79723 3.63208 4.3681 2.6667C4.44321 2.53968 4.52234 2.4236 4.60524 2.32064M6.41671 4.125V7.79167M9.50004 4.125V7.79167M11.5528 2.66667C11.5528 3.311 9.96219 3.83333 8.00006 3.83333C6.03793 3.83333 4.44731 3.311 4.44731 2.66667C4.44731 2.02233 6.03793 1.5 8.00006 1.5C9.96219 1.5 11.5528 2.02233 11.5528 2.66667Z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+PercussionIcon.displayName = 'PercussionIcon'