@moises.ai/design-system 4.19.3 → 4.19.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (138) hide show
  1. package/dist/{HiFi1Icon-DW-qHZUd.js → AutomationPenIcon-508hiLNg.js} +2666 -4229
  2. package/dist/colors/custom-styles.css +24 -24
  3. package/dist/icons.js +695 -687
  4. package/dist/index.js +1685 -1678
  5. package/package.json +1 -1
  6. package/src/colors/custom-styles.css +24 -24
  7. package/src/components/Countdown/Countdown.module.css +5 -5
  8. package/src/components/DataTable/DataTable.module.css +3 -3
  9. package/src/components/EmptyState/EmptyState.jsx +2 -2
  10. package/src/components/EmptyState/EmptyState.module.css +3 -2
  11. package/src/components/Extension/Extension.jsx +1 -1
  12. package/src/components/Extension/Extension.stories.jsx +2 -2
  13. package/src/components/InputLevelMeter/InputLevelMeter.stories.jsx +2 -2
  14. package/src/components/Knob/utils.js +1 -1
  15. package/src/components/PanControl/PanControl.jsx +2 -2
  16. package/src/components/PeakLevel/PeakLevel.stories.jsx +1 -1
  17. package/src/components/RecordingForm/RecordingForm.module.css +1 -1
  18. package/src/components/Select/Select.jsx +21 -25
  19. package/src/components/Select/Select.module.css +13 -0
  20. package/src/components/SetlistList/SetlistList.module.css +1 -1
  21. package/src/components/Shell/Shell.stories.jsx +2 -2
  22. package/src/components/SliderLibrary/SliderLibrary.module.css +6 -6
  23. package/src/components/SliderLibrary/SliderLibrary.stories.jsx +3 -3
  24. package/src/components/SpecialDialog/SpecialDialog.module.css +1 -1
  25. package/src/components/StemGenerationForm/CreateNew/CreateNew.jsx +2 -2
  26. package/src/components/TextField/TextField.jsx +24 -6
  27. package/src/components/TextField/TextField.module.css +37 -0
  28. package/src/components/TextField/TextField.stories.jsx +39 -0
  29. package/src/components/Tooltip/Tooltip.module.css +15 -15
  30. package/src/components/TrackHeader/TrackHeader.module.css +2 -2
  31. package/src/components/TrackHeader/TrackHeader.stories.jsx +1 -1
  32. package/src/components/VoiceConversionForm/Waveform/Waveform.jsx +1 -1
  33. package/src/icons/AlertIcon.jsx +4 -5
  34. package/src/icons/ArrowDownIcon.jsx +3 -17
  35. package/src/icons/ArrowLeftIcon.jsx +3 -17
  36. package/src/icons/ArrowUpIcon.jsx +3 -17
  37. package/src/icons/ArrowsHorizontalIcon.jsx +3 -17
  38. package/src/icons/ArrowsVerticalIcon.jsx +3 -17
  39. package/src/icons/AudioFileIcon.jsx +3 -17
  40. package/src/icons/AutomationPenIcon.jsx +7 -0
  41. package/src/icons/BanjoIcon.jsx +8 -0
  42. package/src/icons/BookmarkIcon.jsx +3 -15
  43. package/src/icons/CavacoIcon.jsx +9 -0
  44. package/src/icons/CheckIcon.jsx +3 -3
  45. package/src/icons/ChevronLeftIcon.jsx +3 -17
  46. package/src/icons/ChevronRightIcon.jsx +3 -17
  47. package/src/icons/ChevronUpIcon.jsx +3 -17
  48. package/src/icons/ChordGrid4Icon.jsx +2 -5
  49. package/src/icons/Chords2Icon.jsx +4 -16
  50. package/src/icons/ChordsDetectionIcon.jsx +5 -22
  51. package/src/icons/CloseIcon.jsx +3 -16
  52. package/src/icons/ComputerIcon.jsx +3 -17
  53. package/src/icons/CountInIcon.jsx +6 -19
  54. package/src/icons/CropIcon.jsx +2 -17
  55. package/src/icons/CrownIcon.jsx +3 -17
  56. package/src/icons/DelayIcon.jsx +3 -16
  57. package/src/icons/DownloadIcon.jsx +7 -0
  58. package/src/icons/DynamicMicrophone2Icon.jsx +4 -9
  59. package/src/icons/EditIcon.jsx +3 -16
  60. package/src/icons/EffectsIcon.jsx +4 -16
  61. package/src/icons/EmailIcon.jsx +3 -24
  62. package/src/icons/ExternalLinkIcon.jsx +3 -3
  63. package/src/icons/EyeIcon.jsx +4 -26
  64. package/src/icons/EyeOffIcon.jsx +3 -24
  65. package/src/icons/Filter2Icon.jsx +3 -17
  66. package/src/icons/FitWidthIcon.jsx +7 -0
  67. package/src/icons/FlatAndSharpIcon.jsx +3 -16
  68. package/src/icons/GuitarAmpIcon.jsx +6 -32
  69. package/src/icons/HelpIcon.jsx +4 -3
  70. package/src/icons/Info2Icon.jsx +4 -4
  71. package/src/icons/Knob3Icon.jsx +8 -17
  72. package/src/icons/LibraryIcon.jsx +2 -16
  73. package/src/icons/LinkIcon.jsx +4 -17
  74. package/src/icons/LoopSection2Icon.jsx +4 -17
  75. package/src/icons/LyricsIcon.jsx +5 -24
  76. package/src/icons/MagicWandIcon.jsx +5 -8
  77. package/src/icons/MandolinIcon.jsx +8 -0
  78. package/src/icons/MaracasIcon.jsx +4 -15
  79. package/src/icons/MasteringIcon.jsx +5 -28
  80. package/src/icons/MetronomeIcon.jsx +4 -14
  81. package/src/icons/Mixer2Icon.jsx +4 -16
  82. package/src/icons/MixerVerticalIcon.jsx +7 -0
  83. package/src/icons/More2Icon.jsx +1 -44
  84. package/src/icons/MoreIcon.jsx +4 -41
  85. package/src/icons/MoreMenuIcon.jsx +9 -0
  86. package/src/icons/MusicAddIcon.jsx +3 -17
  87. package/src/icons/MusicBookIcon.jsx +8 -0
  88. package/src/icons/MusicNoteIcon.jsx +3 -17
  89. package/src/icons/MusicRemoveIcon.jsx +3 -17
  90. package/src/icons/NoChords2Icon.jsx +3 -16
  91. package/src/icons/NoChordsDetectionIcon.jsx +6 -22
  92. package/src/icons/NoEyeIcon.jsx +4 -3
  93. package/src/icons/NoMusicIcon.jsx +2 -17
  94. package/src/icons/NoMusicNoteIcon.jsx +3 -16
  95. package/src/icons/NoSearchIcon.jsx +3 -17
  96. package/src/icons/NoSpliterIcon.jsx +3 -14
  97. package/src/icons/NoVolume2Icon.jsx +3 -17
  98. package/src/icons/NowPlayingIcon.jsx +7 -0
  99. package/src/icons/PenIcon.jsx +3 -3
  100. package/src/icons/PlayOnRepeatIcon.jsx +4 -17
  101. package/src/icons/PowerSwitchIcon.jsx +4 -3
  102. package/src/icons/RadioOffIcon.jsx +3 -17
  103. package/src/icons/RedoIcon.jsx +3 -16
  104. package/src/icons/RefreshIcon.jsx +3 -17
  105. package/src/icons/SearchIcon.jsx +3 -18
  106. package/src/icons/Sections2Icon.jsx +4 -7
  107. package/src/icons/Setlist2Icon.jsx +3 -17
  108. package/src/icons/SettingsIcon.jsx +5 -18
  109. package/src/icons/ShareIosIcon.jsx +3 -9
  110. package/src/icons/SidebarLeftIcon.jsx +3 -16
  111. package/src/icons/SidebarRightIcon.jsx +3 -17
  112. package/src/icons/SongBarIcon.jsx +3 -17
  113. package/src/icons/SoundEffectsIcon.jsx +8 -17
  114. package/src/icons/SparkBarsIcon.jsx +4 -16
  115. package/src/icons/SparklesIcon.jsx +4 -7
  116. package/src/icons/SpeedChangerIcon.jsx +2 -15
  117. package/src/icons/SpliterIcon.jsx +4 -17
  118. package/src/icons/Star1Icon.jsx +5 -4
  119. package/src/icons/Star2Icon.jsx +5 -4
  120. package/src/icons/Star3Icon.jsx +5 -4
  121. package/src/icons/StarIcon.jsx +4 -16
  122. package/src/icons/TrashIcon.jsx +3 -17
  123. package/src/icons/TrimIcon.jsx +2 -17
  124. package/src/icons/UkuleleIcon.jsx +8 -40
  125. package/src/icons/UndoIcon.jsx +3 -16
  126. package/src/icons/UnlockIcon.jsx +3 -13
  127. package/src/icons/UserGroupIcon.jsx +4 -17
  128. package/src/icons/UserIcon.jsx +4 -4
  129. package/src/icons/UserVoiceIcon.jsx +4 -6
  130. package/src/icons/Video2Icon.jsx +4 -22
  131. package/src/icons/VideoIcon.jsx +3 -17
  132. package/src/icons/Volume0Icon.jsx +4 -17
  133. package/src/icons/Volume1Icon.jsx +4 -17
  134. package/src/icons/Volume2Icon.jsx +4 -17
  135. package/src/icons/WidgetIcon.jsx +10 -26
  136. package/src/icons/ZoomInIcon.jsx +2 -17
  137. package/src/icons/ZoomOutIcon.jsx +7 -0
  138. package/src/icons.jsx +12 -2
