@moises.ai/design-system 4.19.3 → 4.19.4

package/src/icons/MusicNoteIcon.jsx

@@ -1,21 +1,7 @@
 export const MusicNoteIcon = ({ 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}
-  >
-    <path
-      d="M11.3389 15.1561V18.9192C11.3389 19.827 10.7276 20.6135 9.84994 20.8454L7.70094 21.4133C6.43228 21.7486 5.18994 20.7919 5.18994 19.4797V18.3213C5.18994 17.4135 5.80131 16.6196 6.67894 16.3876L11.3389 15.1561ZM11.3389 15.1561V2.4519C11.3389 5.99992 17 5.99991 17 11.9999"
-      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="Music Note Icon">
+  <path d="M18 11.0556V9.67989C18 8.35152 17.3405 7.10981 16.24 6.36593L12.78 4.02722C12.4479 3.80278 12 4.04068 12 4.44147V18M12 14.5L7.62171 15.9594C6.65324 16.2823 6 17.1886 6 18.2094C6 19.8283 7.58595 20.9713 9.12171 20.4594L11.3162 19.7279C11.7246 19.5918 12 19.2097 12 18.7792V14.5Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 MusicNoteIcon.displayName = 'MusicNoteIcon'

package/src/icons/MusicRemoveIcon.jsx

@@ -4,23 +4,9 @@ export const MusicRemoveIcon = ({
   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.25 7.49997H9.75M15.3389 16.1561V19.9192C15.3389 20.827 14.7276 21.6135 13.8499 21.8454L11.7009 22.4133C10.4323 22.7486 9.18994 21.7919 9.18994 20.4797V19.3213C9.18994 18.4135 9.80131 17.6196 10.6789 17.3876L15.3389 16.1561ZM15.3389 16.1561V3.4519C15.3389 6.99992 21 6.99991 21 12.9999"
-      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="Music Remove Icon">
+  <path d="M20.5 11.0556V9.67989C20.5 8.35152 19.8405 7.10981 18.74 6.36593L15.28 4.02722C14.9479 3.80278 14.5 4.04068 14.5 4.44147V18M9.5 6.5H3.5M14.5 14.5L10.1217 15.9594C9.15324 16.2823 8.5 17.1886 8.5 18.2094C8.5 19.8283 10.086 20.9713 11.6217 20.4594L13.8162 19.7279C14.2246 19.5918 14.5 19.2097 14.5 18.7792V14.5Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 MusicRemoveIcon.displayName = 'MusicRemoveIcon'

package/src/icons/NoChords2Icon.jsx

@@ -4,22 +4,9 @@ export const NoChords2Icon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M11.5 19.5H3.80001C3.63432 19.5 3.50001 19.3657 3.50001 19.2V12.5M3.50001 12.5H9.00001M3.50001 12.5V6.5M15 3.5V13M15 13C15 10.5 16.7046 8.98404 18.1189 8.98404C19.8229 8.98404 20.7771 10.9777 20.4023 12.8521C20.0936 14.3954 19.0727 15.6395 17.7038 16.3495M15 13V13.8M11.5 5H6.50001M2.06067 1L22.2132 21.1525"
-      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="No Chords 2 Icon">
+  <path d="M11 5H5M11 19.5H5C4.17157 19.5 3.5 18.8284 3.5 18V12.5M3.5 8.5V12.5M3.5 12.5H7.5M15 3.5V13M15 13C15 10.5 16.7046 8.98404 18.1189 8.98404C19.8229 8.98404 20.7771 10.9777 20.4023 12.8521C20.0249 14.739 18.5828 16.1787 16.7416 16.7416M15 13V15M21 21L16.7416 16.7416M3 3L15 15M15 15L16.7416 16.7416" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>    
 )
 
 NoChords2Icon.displayName = 'NoChords2Icon'

package/src/icons/NoChordsDetectionIcon.jsx

@@ -4,28 +4,12 @@ export const NoChordsDetectionIcon = ({
   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 22V22.75H4.5V22H3ZM4.5 9.12497C4.5 8.71076 4.16421 8.37497 3.75 8.37497C3.33579 8.37497 3 8.71076 3 9.12497H4.5ZM10 1.99997C10 1.58576 9.66422 1.24997 9.25 1.24997C8.83579 1.24997 8.5 1.58576 8.5 1.99997H10ZM15.5 1.99997C15.5 1.58576 15.1642 1.24997 14.75 1.24997C14.3358 1.24997 14 1.58576 14 1.99997H15.5ZM14 22V22.75H15.5V22H14ZM15.5 20.125C15.5 19.7108 15.1642 19.375 14.75 19.375C14.3358 19.375 14 19.7108 14 20.125H15.5ZM2.45406 1.39338C2.16117 1.10048 1.68629 1.10048 1.3934 1.39338C1.10051 1.68627 1.10051 2.16114 1.3934 2.45404L2.45406 1.39338ZM21.5459 22.6066C21.8388 22.8995 22.3137 22.8995 22.6066 22.6066C22.8995 22.3137 22.8995 21.8388 22.6066 21.5459L21.5459 22.6066ZM5.75 2.74997H18.25V1.24997H5.75V2.74997ZM19.5 3.99997V20.25H21V3.99997H19.5ZM18.25 2.74997C18.9404 2.74997 19.5 3.30961 19.5 3.99997H21C21 2.48119 19.7688 1.24997 18.25 1.24997V2.74997ZM4.5 22V9.12497H3V22H4.5ZM10 9.24998V1.99997H8.5V9.24998H10ZM10 20.7969V14.75H8.5V20.7969H10ZM15.5 14.75V1.99997H14V14.75H15.5ZM15.5 22V20.125H14V22H15.5ZM9 13.75H3.75V15.25H9V13.75ZM10 14.75C10 14.1977 9.55229 13.75 9 13.75V15.25C8.72386 15.25 8.5 15.0261 8.5 14.75H10ZM14.5 15.25H20.25V13.75H14.5V15.25ZM1.3934 2.45404L3.23347 4.29411L4.29413 3.23345L2.45406 1.39338L1.3934 2.45404ZM3.23347 4.29411L21.5459 22.6066L22.6066 21.5459L4.29413 3.23345L3.23347 4.29411ZM5.75 1.24997C4.34056 1.24997 3.17971 2.30964 3.01894 3.67614L4.50866 3.85141C4.58161 3.23141 5.11012 2.74997 5.75 2.74997V1.24997Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.25 20.75C11.25 21.8546 10.3546 22.75 9.25 22.75C8.14543 22.75 7.25 21.8546 7.25 20.75C7.25 19.6454 8.14543 18.75 9.25 18.75C10.3546 18.75 11.25 19.6454 11.25 20.75Z"
-      fill="currentColor"
-    />
-    <path
-      d="M16.75 8.25C16.75 9.35457 15.8546 10.25 14.75 10.25C13.6454 10.25 12.75 9.35457 12.75 8.25C12.75 7.14543 13.6454 6.25 14.75 6.25C15.8546 6.25 16.75 7.14543 16.75 8.25Z"
-      fill="currentColor"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="No Chords Detection Icon">
+  <path d="M9.25 4H6.75C5.96831 4 5.25645 4.29897 4.72252 4.78879M9.25 4H14.75M9.25 4V8.99756M14.75 4H17.25C18.9069 4 20.25 5.34315 20.25 7V13.9951M14.75 4L14.75 13.9951H20.25M20.25 13.9951V20M14.75 19.4078L14.75 20M3.75 13.9951H8.25C8.80229 13.9951 9.25 14.4428 9.25 14.9951V20M3.75 13.9951V8.5M3.75 13.9951V20M21 21L3 3" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="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>
 )
 
 NoChordsDetectionIcon.displayName = 'NoChordsDetectionIcon'

package/src/icons/NoEyeIcon.jsx

@@ -1,7 +1,8 @@
 export const NoEyeIcon = ({ 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="M14.1055 9.86303C13.5639 9.32934 12.8204 9 12 9C10.3431 9 9 10.3431 9 12C9 12.7233 9.25599 13.3869 9.68233 13.905M17.8137 5.96708C16.2117 4.83579 14.2626 4 12 4C5 4 1 12 1 12C1 12 2.75463 15.5093 5.97337 17.8793M9.36697 19.6126C10.1899 19.8583 11.0684 20 12 20C19 20 23 12 23 12C23 12 22.1782 10.3564 20.6277 8.55912M20 4L4 20" 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="No Eye Icon">
+  <path d="M14.5 9.55055C13.8647 8.90225 12.9793 8.5 12 8.5C10.067 8.5 8.49996 10.067 8.49996 12C8.49996 12.9537 8.88138 13.8183 9.5 14.4495M20.125 8C20.7357 8.65147 21.2536 9.30295 21.6744 9.88529C22.5961 11.161 22.5961 12.839 21.6744 14.1147C19.9619 16.4848 16.64 20 12 20C10.8399 20 9.76231 19.7803 8.77162 19.4137M6 17.8989C4.40681 16.7319 3.17033 15.284 2.32554 14.1147C1.40386 12.839 1.40386 11.161 2.32554 9.88529C4.03799 7.51515 7.35988 4 12 4C14.2844 4 16.2494 4.85204 17.86 6M4 20L20 4" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 NoEyeIcon.displayName = 'NoEyeIcon'

package/src/icons/NoMusicIcon.jsx

@@ -4,23 +4,8 @@ export const NoMusicIcon = ({
   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="M14.1476 7.79232V1.53617C14.1476 1.09781 13.7318 0.778757 13.3084 0.892231L6.05437 2.83624C5.76292 2.91435 5.56027 3.17846 5.56027 3.48019V5.33398M14.1476 7.79232V10.3072C14.1476 10.9124 13.74 11.4417 13.1549 11.5963L12.0976 11.8757M14.1476 7.79232L11.0342 8.63079C10.4521 8.78755 10.0476 9.3154 10.0476 9.91825V9.99024M5.56027 10.1048L2.45361 10.9258C1.86851 11.0804 1.46094 11.6097 1.46094 12.2149V12.9872C1.46094 13.862 2.28917 14.4998 3.13494 14.2763L4.5676 13.8977C5.15269 13.743 5.56027 13.2138 5.56027 12.6086V10.1048ZM5.56027 10.1048V8.66732M2.00098 2.00066L14.001 14.0007"
-        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="No Music Icon">
+  <path d="M20 20L4 4M17.3025 16.8893L18.7716 16.3884C19.2064 16.2402 19.5 15.8218 19.5 15.3503V11.001L15.8121 12.2584C14.9937 12.5374 14.3997 13.2455 14.2341 14.0917M7.8125 16.469V12.7122M7.8125 7.72901C7.8125 6.78648 8.39913 5.94995 9.26826 5.65312L16.7058 3.11297C18.0812 2.6432 19.5 3.69723 19.5 5.18886V12.4774M7.8125 14.9856L4.12415 16.2439C3.15455 16.5747 2.5 17.5077 2.5 18.5591C2.5 20.2221 4.08152 21.3975 5.61523 20.8743L7.08428 20.3731C7.51902 20.2248 7.8125 19.8065 7.8125 19.3351V14.9856Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
 </svg>
 )
 

package/src/icons/NoMusicNoteIcon.jsx

@@ -4,22 +4,9 @@ export const NoMusicNoteIcon = ({
   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 11.9999C17 5.99991 11.3389 5.99992 11.3389 2.4519V11.25M4 3.99991L20 19.9999M5.18994 18.3213V19.4797C5.18994 20.7919 6.43228 21.7486 7.70094 21.4133L9.84994 20.8454C10.7276 20.6135 11.3389 19.827 11.3389 18.9192V16.4547C11.3389 15.7986 10.7178 15.3203 10.0834 15.4879L6.67894 16.3876C5.80131 16.6196 5.18994 17.4135 5.18994 18.3213Z"
-      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="No Music Note Icon">
+  <path d="M18 11.0556V9.67994C18 8.35158 17.3405 7.10987 16.24 6.36598L12.78 4.02728C12.4479 3.80283 12 4.04073 12 4.44152V12.0001M20 20.0001L4 4.00005M11.3162 19.728L9.12171 20.4595C7.58595 20.9714 6 19.8283 6 18.2095C6 17.1886 6.65324 16.2823 7.62171 15.9595L10.2992 15.067L12 16.7509V18.7793C12 19.2097 11.7246 19.5919 11.3162 19.728Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 NoMusicNoteIcon.displayName = 'NoMusicNoteIcon'

package/src/icons/NoSearchIcon.jsx

@@ -4,23 +4,9 @@ export const NoSearchIcon = ({
   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.3929 6.18983C15.9329 4.2525 13.6127 3 11 3C6.58172 3 3 6.58172 3 11C3 13.6261 4.26531 15.9566 6.21953 17.4152M18.9034 9.7529C18.967 10.1593 19 10.5758 19 11C19 15.4183 15.4183 19 11 19C10.5993 19 10.2055 18.9705 9.82064 18.9137M21 21L16.65 16.65M20 4L4 20"
-      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="No Search Icon">
+  <path d="M20 4L4 20M21 21L19 19M17.5 6.33528C16.0479 4.31542 13.6776 3 11 3C6.58172 3 3 6.58172 3 11C3 13.6409 4.27961 15.9828 6.25262 17.4398M18.9381 10C18.979 10.3276 19 10.6613 19 11C19 15.4183 15.4183 19 11 19C10.6613 19 10.3276 18.979 10 18.9381" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 NoSearchIcon.displayName = 'NoSearchIcon'

package/src/icons/NoSpliterIcon.jsx

@@ -4,20 +4,9 @@ export const NoSpliterIcon = ({
   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.8239 8.5973L15.3507 9.13117L14.8239 8.5973ZM20.75 2.75H21.5C21.5 2.55109 21.421 2.36032 21.2803 2.21967C21.1397 2.07902 20.9489 2 20.75 2V2.75ZM15.75 2C15.3358 2 15 2.33579 15 2.75C15 3.16422 15.3358 3.5 15.75 3.5L15.75 2ZM20 7.75C20 8.16422 20.3358 8.5 20.75 8.5C21.1642 8.5 21.5 8.16422 21.5 7.75H20ZM20 20.75C20 21.1642 20.3358 21.5 20.75 21.5C21.1642 21.5 21.5 21.1642 21.5 20.75H20ZM21.5 15.75C21.5 15.3358 21.1642 15 20.75 15C20.3358 15 20 15.3358 20 15.75H21.5ZM2.75 13C2.33579 13 2 13.3358 2 13.75C2 14.1642 2.33579 14.5 2.75 14.5V13ZM9.59375 14.5C10.008 14.5 10.3438 14.1642 10.3438 13.75C10.3438 13.3358 10.008 13 9.59375 13V14.5ZM2.75 9C2.33579 9 2 9.33579 2 9.75C2 10.1642 2.33579 10.5 2.75 10.5V9ZM5.6875 10.5C6.10171 10.5 6.4375 10.1642 6.4375 9.75C6.4375 9.33579 6.10171 9 5.6875 9V10.5ZM15.75 20C15.3358 20 15 20.3358 15 20.75C15 21.1642 15.3358 21.5 15.75 21.5V20ZM16.75 21.5C17.1642 21.5 17.5 21.1642 17.5 20.75C17.5 20.3358 17.1642 20 16.75 20V21.5ZM2.53033 1.46967C2.23744 1.17678 1.76256 1.17678 1.46967 1.46967C1.17678 1.76256 1.17678 2.23744 1.46967 2.53033L2.53033 1.46967ZM21.6222 22.6829C21.9151 22.9758 22.39 22.9758 22.6829 22.6829C22.9758 22.39 22.9758 21.9151 22.6829 21.6222L21.6222 22.6829ZM15.3507 9.13117L21.2768 3.28387L20.2232 2.21613L14.2971 8.06343L15.3507 9.13117ZM12.0145 10.5C13.2632 10.5 14.4618 10.0082 15.3507 9.13117L14.2971 8.06343C13.6889 8.66354 12.8689 9 12.0145 9V10.5ZM15.75 3.5L20.75 3.5V2L15.75 2L15.75 3.5ZM20 2.75V7.75H21.5V2.75H20ZM21.5 20.75V15.75H20V20.75H21.5ZM9.75 10.5H12.0145V9H9.75V10.5ZM2.75 14.5H9.59375V13H2.75V14.5ZM2.75 10.5H5.6875V9H2.75V10.5ZM15.75 21.5H16.75V20H15.75V21.5ZM1.46967 2.53033L21.6222 22.6829L22.6829 21.6222L2.53033 1.46967L1.46967 2.53033Z"
-      fill="currentColor"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="No Spliter Icon">
+  <path d="M20.5 3.5L15.5739 8.34729C14.8254 9.08589 13.8161 9.5 12.7645 9.5L9.5 9.5M20.5 9V3.5H15M20.5 20.5V15M15 20.5L16 20.5M3.5 14.5L10 14.5M3.5 9.5L5 9.5M22 22L2 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 NoSpliterIcon.displayName = 'NoSpliterIcon'

package/src/icons/NoVolume2Icon.jsx

@@ -4,23 +4,9 @@ export const NoVolume2Icon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M4.41406 9H2V15H6L11 19V15.5742M19.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.53M7.74162 7.60671L11 5V11M3 3L21 21"
-      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="No Volume 2 Icon">
+  <path d="M20 20L4 4M18.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.9918M4 8.00002C3.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.5055V15.7528M7.1038 7.08019L10.8519 3.9568C11.3078 3.57685 12 3.90107 12 4.49455V12" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
 )
 
 NoVolume2Icon.displayName = 'NoVolume2Icon'

package/src/icons/NowPlayingIcon.jsx

@@ -0,0 +1,7 @@
+export const NowPlayingIcon = ({ 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="Now Playing Icon">
+    <path d="M4 3L4 21M14.6668 8.25005V15.75M9.33333 5.625L9.33333 18.375M20 13.125V10.875" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+NowPlayingIcon.displayName = 'NowPlayingIcon'

package/src/icons/PenIcon.jsx

@@ -1,7 +1,7 @@
 export const PenIcon = ({ 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="M14.5 6.5L17.5 9.5M16.1038 4.66848C16.3158 4.45654 16.5674 4.28843 16.8443 4.17373C17.1212 4.05903 17.418 4 17.7177 4C18.0174 4 18.3142 4.05903 18.5911 4.17373C18.868 4.28843 19.1196 4.45654 19.3315 4.66848C19.5435 4.88041 19.7116 5.13201 19.8263 5.40891C19.941 5.68582 20 5.9826 20 6.28232C20 6.58204 19.941 6.87882 19.8263 7.15573C19.7116 7.43263 19.5435 7.68423 19.3315 7.89617L8.43807 18.7896L4 20L5.21038 15.5619L16.1038 4.66848Z" stroke="currentColor" strokeWidth="1.5" 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="Pen Icon">
+  <path d="M14.2728 7L17.0001 9.72721M3.60032 20.7068L6.79305 20.6312C7.05 20.6252 7.29474 20.5204 7.47648 20.3386L19.7142 8.10093C20.7677 7.04746 20.7677 5.33943 19.7142 4.28596C18.6607 3.23248 16.9527 3.23248 15.8992 4.28596L3.66151 16.5237C3.47976 16.7054 3.37498 16.9501 3.36889 17.2071L3.2933 20.3998C3.28925 20.571 3.4291 20.7109 3.60032 20.7068Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 PenIcon.displayName = 'PenIcon'

package/src/icons/PlayOnRepeatIcon.jsx

@@ -4,23 +4,10 @@ export const PlayOnRepeatIcon = ({
   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="M16.75 6H17C20.3137 6 23 8.68629 23 12C23 15.3137 20.3137 18 17 18H11.75M7.08974 18H7C3.68629 18 1 15.3137 1 12C1 8.68629 3.68629 6 7 6H12.5M9 2L13 6L9 10M15 22L11 18L15 14"
-      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="Play On Repeat Icon">
+  <path d="M9 2.5L12.5 6L9 9.5M15 21.5L11.5 18L15 14.5M11.5 5.99991L8 5.99991C6.4087 5.99991 4.88258 6.63205 3.75736 7.75727C2.63214 8.88249 2 10.4086 2 11.9999C2 13.5912 2.63214 15.1173 3.75736 16.2425C4.64405 17.1292 5.77969 17.7097 7 17.916M12.5 18.0001H16C17.5913 18.0001 19.1174 17.3679 20.2426 16.2427C21.3679 15.1175 22 13.5914 22 12.0001C22 10.4088 21.3679 8.88267 20.2426 7.75745C19.356 6.87076 18.2203 6.29025 17 6.08398" 
+  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 PlayOnRepeatIcon.displayName = 'PlayOnRepeatIcon'

package/src/icons/PowerSwitchIcon.jsx

@@ -1,7 +1,8 @@
 export const PowerSwitchIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
-    <path d="M12 2V9M17 3.33975C18.9064 4.44042 20.3964 6.13939 21.2388 8.17316C22.0812 10.2069 22.229 12.4619 21.6593 14.5882C21.0895 16.7145 19.8341 18.5934 18.0876 19.9335C16.3412 21.2736 14.2013 22 12 22C9.79866 22 7.65883 21.2736 5.91239 19.9335C4.16595 18.5934 2.9105 16.7145 2.34075 14.5882C1.771 12.4619 1.91879 10.2069 2.76121 8.17317C3.60362 6.13939 5.09358 4.44042 7 3.33975" 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="Power Switch Icon">
+  <path d="M7.5 4.20577C5.78423 5.19637 4.44326 6.72545 3.68509 8.55585C2.92691 10.3862 2.7939 12.4157 3.30667 14.3294C3.81944 16.2431 4.94935 17.9341 6.52115 19.1402C8.09295 20.3463 10.0188 21 12 21C13.9812 21 15.9071 20.3463 17.4789 19.1402C19.0507 17.9341 20.1806 16.2431 20.6933 14.3294C21.2061 12.4157 21.0731 10.3862 20.3149 8.55585C19.5567 6.72545 18.2158 5.19638 16.5 4.20577M12 3V12" 
+  stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 PowerSwitchIcon.displayName = 'PowerSwitchIcon'

package/src/icons/RadioOffIcon.jsx

@@ -4,23 +4,9 @@ export const RadioOffIcon = ({
   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 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-      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="Radio Off Icon">
+  <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 RadioOffIcon.displayName = 'RadioOffIcon'

package/src/icons/RedoIcon.jsx

@@ -1,20 +1,7 @@
 export const RedoIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 13 13"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M9.5 6.54444L12.5 3.52222M12.5 3.52222L9.5 0.5M12.5 3.52222H4.625C4.0833 3.52222 3.5469 3.62971 3.04643 3.83855C2.54596 4.04738 2.09123 4.35348 1.70818 4.73936C1.32514 5.12523 1.0213 5.58334 0.813997 6.08751C0.606697 6.59169 0.5 7.13206 0.5 7.67778C0.5 8.22349 0.606697 8.76386 0.813997 9.26804C1.0213 9.77221 1.32514 10.2303 1.70818 10.6162C2.09123 11.0021 2.54596 11.3082 3.04643 11.517C3.5469 11.7258 4.0833 11.8333 4.625 11.8333H7.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="Redo Icon">
+  <path d="M15.5 2.5L21 8L15.5 13.5M21 8H8.5C7.04131 8 5.64236 8.57946 4.61091 9.61091C3.57946 10.6424 3 12.0413 3 13.5C3 14.9587 3.57946 16.3576 4.61091 17.3891C5.64236 18.4205 7.04131 19 8.5 19H11.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>  
 )
 
 RedoIcon.displayName = 'RedoIcon'

package/src/icons/RefreshIcon.jsx

@@ -4,23 +4,9 @@ export const RefreshIcon = ({
   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.3092 13.0243C20.3092 17.5452 16.6443 21.2101 12.1234 21.2101C7.60248 21.2101 3.93757 17.5452 3.93757 13.0243C3.93757 8.50339 7.60248 4.83847 12.1234 4.83847H15.1931M12.7455 1.125L16.5334 4.9148L12.7455 8.7046"
-      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="Refresh Icon">
+  <path d="M19.2572 8.63351C18.4783 6.95453 17.1414 5.59754 15.4742 4.79377C13.807 3.98999 11.9127 3.78916 10.114 4.2255C8.31533 4.66183 6.72359 5.70834 5.61001 7.18669C4.49642 8.66505 3.92989 10.4838 4.00693 12.333C4.08398 14.1823 4.79984 15.9476 6.03254 17.3282C7.26525 18.7088 8.93852 19.6193 10.7673 19.9045C12.596 20.1897 14.467 19.832 16.0616 18.8923C17.6562 17.9526 18.8756 16.4891 19.5121 14.7512M15 9.00001H19.5C19.7761 9.00001 20 8.77615 20 8.50001V4.00001" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>  
 )
 
 RefreshIcon.displayName = 'RefreshIcon'

package/src/icons/SearchIcon.jsx

@@ -4,24 +4,9 @@ export const SearchIcon = ({
   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="M14 14L11.1 11.1M12.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"
-        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="Search Icon">
+  <path d="M21 21L19 19M19 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"/>
+</svg>  
 )
 
 SearchIcon.displayName = 'SearchIcon'

package/src/icons/Sections2Icon.jsx

@@ -1,11 +1,8 @@
 export const Sections2Icon = ({ 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="M1.3335 10.3337H14.6668M1.3335 14.3337H14.6668M10.6668 1.66699H2.66683C1.93045 1.66699 1.3335 2.26395 1.3335 3.00033V5.00033C1.3335 5.73671 1.93045 6.33366 2.66683 6.33366H10.6668C11.4032 6.33366 12.0002 5.73671 12.0002 5.00033V3.00033C12.0002 2.26395 11.4032 1.66699 10.6668 1.66699Z"
-      stroke="currentColor"
-      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="Sections 2 Icon">
+  <path d="M19 8V7C19 5.34315 17.6569 4 16 4L8 4C6.34315 4 5 5.34315 5 7V8M19 16V17C19 18.6569 17.6569 20 16 20H8C6.34315 20 5 18.6569 5 17V16M22 12L2 12" 
+   stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 Sections2Icon.displayName = 'Sections2Icon'

package/src/icons/Setlist2Icon.jsx

@@ -4,23 +4,9 @@ export const Setlist2Icon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M4 5.6H20M6 2H18M6.58826 22H17.4117C18.3418 22 19.1491 21.3589 19.3598 20.453L21.4295 11.553C21.7212 10.2989 20.7691 9.1 19.4815 9.1H4.51849C3.23092 9.1 2.27882 10.2989 2.57047 11.553L4.64024 20.453C4.85091 21.3589 5.65821 22 6.58826 22Z"
-      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="Setlist 2 Icon">
+  <path d="M4.5 7H19.7M6.3 3.5H17.7M4.48914 10.535H19.5109C20.5076 10.535 21.2271 11.4892 20.953 12.4475L19.1684 18.6874C18.8615 19.7604 17.8807 20.5 16.7648 20.5H7.23523C6.11928 20.5 5.13847 19.7604 4.83161 18.6874L3.04697 12.4475C2.77289 11.4892 3.49241 10.535 4.48914 10.535Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 Setlist2Icon.displayName = 'Setlist2Icon'

package/src/icons/SettingsIcon.jsx

@@ -4,24 +4,11 @@ export const SettingsIcon = ({
   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="M10.3407 8.00001C10.3407 6.7077 9.29308 5.66007 8.00076 5.66007C6.70845 5.66007 5.66082 6.7077 5.66082 8.00001C5.66082 9.29233 6.70845 10.34 8.00076 10.34C9.29308 10.34 10.3407 9.29233 10.3407 8.00001Z"
-      stroke="currentColor"
-    />
-    <path
-      d="M6.27794 1.55619C6.34173 1.24521 6.61541 1.02197 6.93286 1.02197H8.91853C9.23597 1.02197 9.50965 1.24521 9.57344 1.55619L9.86676 2.98611C10.432 3.19656 10.952 3.49985 11.4083 3.87745L12.7948 3.41603C13.096 3.31579 13.4262 3.44118 13.5849 3.7161L14.5777 5.43574C14.7364 5.71066 14.68 6.05929 14.4425 6.27002L13.3015 7.28281C13.3329 7.5174 13.3492 7.75681 13.3492 8.00001C13.3492 8.3034 13.3239 8.60089 13.2754 8.89049L14.3675 9.85986C14.6049 10.0706 14.6614 10.4192 14.5027 10.6941L13.5099 12.4138C13.3511 12.6887 13.021 12.8141 12.7198 12.7138L11.2717 12.2319C10.8492 12.559 10.3763 12.8242 9.86676 13.0139L9.57344 14.4438C9.50965 14.7548 9.23598 14.9781 8.91853 14.9781H6.93286C6.61541 14.9781 6.34173 14.7548 6.27794 14.4438L5.97153 12.9501C5.52394 12.7664 5.10677 12.5238 4.72968 12.2319L3.28155 12.7138C2.98034 12.8141 2.65017 12.6887 2.49145 12.4138L1.49861 10.6941C1.33989 10.4192 1.39638 10.0706 1.6338 9.85985L2.72606 8.89035C2.67755 8.6008 2.65229 8.30335 2.65229 8.00001C2.65229 7.75685 2.66852 7.51748 2.69995 7.28292L1.55876 6.27001C1.32135 6.05928 1.26486 5.71065 1.42358 5.43573L2.41641 3.71609C2.57514 3.44117 2.90531 3.31577 3.20652 3.41602L4.59309 3.87748C5.00514 3.53649 5.46918 3.2561 5.97153 3.04995L6.27794 1.55619Z"
-      stroke="currentColor"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Settings Icon">
+  <path d="M14.5351 4.5642C14.6832 5.04823 15.0094 5.45808 15.4478 5.71111L15.7235 5.87018C16.1616 6.12307 16.6794 6.2005 17.1724 6.08687L18.2987 5.82727C18.727 5.72855 19.1696 5.92109 19.3894 6.30176L20.6302 8.45123C20.8499 8.83187 20.7954 9.31137 20.4958 9.63292L19.7073 10.4791C19.3626 10.849 19.1708 11.3358 19.1705 11.8415L19.1703 12.1583C19.1701 12.6647 19.3619 13.1523 19.7072 13.5228L20.4957 14.369C20.7954 14.6906 20.8499 15.1701 20.6302 15.5507L19.3895 17.7C19.1697 18.0808 18.7269 18.2733 18.2986 18.1744L17.1722 17.9145C16.6787 17.8006 16.1604 17.8782 15.7219 18.1316L15.448 18.2899C15.0101 18.5429 14.6843 18.9525 14.5362 19.4361L14.198 20.5408C14.0693 20.9611 13.6813 21.248 13.2418 21.248H10.7583C10.3187 21.248 9.93071 20.961 9.80207 20.5407L9.46398 19.436C9.3158 18.9519 8.9895 18.5419 8.55093 18.2889L8.27685 18.1308C7.83848 17.8779 7.32054 17.8006 6.82743 17.9145L5.70245 18.1743C5.27405 18.2732 4.83128 18.0808 4.61143 17.7L3.36978 15.5496C3.15004 15.169 3.2045 14.6896 3.504 14.368L4.2925 13.5214C4.63677 13.1518 4.82841 12.6655 4.82894 12.1604L4.82926 11.8426C4.82979 11.3357 4.6378 10.8475 4.29213 10.4767L3.50548 9.63294C3.20571 9.31139 3.15108 8.83178 3.37086 8.45106L4.61162 6.30176C4.83138 5.92109 5.27394 5.72855 5.70226 5.82727L6.82882 6.08692C7.32168 6.20052 7.83928 6.12316 8.27739 5.87042L8.55145 5.71232C8.9903 5.45916 9.31672 5.04888 9.46476 4.56436L9.80229 3.45973C9.93078 3.0392 10.3189 2.75195 10.7586 2.75195H13.2407C13.6803 2.75195 14.0683 3.03899 14.197 3.4593L14.5351 4.5642Z" 
+  stroke="currentColor" strokeWidth="1.8"/>
+  <path d="M14.5 12C14.5 10.6193 13.3807 9.5 12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12Z" fill="currentColor"/>
+</svg>
 )
 
 SettingsIcon.displayName = 'SettingsIcon'

package/src/icons/ShareIosIcon.jsx

@@ -1,13 +1,7 @@
 export const ShareIosIcon = ({ 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="M15.2815 4.34375L12.0003 1.0625M12.0003 1.0625L8.71902 4.34375M12.0003 1.0625V15.2812M16.3753 7.625H17.7503C19.4071 7.625 20.7503 8.96814 20.7503 10.625V19.9375C20.7503 21.5944 19.4071 22.9375 17.7503 22.9375H6.25005C4.59318 22.9375 3.25002 21.5943 3.25005 19.9374L3.25021 10.6249C3.25024 8.96811 4.59338 7.625 6.25021 7.625H7.62527"
-      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="Share Ios Icon">
+  <path d="M9 4L12 1.5L15 4M12 1.5V14M7 7.5H6.5C4.84315 7.5 3.5 8.84315 3.5 10.5V18C3.5 19.6569 4.84315 21 6.5 21H17.5C19.1569 21 20.5 19.6569 20.5 18V10.5C20.5 8.84315 19.1569 7.5 17.5 7.5H17" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ShareIosIcon.displayName = 'ShareIosIcon'

package/src/icons/SidebarLeftIcon.jsx

@@ -4,22 +4,9 @@ export const SidebarLeftIcon = ({
   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.33325 2.66667V13.3333M2.66659 2.66667H13.3333C14.0696 2.66667 14.6666 3.26362 14.6666 4V12C14.6666 12.7364 14.0696 13.3333 13.3333 13.3333H2.66659C1.93021 13.3333 1.33325 12.7364 1.33325 12V4C1.33325 3.26362 1.93021 2.66667 2.66659 2.66667Z"
-      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="Sidebar Left Icon">
+  <path d="M9 4V20M6 20H18C19.6569 20 21 18.6569 21 17V7C21 5.34315 19.6569 4 18 4H6C4.34315 4 3 5.34315 3 7V17C3 18.6569 4.34315 20 6 20Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>  
 )
 
 SidebarLeftIcon.displayName = 'SidebarLeftIcon'

package/src/icons/SidebarRightIcon.jsx

@@ -4,23 +4,9 @@ export const SidebarRightIcon = ({
   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 4V20M17.5 7.5H19.5M17.5 10H19.5M17.5 12.5H19.5M4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6C2 4.89543 2.89543 4 4 4Z"
-      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="Sidebar Right Icon">
+  <path d="M15 4V20M18 20H6C4.34315 20 3 18.6569 3 17V7C3 5.34315 4.34315 4 6 4H18C19.6569 4 21 5.34315 21 7V17C21 18.6569 19.6569 20 18 20Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>  
 )
 
 SidebarRightIcon.displayName = 'SidebarRightIcon'