@moises.ai/design-system 3.4.5 → 3.5.0

package/src/icons/HiFiIcon.jsx

@@ -0,0 +1,112 @@
+export const HiFiIcon = ({ width = 57, height = 14, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 57 14"
+    fill="none"
+    {...props}
+    className={className}
+  >
+    <path
+      d="M6.77798 0.222229L0 8.56436H6.81057C5.55893 8.91119 4.69245 10.0504 4.69245 11.3492V13.7776L11.4704 5.43552L6.77798 5.43552V2.82887V0.222229Z"
+      fill="url(#paint0_linear_29457_74696)"
+    />
+    <path
+      d="M54.8542 3.30688H56.9999V10.6938H54.8542V3.30688Z"
+      fill="url(#paint1_linear_29457_74696)"
+    />
+    <path
+      d="M53.5519 5.19632H45.3644V6.53067H52.6766V8.37741H45.3644V10.6938H43.2935V3.30688H53.5519V5.19632Z"
+      fill="url(#paint2_linear_29457_74696)"
+    />
+    <path
+      d="M35.542 6.30609H41.7867V8.01406H35.542V6.30609Z"
+      fill="url(#paint3_linear_29457_74696)"
+    />
+    <path
+      d="M31.8889 3.30688H34.0345V10.6938H31.8889V3.30688Z"
+      fill="url(#paint4_linear_29457_74696)"
+    />
+    <path
+      d="M27.9585 3.30688H30.1041V10.6938H27.9585V7.93975H20.785V10.6938H18.6394V3.30688H20.785V6.08233H27.9585V3.30688Z"
+      fill="url(#paint5_linear_29457_74696)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_29457_74696"
+        x1="-28.6665"
+        y1="-4.12207"
+        x2="42.107"
+        y2="10.3082"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.137148" stopColor="white" />
+        <stop offset="0.378105" stopColor="#9E9E9E" />
+        <stop offset="0.572686" stopColor="white" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_29457_74696"
+        x1="17.6558"
+        y1="0.93948"
+        x2="76.9441"
+        y2="20.7787"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.137148" stopColor="white" />
+        <stop offset="0.378105" stopColor="#9E9E9E" />
+        <stop offset="0.572686" stopColor="white" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_29457_74696"
+        x1="17.6559"
+        y1="0.93948"
+        x2="76.9442"
+        y2="20.7787"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.137148" stopColor="white" />
+        <stop offset="0.378105" stopColor="#9E9E9E" />
+        <stop offset="0.572686" stopColor="white" />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_29457_74696"
+        x1="17.6564"
+        y1="0.939069"
+        x2="76.9447"
+        y2="20.7783"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.137148" stopColor="white" />
+        <stop offset="0.378105" stopColor="#9E9E9E" />
+        <stop offset="0.572686" stopColor="white" />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_29457_74696"
+        x1="17.6558"
+        y1="0.939488"
+        x2="76.9442"
+        y2="20.7787"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.137148" stopColor="white" />
+        <stop offset="0.378105" stopColor="#9E9E9E" />
+        <stop offset="0.572686" stopColor="white" />
+      </linearGradient>
+      <linearGradient
+        id="paint5_linear_29457_74696"
+        x1="17.656"
+        y1="0.939472"
+        x2="76.9443"
+        y2="20.7787"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.137148" stopColor="white" />
+        <stop offset="0.378105" stopColor="#9E9E9E" />
+        <stop offset="0.572686" stopColor="white" />
+      </linearGradient>
+    </defs>
+  </svg>
+)
+
+HiFiIcon.displayName = 'HiFiIcon'

package/src/icons/HiHatIcon.jsx

@@ -0,0 +1,21 @@
+export const HiHatIcon = ({ 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.9835 1V6.0625M11.9835 23V18.625M4.55722 8.99113C3.91491 9.58623 3.54999 10.2669 3.54999 10.9911C3.54999 12.1563 4.49446 13.2086 6.01896 13.9734C7.54346 14.7382 9.65311 15.2105 11.9835 15.2105C14.3139 15.2105 16.4235 14.7382 17.948 13.9734C19.4725 13.2086 20.417 12.1563 20.417 10.9911C20.417 10.2669 20.0521 9.58623 19.4098 8.99113M4.55722 8.99113C4.94824 9.35341 5.44207 9.68399 6.01896 9.9734C7.54346 10.7382 9.65311 11.2105 11.9835 11.2105C14.3139 11.2105 16.4235 10.7382 17.948 9.9734C18.5249 9.68399 19.0187 9.35341 19.4098 8.99113M4.55722 8.99113C3.91491 8.39604 3.54999 7.7154 3.54999 6.99113C3.54999 5.82594 4.49446 4.77368 6.01896 4.00887C7.54346 3.24405 9.65311 2.77182 11.9835 2.77182C14.3139 2.77182 16.4235 3.24405 17.948 4.00887C19.4725 4.77368 20.417 5.82594 20.417 6.99113C20.417 7.7154 20.0521 8.39604 19.4098 8.99113"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+HiHatIcon.displayName = 'HiHatIcon'

package/src/icons/HomeIcon.jsx

@@ -0,0 +1,18 @@
+export const HomeIcon = ({ 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 2L12.4881 1.43056C12.2072 1.18981 11.7928 1.18981 11.5119 1.43056L12 2ZM2 10.5714L1.51191 10.002L1.25 10.2265V10.5714H2ZM9.14286 22V22.75C9.55707 22.75 9.89286 22.4142 9.89286 22H9.14286ZM14.8571 22H14.1071C14.1071 22.4142 14.4429 22.75 14.8571 22.75V22ZM22 10.5714H22.75V10.2265L22.4881 10.002L22 10.5714ZM3.42857 22.75H9.14286V21.25H3.42857V22.75ZM22.4881 10.002L12.4881 1.43056L11.5119 2.56944L21.5119 11.1409L22.4881 10.002ZM11.5119 1.43056L1.51191 10.002L2.48809 11.1409L12.4881 2.56944L11.5119 1.43056ZM9.89286 22V17.7143H8.39286V22H9.89286ZM14.1071 17.7143V22H15.6071V17.7143H14.1071ZM14.8571 22.75H20.5714V21.25H14.8571V22.75ZM22.75 20.5714V10.5714H21.25V20.5714H22.75ZM1.25 10.5714V20.5714H2.75V10.5714H1.25ZM12 15.6071C13.1637 15.6071 14.1071 16.5505 14.1071 17.7143H15.6071C15.6071 15.7221 13.9922 14.1071 12 14.1071V15.6071ZM12 14.1071C10.0078 14.1071 8.39286 15.7221 8.39286 17.7143H9.89286C9.89286 16.5505 10.8363 15.6071 12 15.6071V14.1071ZM20.5714 22.75C21.7746 22.75 22.75 21.7746 22.75 20.5714H21.25C21.25 20.9462 20.9462 21.25 20.5714 21.25V22.75ZM3.42857 21.25C3.05381 21.25 2.75 20.9462 2.75 20.5714H1.25C1.25 21.7746 2.22538 22.75 3.42857 22.75V21.25Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+HomeIcon.displayName = 'HomeIcon'

package/src/icons/Icons.stories.jsx

@@ -0,0 +1,154 @@
+import { useState } from 'react'
+import { Flex, Heading, Text, Box, Grid, Card, Tabs } from '@radix-ui/themes'
+import { Select } from '../components/Select/Select.jsx'
+import { TextField } from '../components/TextField/TextField.jsx'
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
+import * as IconsList from '../icons.jsx'
+
+export default {
+  title: 'Icons',
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+// List of icons that use gradients
+const gradientIcons = ['HiFiIcon',
+  'ProducerIcon',
+  'IsolateDrumsGradientIcon',
+  'HiFiGradientIcon',
+  'CloudDownloadGradientIcon',
+  'SoundEffectsGradientIcon',
+  'SparklesGradientIcon',
+  'SpliterGradientIcon',
+  'SoundtrackGradientIcon',, 'FlashGradientIcon']
+
+export const Icons = () => {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [size, setSize] = useState('24')
+
+  const allIcons = Object.entries(IconsList)
+
+  const gradientIconsList = allIcons.filter(
+    ([name]) =>
+      gradientIcons.includes(name) &&
+      name.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
+
+  const regularIconsList = allIcons.filter(
+    ([name]) =>
+      !gradientIcons.includes(name) &&
+      name.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
+
+  const renderIconGrid = (icons) => (
+    <Grid
+      columns={{ initial: '2', xs: '3', sm: '4', md: '5', lg: '6' }}
+      gap="4"
+    >
+      {icons.map(([name, Icon]) => {
+        const isGradient = gradientIcons.includes(name)
+        return (
+          <Card key={name} style={{ textAlign: 'center', padding: '16px' }}>
+            <Flex direction="column" align="center" gap="3">
+              <Box
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  height: isGradient
+                    ? '48px'
+                    : size === '16'
+                    ? '24px'
+                    : size === '24'
+                    ? '32px'
+                    : '48px',
+                  minHeight: isGradient ? '48px' : 'auto',
+                  marginBottom: '8px',
+                  marginTop: '8px',
+                }}
+              >
+                <Icon {...(isGradient ? {} : { width: size, height: size })} />
+              </Box>
+              <Flex direction="column" align="center" gap="1">
+                <Text
+                  size="1"
+                  style={{ wordBreak: 'break-word', lineHeight: '1.2' }}
+                >
+                  {name}
+                </Text>
+              </Flex>
+            </Flex>
+          </Card>
+        )
+      })}
+    </Grid>
+  )
+
+  return (
+    <Box p="6">
+      <Heading size="8" mb="4">
+        Icons
+      </Heading>
+
+      <Text mb="4">
+        Explore the complete icon library available in
+        @moises.ai/design-system/icons
+      </Text>
+
+      <Flex gap="4" my="6">
+        <Flex direction="column" width="100%">
+          <TextField
+            title="Search by name"
+            placeholder="Search..."
+            onChange={(e) => setSearchTerm(e.target.value)}
+            size="2"
+            Icon={MagnifyingGlassIcon}
+          />
+        </Flex>
+
+        <Select
+          title="Size"
+          items={[
+            { value: '16', label: '16px' },
+            { value: '24', label: '24px' },
+            { value: '32', label: '32px' },
+          ]}
+          size="2"
+          onChange={(value) => setSize(value)}
+          defaultValue="16"
+          variant="soft"
+        />
+      </Flex>
+
+      <Tabs.Root defaultValue="regular">
+        <Tabs.List>
+          <Tabs.Trigger value="regular">
+            Regular Icons ({regularIconsList.length})
+          </Tabs.Trigger>
+          <Tabs.Trigger value="gradient">
+            Gradient Icons ({gradientIconsList.length})
+          </Tabs.Trigger>
+        </Tabs.List>
+
+        <Box pt="4">
+          <Tabs.Content value="regular">
+            {regularIconsList.length > 0 ? (
+              renderIconGrid(regularIconsList)
+            ) : (
+              <Text>No icons found.</Text>
+            )}
+          </Tabs.Content>
+
+          <Tabs.Content value="gradient">
+            {gradientIconsList.length > 0 ? (
+              renderIconGrid(gradientIconsList)
+            ) : (
+              <Text>No gradient icons found.</Text>
+            )}
+          </Tabs.Content>
+        </Box>
+      </Tabs.Root>
+    </Box>
+  )
+}

package/src/icons/ImageGalleryIcon.jsx

@@ -0,0 +1,25 @@
+export const ImageGalleryIcon = ({
+  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.9 18.5H18.1C19.1493 18.5 20 17.6605 20 16.625V5.375C20 4.33947 19.1493 3.5 18.1 3.5H2.9C1.85066 3.5 1 4.33947 1 5.375V16.625C1 17.6605 1.85066 18.5 2.9 18.5ZM2.9 18.5L14.3 8.1875L20 13.875M3 21.75H20.25C21.9069 21.75 23.25 20.4069 23.25 18.75V7.25M7.15874 8.80353C7.15874 9.19186 6.83974 9.50666 6.44624 9.50666C6.05274 9.50666 5.73374 9.19186 5.73374 8.80353C5.73374 8.41521 6.05274 8.10041 6.44624 8.10041C6.83974 8.10041 7.15874 8.41521 7.15874 8.80353Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+ImageGalleryIcon.displayName = 'ImageGalleryIcon'

package/src/icons/ImageIcon.jsx

@@ -0,0 +1,21 @@
+export const ImageIcon = ({ 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="M4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20ZM4 20L16 9L22 15M8.48288 9.6571C8.48288 10.0713 8.1471 10.4071 7.73288 10.4071C7.31867 10.4071 6.98288 10.0713 6.98288 9.6571C6.98288 9.24289 7.31867 8.9071 7.73288 8.9071C8.1471 8.9071 8.48288 9.24289 8.48288 9.6571Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+ImageIcon.displayName = 'ImageIcon'

package/src/icons/Info2Icon.jsx

@@ -0,0 +1,18 @@
+export const Info2Icon = ({ 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="M9.875 9.5C9.46079 9.5 9.125 9.83579 9.125 10.25C9.125 10.6642 9.46079 11 9.875 11V9.5ZM10.75 10.25H11.5C11.5 9.83579 11.1642 9.5 10.75 9.5V10.25ZM10 16.25C10 16.6642 10.3358 17 10.75 17C11.1642 17 11.5 16.6642 11.5 16.25H10ZM20 10.75C20 15.8586 15.8586 20 10.75 20V21.5C16.6871 21.5 21.5 16.6871 21.5 10.75H20ZM10.75 20C5.64137 20 1.5 15.8586 1.5 10.75H0C0 16.6871 4.81294 21.5 10.75 21.5V20ZM1.5 10.75C1.5 5.64137 5.64137 1.5 10.75 1.5V0C4.81294 0 0 4.81294 0 10.75H1.5ZM10.75 1.5C15.8586 1.5 20 5.64137 20 10.75H21.5C21.5 4.81294 16.6871 0 10.75 0V1.5ZM9.875 11H10.75V9.5H9.875V11ZM10 10.25V16.25H11.5V10.25H10ZM10.625 5.875V7.375C11.4534 7.375 12.125 6.70343 12.125 5.875H10.625ZM10.625 5.875H9.125C9.125 6.70343 9.79657 7.375 10.625 7.375V5.875ZM10.625 5.875V4.375C9.79657 4.375 9.125 5.04657 9.125 5.875H10.625ZM10.625 5.875H12.125C12.125 5.04657 11.4534 4.375 10.625 4.375V5.875Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+Info2Icon.displayName = 'Info2Icon'

package/src/icons/InfoIcon.jsx

@@ -0,0 +1,20 @@
+export const InfoIcon = ({ 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
+      fillRule="evenodd"
+      clipRule="evenodd"
+      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 22ZM11.875 5.625C11.0466 5.625 10.375 6.29657 10.375 7.125C10.375 7.95343 11.0466 8.625 11.875 8.625C12.7034 8.625 13.375 7.95343 13.375 7.125C13.375 6.29657 12.7034 5.625 11.875 5.625ZM11.125 10.75C10.7108 10.75 10.375 11.0858 10.375 11.5C10.375 11.9142 10.7108 12.25 11.125 12.25V16.8594C11.125 17.3081 11.4888 17.6719 11.9375 17.6719C12.3862 17.6719 12.75 17.3081 12.75 16.8594V11.5C12.75 11.0858 12.4142 10.75 12 10.75H11.125Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+InfoIcon.displayName = 'InfoIcon'

package/src/icons/InternetSignalIcon.jsx

@@ -0,0 +1,26 @@
+export const InternetSignalIcon = ({
+  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="M19.0701 1C20.9448 2.87528 21.9979 5.41836 21.9979 8.07C21.9979 10.7216 20.9448 13.2647 19.0701 15.14M15.5401 4.53C16.4774 5.46764 17.004 6.73918 17.004 8.065C17.004 9.39082 16.4774 10.6624 15.5401 11.6M4.93006 1C3.05535 2.87528 2.0022 5.41836 2.0022 8.07C2.0022 10.7216 3.05535 13.2647 4.93006 15.14M8.46006 4.53C7.52271 5.46764 6.99613 6.73918 6.99613 8.065C6.99613 9.39082 7.52271 10.6624 8.46006 11.6M12 8V23"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+InternetSignalIcon.displayName = 'InternetSignalIcon'

package/src/icons/IpadIcon.jsx

@@ -0,0 +1,20 @@
+export const IpadIcon = ({ 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 19.2324H10M17.8232 22H6.17677C5.25071 22 4.5 21.2493 4.5 20.3232V3.67677C4.5 2.75071 5.25071 2 6.17677 2H17.8232C18.7493 2 19.5 2.75071 19.5 3.67677V20.3232C19.5 21.2493 18.7493 22 17.8232 22Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+IpadIcon.displayName = 'IpadIcon'

package/src/icons/IsolateDrumsGradientIcon.jsx

@@ -0,0 +1,41 @@
+export const IsolateDrumsGradientIcon = ({
+  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_243036)">
+      <path
+        d="M42.8984 40.8285C42.8984 39.7239 42.003 38.8285 40.8984 38.8285C39.7939 38.8285 38.8984 39.7239 38.8984 40.8285H42.8984ZM59.7069 38.7275C59.7069 37.6229 58.8114 36.7275 57.7069 36.7275C56.6023 36.7275 55.7069 37.6229 55.7069 38.7275H59.7069ZM26.0902 38.7275C26.0902 37.6229 25.1948 36.7275 24.0902 36.7275C22.9857 36.7275 22.0902 37.6229 22.0902 38.7275H26.0902ZM66.158 16.5372C67.0463 15.8806 67.2341 14.6283 66.5775 13.74C65.921 12.8518 64.6686 12.664 63.7804 13.3205L66.158 16.5372ZM38.306 32.1505C37.4177 32.8071 37.2299 34.0594 37.8865 34.9476C38.543 35.8359 39.7953 36.0237 40.6836 35.3671L38.306 32.1505ZM56.6667 4.66663C55.5622 4.66663 54.6667 5.56206 54.6667 6.66663C54.6667 7.7712 55.5622 8.66663 56.6667 8.66663V4.66663ZM71.3334 23.3333C71.3334 24.4379 72.2288 25.3333 73.3334 25.3333C74.438 25.3333 75.3334 24.4379 75.3334 23.3333H71.3334ZM4.66675 23.3333C4.66675 24.4379 5.56218 25.3333 6.66675 25.3333C7.77132 25.3333 8.66675 24.4379 8.66675 23.3333H4.66675ZM6.66675 13.3333H4.66675H6.66675ZM13.3334 6.66663V8.66663V6.66663ZM23.3334 8.66663C24.438 8.66663 25.3334 7.7712 25.3334 6.66663C25.3334 5.56206 24.438 4.66663 23.3334 4.66663V8.66663ZM23.3334 75.3333C24.438 75.3333 25.3334 74.4379 25.3334 73.3333C25.3334 72.2287 24.438 71.3333 23.3334 71.3333V75.3333ZM13.3334 73.3333V71.3333V73.3333ZM6.66675 66.6666H8.66675H6.66675ZM8.66675 56.6666C8.66675 55.5621 7.77132 54.6666 6.66675 54.6666C5.56218 54.6666 4.66675 55.5621 4.66675 56.6666L8.66675 56.6666ZM75.3334 56.6666C75.3334 55.5621 74.438 54.6666 73.3334 54.6666C72.2288 54.6666 71.3334 55.5621 71.3334 56.6666H75.3334ZM73.3334 66.6666H71.3334H73.3334ZM66.6668 73.3333V75.3333V73.3333ZM56.6668 71.3333C55.5622 71.3333 54.6668 72.2287 54.6668 73.3333C54.6668 74.4379 55.5622 75.3333 56.6668 75.3333V71.3333ZM40.8984 40.8285H38.8984V60.7884H40.8984H42.8984V40.8285H40.8984ZM57.7069 38.7275H55.7069V58.6874H57.7069H59.7069V38.7275H57.7069ZM24.0902 38.7275H22.0902V58.6874H24.0902H26.0902V38.7275H24.0902ZM15.6858 52.3835H17.6858V35.5752H15.6858H13.6858V52.3835H15.6858ZM40.8984 60.7884V58.7884C34.0914 58.7884 28.0117 57.8655 23.703 56.4291C21.5381 55.7075 19.9305 54.8922 18.9051 54.0841C17.8572 53.2582 17.6858 52.6684 17.6858 52.3835H15.6858H13.6858C13.6858 54.4193 14.9254 56.0405 16.4292 57.2257C17.9555 58.4286 20.0402 59.4245 22.4379 60.2238C27.2544 61.8295 33.781 62.7884 40.8984 62.7884V60.7884ZM66.1107 52.3835H64.1107C64.1107 52.6685 63.9393 53.2582 62.8914 54.0841C61.8661 54.8922 60.2585 55.7075 58.0937 56.4291C53.785 57.8655 47.7055 58.7884 40.8984 58.7884V60.7884V62.7884C48.0158 62.7884 54.5424 61.8295 59.3587 60.2238C61.7565 59.4245 63.8411 58.4286 65.3674 57.2257C66.8711 56.0405 68.1107 54.4193 68.1107 52.3835H66.1107ZM66.1107 35.5752H64.1107V52.3835H66.1107H68.1107V35.5752H66.1107ZM66.1107 35.5752H64.1107C64.1107 35.8601 63.9393 36.4499 62.8914 37.2758C61.866 38.0839 60.2584 38.8991 58.0936 39.6208C53.7849 41.0572 47.7053 41.9799 40.8982 41.9799V43.9799V45.9799C48.0156 45.9799 54.5422 45.0211 59.3586 43.4155C61.7564 42.6162 63.841 41.6203 65.3673 40.4174C66.8711 39.2322 68.1107 37.611 68.1107 35.5752H66.1107ZM40.8982 43.9799V41.9799C34.0912 41.9799 28.0116 41.0572 23.7029 39.6208C21.5381 38.8991 19.9304 38.0839 18.9051 37.2758C17.8572 36.4499 17.6858 35.8601 17.6858 35.5752H15.6858H13.6858C13.6858 37.611 14.9254 39.2322 16.4291 40.4174C17.9554 41.6203 20.0401 42.6162 22.4378 43.4155C27.2543 45.0211 33.7808 45.9799 40.8982 45.9799V43.9799ZM15.6858 35.5752H17.6858C17.6858 35.2903 17.8572 34.7007 18.905 33.8749C19.9303 33.0669 21.5379 32.2518 23.7028 31.5303C28.0115 30.0942 34.0911 29.1717 40.8982 29.1717V27.1717V25.1717C33.7809 25.1717 27.2543 26.1302 22.438 27.7355C20.0402 28.5347 17.9555 29.5304 16.4292 30.7332C14.9254 31.9182 13.6858 33.5394 13.6858 35.5752H15.6858ZM40.8982 27.1717V29.1717C47.7053 29.1717 53.785 30.0942 58.0937 31.5303C60.2585 32.2518 61.8661 33.0669 62.8915 33.8749C63.9393 34.7007 64.1107 35.2903 64.1107 35.5752H66.1107H68.1107C68.1107 33.5394 66.8711 31.9182 65.3673 30.7332C63.8409 29.5304 61.7563 28.5347 59.3585 27.7355C54.5421 26.1302 48.0156 25.1717 40.8982 25.1717V27.1717ZM64.9692 14.9289L63.7804 13.3205L38.306 32.1505L39.4948 33.7588L40.6836 35.3671L66.158 16.5372L64.9692 14.9289ZM56.6667 6.66663V8.66663H66.6667V6.66663V4.66663H56.6667V6.66663ZM73.3334 13.3333H71.3334V23.3333H73.3334H75.3334V13.3333H73.3334ZM66.6667 6.66663V8.66663C69.2441 8.66663 71.3334 10.756 71.3334 13.3333H73.3334H75.3334C75.3334 8.54683 71.4532 4.66663 66.6667 4.66663V6.66663ZM6.66675 23.3333H8.66675L8.66675 13.3333L6.66675 13.3333H4.66675L4.66675 23.3333H6.66675ZM13.3334 6.66663V8.66663L23.3334 8.66663V6.66663V4.66663L13.3334 4.66663L13.3334 6.66663ZM6.66675 13.3333L8.66675 13.3333C8.66675 10.756 10.7561 8.66663 13.3334 8.66663V6.66663L13.3334 4.66663C8.54695 4.66663 4.66675 8.54682 4.66675 13.3333H6.66675ZM23.3334 73.3333V71.3333H13.3334V73.3333V75.3333H23.3334V73.3333ZM6.66675 66.6666H8.66675L8.66675 56.6666H6.66675L4.66675 56.6666L4.66675 66.6666H6.66675ZM13.3334 73.3333V71.3333C10.7561 71.3333 8.66675 69.244 8.66675 66.6666H6.66675H4.66675C4.66675 71.4531 8.54695 75.3333 13.3334 75.3333L13.3334 73.3333ZM73.3334 56.6666H71.3334V66.6666H73.3334H75.3334V56.6666H73.3334ZM66.6668 73.3333V71.3333H56.6668V73.3333V75.3333H66.6668V73.3333ZM73.3334 66.6666H71.3334C71.3334 69.244 69.2441 71.3333 66.6668 71.3333V73.3333V75.3333C71.4532 75.3333 75.3334 71.4531 75.3334 66.6666H73.3334Z"
+        fill="url(#paint0_linear_29160_243036)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_29160_243036"
+        x1="65.0001"
+        y1="18.9583"
+        x2="15.8334"
+        y2="64.7916"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0AFFA7" />
+        <stop offset="1" stopColor="#00DAE8" />
+      </linearGradient>
+      <clipPath id="clip0_29160_243036">
+        <rect width="80" height="80" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+IsolateDrumsGradientIcon.displayName = 'IsolateDrumsGradientIcon'

package/src/icons/IsolateDrumsIcon.jsx

@@ -0,0 +1,23 @@
+export const IsolateDrumsIcon = ({ width, height, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g clipPath="url(#clip0_4905_1332)">
+      <path
+        d="M8.67935 8.16538C8.67935 7.88924 8.45549 7.66538 8.17935 7.66538C7.9032 7.66538 7.67935 7.88924 7.67935 8.16538H8.67935ZM12.041 7.74518C12.041 7.46904 11.8172 7.24518 11.541 7.24518C11.2649 7.24518 11.041 7.46904 11.041 7.74518H12.041ZM5.3177 7.74518C5.3177 7.46904 5.09385 7.24518 4.8177 7.24518C4.54156 7.24518 4.3177 7.46904 4.3177 7.74518H5.3177ZM13.2907 3.38754C13.5128 3.22339 13.5597 2.91031 13.3956 2.68825C13.2314 2.46619 12.9184 2.41923 12.6963 2.58337L13.2907 3.38754ZM7.60141 6.34936C7.37934 6.5135 7.33239 6.82659 7.49653 7.04865C7.66068 7.27071 7.97376 7.31767 8.19582 7.15352L7.60141 6.34936ZM11.333 0.833008C11.0569 0.833008 10.833 1.05687 10.833 1.33301C10.833 1.60915 11.0569 1.83301 11.333 1.83301V0.833008ZM14.1663 4.66634C14.1663 4.94248 14.3902 5.16634 14.6663 5.16634C14.9425 5.16634 15.1663 4.94248 15.1663 4.66634H14.1663ZM0.833008 4.66634C0.833008 4.94248 1.05687 5.16634 1.33301 5.16634C1.60915 5.16634 1.83301 4.94248 1.83301 4.66634L0.833008 4.66634ZM1.33301 2.66634L0.833008 2.66634L1.33301 2.66634ZM2.66634 1.33301L2.66634 1.83301L2.66634 1.33301ZM4.66634 1.83301C4.94248 1.83301 5.16634 1.60915 5.16634 1.33301C5.16634 1.05687 4.94248 0.833008 4.66634 0.833008L4.66634 1.83301ZM4.66634 15.1663C4.94248 15.1663 5.16634 14.9425 5.16634 14.6663C5.16634 14.3902 4.94248 14.1663 4.66634 14.1663V15.1663ZM2.66634 14.6663L2.66634 14.1663L2.66634 14.1663L2.66634 14.6663ZM1.33301 13.333L1.83301 13.333L1.33301 13.333ZM1.83301 11.333C1.83301 11.0569 1.60915 10.833 1.33301 10.833C1.05687 10.833 0.833008 11.0569 0.833008 11.333L1.83301 11.333ZM15.1663 11.333C15.1663 11.0569 14.9425 10.833 14.6663 10.833C14.3902 10.833 14.1663 11.0569 14.1663 11.333H15.1663ZM14.6663 13.333L14.1663 13.333L14.1663 13.333L14.6663 13.333ZM13.333 14.6663L13.333 15.1663L13.333 15.1663L13.333 14.6663ZM11.333 14.1663C11.0569 14.1663 10.833 14.3902 10.833 14.6663C10.833 14.9425 11.0569 15.1663 11.333 15.1663V14.1663ZM8.17935 8.16538H7.67935V12.1574H8.17935H8.67935V8.16538H8.17935ZM11.541 7.74518H11.041V11.7372H11.541H12.041V7.74518H11.541ZM4.8177 7.74518H4.3177V11.7372H4.8177H5.3177V7.74518H4.8177ZM3.13682 10.4764H3.63682V7.11473H3.13682H2.63682V10.4764H3.13682ZM8.17935 12.1574V11.6574C6.8257 11.6574 5.62093 11.4737 4.77188 11.1906C4.34474 11.0482 4.03513 10.8897 3.84259 10.738C3.6444 10.5818 3.63682 10.4896 3.63682 10.4764H3.13682H2.63682C2.63682 10.9273 2.91145 11.2773 3.22359 11.5234C3.54138 11.7738 3.97024 11.9775 4.45562 12.1393C5.4316 12.4647 6.74811 12.6574 8.17935 12.6574V12.1574ZM13.2218 10.4764H12.7218C12.7218 10.4896 12.7142 10.5818 12.516 10.738C12.3235 10.8897 12.0139 11.0482 11.5868 11.1906C10.7377 11.4737 9.53299 11.6574 8.17935 11.6574V12.1574V12.6574C9.61058 12.6574 10.9271 12.4647 11.903 12.1393C12.3884 11.9775 12.8173 11.7738 13.135 11.5234C13.4472 11.2773 13.7218 10.9273 13.7218 10.4764H13.2218ZM13.2218 7.11473H12.7218V10.4764H13.2218H13.7218V7.11473H13.2218ZM13.2218 7.11473H12.7218C12.7218 7.12794 12.7142 7.22011 12.516 7.3763C12.3235 7.52805 12.0139 7.68658 11.5868 7.82897C10.7377 8.11202 9.53296 8.29567 8.17931 8.29567V8.79567V9.29567C9.61054 9.29567 10.927 9.103 11.903 8.77765C12.3884 8.61584 12.8172 8.41215 13.135 8.1617C13.4472 7.91568 13.7218 7.56566 13.7218 7.11473H13.2218ZM8.17931 8.79567V8.29567C6.82565 8.29567 5.6209 8.11202 4.77186 7.82897C4.34472 7.68658 4.03512 7.52805 3.84258 7.3763C3.6444 7.22011 3.63682 7.12794 3.63682 7.11473H3.13682H2.63682C2.63682 7.56566 2.91144 7.91568 3.22359 8.1617C3.54137 8.41215 3.97023 8.61584 4.4556 8.77765C5.43158 9.103 6.74807 9.29567 8.17931 9.29567V8.79567ZM3.13682 7.11473H3.63682C3.63682 7.10152 3.64439 7.00937 3.84256 6.8532C4.0351 6.70148 4.34469 6.54297 4.77183 6.40061C5.62088 6.11761 6.82564 5.93401 8.17931 5.93401V5.43401V4.93401C6.74808 4.93401 5.4316 5.12662 4.45563 5.45191C3.97026 5.61369 3.5414 5.81734 3.22361 6.06778C2.91145 6.31377 2.63682 6.66378 2.63682 7.11473H3.13682ZM8.17931 5.43401V5.93401C9.53297 5.93401 10.7377 6.11761 11.5868 6.40061C12.0139 6.54297 12.3235 6.70148 12.5161 6.8532C12.7142 7.00937 12.7218 7.10152 12.7218 7.11473H13.2218H13.7218C13.7218 6.66378 13.4472 6.31377 13.135 6.06778C12.8172 5.81734 12.3884 5.61369 11.903 5.45191C10.927 5.12662 9.61053 4.93401 8.17931 4.93401V5.43401ZM12.9935 2.98545L12.6963 2.58337L7.60141 6.34936L7.89861 6.75144L8.19582 7.15352L13.2907 3.38754L12.9935 2.98545ZM11.333 1.33301V1.83301H13.333V1.33301V0.833008H11.333V1.33301ZM14.6663 2.66634H14.1663V4.66634H14.6663H15.1663V2.66634H14.6663ZM13.333 1.33301V1.83301C13.7932 1.83301 14.1663 2.2061 14.1663 2.66634H14.6663H15.1663C15.1663 1.65382 14.3455 0.833008 13.333 0.833008V1.33301ZM1.33301 4.66634L1.83301 4.66634L1.83301 2.66634L1.33301 2.66634L0.833008 2.66634L0.833008 4.66634L1.33301 4.66634ZM2.66634 1.33301L2.66634 1.83301L4.66634 1.83301L4.66634 1.33301L4.66634 0.833008L2.66634 0.833008L2.66634 1.33301ZM1.33301 2.66634L1.83301 2.66634C1.83301 2.2061 2.2061 1.83301 2.66634 1.83301L2.66634 1.33301L2.66634 0.833008C1.65382 0.833008 0.833008 1.65382 0.833008 2.66634L1.33301 2.66634ZM4.66634 14.6663V14.1663H2.66634V14.6663V15.1663H4.66634V14.6663ZM1.33301 13.333L1.83301 13.333L1.83301 11.333L1.33301 11.333L0.833008 11.333L0.833008 13.333L1.33301 13.333ZM2.66634 14.6663L2.66634 14.1663C2.2061 14.1663 1.83301 13.7932 1.83301 13.333L1.33301 13.333L0.833008 13.333C0.833008 14.3455 1.65382 15.1663 2.66634 15.1663L2.66634 14.6663ZM14.6663 11.333H14.1663V13.333H14.6663H15.1663V11.333H14.6663ZM13.333 14.6663V14.1663H11.333V14.6663V15.1663H13.333V14.6663ZM14.6663 13.333L14.1663 13.333C14.1663 13.7932 13.7932 14.1663 13.333 14.1663L13.333 14.6663L13.333 15.1663C14.3455 15.1663 15.1663 14.3455 15.1663 13.333L14.6663 13.333Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4905_1332">
+        <rect width={width} height={height} fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+IsolateDrumsIcon.displayName = 'IsolateDrumsIcon'

package/src/icons/KaraokeIcon.jsx

@@ -0,0 +1,23 @@
+export const KaraokeIcon = ({
+  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="M4.28239 19.8388L3.75206 20.3691C4.03126 20.6483 4.47912 20.6632 4.77627 20.4032L4.28239 19.8388ZM2.16107 17.7174L1.59664 17.2236C1.33663 17.5207 1.35154 17.9686 1.63074 18.2478L2.16107 17.7174ZM20.1303 16.5067C20.4102 16.2014 20.3896 15.727 20.0843 15.4471C19.7789 15.1672 19.3045 15.1878 19.0246 15.4931L20.1303 16.5067ZM15.7429 20.1831L15.19 20.6899C15.3321 20.8449 15.5327 20.9331 15.7429 20.9331C15.9531 20.9331 16.1537 20.8449 16.2958 20.6899L15.7429 20.1831ZM14.5528 17.7749C14.2729 17.4695 13.7984 17.4489 13.4931 17.7288C13.1878 18.0087 13.1671 18.4831 13.447 18.7885L14.5528 17.7749ZM18.2477 8.34827C16.9785 9.61747 14.9208 9.61747 13.6516 8.34827L12.5909 9.40893C14.4459 11.2639 17.4534 11.2639 19.3084 9.40893L18.2477 8.34827ZM13.6516 8.34827C12.3824 7.07906 12.3824 5.02128 13.6516 3.75207L12.5909 2.69141C10.7359 4.5464 10.7359 7.55394 12.5909 9.40893L13.6516 8.34827ZM13.6516 3.75207C14.9208 2.48287 16.9785 2.48287 18.2477 3.75207L19.3084 2.69141C17.4534 0.836423 14.4459 0.836423 12.5909 2.69141L13.6516 3.75207ZM18.2477 3.75207C19.517 5.02128 19.517 7.07906 18.2477 8.34827L19.3084 9.40893C21.1634 7.55394 21.1634 4.5464 19.3084 2.69141L18.2477 3.75207ZM15.1022 9.37483L3.78851 19.2743L4.77627 20.4032L16.09 10.5037L15.1022 9.37483ZM4.81272 19.3084L2.6914 17.1871L1.63074 18.2478L3.75206 20.3691L4.81272 19.3084ZM2.7255 18.2113L12.625 6.8976L11.4961 5.90985L1.59664 17.2236L2.7255 18.2113ZM19.0246 15.4931L15.19 19.6763L16.2958 20.6899L20.1303 16.5067L19.0246 15.4931ZM16.2958 19.6763L14.5528 17.7749L13.447 18.7885L15.19 20.6899L16.2958 19.6763Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+KaraokeIcon.displayName = 'KaraokeIcon'

package/src/icons/KaraokeMicIcon.jsx

@@ -0,0 +1,23 @@
+export const KaraokeMicIcon = ({
+  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="M7.10791 17.1587L6.60943 16.5983H6.60943L7.10791 17.1587ZM5.73617 17.1186L6.2665 16.5883H6.2665L5.73617 17.1186ZM4.24169 15.6241L3.71136 16.1545H3.71136L4.24169 15.6241ZM4.20163 14.2524L4.762 14.7509L4.20163 14.2524ZM4.78189 16.5785L5.31222 17.1088H5.31222L4.78189 16.5785ZM18.5892 20.024L19.0963 19.4714L18.5892 20.024ZM21.053 23.3026C21.3581 23.5827 21.8326 23.5623 22.1126 23.2571C22.3927 22.9519 22.3723 22.4775 22.0671 22.1974L21.053 23.3026ZM18.4795 7.47705C17.2103 8.74626 15.1525 8.74626 13.8833 7.47705L12.8226 8.53771C14.6776 10.3927 17.6851 10.3927 19.5401 8.53771L18.4795 7.47705ZM13.8833 7.47705C12.6141 6.20785 12.6141 4.15006 13.8833 2.88086L12.8226 1.8202C10.9676 3.67519 10.9676 6.68272 12.8226 8.53771L13.8833 7.47705ZM13.8833 2.88086C15.1525 1.61165 17.2103 1.61165 18.4795 2.88086L19.5401 1.8202C17.6851 -0.0347927 14.6776 -0.0347927 12.8226 1.8202L13.8833 2.88086ZM18.4795 2.88086C19.7487 4.15006 19.7487 6.20785 18.4795 7.47705L19.5401 8.53771C21.3951 6.68272 21.3951 3.67519 19.5401 1.8202L18.4795 2.88086ZM15.5061 8.68446L6.60943 16.5983L7.60638 17.719L16.503 9.80521L15.5061 8.68446ZM6.2665 16.5883L4.77202 15.0938L3.71136 16.1545L5.20584 17.6489L6.2665 16.5883ZM4.762 14.7509L12.6758 5.85422L11.5551 4.85728L3.64125 13.7539L4.762 14.7509ZM4.77202 15.0938C4.6784 15.0002 4.674 14.8498 4.762 14.7509L3.64125 13.7539C3.02525 14.4464 3.05599 15.4991 3.71136 16.1545L4.77202 15.0938ZM6.60943 16.5983C6.5105 16.6863 6.36012 16.6819 6.2665 16.5883L5.20584 17.6489C5.8612 18.3043 6.91388 18.335 7.60638 17.719L6.60943 16.5983ZM4.45867 15.841L4.25156 16.0481L5.31222 17.1088L5.51933 16.9017L4.45867 15.841ZM10.5549 22.3514L12.2035 20.7028L11.1428 19.6421L9.4942 21.2908L10.5549 22.3514ZM18.0821 20.5766L21.053 23.3026L22.0671 22.1974L19.0963 19.4714L18.0821 20.5766ZM12.2035 20.7028C13.8131 19.0932 16.405 19.0376 18.0821 20.5766L19.0963 19.4714C16.8272 17.3892 13.3205 17.4645 11.1428 19.6421L12.2035 20.7028ZM4.25156 22.3514C5.99217 24.092 8.81425 24.092 10.5549 22.3514L9.4942 21.2908C8.33938 22.4456 6.46704 22.4456 5.31222 21.2908L4.25156 22.3514ZM4.25156 16.0481C2.51095 17.7887 2.51095 20.6108 4.25156 22.3514L5.31222 21.2908C4.1574 20.136 4.1574 18.2636 5.31222 17.1088L4.25156 16.0481Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+KaraokeMicIcon.displayName = 'KaraokeMicIcon'

package/src/icons/KeyDetectionIcon.jsx

@@ -0,0 +1,25 @@
+export const KeyDetectionIcon = ({
+  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 2H20C21.1046 2 22 2.89543 22 4V7M2 7L2 4C2 2.89543 2.89543 2 4 2L7 2M7 22H4C2.89543 22 2 21.1046 2 20L2 17M22 17V20C22 21.1046 21.1046 22 20 22H17M9.91597 8.5616H6.38638C6.2207 8.5616 6.08638 8.69592 6.08638 8.8616V15.5372M9.45455 12.1856H6.22457M14.6897 8.38504L14.2158 10.6451M14.2158 10.6451L13.6547 13.3213M14.2158 10.6451H12.6365M14.2158 10.6451H17.1459M13.6547 13.3213L13.1902 15.5372M13.6547 13.3213H12.0456M13.6547 13.3213H16.5848M17.6198 8.38504L17.1459 10.6451M17.1459 10.6451L16.5848 13.3213M17.1459 10.6451H18.635M16.5848 13.3213L16.1202 15.5372M16.5848 13.3213H18.0442"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+KeyDetectionIcon.displayName = 'KeyDetectionIcon'

package/src/icons/KeyboardIcon.jsx

@@ -0,0 +1,25 @@
+export const KeyboardIcon = ({
+  width = 16,
+  height = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 16"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M6.75 11.25H16.75M4.25 8.25H4.26M4.25 4.25H4.26M9.25 8.25H9.26M9.26001 4.25H9.27001M14.25 8.25H14.26M14.25 4.25H14.26M19.25 8.25H19.26M19.25 4.25H19.26M1.85 14.75C1.24249 14.75 0.75 14.2678 0.75 13.6731V1.82692C0.75 1.23215 1.24249 0.75 1.85 0.75H21.65C22.2575 0.75 22.75 1.23215 22.75 1.82692V13.6731C22.75 14.2678 22.2575 14.75 21.65 14.75H1.85Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="square"
+    />
+  </svg>
+)
+
+KeyboardIcon.displayName = 'KeyboardIcon'

package/src/icons/KeysIcon.jsx

@@ -0,0 +1,21 @@
+export const KeysIcon = ({ width, height, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <path
+      d="M4.75333 1.33301H7.08667M8.92 1.33301H11.2533M5.91667 9.33301L5.91667 14.583M10.0833 9.33301V14.583M3.75 14.6663H12.25C13.3546 14.6663 14.25 13.7709 14.25 12.6663V3.33301C14.25 2.22844 13.3546 1.33301 12.25 1.33301H3.75C2.64543 1.33301 1.75 2.22844 1.75 3.33301V12.6663C1.75 13.7709 2.64543 14.6663 3.75 14.6663Z"
+      stroke="currentColor"
+    />
+    <path d="M4.75 1.66895H7.08333V9.34342H4.75V1.66895Z" fill="currentColor" />
+    <path
+      d="M8.91333 1.66895H11.2467V9.34342H8.91333V1.66895Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+KeysIcon.displayName = 'KeysIcon'