@moises.ai/design-system 4.18.16 → 4.18.18

package/src/icons/PianoIcon.jsx

@@ -1,19 +1,7 @@
 export const PianoIcon = ({ 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="M3.6875 15.8182C3.6875 15.4385 3.3797 15.1307 3 15.1307C2.6203 15.1307 2.3125 15.4385 2.3125 15.8182H3.6875ZM6.8125 19.5C6.8125 19.8797 7.1203 20.1875 7.5 20.1875C7.8797 20.1875 8.1875 19.8797 8.1875 19.5H6.8125ZM11.3125 19.6364C11.3125 20.0161 11.6203 20.3239 12 20.3239C12.3797 20.3239 12.6875 20.0161 12.6875 19.6364H11.3125ZM15.8125 19.6364C15.8125 20.0161 16.1203 20.3239 16.5 20.3239C16.8797 20.3239 17.1875 20.0161 17.1875 19.6364H15.8125ZM23 15.8182V16.5057C23.3797 16.5057 23.6875 16.1979 23.6875 15.8182H23ZM1 15.8182H0.312501C0.312501 16.1979 0.620305 16.5057 1 16.5057L1 15.8182ZM14.2535 4.84091L14.8918 4.58551L14.2535 4.84091ZM2.3125 15.8182V21.5455H3.6875V15.8182H2.3125ZM4 23.1875H20.25V21.8125H4V23.1875ZM21.6875 21.5455V15.8182H20.3125V21.5455H21.6875ZM20.25 23.1875C20.7252 23.1875 21.1201 22.9735 21.373 22.6218C21.6066 22.297 21.6875 21.9028 21.6875 21.5455H20.3125C20.3125 21.7153 20.2715 21.7984 20.2567 21.819C20.2522 21.8253 20.2552 21.8193 20.2667 21.8134C20.2784 21.8074 20.2774 21.8125 20.25 21.8125V23.1875ZM2.3125 21.5455C2.3125 22.5017 3.1654 23.1875 4 23.1875V21.8125C3.93616 21.8125 3.8491 21.7824 3.77703 21.7158C3.70741 21.6514 3.6875 21.5875 3.6875 21.5455H2.3125ZM6.8125 15.8182V19.5H8.1875V15.8182H6.8125ZM11.3125 15.8182V19.6364H12.6875V15.8182H11.3125ZM15.8125 15.8182V19.6364H17.1875V15.8182H15.8125ZM22.3125 11.0455V15.8182H23.6875V11.0455H22.3125ZM1.6875 15.8182V6.27273H0.312501V15.8182H1.6875ZM5.58333 2.1875H9.44097V0.812501H5.58333V2.1875ZM17.691 7.91477H19.3333V6.53977H17.691V7.91477ZM9.44097 2.1875C11.2517 2.1875 12.9052 3.32202 13.6152 5.09631L14.8918 4.58551C13.9827 2.31361 11.8397 0.812501 9.44097 0.812501V2.1875ZM23.6875 11.0455C23.6875 8.58354 21.764 6.53977 19.3333 6.53977V7.91477C20.9527 7.91477 22.3125 9.28992 22.3125 11.0455H23.6875ZM13.6152 5.09631C14.2929 6.79018 15.8936 7.91477 17.691 7.91477V6.53977C16.4816 6.53977 15.3704 5.78177 14.8918 4.58551L13.6152 5.09631ZM1.6875 6.27273C1.6875 3.99002 3.4577 2.1875 5.58333 2.1875V0.812501C2.64636 0.812501 0.312501 3.28363 0.312501 6.27273H1.6875ZM23 15.1307H12V16.5057H23V15.1307ZM12 15.1307H1V16.5057H12V15.1307Z"
-        fill="currentColor"
-      />
-    </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="Piano">
+    <path d="M14 9.33325H2.66667M5 9.33325V11.6666M8 9.33325V11.6666M11 9.33325V11.6666M2 12.6666V5.09798C2 3.01878 3.68553 1.33325 5.76473 1.33325H6.17662C7.81457 1.33325 9.25604 2.41412 9.71499 3.98645C9.95193 4.7982 10.6635 5.38082 11.506 5.45298L11.9865 5.49413C13.1253 5.59167 14 6.5445 14 7.68745V12.6666C14 13.403 13.403 13.9999 12.6667 13.9999H3.33333C2.59695 13.9999 2 13.403 2 12.6666Z" 
+    stroke="currentColor" strokeWidth="1.2" strokeMiterlimit="10" strokeLinecap="round"/>
 </svg>
 )
 

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/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/SnareIcon.jsx

@@ -1,18 +1,8 @@
 export const SnareIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    className={className}
-    {...props}
-    fill="none"
-  >
-    <path
-      d="M21.311 9.25017C21.311 8.83596 20.9752 8.50017 20.561 8.50017C20.1468 8.50017 19.811 8.83596 19.811 9.25017H21.311ZM17.6965 5.79333L17.3597 6.46345L17.3611 6.46415L17.6965 5.79333ZM1.75 9.25017C1.75 8.83596 1.41421 8.50017 1 8.50017C0.585786 8.50017 0.25 8.83596 0.25 9.25017H1.75ZM0.25 14.221C0.25 14.6352 0.585786 14.971 1 14.971C1.41421 14.971 1.75 14.6352 1.75 14.221H0.25ZM1.75463 14.221C1.75463 13.8068 1.41884 13.471 1.00463 13.471C0.590414 13.471 0.254628 13.8068 0.254628 14.221H1.75463ZM11.5282 14.137C11.5282 13.7227 11.1924 13.387 10.7782 13.387C10.364 13.387 10.0282 13.7227 10.0282 14.137H11.5282ZM10.0282 19.1078C10.0282 19.522 10.364 19.8578 10.7782 19.8578C11.1924 19.8578 11.5282 19.522 11.5282 19.1078H10.0282ZM8.91813 8.50017C8.50392 8.50017 8.16813 8.83596 8.16813 9.25017C8.16813 9.66439 8.50392 10.0002 8.91813 10.0002V8.50017ZM23 10.0002C23.4142 10.0002 23.75 9.66439 23.75 9.25017C23.75 8.83596 23.4142 8.50017 23 8.50017V10.0002ZM9.05233 9.75459L9.24262 10.4801L9.24558 10.4793L9.05233 9.75459ZM9.42254 9.11135L10.148 8.92106L10.1472 8.9181L9.42254 9.11135ZM8.7793 8.74113L8.58902 8.01567L8.58606 8.01646L8.7793 8.74113ZM5.5 13.1001C5.5 12.6859 5.16421 12.3501 4.75 12.3501C4.33579 12.3501 4 12.6859 4 13.1001H5.5ZM4 18.071C4 18.4852 4.33579 18.821 4.75 18.821C5.16421 18.821 5.5 18.4852 5.5 18.071H4ZM17.56 13.1001C17.56 12.6859 17.2242 12.3501 16.81 12.3501C16.3958 12.3501 16.06 12.6859 16.06 13.1001H17.56ZM16.06 18.071C16.06 18.4852 16.3958 18.821 16.81 18.821C17.2242 18.821 17.56 18.4852 17.56 18.071H16.06ZM17.9604 6.79495C18.3138 7.01093 18.7754 6.8995 18.9914 6.54606C19.2074 6.19261 19.096 5.731 18.7425 5.51501L17.9604 6.79495ZM19.811 9.25017C19.811 10.1639 19.0497 11.1919 17.3611 12.0362L18.0319 13.3778C19.8788 12.4544 21.311 11.039 21.311 9.25017H19.811ZM17.3611 12.0362C15.7183 12.8576 13.39 13.387 10.7828 13.387V14.887C13.5715 14.887 16.1392 14.3242 18.0319 13.3778L17.3611 12.0362ZM10.7828 13.387C8.17565 13.387 5.84739 12.8576 4.20454 12.0362L3.53372 13.3778C5.42639 14.3242 7.99416 14.887 10.7828 14.887V13.387ZM4.20454 12.0362C2.51595 11.1919 1.75463 10.1639 1.75463 9.25017H0.254628C0.254628 11.039 1.68681 12.4544 3.53372 13.3778L4.20454 12.0362ZM1.75463 9.25017C1.75463 8.33641 2.51595 7.30845 4.20454 6.46415L3.53372 5.12251C1.68681 6.04597 0.254628 7.46139 0.254628 9.25017H1.75463ZM4.20454 6.46415C5.84817 5.64234 8.17672 5.10876 10.7828 5.10876V3.60876C7.99309 3.60876 5.42561 4.17657 3.53372 5.12251L4.20454 6.46415ZM10.7828 5.10876C13.3901 5.10876 15.7177 5.63814 17.3597 6.46345L18.0333 5.12321C16.1398 4.17151 13.5714 3.60876 10.7828 3.60876V5.10876ZM19.811 9.25017V14.221H21.311V9.25017H19.811ZM0.25 9.25017V14.221H1.75V9.25017H0.25ZM19.811 14.221C19.811 15.1348 19.0497 16.1628 17.3611 17.0071L18.0319 18.3487C19.8788 17.4252 21.311 16.0098 21.311 14.221H19.811ZM17.3611 17.0071C15.7183 17.8285 13.39 18.3578 10.7828 18.3578V19.8578C13.5715 19.8578 16.1392 19.295 18.0319 18.3487L17.3611 17.0071ZM10.7828 18.3578C8.17565 18.3578 5.84739 17.8285 4.20454 17.0071L3.53372 18.3487C5.42639 19.295 7.99416 19.8578 10.7828 19.8578V18.3578ZM4.20454 17.0071C2.51595 16.1628 1.75463 15.1348 1.75463 14.221H0.254628C0.254628 16.0098 1.68681 17.4252 3.53372 18.3487L4.20454 17.0071ZM10.0282 14.137V19.1078H11.5282V14.137H10.0282ZM8.91813 10.0002C11.0839 10.0002 13.5215 10.0002 15.9591 10.0002C18.3967 10.0002 20.8343 10.0002 23 10.0002V8.50017C20.8343 8.50017 18.3967 8.50017 15.9591 8.50017C13.5215 8.50017 11.0839 8.50017 8.91813 8.50017V10.0002ZM9.24558 10.4793C9.92696 10.2976 10.3256 9.59818 10.148 8.92106L8.69708 9.30163C8.66756 9.18908 8.73302 9.06353 8.85909 9.02991L9.24558 10.4793ZM10.1472 8.9181C9.96552 8.23672 9.26614 7.83807 8.58902 8.01567L8.96959 9.46659C8.85704 9.49611 8.73148 9.43066 8.69787 9.30459L10.1472 8.9181ZM8.58606 8.01646C7.90468 8.19816 7.50602 8.89754 7.68363 9.57466L9.13455 9.19409C9.16407 9.30664 9.09861 9.43219 8.97255 9.46581L8.58606 8.01646ZM7.68363 9.57466C7.86605 10.2701 8.57231 10.6559 9.24262 10.48L8.86205 9.02913C8.96778 9.00139 9.10021 9.06319 9.13455 9.19409L7.68363 9.57466ZM4 13.1001V18.071H5.5V13.1001H4ZM16.06 13.1001V18.071H17.56V13.1001H16.06ZM17.3611 6.46415C17.5734 6.57029 17.7736 6.68079 17.9604 6.79495L18.7425 5.51501C18.5166 5.37694 18.279 5.24604 18.0319 5.12251L17.3611 6.46415Z"
-      fill="currentColor"
-    />
-  </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="Snare">
+  <path 
+  d="M14.6667 7.09655V11.3847C14.6667 12.6119 11.682 13.6068 8.00014 13.6068C4.31832 13.6068 1.33362 12.6119 1.33362 11.3847V7.09655M14.4929 2.07935L9.6847 4.92864M9.6847 4.92864L6.05555 7.07923M9.6847 4.92864C9.14661 4.88194 8.58208 4.85708 8.00014 4.85708C4.31832 4.85708 1.33362 5.85198 1.33362 7.07925C1.33362 8.30653 4.31832 9.30143 8.00014 9.30143C11.682 9.30143 14.6667 8.30653 14.6667 7.07925C14.6667 6.45957 13.9057 5.89914 12.6783 5.4961" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
+</svg>
 )
 
 SnareIcon.displayName = 'SnareIcon'

