@moises.ai/design-system 3.11.2 → 3.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.11.2",
+  "version": "3.11.4",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/InputLevelMeter/InputLevelMeter.jsx

@@ -0,0 +1,205 @@
+import { memo, useCallback, useRef, useState } from 'react'
+import styles from './InputLevelMeter.module.css'
+
+const SEGMENT_MIN = 5
+const SEGMENT_RANGE = 25
+const UNITY_GAIN_POS = 0.667
+const MAX_BOOST_DB = 6
+
+function linearToMeterLevel(linear) {
+  const peakDb = 20 * Math.log10(Math.max(linear, 1e-6))
+  return Math.max(0, Math.min(30, (peakDb + 60) / 2))
+}
+
+function clampLevel(level) {
+  if (!Number.isFinite(level)) return 0
+  return Math.max(0, Math.min(30, level))
+}
+
+function clampPeakDb(peakDb) {
+  if (!Number.isFinite(peakDb)) return Number.NEGATIVE_INFINITY
+  return Math.max(-96, peakDb)
+}
+
+function getNormalizedLevel(level) {
+  return Math.max(
+    0,
+    Math.min(100, ((clampLevel(level) - SEGMENT_MIN) / SEGMENT_RANGE) * 100),
+  )
+}
+
+function getPeakHoldColor(peakPct) {
+  if (peakPct >= 88) return 'rgba(254, 78, 84, 0.89)'
+  if (peakPct >= 69) return 'rgb(255, 197, 61)'
+  return '#00dae8'
+}
+
+function gainToFaderPosition(gain) {
+  if (gain <= 0) return 0
+  const db = 20 * Math.log10(gain)
+  if (db <= -96) return 0
+  if (db <= 0) return ((db + 96) / 96) * UNITY_GAIN_POS
+  return (
+    UNITY_GAIN_POS +
+    (Math.min(db, MAX_BOOST_DB) / MAX_BOOST_DB) * (1 - UNITY_GAIN_POS)
+  )
+}
+
+function faderPositionToGain(pos) {
+  if (pos <= 0) return 0
+  let db
+  if (pos <= UNITY_GAIN_POS) {
+    db = (pos / UNITY_GAIN_POS) * 96 - 96
+  } else {
+    db = ((pos - UNITY_GAIN_POS) / (1 - UNITY_GAIN_POS)) * MAX_BOOST_DB
+  }
+  return 10 ** (db / 20)
+}
+
+function MeterRow({ level }) {
+  const pct = getNormalizedLevel(level)
+  return (
+    <div className={styles.barRow}>
+      <div className={styles.barTrack} />
+      <div
+        className={styles.barFill}
+        style={{
+          width: `${pct}%`,
+          backgroundSize: pct > 0 ? `${10000 / pct}% 100%` : '100% 100%',
+        }}
+      />
+    </div>
+  )
+}
+
+export const InputLevelMeter = memo(function InputLevelMeter({
+  linear = [0, 0],
+  volume = 1,
+  onVolumeChange,
+  showHandler = true,
+  showMeter = true,
+}) {
+  const [linearL, linearR] = linear
+  const leftLevel = clampLevel(linearToMeterLevel(linearL ?? 0))
+  const rightLevel = clampLevel(linearToMeterLevel(linearR ?? 0))
+
+  const [isPressed, setIsPressed] = useState(false)
+  const isPressedRef = useRef(false)
+  const meterRef = useRef(null)
+  const peakHoldRef = useRef(0)
+
+  const faderPercent = Math.max(
+    0,
+    Math.min(100, gainToFaderPosition(volume) * 100),
+  )
+
+  const leftNormalized = getNormalizedLevel(leftLevel)
+  const rightNormalized = getNormalizedLevel(rightLevel)
+  const currentPeakPct = Math.max(leftNormalized, rightNormalized)
+
+  if (currentPeakPct > peakHoldRef.current) {
+    peakHoldRef.current = currentPeakPct
+  }
+  if (currentPeakPct <= 0) {
+    peakHoldRef.current = 0
+  }
+
+  const peakHoldPct = peakHoldRef.current
+  const peakHoldColor = getPeakHoldColor(peakHoldPct)
+  const showPeakHold = peakHoldPct > 0
+
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (!onVolumeChange) return
+      e.currentTarget.setPointerCapture(e.pointerId)
+      isPressedRef.current = true
+      setIsPressed(true)
+      const rect = meterRef.current?.getBoundingClientRect()
+      if (rect) {
+        const pos = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left) / rect.width),
+        )
+        onVolumeChange([faderPositionToGain(pos)])
+      }
+    },
+    [onVolumeChange],
+  )
+
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!isPressedRef.current || !onVolumeChange) return
+      const rect = meterRef.current?.getBoundingClientRect()
+      if (rect) {
+        const pos = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left) / rect.width),
+        )
+        onVolumeChange([faderPositionToGain(pos)])
+      }
+    },
+    [onVolumeChange],
+  )
+
+  const handlePointerUp = useCallback(() => {
+    isPressedRef.current = false
+    setIsPressed(false)
+  }, [])
+
+  const meterClassName = [styles.bars, isPressed ? styles.pressed : '']
+    .filter(Boolean)
+    .join(' ')
+
+  const hasHandler = onVolumeChange && showHandler
+
+  return (
+    <div
+      className={styles.container}
+      onMouseLeave={() => {
+        if (!isPressed) setIsPressed(false)
+      }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+    >
+      <div ref={meterRef} className={meterClassName}>
+        <MeterRow level={leftLevel} />
+        <MeterRow level={rightLevel} />
+
+        {hasHandler && (
+          <div
+            className={`${styles.thumb} ${isPressed ? styles.pressed : ''}`}
+            style={{ left: `${faderPercent}%` }}
+          />
+        )}
+
+        {showPeakHold && (
+          <>
+            <div
+              className={styles.peakDotTop}
+              style={{
+                left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
+                background: peakHoldColor,
+              }}
+            />
+            <div
+              className={styles.peakDotBottom}
+              style={{
+                left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
+                background: peakHoldColor,
+              }}
+            />
+          </>
+        )}
+      </div>
+
+      {showMeter && (
+        <div
+          className={`${styles.zeroDbDot} ${isPressed ? styles.pressed : ''}`}
+        />
+      )}
+    </div>
+  )
+})
+
+InputLevelMeter.displayName = 'InputLevelMeter'

