@moises.ai/design-system 4.19.2 → 4.19.3

package/src/icons/BookmarkIcon.jsx

@@ -4,9 +4,21 @@ 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} 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>
+  <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>
 )
 
 BookmarkIcon.displayName = 'BookmarkIcon'

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} 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>
+  <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>
 )
 
 CheckIcon.displayName = 'CheckIcon'

package/src/icons/ChevronLeftIcon.jsx

@@ -4,9 +4,23 @@ 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} 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>
+  <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>
 )
 
 ChevronLeftIcon.displayName = 'ChevronLeftIcon'

package/src/icons/ChevronRightIcon.jsx

@@ -4,9 +4,23 @@ 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} 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>
+  <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>
 )
 
 ChevronRightIcon.displayName = 'ChevronRightIcon'

package/src/icons/ChevronUpIcon.jsx

@@ -4,9 +4,23 @@ 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} 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>  
+  <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>
 )
 
 ChevronUpIcon.displayName = 'ChevronUpIcon'

package/src/icons/ChordGrid4Icon.jsx

@@ -1,6 +1,9 @@
 export const ChordGrid4Icon = ({ 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="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 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>
 )
 

package/src/icons/Chords2Icon.jsx

@@ -4,10 +4,22 @@ 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} 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>
+  <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>
 )
 
 Chords2Icon.displayName = 'Chords2Icon'

package/src/icons/ChordsDetectionIcon.jsx

@@ -4,11 +4,28 @@ 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} 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>
+  <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>
 )
 
 ChordsDetectionIcon.displayName = 'ChordsDetectionIcon'

package/src/icons/CloseIcon.jsx

@@ -1,7 +1,20 @@
 export const CloseIcon = ({ 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="Close Icon">
-  <path d="M19 5L5 19M5 5L19 19" stroke="currentColor" strokeWidth="1.8" 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}
+  >
+    <path
+      d="M12.6668 3.33301L3.3335 12.6663M3.3335 3.33301L12.6668 12.6663"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
 )
 
 CloseIcon.displayName = 'CloseIcon'

package/src/icons/ComputerIcon.jsx

@@ -4,9 +4,23 @@ 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} 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>  
+  <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>
 )
 
 ComputerIcon.displayName = 'ComputerIcon'

package/src/icons/CountInIcon.jsx

@@ -1,10 +1,23 @@
 export const CountInIcon = ({ width, height, 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="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>
+  <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>
 )
 
 CountInIcon.displayName = 'CountInIcon'

package/src/icons/CropIcon.jsx

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

package/src/icons/CrownIcon.jsx

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

package/src/icons/DelayIcon.jsx

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

package/src/icons/DynamicMicrophone2Icon.jsx

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

package/src/icons/EditIcon.jsx

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

package/src/icons/EffectsIcon.jsx

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

package/src/icons/EmailIcon.jsx

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

package/src/icons/ExternalLinkIcon.jsx

@@ -1,7 +1,7 @@
 export const ExternalLinkIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="External Link Icon">
-  <path d="M20.5 14.25V17.5C20.5 19.1569 19.1569 20.5 17.5 20.5H6.5C4.84315 20.5 3.5 19.1569 3.5 17.5V6.5C3.5 4.84315 4.84315 3.5 6.5 3.5H9.75M15 3H21V9M21 3L12.1214 11.9602" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-</svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M16 3H21M21 3V8M21 3L9 15M11.5 3.99998H6.5C4.01472 3.99998 2 6.0147 2 8.49998V17.5C2 19.9853 4.01472 22 6.5 22H15.5C17.9853 22 20 19.9853 20 17.5V13.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
 )
 
 ExternalLinkIcon.displayName = 'ExternalLinkIcon'

package/src/icons/EyeIcon.jsx

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

package/src/icons/EyeOffIcon.jsx

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

package/src/icons/Filter2Icon.jsx

@@ -4,9 +4,23 @@ export const Filter2Icon = ({
   className,
   ...props
 }) => (
-<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Filter2 Icon">
-  <path d="M4 6H20M11 18H13M7.5 12H16.5" stroke="currentColor" strokeWidth="1.8" 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}
+  >
+    <path
+      d="M4.25 6H19.75M10.75 18H13.25M7.75 12H16.25"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
 )
 
 Filter2Icon.displayName = 'Filter2Icon'

package/src/icons/FlatAndSharpIcon.jsx

@@ -4,9 +4,22 @@ export const FlatAndSharpIcon = ({
   className,
   ...props
 }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Flat And Sharp Icon">
-  <path d="M4 10.9461L15.5488 7.69567M15.5488 7.69567L20 6.44288M15.5488 7.69567V4M4 18.5531L8.69509 17.2316M8.69509 17.2316L15.5488 15.3027M8.69509 17.2316V13.2M8.69509 17.2316V21.08M15.5488 15.3027L20 14.0499M15.5488 15.3027V11.2829M15.5488 15.3027V19.1622M8.69509 9.62V5.92" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
-</svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M2 16.9845L5.85173 15.477C7.16341 14.9637 8.58065 15.9556 8.58065 17.3641C8.58065 19.0738 7.49405 20.6185 5.87659 21.1724L2 22.5V16.9845ZM2 16.9845V7.74377M15.3648 2.7571V5.97519M15.3648 5.97519V10.058M15.3648 5.97519L12.34 7.15342M15.3648 5.97519L19.1361 4.5062M15.3648 10.058V13.1282M15.3648 10.058L12.34 11.2362M15.3648 10.058L19.1361 8.58901M19.1361 1.5V4.5062M19.1361 4.5062V8.58901M19.1361 4.5062L22.0038 3.38917M19.1361 8.58901V11.8711M19.1361 8.58901L22.0038 7.47199"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
 )
 
 FlatAndSharpIcon.displayName = 'FlatAndSharpIcon'