package/src/icons/StringsIcon.jsx

@@ -4,22 +4,11 @@ export const StringsIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 17 16"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <g>
-      <path
-        d="M7.39153 4.17461C7.56357 5.40362 9.99918 5.73374 10.732 4.00041C11.3987 2.48864 10.132 0.33374 7.73596 0.709194C5.54171 1.02654 4.54794 3.50424 5.33203 5.33377C5.83203 6.50042 6.55153 7.386 7.36952 9.01859C8.02847 10.3338 8.02847 12.367 8.02847 12.367L8.50909 12.4824C9.81528 12.7962 10.8055 13.8634 11.0207 15.1894L11.0442 15.3337H14.9987C14.6654 11.6671 13.6654 9.66707 9.33203 6.50042C8.4067 5.82422 7.62246 5.00666 7.44544 4.41706C7.41961 4.33103 7.40196 4.25018 7.39153 4.17461ZM7.39153 4.17461C7.24806 3.13477 8.46886 3.06401 8.46886 3.3682M2.33203 6.50044C2.33203 6.77658 2.55589 7.00044 2.83203 7.00044C3.10817 7.00044 3.33203 6.77658 3.33203 6.50044C3.33203 6.22429 3.10817 6.00044 2.83203 6.00044C2.55589 6.00044 2.33203 6.22429 2.33203 6.50044ZM4.33203 10.5004C4.33203 10.7766 4.55589 11.0004 4.83203 11.0004C5.10817 11.0004 5.33203 10.7766 5.33203 10.5004C5.33203 10.2243 5.10817 10.0004 4.83203 10.0004C4.55589 10.0004 4.33203 10.2243 4.33203 10.5004Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-      />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none" aria-label="Strings" className={className} {...props}>
+  <path d="M13.237 13.9718C13.2732 14.3012 13.5696 14.5388 13.899 14.5026C14.2284 14.4664 14.466 14.17 14.4298 13.8406L13.8334 13.9062L13.237 13.9718ZM8.83779 7.47423L9.1521 6.96314V6.96314L8.83779 7.47423ZM9.55591 5.09091L8.9935 4.88187V4.88187L9.55591 5.09091ZM6.90263 1.875L6.90268 1.275L6.90263 1.875ZM3.94776 5.75475L4.53923 5.65392L3.94776 5.75475ZM5.65326 9.0488L6.18789 8.77646L6.18789 8.77646L5.65326 9.0488ZM6.1141 11.6353L5.51777 11.5691C5.48416 11.8717 5.68252 12.1515 5.97919 12.2199L6.1141 11.6353ZM7.1195 5.3426C7.42847 5.22283 7.58184 4.87527 7.46207 4.5663C7.34229 4.25733 6.99473 4.10396 6.68576 4.22373L6.90263 4.78317L7.1195 5.3426ZM8.02356 14.0436C8.09947 14.3662 8.4225 14.5661 8.74506 14.4902C9.06761 14.4143 9.26756 14.0913 9.19165 13.7687L8.60761 13.9062L8.02356 14.0436ZM7.35126 5.02554C7.39134 4.6966 7.15717 4.39746 6.82823 4.35739C6.49929 4.31731 6.20015 4.55148 6.16007 4.88042L6.75567 4.95298L7.35126 5.02554ZM13.8334 13.9062L14.4298 13.8406C14.1525 11.3193 12.5067 9.02614 9.1521 6.96314L8.83779 7.47423L8.52348 7.98531C11.697 9.93697 13.0147 11.9513 13.237 13.9718L13.8334 13.9062ZM9.55591 5.09091L10.1183 5.29996C10.8569 3.31297 9.24466 1.2752 6.90268 1.275L6.90263 1.875L6.90258 2.475C8.5768 2.47514 9.3843 3.83048 8.9935 4.88187L9.55591 5.09091ZM6.90263 1.875L6.90268 1.275C6.01786 1.27493 5.00895 1.65573 4.27899 2.42269C3.5294 3.2103 3.10366 4.37356 3.35629 5.85557L3.94776 5.75475L4.53923 5.65392C4.34706 4.52664 4.67238 3.74997 5.14824 3.24999C5.64373 2.72938 6.33466 2.47495 6.90258 2.475L6.90263 1.875ZM3.94776 5.75475L3.35629 5.85557C3.48007 6.58169 3.78565 7.15158 4.11575 7.67919C4.45662 8.224 4.79541 8.68665 5.11863 9.32115L5.65326 9.0488L6.18789 8.77646C5.83318 8.08015 5.42338 7.50674 5.13305 7.04271C4.83196 6.56148 4.62375 6.14974 4.53923 5.65392L3.94776 5.75475ZM5.65326 9.0488L5.11863 9.32115C5.37715 9.82865 5.48086 10.3896 5.5158 10.8406C5.53304 11.063 5.53299 11.251 5.52878 11.3814C5.52668 11.4464 5.52357 11.4966 5.52116 11.5289C5.51995 11.5451 5.51892 11.5568 5.51828 11.5636C5.51796 11.567 5.51774 11.5692 5.51765 11.5701C5.5176 11.5706 5.51759 11.5707 5.5176 11.5706C5.51761 11.5705 5.51763 11.5703 5.51766 11.5701C5.51767 11.5699 5.51769 11.5698 5.51771 11.5696C5.51772 11.5695 5.51773 11.5694 5.51774 11.5694C5.51775 11.5692 5.51777 11.5691 6.1141 11.6353C6.71044 11.7015 6.71045 11.7014 6.71047 11.7012C6.71048 11.7011 6.7105 11.701 6.71051 11.7008C6.71054 11.7006 6.71057 11.7003 6.7106 11.7C6.71066 11.6994 6.71074 11.6988 6.71082 11.698C6.71098 11.6965 6.71118 11.6946 6.7114 11.6924C6.71185 11.6881 6.71241 11.6824 6.71307 11.6754C6.71438 11.6614 6.71604 11.6422 6.71783 11.6183C6.7214 11.5704 6.72547 11.5033 6.72816 11.42C6.73352 11.2539 6.73341 11.0213 6.71222 10.7478C6.6703 10.207 6.54357 9.47469 6.18789 8.77646L5.65326 9.0488ZM8.83779 7.47423L9.1521 6.96314C8.24448 6.40496 7.70096 5.84518 7.45117 5.44715C7.32137 5.24031 7.30227 5.12754 7.30165 5.10848C7.30156 5.10571 7.30359 5.15027 7.26817 5.21167C7.22864 5.28018 7.16894 5.32344 7.1195 5.3426L6.90263 4.78317L6.68576 4.22373C6.49827 4.29642 6.33549 4.427 6.22876 4.61197C6.12614 4.78983 6.09687 4.97999 6.10228 5.14727C6.11266 5.46831 6.25178 5.79348 6.43474 6.08502C6.81048 6.68373 7.51065 7.36244 8.52348 7.98531L8.83779 7.47423ZM6.1141 11.6353C5.97919 12.2199 5.97897 12.2199 5.97877 12.2198C5.97871 12.2198 5.97851 12.2198 5.97839 12.2197C5.97816 12.2197 5.97795 12.2196 5.97778 12.2196C5.97743 12.2195 5.97721 12.2195 5.9771 12.2194C5.97688 12.2194 5.97715 12.2195 5.97787 12.2196C5.97932 12.22 5.98262 12.2208 5.98765 12.2221C5.99773 12.2247 6.01469 12.2292 6.03768 12.2358C6.08375 12.2491 6.15342 12.2707 6.2398 12.302C6.41376 12.3651 6.64886 12.4653 6.89311 12.6124C7.38748 12.9101 7.8635 13.3635 8.02356 14.0436L8.60761 13.9062L9.19165 13.7687C8.92978 12.656 8.15905 11.974 7.51215 11.5844C7.18577 11.3879 6.8766 11.2565 6.64896 11.174C6.53453 11.1325 6.43907 11.1027 6.3702 11.0828C6.33572 11.0729 6.30777 11.0654 6.28729 11.0601C6.27705 11.0575 6.26866 11.0554 6.26225 11.0538C6.25904 11.053 6.25632 11.0524 6.25411 11.0519C6.25301 11.0516 6.25203 11.0514 6.25118 11.0512C6.25076 11.0511 6.25036 11.051 6.25 11.0509C6.24982 11.0508 6.24958 11.0508 6.24949 11.0508C6.24925 11.0507 6.24902 11.0507 6.1141 11.6353ZM6.75567 4.95298L6.16007 4.88042C6.09237 5.43616 6.26326 5.92184 6.61718 6.26529C6.95452 6.59265 7.40795 6.74367 7.8439 6.76559C8.70487 6.80886 9.72743 6.35159 10.1183 5.29996L9.55591 5.09091L8.9935 4.88187C8.81971 5.34942 8.3488 5.58945 7.90414 5.5671C7.68728 5.5562 7.53485 5.48367 7.45288 5.40412C7.38748 5.34066 7.32562 5.23607 7.35126 5.02554L6.75567 4.95298Z" 
+  fill="currentColor" />
+  <path d="M2.1615 6.41675C2.1615 6.96903 1.71378 7.41675 1.1615 7.41675C0.609214 7.41675 0.161499 6.96903 0.161499 6.41675C0.161499 5.86446 0.609214 5.41675 1.1615 5.41675C1.71378 5.41675 2.1615 5.86446 2.1615 6.41675Z" fill="currentColor"/>
+  <path d="M4.20837 10.6667C4.20837 11.219 3.76066 11.6667 3.20837 11.6667C2.65609 11.6667 2.20837 11.219 2.20837 10.6667C2.20837 10.1145 2.65609 9.66675 3.20837 9.66675C3.76066 9.66675 4.20837 10.1145 4.20837 10.6667Z" fill="currentColor"/>
 </svg>
 )
 

