@mirohq/design-system-icons 0.59.1 → 0.60.1

package/react/arrows-horizontal-lines-top-bottom.tsx

@@ -5,21 +5,48 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconArrowsHorizontalLinesTopBottom: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconArrowsHorizontalLinesTopBottomNew: IconComponentType =
+  forwardRef((props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M4 3h8m8 0h-8m0 0v5m-8 13h8m8 0h-8m0 0v-5m-2-4h-8m12 0h8'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m6 8-4 4 4 4m12-8 4 4-4 4'
+      />
+    )
+  })
+
+export const IconArrowsHorizontalLinesTopBottomOld: IconComponentType =
+  forwardRef((props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -37,6 +64,26 @@ export const IconArrowsHorizontalLinesTopBottom: IconComponentType = forwardRef(
         d='M10 12v.0001'
       />
     )
+  })
+
+export const IconArrowsHorizontalLinesTopBottom: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconArrowsHorizontalLinesTopBottomNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconArrowsHorizontalLinesTopBottomOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
   }
 )
 

package/react/arrows-in-simple.tsx

@@ -25,15 +25,29 @@ export const IconArrowsInSimpleNew: IconComponentType = forwardRef(
       },
       <path
         stroke='currentColor'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        strokeLinecap='square'
         strokeWidth='var(--svg-stroke-width)'
-        d='m21 3-7 7m0 0v-5m0 5h5m-16 11 7-7m0 0v5m0-5h-5'
+        d='m3 21 6-6'
       />,
       <path
         stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='bevel'
         strokeWidth='var(--svg-stroke-width)'
-        d='M16 8v.0001'
+        d='M5 14h5v5'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m20.9999 3-5.9999 6'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M18.9999 10.0001h-5.0001v-5.0001'
       />
     )
   }

package/react/arrows-out-cardinal.tsx

@@ -5,21 +5,44 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconArrowsOutCardinal: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconArrowsOutCardinalNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m15 19-3 3-3-3m6-14-3-3-3 3m10 4 3 3-3 3m-14-6-3 3 3 3M12 3v18m-9-9h18'
+      />
+    )
+  }
+)
+
+export const IconArrowsOutCardinalOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -40,4 +63,25 @@ export const IconArrowsOutCardinal: IconComponentType = forwardRef(
   }
 )
 
+export const IconArrowsOutCardinal: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconArrowsOutCardinalNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconArrowsOutCardinalOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconArrowsOutCardinal[iconSymbol] = true

package/react/arrows-out-lines-horizontal.tsx

@@ -5,21 +5,43 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconArrowsOutLinesHorizontal: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconArrowsOutLinesHorizontalNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M2 6v12m20-12v12m-14-9-3 3 3 3m8-6 3 3-3 3M2 6v12m20-12v12m-3-6h-14'
+      />
+    )
+  }
+)
+
+export const IconArrowsOutLinesHorizontalOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -40,4 +62,25 @@ export const IconArrowsOutLinesHorizontal: IconComponentType = forwardRef(
   }
 )
 
+export const IconArrowsOutLinesHorizontal: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconArrowsOutLinesHorizontalNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconArrowsOutLinesHorizontalOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconArrowsOutLinesHorizontal[iconSymbol] = true

package/react/arrows-out-simple.tsx

@@ -5,21 +5,54 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconArrowsOutSimple: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconArrowsOutSimpleNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M15 3h6v6'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m14 10 7-7M10 14l-7 7'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M9 21h-6v-6'
+      />
+    )
+  }
+)
+
+export const IconArrowsOutSimpleOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -40,4 +73,25 @@ export const IconArrowsOutSimple: IconComponentType = forwardRef(
   }
 )
 
+export const IconArrowsOutSimple: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconArrowsOutSimpleNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconArrowsOutSimpleOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconArrowsOutSimple[iconSymbol] = true

package/react/arrows-square-counter-clockwise-y.tsx