@@ -4,46 +4,14 @@ export const UkuleleIcon = ({
4
4
  className,
5
5
  ...props
6
6
  }) => (
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- width={width}
10
- height={height}
11
- viewBox="0 0 24 24"
12
- fill="none"
13
- className={className}
14
- {...props}
15
- >
16
- <path
17
- d="M9.50169 3.21495C8.53964 3.68278 7.47211 3.89129 6.40473 3.81984C5.66182 3.77011 5.04573 4.3871 5.09684 5.12992C5.3331 8.56372 5.76896 14.8918 5.89904 16.6739C5.92024 16.9645 6.06996 17.2242 6.30707 17.3935L7.78967 18.4521C8.05255 18.6398 8.20858 18.9429 8.20858 19.2659V21.9999H15.8502V19.2582C15.8502 18.9395 16.0021 18.6399 16.2592 18.4516L17.6926 17.4011C17.93 17.2272 18.0787 16.9575 18.0991 16.664L18.9024 5.13069C18.9541 4.38779 18.3382 3.77015 17.5951 3.81988C16.5282 3.8913 15.461 3.68288 14.4994 3.21523L12.8749 2.42526C12.3227 2.15675 11.6778 2.15675 11.1256 2.42527L9.50169 3.21495Z"
18
- stroke="currentColor"
19
- strokeWidth="1.5"
20
- strokeMiterlimit="10"
21
- />
22
- <path
23
- d="M22.5767 9.5423C22.5767 9.95651 22.2409 10.2923 21.8267 10.2923C21.4124 10.2923 21.0767 9.95651 21.0767 9.5423C21.0767 9.12808 21.4124 8.7923 21.8267 8.7923C22.2409 8.7923 22.5767 9.12808 22.5767 9.5423Z"
24
- stroke="currentColor"
25
- strokeWidth="1.5"
26
- strokeMiterlimit="10"
27
- />
28
- <path
29
- d="M1.4082 9.5423C1.4082 9.95651 1.74399 10.2923 2.1582 10.2923C2.57242 10.2923 2.9082 9.95651 2.9082 9.5423C2.9082 9.12808 2.57242 8.7923 2.1582 8.7923C1.74399 8.7923 1.4082 9.12808 1.4082 9.5423Z"
30
- stroke="currentColor"
31
- strokeWidth="1.5"
32
- strokeMiterlimit="10"
33
- />
34
- <path
35
- d="M22.0337 14.4576C22.0337 14.8718 21.6979 15.2076 21.2837 15.2076C20.8695 15.2076 20.5337 14.8718 20.5337 14.4576C20.5337 14.0434 20.8695 13.7076 21.2837 13.7076C21.6979 13.7076 22.0337 14.0434 22.0337 14.4576Z"
36
- stroke="currentColor"
37
- strokeWidth="1.5"
38
- strokeMiterlimit="10"
39
- />
40
- <path
41
- d="M1.95117 14.4576C1.95117 14.8718 2.28696 15.2076 2.70117 15.2076C3.11539 15.2076 3.45117 14.8718 3.45117 14.4576C3.45117 14.0434 3.11539 13.7076 2.70117 13.7076C2.28696 13.7076 1.95117 14.0434 1.95117 14.4576Z"
42
- stroke="currentColor"
43
- strokeWidth="1.5"
44
- strokeMiterlimit="10"
45
- />
46
- </svg>
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Ukulele Icon">
8
+ <path d="M8.70617 21.5V18.8733C8.70617 18.563 8.57061 18.2717 8.3422 18.0914L7.05407 17.0743C6.84806 16.9117 6.71798 16.6621 6.69955 16.383C6.58654 14.6708 6.20785 8.59105 6.00258 5.292C5.95817 4.57834 6.49345 3.98556 7.13892 4.03334C8.0663 4.10198 8.99381 3.90165 9.82967 3.45218L11.2406 2.69349C11.7203 2.43551 12.2807 2.4355 12.7604 2.69348L14.1718 3.45245C15.0074 3.90175 15.9345 4.10199 16.8616 4.03338C17.5071 3.98559 18.0423 4.579 17.9974 5.29274L17.2995 16.3734C17.2817 16.6555 17.1525 16.9145 16.9463 17.0816L15.7008 18.0909C15.4775 18.2718 15.3455 18.5597 15.3455 18.8658V21.5"
9
+ stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
10
+ <path d="M4.49925 9.20673C4.52335 9.89666 3.98357 10.4755 3.29364 10.4996C2.6037 10.5237 2.02487 9.98391 2.00078 9.29397C1.97668 8.60404 2.51645 8.0252 3.20639 8.00111C3.89633 7.97702 4.47516 8.51679 4.49925 9.20673Z" fill="currentColor"/>
11
+ <path d="M4.79286 14.2056C4.81696 14.8955 4.27718 15.4744 3.58725 15.4985C2.89731 15.5226 2.31848 14.9828 2.29439 14.2929C2.27029 13.6029 2.81006 13.0241 3.5 13C4.18994 12.9759 4.76877 13.5157 4.79286 14.2056Z" fill="currentColor"/>
12
+ <path d="M19.5 9.20639C19.4759 9.89633 20.0157 10.4752 20.7056 10.4993C21.3955 10.5233 21.9744 9.98357 21.9985 9.29364C22.0226 8.6037 21.4828 8.02487 20.7929 8.00078C20.1029 7.97668 19.5241 8.51645 19.5 9.20639Z" fill="currentColor"/>
13
+ <path d="M19.2064 14.2053C19.1823 14.8952 19.7221 15.474 20.412 15.4981C21.1019 15.5222 21.6808 14.9825 21.7049 14.2925C21.729 13.6026 21.1892 13.0238 20.4993 12.9997C19.8093 12.9756 19.2305 13.5153 19.2064 14.2053Z" fill="currentColor"/>
14
+ </svg>
47
15
  )
