@moises.ai/design-system 4.18.18 → 4.19.0

package/package.json

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

package/src/colors/custom-styles.css

@@ -106,31 +106,31 @@
   --Colors-Neutral-Neutral-Alpha-10: var(--colors-neutral-neutral-alpha-10);
   --Colors-Neutral-Neutral-1: var(--colors-neutral-neutral-1);
 
-  --neutral-1: var(--colors-neutral-neutral-1);
-  --neutral-2: rgba(24, 25, 27, 1);
-  --neutral-3: rgba(33, 34, 37, 1);
-  --neutral-4: rgba(39, 42, 45, 1);
-  --neutral-5: rgba(46, 49, 53, 1);
-  --neutral-6: rgba(54, 58, 63, 1);
-  --neutral-7: rgba(67, 72, 78, 1);
-  --neutral-8: rgba(90, 97, 105, 1);
-  --neutral-9: rgba(105, 110, 119, 1);
-  --neutral-10: rgba(119, 123, 132, 1);
-  --neutral-11: rgba(176, 180, 186, 1);
-  --neutral-12: rgba(237, 238, 240, 1);
+  --neutral-1: #101013;
+  --neutral-2: #16181C;
+  --neutral-3: #1F2126;
+  --neutral-4: #25292E;
+  --neutral-5: #2B2F35;
+  --neutral-6: #32383F;
+  --neutral-7: #3F464E;
+  --neutral-8: #565F69;
+  --neutral-9: #656C77;
+  --neutral-10: #737884;
+  --neutral-11: #A7AFBA;
+  --neutral-12: #E6EAF0;
 
-  --neutral-alpha-1: rgba(0, 0, 0, 0);
-  --neutral-alpha-2: var(--colors-neutral-neutral-alpha-2);
-  --neutral-alpha-3: var(--colors-neutral-neutral-alpha-3);
-  --neutral-alpha-4: var(--colors-neutral-neutral-alpha-4);
-  --neutral-alpha-5: var(--colors-neutral-neutral-alpha-5);
-  --neutral-alpha-6: rgba(214, 235, 253, 0.19);
-  --neutral-alpha-7: rgba(217, 237, 255, 0.25);
-  --neutral-alpha-8: rgba(217, 237, 255, 0.36);
-  --neutral-alpha-9: rgba(223, 235, 253, 0.43);
-  --neutral-alpha-10: var(--colors-neutral-neutral-alpha-10);
-  --neutral-alpha-11: rgba(241, 247, 254, 0.71);
-  --neutral-alpha-12: rgba(252, 253, 255, 0.94);
+  --neutral-alpha-1: rgba(207, 234, 236, 0.02);
+  --neutral-alpha-2: rgba(197, 239, 246, 0.04);
+  --neutral-alpha-3: rgba(206, 222, 248, 0.08);
+  --neutral-alpha-4: rgba(196, 228, 248, 0.11);
+  --neutral-alpha-5: rgba(201, 226, 254, 0.15);
+  --neutral-alpha-6: rgba(200, 228, 253, 0.19);
+  --neutral-alpha-7: rgba(204, 231, 255, 0.25);
+  --neutral-alpha-8: rgba(204, 231, 255, 0.36);
+  --neutral-alpha-9: rgba(207, 226, 253, 0.43);
+  --neutral-alpha-10: rgba(218, 229, 253, 0.48);
+  --neutral-alpha-11: rgba(229, 240, 254, 0.71);
+  --neutral-alpha-12: rgba(242, 247, 255, 0.94);
 
   /* Neutral Extras */
   --neutral-alpha-0-50: rgba(17, 17, 19, 0.50);

package/src/components/Countdown/Countdown.module.css