package/src/components/InputLevelMeter/InputLevelMeter.module.css

@@ -0,0 +1,111 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.bars {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 2px;
+  border-radius: 3px;
+  width: 100%;
+  background: rgba(216, 244, 246, 0.04);
+  transition: background-color 0.1s ease;
+}
+
+.bars.pressed {
+  background: rgba(221, 234, 248, 0.08);
+}
+
+.barRow {
+  display: inline-grid;
+  grid-template-rows: max-content;
+  place-items: start;
+  width: 100%;
+  position: relative;
+  line-height: 0;
+}
+
+.barTrack {
+  grid-column: 1;
+  grid-row: 1;
+  height: 3px;
+  width: 100%;
+  border-radius: 9999px;
+}
+
+.barFill {
+  grid-column: 1;
+  grid-row: 1;
+  height: 3px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    270deg,
+    rgba(254, 78, 84, 0.894) 12%,
+    rgb(255, 197, 61) 12%,
+    rgb(255, 197, 61) 31%,
+    rgb(0, 218, 232) 31%
+  );
+  will-change: width;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 19px;
+  border-radius: 9999px;
+  background: #edeef0;
+  cursor: ew-resize;
+  z-index: 2;
+  touch-action: none;
+}
+
+.thumb.pressed {
+  background: white;
+}
+
+.peakDot {
+  position: absolute;
+  width: 1px;
+  height: 3px;
+  border-radius: 9999px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.peakDotTop {
+  composes: peakDot;
+  top: calc(50% - 2px);
+  transform: translate(-50%, -50%);
+}
+
+.peakDotBottom {
+  composes: peakDot;
+  top: calc(50% + 2px);
+  transform: translate(-50%, -50%);
+}
+
+.zeroDbDot {
+  position: absolute;
+  left: 66.7%;
+  top: 12px;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.zeroDbDot.pressed {
+  width: 3px;
+  height: 3px;
+}

package/src/components/InputLevelMeter/InputLevelMeter.stories.jsx

@@ -0,0 +1,27 @@
+import { InputLevelMeter } from './InputLevelMeter'
+import { useSimulatedInputLevel } from './useSimulatedInputLevel'
+
+export default {
+  title: 'Components/InputLevelMeter',
+  component: InputLevelMeter,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', background: '#1d1d1d', width: '200px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+function AnimatedMeter() {
+  const linear = useSimulatedInputLevel()
+  return <InputLevelMeter linear={linear} />
+}
+
+export const Default = {
+  render: () => <AnimatedMeter />,
+}

package/src/components/InputLevelMeter/useSimulatedInputLevel.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function useSimulatedInputLevel() {
+  const [linear, setLinear] = useState([0.5, 0.5])
+  const targetRef = useRef([0.5, 0.5])
+  const currentRef = useRef([0.5, 0.5])
+  const frameRef = useRef(null)
+  const tickRef = useRef(0)
+
+  useEffect(() => {
+    function animate() {
+      tickRef.current++
+
+      if (tickRef.current % 20 === 0) {
+        targetRef.current = [Math.random(), Math.random()]
+      }
+
+      currentRef.current = currentRef.current.map((cur, i) => {
+        const target = targetRef.current[i]
+        const speed = cur > target ? 0.15 : 0.08
+        return cur + (target - cur) * speed
+      })
+
+      setLinear([...currentRef.current])
+      frameRef.current = requestAnimationFrame(animate)
+    }
+
+    frameRef.current = requestAnimationFrame(animate)
+    return () => cancelAnimationFrame(frameRef.current)
+  }, [])
+
+  return linear
+}

package/src/components/TrackHeader/RecordSettingsPopover.jsx

@@ -1,8 +1,8 @@
 import { Flex, Text } from '@radix-ui/themes'
 import { Popover } from 'radix-ui'
 import { useCallback, useState } from 'react'
+import { InputLevelMeter } from '../InputLevelMeter/InputLevelMeter'
 import { Select } from '../Select/Select'
-import { Slider } from '../Slider/Slider'
 import styles from './RecordSettingsPopover.module.css'
 
 export function RecordSettingsPopover({
@@ -18,11 +18,14 @@ export function RecordSettingsPopover({
 }) {
   const [opened, setOpened] = useState(false)
 
-  const handleOpenChange = useCallback((open) => {
-    if (!open || !isRecord) {
-      setOpened(open)
-    }
-  }, [])
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (!open || !isRecord) {
+        setOpened(open)
+      }
+    },
+    [open, isRecord],
+  )
 
   const handleContextMenu = useCallback(() => {
     e.preventDefault()
@@ -69,11 +72,7 @@ export function RecordSettingsPopover({
             </Text>
 
             {opened && (
-              <Slider
-                value={inputLevel}
-                max={30}
-                style={{ paddingTop: '8px', paddingBottom: '8px' }}
-              />
+              <InputLevelMeter linear={inputLevel} showHandler={false} />
             )}
           </Flex>
         </Flex>

package/src/components/TrackHeader/TrackHeader.jsx

@@ -9,8 +9,8 @@ import {
   Box,
   DropdownMenu,
   Flex,
-  HorizontalVolume,
   IconButton,
+  InputLevelMeter,
   PanControl,
   Text,
   Tooltip,
@@ -32,14 +32,13 @@ export const TrackHeader = memo(
     menuOptions,
     showPan = true,
     showVolumeControls = true,
-    isGrouped = false,
     height = 81,
     compact = false,
     isActive = false,
     instrumentOptions,
     deviceOptions,
     channelOptions,
-    inputLevel,
+    inputLevel: inputLevel,
 
     // State
     volume,
@@ -213,9 +212,10 @@ export const TrackHeader = memo(
             <div {...DND_PROTECTION} className={styles.trackControls}>
               {!compact && showVolumeControls && (
                 <>
-                  <HorizontalVolume
+                  <InputLevelMeter
+                    linear={inputLevel}
                     volume={volume}
-                    onChangeValue={onVolumeChange}
+                    onVolumeChange={onVolumeChange}
                   />
                   {showPan && (
                     <PanControl

package/src/components/TrackHeader/TrackHeader.stories.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { BassIcon, DrumsIcon, ElectricGuitarIcon, KeysIcon } from '../../icons'
+import { useSimulatedInputLevel } from '../InputLevelMeter/useSimulatedInputLevel'
 import { TrackHeader } from './TrackHeader'
 export default {
   title: 'Components/TrackHeader',
@@ -130,7 +131,33 @@ export const Default = {
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
   },
-  render: (args) => <TrackHeader {...args} />,
+  render: (args) => {
+    const inputLevel = useSimulatedInputLevel()
+    const [isRecord, setIsRecord] = useState(false)
+    const [isMuted, setIsMuted] = useState(args.isMuted)
+    const [isSolo, setIsSolo] = useState(args.isSolo)
+
+    return (
+      <TrackHeader
+        {...args}
+        deviceOptions={[
+          { value: 'mic', label: 'Built-in Microphone' },
+          { value: 'interface', label: 'Audio Interface' },
+        ]}
+        channelOptions={[
+          { value: '1', label: 'Channel 1' },
+          { value: '2', label: 'Channel 2' },
+        ]}
+        isRecord={isRecord}
+        onRecordChange={() => setIsRecord((v) => !v)}
+        isMuted={isMuted}
+        onMutedChange={() => setIsMuted((v) => !v)}
+        isSolo={isSolo}
+        onSoloChange={() => setIsSolo((v) => !v)}
+        inputLevel={inputLevel}
+      />
+    )
+  },
 }
 
 export const Group = {

package/src/icons/MusicIcon.jsx

@@ -8,7 +8,7 @@ export const MusicIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_23974_2573)">
+    <g>
       <path
         d="M5.56027 10.1048V12.6086C5.56027 13.2138 5.15269 13.743 4.5676 13.8977L3.13494 14.2763C2.28917 14.4998 1.46094 13.862 1.46094 12.9872V12.2149C1.46094 11.6097 1.86851 11.0804 2.45361 10.9258L5.56027 10.1048ZM5.56027 10.1048V3.48019C5.56027 3.17846 5.76292 2.91435 6.05437 2.83624L13.3084 0.892231C13.7318 0.778757 14.1476 1.09781 14.1476 1.53617V7.79232M14.1476 7.79232V10.3072C14.1476 10.9124 13.74 11.4417 13.1549 11.5963L11.7216 11.975C10.8758 12.1985 10.0476 11.5607 10.0476 10.6859V9.91825C10.0476 9.3154 10.4521 8.78755 11.0342 8.63079L14.1476 7.79232Z"
         stroke="currentColor"

package/src/icons/PianoIcon.jsx

@@ -8,7 +8,7 @@ export const PianoIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_2034_833)">
+    <g>
       <path
         d="M3.6875 15.8182C3.6875 15.4385 3.3797 15.1307 3 15.1307C2.6203 15.1307 2.3125 15.4385 2.3125 15.8182H3.6875ZM6.8125 19.5C6.8125 19.8797 7.1203 20.1875 7.5 20.1875C7.8797 20.1875 8.1875 19.8797 8.1875 19.5H6.8125ZM11.3125 19.6364C11.3125 20.0161 11.6203 20.3239 12 20.3239C12.3797 20.3239 12.6875 20.0161 12.6875 19.6364H11.3125ZM15.8125 19.6364C15.8125 20.0161 16.1203 20.3239 16.5 20.3239C16.8797 20.3239 17.1875 20.0161 17.1875 19.6364H15.8125ZM23 15.8182V16.5057C23.3797 16.5057 23.6875 16.1979 23.6875 15.8182H23ZM1 15.8182H0.312501C0.312501 16.1979 0.620305 16.5057 1 16.5057L1 15.8182ZM14.2535 4.84091L14.8918 4.58551L14.2535 4.84091ZM2.3125 15.8182V21.5455H3.6875V15.8182H2.3125ZM4 23.1875H20.25V21.8125H4V23.1875ZM21.6875 21.5455V15.8182H20.3125V21.5455H21.6875ZM20.25 23.1875C20.7252 23.1875 21.1201 22.9735 21.373 22.6218C21.6066 22.297 21.6875 21.9028 21.6875 21.5455H20.3125C20.3125 21.7153 20.2715 21.7984 20.2567 21.819C20.2522 21.8253 20.2552 21.8193 20.2667 21.8134C20.2784 21.8074 20.2774 21.8125 20.25 21.8125V23.1875ZM2.3125 21.5455C2.3125 22.5017 3.1654 23.1875 4 23.1875V21.8125C3.93616 21.8125 3.8491 21.7824 3.77703 21.7158C3.70741 21.6514 3.6875 21.5875 3.6875 21.5455H2.3125ZM6.8125 15.8182V19.5H8.1875V15.8182H6.8125ZM11.3125 15.8182V19.6364H12.6875V15.8182H11.3125ZM15.8125 15.8182V19.6364H17.1875V15.8182H15.8125ZM22.3125 11.0455V15.8182H23.6875V11.0455H22.3125ZM1.6875 15.8182V6.27273H0.312501V15.8182H1.6875ZM5.58333 2.1875H9.44097V0.812501H5.58333V2.1875ZM17.691 7.91477H19.3333V6.53977H17.691V7.91477ZM9.44097 2.1875C11.2517 2.1875 12.9052 3.32202 13.6152 5.09631L14.8918 4.58551C13.9827 2.31361 11.8397 0.812501 9.44097 0.812501V2.1875ZM23.6875 11.0455C23.6875 8.58354 21.764 6.53977 19.3333 6.53977V7.91477C20.9527 7.91477 22.3125 9.28992 22.3125 11.0455H23.6875ZM13.6152 5.09631C14.2929 6.79018 15.8936 7.91477 17.691 7.91477V6.53977C16.4816 6.53977 15.3704 5.78177 14.8918 4.58551L13.6152 5.09631ZM1.6875 6.27273C1.6875 3.99002 3.4577 2.1875 5.58333 2.1875V0.812501C2.64636 0.812501 0.312501 3.28363 0.312501 6.27273H1.6875ZM23 15.1307H12V16.5057H23V15.1307ZM12 15.1307H1V16.5057H12V15.1307Z"
         fill="currentColor"

package/src/icons/StringsIcon.jsx

@@ -13,7 +13,7 @@ export const StringsIcon = ({
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_23974_1518)">
+    <g>
       <path
         d="M7.39153 4.17461C7.56357 5.40362 9.99918 5.73374 10.732 4.00041C11.3987 2.48864 10.132 0.33374 7.73596 0.709194C5.54171 1.02654 4.54794 3.50424 5.33203 5.33377C5.83203 6.50042 6.55153 7.386 7.36952 9.01859C8.02847 10.3338 8.02847 12.367 8.02847 12.367L8.50909 12.4824C9.81528 12.7962 10.8055 13.8634 11.0207 15.1894L11.0442 15.3337H14.9987C14.6654 11.6671 13.6654 9.66707 9.33203 6.50042C8.4067 5.82422 7.62246 5.00666 7.44544 4.41706C7.41961 4.33103 7.40196 4.25018 7.39153 4.17461ZM7.39153 4.17461C7.24806 3.13477 8.46886 3.06401 8.46886 3.3682M2.33203 6.50044C2.33203 6.77658 2.55589 7.00044 2.83203 7.00044C3.10817 7.00044 3.33203 6.77658 3.33203 6.50044C3.33203 6.22429 3.10817 6.00044 2.83203 6.00044C2.55589 6.00044 2.33203 6.22429 2.33203 6.50044ZM4.33203 10.5004C4.33203 10.7766 4.55589 11.0004 4.83203 11.0004C5.10817 11.0004 5.33203 10.7766 5.33203 10.5004C5.33203 10.2243 5.10817 10.0004 4.83203 10.0004C4.55589 10.0004 4.33203 10.2243 4.33203 10.5004Z"
         stroke="currentColor"

package/src/index.jsx

@@ -87,6 +87,7 @@ export { Countdown } from './components/Countdown/Countdown'
 export { DataTable } from './components/DataTable/DataTable'
 export { DropdownButton } from './components/DropdownButton/DropdownButton'
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu'
+export { EmptyState } from './components/EmptyState/EmptyState'
 export {
   Extension,
   useExtension,
@@ -100,6 +101,7 @@ export { GroupButtons } from './components/GroupButtons/GroupButtons'
 export { HeaderPanel } from './components/HeaderPanel/HeaderPanel'
 export { HorizontalVolume } from './components/HorizontalVolume/HorizontalVolume'
 export { IconButton } from './components/IconButton/IconButton'
+export { InputLevelMeter } from './components/InputLevelMeter/InputLevelMeter'
 export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSelector'
 export { Knob } from './components/Knob/Knob'
 export { ListCards } from './components/ListCards/ListCards'
@@ -132,15 +134,16 @@ export { Text } from './components/Text/Text'
 export { TextArea } from './components/TextArea/TextArea'
 export { TextField } from './components/TextField/TextField'
 export { Theme } from './components/theme/Theme'
-export { ToastProvider, useToast } from './components/ToastProvider/ToastProvider'
 export { ThumbnailPicker } from './components/ThumbnailPicker/ThumbnailPicker'
+export {
+  ToastProvider,
+  useToast,
+} from './components/ToastProvider/ToastProvider'
 export { Tooltip } from './components/Tooltip/Tooltip'
 export { TooltipWithInfoIcon } from './components/TooltipWithInfoIcon/TooltipWithInfoIcon'
 export { TrackControlButton } from './components/TrackControlButton'
+export { TrackControlsToggle } from './components/TrackControlsToggle/TrackControlsToggle'
 export { TrackHeader } from './components/TrackHeader/TrackHeader'
 export { useForm } from './components/useForm/useForm'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
-
-export { EmptyState } from './components/EmptyState/EmptyState'
-export { TrackControlsToggle } from './components/TrackControlsToggle/TrackControlsToggle'

package/src/lib/menu/renderItem.jsx

@@ -72,6 +72,7 @@ export const createRenderItem = (MenuPrimitives) => {
                 },
               )}
             >
+              {opt.icon && <span className={styles.leftIcon}>{opt.icon}</span>}
               {opt.label}
               <div className={styles.rightSlot}>
                 <ChevronRightIcon />