48
16
 
49
17
  UkuleleIcon.displayName = 'UkuleleIcon'
@@ -1,20 +1,7 @@
1
1
  export const UndoIcon = ({ width = 16, height = 16, className, ...props }) => (
2
- <svg
3
- xmlns="http://www.w3.org/2000/svg"
4
- width={width}
5
- height={height}
6
- viewBox="0 0 16 16"
7
- fill="none"
8
- className={className}
9
- {...props}
10
- >
11
- <path
12
- d="M5 8.04444L2 5.02222M2 5.02222L5 2M2 5.02222H9.875C10.4167 5.02222 10.9531 5.12971 11.4536 5.33855C11.954 5.54738 12.4088 5.85348 12.7918 6.23936C13.1749 6.62523 13.4787 7.08334 13.686 7.58751C13.8933 8.09169 14 8.63206 14 9.17778C14 9.72349 13.8933 10.2639 13.686 10.768C13.4787 11.2722 13.1749 11.7303 12.7918 12.1162C12.4088 12.5021 11.954 12.8082 11.4536 13.017C10.9531 13.2258 10.4167 13.3333 9.875 13.3333H7.25"
13
- stroke="currentColor"
14
- strokeLinecap="round"
15
- strokeLinejoin="round"
16
- />
17
- </svg>
2
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Undo Icon">
3
+ <path d="M8.5 2.5L3 8L8.5 13.5M3 8H15.5C16.9587 8 18.3576 8.57946 19.3891 9.61091C20.4205 10.6424 21 12.0413 21 13.5C21 14.9587 20.4205 16.3576 19.3891 17.3891C18.3576 18.4205 16.9587 19 15.5 19H12.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
4
+ </svg>
18
5
  )
