@moises.ai/design-system 3.11.8 → 3.11.9

package/package.json

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

package/src/components/InputLevelMeter/InputLevelMeter.jsx

@@ -1,4 +1,5 @@
 import { memo, useCallback, useRef, useState } from 'react'
+import { Tooltip } from '../Tooltip/Tooltip'
 import styles from './InputLevelMeter.module.css'
 
 const SEGMENT_MIN = 5
@@ -56,6 +57,13 @@ function faderPositionToGain(pos) {
   return 10 ** (db / 20)
 }
 
+function formatGainDb(gain) {
+  if (gain <= 0) return '-∞ dB'
+  const db = 20 * Math.log10(gain)
+  if (db <= -96) return '-∞ dB'
+  return `${db >= 0 ? '+' : ''}${db.toFixed(1)} dB`
+}
+
 function MeterRow({ level }) {
   const pct = getNormalizedLevel(level)
   return (
@@ -114,6 +122,7 @@ export const InputLevelMeter = memo(function InputLevelMeter({
       e.currentTarget.setPointerCapture(e.pointerId)
       isPressedRef.current = true
       setIsPressed(true)
+      document.body.style.cursor = 'ew-resize'
       const rect = meterRef.current?.getBoundingClientRect()
       if (rect) {
         const pos = Math.max(
@@ -144,14 +153,19 @@ export const InputLevelMeter = memo(function InputLevelMeter({
   const handlePointerUp = useCallback(() => {
     isPressedRef.current = false
     setIsPressed(false)
+    document.body.style.cursor = ''
   }, [])
 
-  const meterClassName = [styles.bars, isPressed ? styles.pressed : '']
+  const hasHandler = onVolumeChange && showHandler
+
+  const meterClassName = [
+    styles.bars,
+    hasHandler ? styles.interactive : '',
+    isPressed ? styles.pressed : '',
+  ]
     .filter(Boolean)
     .join(' ')
 
-  const hasHandler = onVolumeChange && showHandler
-
   return (
     <div
       className={styles.container}
@@ -167,10 +181,18 @@ export const InputLevelMeter = memo(function InputLevelMeter({
         <MeterRow level={rightLevel} />
 
         {hasHandler && (
-          <div
-            className={`${styles.thumb} ${isPressed ? styles.pressed : ''}`}
-            style={{ left: `${faderPercent}%` }}
-          />
+          <Tooltip
+            content={formatGainDb(volume)}
+            open={isPressed}
+            side="top"
+            sideOffset={8}
+            delayDuration={0}
+          >
+            <div
+              className={`${styles.thumb} ${isPressed ? styles.pressed : ''}`}
+              style={{ left: `${faderPercent}%` }}
+            />
+          </Tooltip>
         )}
 
         {showPeakHold && (

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

@@ -19,6 +19,10 @@
   transition: background-color 0.1s ease;
 }
 
+.bars.interactive {
+  cursor: ew-resize;
+}
+
 .bars.pressed {
   background: rgba(221, 234, 248, 0.08);
 }

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

@@ -1,3 +1,4 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { InputLevelMeter } from './InputLevelMeter'
 import { useSimulatedInputLevel } from './useSimulatedInputLevel'
 
@@ -10,18 +11,304 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ padding: '16px', background: '#1d1d1d', width: '200px' }}>
+      <div style={{ padding: '16px', background: '#1d1d1d', width: '240px' }}>
         <Story />
       </div>
     ),
   ],
+  argTypes: {
+    linear: { control: false },
+    volume: {
+      control: { type: 'range', min: 0, max: 2, step: 0.01 },
+    },
+    showHandler: { control: 'boolean' },
+    showMeter: { control: 'boolean' },
+    onVolumeChange: { action: 'volumeChanged' },
+  },
 }
 
-function AnimatedMeter() {
+function AnimatedMeter(props) {
   const linear = useSimulatedInputLevel()
-  return <InputLevelMeter linear={linear} />
+  return <InputLevelMeter linear={linear} {...props} />
+}
+
+function InteractiveMeter({ initialVolume = 1, ...props }) {
+  const [volume, setVolume] = useState(initialVolume)
+  const linear = useSimulatedInputLevel()
+
+  const handleVolumeChange = useCallback(([v]) => {
+    setVolume(v)
+  }, [])
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <InputLevelMeter
+        linear={linear}
+        volume={volume}
+        onVolumeChange={handleVolumeChange}
+        {...props}
+      />
+      <span
+        style={{ color: 'rgba(255,255,255,0.5)', fontSize: '11px', fontFamily: 'monospace' }}
+      >
+        gain: {volume.toFixed(3)} | dB: {volume > 0 ? (20 * Math.log10(volume)).toFixed(1) : '-∞'}
+      </span>
+    </div>
+  )
+}
+
+function useFixedLevel(left, right) {
+  const [linear, setLinear] = useState([left, right])
+  useEffect(() => {
+    setLinear([left, right])
+  }, [left, right])
+  return linear
 }
 
 export const Default = {
   render: () => <AnimatedMeter />,
 }
+
+export const WithVolumeControl = {
+  render: () => <InteractiveMeter />,
+}
+
+export const Silent = {
+  render: () => <InputLevelMeter linear={[0, 0]} />,
+}
+
+export const LowLevel = {
+  render: () => {
+    function LowLevelMeter() {
+      const linear = useFixedLevel(0.01, 0.008)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <LowLevelMeter />
+  },
+}
+
+export const MediumLevel = {
+  render: () => {
+    function MediumLevelMeter() {
+      const linear = useFixedLevel(0.15, 0.12)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <MediumLevelMeter />
+  },
+}
+
+export const HotLevel = {
+  render: () => {
+    function HotLevelMeter() {
+      const linear = useFixedLevel(0.7, 0.65)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <HotLevelMeter />
+  },
+}
+
+export const Clipping = {
+  render: () => {
+    function ClippingMeter() {
+      const linear = useFixedLevel(1.0, 0.95)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <ClippingMeter />
+  },
+}
+
+export const MonoLeft = {
+  render: () => {
+    function MonoLeftMeter() {
+      const linear = useFixedLevel(0.5, 0)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <MonoLeftMeter />
+  },
+}
+
+export const MonoRight = {
+  render: () => {
+    function MonoRightMeter() {
+      const linear = useFixedLevel(0, 0.5)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <MonoRightMeter />
+  },
+}
+
+export const AsymmetricLevels = {
+  render: () => {
+    function AsymmetricMeter() {
+      const linear = useFixedLevel(0.8, 0.2)
+      return <InputLevelMeter linear={linear} />
+    }
+    return <AsymmetricMeter />
+  },
+}
+
+export const WithoutHandler = {
+  render: () => <AnimatedMeter showHandler={false} />,
+}
+
+export const WithoutMeterDot = {
+  render: () => <AnimatedMeter showMeter={false} />,
+}
+
+export const MeterOnly = {
+  render: () => <AnimatedMeter showHandler={false} showMeter={false} />,
+}
+
+export const VolumeAtZero = {
+  render: () => <InteractiveMeter initialVolume={0} />,
+}
+
+export const VolumeAtUnity = {
+  render: () => <InteractiveMeter initialVolume={1} />,
+}
+
+export const VolumeBoosted = {
+  render: () => <InteractiveMeter initialVolume={1.5} />,
+}
+
+export const MaxBoost = {
+  render: () => <InteractiveMeter initialVolume={2} />,
+}
+
+export const PulsingSignal = {
+  render: () => {
+    function PulsingMeter() {
+      const [linear, setLinear] = useState([0, 0])
+      const frameRef = useRef(null)
+
+      useEffect(() => {
+        let t = 0
+        function animate() {
+          t += 0.04
+          const val = Math.abs(Math.sin(t)) * 0.9
+          setLinear([val, val * 0.85])
+          frameRef.current = requestAnimationFrame(animate)
+        }
+        frameRef.current = requestAnimationFrame(animate)
+        return () => cancelAnimationFrame(frameRef.current)
+      }, [])
+
+      return <InputLevelMeter linear={linear} />
+    }
+    return <PulsingMeter />
+  },
+}
+
+export const SpikeAndDecay = {
+  render: () => {
+    function SpikeDecayMeter() {
+      const [linear, setLinear] = useState([0, 0])
+      const frameRef = useRef(null)
+      const currentRef = useRef([0, 0])
+      const tickRef = useRef(0)
+
+      useEffect(() => {
+        function animate() {
+          tickRef.current++
+
+          if (tickRef.current % 90 === 0) {
+            currentRef.current = [0.95, 0.9]
+          } else {
+            currentRef.current = currentRef.current.map((v) =>
+              Math.max(0, v * 0.97),
+            )
+          }
+
+          setLinear([...currentRef.current])
+          frameRef.current = requestAnimationFrame(animate)
+        }
+        frameRef.current = requestAnimationFrame(animate)
+        return () => cancelAnimationFrame(frameRef.current)
+      }, [])
+
+      return <InputLevelMeter linear={linear} />
+    }
+    return <SpikeDecayMeter />
+  },
+}
+
+export const MultipleMeters = {
+  render: () => {
+    function MultiMeter() {
+      const linear = useSimulatedInputLevel()
+      const [volumes, setVolumes] = useState([1, 0.7, 0.4, 0.1])
+
+      const makeHandler = (idx) => ([v]) => {
+        setVolumes((prev) => {
+          const next = [...prev]
+          next[idx] = v
+          return next
+        })
+      }
+
+      const labels = ['Master', 'Vocals', 'Guitar', 'Drums']
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {volumes.map((vol, i) => (
+            <div key={i}>
+              <span
+                style={{
+                  color: 'rgba(255,255,255,0.5)',
+                  fontSize: '10px',
+                  fontFamily: 'monospace',
+                  marginBottom: '4px',
+                  display: 'block',
+                }}
+              >
+                {labels[i]}
+              </span>
+              <InputLevelMeter
+                linear={linear.map((l) => l * vol)}
+                volume={vol}
+                onVolumeChange={makeHandler(i)}
+              />
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return <MultiMeter />
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', background: '#1d1d1d', width: '240px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Playground = {
+  args: {
+    volume: 1,
+    showHandler: true,
+    showMeter: true,
+  },
+  render: (args) => {
+    function PlaygroundMeter() {
+      const linear = useSimulatedInputLevel()
+      const [volume, setVolume] = useState(args.volume)
+
+      useEffect(() => {
+        setVolume(args.volume)
+      }, [args.volume])
+
+      return (
+        <InputLevelMeter
+          linear={linear}
+          volume={volume}
+          onVolumeChange={([v]) => setVolume(v)}
+          showHandler={args.showHandler}
+          showMeter={args.showMeter}
+        />
+      )
+    }
+    return <PlaygroundMeter />
+  },
+}

package/src/icons/AlertIcon.jsx

@@ -8,7 +8,7 @@ export const AlertIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_556_1304)">
+    <g>
       <path
         d="M13.9999 9.33356V15.7501M13.9999 19.8336H14.0116M12.0049 4.50357L2.12324 21.0002C1.9195 21.3531 1.8117 21.7531 1.81056 22.1605C1.80942 22.5679 1.91497 22.9686 2.11673 23.3225C2.31849 23.6765 2.60942 23.9714 2.96056 24.1781C3.31171 24.3847 3.71083 24.4958 4.11824 24.5002H23.8816C24.289 24.4958 24.6881 24.3847 25.0392 24.1781C25.3904 23.9714 25.6813 23.6765 25.8831 23.3225C26.0848 22.9686 26.1904 22.5679 26.1893 22.1605C26.1881 21.7531 26.0803 21.3531 25.8766 21.0002L15.9949 4.50357C15.7869 4.1607 15.4941 3.87721 15.1446 3.68047C14.7952 3.48373 14.4009 3.38037 13.9999 3.38037C13.5989 3.38037 13.2046 3.48373 12.8552 3.68047C12.5057 3.87721 12.2129 4.1607 12.0049 4.50357Z"
         stroke="currentColor"
@@ -17,12 +17,7 @@ export const AlertIcon = ({ width = 16, height = 16, className, ...props }) => (
         strokeLinejoin="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_556_1304">
-        <rect width="28" height="28" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 AlertIcon.displayName = 'AlertIcon'

package/src/icons/BarsIcon.jsx

@@ -8,7 +8,7 @@ export const BarsIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_6797_209)">
+    <g>
       <path
         d="M12 8L12 15M17 5V19M7 5V19M22 10V14M2 10L2 14"
         stroke="currentColor"
@@ -16,11 +16,6 @@ export const BarsIcon = ({ width = 16, height = 16, className, ...props }) => (
         strokeLinecap="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_6797_209">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
   </svg>
 )
 

package/src/icons/CameraRollIcon.jsx

@@ -13,18 +13,13 @@ export const CameraRollIcon = ({
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_2280_66)">
+    <g>
       <path
         d="M16 10.5V5C16 3.89543 15.1046 3 14 3H5C3.89543 3 3 3.89543 3 5V21C3 22.1046 3.89543 23 5 23H14C15.1046 23 16 22.1046 16 21V15.5M7.5 0.5H11.5M12 10.5V8.5M20 10.5V8.5M12 17.5V15.5M20 17.5V15.5M9 8.5H23V17.5H9V8.5Z"
         stroke="currentColor"
         strokeWidth="1.5"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_2280_66">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
   </svg>
 )
 

package/src/icons/CartIcon.jsx

@@ -8,7 +8,7 @@ export const CartIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_2034_986)">
+    <g>
       <path
         d="M1 1.71472H5L7.68 15.1047C7.77144 15.5651 8.02191 15.9787 8.38755 16.273C8.75318 16.5674 9.2107 16.7237 9.68 16.7147H19.4C19.8693 16.7237 20.3268 16.5674 20.6925 16.273C21.0581 15.9787 21.3086 15.5651 21.4 15.1047L23 6.71472H6M20.949 21.5353C20.949 21.9495 20.6132 22.2853 20.199 22.2853C19.7848 22.2853 19.449 21.9495 19.449 21.5353C19.449 21.1211 19.7848 20.7853 20.199 20.7853C20.6132 20.7853 20.949 21.1211 20.949 21.5353ZM8.91854 21.5353C8.91854 21.9495 8.58275 22.2853 8.16854 22.2853C7.75433 22.2853 7.41854 21.9495 7.41854 21.5353C7.41854 21.1211 7.75433 20.7853 8.16854 20.7853C8.58275 20.7853 8.91854 21.1211 8.91854 21.5353Z"
         stroke="currentColor"
@@ -17,12 +17,7 @@ export const CartIcon = ({ width = 16, height = 16, className, ...props }) => (
         strokeLinejoin="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_2034_986">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 CartIcon.displayName = 'CartIcon'

package/src/icons/ClipIcon.jsx

@@ -8,7 +8,7 @@ export const ClipIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_24070_6111)">
+    <g>
       <path
         d="M14.2011 7.28133L8.07441 13.408C7.32385 14.1586 6.30587 14.5802 5.24441 14.5802C4.18296 14.5802 3.16497 14.1586 2.41441 13.408C1.66385 12.6574 1.24219 11.6394 1.24219 10.578C1.24219 9.51654 1.66385 8.49856 2.41441 7.74799L8.54108 1.62133C9.04145 1.12095 9.72011 0.839844 10.4277 0.839844C11.1354 0.839844 11.814 1.12095 12.3144 1.62133C12.8148 2.1217 13.0959 2.80036 13.0959 3.50799C13.0959 4.21563 12.8148 4.89428 12.3144 5.39466L6.18108 11.5213C5.93089 11.7715 5.59156 11.9121 5.23775 11.9121C4.88393 11.9121 4.5446 11.7715 4.29441 11.5213C4.04422 11.2711 3.90367 10.9318 3.90367 10.578C3.90367 10.2242 4.04422 9.88485 4.29441 9.63466L9.95441 3.98133"
         stroke="currentColor"
@@ -16,12 +16,7 @@ export const ClipIcon = ({ width = 16, height = 16, className, ...props }) => (
         strokeLinejoin="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_24070_6111">
-        <rect width={width} height={height} fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 ClipIcon.displayName = 'ClipIcon'

package/src/icons/CloudDownloadGradientIcon.jsx

@@ -13,7 +13,7 @@ export const CloudDownloadGradientIcon = ({
     {...props}
     className={className}
   >
-    <g clipPath="url(#clip0_29446_178301)">
+    <g>
       <path
         d="M67.9668 61.3001C71.2179 59.5277 73.7862 56.7231 75.2664 53.3289C76.7465 49.9347 77.0542 46.1442 76.1408 42.5557C75.2274 38.9673 73.1451 35.7851 70.2223 33.5116C67.2996 31.238 63.703 30.0026 60.0001 30.0001H55.8001C54.7912 26.0976 52.9106 22.4746 50.2999 19.4034C47.6892 16.3323 44.4163 13.8929 40.7271 12.2688C37.038 10.6447 33.0286 9.87797 29.0005 10.0264C24.9724 10.1748 21.0303 11.2344 17.4707 13.1257C13.9111 15.0169 10.8265 17.6905 8.44885 20.9454C6.07122 24.2003 4.46241 27.9519 3.74338 31.9181C3.02434 35.8843 3.2138 39.9619 4.29749 43.8443C5.38118 47.7267 7.33092 51.313 10.0001 54.3334M26.6669 56.6668L40.0002 70.0002M40.0002 70.0002L53.3336 56.6668M40.0002 70.0002L40.0002 40.0002"
         stroke="url(#paint0_linear_29446_178301)"
@@ -34,10 +34,7 @@ export const CloudDownloadGradientIcon = ({
         <stop stopColor="#0AFFA7" />
         <stop offset="1" stopColor="#00DAE8" />
       </linearGradient>
-      <clipPath id="clip0_29446_178301">
-        <rect width="80" height="80" fill="white" />
-      </clipPath>
-    </defs>
+</defs>
   </svg>
 )
 

package/src/icons/CodeIcon.jsx

@@ -8,7 +8,7 @@ export const CodeIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clip-path="url(#clip0_3062_1578)">
+    <g>
       <path
         d="M17 17.8117L22 11.8117L17 5.81167M7 5.81167L2 11.8117L7 17.8117M14.0303 4.03015L9.75982 19.9679"
         stroke="currentColor"
@@ -17,12 +17,7 @@ export const CodeIcon = ({ width = 16, height = 16, className, ...props }) => (
         strokeLinejoin="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_3062_1578">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 CodeIcon.displayName = 'CodeIcon'

package/src/icons/CountdownIcon.jsx

@@ -13,7 +13,7 @@ export const CountdownIcon = ({
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_7548_180)">
+    <g>
       <path
         d="M12 22.5V17.25M12 1.5V12H22.5M1.5 12L6.75 12M6.34315 6.34315C9.46734 3.21895 14.5327 3.21895 17.6569 6.34315C20.781 9.46734 20.781 14.5327 17.6569 17.6569C14.5327 20.781 9.46734 20.781 6.34315 17.6569C3.21895 14.5327 3.21895 9.46734 6.34315 6.34315Z"
         stroke="currentColor"
@@ -22,12 +22,7 @@ export const CountdownIcon = ({
         strokeLinejoin="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_7548_180">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 CountdownIcon.displayName = 'CountdownIcon'

package/src/icons/CropIcon.jsx

@@ -8,7 +8,7 @@ export const CropIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_19372_28441)">
+    <g>
       <path
         d="M4.08602 0.666016L3.99935 10.666C3.99935 11.0196 4.13982 11.3588 4.38987 11.6088C4.63992 11.8589 4.97906 11.9993 5.33268 11.9993H15.3327M0.666016 4.08602L10.666 3.99935C11.0196 3.99935 11.3588 4.13982 11.6088 4.38987C11.8589 4.63992 11.9993 4.97906 11.9993 5.33268V15.3327"
         stroke="currentColor"
@@ -16,12 +16,7 @@ export const CropIcon = ({ width = 16, height = 16, className, ...props }) => (
         strokeLinejoin="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_19372_28441">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 CropIcon.displayName = 'CropIcon'

package/src/icons/DialogueIcon.jsx

@@ -13,7 +13,7 @@ export const DialogueIcon = ({
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_5688_325)">
+    <g>
       <path
         d="M7 16.5V17C7 17.5304 7.21071 18.0391 7.58579 18.4142C7.96086 18.7893 8.46957 19 9 19H19L23 23V9C23 8.46957 22.7893 7.96086 22.4142 7.58579C22.0391 7.21071 21.5304 7 21 7H20.5M17 11C17 11.5304 16.7893 12.0391 16.4142 12.4142C16.0391 12.7893 15.5304 13 15 13H5L1 17V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H15C15.5304 1 16.0391 1.21071 16.4142 1.58579C16.7893 1.96086 17 2.46957 17 3V11Z"
         stroke="currentColor"
@@ -22,12 +22,7 @@ export const DialogueIcon = ({
         strokeLinejoin="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_5688_325">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 DialogueIcon.displayName = 'DialogueIcon'

package/src/icons/DotsVerticalIcon.jsx

@@ -9,7 +9,7 @@ export const DotsVerticalIcon = ({ width, height, className, ...props }) => {
       className={className}
       {...props}
     >
-      <g clipPath="url(#clip0_4414_845)">
+      <g>
         <path
           d="M8.84142 4.03922C8.84142 4.50392 8.4647 4.88064 7.99999 4.88064C7.53529 4.88064 7.15857 4.50392 7.15857 4.03922C7.15857 3.57451 7.53529 3.19779 7.99999 3.19779C8.4647 3.19779 8.84142 3.57451 8.84142 4.03922Z"
           stroke="currentColor"
@@ -35,12 +35,7 @@ export const DotsVerticalIcon = ({ width, height, className, ...props }) => {
           stroke="currentColor"
         />
       </g>
-      <defs>
-        <clipPath id="clip0_4414_845">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
+</svg>
   )
 }
 

package/src/icons/FolderIcon.jsx

@@ -13,7 +13,7 @@ export const FolderIcon = ({
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_27817_55873)">
+    <g>
       <path
         d="M14.6673 12.6667C14.6673 13.0203 14.5268 13.3594 14.2768 13.6095C14.0267 13.8595 13.6876 14 13.334 14H2.66732C2.3137 14 1.97456 13.8595 1.72451 13.6095C1.47446 13.3594 1.33398 13.0203 1.33398 12.6667V3.33333C1.33398 2.97971 1.47446 2.64057 1.72451 2.39052C1.97456 2.14048 2.3137 2 2.66732 2H6.00065L7.33398 4H13.334C13.6876 4 14.0267 4.14048 14.2768 4.39052C14.5268 4.64057 14.6673 4.97971 14.6673 5.33333V12.6667Z"
         stroke="currentColor"
@@ -21,12 +21,7 @@ export const FolderIcon = ({
         strokeLinejoin="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_27817_55873">
-        <rect width="16" height="16" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 FolderIcon.displayName = 'FolderIcon'