package/src/icons/TomsIcon.jsx

@@ -1,21 +1,9 @@
 export const TomsIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 25"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M12 20.5775V22.625M7.5393 10.0969V13.9775C7.5393 14.1359 7.49796 14.2915 7.41938 14.429L4.04879 20.5775C3.89163 20.8525 3.80896 21.1641 3.80896 21.4808V23.5M16.4606 10.0969L16.4606 13.9775C16.4606 14.1359 16.5019 14.2915 16.5805 14.429L19.9511 20.5775C20.1083 20.8525 20.1909 21.1638 20.1909 21.4806L20.1909 23.5M20.191 2.82022V14.9017C20.191 15.907 16.5237 17.177 12 17.177C7.4762 17.177 3.80896 15.907 3.80896 14.9017V2.82022M20.191 2.82022C20.191 3.82551 16.5237 4.64045 12 4.64045C7.4762 4.64045 3.80896 3.82551 3.80896 2.82022M20.191 2.82022C20.191 1.81494 16.5237 1 12 1C7.4762 1 3.80896 1.81494 3.80896 2.82022"
-      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="Toms">
+  <path 
+  d="M2.66663 4.29167V10.5833C2.66663 12.0101 5.05444 13.1667 7.99996 13.1667C10.9455 13.1667 13.3333 12.0101 13.3333 10.5833V4.29167M5.33329 9.08333V10.5963C5.33329 10.8595 5.25538 11.1169 5.10936 11.3359L2.66663 15M10.6666 9.08333V10.5963C10.6666 10.8595 10.7445 11.1169 10.8906 11.3359L13.3333 15M13.3333 4.08333C13.3333 5.51007 10.9455 6.66667 7.99996 6.66667C5.05444 6.66667 2.66663 5.51007 2.66663 4.08333C2.66663 2.6566 5.05444 1.5 7.99996 1.5C10.9455 1.5 13.3333 2.6566 13.3333 4.08333Z" stroke="currentColor"
+   strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 TomsIcon.displayName = 'TomsIcon'