19
6
 
20
7
  UndoIcon.displayName = 'UndoIcon'
@@ -1,17 +1,7 @@
1
1
  export const UnlockIcon = ({ width = 16, height = 16, className, ...props }) => (
2
- <svg xmlns="http://www.w3.org/2000/svg"
3
- width={width}
4
- height={height}
5
- viewBox="0 0 16 16"
6
- fill="none"
7
- className={className}
8
- {...props}
9
- >
10
- <g>
11
- <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.8226 2.77588 11.1362 3.36502 11.266 4.00065M3.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"
12
- stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
13
- </g>
14
- </svg>
2
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Unlock Icon">
3
+ <path d="M7.5 9.5V6C7.5 3.51472 9.51472 1.5 12 1.5C13.2609 1.5 14.4007 2.0186 15.2177 2.85415C15.4116 3.05248 15.5874 3.26866 15.7422 3.5M6.5 21H17.5C19.1569 21 20.5 19.6569 20.5 18V12.5C20.5 10.8431 19.1569 9.5 17.5 9.5H6.5C4.84315 9.5 3.5 10.8431 3.5 12.5V18C3.5 19.6569 4.84315 21 6.5 21Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
4
+ </svg>
15
5
  )
16
6
 
17
7
  UnlockIcon.displayName = 'UnlockIcon'
@@ -4,23 +4,10 @@ export const UserGroupIcon = ({
4
4
  className,
5
5
  ...props
6
6
  }) => (
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- width={width}
10
- height={height}
11
- viewBox="0 0 12 13"
12
- fill="none"
13
- className={className}
14
- {...props}
15
- >
16
- <path
17
- d="M7.20012 11.2499V10.5061C7.20012 10.1116 7.04339 9.73326 6.76443 9.45429C6.48546 9.17533 6.1071 9.01861 5.71259 9.01861H2.73753C2.34301 9.01861 1.96465 9.17533 1.68569 9.45429C1.40672 9.73326 1.25 10.1116 1.25 10.5061V11.2499M10.75 8.44388V7.70012C10.75 7.3056 10.5933 6.92724 10.3144 6.64827C10.0354 6.36931 9.65703 6.21259 9.26251 6.21259H7.24265M5.71259 6.04355C5.71259 6.86509 5.0466 7.53108 4.22506 7.53108C3.40352 7.53108 2.73753 6.86509 2.73753 6.04355C2.73753 5.22201 3.40352 4.55602 4.22506 4.55602C5.0466 4.55602 5.71259 5.22201 5.71259 6.04355ZM9.26251 3.23753C9.26251 4.05907 8.59652 4.72506 7.77498 4.72506C6.95345 4.72506 6.28746 4.05907 6.28746 3.23753C6.28746 2.41599 6.95345 1.75 7.77498 1.75C8.59652 1.75 9.26251 2.41599 9.26251 3.23753Z"
18
- stroke="currentColor"
19
- strokeWidth="0.75"
20
- strokeLinecap="round"
21
- strokeLinejoin="round"
22
- />
23
- </svg>
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="User Group Icon">
8
+ <path d="M14 21V20C14 18.3431 12.6569 17 11 17H5C3.34315 17 2 18.3431 2 20V21M22 17V15C22 13.3431 20.6569 12 19 12H15M11 11C11 11.394 10.9224 11.7841 10.7716 12.1481C10.6209 12.512 10.3999 12.8427 10.1213 13.1213C9.84274 13.3999 9.51203 13.6209 9.14805 13.7716C8.78407 13.9224 8.39397 14 8 14C7.60603 14 7.21593 13.9224 6.85195 13.7716C6.48797 13.6209 6.15726 13.3999 5.87868 13.1213C5.6001 12.8427 5.37913 12.512 5.22836 12.1481C5.0776 11.7841 5 11.394 5 11C5 10.606 5.0776 10.2159 5.22836 9.85195C5.37913 9.48797 5.6001 9.15726 5.87868 8.87868C6.15726 8.6001 6.48797 8.37913 6.85195 8.22836C7.21593 8.0776 7.60603 8 8 8C8.39397 8 8.78407 8.0776 9.14805 8.22836C9.51203 8.37913 9.84275 8.6001 10.1213 8.87868C10.3999 9.15726 10.6209 9.48797 10.7716 9.85195C10.9224 10.2159 11 10.606 11 11ZM19 6C19 6.39397 18.9224 6.78407 18.7716 7.14805C18.6209 7.51203 18.3999 7.84274 18.1213 8.12132C17.8427 8.3999 17.512 8.62087 17.1481 8.77164C16.7841 8.9224 16.394 9 16 9C15.606 9 15.2159 8.9224 14.8519 8.77164C14.488 8.62087 14.1573 8.3999 13.8787 8.12132C13.6001 7.84274 13.3791 7.51203 13.2284 7.14805C13.0776 6.78407 13 6.39397 13 6C13 5.60603 13.0776 5.21593 13.2284 4.85195C13.3791 4.48797 13.6001 4.15726 13.8787 3.87868C14.1573 3.6001 14.488 3.37913 14.8519 3.22836C15.2159 3.0776 15.606 3 16 3C16.394 3 16.7841 3.0776 17.1481 3.22836C17.512 3.37913 17.8427 3.6001 18.1213 3.87868C18.3999 4.15726 18.6209 4.48797 18.7716 4.85195C18.9224 5.21593 19 5.60603 19 6Z"
9
+ stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
10
+ </svg>
24
11
  )