@@ -89,7 +89,7 @@
 }
 
 .labelSmall.white {
-  color: #737373;
+  color: var(--neutral-10);
 }
 
 .labelSmall.sm {
@@ -158,7 +158,7 @@
 }
 
 .skeletonBox.white .skeleton {
-  background: linear-gradient(90deg, #d5d5d5 4.69%, #a1a1a1 100%);
+  background: linear-gradient(90deg, var(--neutral-11) 4.69%, var(--neutral-9) 100%);
   animation: skeleton_animate 1s infinite;
 }
 
@@ -167,9 +167,9 @@
   height: 60px;
   background: linear-gradient(
     90deg,
-    var(--gray-3) 25%,
-    var(--gray-4) 50%,
-    var(--gray-3) 75%
+    var(--neutral-3) 25%,
+    var(--neutral-4) 50%,
+    var(--neutral-3) 75%
   );
   background-size: 200% 100%;
   animation: skeleton_animate 1.5s ease-in-out infinite;

package/src/components/DataTable/DataTable.module.css

@@ -328,18 +328,18 @@
 }
 
 .DataTable :global(.rt-TableRow:hover) .projectCell:not(.dropdownColumn) :not(.artistText) {
-  color: #edeef0;
+  color: var(--neutral-12);
 }
 
 .DataTable
   :global(.rt-TableRow:focus-within)
   .projectCell:not(.dropdownColumn)
   :not(.artistText) {
-  color: #edeef0;
+  color: var(--neutral-12);
 }
 
 .rowSelected .projectCell:not(.dropdownColumn) :not(.artistText) {
-  color: #edeef0;
+  color: var(--neutral-12);
 }
 
 .dropdownTriggerWrapper {

package/src/components/Extension/Extension.jsx

@@ -77,7 +77,7 @@ function Header({ title, onBack, headerLeft, headerRight, allowClose = true, onC
             gap="1"
             mx="4"
             py="3"
-            style={{ borderBottom: '1px solid var(--gray-a4)' }}
+            style={{ borderBottom: '1px solid var(--neutral-alpha-4)' }}
         >
             {headerLeft !== undefined ? (
                 headerLeft

package/src/components/Extension/Extension.stories.jsx

@@ -11,7 +11,7 @@ const sidebarDecorator = (Story) => (
     style={{
       width: 300,
       height: 500,
-      border: '1px solid var(--gray-a6)',
+      border: '1px solid var(--neutral-alpha-6)',
       borderRadius: 8,
       overflow: 'hidden',
       display: 'flex',
@@ -387,7 +387,7 @@ function KeepMountedHomeScreen() {
         style={{
           padding: 8,
           borderRadius: 6,
-          border: '1px solid var(--gray-a6)',
+          border: '1px solid var(--neutral-alpha-6)',
         }}
       />
       <Button variant="soft" size="2" onClick={() => push('next')}>

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

@@ -11,7 +11,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ padding: '16px', background: '#1d1d1d', width: '240px' }}>
+      <div style={{ padding: '16px', background: 'var(--neutral-2)', width: '240px' }}>
         <Story />
       </div>
     ),
@@ -321,7 +321,7 @@ export const MultipleMeters = {
   },
   decorators: [
     (Story) => (
-      <div style={{ padding: '16px', background: '#1d1d1d', width: '240px' }}>
+      <div style={{ padding: '16px', background: 'var(--neutral-2)', width: '240px' }}>
         <Story />
       </div>
     ),

package/src/components/Knob/utils.js

@@ -107,7 +107,7 @@ export const getPointerProperties = (activeDotIndex, disabled) => {
 
   return {
     pointerRotation: angleInDegrees,
-    pointerColor: disabled ? '#43484E' : '#B0B4BA',
+    pointerColor: disabled ? 'var(--neutral-7)' : 'var(--neutral-11)',
   }
 }
 

package/src/components/PanControl/PanControl.jsx

@@ -190,8 +190,8 @@ export const PanControl = ({
                 A ${KNOB_RADIUS} ${KNOB_RADIUS} 0 ${largeArc} ${sweep}
                 ${x2.toFixed(3)} ${y2.toFixed(3)}`,
       pointerRotation: displayNorm * 180,
-      arcColor: disabled ? '#5A6169' : '#19E4F1',
-      pointerColor: disabled ? '#43484E' : '#B0B4BA',
+      arcColor: disabled ? 'var(--neutral-8)' : '#19E4F1',
+      pointerColor: disabled ? 'var(--neutral-7)' : 'var(--neutral-11)',
     }
   }, [value, disabled, minValue, maxValue])
 

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

@@ -12,7 +12,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ padding: '16px', background: '#1d1d1d' }}>
+      <div style={{ padding: '16px', background: 'var(--neutral-2)' }}>
         <Story />
       </div>
     ),

package/src/components/RecordingForm/RecordingForm.module.css

@@ -23,7 +23,7 @@
   flex: 1;
   height: 100%;
   border-radius: 1px;
-  background: #333;
+  background: var(--neutral-6);
   transition: background-color 0.1s ease;
 }
 

package/src/components/SetlistList/SetlistList.module.css

@@ -21,7 +21,7 @@
 
   &:hover,
   &.menuOpen {
-    background: #212225 !important;
+    background: var(--neutral-3) !important;
 
     .avatarSetlist {
       background: var(--neutral-alpha-3);

package/src/components/Shell/Shell.stories.jsx

@@ -91,11 +91,11 @@ export const Default = {
             <div key="credits-header">
               <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="showActiveTrigger">
                 <Text as="span" style={{ fontSize: 14, fontWeight: 'normal', lineHeight: '20px' }}>Credits: </Text>
-                <Text as="span" style={{ color: 'var(--gray-12)', fontSize: 14 }}>45/60</Text>
+                <Text as="span" style={{ color: 'var(--neutral-12)', fontSize: 14 }}>45/60</Text>
                 <button
                   type="button"
                   aria-label="Upgrade"
-                  style={{ border: 'none', cursor: 'pointer', backgroundColor: 'var(--cyan-9)', color: 'var(--gray-1)', fontSize: 12, fontWeight: 500, padding: '4px 8px', borderRadius: 4 }}
+                  style={{ border: 'none', cursor: 'pointer', backgroundColor: 'var(--cyan-9)', color: 'var(--neutral-1)', fontSize: 12, fontWeight: 500, padding: '4px 8px', borderRadius: 4 }}
                   onClick={() => {
                     closeMenu?.()
                     console.log('Upgrade clicked - menu should close')

package/src/components/SliderLibrary/SliderLibrary.module.css

@@ -16,7 +16,7 @@
 }
 
 .root[data-disabled] .track {
-  background-color: #212225;
+  background-color: var(--neutral-3);
   opacity: 1;
   filter: none;
 }
@@ -25,7 +25,7 @@
   position: relative;
   flex-grow: 1;
   height: 4px;
-  background: var(--neutral-alpha-3, rgba(221, 234, 248, 0.08));
+  background: var(--neutral-alpha-3);
   border-radius: 99px;
   overflow: hidden;
 }
@@ -46,19 +46,19 @@
   background: var(--white, #fff);
   border: none;
   border-radius: 99px;
-  box-shadow: 0 0 0 1px #2e31354d;
+  box-shadow: 0 0 0 1px var(--neutral-alpha-5);
   outline: none;
   cursor: ew-resize;
 }
 
 .thumb[data-focus-visible] {
-  outline: 2px solid var(--neutral-alpha-8, rgba(217, 237, 255, 0.36));
+  outline: 2px solid var(--neutral-alpha-8);
   outline-offset: 2px;
 }
 
 .root[data-disabled] .thumb {
   background-color: #18191b;
-  border: 1px solid #43484e;
+  border: 1px solid var(--neutral-7);
   box-shadow: none;
   cursor: default;
   opacity: 1;
@@ -66,7 +66,7 @@
 }
 
 .root[data-disabled] .range {
-  background-color: #303236;
+  background-color: var(--neutral-5);
   opacity: 1;
   filter: none;
 }

package/src/components/SliderLibrary/SliderLibrary.stories.jsx

@@ -44,7 +44,7 @@ export default {
         style={{
           width: 280,
           padding: 24,
-          background: '#1d1d1d',
+          background: 'var(--neutral-2)',
           borderRadius: 8,
         }}
       >
@@ -134,7 +134,7 @@ export const TooltipTiming = {
           formatValue={(v) => `${v}%`}
           aria-label="Volume"
         />
-        <span style={{ color: '#a1a1a1', fontSize: 12 }}>
+        <span style={{ color: 'var(--neutral-11)', fontSize: 12 }}>
           Opens after {args.tooltipDelayDuration}ms · closes {args.tooltipCloseDelay}ms
           after leave
         </span>
@@ -178,7 +178,7 @@ export const ThumbDoubleClick = {
           formatValue={(v) => `${v}%`}
           aria-label="Volume"
         />
-        <span style={{ color: '#a1a1a1', fontSize: 12 }}>
+        <span style={{ color: 'var(--neutral-11)', fontSize: 12 }}>
           Double-click the thumb to reset to {defaultValue}%
         </span>
       </div>

package/src/components/SpecialDialog/SpecialDialog.module.css

@@ -52,7 +52,7 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--gray-1, #fcfcfd);
+  color: var(--neutral-12);
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/components/StemGenerationForm/CreateNew/CreateNew.jsx

@@ -245,13 +245,13 @@ export const CreateNew = ({
           onClick={onAddConditioningAudio}
           style={{
             borderRadius: 'var(--radius-4)',
-            border: '1px solid #202224',
+            border: '1px solid var(--neutral-3)',
             cursor: 'pointer',
             paddingTop: 10,
             paddingBottom: 10,
           }}
         >
-          <AttachmentIcon width={16} height={16} style={{ color: '#B0B4BA' }} />
+          <AttachmentIcon width={16} height={16} style={{ color: 'var(--neutral-11)' }} />
           <Tooltip
             content={i18n._(
               'Best results: use isolated target instrument.',

package/src/components/Tooltip/Tooltip.module.css

@@ -74,15 +74,15 @@
 /* White variant */
 .TooltipContent--white {
   border-radius: 3px;
-  background: #EDEEF0;
-  color: #111113;
+  background: var(--neutral-12);
+  color: var(--neutral-1);
 }
 
 /* Gray variant */
 .TooltipContent--gray {
   border-radius: 3px;
-  background: #272A2D;
-  color: rgba(252, 253, 255, 0.94);
+  background: var(--neutral-4);
+  color: var(--neutral-alpha-12);
 }
 
 /* Diagram variant (matches the "tooltip diagram" surface from Figma) */
@@ -93,16 +93,16 @@
   max-width: none;
   padding: var(--spacing-1, 4px) var(--spacing-2, 8px) var(--spacing-2, 8px);
   border-radius: var(--radius-4, 8px);
-  border: 1px solid var(--neutral-alpha-3, rgba(221, 234, 248, 0.08));
-  background: var(--panel-solid, #18191b);
-  color: var(--neutral-alpha-12, rgba(252, 253, 255, 0.94));
+  border: 1px solid var(--neutral-alpha-3);
+  background: var(--neutral-4);
+  color: var(--neutral-alpha-12);
   box-shadow:
-    0 12px 32px -16px rgba(0, 0, 0, 0.3),
-    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+    0 12px 32px -16px var(--neutral-1),
+    0 12px 60px 0 var(--neutral-alpha-1);
 }
 
 .TooltipDiagram .TooltipArrow {
-  fill: var(--panel-solid, #18191b);
+  fill: var(--neutral-4);
 }
 
 .TooltipDiagramHeader {
@@ -114,7 +114,7 @@
 }
 
 .TooltipDiagramTitle {
-  color: var(--neutral-alpha-9, rgba(223, 235, 253, 0.43));
+  color: var(--neutral-alpha-9);
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
@@ -145,20 +145,20 @@
 
 /* White shortcut */
 .TooltipShortcut--white {
-  color: #5A6169;
+  color: var(--neutral-8);
 }
 
 /* Gray shortcut */
 .TooltipShortcut--gray {
-  color: rgba(229, 237, 253, 0.48);
+  color: var(--neutral-alpha-10);
 }
 
 .TooltipArrow {
-  fill: #272A2D;
+  fill: var(--neutral-4);
 }
 
 .TooltipContent--white .TooltipArrow {
-  fill: #EDEEF0;
+  fill: var(--neutral-12);
 }
 
 .TooltipContent {

package/src/components/TrackHeader/TrackHeader.module.css

@@ -13,7 +13,7 @@
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
-  background: linear-gradient(90deg, #fff 95%, #1d1d1d 100%);
+  background: linear-gradient(90deg, var(--neutral-12) 95%, var(--neutral-3) 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -189,7 +189,7 @@ background-color: rgba(17, 17, 19);
         background: linear-gradient(
           90deg,
           var(--neutral-alpha-11) 95%,
-          #1d1d1d 100%
+          var(--neutral-3) 100%
         );
         background-clip: text;
         text-align: left;

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

@@ -83,7 +83,7 @@ import { TrackHeader } from '@moises.ai/design-system'
   },
   decorators: [
     (Story) => (
-      <div style={{ width: '400px', background: '#1d1d1d' }}>
+      <div style={{ width: '400px', background: 'var(--neutral-2)' }}>
         <Story />
       </div>
     ),

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

@@ -21,7 +21,7 @@ export function Waveform({
   infos,
   onlyButton,
   hover,
-  waveColor = '#3f3f3f',
+  waveColor = 'var(--neutral-7)',
   progressColor = 'white',
   wavegroup,
   autoRepeat = false,

package/src/icons/AlertIcon.jsx

@@ -1,9 +1,8 @@
 export const AlertIcon = ({ 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 8.00005V13.5M12 17H12.01M10.29 3.86005L1.82002 18.0001C1.64539 18.3025 1.55299 18.6454 1.55201 18.9946C1.55103 19.3438 1.64151 19.6872 1.81445 19.9906C1.98738 20.294 2.23675 20.5468 2.53773 20.7239C2.83871 20.901 3.18082 20.9962 3.53002 21.0001H20.47C20.8192 20.9962 21.1613 20.901 21.4623 20.7239C21.7633 20.5468 22.0127 20.294 22.1856 19.9906C22.3585 19.6872 22.449 19.3438 22.448 18.9946C22.4471 18.6454 22.3547 18.3025 22.18 18.0001L13.71 3.86005C13.5318 3.56616 13.2807 3.32317 12.9812 3.15454C12.6817 2.9859 12.3438 2.89731 12 2.89731C11.6563 2.89731 11.3184 2.9859 11.0188 3.15454C10.7193 3.32317 10.4683 3.56616 10.29 3.86005Z"
-      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Alert Icon">
+  <path d="M12 12.5L12 8.5M9.78538 4.22783L2.91711 17.34C2.04518 19.0046 3.25257 21 5.13169 21H18.8682C20.7473 21 21.9547 19.0046 21.0828 17.34L14.2145 4.22783C13.2787 2.44119 10.7212 2.44119 9.78538 4.22783Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+  <circle cx="1.25" cy="1.25" r="1.25" transform="matrix(1 0 0 -1 10.75 17.5)" fill="currentColor"/>
+</svg>
 )
 
 AlertIcon.displayName = 'AlertIcon'

package/src/icons/ArrowDownIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowDownIcon = ({
   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="M6 13L12 19L18 13M12 5V18"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Arrow Down Icon">
+  <path d="M19 13.1429L12 20L5 13.1429M12 18.8571V4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowDownIcon.displayName = 'ArrowDownIcon'

package/src/icons/ArrowLeftIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowLeftIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M11 18L5 12L11 6M19 12L6 12"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Arrow Left Icon">
+  <path d="M10.8571 19L4 12L10.8571 5M5.14286 12L20 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowLeftIcon.displayName = 'ArrowLeftIcon'

package/src/icons/ArrowUpIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowUpIcon = ({
   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="M18 11L12 5L6 11M12 6V19"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Arrow Up Icon">
+  <path d="M19 10.8571L12 4L5 10.8571M12 5.14286V20" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowUpIcon.displayName = 'ArrowUpIcon'

package/src/icons/ArrowsHorizontalIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowsHorizontalIcon = ({
   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="M9 11.25L5 7.25L9 3.25M19 7L6 7M14.99 20.75L18.99 16.75L14.99 12.75M17.99 16.75L4.98999 16.75"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Arrows Horizontal Icon">
+  <path d="M7.42857 11L4 7.5L7.5 4M4.85714 7.5L19 7.5M16.5714 20L20 16.5L16.5 13M19.1429 16.5L5 16.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowsHorizontalIcon.displayName = 'ArrowsHorizontalIcon'

package/src/icons/ArrowsVerticalIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowsVerticalIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M11.25 9.005L7.25 5.005L3.25 9.005M7 19.005L7 6.005M20.75 14.995L16.75 18.995L12.75 14.995M16.75 17.995L16.75 4.99499"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Arrows Vertical Icon">
+  <path d="M11 7.42857L7.5 4L4 7.5M7.5 4.85714L7.5 19M20 16.5714L16.5 20L13 16.5M16.5 19.1429L16.5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowsVerticalIcon.displayName = 'ArrowsVerticalIcon'

package/src/icons/AudioFileIcon.jsx

@@ -4,23 +4,9 @@ export const AudioFileIcon = ({
   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="M13.67 12.8944V14.5734C13.67 15.4748 13.067 16.2649 12.1974 16.5026L11.4548 16.7056C10.4706 16.9747 9.5 16.2338 9.5 15.2135C9.5 14.5159 9.96681 13.9047 10.6397 13.7211L13.67 12.8944ZM13.67 12.8944V7M20 6.34317V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H15.6568C16.1873 2 16.696 2.21071 17.071 2.58579L19.4142 4.92895C19.7893 5.30403 20 5.81273 20 6.34317Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeMiterlimit="10"
-      strokeLinecap="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props} aria-label="Audio File Icon">
+  <path d="M13 15V7M15.1716 2.5H7C5.34315 2.5 4 3.84315 4 5.5V18.5C4 20.1569 5.34315 21.5 7 21.5H17C18.6569 21.5 20 20.1569 20 18.5V7.32843C20 6.79799 19.7893 6.28929 19.4142 5.91421L16.5858 3.08579C16.2107 2.71071 15.702 2.5 15.1716 2.5ZM13 13L10.1161 14.03C9.44677 14.269 9 14.903 9 15.6137C9 16.7766 10.1521 17.5885 11.2473 17.1974L12.4319 16.7743C12.7726 16.6527 13 16.3299 13 15.9682V13Z" stroke="currentColor" strokeWidth="1.8" strokeMiterlimit="10" strokeLinecap="round"/>
+</svg>
 )
 
 AudioFileIcon.displayName = 'AudioFileIcon'

package/src/icons/AutomationPenIcon.jsx

@@ -0,0 +1,7 @@
+export const AutomationPenIcon = ({ 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} aria-label="Automation Pen Icon">
+  <path d="M5 9C6.65685 9 8 7.65686 8 6C8 4.34315 6.65685 3 5 3C3.34315 3 2 4.34315 2 6C2 7.65685 3.34315 9 5 9ZM5 9C5 14.3862 8.29634 19.0098 13 21M18.5 3C17.1193 3 16 4.11929 16 5.5L16 17.963C16 18.2087 16.0904 18.4458 16.2541 18.629L18.2762 20.8939C18.3955 21.0275 18.6045 21.0275 18.7238 20.8939L20.7459 18.629C20.9096 18.4458 21 18.2087 21 17.963L21 5.5C21 4.11929 19.8807 3 18.5 3Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+)
+
+AutomationPenIcon.displayName = 'AutomationPenIcon'