package/src/icons/VocalsBackgroundIcon.jsx

@@ -4,23 +4,10 @@ export const VocalsBackgroundIcon = ({
   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="M8.375 23.5V19.625M14.75 13V13.125C14.75 16.6458 11.8958 19.5 8.375 19.5C4.85418 19.5 2 16.6458 2 13.125V13M15.375 23.5V19.625M21.75 13V13.125C21.75 16.6458 18.8958 19.5 15.375 19.5M14 1.33295C14.4119 1.12017 14.8794 1 15.375 1C17.0319 1 18.375 2.34315 18.375 4V13C18.375 13.896 17.9822 14.7003 17.3594 15.25M8.375 16C6.71815 16 5.375 14.6569 5.375 13V4C5.375 2.34315 6.71815 1 8.375 1C10.0319 1 11.375 2.34315 11.375 4V13C11.375 14.6569 10.0319 16 8.375 16Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none" aria-label="Vocals Background" className={className} {...props}>
+    <path d="M5.93333 13.3334C5.93333 13.002 5.6647 12.7334 5.33333 12.7334C5.00196 12.7334 4.73333 13.002 4.73333 13.3334H5.33333H5.93333ZM4.73333 15.3334C4.73333 15.6648 5.00196 15.9334 5.33333 15.9334C5.6647 15.9334 5.93333 15.6648 5.93333 15.3334H5.33333H4.73333ZM10.6667 13.0001V12.4001C10.3353 12.4001 10.0667 12.6687 10.0667 13.0001H10.6667ZM10.0667 15.3334C10.0667 15.6648 10.3353 15.9334 10.6667 15.9334C10.998 15.9334 11.2667 15.6648 11.2667 15.3334H10.6667H10.0667ZM10.6667 1.06675C10.3353 1.06675 10.0667 1.33538 10.0667 1.66675C10.0667 1.99812 10.3353 2.26675 10.6667 2.26675V1.66675V1.06675ZM10.6667 8.73342C10.3353 8.73342 10.0667 9.00204 10.0667 9.33342C10.0667 9.66479 10.3353 9.93342 10.6667 9.93342V9.33342V8.73342ZM3.33333 1.66675V2.26675H7.33333V1.66675V1.06675H3.33333V1.66675ZM8.66667 3.00008H8.06667V11.0001H8.66667H9.26667V3.00008H8.66667ZM6.66667 13.0001V12.4001H4V13.0001V13.6001H6.66667V13.0001ZM2 11.0001H2.6V3.00008H2H1.4V11.0001H2ZM4 13.0001V12.4001C3.2268 12.4001 2.6 11.7733 2.6 11.0001H2H1.4C1.4 12.436 2.56406 13.6001 4 13.6001V13.0001ZM8.66667 11.0001H8.06667C8.06667 11.7733 7.43987 12.4001 6.66667 12.4001V13.0001V13.6001C8.10261 13.6001 9.26667 12.436 9.26667 11.0001H8.66667ZM7.33333 1.66675V2.26675C7.73834 2.26675 8.06667 2.59507 8.06667 3.00008H8.66667H9.26667C9.26667 1.93233 8.40108 1.06675 7.33333 1.06675V1.66675ZM3.33333 1.66675V1.06675C2.26558 1.06675 1.4 1.93233 1.4 3.00008H2H2.6C2.6 2.59507 2.92832 2.26675 3.33333 2.26675V1.66675ZM2 9.33342V9.93342H8.66667V9.33342V8.73342H2V9.33342ZM5.33333 13.3334H4.73333V15.3334H5.33333H5.93333V13.3334H5.33333ZM14 3.00008H13.4V9.33342H14H14.6V3.00008H14ZM14 9.33342H13.4V11.0001H14H14.6V9.33342H14ZM14 11.0001H13.4C13.4 11.7733 12.7732 12.4001 12 12.4001V13.0001V13.6001C13.4359 13.6001 14.6 12.436 14.6 11.0001H14ZM12.6667 1.66675V2.26675C13.0717 2.26675 13.4 2.59507 13.4 3.00008H14H14.6C14.6 1.93233 13.7344 1.06675 12.6667 1.06675V1.66675ZM10.6667 13.0001H10.0667V15.3334H10.6667H11.2667V13.0001H10.6667ZM10.6667 1.66675V2.26675H12.6667V1.66675V1.06675H10.6667V1.66675ZM10.6667 9.33342V9.93342H14V9.33342V8.73342H10.6667V9.33342ZM12 13.0001V12.4001H10.6667V13.0001V13.6001H12V13.0001Z" 
+    fill="currentColor" 
+   />
 </svg>
 )
 

package/src/icons/VocalsIcon.jsx

@@ -1,21 +1,8 @@
 export const VocalsIcon = ({ width, height, 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.58301 15.667V13.0837M9.83301 8.66699V8.75033C9.83301 11.0975 7.93022 13.0003 5.58301 13.0003C3.2358 13.0003 1.33301 11.0975 1.33301 8.75033V8.66699M10.2497 15.667V13.0837M14.4997 8.66699V8.75033C14.4997 11.0975 12.5969 13.0003 10.2497 13.0003M9.33301 0.888962C9.60761 0.747104 9.91929 0.666992 10.2497 0.666992C11.3542 0.666992 12.2497 1.56242 12.2497 2.66699V8.66699C12.2497 9.26434 11.9878 9.80052 11.5726 10.167M5.58301 10.667C4.47844 10.667 3.58301 9.77156 3.58301 8.66699V2.66699C3.58301 1.56242 4.47844 0.666992 5.58301 0.666992C6.68758 0.666992 7.58301 1.56242 7.58301 2.66699V8.66699C7.58301 9.77156 6.68758 10.667 5.58301 10.667Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-      />
-    </g>
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none" {...props} aria-label="Vocals" className={className}>
+    <path d="M8.59996 13.3333C8.59996 13.0019 8.33133 12.7333 7.99996 12.7333C7.66859 12.7333 7.39996 13.0019 7.39996 13.3333H7.99996H8.59996ZM7.39996 15.3333C7.39996 15.6647 7.66859 15.9333 7.99996 15.9333C8.33133 15.9333 8.59996 15.6647 8.59996 15.3333H7.99996H7.39996ZM5.99996 1.66663V2.26663H9.99996V1.66663V1.06663H5.99996V1.66663ZM11.3333 2.99996H10.7333V11H11.3333H11.9333V2.99996H11.3333ZM9.33329 13V12.4H6.66663V13V13.6H9.33329V13ZM4.66663 11H5.26663V2.99996H4.66663H4.06663V11H4.66663ZM6.66663 13V12.4C5.89343 12.4 5.26663 11.7732 5.26663 11H4.66663H4.06663C4.06663 12.4359 5.23069 13.6 6.66663 13.6V13ZM11.3333 11H10.7333C10.7333 11.7732 10.1065 12.4 9.33329 12.4V13V13.6C10.7692 13.6 11.9333 12.4359 11.9333 11H11.3333ZM9.99996 1.66663V2.26663C10.405 2.26663 10.7333 2.59495 10.7333 2.99996H11.3333H11.9333C11.9333 1.93221 11.0677 1.06663 9.99996 1.06663V1.66663ZM5.99996 1.66663V1.06663C4.93221 1.06663 4.06663 1.93221 4.06663 2.99996H4.66663H5.26663C5.26663 2.59495 5.59495 2.26663 5.99996 2.26663V1.66663ZM4.66663 9.33329V9.93329H11.3333V9.33329V8.73329H4.66663V9.33329ZM7.99996 13.3333H7.39996V15.3333H7.99996H8.59996V13.3333H7.99996Z"
+     fill="currentColor"/>
+</svg>
 )
 
 VocalsIcon.displayName = 'VocalsIcon'

package/src/icons/WoodwindBrassIcon.jsx

@@ -4,20 +4,11 @@ export const WoodwindBrassIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M13.608 1L14.1384 0.46967C13.8579 0.1892 13.4075 0.175605 13.1107 0.438647C12.8138 0.701688 12.773 1.15041 13.0177 1.46261L13.608 1ZM23.1398 10.5318L22.6772 11.1221C22.9894 11.3668 23.4381 11.3261 23.7012 11.0292C23.9642 10.7323 23.9506 10.2819 23.6702 10.0015L23.1398 10.5318ZM7.10761 17.0352L6.57728 16.5049L7.10761 17.0352ZM1.96228 19.5097C1.66939 19.2168 1.19452 19.2168 0.901624 19.5097C0.608731 19.8026 0.608731 20.2774 0.901624 20.5703L1.96228 19.5097ZM3.57251 23.2412C3.86541 23.5341 4.34028 23.5341 4.63317 23.2412C4.92607 22.9483 4.92607 22.4734 4.63317 22.1806L3.57251 23.2412ZM8.58038 9.66079C8.28749 9.95369 8.28748 10.4286 8.58038 10.7215C8.87327 11.0143 9.34814 11.0143 9.64104 10.7215L8.58038 9.66079ZM10.1418 10.2207C10.4347 9.92777 10.4347 9.45289 10.1418 9.16C9.84894 8.86711 9.37406 8.86711 9.08117 9.16L10.1418 10.2207ZM5.90949 12.3316C5.61659 12.6245 5.61659 13.0994 5.90949 13.3923C6.20238 13.6852 6.67725 13.6852 6.97015 13.3923L5.90949 12.3316ZM7.47094 12.8915C7.76383 12.5986 7.76383 12.1237 7.47094 11.8308C7.17804 11.5379 6.70317 11.5379 6.41028 11.8308L7.47094 12.8915ZM3.23859 15.0026C2.9457 15.2955 2.9457 15.7703 3.23859 16.0632C3.53148 16.3561 4.00636 16.3561 4.29925 16.0632L3.23859 15.0026ZM4.80004 15.5624C5.09294 15.2696 5.09294 14.7947 4.80004 14.5018C4.50715 14.2089 4.03228 14.2089 3.73938 14.5018L4.80004 15.5624ZM16.4547 13.7272C16.3041 13.3414 15.8692 13.1507 15.4833 13.3014C15.0975 13.452 14.9068 13.887 15.0575 14.2728L16.4547 13.7272ZM13.0777 1.53033L22.6095 11.0621L23.6702 10.0015L14.1384 0.46967L13.0777 1.53033ZM23.6024 9.94147C23.0625 9.51832 22.2636 9.28214 21.4043 9.17102C20.5207 9.05677 19.475 9.06249 18.3576 9.20015C16.1255 9.47511 13.5304 10.2862 11.2804 11.8202L12.1253 13.0596C14.146 11.682 16.5046 10.9397 18.541 10.6889C19.5577 10.5636 20.475 10.5634 21.2119 10.6586C21.9731 10.7571 22.4524 10.946 22.6772 11.1221L23.6024 9.94147ZM12.3226 12.8624C13.8567 10.6122 14.667 8.01622 14.9412 5.78344C15.0785 4.66562 15.0838 3.61965 14.9692 2.73581C14.8578 1.87626 14.6215 1.0773 14.1984 0.537391L13.0177 1.46261C13.1939 1.68748 13.383 2.16707 13.4817 2.9286C13.5772 3.66584 13.5773 4.5835 13.4524 5.60062C13.2022 7.63773 12.4607 9.99695 11.0832 12.0174L12.3226 12.8624ZM14.59 16.5049L10.5836 20.5112L11.6443 21.5719L15.6506 17.5656L14.59 16.5049ZM7.63794 17.5656L11.6443 13.5592L10.5836 12.4986L6.57728 16.5049L7.63794 17.5656ZM7.63794 20.5112C6.82452 19.6978 6.82452 18.379 7.63794 17.5656L6.57728 16.5049C5.17807 17.9041 5.17807 20.1727 6.57728 21.5719L7.63794 20.5112ZM10.5836 20.5112C9.77019 21.3247 8.45137 21.3247 7.63794 20.5112L6.57728 21.5719C7.9765 22.9711 10.2451 22.9711 11.6443 21.5719L10.5836 20.5112ZM11.1725 11.9096L2.23705 20.8451L3.29771 21.9057L12.2332 12.9702L11.1725 11.9096ZM0.901624 20.5703L3.57251 23.2412L4.63317 22.1806L1.96228 19.5097L0.901624 20.5703ZM9.64104 10.7215L10.1418 10.2207L9.08117 9.16L8.58038 9.66079L9.64104 10.7215ZM6.97015 13.3923L7.47094 12.8915L6.41028 11.8308L5.90949 12.3316L6.97015 13.3923ZM4.29925 16.0632L4.80004 15.5624L3.73938 14.5018L3.23859 15.0026L4.29925 16.0632ZM15.0575 14.2728C15.3498 15.0214 15.1925 15.9024 14.59 16.5049L15.6506 17.5656C16.6893 16.5269 16.9558 15.0105 16.4547 13.7272L15.0575 14.2728Z"
-      fill="currentColor"
-    />
-  </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="WoodwindBrass">
+  <path 
+  d="M7.6037 8.07894L4.69972 10.9829C4.02154 11.6611 4.02154 12.7606 4.69972 13.4388C5.3779 14.117 6.47744 14.117 7.15562 13.4388L9.68637 10.9081C10.0543 10.5401 10.261 10.0411 10.261 9.5208M5.54544 6.46048L5.87931 6.12662M3.76485 8.24103L4.09871 7.90717M1.98425 10.0217L2.31811 9.68781M7.13215 8.5502L7.83829 7.26925C8.77908 5.56263 9.12778 3.59235 8.82985 1.6665L14.0158 6.8525C12.09 6.55457 10.1197 6.90327 8.4131 7.84406L7.13215 8.5502Z" 
+  stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 WoodwindBrassIcon.displayName = 'WoodwindBrassIcon'

package/src/icons.jsx

@@ -452,3 +452,5 @@ export { AutomationIcon } from './icons/AutomationIcon'
 export { Record1Icon } from './icons/Record1Icon'
 export { StemsIcon } from './icons/StemsIcon'
 export { SampleIcon } from './icons/SampleIcon'
+export { PercussionIcon } from './icons/PercussionIcon'
+export { HiFi1Icon } from './icons/HiFi1Icon'