@@ -5,21 +5,54 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconArrowsSquareCounterClockwiseY: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconArrowsSquareCounterClockwiseYNew: IconComponentType =
+  forwardRef((props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m11 16-4 4-4-4'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M7 19.5v-15.5h6M14 8l4-4 4 4'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M18 4.5v15.5h-5'
+      />
+    )
+  })
+
+export const IconArrowsSquareCounterClockwiseYOld: IconComponentType =
+  forwardRef((props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 26 29',
         fill: 'none',
         ref: forwardRef,
@@ -28,7 +61,7 @@ export const IconArrowsSquareCounterClockwiseY: IconComponentType = forwardRef(
         stroke='currentColor'
         strokeLinecap='round'
         strokeWidth='var(--svg-stroke-width)'
-        d='M13.7633 22.9583h4.7642c.2923 0 .5293-.2705.5293-.6041v-16.3125m0 0-3.7055 4.2291m3.7055-4.2291 3.7055 4.2291m-11.1165-4.2291h-4.7642c-.2923 0-.5293.2705-.5293.6041v16.3125m0 0 3.7055-4.2291m-3.7056 4.2291-3.7054-4.2291'
+        d='M13.7633 22.9583h4.7642c.2924 0 .5294-.2705.5294-.6041v-16.3125m0 0-3.7055 4.2291m3.7055-4.2291 3.7055 4.2291m-11.1165-4.2291h-4.7643c-.2923 0-.5293.2705-.5293.6041v16.3125m0 0 3.7055-4.2291m-3.7055 4.2291-3.7055-4.2291'
       />,
       <path
         stroke='currentColor'
@@ -36,6 +69,26 @@ export const IconArrowsSquareCounterClockwiseY: IconComponentType = forwardRef(
         d='M6.3523 14.5v.0001'
       />
     )
+  })
+
+export const IconArrowsSquareCounterClockwiseY: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconArrowsSquareCounterClockwiseYNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconArrowsSquareCounterClockwiseYOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
   }
 )
 

package/react/arrows-time-backward.tsx

@@ -5,37 +5,91 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconArrowsTimeBackward: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconArrowsTimeBackwardNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m7.6316 12-3.3158 3.375-3.3158-3.375'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M13.1579 21c4.8834 0 8.8421-4.0294 8.8421-9s-3.9587-9-8.8421-9-8.8421 4.0294-8.8421 9v3.375'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m9 11 2-1.5v6.5M14 15.2v-5.4h3v5.4h-3Z'
+      />
+    )
+  }
+)
+
+export const IconArrowsTimeBackwardOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
       },
       <path
         fill='currentColor'
-        d='M12.472 8.9v5.6h-1.208v-3.992c-.104.152-.488.224-.728.224h-.4v-1.032h.376c.472 0 .744-.184.824-.8h1.136ZM15.424 14.564c-1.4 0-2.08-.976-2.08-2.688v-.36c0-1.712.68-2.68 2.08-2.68h.328c1.416 0 2.088.976 2.088 2.68v.36c0 1.712-.672 2.688-2.088 2.688h-.328Zm-.872-2.328c0 .864.4 1.288.936 1.288h.216c.536 0 .928-.424.928-1.288v-1.08c0-.864-.392-1.288-.928-1.288h-.216c-.536 0-.936.424-.936 1.288v1.08Z'
+        d='M12.472 8.9002v5.6h-1.208v-3.992c-.104.152-.488.224-.728.224h-.4v-1.032h.376c.472 0 .744-.184.824-.8h1.136ZM15.424 14.5642c-1.4 0-2.08-.976-2.08-2.688v-.36c0-1.712.68-2.68 2.08-2.68h.328c1.416 0 2.088.976 2.088 2.68v.36c0 1.712-.672 2.688-2.088 2.688h-.328Zm-.872-2.328c0 .864.4 1.288.936 1.288h.216c.536 0 .928-.424.928-1.288v-1.08c0-.864-.392-1.288-.928-1.288h-.216c-.536 0-.936.424-.936 1.288v1.08Z'
       />,
       <path
         fill='currentColor'
         fillRule='evenodd'