25
12
 
26
13
  UserGroupIcon.displayName = 'UserGroupIcon'
@@ -1,8 +1,8 @@
1
1
  export const UserIcon = ({ width = 16, height = 16, className, ...props }) => (
2
- <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
3
- <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
4
- stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
5
- </svg>
2
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="User Icon">
3
+ <path d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21M16 7.5C16 8.02529 15.8965 8.54543 15.6955 9.03073C15.4945 9.51604 15.1999 9.95699 14.8284 10.3284C14.457 10.6999 14.016 10.9945 13.5307 11.1955C13.0454 11.3965 12.5253 11.5 12 11.5C11.4747 11.5 10.9546 11.3965 10.4693 11.1955C9.98396 10.9945 9.54301 10.6999 9.17157 10.3284C8.80014 9.95699 8.5055 9.51604 8.30448 9.03073C8.10346 8.54543 8 8.02529 8 7.5C8 6.97471 8.10346 6.45457 8.30448 5.96927C8.5055 5.48396 8.80014 5.04301 9.17157 4.67157C9.54301 4.30014 9.98396 4.0055 10.4693 3.80448C10.9546 3.60346 11.4747 3.5 12 3.5C12.5253 3.5 13.0454 3.60346 13.5307 3.80448C14.016 4.0055 14.457 4.30014 14.8284 4.67157C15.1999 5.04301 15.4945 5.48396 15.6955 5.96927C15.8965 6.45457 16 6.97471 16 7.5Z"
4
+ stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
5
+ </svg>
6
6
  )
7
7
 
8
8
  UserIcon.displayName = 'UserIcon'
@@ -1,10 +1,8 @@
1
1
  export const UserVoiceIcon = ({ width = 16, height = 16, className, ...props }) => (
2
- <svg
3
- xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
4
- <path
5
- d="M17 22.0002V20.1113C17 19.1094 16.6049 18.1485 15.9016 17.44C15.1984 16.7316 14.2446 16.3335 13.25 16.3335H5.75C4.75544 16.3335 3.80161 16.7316 3.09835 17.44C2.39509 18.1485 2 19.1094 2 20.1113V22.0002M19.7331 2.78202C21.1846 4.37349 22 6.53169 22 8.78202C22 11.0324 21.1846 13.1906 19.7331 14.782M17 5.77778C17.7257 6.57351 18.1334 7.65261 18.1334 8.77778C18.1334 9.90294 17.7257 10.982 17 11.7778M13.25 8.77799C13.25 10.8644 11.5711 12.5558 9.5 12.5558C7.42893 12.5558 5.75 10.8644 5.75 8.77799C5.75 6.69158 7.42893 5.00021 9.5 5.00021C11.5711 5.00021 13.25 6.69158 13.25 8.77799Z"
6
- stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
7
- </svg>
2
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="User Voice Icon">
3
+ <path d="M19 20.9998V18.9998C19 16.7907 17.2091 14.9998 15 14.9998H7C4.79086 14.9998 3 16.7907 3 18.9998V20.9998M18.3001 10.1121C18.7586 9.31784 19 8.41691 19 7.49982C19 6.58273 18.7586 5.6818 18.3001 4.88757M21.5 12.9152C22.4506 11.2687 22.951 9.401 22.951 7.49982C22.951 5.59863 22.4506 3.73095 21.5 2.08447M15 7.49982C15 8.0251 14.8965 8.54525 14.6955 9.03055C14.4945 9.51585 14.1999 9.95681 13.8284 10.3282C13.457 10.6997 13.016 10.9943 12.5307 11.1953C12.0454 11.3964 11.5253 11.4998 11 11.4998C10.4747 11.4998 9.95457 11.3964 9.46927 11.1953C8.98396 10.9943 8.54301 10.6997 8.17157 10.3282C7.80014 9.95681 7.5055 9.51585 7.30448 9.03055C7.10346 8.54525 7 8.0251 7 7.49982C7 6.97453 7.10346 6.45439 7.30448 5.96908C7.5055 5.48378 7.80014 5.04282 8.17157 4.67139C8.54301 4.29996 8.98396 4.00532 9.46927 3.8043C9.95457 3.60328 10.4747 3.49982 11 3.49982C11.5253 3.49982 12.0454 3.60328 12.5307 3.8043C13.016 4.00532 13.457 4.29996 13.8284 4.67139C14.1999 5.04282 14.4945 5.48378 14.6955 5.96908C14.8965 6.45439 15 6.97453 15 7.49982Z"
4
+ stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
5
+ </svg>
8
6
  )
