@moises.ai/design-system 4.19.3 → 4.19.5

package/src/components/Tooltip/Tooltip.module.css

@@ -74,15 +74,15 @@
 /* White variant */
 .TooltipContent--white {
   border-radius: 3px;
-  background: #EDEEF0;
-  color: #111113;
+  background: var(--neutral-12);
+  color: var(--neutral-1);
 }
 
 /* Gray variant */
 .TooltipContent--gray {
   border-radius: 3px;
-  background: #272A2D;
-  color: rgba(252, 253, 255, 0.94);
+  background: var(--neutral-4);
+  color: var(--neutral-alpha-12);
 }
 
 /* Diagram variant (matches the "tooltip diagram" surface from Figma) */
@@ -93,16 +93,16 @@
   max-width: none;
   padding: var(--spacing-1, 4px) var(--spacing-2, 8px) var(--spacing-2, 8px);
   border-radius: var(--radius-4, 8px);
-  border: 1px solid var(--neutral-alpha-3, rgba(221, 234, 248, 0.08));
-  background: var(--panel-solid, #18191b);
-  color: var(--neutral-alpha-12, rgba(252, 253, 255, 0.94));
+  border: 1px solid var(--neutral-alpha-3);
+  background: var(--neutral-4);
+  color: var(--neutral-alpha-12);
   box-shadow:
-    0 12px 32px -16px rgba(0, 0, 0, 0.3),
-    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+    0 12px 32px -16px var(--neutral-1),
+    0 12px 60px 0 var(--neutral-alpha-1);
 }
 
 .TooltipDiagram .TooltipArrow {
-  fill: var(--panel-solid, #18191b);
+  fill: var(--neutral-4);
 }
 
 .TooltipDiagramHeader {
@@ -114,7 +114,7 @@
 }
 
 .TooltipDiagramTitle {
-  color: var(--neutral-alpha-9, rgba(223, 235, 253, 0.43));
+  color: var(--neutral-alpha-9);
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
@@ -145,20 +145,20 @@
 
 /* White shortcut */
 .TooltipShortcut--white {
-  color: #5A6169;
+  color: var(--neutral-8);
 }
 
 /* Gray shortcut */
 .TooltipShortcut--gray {
-  color: rgba(229, 237, 253, 0.48);
+  color: var(--neutral-alpha-10);
 }
 
 .TooltipArrow {
-  fill: #272A2D;
+  fill: var(--neutral-4);
 }
 
 .TooltipContent--white .TooltipArrow {
-  fill: #EDEEF0;
+  fill: var(--neutral-12);
 }
 
 .TooltipContent {

package/src/components/TrackHeader/TrackHeader.module.css

@@ -13,7 +13,7 @@
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
-  background: linear-gradient(90deg, #fff 95%, #1d1d1d 100%);
+  background: linear-gradient(90deg, var(--neutral-12) 95%, var(--neutral-3) 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -189,7 +189,7 @@ background-color: rgba(17, 17, 19);
         background: linear-gradient(
           90deg,
           var(--neutral-alpha-11) 95%,
-          #1d1d1d 100%
+          var(--neutral-3) 100%
         );
         background-clip: text;
         text-align: left;

package/src/components/TrackHeader/TrackHeader.stories.jsx

@@ -83,7 +83,7 @@ import { TrackHeader } from '@moises.ai/design-system'
   },
   decorators: [
     (Story) => (
-      <div style={{ width: '400px', background: '#1d1d1d' }}>
+      <div style={{ width: '400px', background: 'var(--neutral-2)' }}>
         <Story />
       </div>
     ),

package/src/components/VoiceConversionForm/Waveform/Waveform.jsx

@@ -21,7 +21,7 @@ export function Waveform({
   infos,
   onlyButton,
   hover,
-  waveColor = '#3f3f3f',
+  waveColor = 'var(--neutral-7)',
   progressColor = 'white',
   wavegroup,
   autoRepeat = false,

package/src/icons/AlertIcon.jsx

@@ -1,9 +1,8 @@
 export const AlertIcon = ({ 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 8.00005V13.5M12 17H12.01M10.29 3.86005L1.82002 18.0001C1.64539 18.3025 1.55299 18.6454 1.55201 18.9946C1.55103 19.3438 1.64151 19.6872 1.81445 19.9906C1.98738 20.294 2.23675 20.5468 2.53773 20.7239C2.83871 20.901 3.18082 20.9962 3.53002 21.0001H20.47C20.8192 20.9962 21.1613 20.901 21.4623 20.7239C21.7633 20.5468 22.0127 20.294 22.1856 19.9906C22.3585 19.6872 22.449 19.3438 22.448 18.9946C22.4471 18.6454 22.3547 18.3025 22.18 18.0001L13.71 3.86005C13.5318 3.56616 13.2807 3.32317 12.9812 3.15454C12.6817 2.9859 12.3438 2.89731 12 2.89731C11.6563 2.89731 11.3184 2.9859 11.0188 3.15454C10.7193 3.32317 10.4683 3.56616 10.29 3.86005Z"
-      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="Alert Icon">
+  <path d="M12 12.5L12 8.5M9.78538 4.22783L2.91711 17.34C2.04518 19.0046 3.25257 21 5.13169 21H18.8682C20.7473 21 21.9547 19.0046 21.0828 17.34L14.2145 4.22783C13.2787 2.44119 10.7212 2.44119 9.78538 4.22783Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+  <circle cx="1.25" cy="1.25" r="1.25" transform="matrix(1 0 0 -1 10.75 17.5)" fill="currentColor"/>
+</svg>
 )
 
 AlertIcon.displayName = 'AlertIcon'

package/src/icons/ArrowDownIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowDownIcon = ({
   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 13L12 19L18 13M12 5V18"
-      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="Arrow Down Icon">
+  <path d="M19 13.1429L12 20L5 13.1429M12 18.8571V4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowDownIcon.displayName = 'ArrowDownIcon'

package/src/icons/ArrowLeftIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowLeftIcon = ({
   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 18L5 12L11 6M19 12L6 12"
-      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="Arrow Left Icon">
+  <path d="M10.8571 19L4 12L10.8571 5M5.14286 12L20 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowLeftIcon.displayName = 'ArrowLeftIcon'

package/src/icons/ArrowUpIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowUpIcon = ({
   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="M18 11L12 5L6 11M12 6V19"
-      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="Arrow Up Icon">
+  <path d="M19 10.8571L12 4L5 10.8571M12 5.14286V20" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowUpIcon.displayName = 'ArrowUpIcon'

package/src/icons/ArrowsHorizontalIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowsHorizontalIcon = ({
   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 11.25L5 7.25L9 3.25M19 7L6 7M14.99 20.75L18.99 16.75L14.99 12.75M17.99 16.75L4.98999 16.75"
-      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="Arrows Horizontal Icon">
+  <path d="M7.42857 11L4 7.5L7.5 4M4.85714 7.5L19 7.5M16.5714 20L20 16.5L16.5 13M19.1429 16.5L5 16.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowsHorizontalIcon.displayName = 'ArrowsHorizontalIcon'

package/src/icons/ArrowsVerticalIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowsVerticalIcon = ({
   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.25 9.005L7.25 5.005L3.25 9.005M7 19.005L7 6.005M20.75 14.995L16.75 18.995L12.75 14.995M16.75 17.995L16.75 4.99499"
-      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="Arrows Vertical Icon">
+  <path d="M11 7.42857L7.5 4L4 7.5M7.5 4.85714L7.5 19M20 16.5714L16.5 20L13 16.5M16.5 19.1429L16.5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowsVerticalIcon.displayName = 'ArrowsVerticalIcon'

package/src/icons/AudioFileIcon.jsx

@@ -4,23 +4,9 @@ export const AudioFileIcon = ({
   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.67 12.8944V14.5734C13.67 15.4748 13.067 16.2649 12.1974 16.5026L11.4548 16.7056C10.4706 16.9747 9.5 16.2338 9.5 15.2135C9.5 14.5159 9.96681 13.9047 10.6397 13.7211L13.67 12.8944ZM13.67 12.8944V7M20 6.34317V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H15.6568C16.1873 2 16.696 2.21071 17.071 2.58579L19.4142 4.92895C19.7893 5.30403 20 5.81273 20 6.34317Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeMiterlimit="10"
-      strokeLinecap="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Audio File Icon">
+  <path d="M13 15V7M15.1716 2.5H7C5.34315 2.5 4 3.84315 4 5.5V18.5C4 20.1569 5.34315 21.5 7 21.5H17C18.6569 21.5 20 20.1569 20 18.5V7.32843C20 6.79799 19.7893 6.28929 19.4142 5.91421L16.5858 3.08579C16.2107 2.71071 15.702 2.5 15.1716 2.5ZM13 13L10.1161 14.03C9.44677 14.269 9 14.903 9 15.6137C9 16.7766 10.1521 17.5885 11.2473 17.1974L12.4319 16.7743C12.7726 16.6527 13 16.3299 13 15.9682V13Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 AudioFileIcon.displayName = 'AudioFileIcon'

package/src/icons/AutomationPenIcon.jsx

@@ -0,0 +1,7 @@
+export const AutomationPenIcon = ({ 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="Automation Pen Icon">
+  <path d="M5 9C6.65685 9 8 7.65686 8 6C8 4.34315 6.65685 3 5 3C3.34315 3 2 4.34315 2 6C2 7.65685 3.34315 9 5 9ZM5 9C5 14.3862 8.29634 19.0098 13 21M18.5 3C17.1193 3 16 4.11929 16 5.5L16 17.963C16 18.2087 16.0904 18.4458 16.2541 18.629L18.2762 20.8939C18.3955 21.0275 18.6045 21.0275 18.7238 20.8939L20.7459 18.629C20.9096 18.4458 21 18.2087 21 17.963L21 5.5C21 4.11929 19.8807 3 18.5 3Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+AutomationPenIcon.displayName = 'AutomationPenIcon'

package/src/icons/BanjoIcon.jsx

@@ -0,0 +1,8 @@
+export const BanjoIcon = ({ 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="Banjo Icon">
+  <path d="M10 2L10.0049 5.25M14 5.25L13.9951 2M15 16.2104H9.00488M20 13C20 17.4169 16.4194 20.9976 12.0024 20.9976C7.58551 20.9976 4.00488 17.4169 4.00488 13C4.00488 8.58307 7.58551 5.00244 12.0024 5.00244C16.4194 5.00244 20 8.58307 20 13Z"
+   stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+BanjoIcon.displayName = 'BanjoIcon'

package/src/icons/BookmarkIcon.jsx

@@ -4,21 +4,9 @@ export const BookmarkIcon = ({
   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 3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V20.1958C20 20.9812 19.136 21.46 18.47 21.0438L12.53 17.3312C12.2057 17.1286 11.7943 17.1286 11.47 17.3312L5.53 21.0438C4.86395 21.46 4 20.9812 4 20.1958V3Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Bookmark Icon">
+  <path d="M4 5.5C4 3.84315 5.34315 2.5 7 2.5H17C18.6569 2.5 20 3.84315 20 5.5V19.3915C20 20.9624 18.2721 21.9201 16.94 21.0875L13.06 18.6625C12.4115 18.2572 11.5885 18.2572 10.94 18.6625L7.06 21.0875C5.7279 21.9201 4 20.9624 4 19.3915V5.5Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
+</svg>
 )
 
 BookmarkIcon.displayName = 'BookmarkIcon'

package/src/icons/CavacoIcon.jsx

@@ -0,0 +1,9 @@
+export const CavacoIcon = ({ 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="Cavaco Icon">
+  <path d="M10.4768 13.8849H13.5232M4.5 15.9036C4.5 19.2452 7.94649 21 12.0886 21C16.2308 21 19.5 19.2452 19.5 15.9036C19.5 14.4695 18.9602 13.2098 17.4865 11.6385C16.6441 10.7403 16.3999 9.77837 17.0464 8.60949C17.4464 7.8863 17.7102 7.29774 17.7102 6.6C17.7102 4.61178 16.0984 3 14.1102 3H9.88977C7.90155 3 6.28977 4.61178 6.28977 6.6C6.28977 7.29774 6.55358 7.8863 6.9536 8.60949C7.60014 9.77837 7.35595 10.7403 6.51349 11.6385C5.03975 13.2098 4.5 14.4695 4.5 15.9036Z" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+  <circle cx="12" cy="8" r="2" fill="currentColor"/>
+</svg>
+)
+
+CavacoIcon.displayName = 'CavacoIcon'

package/src/icons/CheckIcon.jsx

@@ -1,7 +1,7 @@
 export const CheckIcon = ({ 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="M20 6L9 17L4 12" 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="Check Icon">
+  <path d="M20.5 7L10.5671 16.9393C9.98159 17.5251 9.03206 17.5256 8.44604 16.9402L3.5 12" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 CheckIcon.displayName = 'CheckIcon'

package/src/icons/ChevronLeftIcon.jsx

@@ -4,23 +4,9 @@ export const ChevronLeftIcon = ({
   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 20L9 12L15 4"
-      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="Chevron Left Icon">
+  <path d="M14 6.5L9.53348 11.8598C9.22444 12.2307 9.22444 12.7693 9.53348 13.1402L14 18.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ChevronLeftIcon.displayName = 'ChevronLeftIcon'

package/src/icons/ChevronRightIcon.jsx

@@ -4,23 +4,9 @@ export const ChevronRightIcon = ({
   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 20L15 12L9 4"
-      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="Chevron Right Icon">
+  <path d="M10 6.5L14.4665 11.8598C14.7756 12.2307 14.7756 12.7693 14.4665 13.1402L10 18.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ChevronRightIcon.displayName = 'ChevronRightIcon'

package/src/icons/ChevronUpIcon.jsx

@@ -4,23 +4,9 @@ export const ChevronUpIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M20 15L12 9L4 15"
-      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="Chevron Up Icon">
+  <path d="M18 14L12.6402 9.53348C12.2693 9.22444 11.7307 9.22444 11.3598 9.53348L6 14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 ChevronUpIcon.displayName = 'ChevronUpIcon'

package/src/icons/ChordGrid4Icon.jsx

@@ -1,9 +1,6 @@
 export const ChordGrid4Icon = ({ 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="M6.00016 2.33337V6.66671M10.0002 2.33337V6.66671M6.00016 9.33337V13.6666M10.0002 9.33337V13.6666M3.3335 6.66671H12.6668C13.2191 6.66671 13.6668 6.21899 13.6668 5.66671V3.33337C13.6668 2.78109 13.2191 2.33337 12.6668 2.33337H3.3335C2.78121 2.33337 2.3335 2.78109 2.3335 3.33337V5.66671C2.3335 6.21899 2.78121 6.66671 3.3335 6.66671ZM3.3335 13.6666H12.6668C13.2191 13.6666 13.6668 13.2189 13.6668 12.6666V10.3334C13.6668 9.78109 13.2191 9.33337 12.6668 9.33337H3.3335C2.78121 9.33337 2.3335 9.78109 2.3335 10.3334V12.6666C2.3335 13.2189 2.78121 13.6666 3.3335 13.6666Z"
-   stroke="currentColor" 
-   strokeMiterlimit="10"/>
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Chord Grid 4 Icon">
+  <path d="M12 3.5V10M12 14V20.4998M5 10H19C19.8284 10 20.5 9.32843 20.5 8.5V5C20.5 4.17157 19.8284 3.5 19 3.5H5C4.17157 3.5 3.5 4.17157 3.5 5V8.5C3.5 9.32843 4.17157 10 5 10ZM5 20.4998H19C19.8284 20.4998 20.5 19.8282 20.5 18.9998V15.5C20.5 14.6716 19.8284 14 19 14H5C4.17157 14 3.5 14.6716 3.5 15.5V18.9998C3.5 19.8282 4.17157 20.4998 5 20.4998Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
 </svg>
 )
 

package/src/icons/Chords2Icon.jsx

@@ -4,22 +4,10 @@ export const Chords2Icon = ({
   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 5H3.8C3.63431 5 3.5 5.13431 3.5 5.3V12.5M11.5 19.5H3.8C3.63431 19.5 3.5 19.3657 3.5 19.2V12.5M10.5 12.5H3.5M15 3.5V13M15 13V16.7C15 16.8657 15.1346 17.0008 15.3001 16.9926C17.7974 16.8689 19.9307 15.2096 20.4023 12.8521C20.7771 10.9777 19.8229 8.98404 18.1189 8.98404C16.7046 8.98404 15 10.5 15 13Z"
-      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="Chords 2 Icon">
+  <path d="M11 5H5C4.17157 5 3.5 5.67157 3.5 6.5V12.5M11 19.5H5C4.17157 19.5 3.5 18.8284 3.5 18V12.5M3.5 12.5H10M15 3.5V13M15 13V16.7C15 16.8657 15.1346 17.0008 15.3001 16.9926C17.7974 16.8689 19.9307 15.2096 20.4023 12.8521C20.7771 10.9777 19.8229 8.98404 18.1189 8.98404C16.7046 8.98404 15 10.5 15 13Z"
+   stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 Chords2Icon.displayName = 'Chords2Icon'

package/src/icons/ChordsDetectionIcon.jsx

@@ -4,28 +4,11 @@ export const ChordsDetectionIcon = ({
   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.5 22V22.75H21V22H19.5ZM3 22V22.75H4.5V22H3ZM14 22V22.75H15.5V22H14ZM5.75 2.75H18.25V1.25H5.75V2.75ZM19.5 4V22H21V4H19.5ZM4.5 22V4H3V22H4.5ZM18.25 2.75C18.9404 2.75 19.5 3.30964 19.5 4H21C21 2.48122 19.7688 1.25 18.25 1.25V2.75ZM5.75 1.25C4.23122 1.25 3 2.48122 3 4H4.5C4.5 3.30964 5.05964 2.75 5.75 2.75V1.25ZM10 19.2159L10 2L8.5 2L8.5 19.2159H10ZM15.5 22V2H14V22H15.5ZM3.75 15.25H20.25V13.75H3.75V15.25Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.25 20.75C11.25 21.8546 10.3546 22.75 9.25 22.75C8.14543 22.75 7.25 21.8546 7.25 20.75C7.25 19.6454 8.14543 18.75 9.25 18.75C10.3546 18.75 11.25 19.6454 11.25 20.75Z"
-      fill="currentColor"
-    />
-    <path
-      d="M16.75 8.25C16.75 9.35457 15.8546 10.25 14.75 10.25C13.6454 10.25 12.75 9.35457 12.75 8.25C12.75 7.14543 13.6454 6.25 14.75 6.25C15.8546 6.25 16.75 7.14543 16.75 8.25Z"
-      fill="currentColor"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Chords Detection Icon">
+  <path d="M9.25 4L9.25 20M14.75 4L14.75 20M3.75 20V7C3.75 5.34315 5.09315 4 6.75 4H17.25C18.9069 4 20.25 5.34315 20.25 7V20M20.25 13.9951H3.75" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+  <path d="M10.9985 19.1499C10.9985 20.1164 10.215 20.8999 9.24848 20.8999C8.28198 20.8999 7.49848 20.1164 7.49848 19.1499C7.49848 18.1834 8.28198 17.3999 9.24848 17.3999C10.215 17.3999 10.9985 18.1834 10.9985 19.1499Z" fill="currentColor"/>
+  <path d="M16.5 9.1499C16.5 10.1164 15.7165 10.8999 14.75 10.8999C13.7835 10.8999 13 10.1164 13 9.1499C13 8.1834 13.7835 7.3999 14.75 7.3999C15.7165 7.3999 16.5 8.1834 16.5 9.1499Z" fill="currentColor"/>
+</svg>
 )
 
 ChordsDetectionIcon.displayName = 'ChordsDetectionIcon'

package/src/icons/CloseIcon.jsx

@@ -1,20 +1,7 @@
 export const CloseIcon = ({ 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="M12.6668 3.33301L3.3335 12.6663M3.3335 3.33301L12.6668 12.6663"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Close Icon">
+  <path d="M19 5L5 19M5 5L19 19" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 CloseIcon.displayName = 'CloseIcon'

package/src/icons/ComputerIcon.jsx

@@ -4,23 +4,9 @@ export const ComputerIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M14 16V21M10 21V16M18 21H6M3 16H21C21.5523 16 22 15.5523 22 15V4C22 3.44772 21.5523 3 21 3H3C2.44772 3 2 3.44772 2 4V15C2 15.5523 2.44772 16 3 16Z"
-      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="Computer Icon">
+  <path d="M7 21H17M12 21V16M6 16H18C19.6569 16 21 14.6569 21 13V6C21 4.34315 19.6569 3 18 3H6C4.34315 3 3 4.34315 3 6V13C3 14.6569 4.34315 16 6 16Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>  
 )
 
 ComputerIcon.displayName = 'ComputerIcon'

package/src/icons/CountInIcon.jsx

@@ -1,23 +1,10 @@
 export const CountInIcon = ({ width, height, className, ...props }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g id="ic-count-in">
-      <path
-        id="Stroke"
-        d="M4.16675 2.2383L5.42218 1.17901C5.58473 1.04185 5.8334 1.1574 5.8334 1.37008L5.83341 7.91536M16.0417 16.9786L16.0417 11.9845C16.0417 11.742 15.7311 11.6415 15.589 11.8381L12.1615 16.5822C12.0421 16.7475 12.1602 16.9786 12.3642 16.9786H16.0417ZM16.0417 16.9786L16.0417 18.8791M16.0417 16.9786H17.2882M12.5001 2.91536C12.5001 1.66536 13.2622 0.832031 14.5834 0.832031C16.3662 0.832031 17.0834 2.91536 15.8334 4.16536C14.6852 5.31359 13.8552 6.00625 12.4665 7.49877C12.3186 7.65766 12.4315 7.91536 12.6486 7.91536H16.6667M5.362 15.2251C6.6676 15.2251 7.2875 14.3352 7.2875 13.4452C7.2875 12.5553 6.49243 11.6657 5.22134 11.6657C4.19916 11.6657 3.50474 12.241 3.27197 12.9291M5.362 15.2251H4.56693M5.362 15.2251C6.6676 15.2251 7.2875 16.1151 7.2875 17.005C7.2875 17.895 6.49243 18.7846 5.22134 18.7846C4.19916 18.7846 3.50474 18.2093 3.27197 17.5211"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-    </g>
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Count In Icon">
+  <path d="M7.11523 9.90576V3.73584H7.07715L6.20752 4.35156C5.93457 4.5293 5.77588 4.58643 5.5918 4.58643C5.24268 4.58643 4.98242 4.32617 4.98242 3.97705C4.98242 3.71045 5.14746 3.47559 5.47119 3.25977L6.60742 2.46631C7.06445 2.15527 7.42627 2.02832 7.78174 2.02832C8.39746 2.02832 8.81006 2.45361 8.81006 3.09473V9.90576C8.81006 10.4897 8.49902 10.8262 7.95947 10.8262C7.42627 10.8262 7.11523 10.4834 7.11523 9.90576Z" fill="currentColor"/>
+  <path d="M4.60938 19.9219C4.60938 19.522 4.89502 19.23 5.28223 19.23C5.56152 19.23 5.771 19.3633 6.00586 19.7061C6.37402 20.29 6.93896 20.6011 7.6499 20.6011C8.60205 20.6011 9.21777 20.0869 9.21777 19.2998C9.21777 18.5127 8.58936 17.9795 7.65625 17.9795H7.03418C6.65332 17.9795 6.37402 17.6938 6.37402 17.3003C6.37402 16.9194 6.64697 16.6338 7.03418 16.6338H7.62451C8.40527 16.6338 8.97656 16.126 8.97656 15.4277C8.97656 14.7295 8.41797 14.2534 7.61182 14.2534C6.9834 14.2534 6.49463 14.5454 6.1582 15.1167C5.96777 15.4341 5.74561 15.5674 5.44727 15.5674C5.04102 15.5674 4.74902 15.2817 4.74902 14.8691C4.74902 13.8535 5.98682 12.9204 7.64355 12.9204C9.39551 12.9204 10.627 13.8662 10.627 15.2183C10.627 16.1577 9.92236 17.021 9.04639 17.1479V17.2559C10.1001 17.3574 10.8936 18.2588 10.8936 19.3569C10.8936 20.874 9.54785 21.9341 7.63721 21.9341C5.92334 21.9341 4.60938 20.9692 4.60938 19.9219Z" fill="currentColor"/>
+  <path d="M13.2744 9.98193C13.2744 9.6582 13.4458 9.38525 13.979 8.83936L16.3467 6.2876C17.0449 5.54492 17.3242 5.0625 17.3242 4.5293C17.3242 3.80566 16.7974 3.31689 16.0166 3.31689C15.3691 3.31689 14.8931 3.67236 14.6455 4.33887C14.4424 4.73242 14.2266 4.90381 13.8965 4.90381C13.4712 4.90381 13.1792 4.59912 13.1792 4.17383C13.1792 3.03125 14.3979 1.92041 16.1118 1.92041C17.7876 1.92041 18.9937 2.95508 18.9937 4.3833C18.9937 5.25293 18.6001 5.97021 17.5146 7.11279L15.4961 9.271V9.35352H18.4731C18.9683 9.35352 19.2729 9.62012 19.2729 10.0581C19.2729 10.4897 18.9746 10.75 18.4731 10.75H14.1948C13.6362 10.75 13.2744 10.4453 13.2744 9.98193Z" fill="currentColor"/>
+  <path d="M17.1465 20.9565V20.144H13.979C13.3315 20.144 12.938 19.7949 12.938 19.2046C12.938 18.9253 13.0142 18.6777 13.249 18.2017C13.9727 16.8306 14.6519 15.6753 15.7817 14.0059C16.3149 13.2314 16.7212 12.9648 17.3813 12.9648C18.2383 12.9648 18.7524 13.4219 18.7524 14.1772V18.7476H19.1777C19.6348 18.7476 19.9141 19.0269 19.9141 19.4585C19.9141 19.8838 19.6411 20.144 19.1777 20.144H18.7524V20.9565C18.7524 21.4961 18.4478 21.8262 17.9463 21.8262C17.4448 21.8262 17.1465 21.4961 17.1465 20.9565ZM14.5059 18.7476H17.1465V14.4375H17.0576C16.2959 15.5928 15.0645 17.6938 14.5059 18.7031V18.7476Z" fill="currentColor"/>
+</svg>
 )
 
 CountInIcon.displayName = 'CountInIcon'