-        d='M19.7744 10.2391c-.9736-3.7414-4.7958-5.9851-8.5372-5.0116-3.3416.8696-5.4885 4.0115-5.2156 7.3386l1.2713-1.2713c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3906.3905 1.0237 0 1.4143l-2.7172 2.7171c-.5467.5467-1.4331.5467-1.9798 0l-2.7172-2.7171c-.3905-.3906-.3905-1.0237 0-1.4143.3905-.3905 1.0237-.3905 1.4142 0l1.3116 1.3116c-.2896-4.2327 2.459-8.207 6.7148-9.3144 4.8104-1.2517 9.7247 1.633 10.9764 6.4434 1.2518 4.8104-1.633 9.7247-6.4434 10.9765a9.0139 9.0139 0 0 1-2.2482.292c-.5523.0014-1.0012-.4451-1.0026-.9974-.0015-.5523.445-1.0012.9973-1.0026a7.0152 7.0152 0 0 0 1.7498-.2276c3.7414-.9735 5.9852-4.7958 5.0116-8.5372Z'
+        d='M19.7744 10.2394c-.9736-3.7414-4.7958-5.9852-8.5372-5.0116-3.3416.8695-5.4885 4.0114-5.2156 7.3386l1.2713-1.2713c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142l-2.7172 2.7172c-.5467.5467-1.4331.5467-1.9798 0l-2.7172-2.7172c-.3905-.3905-.3905-1.0237 0-1.4142.3905-.3905 1.0237-.3905 1.4142 0l1.3116 1.3116c-.2896-4.2328 2.459-8.207 6.7148-9.3144 4.8104-1.2518 9.7247 1.633 10.9764 6.4434 1.2518 4.8104-1.633 9.7247-6.4434 10.9764a9.0139 9.0139 0 0 1-2.2482.292c-.5523.0015-1.0012-.445-1.0026-.9973-.0015-.5523.445-1.0012.9973-1.0027a7.015 7.015 0 0 0 1.7498-.2275c3.7414-.9736 5.9852-4.7958 5.0116-8.5372Z'
         clipRule='evenodd'
       />
     )
   }
 )
 
+export const IconArrowsTimeBackward: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconArrowsTimeBackwardNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconArrowsTimeBackwardOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconArrowsTimeBackward[iconSymbol] = true

package/react/arrows-time-forward.tsx

@@ -5,21 +5,54 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconArrowsTimeForward: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconArrowsTimeForwardNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m16.3684 12 3.3158 3.375 3.3158-3.375'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M10.8421 21c-4.8834 0-8.8421-4.0294-8.8421-9s3.9587-9 8.8421-9 8.8421 4.0294 8.8421 9v3.375'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m5.5 11 2.5-1.5v6.5M11 15.2v-5.4h3v5.4h-3Z'
+      />
+    )
+  }
+)
+
+export const IconArrowsTimeForwardOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -38,4 +71,25 @@ export const IconArrowsTimeForward: IconComponentType = forwardRef(
   }
 )
 
+export const IconArrowsTimeForward: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconArrowsTimeForwardNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconArrowsTimeForwardOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconArrowsTimeForward[iconSymbol] = true

package/react/article.tsx

@@ -5,21 +5,43 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconArticle: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconArticleNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M5 5c0-.5523.4477-1 1-1h9.5858l3.4142 3.4142v11.5858c0 .5523-.4477 1-1 1h-12c-.5523 0-1-.4477-1-1v-14Zm1-3c-1.6569 0-3 1.3432-3 3v14c0 1.6569 1.3431 3 3 3h12c1.6569 0 3-1.3431 3-3v-12.4142l-.2929-.293-4-4-.2929-.2928h-10.4142Zm1 7h7v-2h-7v2Zm0 4h10v-2h-10v2Zm0 4h10v-2h-10v2Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconArticleOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -34,4 +56,15 @@ export const IconArticle: IconComponentType = forwardRef(
   }
 )
 
+export const IconArticle: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconArticleNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconArticleOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconArticle[iconSymbol] = true