9
7
 
10
8
  UserVoiceIcon.displayName = 'UserVoiceIcon'
@@ -4,28 +4,10 @@ export const Video2Icon = ({
4
4
  className,
5
5
  ...props
6
6
  }) => (
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- width={width}
10
- height={height}
11
- viewBox="0 0 24 24"
12
- fill="none"
13
- className={className}
14
- {...props}
15
- >
16
- <path
17
- d="M14.4816 11.8466C14.5998 11.9147 14.5998 12.0851 14.4816 12.1532L9.69566 14.9133C9.57749 14.9815 9.42978 14.8963 9.42978 14.76V9.23982C9.42978 9.10352 9.57749 9.01834 9.69566 9.08649L14.4816 11.8466Z"
18
- stroke="currentColor"
19
- strokeWidth="1.5"
20
- strokeMiterlimit="10"
21
- />
22
- <path
23
- d="M21 3.5H3C1.89543 3.5 1 4.39543 1 5.5V18.5C1 19.6046 1.89543 20.5 3 20.5H21C22.1046 20.5 23 19.6046 23 18.5V5.5C23 4.39543 22.1046 3.5 21 3.5Z"
24
- stroke="currentColor"
25
- strokeWidth="1.5"
26
- strokeMiterlimit="10"
27
- />
28
- </svg>
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Video2 Icon">
8
+ <path d="M2.5 7C2.5 5.34315 3.84315 4 5.5 4H18.5C20.1569 4 21.5 5.34315 21.5 7V17C21.5 18.6569 20.1569 20 18.5 20H5.5C3.84315 20 2.5 18.6569 2.5 17V7Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
9
+ <path d="M15 11.134C15.6667 11.5189 15.6667 12.4811 15 12.866L10.5 15.4641C9.83333 15.849 9 15.3679 9 14.5981L9 9.40192C9 8.63212 9.83333 8.151 10.5 8.5359L15 11.134Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
10
+ </svg>
29
11
  )
30
12
 
31
13
  Video2Icon.displayName = 'Video2Icon'
@@ -1,21 +1,7 @@
1
1
  export const VideoIcon = ({ width = 16, height = 16, className, ...props }) => (
2
- <svg
3
- xmlns="http://www.w3.org/2000/svg"
4
- width={width}
5
- height={height}
6
- viewBox="0 0 24 24"
7
- fill="none"
8
- className={className}
9
- {...props}
10
- >
11
- <path
12
- d="M18.625 9.125L23 7V17L18.625 14.875M3 5H13C14.1046 5 15 5.89543 15 7V17C15 18.1046 14.1046 19 13 19H3C1.89543 19 1 18.1046 1 17V7C1 5.89543 1.89543 5 3 5Z"
13
- stroke="currentColor"
14
- strokeWidth="1.5"
15
- strokeLinecap="round"
16
- strokeLinejoin="round"
17
- />
18
- </svg>
2
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Video Icon">
3
+ <path d="M17.625 8.125L22 6V18L17.625 15.875M4 5H12C13.1046 5 14 5.89543 14 7V17C14 18.1046 13.1046 19 12 19H4C2.89543 19 2 18.1046 2 17V7C2 5.89543 2.89543 5 4 5Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
4
+ </svg>
19
5
  )
20
6
 
21
7
  VideoIcon.displayName = 'VideoIcon'
@@ -4,23 +4,10 @@ export const Volume0Icon = ({
4
4
  className,
5
5
  ...props
6
6
  }) => (
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- width={width}
10
- height={height}
11
- viewBox="0 0 24 24"
12
- fill="none"
13
- className={className}
14
- {...props}
15
- >
16
- <path
17
- d="M11 5L6 9H2V15H6L11 19V5Z"
18
- stroke="currentColor"
19
- strokeWidth="1.5"
20
- strokeLinecap="round"
21
- strokeLinejoin="round"
22
- />
23
- </svg>
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Volume 0 Icon">
8
+ <path d="M12 4.49455C12 3.90107 11.3078 3.57685 10.8519 3.9568L6 8.00002H4C3.44772 8.00002 3 8.44774 3 9.00002V15C3 15.5523 3.44772 16 4 16H6L10.8519 20.0432C11.3078 20.4232 12 20.099 12 19.5055V4.49455Z"
9
+ stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
10
+ </svg>
24
11
  )
