@moises.ai/design-system 3.11.8 → 3.11.10

package/src/components/PeakLevel/PeakLevel.stories.jsx

@@ -0,0 +1,192 @@
+import { useState, useEffect, useRef } from 'react'
+import { PeakLevel } from './PeakLevel'
+import { InputLevelMeter } from '../InputLevelMeter/InputLevelMeter'
+import { useSimulatedInputLevel } from '../InputLevelMeter/useSimulatedInputLevel'
+
+export default {
+  title: 'Components/PeakLevel',
+  component: PeakLevel,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', background: '#1d1d1d' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Reset = {
+  render: () => <PeakLevel value={null} />,
+}
+
+export const RegularLevel = {
+  render: () => <PeakLevel value={-2} />,
+}
+
+export const MediumLevel = {
+  render: () => <PeakLevel value={-0.2} />,
+}
+
+export const HighLevel = {
+  render: () => <PeakLevel value={1.3} />,
+}
+
+export const AllLevels = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={null} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Reset
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={-12} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Regular
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={-0.5} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Medium
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={1.3} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          High
+        </span>
+      </div>
+    </div>
+  ),
+}
+
+export const WithLinearInput = {
+  render: () => {
+    function LivePeak() {
+      const linear = useSimulatedInputLevel()
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <div style={{ width: '200px' }}>
+            <InputLevelMeter linear={linear} />
+          </div>
+          <PeakLevel linear={linear} />
+        </div>
+      )
+    }
+    return <LivePeak />
+  },
+}
+
+export const WithClickToReset = {
+  render: () => {
+    function ResettablePeak() {
+      const linear = useSimulatedInputLevel()
+      const [peakDb, setPeakDb] = useState(null)
+      const peakRef = useRef(null)
+
+      useEffect(() => {
+        const peak = Math.max(linear[0] ?? 0, linear[1] ?? 0)
+        if (peak > 0) {
+          const db = 20 * Math.log10(peak)
+          if (db > -96) {
+            if (peakRef.current == null || db > peakRef.current) {
+              peakRef.current = db
+              setPeakDb(db)
+            }
+          }
+        }
+      }, [linear])
+
+      const handleReset = () => {
+        peakRef.current = null
+        setPeakDb(null)
+      }
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{ width: '200px' }}>
+              <InputLevelMeter linear={linear} />
+            </div>
+            <PeakLevel value={peakDb} onClick={handleReset} />
+          </div>
+          <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '10px', fontFamily: 'monospace' }}>
+            Click the peak value to reset
+          </span>
+        </div>
+      )
+    }
+    return <ResettablePeak />
+  },
+}
+
+export const WithVolumeFader = {
+  render: () => {
+    function FaderWithPeak() {
+      const linear = useSimulatedInputLevel()
+      const [volume, setVolume] = useState(1)
+
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <div style={{ width: '200px' }}>
+            <InputLevelMeter
+              linear={linear}
+              volume={volume}
+              onVolumeChange={([v]) => setVolume(v)}
+            />
+          </div>
+          <PeakLevel linear={linear} />
+        </div>
+      )
+    }
+    return <FaderWithPeak />
+  },
+}
+
+export const BoundaryValues = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+      {[-96, -60, -24, -6, -1, -0.1, 0, 0.1, 1, 3, 6].map((db) => (
+        <div key={db} style={{ textAlign: 'center' }}>
+          <PeakLevel value={db} />
+          <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', fontFamily: 'monospace', display: 'block', marginTop: '4px' }}>
+            {db} dB
+          </span>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const MultipleChannels = {
+  render: () => {
+    function MultiChannel() {
+      const linear = useSimulatedInputLevel()
+      const labels = ['Master', 'Vocals', 'Guitar', 'Drums']
+      const multipliers = [1, 0.7, 0.4, 0.15]
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {labels.map((label, i) => (
+            <div key={label} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: '10px', fontFamily: 'monospace', width: '48px' }}>
+                {label}
+              </span>
+              <div style={{ width: '160px' }}>
+                <InputLevelMeter linear={linear.map((l) => l * multipliers[i])} />
+              </div>
+              <PeakLevel linear={linear.map((l) => l * multipliers[i])} />
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return <MultiChannel />
+  },
+}

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'

package/src/icons/GoalsIcon.jsx

@@ -8,18 +8,13 @@ export const GoalsIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_2034_958)">
+    <g>
       <path
         d="M12 9.5V8.75V9.5ZM9.5 12H8.75H9.5ZM12 14.5V13.75V14.5ZM14.5 12H13.75H14.5ZM2 12H1.25H2ZM12 22V22.75V22ZM22 12H21.25H22ZM12 2V2.75V2ZM3.73683 7.83796C3.92348 7.46818 3.77502 7.01711 3.40525 6.83046C3.03547 6.64381 2.5844 6.79227 2.39775 7.16204L3.73683 7.83796ZM6 12H5.25H6ZM12 18V18.75V18ZM18 12H17.25H18ZM16.1807 7.69632L15.6581 8.23423V8.23423L16.1807 7.69632ZM12 6V5.25V6ZM6.91535 10.6869C7.0186 10.2858 6.77711 9.87692 6.37597 9.77367C5.97483 9.67043 5.56594 9.91192 5.4627 10.3131L6.91535 10.6869ZM11.4697 12.5303C11.7626 12.8232 12.2374 12.8232 12.5303 12.5303C12.8232 12.2374 12.8232 11.7626 12.5303 11.4697L11.4697 12.5303ZM4 4V4.75H4.75V4H4ZM4.75 1C4.75 0.585786 4.41421 0.25 4 0.25C3.58579 0.25 3.25 0.585786 3.25 1L4.75 1ZM1 3.25C0.585786 3.25 0.25 3.58579 0.25 4C0.25 4.41421 0.585786 4.75 1 4.75L1 3.25ZM12 8.75C10.2051 8.75 8.75 10.2051 8.75 12H10.25C10.25 11.0335 11.0335 10.25 12 10.25V8.75ZM8.75 12C8.75 13.7949 10.2051 15.25 12 15.25V13.75C11.0335 13.75 10.25 12.9665 10.25 12H8.75ZM12 15.25C13.7949 15.25 15.25 13.7949 15.25 12H13.75C13.75 12.9665 12.9665 13.75 12 13.75V15.25ZM15.25 12C15.25 10.2051 13.7949 8.75 12 8.75V10.25C12.9665 10.25 13.75 11.0335 13.75 12H15.25ZM1.25 12C1.25 17.9371 6.06294 22.75 12 22.75V21.25C6.89136 21.25 2.75 17.1086 2.75 12H1.25ZM12 22.75C17.9371 22.75 22.75 17.9371 22.75 12H21.25C21.25 17.1086 17.1086 21.25 12 21.25V22.75ZM22.75 12C22.75 6.06294 17.9371 1.25 12 1.25V2.75C17.1086 2.75 21.25 6.89137 21.25 12H22.75ZM2.39775 7.16204C1.66333 8.61705 1.25 10.2613 1.25 12H2.75C2.75 10.5014 3.10579 9.08814 3.73683 7.83796L2.39775 7.16204ZM12 1.25C9.07039 1.25 6.41323 2.42288 4.47497 4.32299L5.52503 5.39414C7.19427 3.75776 9.4787 2.75 12 2.75V1.25ZM5.25 12C5.25 15.7279 8.27208 18.75 12 18.75V17.25C9.1005 17.25 6.75 14.8995 6.75 12H5.25ZM12 18.75C15.7279 18.75 18.75 15.7279 18.75 12H17.25C17.25 14.8995 14.8995 17.25 12 17.25V18.75ZM18.75 12C18.75 10.101 17.9648 8.38405 16.7033 7.1584L15.6581 8.23423C16.6409 9.1891 17.25 10.5228 17.25 12H18.75ZM16.7033 7.1584C15.4885 5.97803 13.8285 5.25 12 5.25V6.75C13.4227 6.75 14.7119 7.31488 15.6581 8.23423L16.7033 7.1584ZM5.4627 10.3131C5.32371 10.853 5.25 11.4185 5.25 12H6.75C6.75 11.5456 6.80754 11.1058 6.91535 10.6869L5.4627 10.3131ZM12 5.25C10.1184 5.25 8.4154 6.02091 7.19209 7.26223L8.26047 8.31511C9.21346 7.34809 10.5362 6.75 12 6.75V5.25ZM12.5303 11.4697L4.03033 2.96967L2.96967 4.03033L11.4697 12.5303L12.5303 11.4697ZM4.75 4L4.75 1L3.25 1L3.25 4H4.75ZM1 4.75L4 4.75V3.25L1 3.25L1 4.75Z"
         fill="currentColor"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_2034_958">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 GoalsIcon.displayName = 'GoalsIcon'

package/src/icons/IsolateDrumsGradientIcon.jsx

@@ -13,7 +13,7 @@ export const IsolateDrumsGradientIcon = ({
     {...props}
     className={className}
   >
-    <g clipPath="url(#clip0_29160_243036)">
+    <g>
       <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)"
@@ -31,10 +31,7 @@ export const IsolateDrumsGradientIcon = ({
         <stop stopColor="#0AFFA7" />
         <stop offset="1" stopColor="#00DAE8" />
       </linearGradient>
-      <clipPath id="clip0_29160_243036">
-        <rect width="80" height="80" fill="white" />
-      </clipPath>
-    </defs>
+</defs>
   </svg>
 )
 

package/src/icons/IsolateDrumsIcon.jsx

@@ -6,18 +6,13 @@ export const IsolateDrumsIcon = ({ width, height, className, ...props }) => (
     viewBox="0 0 16 16"
     fill="none"
   >
-    <g clipPath="url(#clip0_4905_1332)">
+    <g>
       <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>
+</svg>
 )
 
 IsolateDrumsIcon.displayName = 'IsolateDrumsIcon'

package/src/icons/Knob2Icon.jsx

@@ -8,7 +8,7 @@ export const Knob2Icon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_7846_246)">
+    <g>
       <path
         d="M11.9999 0.75V1.25M19.9552 4.0452L19.6017 4.39875M23.2504 12.0005L22.7504 12.0005M19.9551 19.9558L19.6016 19.6022M11.9999 23.2509V22.7509M4.04452 19.9558L4.39807 19.6022M0.749329 12.0005H1.24933M4.04459 4.04504L4.39814 4.39859M16.9551 7.04519L13.9999 9.99998M19.5131 12.0002C19.5131 16.1496 16.1494 19.5134 12 19.5134C7.85058 19.5134 4.48683 16.1496 4.48683 12.0002C4.48683 7.85083 7.85058 4.48707 12 4.48707C16.1494 4.48707 19.5131 7.85083 19.5131 12.0002Z"
         stroke="currentColor"
@@ -16,12 +16,7 @@ export const Knob2Icon = ({ width = 16, height = 16, className, ...props }) => (
         strokeLinecap="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_7846_246">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 Knob2Icon.displayName = 'Knob2Icon'

package/src/icons/Knob3Icon.jsx

@@ -8,7 +8,7 @@ export const Knob3Icon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_7846_257)">
+    <g>
       <path
         d="M11.9999 0.75V1.25M19.9552 4.0452L19.6017 4.39875M23.2504 12.0005L22.7504 12.0005M0.749329 12.0005H1.24933M4.04459 4.04504L4.39814 4.39859M16.9551 7.04519L13.9999 9.99998M19.5131 12.0002C19.5131 16.1496 16.1494 19.5134 12 19.5134C7.85058 19.5134 4.48683 16.1496 4.48683 12.0002C4.48683 7.85083 7.85058 4.48707 12 4.48707C16.1494 4.48707 19.5131 7.85083 19.5131 12.0002Z"
         stroke="currentColor"
@@ -16,12 +16,7 @@ export const Knob3Icon = ({ width = 16, height = 16, className, ...props }) => (
         strokeLinecap="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_7846_257">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 Knob3Icon.displayName = 'Knob3Icon'

package/src/icons/KnobIcon.jsx

@@ -8,7 +8,7 @@ export const KnobIcon = ({ width = 16, height = 16, className, ...props }) => (
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_7508_178)">
+    <g>
       <path
         d="M16 8L12.9289 11.0711M12 1.5C17.799 1.5 22.5 6.20101 22.5 12C22.5 17.799 17.799 22.5 12 22.5C6.20101 22.5 1.5 17.799 1.5 12C1.5 6.20101 6.20101 1.5 12 1.5Z"
         stroke="currentColor"
@@ -17,12 +17,7 @@ export const KnobIcon = ({ width = 16, height = 16, className, ...props }) => (
         strokeLinejoin="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_7508_178">
-        <rect width="24" height="24" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 KnobIcon.displayName = 'KnobIcon'

package/src/icons/LibraryIcon.jsx

@@ -13,19 +13,14 @@ export const LibraryIcon = ({
     className={className}
     {...props}
   >
-    <g clipPath="url(#clip0_27817_55883)">
+    <g>
       <path
         d="M3.16602 3.16602L3.16602 12.8327M6.49935 3.16602L6.49935 12.8327M9.25508 3.20901L13.6499 12.6337"
         stroke="currentColor"
         strokeLinecap="round"
       />
     </g>
-    <defs>
-      <clipPath id="clip0_27817_55883">
-        <rect width="16" height="16" fill="currentColor" />
-      </clipPath>
-    </defs>
-  </svg>
+</svg>
 )
 
 LibraryIcon.displayName = 'LibraryIcon'