@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/VoiceConversionForm/VoiceList/VoiceList.jsx

@@ -0,0 +1,84 @@
+import { Flex, Text } from '@radix-ui/themes'
+import { ListCards } from '../../ListCards/ListCards'
+import { ClickableAvatar } from '../ClickableAvatar/ClickableAvatar'
+import { Waveform } from '../Waveform/Waveform'
+import styles from './VoiceList.module.css'
+import { useCallback } from 'react'
+
+export const VoiceList = ({
+  voices,
+  selectedId,
+  handleSelect,
+  playingItem,
+  handleAvatarClick,
+  handleDetailsClick,
+  wavegroup,
+  setPlayingItem,
+  style,
+  i18n = { _: (text) => text },
+}) => {
+  const playState = useCallback(
+    (isPlaying, item) => {
+      if (isPlaying) {
+        setPlayingItem(item?.identifier)
+      } else if (playingItem === item?.identifier) {
+        setPlayingItem(null)
+      }
+    },
+    [playingItem, setPlayingItem],
+  )
+  return (
+    <Flex
+      direction="column"
+      gap="4"
+      height="100%"
+      overflow="auto"
+      pb="4"
+      style={style}
+    >
+      <ListCards
+        value={selectedId}
+        onSelect={handleSelect}
+        className="voice-list"
+      >
+        {voices.map((item) => (
+          <ListCards.CardDetails
+            key={item?.identifier}
+            id={item?.identifier}
+            name={item?.name}
+            description={item?.description}
+            onAvatarClick={() => handleAvatarClick(item?.identifier)}
+            onClick={() => handleSelect(item?.identifier)}
+            avatarContent={
+              <ClickableAvatar
+                isPlaying={playingItem === item?.identifier}
+                image={item?.metadata?.avatar}
+                name={item?.name}
+              >
+                <Waveform
+                  audio={item?.metadata?.previewUrl}
+                  onlyButton={true}
+                  classNamesButton={styles.customButton}
+                  wavegroup={wavegroup}
+                  onPlayStateChange={(isPlaying) => playState(isPlaying, item)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </ClickableAvatar>
+            }
+            onSeeDetails={() => handleDetailsClick(item?.identifier)}
+            seeDetailsText={i18n._('Details')}
+          >
+            <Text
+              size="1"
+              weight="regular"
+              className={styles.descriptionVoiceList}
+            >
+              {item?.metadata?.vocalRange} <span>|</span> {item?.lowestNote} -{' '}
+              {item?.highestNote}
+            </Text>
+          </ListCards.CardDetails>
+        ))}
+      </ListCards>
+    </Flex>
+  )
+}

package/src/components/VoiceConversionForm/VoiceList/VoiceList.module.css

@@ -0,0 +1,11 @@
+.customButton {
+    background-color: transparent !important;
+  }
+  
+  .descriptionVoiceList {
+    color: var(--neutral-alpha-10);
+  
+    span {
+      color: var(--neutral-alpha-6);
+    }
+  }

package/src/components/VoiceConversionForm/Waveform/Waveform.jsx

@@ -0,0 +1,262 @@
+'use client'
+
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react'
+import WavesurferPlayer from '@wavesurfer/react'
+import { Flex } from '@radix-ui/themes'
+import { IconButton } from '../../IconButton/IconButton'
+import styles from './Waveform.module.css'
+import { PlayIcon, PauseIcon } from '../../../icons'
+import classNames from 'classnames'
+
+const sizes = {
+  sm: 20,
+  md: 36,
+  lg: 56,
+}
+
+export function Waveform({
+  audio,
+  size = 'md',
+  onSetIsPlaying,
+  infos,
+  onlyButton,
+  hover,
+  waveColor = '#3f3f3f',
+  progressColor = 'white',
+  wavegroup,
+  autoRepeat = false,
+  loadOnHover = false,
+  eventPlayed,
+  showSkeleton = false,
+  classNamesButton,
+  onPlayStateChange,
+}) {
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [isReady, setIsReady] = useState(false)
+  const [isLoaded, setIsLoaded] = useState(false)
+  const [isSafari, setIsSafari] = useState(false)
+
+  useEffect(() => {
+    if (typeof navigator !== 'undefined') {
+      setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))
+    }
+  }, [])
+
+  const haveInfos = useMemo(() => infos, [infos])
+  const showWaveForm = useMemo(() => {
+    if (onlyButton) {
+      return false
+    }
+    return !haveInfos || (haveInfos && isPlaying)
+  }, [haveInfos, isPlaying, onlyButton])
+
+  const waveformRef = useRef(null)
+  const waveSurferRef = useRef(null)
+
+  useEffect(() => {
+    if (isLoaded) return
+    if (!loadOnHover || hover) {
+      setIsLoaded(true)
+    }
+  }, [loadOnHover, hover, isLoaded])
+
+  const pause = useCallback(() => {
+    if (!waveSurferRef.current) return
+    waveSurferRef.current?.pause()
+  }, [])
+
+  const play = useCallback(() => {
+    if (!waveSurferRef.current) return
+
+    if (
+      wavegroup &&
+      wavegroup.state.active &&
+      wavegroup.state.active !== waveSurferRef.current
+    ) {
+      wavegroup.state.active.pause()
+    }
+
+    if (!isSafari) {
+      waveSurferRef.current?.setOptions({ progressColor })
+    }
+    waveSurferRef.current?.play()
+  }, [isSafari, progressColor, wavegroup])
+
+  useEffect(() => {
+    if (waveSurferRef.current && audio) {
+      waveSurferRef.current?.load(audio)
+    }
+  }, [audio])
+
+  const onReady = useCallback((ws) => {
+    waveSurferRef.current = ws
+    setIsReady(true)
+    setIsPlaying(false)
+  }, [])
+
+  const onPlay = useCallback(
+    (ws) => {
+      setIsPlaying(true)
+      onSetIsPlaying?.(true)
+      onPlayStateChange?.(true)
+
+      if (wavegroup) {
+        if (wavegroup.state.active && wavegroup.state.active !== ws) {
+          const currentTime = wavegroup.state.active.getCurrentTime()
+          wavegroup.state.active.pause()
+          ws.setTime(currentTime)
+        }
+
+        wavegroup.setter((prev) => ({
+          ...prev,
+          isPlaying: true,
+          lastPlayed: ws,
+          active: ws,
+        }))
+      }
+      eventPlayed?.()
+    },
+    [onSetIsPlaying, wavegroup, eventPlayed, onPlayStateChange],
+  )
+
+  const onPause = useCallback(() => {
+    setIsPlaying(false)
+    onSetIsPlaying?.(false)
+    onPlayStateChange?.(false)
+
+    if (wavegroup) {
+      wavegroup.setter((prev) => ({
+        ...prev,
+        isPlaying: false,
+      }))
+    }
+  }, [onSetIsPlaying, wavegroup, onPlayStateChange])
+
+  const onSeeking = useCallback(
+    (ws) => {
+      if (!wavegroup) return
+
+      wavegroup.setter((prev) => ({
+        ...prev,
+        active: ws,
+      }))
+    },
+    [wavegroup],
+  )
+
+  const onFinish = useCallback(() => {
+    if (autoRepeat) {
+      waveSurferRef.current?.play()
+    } else {
+      setIsPlaying(false)
+      onSetIsPlaying?.(false)
+      onPlayStateChange?.(false)
+
+      if (wavegroup) {
+        wavegroup.setter((prev) => ({
+          ...prev,
+          isPlaying: false,
+          active: null,
+        }))
+      }
+    }
+  }, [autoRepeat, onSetIsPlaying, wavegroup, onPlayStateChange])
+
+  const handleClick = useCallback(() => {
+    if (waveSurferRef.current?.isPlaying()) {
+      pause()
+    } else if (waveSurferRef.current) {
+      if (
+        wavegroup?.state?.active &&
+        wavegroup.state.active !== waveSurferRef.current
+      ) {
+        wavegroup.state.active.pause()
+
+        wavegroup.setter((prev) => ({
+          ...prev,
+          isPlaying: false,
+          active: null,
+        }))
+      }
+
+      if (
+        wavegroup?.state?.active &&
+        wavegroup.state.active !== waveSurferRef.current &&
+        wavegroup.state.active.getCurrentTime
+      ) {
+        waveSurferRef.current.setTime(wavegroup.state.active.getCurrentTime())
+      }
+      play()
+    }
+  }, [play, pause, wavegroup])
+
+  return (
+    <Flex
+      align="center"
+      gap="2"
+      width="100%"
+      justify="center"
+      style={{
+        zIndex: 10,
+      }}
+    >
+      <IconButton
+        onClick={handleClick}
+        size="2"
+        variant="soft"
+        color="gray"
+        className={classNames(classNamesButton, styles.customButton)}
+      >
+        {isPlaying ? (
+          <PauseIcon width={20} height={20} />
+        ) : (
+          <PlayIcon width={20} height={20} />
+        )}
+      </IconButton>
+
+      <Flex
+        width="100%"
+        style={{
+          display: showWaveForm && isReady ? 'block' : 'none',
+          cursor: 'pointer',
+        }}
+        ref={waveformRef}
+      >
+        <WavesurferPlayer
+          url={audio}
+          waveColor={waveColor}
+          progressColor={progressColor}
+          normalize
+          barWidth={2}
+          barHeight={6}
+          cursorWidth={0}
+          height={sizes[size] || 36}
+          onReady={onReady}
+          onSeeking={onSeeking}
+          onPlay={onPlay}
+          onPause={onPause}
+          onFinish={onFinish}
+          backend={isSafari ? 'WebAudio' : 'MediaElement'}
+        />
+      </Flex>
+      <Flex
+        width="100%"
+        style={{
+          display: showWaveForm && !isReady ? 'block' : 'none',
+          cursor: 'pointer',
+        }}
+      >
+        <span className={styles.waveform}>
+          <img
+            alt="Loading waveform"
+            className={styles.mask}
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+            style={{
+              backgroundImage: `url('/waveform.svg')`,
+            }}
+          />
+        </span>
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/VoiceConversionForm/Waveform/Waveform.module.css

@@ -0,0 +1,36 @@
+@keyframes skeleton_animate_mask {
+  0% {
+    mask-position: 200% 50%;
+  }
+  100% {
+    mask-position: -100% 50%;
+  }
+}
+
+.waveform {
+  width: 100%;
+  height: 64px;
+  display: block;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.waveform .mask {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-repeat: repeat-x;
+  background-position: 30px center;
+  mask-size: 350px;
+  mask-image: radial-gradient(circle, blue 50%, rgba(255, 255, 0, 0.5) 50%);
+  mask-size: 400% 400%;
+  animation: skeleton_animate_mask 3s linear infinite;
+  -webkit-animation: skeleton_animate_mask 3s linear infinite;
+} 
+
+.customButton {
+  border-radius: 100%;
+  width: 36px;
+  height: 36px;
+}

package/src/components/theme/Theme.jsx

@@ -0,0 +1,16 @@
+// Import the original Theme component
+import { Theme as OriginalTheme } from '@radix-ui/themes'
+
+// Create our custom Theme component with default props
+export const Theme = ({ children, ...props }) => {
+  return (
+    <OriginalTheme
+      accentColor="cyan"
+      appearance="dark"
+      panelBackground="solid"
+      {...props}
+    >
+      {children}
+    </OriginalTheme>
+  )
+}

package/src/components/theme/Theme.stories.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Theme } from './Theme';
+import { Box, Button, Flex, Text, Card, Heading } from '@radix-ui/themes';
+
+export default {
+  title: 'Layout/Theme',
+  component: Theme,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    accentColor: { 
+      control: 'select', 
+      options: ['red', 'blue', 'green', 'purple', 'mint', 'aqua']
+    },
+    appearance: {
+      control: 'radio',
+      options: ['light', 'dark']
+    },
+    panelBackground: {
+      control: 'radio',
+      options: ['solid', 'translucent']
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    accentColor: 'red',
+    appearance: 'dark',
+    panelBackground: 'solid',
+    children: (
+      <Box p="6" style={{ maxWidth: 500 }}>
+        <Flex direction="column" gap="4">
+          <Heading size="6">Theme Example</Heading>
+          <Text>This example shows our default theme styling.</Text>
+          <Card>
+            <Flex direction="column" gap="2" p="4">
+              <Text weight="bold">Card Component</Text>
+              <Text size="2">Content inside a card with default styling</Text>
+              <Flex gap="3" mt="3">
+                <Button variant="soft">Cancel</Button>
+                <Button>Submit</Button>
+              </Flex>
+            </Flex>
+          </Card>
+        </Flex>
+      </Box>
+    ),
+  },
+};
+
+export const LightTheme = {
+  args: {
+    ...Default.args,
+    appearance: 'light',
+  },
+}; 

package/src/icons/AbbeyRoadIcon.jsx

@@ -0,0 +1,117 @@
+export const AbbeyRoadIcon = ({
+  width = 37,
+  height = 26,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 37 26"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M10.6562 24.2583C8.68 23.1173 7.03891 21.4762 5.89792 19.5C4.75693 17.5237 4.15625 15.282 4.15625 13C4.15625 10.718 4.75693 8.47625 5.89792 6.5C7.03891 4.52375 8.68 2.88266 10.6563 1.74167"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4.18252 22.2466L8.87672 22.9886L8.60155 18.2493"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1.93959 17.9061L6.19209 20.028L7.35766 15.426"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1.25073 11.8924L4.37871 15.4704L7.20477 11.6559"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M2.08076 7.27092L4.2271 11.5111L7.90846 8.51368"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4.63054 2.95149L5.28724 7.65838L9.7412 6.01543"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.0033 0.585432L7.33206 4.54103L11.3355 4.35405"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M26.2617 24.2583C28.238 23.1173 29.8791 21.4762 31.02 19.5C32.161 17.5237 32.7617 15.282 32.7617 13C32.7617 10.718 32.161 8.47625 31.02 6.5C29.8791 4.52375 28.238 2.88266 26.2617 1.74167"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M32.7355 22.2466L28.0413 22.9886L28.3164 18.2493"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M34.9784 17.9061L30.7259 20.028L29.5603 15.426"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M35.6672 11.8924L32.5393 15.4704L29.7132 11.6559"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M34.8372 7.27092L32.6909 11.5111L29.0095 8.51368"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M32.2874 2.95149L31.6307 7.65838L27.1768 6.01543"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M28.9147 0.585432L29.5859 4.54103L25.5825 4.35405"
+      stroke="currentColor"
+      strokeOpacity="0.25098"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+AbbeyRoadIcon.displayName = 'AbbeyRoadIcon'

package/src/icons/AccessibilityIcon.jsx

@@ -0,0 +1,33 @@
+export const AccessibilityIcon = ({
+  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.53126 10.0521C3.43536 9.55174 3.79535 7.9302 4.99999 7.9302L12 8.49999L19.0313 7.9302C20.2378 7.9302 20.5978 9.55174 19.5 10.0521L14.5 12L17.1432 20.4327C17.2642 20.6992 17.2743 21.0021 17.1712 21.2759C17.0681 21.5497 16.8601 21.7724 16.5922 21.8959C16.3243 22.0193 16.0181 22.0336 15.7396 21.9356C15.4612 21.8376 15.2329 21.6353 15.1042 21.3723L11.9993 16.0842L8.89443 21.3723C8.76572 21.6353 8.53746 21.8376 8.25901 21.9356C7.98056 22.0336 7.67428 22.0193 7.40639 21.8959C7.13851 21.7724 6.93053 21.5497 6.82743 21.2759C6.72434 21.0021 6.7344 20.6992 6.85544 20.4327L9.49999 12L4.53126 10.0521Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M14 4C14 5.10457 13.1046 6 12 6C10.8954 6 9.99999 5.10457 9.99999 4C9.99999 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+AccessibilityIcon.displayName = 'AccessibilityIcon'

package/src/icons/AcousticGuitarIcon.jsx

@@ -0,0 +1,16 @@
+export const AcousticGuitarIcon = ({ 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="M3.12278 6.00186L2.75109 5.66743L2.75109 5.66743L3.12278 6.00186ZM3.51398 3.19534L3.07231 3.42971L3.07231 3.42971L3.51398 3.19534ZM12.8766 6.00186L13.2483 5.66743L13.2483 5.66743L12.8766 6.00186ZM12.4854 3.19534L12.0437 2.96097L12.0437 2.96097L12.4854 3.19534ZM5.33301 7.5833C5.05687 7.5833 4.83301 7.80716 4.83301 8.0833C4.83301 8.35945 5.05687 8.5833 5.33301 8.5833V7.5833ZM10.6663 8.5833C10.9425 8.5833 11.1663 8.35945 11.1663 8.0833C11.1663 7.80716 10.9425 7.5833 10.6663 7.5833V8.5833ZM1.33301 9.95372H0.833008C0.833008 11.6829 1.67395 13.0803 2.99384 14.0288C4.30295 14.9695 6.07809 15.4697 7.99967 15.4697V14.9697V14.4697C6.23936 14.4697 4.68117 14.0099 3.57741 13.2167C2.48445 12.4313 1.83301 11.3207 1.83301 9.95372H1.33301ZM3.12278 6.00186L2.75109 5.66743C1.38444 7.18629 0.833008 8.46751 0.833008 9.95372H1.33301H1.83301C1.83301 8.78243 2.24114 7.72923 3.49447 6.3363L3.12278 6.00186ZM3.51398 3.19534L3.07231 3.42971C3.31909 3.89477 3.37623 4.27786 3.32135 4.61149C3.26546 4.95122 3.08381 5.29765 2.75109 5.66743L3.12278 6.00186L3.49447 6.3363C3.9106 5.87383 4.2119 5.35852 4.30808 4.7738C4.40527 4.18299 4.28358 3.57896 3.95565 2.96097L3.51398 3.19534ZM2.92392 1.39868H2.42392C2.42392 2.18312 2.71865 2.76323 3.07231 3.42971L3.51398 3.19534L3.95565 2.96097C3.59817 2.2873 3.42392 1.90724 3.42392 1.39868H2.92392ZM2.92392 1.03027H2.42392V1.39868H2.92392H3.42392V1.03027H2.92392ZM14.6663 9.95372H14.1663C14.1663 11.3207 13.5149 12.4313 12.4219 13.2167C11.3182 14.0099 9.75999 14.4697 7.99967 14.4697V14.9697V15.4697C9.92126 15.4697 11.6964 14.9695 13.0055 14.0288C14.3254 13.0803 15.1663 11.6829 15.1663 9.95372H14.6663ZM12.8766 6.00186L12.5049 6.3363C13.7582 7.72922 14.1663 8.78243 14.1663 9.95372H14.6663H15.1663C15.1663 8.46751 14.6149 7.18629 13.2483 5.66743L12.8766 6.00186ZM12.4854 3.19534L12.0437 2.96097C11.7158 3.57896 11.5941 4.18299 11.6913 4.77381C11.7874 5.35852 12.0888 5.87383 12.5049 6.3363L12.8766 6.00186L13.2483 5.66743C12.9155 5.29765 12.7339 4.95122 12.678 4.61149C12.6231 4.27786 12.6803 3.89477 12.927 3.42971L12.4854 3.19534ZM13.0754 1.39868H12.5754C12.5754 1.90724 12.4012 2.2873 12.0437 2.96097L12.4854 3.19534L12.927 3.42971C13.2807 2.76323 13.5754 2.18312 13.5754 1.39868H13.0754ZM13.0754 1.03027H12.5754V1.39868H13.0754H13.5754V1.03027H13.0754ZM9.99967 3.3333H9.49967C9.49967 4.16173 8.8281 4.8333 7.99967 4.8333V5.3333V5.8333C9.38039 5.8333 10.4997 4.71402 10.4997 3.3333H9.99967ZM7.99967 5.3333V4.8333C7.17125 4.8333 6.49967 4.16173 6.49967 3.3333H5.99967H5.49967C5.49967 4.71402 6.61896 5.8333 7.99967 5.8333V5.3333ZM5.99967 3.3333H6.49967C6.49967 2.50488 7.17125 1.8333 7.99967 1.8333V1.3333V0.833304C6.61896 0.833304 5.49967 1.95259 5.49967 3.3333H5.99967ZM7.99967 1.3333V1.8333C8.8281 1.8333 9.49967 2.50488 9.49967 3.3333H9.99967H10.4997C10.4997 1.95259 9.38039 0.833304 7.99967 0.833304V1.3333ZM5.33301 8.0833V8.5833H10.6663V8.0833V7.5833H5.33301V8.0833Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+AcousticGuitarIcon.displayName = 'AcousticGuitarIcon'

package/src/icons/AddIcon.jsx

@@ -0,0 +1,18 @@
+export const AddIcon = ({ 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.75 8C12.75 7.58579 12.4142 7.25 12 7.25C11.5858 7.25 11.25 7.58579 11.25 8H12.75ZM11.25 16C11.25 16.4142 11.5858 16.75 12 16.75C12.4142 16.75 12.75 16.4142 12.75 16H11.25ZM8 11.25C7.58579 11.25 7.25 11.5858 7.25 12C7.25 12.4142 7.58579 12.75 8 12.75V11.25ZM16 12.75C16.4142 12.75 16.75 12.4142 16.75 12C16.75 11.5858 16.4142 11.25 16 11.25V12.75ZM11.25 8V12H12.75V8H11.25ZM11.25 12V16H12.75V12H11.25ZM8 12.75H12V11.25H8V12.75ZM12 12.75H16V11.25H12V12.75ZM7 2.75H17V1.25H7V2.75ZM21.25 7V17H22.75V7H21.25ZM17 21.25H7V22.75H17V21.25ZM2.75 17V7H1.25V17H2.75ZM7 21.25C4.65279 21.25 2.75 19.3472 2.75 17H1.25C1.25 20.1756 3.82436 22.75 7 22.75V21.25ZM21.25 17C21.25 19.3472 19.3472 21.25 17 21.25V22.75C20.1756 22.75 22.75 20.1756 22.75 17H21.25ZM17 2.75C19.3472 2.75 21.25 4.65279 21.25 7H22.75C22.75 3.82436 20.1756 1.25 17 1.25V2.75ZM7 1.25C3.82436 1.25 1.25 3.82436 1.25 7H2.75C2.75 4.65279 4.65279 2.75 7 2.75V1.25Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+AddIcon.displayName = 'AddIcon'

package/src/icons/AddLyricsIcon.jsx

@@ -0,0 +1,25 @@
+export const AddLyricsIcon = ({
+  width = 16,
+  height = 16,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M10 3.20612H19C20.6569 3.20612 22 4.54926 22 6.20612V16.2061C22 17.863 20.6569 19.2061 19 19.2061H8.48529C6.89399 19.2061 5.36787 19.8383 4.24265 20.9635L3.70712 21.499C3.07715 22.129 2.00001 21.6828 2.00001 20.7919V11.2061M1 5.20612H4M4 5.20612H7M4 5.20612V8.20612M4 5.20612L4 2.20612M8.5166 13.4717C10.7116 12.8731 11.0667 10.2545 10.0667 9.25453C9.06668 8.25453 7.88806 9.91498 8.96554 10.4537C9.57387 10.7579 10.0667 10.2043 9.88832 9.8631M13.4301 13.4717C15.6251 12.8731 15.9802 10.2545 14.9802 9.25453C13.9802 8.25453 12.8016 9.91498 13.8791 10.4537C14.4874 10.7579 14.9802 10.2043 14.8018 9.8631"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+AddLyricsIcon.displayName = 'AddLyricsIcon'