25
12
 
26
13
  Volume0Icon.displayName = 'Volume0Icon'
@@ -4,23 +4,10 @@ export const Volume1Icon = ({
4
4
  className,
5
5
  ...props
6
6
  }) => (
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- width={width}
10
- height={height}
11
- viewBox="0 0 24 24"
12
- fill="none"
13
- className={className}
14
- {...props}
15
- >
16
- <path
17
- d="M15.54 8.45999C16.4774 9.39763 17.0039 10.6692 17.0039 11.995C17.0039 13.3208 16.4774 14.5924 15.54 15.53M11 5L6 9H2V15H6L11 19V5Z"
18
- stroke="currentColor"
19
- strokeWidth="1.5"
20
- strokeLinecap="round"
21
- strokeLinejoin="round"
22
- />
23
- </svg>
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Volume 1 Icon">
8
+ <path d="M15.723 10C16.2523 10.5294 16.5496 11.2474 16.5496 11.9959C16.5496 12.7445 16.2523 13.4624 15.723 13.9918M6 8.00002L10.8519 3.9568C11.3078 3.57685 12 3.90107 12 4.49455V19.5055C12 20.099 11.3078 20.4232 10.8519 20.0432L6 16H4C3.44772 16 3 15.5523 3 15V9.00002C3 8.44774 3.44772 8.00002 4 8.00002H6Z"
9
+ stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
10
+ </svg>
24
11
  )
25
12
 
26
13
  Volume1Icon.displayName = 'Volume1Icon'
@@ -4,23 +4,10 @@ export const Volume2Icon = ({
4
4
  className,
5
5
  ...props
6
6
  }) => (
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- width={width}
10
- height={height}
11
- viewBox="0 0 24 24"
12
- fill="none"
13
- className={className}
14
- {...props}
15
- >
16
- <path
17
- d="M19.07 4.92999C20.9447 6.80527 21.9979 9.34835 21.9979 12C21.9979 14.6516 20.9447 17.1947 19.07 19.07M15.54 8.45999C16.4774 9.39763 17.0039 10.6692 17.0039 11.995C17.0039 13.3208 16.4774 14.5924 15.54 15.53M11 5L6 9H2V15H6L11 19V5Z"
18
- stroke="currentColor"
19
- strokeWidth="1.5"
20
- strokeLinecap="round"
21
- strokeLinejoin="round"
22
- />
23
- </svg>
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Volume 2 Icon">
8
+ <path d="M18.6063 6.21988C20.139 7.75303 21 9.83214 21 12C21 14.1679 20.139 16.247 18.6063 17.7801M15.723 10C16.2523 10.5294 16.5496 11.2474 16.5496 11.9959C16.5496 12.7445 16.2523 13.4624 15.723 13.9918M6 8.00002L10.8519 3.9568C11.3078 3.57685 12 3.90107 12 4.49455V19.5055C12 20.099 11.3078 20.4232 10.8519 20.0432L6 16H4C3.44772 16 3 15.5523 3 15V9.00002C3 8.44774 3.44772 8.00002 4 8.00002H6Z"
9
+ stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
10
+ </svg>
24
11
  )
25
12
 
26
13
  Volume2Icon.displayName = 'Volume2Icon'
@@ -4,32 +4,16 @@ export const WidgetIcon = ({
4
4
  className,
5
5
  ...props
6
6
  }) => (
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- width={width}
10
- height={height}
11
- viewBox="0 0 16 16"
12
- fill="none"
13
- className={className}
14
- {...props}
15
- >
16
- <path
17
- d="M2 10C2 9.63181 2.29848 9.33333 2.66667 9.33333H6C6.36819 9.33333 6.66667 9.63181 6.66667 10V13.3333C6.66667 13.7015 6.36819 14 6 14H2.66667C2.29848 14 2 13.7015 2 13.3333V10Z"
18
- stroke="currentColor"
19
- />
20
- <path
21
- d="M9.33333 10C9.33333 9.63181 9.63181 9.33333 10 9.33333H13.3333C13.7015 9.33333 14 9.63181 14 10V13.3333C14 13.7015 13.7015 14 13.3333 14H10C9.63181 14 9.33333 13.7015 9.33333 13.3333V10Z"
22
- stroke="currentColor"
23
- />
24
- <path
25
- d="M2 2.66667C2 2.29848 2.29848 2 2.66667 2H6C6.36819 2 6.66667 2.29848 6.66667 2.66667V6C6.66667 6.36819 6.36819 6.66667 6 6.66667H2.66667C2.29848 6.66667 2 6.36819 2 6V2.66667Z"
26
- stroke="currentColor"
27
- />
28
- <path
29
- d="M9.33333 2.66667C9.33333 2.29848 9.63181 2 10 2H13.3333C13.7015 2 14 2.29848 14 2.66667V6C14 6.36819 13.7015 6.66667 13.3333 6.66667H10C9.63181 6.66667 9.33333 6.36819 9.33333 6V2.66667Z"
30
- stroke="currentColor"
31
- />
32
- </svg>
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Widget Icon">
8
+ <path d="M13.9556 4.8C13.9556 4.08203 14.5376 3.5 15.2556 3.5H19.2C19.918 3.5 20.5 4.08203 20.5 4.8V8.74443C20.5 9.4624 19.918 10.0444 19.2 10.0444H15.2556C14.5376 10.0444 13.9556 9.4624 13.9556 8.74443V4.8Z"
9
+ stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
10
+ <path d="M3.5 4.8C3.5 4.08203 4.08203 3.5 4.8 3.5H8.74443C9.4624 3.5 10.0444 4.08203 10.0444 4.8V8.74443C10.0444 9.4624 9.4624 10.0444 8.74443 10.0444H4.8C4.08203 10.0444 3.5 9.4624 3.5 8.74443V4.8Z"
11
+ stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
12
+ <path d="M13.9556 15.2556C13.9556 14.5376 14.5376 13.9556 15.2556 13.9556H19.2C19.918 13.9556 20.5 14.5376 20.5 15.2556V19.2C20.5 19.918 19.918 20.5 19.2 20.5H15.2556C14.5376 20.5 13.9556 19.918 13.9556 19.2V15.2556Z"
13
+ stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
14
+ <path d="M3.5 15.2556C3.5 14.5376 4.08203 13.9556 4.8 13.9556H8.74443C9.4624 13.9556 10.0444 14.5376 10.0444 15.2556V19.2C10.0444 19.918 9.4624 20.5 8.74443 20.5H4.8C4.08203 20.5 3.5 19.918 3.5 19.2V15.2556Z"
15
+ stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10"/>
16
+ </svg>
33
17
  )
