@moises.ai/design-system 4.19.3 → 4.19.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.19.3",
+  "version": "4.19.4",
   "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: #ACB4BF;
+  --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.75);
+  --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/EmptyState/EmptyState.jsx

@@ -22,9 +22,9 @@ export const EmptyState = ({
 }) => {
   const hasButtonContent = children != null || buttonLabel != null
   return (
-    <Theme asChild>
+    <Theme asChild hasBackground={false}>
       <Flex
-        className={classNames(className)}
+        className={classNames(styles.root, className)}
         direction="column"
         align="center"
         justify="center"

package/src/components/EmptyState/EmptyState.module.css

@@ -1,10 +1,11 @@
+.root {
+  background: transparent;
+}
 
 .content {
-
   max-width: 480px;
   min-width: 320px;
   width: 100%;
-
 }
 
 .iconWrapper {

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'