@moises.ai/design-system 3.4.5 → 3.5.0

package/src/icons/SidebarIslandIcon.jsx

@@ -0,0 +1,26 @@
+export const SidebarIslandIcon = ({
+  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="M8 7H16M4 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>
+)
+
+SidebarIslandIcon.displayName = 'SidebarIslandIcon'

package/src/icons/SidebarLeftIcon.jsx

@@ -0,0 +1,25 @@
+export const SidebarLeftIcon = ({
+  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.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>
+)
+
+SidebarLeftIcon.displayName = 'SidebarLeftIcon'

package/src/icons/SidebarRightIcon.jsx

@@ -0,0 +1,26 @@
+export const SidebarRightIcon = ({
+  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 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>
+)
+
+SidebarRightIcon.displayName = 'SidebarRightIcon'

package/src/icons/SlidersIcon.jsx

@@ -0,0 +1,26 @@
+export const SlidersIcon = ({
+  width = 16,
+  height = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 20"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M4 19V12M4 8V1M12 19V10M12 6V1M20 19V14M20 10V1M1 12H7M9 6H15M17 14H23"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+SlidersIcon.displayName = 'SlidersIcon'

package/src/icons/SnareIcon.jsx

@@ -0,0 +1,18 @@
+export const SnareIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    className={className}
+    {...props}
+    fill="none"
+  >
+    <path
+      d="M21.311 9.25017C21.311 8.83596 20.9752 8.50017 20.561 8.50017C20.1468 8.50017 19.811 8.83596 19.811 9.25017H21.311ZM17.6965 5.79333L17.3597 6.46345L17.3611 6.46415L17.6965 5.79333ZM1.75 9.25017C1.75 8.83596 1.41421 8.50017 1 8.50017C0.585786 8.50017 0.25 8.83596 0.25 9.25017H1.75ZM0.25 14.221C0.25 14.6352 0.585786 14.971 1 14.971C1.41421 14.971 1.75 14.6352 1.75 14.221H0.25ZM1.75463 14.221C1.75463 13.8068 1.41884 13.471 1.00463 13.471C0.590414 13.471 0.254628 13.8068 0.254628 14.221H1.75463ZM11.5282 14.137C11.5282 13.7227 11.1924 13.387 10.7782 13.387C10.364 13.387 10.0282 13.7227 10.0282 14.137H11.5282ZM10.0282 19.1078C10.0282 19.522 10.364 19.8578 10.7782 19.8578C11.1924 19.8578 11.5282 19.522 11.5282 19.1078H10.0282ZM8.91813 8.50017C8.50392 8.50017 8.16813 8.83596 8.16813 9.25017C8.16813 9.66439 8.50392 10.0002 8.91813 10.0002V8.50017ZM23 10.0002C23.4142 10.0002 23.75 9.66439 23.75 9.25017C23.75 8.83596 23.4142 8.50017 23 8.50017V10.0002ZM9.05233 9.75459L9.24262 10.4801L9.24558 10.4793L9.05233 9.75459ZM9.42254 9.11135L10.148 8.92106L10.1472 8.9181L9.42254 9.11135ZM8.7793 8.74113L8.58902 8.01567L8.58606 8.01646L8.7793 8.74113ZM5.5 13.1001C5.5 12.6859 5.16421 12.3501 4.75 12.3501C4.33579 12.3501 4 12.6859 4 13.1001H5.5ZM4 18.071C4 18.4852 4.33579 18.821 4.75 18.821C5.16421 18.821 5.5 18.4852 5.5 18.071H4ZM17.56 13.1001C17.56 12.6859 17.2242 12.3501 16.81 12.3501C16.3958 12.3501 16.06 12.6859 16.06 13.1001H17.56ZM16.06 18.071C16.06 18.4852 16.3958 18.821 16.81 18.821C17.2242 18.821 17.56 18.4852 17.56 18.071H16.06ZM17.9604 6.79495C18.3138 7.01093 18.7754 6.8995 18.9914 6.54606C19.2074 6.19261 19.096 5.731 18.7425 5.51501L17.9604 6.79495ZM19.811 9.25017C19.811 10.1639 19.0497 11.1919 17.3611 12.0362L18.0319 13.3778C19.8788 12.4544 21.311 11.039 21.311 9.25017H19.811ZM17.3611 12.0362C15.7183 12.8576 13.39 13.387 10.7828 13.387V14.887C13.5715 14.887 16.1392 14.3242 18.0319 13.3778L17.3611 12.0362ZM10.7828 13.387C8.17565 13.387 5.84739 12.8576 4.20454 12.0362L3.53372 13.3778C5.42639 14.3242 7.99416 14.887 10.7828 14.887V13.387ZM4.20454 12.0362C2.51595 11.1919 1.75463 10.1639 1.75463 9.25017H0.254628C0.254628 11.039 1.68681 12.4544 3.53372 13.3778L4.20454 12.0362ZM1.75463 9.25017C1.75463 8.33641 2.51595 7.30845 4.20454 6.46415L3.53372 5.12251C1.68681 6.04597 0.254628 7.46139 0.254628 9.25017H1.75463ZM4.20454 6.46415C5.84817 5.64234 8.17672 5.10876 10.7828 5.10876V3.60876C7.99309 3.60876 5.42561 4.17657 3.53372 5.12251L4.20454 6.46415ZM10.7828 5.10876C13.3901 5.10876 15.7177 5.63814 17.3597 6.46345L18.0333 5.12321C16.1398 4.17151 13.5714 3.60876 10.7828 3.60876V5.10876ZM19.811 9.25017V14.221H21.311V9.25017H19.811ZM0.25 9.25017V14.221H1.75V9.25017H0.25ZM19.811 14.221C19.811 15.1348 19.0497 16.1628 17.3611 17.0071L18.0319 18.3487C19.8788 17.4252 21.311 16.0098 21.311 14.221H19.811ZM17.3611 17.0071C15.7183 17.8285 13.39 18.3578 10.7828 18.3578V19.8578C13.5715 19.8578 16.1392 19.295 18.0319 18.3487L17.3611 17.0071ZM10.7828 18.3578C8.17565 18.3578 5.84739 17.8285 4.20454 17.0071L3.53372 18.3487C5.42639 19.295 7.99416 19.8578 10.7828 19.8578V18.3578ZM4.20454 17.0071C2.51595 16.1628 1.75463 15.1348 1.75463 14.221H0.254628C0.254628 16.0098 1.68681 17.4252 3.53372 18.3487L4.20454 17.0071ZM10.0282 14.137V19.1078H11.5282V14.137H10.0282ZM8.91813 10.0002C11.0839 10.0002 13.5215 10.0002 15.9591 10.0002C18.3967 10.0002 20.8343 10.0002 23 10.0002V8.50017C20.8343 8.50017 18.3967 8.50017 15.9591 8.50017C13.5215 8.50017 11.0839 8.50017 8.91813 8.50017V10.0002ZM9.24558 10.4793C9.92696 10.2976 10.3256 9.59818 10.148 8.92106L8.69708 9.30163C8.66756 9.18908 8.73302 9.06353 8.85909 9.02991L9.24558 10.4793ZM10.1472 8.9181C9.96552 8.23672 9.26614 7.83807 8.58902 8.01567L8.96959 9.46659C8.85704 9.49611 8.73148 9.43066 8.69787 9.30459L10.1472 8.9181ZM8.58606 8.01646C7.90468 8.19816 7.50602 8.89754 7.68363 9.57466L9.13455 9.19409C9.16407 9.30664 9.09861 9.43219 8.97255 9.46581L8.58606 8.01646ZM7.68363 9.57466C7.86605 10.2701 8.57231 10.6559 9.24262 10.48L8.86205 9.02913C8.96778 9.00139 9.10021 9.06319 9.13455 9.19409L7.68363 9.57466ZM4 13.1001V18.071H5.5V13.1001H4ZM16.06 13.1001V18.071H17.56V13.1001H16.06ZM17.3611 6.46415C17.5734 6.57029 17.7736 6.68079 17.9604 6.79495L18.7425 5.51501C18.5166 5.37694 18.279 5.24604 18.0319 5.12251L17.3611 6.46415Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+SnareIcon.displayName = 'SnareIcon'

package/src/icons/SongBarIcon.jsx

@@ -0,0 +1,26 @@
+export const SongBarIcon = ({
+  width = 16,
+  height = 16,
+  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>
+)
+
+SongBarIcon.displayName = 'SongBarIcon'

package/src/icons/SongDetailIcon.jsx

@@ -0,0 +1,26 @@
+export const SongDetailIcon = ({
+  width = 16,
+  height = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 22 22"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M16 1H19C20.1046 1 21 1.89543 21 3V6M1 6L1 3C1 1.89543 1.89543 1 3 1L6 1M6 21H3C1.89543 21 1 20.1046 1 19L1 16M21 16V19C21 20.1046 20.1046 21 19 21H16M12.67 11.8944V13.5734C12.67 14.4748 12.067 15.2649 11.1974 15.5026L10.4548 15.7056C9.47056 15.9747 8.5 15.2338 8.5 14.2135C8.5 13.5159 8.96682 12.9047 9.63974 12.7211L12.67 11.8944ZM12.67 11.8944V6"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+SongDetailIcon.displayName = 'SongDetailIcon'

package/src/icons/Songkey2Icon.jsx

@@ -0,0 +1,25 @@
+export const Songkey2Icon = ({
+  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="M9.625 23.125V23.125C11.4199 23.125 12.875 21.6699 12.875 19.875V16.25V3C12.875 2.24061 13.4906 1.625 14.25 1.625V1.625C15.0094 1.625 15.625 2.25363 15.625 3.01302V3.01302C15.625 4.45208 14.8281 5.79497 13.5551 6.46591L9.18451 8.76931C7.42699 9.69557 6.24185 11.4317 6.01941 13.4058V13.4058C5.67583 16.4552 8.06172 19.125 11.1304 19.125H13.0625C15.2371 19.125 17 17.3621 17 15.1875V15.1875C17 13.0129 15.2371 11.25 13.0625 11.25H12.4861C10.6068 11.25 9.1873 12.9534 9.52618 14.8019L9.5625 15"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+Songkey2Icon.displayName = 'Songkey2Icon'

package/src/icons/SongwritingIcon.jsx

@@ -0,0 +1,26 @@
+export const SongwritingIcon = ({
+  width = 16,
+  height = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 23 23"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M5.5237 12.8185V14.9644C5.5237 15.9914 4.83177 16.8895 3.83872 17.1515L3.35943 17.2779C2.16713 17.5924 1 16.6932 1 15.4601C1 14.6065 1.57511 13.86 2.4005 13.6423L5.5237 12.8185ZM5.5237 12.8185V4.22441L15 1.6897V7.5M18.5909 8.58492C18.7763 8.39948 18.9964 8.25237 19.2387 8.15201C19.481 8.05165 19.7407 8 20.003 8C20.2652 8 20.5249 8.05165 20.7672 8.15201C21.0095 8.25237 21.2296 8.39948 21.4151 8.58492C21.6005 8.77036 21.7476 8.99051 21.848 9.2328C21.9483 9.47509 22 9.73478 22 9.99703C22 10.2593 21.9483 10.519 21.848 10.7613C21.7476 11.0036 21.6005 11.2237 21.4151 11.4091L11.8833 20.9409L8 22L9.05909 18.1167L18.5909 8.58492Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+SongwritingIcon.displayName = 'SongwritingIcon'

package/src/icons/SoundEffectsGradientIcon.jsx

@@ -0,0 +1,39 @@
+export const SoundEffectsGradientIcon = ({
+  width = 80,
+  height = 80,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 80 80"
+    fill="none"
+    {...props}
+    className={className}
+  >
+    <path
+      d="M50.4167 10.8333V23.5416M56.7708 17.1874H44.0625M32.5 16.6666L15.8333 29.9999H2.5V49.9999H15.8333L32.5 63.3333V16.6666ZM76.9583 46.6188C68.25 46.6156 61.1852 39.5649 61.1312 30.8471C61.0773 39.5549 54.0279 46.5996 45.3333 46.6188C54.0595 46.6381 61.1278 53.7338 61.1309 62.4853C61.1341 53.7239 68.2185 46.622 76.9583 46.6188Z"
+      stroke="url(#paint0_linear_29457_74516)"
+      strokeWidth="4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_29457_74516"
+        x1="67.651"
+        y1="20.5129"
+        x2="30.3023"
+        y2="69.8918"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0AFFA7" />
+        <stop offset="1" stopColor="#00DAE8" />
+      </linearGradient>
+    </defs>
+  </svg>
+)
+
+SoundEffectsGradientIcon.displayName = 'SoundEffectsGradientIcon'

package/src/icons/SoundEffectsIcon.jsx

@@ -0,0 +1,26 @@
+export const SoundEffectsIcon = ({
+  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.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>
+)
+
+SoundEffectsIcon.displayName = 'SoundEffectsIcon'

package/src/icons/SoundbarIcon.jsx

@@ -0,0 +1,26 @@
+export const SoundbarIcon = ({
+  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="M8 19H16M3 5.3125V6.8125M6 4.3125V7.8125M9 2.3125V9.8125M12 3.3125V8.8125M21 5.3125V6.8125M15 5.3125V6.8125M18 3.3125V8.8125M1 22H23V14.875H1.00008L1 22Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+SoundbarIcon.displayName = 'SoundbarIcon'

package/src/icons/SoundtrackGradientIcon.jsx

@@ -0,0 +1,44 @@
+export const SoundtrackGradientIcon = ({
+  width = 80,
+  height = 80,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 80 80"
+    fill="none"
+    {...props}
+    className={className}
+  >
+    <g clipPath="url(#clip0_29160_241085)">
+      <path
+        d="M36.7709 53.333H13.3334C9.65146 53.333 6.66669 50.3482 6.66669 46.6663V9.99967C6.66669 6.31778 9.65146 3.33301 13.3334 3.33301H66.6667C70.3486 3.33301 73.3334 6.31778 73.3334 9.99967V21.2497M50.5563 63.5639V71.3347C50.5563 73.213 49.2913 74.8557 47.4754 75.3355L43.0289 76.5106C40.4039 77.2043 37.8334 75.2249 37.8334 72.5098V70.1129C37.8334 68.2346 39.0983 66.5919 40.9143 66.112L50.5563 63.5639ZM50.5563 63.5639V43.0034C50.5563 42.0669 51.1852 41.2472 52.0898 41.0048L74.6037 34.9712C75.9178 34.6191 77.2084 35.6093 77.2084 36.9698V56.3867M77.2084 56.3867V64.192C77.2084 66.0704 75.9433 67.7131 74.1273 68.1929L69.6787 69.3684C67.0538 70.0619 64.4834 68.0825 64.4834 65.3675V62.9849C64.4834 61.1138 65.7388 59.4756 67.5455 58.989L77.2084 56.3867ZM31.4326 19.1324L31.4326 37.5329C31.4326 37.9872 31.925 38.2712 32.3189 38.044L48.272 28.8438C48.6659 28.6166 48.6659 28.0487 48.272 27.8215L32.3189 18.6213C31.925 18.3941 31.4326 18.6781 31.4326 19.1324Z"
+        stroke="url(#paint0_linear_29160_241085)"
+        strokeWidth="4"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_29160_241085"
+        x1="68.3906"
+        y1="16.8508"
+        x2="14.5051"
+        y2="65.1815"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0AFFA7" />
+        <stop offset="1" stopColor="#00DAE8" />
+      </linearGradient>
+      <clipPath id="clip0_29160_241085">
+        <rect width="80" height="80" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+SoundtrackGradientIcon.displayName = 'SoundtrackGradientIcon'

package/src/icons/SoundtrackIcon.jsx

@@ -0,0 +1,26 @@
+export const SoundtrackIcon = ({
+  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="M11.0312 16H4C2.89543 16 2 15.1046 2 14V3C2 1.89543 2.89543 1 4 1H20C21.1046 1 22 1.89543 22 3V6.375M15.1669 19.0693V21.4005C15.1669 21.964 14.7874 22.4568 14.2426 22.6008L12.9087 22.9533C12.1212 23.1614 11.35 22.5676 11.35 21.753V21.034C11.35 20.4705 11.7295 19.9777 12.2743 19.8337L15.1669 19.0693ZM15.1669 19.0693V12.9011C15.1669 12.6202 15.3556 12.3743 15.6269 12.3015L22.3811 10.4915C22.7753 10.3858 23.1625 10.6829 23.1625 11.091V16.9161M23.1625 16.9161V19.2577C23.1625 19.8212 22.783 20.314 22.2382 20.458L20.9036 20.8106C20.1161 21.0187 19.345 20.4248 19.345 19.6103V18.8956C19.345 18.3342 19.7216 17.8428 20.2636 17.6968L23.1625 16.9161ZM9.42978 5.73982L9.42978 11.26C9.42978 11.3963 9.57749 11.4815 9.69566 11.4133L14.4816 8.65323C14.5998 8.58508 14.5998 8.41471 14.4816 8.34656L9.69566 5.58649C9.57749 5.51834 9.42978 5.60352 9.42978 5.73982Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+SoundtrackIcon.displayName = 'SoundtrackIcon'

package/src/icons/SparkBarsIcon.jsx

@@ -0,0 +1,25 @@
+export const SparkBarsIcon = ({
+  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 2.5V21.5M16.5 9V15M7.5 9L7.5 15M21 11.75V12.25M3 11.75L3 12.25"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+SparkBarsIcon.displayName = 'SparkBarsIcon'

package/src/icons/SparkleIcon.jsx

@@ -0,0 +1,35 @@
+export const SparkleIcon = ({ width, height, 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 clipPath="url(#clip0_4905_5382)">
+      <path
+        d="M6.77621 3.7676C6.79482 6.77134 9.22902 9.20069 12.2295 9.20178C9.21815 9.20287 6.7772 11.6498 6.77611 14.6686C6.77502 11.6533 4.33961 9.20844 1.33301 9.20179C4.32875 9.19517 6.75763 6.76791 6.77621 3.7676Z"
+        stroke="currentColor"
+        strokeWidth="1.13"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.6637 1.33301C12.6705 2.43519 13.5637 3.32662 14.6647 3.32702C13.5597 3.32742 12.664 4.22531 12.6636 5.33301C12.6632 4.22657 11.7696 3.32946 10.6663 3.32702C11.7656 3.32459 12.6568 2.43394 12.6637 1.33301Z"
+        stroke="currentColor"
+        strokeWidth="1.13"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4905_5382">
+        <rect width="16" height="16" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+SparkleIcon.displayName = 'SparkleIcon'

package/src/icons/SparklesGradientIcon.jsx

@@ -0,0 +1,62 @@
+export const SparklesGradientIcon = ({
+  width = 80,
+  height = 80,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 80 80"
+    fill="none"
+    {...props}
+    className={className}
+  >
+    <g clipPath="url(#clip0_29457_74553)">
+      <path
+        d="M33.8827 18.8397C33.9758 33.8584 46.1467 46.0051 61.1491 46.0106C46.0924 46.0161 33.8876 58.2509 33.8822 73.3447C33.8767 58.2681 21.6997 46.0439 6.66669 46.0107C21.6454 45.9775 33.7898 33.8412 33.8827 18.8397Z"
+        stroke="url(#paint0_linear_29457_74553)"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M63.32 6.66675C63.3541 12.1777 67.8201 16.6348 73.3251 16.6368C67.8002 16.6388 63.3218 21.1283 63.3198 26.6667C63.3178 21.1346 58.8496 16.649 53.3334 16.6368C58.8296 16.6247 63.2859 12.1714 63.32 6.66675Z"
+        stroke="url(#paint1_linear_29457_74553)"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_29457_74553"
+        x1="64.9927"
+        y1="18.9605"
+        x2="15.8187"
+        y2="64.7872"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0AFFA7" />
+        <stop offset="1" stopColor="#00DAE8" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_29457_74553"
+        x1="64.9927"
+        y1="18.9605"
+        x2="15.8187"
+        y2="64.7872"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0AFFA7" />
+        <stop offset="1" stopColor="#00DAE8" />
+      </linearGradient>
+      <clipPath id="clip0_29457_74553">
+        <rect width="80" height="80" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+SparklesGradientIcon.displayName = 'SparklesGradientIcon'

package/src/icons/SpatialAudioIcon.jsx

@@ -0,0 +1,55 @@
+export const SpatialAudioIcon = ({
+  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}
+  >
+    <g clipPath="url(#clip0_2359_59)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.3004 12.4886C23.7358 11.5864 24 10.3528 24 9C24 7.64722 23.7358 6.41357 23.3004 5.51143C22.8703 4.62011 22.2438 4 21.5 4C20.7562 4 20.1297 4.62011 19.6996 5.51143C19.2642 6.41357 19 7.64722 19 9C19 10.3528 19.2642 11.5864 19.6996 12.4886C20.1297 13.3799 20.7562 14 21.5 14C22.2438 14 22.8703 13.3799 23.3004 12.4886ZM19.6977 9C19.6977 7.69117 19.954 6.51517 20.3604 5.67308C20.772 4.82017 21.3083 4.36145 21.8488 4.36145C22.3894 4.36145 22.9257 4.82017 23.3373 5.67308C23.7436 6.51517 24 7.69117 24 9C24 8.32361 23.8679 7.70679 23.6502 7.25572C23.4352 6.81005 23.1219 6.5 22.75 6.5C22.3781 6.5 22.0648 6.81005 21.8498 7.25572C21.6321 7.70679 21.5 8.32361 21.5 9C21.5 9.67639 21.6321 10.2932 21.8498 10.7443C22.0648 11.1899 22.3781 11.5 22.75 11.5C23.1219 11.5 23.4352 11.1899 23.6502 10.7443C23.8679 10.2932 24 9.67639 24 9C24 10.3088 23.7436 11.4848 23.3373 12.3269C22.9257 13.1798 22.3894 13.6386 21.8488 13.6386C21.3083 13.6386 20.772 13.1798 20.3604 12.3269C19.954 11.4848 19.6977 10.3088 19.6977 9ZM24 9C24 8.34558 23.8718 7.75759 23.6686 7.33654C23.4628 6.91009 23.1947 6.68072 22.9244 6.68072C22.6542 6.68072 22.386 6.91009 22.1802 7.33654C21.977 7.75759 21.8488 8.34558 21.8488 9C21.8488 9.65442 21.977 10.2424 22.1802 10.6635C22.386 11.0899 22.6542 11.3193 22.9244 11.3193C23.1947 11.3193 23.4628 11.0899 23.6686 10.6635C23.8718 10.2424 24 9.65442 24 9Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.699561 5.51143C0.264226 6.41357 0 7.64722 0 9C0 10.3528 0.264226 11.5864 0.699561 12.4886C1.12968 13.3799 1.75615 14 2.5 14C3.24385 14 3.87032 13.3799 4.30044 12.4886C4.73577 11.5864 5 10.3528 5 9C5 7.64722 4.73577 6.41357 4.30044 5.51143C3.87032 4.62011 3.24385 4 2.5 4C1.75615 4 1.12968 4.62011 0.699561 5.51143ZM1.8198 7.33654C2.02298 7.75759 2.15116 8.34558 2.15116 9C2.15116 9.65442 2.02298 10.2424 1.8198 10.6635C1.61401 11.0899 1.34585 11.3193 1.07558 11.3193C0.805314 11.3193 0.537155 11.0899 0.331367 10.6635C0.128186 10.2424 0 9.65442 0 9C0 8.34558 0.128186 7.75759 0.331367 7.33654C0.537155 6.91009 0.805314 6.68072 1.07558 6.68072C1.34585 6.68072 1.61401 6.91009 1.8198 7.33654ZM0.34978 7.25572C0.132113 7.70679 0 8.32361 0 9C0 7.69117 0.256373 6.51517 0.662733 5.67308C1.07431 4.82017 1.61063 4.36145 2.15116 4.36145C2.6917 4.36145 3.22802 4.82017 3.63959 5.67308C4.04595 6.51517 4.30233 7.69117 4.30233 9C4.30233 10.3088 4.04595 11.4848 3.63959 12.3269C3.22802 13.1798 2.6917 13.6386 2.15116 13.6386C1.61063 13.6386 1.07431 13.1798 0.662733 12.3269C0.256373 11.4848 0 10.3088 0 9C0 9.67639 0.132113 10.2932 0.34978 10.7443C0.564839 11.1899 0.878076 11.5 1.25 11.5C1.62192 11.5 1.93516 11.1899 2.15022 10.7443C2.36789 10.2932 2.5 9.67639 2.5 9C2.5 8.32361 2.36789 7.70679 2.15022 7.25572C1.93516 6.81005 1.62192 6.5 1.25 6.5C0.878076 6.5 0.564839 6.81005 0.34978 7.25572Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.3365 1.8198C10.7576 2.02298 11.3456 2.15116 12 2.15116C12.6544 2.15116 13.2424 2.02298 13.6635 1.8198C14.0899 1.61401 14.3193 1.34585 14.3193 1.07558C14.3193 0.805313 14.0899 0.537155 13.6635 0.331366C13.2424 0.128186 12.6544 0 12 0C12.6764 0 13.2932 0.132113 13.7443 0.34978C14.1899 0.564839 14.5 0.878076 14.5 1.25C14.5 1.62192 14.1899 1.93516 13.7443 2.15022C13.2932 2.36789 12.6764 2.5 12 2.5C11.3236 2.5 10.7068 2.36789 10.2557 2.15022C9.81005 1.93516 9.5 1.62192 9.5 1.25C9.5 0.878076 9.81005 0.564839 10.2557 0.34978C10.7068 0.132113 11.3236 0 12 0C11.3456 0 10.7576 0.128186 10.3365 0.331367C9.91009 0.537155 9.68072 0.805314 9.68072 1.07558C9.68072 1.34585 9.91009 1.61401 10.3365 1.8198Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 2.5C7 3.24385 7.62011 3.87032 8.51143 4.30044C9.41357 4.73577 10.6472 5 12 5C13.3528 5 14.5864 4.73577 15.4886 4.30044C16.3799 3.87032 17 3.24385 17 2.5C17 1.75615 16.3799 1.12968 15.4886 0.69956C14.5864 0.264226 13.3528 0 12 0C10.6472 0 9.41357 0.264226 8.51143 0.699561C7.62011 1.12968 7 1.75615 7 2.5ZM12 4.30233C10.6912 4.30233 9.51517 4.04595 8.67308 3.63959C7.82017 3.22802 7.36145 2.6917 7.36145 2.15116C7.36145 1.61063 7.82017 1.07431 8.67308 0.662733C9.51517 0.256373 10.6912 0 12 0C13.3088 0 14.4848 0.256373 15.3269 0.662733C16.1798 1.07431 16.6386 1.61063 16.6386 2.15116C16.6386 2.6917 16.1798 3.22802 15.3269 3.63959C14.4848 4.04595 13.3088 4.30233 12 4.30233Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19 23V22C19 19.7909 17.2091 18 15 18H9C6.79086 18 5 19.7909 5 22V23M15.5 11C15.5 12.933 13.933 14.5 12 14.5C10.067 14.5 8.5 12.933 8.5 11C8.5 9.067 10.067 7.5 12 7.5C13.933 7.5 15.5 9.067 15.5 11Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2359_59">
+        <rect width="24" height="24" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+SpatialAudioIcon.displayName = 'SpatialAudioIcon'

package/src/icons/SpeakerIcon.jsx

@@ -0,0 +1,23 @@
+export const SpeakerIcon = ({
+  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="M2.1214 15.192L2.86681 15.1091L2.1214 15.192ZM2.1214 10.808L1.37599 10.7252L2.1214 10.808ZM22.6343 10.808L21.8889 10.8909V10.8909L22.6343 10.808ZM22.6343 15.192L21.8889 15.1091V15.1091L22.6343 15.192ZM20.444 17.8868L20.5911 18.6222L20.444 17.8868ZM4.31167 17.8868L4.16458 18.6222L4.31167 17.8868ZM4.31167 8.11324L4.16458 7.3778L4.31167 8.11324ZM20.444 8.11324L20.5911 7.3778L20.444 8.11324ZM2.16007 15.5399L1.41465 15.6228L2.16007 15.5399ZM22.5956 15.54L23.341 15.6228V15.6228L22.5956 15.54ZM22.5956 10.4601L23.341 10.3772V10.3772L22.5956 10.4601ZM2.16007 10.4601L2.90548 10.5429L2.16007 10.4601ZM18.3779 6.25C18.7921 6.25 19.1279 5.91421 19.1279 5.5C19.1279 5.08579 18.7921 4.75 18.3779 4.75V6.25ZM6.37784 4.75C5.96363 4.75001 5.62785 5.0858 5.62785 5.50001C5.62786 5.91422 5.96365 6.25001 6.37786 6.25L6.37784 4.75ZM11 10.25C10.5858 10.25 10.25 10.5858 10.25 11C10.25 11.4142 10.5858 11.75 11 11.75V10.25ZM14 11.75C14.4142 11.75 14.75 11.4142 14.75 11C14.75 10.5858 14.4142 10.25 14 10.25V11.75ZM20.1601 15.54L19.4147 15.6228V15.6228L20.1601 15.54ZM20.1214 15.192L20.8668 15.1092V15.1092L20.1214 15.192ZM20.1214 10.8081L20.8668 10.8909V10.8909L20.1214 10.8081ZM20.1601 10.4601L19.4147 10.3773V10.3773L20.1601 10.4601ZM4.65157 15.54L3.90616 15.4572H3.90616L4.65157 15.54ZM4.69024 15.1921L5.43565 15.2749L4.69024 15.1921ZM4.69024 10.8081L3.94483 10.8909L4.69024 10.8081ZM4.65157 10.4601L5.39699 10.3773L4.65157 10.4601ZM3.40575 8.47402L3.00661 7.83905L3.40575 8.47402ZM3.40589 17.5261L3.00679 18.1611L3.40589 17.5261ZM21.3779 8.49182L21.7848 7.86181L21.3779 8.49182ZM21.8502 10.5429L21.8889 10.8909L23.3797 10.7252L23.341 10.3772L21.8502 10.5429ZM21.8889 15.1091L21.8502 15.4571L23.341 15.6228L23.3797 15.2748L21.8889 15.1091ZM2.90548 15.4571L2.86681 15.1091L1.37599 15.2748L1.41465 15.6228L2.90548 15.4571ZM2.86682 10.8909L2.90548 10.5429L1.41465 10.3772L1.37599 10.7252L2.86682 10.8909ZM2.86681 15.1091C2.71106 13.7074 2.71106 12.2926 2.86682 10.8909L1.37599 10.7252C1.208 12.2371 1.208 13.7629 1.37599 15.2748L2.86681 15.1091ZM21.8889 10.8909C22.0446 12.2926 22.0446 13.7074 21.8889 15.1091L23.3797 15.2748C23.5477 13.7629 23.5477 12.2371 23.3797 10.7252L21.8889 10.8909ZM20.2969 17.1513C15.0693 18.1969 9.68639 18.1969 4.45875 17.1513L4.16458 18.6222C9.58641 19.7066 15.1693 19.7066 20.5911 18.6222L20.2969 17.1513ZM4.45875 8.84867C9.68639 7.80315 15.0693 7.80315 20.2969 8.84867L20.5911 7.3778C15.1693 6.29344 9.58641 6.29344 4.16458 7.3778L4.45875 8.84867ZM18.3779 4.75C18.1607 4.75 17.8964 4.69029 17.5308 4.55947C17.1478 4.42243 16.7778 4.25678 16.2585 4.05219C15.2661 3.66123 14.0119 3.25 12.3779 3.25V4.75C13.7438 4.75 14.7973 5.08877 15.7087 5.44781C16.1413 5.61822 16.6224 5.82757 17.0254 5.97178C17.4459 6.12221 17.9027 6.25 18.3779 6.25V4.75ZM12.3779 3.25C10.7304 3.25 9.64062 3.66874 8.73349 4.06182C7.82522 4.45541 7.22918 4.74999 6.37784 4.75L6.37786 6.25C7.60344 6.24998 8.50741 5.79457 9.3299 5.43816C10.1535 5.08125 11.0253 4.75 12.3779 4.75V3.25ZM11 11.75H14V10.25H11V11.75ZM20.9055 15.4572L20.8668 15.1092L19.376 15.2748L19.4147 15.6228L20.9055 15.4572ZM20.8668 10.8909L20.9055 10.5429L19.4147 10.3773L19.376 10.7253L20.8668 10.8909ZM20.8668 15.1092C20.7111 13.7074 20.7111 12.2927 20.8668 10.8909L19.376 10.7253C19.208 12.2371 19.208 13.763 19.376 15.2748L20.8668 15.1092ZM5.39699 15.6229L5.43565 15.2749L3.94483 15.1092L3.90616 15.4572L5.39699 15.6229ZM5.43565 10.7253L5.39699 10.3773L3.90616 10.543L3.94483 10.8909L5.43565 10.7253ZM5.43565 15.2749C5.60364 13.763 5.60364 12.2372 5.43565 10.7253L3.94483 10.8909C4.10058 12.2927 4.10058 13.7074 3.94483 15.1092L5.43565 15.2749ZM3.00665 9.10902C3.49947 9.41876 3.83926 9.94086 3.90616 10.543L5.39699 10.3773C5.27844 9.3104 4.67587 8.38647 3.80485 7.83903L3.00665 9.10902ZM4.16458 7.3778C3.74529 7.46166 3.35455 7.62034 3.00661 7.83905L3.80489 9.10899C4.00093 8.98576 4.22122 8.89618 4.45875 8.84867L4.16458 7.3778ZM3.00661 7.83905C2.13569 8.38651 1.53319 9.31039 1.41465 10.3772L2.90548 10.5429C2.97238 9.94082 3.31212 9.41875 3.80489 9.10899L3.00661 7.83905ZM3.80503 18.161C4.67595 17.6136 5.27845 16.6897 5.39699 15.6229L3.90616 15.4572C3.83926 16.0593 3.49952 16.5813 3.00675 16.8911L3.80503 18.161ZM4.45875 17.1513C4.22126 17.1038 4.00101 17.0143 3.80499 16.8911L3.00679 18.1611C3.35468 18.3797 3.74537 18.5384 4.16458 18.6222L4.45875 17.1513ZM3.80499 16.8911C3.31217 16.5813 2.97238 16.0592 2.90548 15.4571L1.41465 15.6228C1.5332 16.6897 2.13577 17.6136 3.00679 18.1611L3.80499 16.8911ZM21.7847 16.8782C21.3028 16.567 20.9715 16.051 20.9055 15.4572L19.4147 15.6228C19.5316 16.675 20.1193 17.5882 20.9709 18.1382L21.7847 16.8782ZM20.5911 18.6222C21.0248 18.5355 21.4279 18.3687 21.7847 18.1382L20.9709 16.8782C20.7699 17.0081 20.5426 17.1022 20.2969 17.1513L20.5911 18.6222ZM21.7847 18.1382C22.6364 17.5882 23.2241 16.675 23.341 15.6228L21.8502 15.4571C21.7842 16.051 21.4528 16.5669 20.9709 16.8782L21.7847 18.1382ZM20.971 7.8618C20.1193 8.41185 19.5316 9.32503 19.4147 10.3773L20.9055 10.5429C20.9715 9.94909 21.3029 9.4331 21.7848 9.12185L20.971 7.8618ZM20.2969 8.84867C20.5426 8.89781 20.7699 8.99196 20.971 9.12183L21.7848 7.86181C21.428 7.63135 21.0248 7.46455 20.5911 7.3778L20.2969 8.84867ZM20.971 9.12183C21.4529 9.43309 21.7842 9.94907 21.8502 10.5429L23.341 10.3772C23.2241 9.32502 22.6364 8.41187 21.7848 7.86181L20.971 9.12183Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+SpeakerIcon.displayName = 'SpeakerIcon'

package/src/icons/SpeakerLoudIcon.jsx

@@ -0,0 +1,34 @@
+export const SpeakerLoudIcon = ({
+  width = 16,
+  height = 16,
+  className,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+      className={className}
+      {...props}
+    >
+      <g clipPath="url(#clip0_4338_1189)">
+        <path
+          d="M12.7135 3.28666C13.9633 4.53684 14.6654 6.23223 14.6654 7.99999C14.6654 9.76775 13.9633 11.4631 12.7135 12.7133M10.3602 5.63999C10.9851 6.26509 11.3361 7.11278 11.3361 7.99666C11.3361 8.88054 10.9851 9.72823 10.3602 10.3533M7.3335 3.33333L4.00016 6H1.3335V10H4.00016L7.3335 12.6667V3.33333Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4338_1189">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+SpeakerLoudIcon.displayName = 'SpeakerLoudIcon'