34
18
 
35
19
  WidgetIcon.displayName = 'WidgetIcon'
@@ -4,23 +4,8 @@ export const ZoomInIcon = ({
4
4
  className,
5
5
  ...props
6
6
  }) => (
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- width={width}
10
- height={height}
11
- viewBox="0 0 16 16"
12
- fill="none"
13
- className={className}
14
- {...props}
15
- >
16
- <g>
17
- <path
18
- d="M14 14L11.1 11.1M7.33333 5.33333V7.33333M7.33333 7.33333V9.33333M7.33333 7.33333H9.33333M7.33333 7.33333H5.33333M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z"
19
- stroke="currentColor"
20
- strokeLinecap="round"
21
- strokeLinejoin="round"
22
- />
23
- </g>
7
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Zoom In Icon">
8
+ <path d="M21 21L19 19M11 8V11M11 11V14M11 11H14M11 11H8M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
24
9
  </svg>
25
10
  )
26
11
 
@@ -0,0 +1,7 @@
1
+ export const ZoomOutIcon = ({ width = 16, height = 16, className, ...props }) => (
2
+ <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Zoom Out Icon">
3
+ <path d="M21 21L19 19M14 11H11H8M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
4
+ </svg>
5
+ )
6
+
7
+ ZoomOutIcon.displayName = 'ZoomOutIcon'
package/src/icons.jsx CHANGED
@@ -40,7 +40,7 @@ export { NoMusicIcon } from './icons/NoMusicIcon'
40
40
  export { TrimIcon } from './icons/TrimIcon'
41
41
  export { CropIcon } from './icons/CropIcon'
42
42
  export { MoisesLogoIcon } from './icons/MoisesLogoIcon'
43
- export { MoreIcon } from './icons/MoreIcon'
43
+ export { MoreIcon, MoreIcon as More2Icon } from './icons/MoreIcon'
44
44
  export { ZoomCloseIcon } from './icons/ZoomCloseIcon'
45
45
  export { ZoomInIcon } from './icons/ZoomInIcon'
46
46
  export { SettingsIcon } from './icons/SettingsIcon'
@@ -323,7 +323,6 @@ export { ListCheckIcon } from './icons/ListCheckIcon'
323
323
  export { MoneyIcon } from './icons/MoneyIcon'
324
324
  export { NoMoneyIcon } from './icons/NoMoneyIcon'
325
325
  export { MoonIcon } from './icons/MoonIcon'
326
- export { More2Icon } from './icons/More2Icon'
327
326
  export { MultipleUsersIcon } from './icons/MultipleUsersIcon'
328
327
  export { UserGroup3Icon } from './icons/UserGroup3Icon'
329
328
  export { NotificationsIcon } from './icons/NotificationsIcon'
@@ -454,3 +453,14 @@ export { StemsIcon } from './icons/StemsIcon'
454
453
  export { SampleIcon } from './icons/SampleIcon'
455
454
  export { PercussionIcon } from './icons/PercussionIcon'
456
455
  export { HiFi1Icon } from './icons/HiFi1Icon'
456
+ export { BanjoIcon } from './icons/BanjoIcon'
457
+ export { CavacoIcon } from './icons/CavacoIcon'
458
+ export { MandolinIcon } from './icons/MandolinIcon'
459
+ export { MusicBookIcon } from './icons/MusicBookIcon'
460
+ export { MixerVerticalIcon } from './icons/MixerVerticalIcon'
461
+ export { NowPlayingIcon } from './icons/NowPlayingIcon'
462
+ export { FitWidthIcon } from './icons/FitWidthIcon'
463
+ export { DownloadIcon } from './icons/DownloadIcon'
464
+ export { MoreMenuIcon } from './icons/MoreMenuIcon'
465
+ export { ZoomOutIcon } from './icons/ZoomOutIcon'
466
+ export { AutomationPenIcon } from './icons/AutomationPenIcon'