@moises.ai/design-system 4.19.3 → 4.19.4

package/src/icons/SongBarIcon.jsx

@@ -4,23 +4,9 @@ export const SongBarIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 22 16"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M21 8H1M1 15H21M1 1H21M11 15V1"
-      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="Song Bar Icon">
+  <path d="M21 12H3M3 19H21M3 5H21M12 19V5" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 SongBarIcon.displayName = 'SongBarIcon'

package/src/icons/SoundEffectsIcon.jsx

@@ -4,23 +4,14 @@ export const SoundEffectsIcon = ({
   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.125 3.25V7.0625M17.0312 5.15625H13.2188M9.75 5L4.75 9H0.75V15H4.75L9.75 19V5ZM23.0875 13.9857C20.475 13.9847 18.3556 11.8695 18.3394 9.25415C18.3232 11.8665 16.2084 13.9799 13.6 13.9857C16.2178 13.9915 18.3383 16.1202 18.3393 18.7456C18.3402 16.1172 20.4656 13.9866 23.0875 13.9857Z"
-      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="Sound Effects Icon">
+  <path d="M11.5 4.49455C11.5 3.90107 10.8078 3.57685 10.3519 3.9568L5.5 8.00002H3.5C2.94772 8.00002 2.5 8.44774 2.5 9.00002V15C2.5 15.5523 2.94772 16 3.5 16H5.5L10.3519 20.0432C10.8078 20.4232 11.5 20.099 11.5 19.5055V4.49455Z" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M16.549 4.19151C16.622 3.93616 16.9838 3.93616 17.0568 4.19151C17.3826 5.33184 18.274 6.22321 19.4143 6.54902C19.6696 6.62197 19.6696 6.98384 19.4143 7.05679C18.274 7.3826 17.3826 8.27397 17.0568 9.4143C16.9838 9.66965 16.622 9.66965 16.549 9.4143C16.2232 8.27397 15.3318 7.3826 14.1915 7.05679C13.9362 6.98384 13.9362 6.62197 14.1915 6.54902C15.3318 6.22321 16.2232 5.33184 16.549 4.19151Z" 
+  fill="currentColor"/>
+  <path d="M18.0924 11.3075C18.2095 10.8975 18.7905 10.8975 18.9076 11.3075C19.4307 13.1382 20.8618 14.5693 22.6925 15.0924C23.1025 15.2095 23.1025 15.7905 22.6925 15.9076C20.8618 16.4307 19.4307 17.8618 18.9076 19.6925C18.7905 20.1025 18.2095 20.1025 18.0924 19.6925C17.5693 17.8618 16.1382 16.4307 14.3075 15.9076C13.8975 15.7905 13.8975 15.2095 14.3075 15.0924C16.1382 14.5693 17.5693 13.1382 18.0924 11.3075Z"
+   fill="currentColor"/>
+</svg>
 )
 
 SoundEffectsIcon.displayName = 'SoundEffectsIcon'

package/src/icons/SparkBarsIcon.jsx

@@ -4,22 +4,10 @@ export const SparkBarsIcon = ({
   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 2.5V21.5M16.5 9V15M7.5 9L7.5 15M21 11.75V12.25M3 11.75L3 12.25"
-      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="SparkBars Icon">
+  <path d="M12 2.5V21.5M16.5 9V15M7.5 9L7.5 15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
+  <path d="M2 12.25V11.75C2 11.1977 2.44772 10.75 3 10.75C3.55228 10.75 4 11.1977 4 11.75V12.25C4 12.8023 3.55228 13.25 3 13.25C2.44772 13.25 2 12.8023 2 12.25ZM20 12.25V11.75C20 11.1977 20.4477 10.75 21 10.75C21.5523 10.75 22 11.1977 22 11.75V12.25C22 12.8023 21.5523 13.25 21 13.25C20.4477 13.25 20 12.8023 20 12.25Z" fill="currentColor"/>
+</svg>
 )
 
 SparkBarsIcon.displayName = 'SparkBarsIcon'

package/src/icons/SparklesIcon.jsx

@@ -1,11 +1,8 @@
 export const SparklesIcon = ({ 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="M10.1648 5.65189C10.1927 10.1575 13.844 13.8015 18.3447 13.8032C13.8277 13.8048 10.1663 17.4753 10.1646 22.0034C10.163 17.4804 6.50991 13.8131 2 13.8032C6.49362 13.7932 10.1369 10.1523 10.1648 5.65189Z"
-      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M18.996 2C19.0062 3.65328 20.346 4.99041 21.9975 4.99101C20.34 4.99162 18.9965 6.33845 18.9959 8C18.9953 6.34034 17.6549 4.99468 16 4.99102C17.6489 4.98737 18.9858 3.65139 18.996 2Z"
-      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="Sparkles Icon">
+  <path d="M11.5228 3.34069C11.6016 2.78878 12.3985 2.78878 12.4773 3.34069C13.0834 7.58312 16.4167 10.9165 20.6591 11.5225C21.211 11.6014 21.211 12.3982 20.6591 12.4771C16.4167 13.0831 13.0834 16.4165 12.4773 20.6589C12.3985 21.2108 11.6016 21.2108 11.5228 20.6589C10.9167 16.4165 7.58336 13.0831 3.34094 12.4771C2.78902 12.3982 2.78902 11.6014 3.34094 11.5225C7.58336 10.9165 10.9167 7.58312 11.5228 3.34069Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M19.2462 1.88877C19.3191 1.63343 19.681 1.63343 19.7539 1.88877C20.0797 3.02911 20.9711 3.92048 22.1114 4.24629C22.3668 4.31924 22.3668 4.6811 22.1114 4.75406C20.9711 5.07987 20.0797 5.97124 19.7539 7.11157C19.681 7.36691 19.3191 7.36691 19.2462 7.11157C18.9204 5.97124 18.029 5.07987 16.8887 4.75406C16.6333 4.6811 16.6333 4.31924 16.8887 4.24629C18.029 3.92048 18.9204 3.02911 19.2462 1.88877Z" fill="currentColor"/>
+</svg>
 )
 
 SparklesIcon.displayName = 'SparklesIcon'

package/src/icons/SpeedChangerIcon.jsx

@@ -4,21 +4,8 @@ export const SpeedChangerIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <g>
-      <path
-        d="M19.7782 4.22182L19.2478 4.75215L19.7782 4.22182ZM23 12V12.75C23.4142 12.75 23.75 12.4142 23.75 12L23 12ZM1.00006 12L0.250061 12C0.250062 12.4142 0.585848 12.75 1.00006 12.75L1.00006 12ZM20 11.25C19.5858 11.25 19.25 11.5858 19.25 12C19.25 12.4142 19.5858 12.75 20 12.75V11.25ZM4 12.75C4.41421 12.75 4.75 12.4142 4.75 12C4.75 11.5858 4.41421 11.25 4 11.25V12.75ZM11.2501 4.18999C11.2501 4.6042 11.5858 4.93999 12.0001 4.93999C12.4143 4.93999 12.7501 4.6042 12.7501 4.18999H11.2501ZM6.02541 7.08598C6.31831 7.37887 6.79318 7.37887 7.08607 7.08598C7.37897 6.79309 7.37897 6.31821 7.08607 6.02532L6.02541 7.08598ZM17.9272 7.13342C18.2201 6.84053 18.2201 6.36565 17.9272 6.07276C17.6344 5.77987 17.1595 5.77987 16.8666 6.07276L17.9272 7.13342ZM19.75 16C19.75 15.5858 19.4142 15.25 19 15.25C18.5858 15.25 18.25 15.5858 18.25 16H19.75ZM18.25 22C18.25 22.4142 18.5858 22.75 19 22.75C19.4142 22.75 19.75 22.4142 19.75 22H18.25ZM16 18.25C15.5858 18.25 15.25 18.5858 15.25 19C15.25 19.4142 15.5858 19.75 16 19.75V18.25ZM22 19.75C22.4142 19.75 22.75 19.4142 22.75 19C22.75 18.5858 22.4142 18.25 22 18.25V19.75ZM2 18.25C1.58579 18.25 1.25 18.5858 1.25 19C1.25 19.4142 1.58579 19.75 2 19.75V18.25ZM7 19.75C7.41421 19.75 7.75 19.4142 7.75 19C7.75 18.5858 7.41421 18.25 7 18.25V19.75ZM4.75221 4.75215C8.75507 0.749285 15.245 0.749285 19.2478 4.75215L20.3085 3.69149C15.7199 -0.897162 8.28019 -0.897162 3.69155 3.69149L4.75221 4.75215ZM19.2478 4.75215C21.2494 6.75373 22.25 9.37563 22.25 12L23.75 12C23.75 8.99407 22.6027 5.98567 20.3085 3.69149L19.2478 4.75215ZM1.75006 12C1.75005 9.37563 2.75062 6.75373 4.75221 4.75215L3.69155 3.69149C1.39736 5.98567 0.250052 8.99407 0.250061 12L1.75006 12ZM23 11.25H20V12.75H23V11.25ZM1.00006 12.75H4V11.25H1.00006V12.75ZM11.2501 1V4.18999H12.7501V1H11.2501ZM3.76975 4.83032L6.02541 7.08598L7.08607 6.02532L4.83041 3.76966L3.76975 4.83032ZM13.5303 11.5303L17.9272 7.13342L16.8666 6.07276L12.4697 10.4697L13.5303 11.5303ZM12 14.4C13.3255 14.4 14.4 13.3255 14.4 12H12.9C12.9 12.497 12.4971 12.9 12 12.9V14.4ZM14.4 12C14.4 10.6745 13.3255 9.59998 12 9.59998V11.1C12.4971 11.1 12.9 11.5029 12.9 12H14.4ZM12 9.59998C10.6746 9.59998 9.60004 10.6745 9.60004 12H11.1C11.1 11.5029 11.503 11.1 12 11.1V9.59998ZM9.60004 12C9.60004 13.3255 10.6746 14.4 12 14.4V12.9C11.503 12.9 11.1 12.497 11.1 12H9.60004ZM18.25 16V22H19.75V16H18.25ZM16 19.75H22V18.25H16V19.75ZM2 19.75H7V18.25H2V19.75Z"
-        fill="currentColor"
-      />
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none"  className={className} {...props} aria-label="Speed Changer Icon">
+  <path d="M20.1 11.9998C20.1 12.4969 20.5029 12.8998 21 12.8998C21.4971 12.8998 21.9 12.4969 21.9 11.9998H21H20.1ZM21.3339 8.70002C21.1682 8.23139 20.654 7.98579 20.1854 8.15147C19.7167 8.31714 19.4711 8.83135 19.6368 9.29999L20.4854 9L21.3339 8.70002ZM17.7276 6.27244C18.079 6.62391 18.6489 6.62391 19.0004 6.27244C19.3518 5.92097 19.3518 5.35112 19.0004 4.99965L18.364 5.63604L17.7276 6.27244ZM2.1 12C2.1 12.4971 2.50294 12.9 3 12.9C3.49706 12.9 3.9 12.4971 3.9 12H3H2.1ZM17.1 22C17.1 22.4971 17.5029 22.9 18 22.9C18.4971 22.9 18.9 22.4971 18.9 22H18H17.1ZM18.9 16C18.9 15.5029 18.4971 15.1 18 15.1C17.5029 15.1 17.1 15.5029 17.1 16H18H18.9ZM15 18.1C14.5029 18.1 14.1 18.5029 14.1 19C14.1 19.4971 14.5029 19.9 15 19.9V19V18.1ZM21 19.9C21.4971 19.9 21.9 19.4971 21.9 19C21.9 18.5029 21.4971 18.1 21 18.1V19V19.9ZM3 18.1C2.50294 18.1 2.1 18.5029 2.1 19C2.1 19.4971 2.50294 19.9 3 19.9V19V18.1ZM9 19.9C9.49706 19.9 9.9 19.4971 9.9 19C9.9 18.5029 9.49706 18.1 9 18.1V19V19.9ZM11.3665 11.3607C11.0135 11.7105 11.0108 12.2804 11.3607 12.6335C11.7105 12.9865 12.2804 12.9892 12.6335 12.6393L12 12L11.3665 11.3607ZM19.0163 6.31511C19.3694 5.96526 19.372 5.39542 19.0221 5.04233C18.6723 4.68924 18.1024 4.68661 17.7494 5.03646L18.3828 5.67579L19.0163 6.31511ZM21 11.9998H21.9C21.9 10.8744 21.7081 9.7586 21.3339 8.70002L20.4854 9L19.6368 9.29999C19.943 10.1661 20.1 11.079 20.1 11.9998H21ZM18.364 5.63604L19.0004 4.99965C17.6158 3.61511 15.8518 2.67222 13.9314 2.29023L13.7558 3.17294L13.5802 4.05564C15.1515 4.36818 16.5948 5.13963 17.7276 6.27244L18.364 5.63604ZM13.7558 3.17294L13.9314 2.29023C12.011 1.90824 10.0204 2.10429 8.21143 2.8536L8.55585 3.68509L8.90026 4.51658C10.3803 3.90351 12.009 3.7431 13.5802 4.05564L13.7558 3.17294ZM8.55585 3.68509L8.21143 2.8536C6.40244 3.60291 4.85628 4.87181 3.76845 6.49986L4.51677 6.99987L5.2651 7.49989C6.15513 6.16785 7.42018 5.12965 8.90026 4.51658L8.55585 3.68509ZM4.51677 6.99987L3.76845 6.49986C2.68062 8.12791 2.1 10.042 2.1 12H3H3.9C3.9 10.398 4.37506 8.83192 5.2651 7.49989L4.51677 6.99987ZM18 22H18.9L18.9 19H18H17.1L17.1 22H18ZM18 19H18.9V16H18H17.1V19H18ZM15 19V19.9H18V19V18.1H15V19ZM18 19V19.9H21V19V18.1H18V19ZM3 19V19.9H9V19V18.1H3V19ZM12 12L12.6335 12.6393L19.0163 6.31511L18.3828 5.67579L17.7494 5.03646L11.3665 11.3607L12 12Z" fill="currentColor"/>
 </svg>
 )
 

package/src/icons/SpliterIcon.jsx

@@ -4,23 +4,10 @@ export const SpliterIcon = ({
   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="M2.75 9.75L12.0145 9.75C13.0661 9.75 14.0754 9.33589 14.8239 8.5973L20.75 2.75M20.75 2.75L15.75 2.75M20.75 2.75V7.75M2.75 13.75L12.0145 13.75C13.0661 13.75 14.0754 14.1641 14.8239 14.9027L20.75 20.75M20.75 20.75L15.75 20.75M20.75 20.75V15.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="Spliter Icon">
+  <path d="M3.5 9.5L12.7645 9.5C13.8161 9.5 14.8254 9.08589 15.5739 8.34729L20.5 3.5M20.5 9V3.5H15M3.5 14.5L12.7645 14.5C13.8161 14.5 14.8254 14.9141 15.5739 15.6527L20.5 20.5M20.5 15V20.5L15 20.5"
+     stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 SpliterIcon.displayName = 'SpliterIcon'

package/src/icons/Star1Icon.jsx

@@ -1,8 +1,9 @@
 export const Star1Icon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={width} className={className} {...props} height={height} viewBox="0 0 24 24" fill="none">
-    <path d="M6 21.5L7 16H17L18 21.5L12 18.5L6 21.5Z" fill="currentColor" />
-    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" 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="Star 1 Icon">
+  <path d="M6 21.5L7 16H17L18 21.5L12 18.5L6 21.5Z" fill="currentColor"/>
+  <path d="M11.2693 2.63933C11.5512 2.00694 12.4488 2.00694 12.7307 2.63933L14.9891 7.7059C15.1054 7.96673 15.3519 8.1458 15.6359 8.17578L21.1523 8.75801C21.8409 8.83068 22.1183 9.68436 21.6039 10.1479L17.4832 13.8614C17.2711 14.0526 17.177 14.3423 17.2362 14.6217L18.3872 20.0481C18.5308 20.7254 17.8046 21.253 17.2049 20.9071L12.3997 18.1356C12.1523 17.9929 11.8477 17.9929 11.6003 18.1356L6.79515 20.9071C6.19539 21.253 5.4692 20.7254 5.61286 20.0481L6.76381 14.6217C6.82306 14.3423 6.72891 14.0526 6.51678 13.8614L2.39608 10.1479C1.88175 9.68437 2.15912 8.83068 2.84767 8.75801L8.36416 8.17578C8.64815 8.1458 8.89462 7.96673 9.01089 7.7059L11.2693 2.63933Z" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 Star1Icon.displayName = 'Star1Icon'

package/src/icons/Star2Icon.jsx

@@ -1,8 +1,9 @@
 export const Star2Icon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={width} className={className} {...props} height={height} viewBox="0 0 24 24" fill="none">
-    <path d="M6 21.5L7 16L6.5 13H18L17 16L18 21.5L12 18.5L6 21.5Z" fill="currentColor" />
-    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" 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="Star 2 Icon">
+  <path d="M6 21.5L7 16L6.5 13H18L17 16L18 21.5L12 18.5L6 21.5Z" fill="currentColor"/>
+  <path d="M11.2693 2.63933C11.5512 2.00694 12.4488 2.00694 12.7307 2.63933L14.9891 7.7059C15.1054 7.96673 15.3519 8.1458 15.6359 8.17578L21.1523 8.75801C21.8409 8.83068 22.1183 9.68436 21.6039 10.1479L17.4832 13.8614C17.2711 14.0526 17.177 14.3423 17.2362 14.6217L18.3872 20.0481C18.5308 20.7254 17.8046 21.253 17.2049 20.9071L12.3997 18.1356C12.1523 17.9929 11.8477 17.9929 11.6003 18.1356L6.79515 20.9071C6.19539 21.253 5.4692 20.7254 5.61286 20.0481L6.76381 14.6217C6.82306 14.3423 6.72891 14.0526 6.51678 13.8614L2.39608 10.1479C1.88175 9.68437 2.15912 8.83068 2.84767 8.75801L8.36416 8.17578C8.64815 8.1458 8.89462 7.96673 9.01089 7.7059L11.2693 2.63933Z"
+   stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 Star2Icon.displayName = 'Star2Icon'

package/src/icons/Star3Icon.jsx

@@ -1,8 +1,9 @@
 export const Star3Icon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={width} className={className} {...props} height={height} viewBox="0 0 24 24" fill="none">
-    <path d="M6 21.5L7 14.5L3.5 10.5H20L17 14L18 21.5L12 18.5L6 21.5Z" fill="currentColor" />
-    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" 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="Star 3 Icon">
+  <path d="M6 21.5L7 14.5L3.5 10.5H20L17 14L18 21.5L12 18.5L6 21.5Z" fill="currentColor"/>
+  <path d="M11.2693 2.63933C11.5512 2.00694 12.4488 2.00694 12.7307 2.63933L14.9891 7.7059C15.1054 7.96673 15.3519 8.1458 15.6359 8.17578L21.1523 8.75801C21.8409 8.83068 22.1183 9.68436 21.6039 10.1479L17.4832 13.8614C17.2711 14.0526 17.177 14.3423 17.2362 14.6217L18.3872 20.0481C18.5308 20.7254 17.8046 21.253 17.2049 20.9071L12.3997 18.1356C12.1523 17.9929 11.8477 17.9929 11.6003 18.1356L6.79515 20.9071C6.19539 21.253 5.4692 20.7254 5.61286 20.0481L6.76381 14.6217C6.82306 14.3423 6.72891 14.0526 6.51678 13.8614L2.39608 10.1479C1.88175 9.68437 2.15912 8.83068 2.84767 8.75801L8.36416 8.17578C8.64815 8.1458 8.89462 7.96673 9.01089 7.7059L11.2693 2.63933Z" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 Star3Icon.displayName = 'Star3Icon'

package/src/icons/StarIcon.jsx

@@ -1,20 +1,8 @@
 export const StarIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 16 15"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M8.00065 1.33203L10.0607 5.50536L14.6673 6.1787L11.334 9.42537L12.1207 14.012L8.00065 11.8454L3.88065 14.012L4.66732 9.42537L1.33398 6.1787L5.94065 5.50536L8.00065 1.33203Z"
-      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="Star Icon">
+  <path d="M11.2693 2.63933C11.5512 2.00694 12.4488 2.00694 12.7307 2.63933L14.9891 7.7059C15.1054 7.96673 15.3519 8.1458 15.6359 8.17578L21.1523 8.75801C21.8409 8.83068 22.1183 9.68436 21.6039 10.1479L17.4832 13.8614C17.2711 14.0526 17.177 14.3423 17.2362 14.6217L18.3872 20.0481C18.5308 20.7254 17.8046 21.253 17.2049 20.9071L12.3997 18.1356C12.1523 17.9929 11.8477 17.9929 11.6003 18.1356L6.79515 20.9071C6.19539 21.253 5.4692 20.7254 5.61286 20.0481L6.76381 14.6217C6.82306 14.3423 6.72891 14.0526 6.51678 13.8614L2.39608 10.1479C1.88175 9.68437 2.15912 8.83068 2.84767 8.75801L8.36416 8.17578C8.64815 8.1458 8.89462 7.96673 9.01089 7.7059L11.2693 2.63933Z"
+   stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 StarIcon.displayName = 'StarIcon'

package/src/icons/TrashIcon.jsx

@@ -1,21 +1,7 @@
 export const TrashIcon = ({ 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="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6"
-      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="Trash Icon">
+  <path d="M9 3.25H15M6 6.75V18.25C6 19.6307 7.11929 20.75 8.5 20.75H15.5C16.8807 20.75 18 19.6307 18 18.25V6.75M6 6.75H4.5M6 6.75H18M18 6.75H19.5" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 TrashIcon.displayName = 'TrashIcon'

package/src/icons/TrimIcon.jsx

@@ -1,21 +1,6 @@
 export const TrimIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <g>
-      <path
-        d="M13.3333 2.66667L5.41333 10.5867M9.64665 9.65332L13.3333 13.3333M5.41333 5.41333L8 8M6 4C6 5.10457 5.10457 6 4 6C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4ZM6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Trim Icon">
+  <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12M9 6C9 7.65685 7.65685 9 6 9C4.34315 9 3 7.65685 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6ZM9 18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.3431 4.34315 15 6 15C7.65685 15 9 16.3431 9 18Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
 </svg>
 )
 

package/src/icons/UkuleleIcon.jsx

@@ -4,46 +4,14 @@ export const UkuleleIcon = ({
   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.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"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeMiterlimit="10"
-    />
-    <path
-      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"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeMiterlimit="10"
-    />
-    <path
-      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"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeMiterlimit="10"
-    />
-    <path
-      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"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeMiterlimit="10"
-    />
-    <path
-      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"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      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} aria-label="Ukulele Icon">
+  <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" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  <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"/>
+  <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"/>
+  <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"/>
+  <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"/>
+</svg>
 )
 
 UkuleleIcon.displayName = 'UkuleleIcon'

package/src/icons/UndoIcon.jsx

@@ -1,20 +1,7 @@
 export const UndoIcon = ({ 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="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"
-      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="Undo Icon">
+  <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"/>
+</svg>  
 )
 
 UndoIcon.displayName = 'UndoIcon'

package/src/icons/UnlockIcon.jsx

@@ -1,17 +1,7 @@
 export const UnlockIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <g>
-      <path d="M4.66667 7.33398V4.66732C4.66667 3.78326 5.01786 2.93542 5.64298 2.3103C6.2681 1.68517 7.11595 1.33398 8 1.33398C8.88406 1.33398 9.7319 1.68517 10.357 2.3103C10.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"
-        stroke="currentColor" strokeLinecap="round" strokeLinejoin="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="Unlock Icon">
+  <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"/>
+</svg>  
 )
 
 UnlockIcon.displayName = 'UnlockIcon'

package/src/icons/UserGroupIcon.jsx

@@ -4,23 +4,10 @@ export const UserGroupIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 12 13"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      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"
-      stroke="currentColor"
-      strokeWidth="0.75"
-      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="User Group Icon">
+  <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" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 UserGroupIcon.displayName = 'UserGroupIcon'

package/src/icons/UserIcon.jsx

@@ -1,8 +1,8 @@
 export const UserIcon = ({ 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 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"
-      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="User Icon">
+  <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" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 UserIcon.displayName = 'UserIcon'

package/src/icons/UserVoiceIcon.jsx

@@ -1,10 +1,8 @@
 export const UserVoiceIcon = ({ 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="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"
-      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="User Voice Icon">
+  <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"
+   stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 UserVoiceIcon.displayName = 'UserVoiceIcon'

package/src/icons/Video2Icon.jsx

@@ -4,28 +4,10 @@ export const Video2Icon = ({
   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.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"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeMiterlimit="10"
-    />
-    <path
-      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"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      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} aria-label="Video2 Icon">
+  <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"/>
+  <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"/>
+</svg>
 )
 
 Video2Icon.displayName = 'Video2Icon'

package/src/icons/VideoIcon.jsx

@@ -1,21 +1,7 @@
 export const VideoIcon = ({ 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="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"
-      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="Video Icon">
+  <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"/>
+</svg>
 )
 
 VideoIcon.displayName = 'VideoIcon'

package/src/icons/Volume0Icon.jsx

@@ -4,23 +4,10 @@ export const Volume0Icon = ({
   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 5L6 9H2V15H6L11 19V5Z"
-      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="Volume 0 Icon">
+  <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" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 Volume0Icon.displayName = 'Volume0Icon'

package/src/icons/Volume1Icon.jsx

@@ -4,23 +4,10 @@ export const Volume1Icon = ({
   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.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"
-      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="Volume 1 Icon">
+  <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" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 Volume1Icon.displayName = 'Volume1Icon'