@mirohq/design-system-icons 0.59.1 → 0.60.0

package/react/monitor-stop.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 IconMonitorStop: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconMonitorStopNew: 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'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M3 6c0-1.1046.8954-2 2-2h14c1.1046 0 2 .8954 2 2v10c0 1.1046-.8954 2-2 2h-14c-1.1046 0-2-.8954-2-2v-10Z'
+      />,
+      <rect width={6} height={6} x={9} y={8} fill='currentColor' rx={1} />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M8 21h8'
+      />
+    )
+  }
+)
+
+export const IconMonitorStopOld: 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,
@@ -41,4 +68,25 @@ export const IconMonitorStop: IconComponentType = forwardRef(
   }
 )
 
+export const IconMonitorStop: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconMonitorStopNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconMonitorStopOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconMonitorStop[iconSymbol] = true

package/react/monitor.tsx

@@ -5,21 +5,42 @@
 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 IconMonitor: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconMonitorNew: 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'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M3 6c0-1.1046.8954-2 2-2h14c1.1046 0 2 .8954 2 2v10c0 1.1046-.8954 2-2 2h-14c-1.1046 0-2-.8954-2-2v-10ZM8 21h8'
+      />
+    )
+  }
+)
+
+export const IconMonitorOld: 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,
@@ -35,4 +56,15 @@ export const IconMonitor: IconComponentType = forwardRef(
   }
 )
 
+export const IconMonitor: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconMonitorNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconMonitorOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconMonitor[iconSymbol] = true

package/react/moon.tsx

@@ -5,21 +5,41 @@
 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 IconMoon: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconMoonNew: 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'
+        d='m21 13.3756.9853.171-1.2197-1.1431.2344.9721Zm-11.066-10.3757.9854.171-1.2197-1.1431.2344.9721Zm10.8316 9.4036a8.0926 8.0926 0 0 1-1.8984.2244v2c.8141 0 1.607-.0968 2.3672-.2801l-.4688-1.9443Zm-1.8984.2244c-4.4553 0-8.067-3.6117-8.067-8.067h-2c0 5.5599 4.5071 10.067 10.067 10.067v-2Zm-8.067-8.067c0-.4747.0409-.939.1192-1.39l-1.9706-.342a10.125 10.125 0 0 0-.1486 1.732h2Zm-6.8002 7.2537c0-3.8003 2.6288-6.9891 6.1685-7.8425l-.4688-1.9443c-4.4172 1.065-7.6997 5.0413-7.6997 9.7868h2Zm8.0669 8.0669c-4.4552 0-8.0669-3.6117-8.0669-8.0669h-2c0 5.5598 4.5071 10.0669 10.0669 10.0669v-2Zm7.9478-6.6768c-.6581 3.7927-3.9671 6.6768-7.9478 6.6768v2c4.9699 0 9.0968-3.6003 9.9184-8.3349l-1.9706-.3419Z'
+      />
+    )
+  }
+)
+
+export const IconMoonOld: 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,
@@ -39,4 +59,15 @@ export const IconMoon: IconComponentType = forwardRef(
   }
 )
 
+export const IconMoon: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconMoonNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconMoonOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconMoon[iconSymbol] = true

package/react/mouse.tsx

@@ -5,21 +5,49 @@
 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 IconMouse: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconMouseNew: 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='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12 8v3m-2-7.5h4c2.2091 0 4.5 1.2909 4.5 3.5l.5 6.5c0 3.866-3.134 7-7 7s-7-3.134-7-7l.5-6.5c0-2.2091 2.2909-3.5 4.5-3.5Z'
+      />,
+      <path fill='currentColor' d='M12 11h.001v.001h-.001v-.001Z' />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12 10v.0001'
+      />
+    )
+  }
+)
+
+export const IconMouseOld: 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 +68,15 @@ export const IconMouse: IconComponentType = forwardRef(
   }
 )
 
+export const IconMouse: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconMouseNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconMouseOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconMouse[iconSymbol] = true

package/react/music-note.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 IconMusicNote: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconMusicNoteNew: 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='m7.0003 6 .8109-.982 10.4861-2.0194 1.1891.982-.0001 10.0195-.0001.008c.4212 1.7307-.6153 3.4899-2.345 3.9534-1.7546.4701-3.5582-.5712-4.0284-2.3259-.4702-1.7546.5711-3.5582 2.3258-4.0284a3.2741 3.2741 0 0 1 2.0477.113l.0001-6.5287-8.4861 1.6343-.0001 9.0901c.4207 1.7305-.6157 3.4893-2.3452 3.9528-1.7547.4701-3.5583-.5712-4.0284-2.3259-.4702-1.7547.5711-3.5582 2.3258-4.0284a3.2744 3.2744 0 0 1 2.0478.113v-7.6274Zm-1.5303 9.4462c-.6877.1843-1.0959.8912-.9116 1.579.1843.6877.8912 1.0959 1.579.9116.6877-.1843 1.0959-.8912.9116-1.579-.1843-.6877-.8912-1.0958-1.579-.9116Zm9.5746-.3282c-.1842-.6877.2239-1.3947.9117-1.579.6877-.1842 1.3946.2239 1.5789.9117.1843.6877-.2238 1.3946-.9116 1.5789-.6877.1843-1.3947-.2238-1.579-.9116Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconMusicNoteOld: 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,
@@ -43,4 +65,25 @@ export const IconMusicNote: IconComponentType = forwardRef(
   }
 )
 
+export const IconMusicNote: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconMusicNoteNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconMusicNoteOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconMusicNote[iconSymbol] = true

package/react/navigation-arrow-lines.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 IconNavigationArrowLines: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconNavigationArrowLinesNew: 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='m6 5.0678-3-1.0678 6.3 18c1.2-5.0847 5.1-10.0678 11.7-11.5932l-2.5-.8899'
+      />,
+      <path
+        fill='currentColor'
+        d='m19 5.2368.8448.535v-1.07l-.8448.535Zm-10.25 0-.8448-.535v1.07l.8448-.535Zm5.125-2.2368c1.1819 0 2.2323.627 3.0457 1.3609.3975.3586.7121.7196.9269.9909.1068.1349.1873.2456.2395.32.0261.0373.045.0652.0564.0824l.0116.0175a.0153.0153 0 0 0 .0015.0024l-.0004-.0005-.0004-.0007-.0003-.0005c-.0001-.0002-.0003-.0005.8445-.5356.8448-.535.8446-.5353.8444-.5356l-.0004-.0007-.001-.0015-.0026-.004a6.1516 6.1516 0 0 0-.1157-.1713 8.9619 8.9619 0 0 0-.309-.4133 10.2375 10.2375 0 0 0-1.1552-1.2344c-.9803-.8845-2.4924-1.876-4.3855-1.876v2Zm0 6.4737c1.8931 0 3.4052-.9915 4.3855-1.876a10.2375 10.2375 0 0 0 1.1552-1.2344 8.9564 8.9564 0 0 0 .309-.4133 6.0936 6.0936 0 0 0 .1157-.1712l.0026-.004.001-.0016.0004-.0007c.0002-.0003.0004-.0006-.8444-.5357-.8448-.535-.8446-.5353-.8445-.5355l.0003-.0005.0004-.0007.0004-.0005a.0168.0168 0 0 0-.0015.0023c-.002.003-.0058.009-.0116.0175a3.743 3.743 0 0 1-.0564.0824 6.9436 6.9436 0 0 1-.2395.3201c-.2148.2713-.5294.6323-.9269.9909-.8134.734-1.8638 1.3609-3.0457 1.3609v2Zm0-8.4737c-1.8931 0-3.4052.9914-4.3855 1.876a10.2428 10.2428 0 0 0-1.1552 1.2344 8.9456 8.9456 0 0 0-.309.4132 6.0985 6.0985 0 0 0-.1157.1713.8732.8732 0 0 0-.0026.004l-.001.0016-.0004.0007c-.0002.0003-.0004.0006.8444.5356.8448.535.8446.5354.8445.5356l-.0003.0005-.0004.0007a.008.008 0 0 0-.0004.0005l.0015-.0023c.002-.003.0058-.009.0116-.0176a4.0736 4.0736 0 0 1 .0564-.0823 6.9394 6.9394 0 0 1 .2395-.3201c.2148-.2713.5294-.6323.9269-.991.8134-.7338 1.8638-1.3608 3.0457-1.3608v-2Zm0 6.4737c-1.1819 0-2.2323-.627-3.0457-1.3609-.3975-.3586-.7121-.7196-.9269-.9909a6.9504 6.9504 0 0 1-.2395-.32 4.067 4.067 0 0 1-.0691-.1018l.0004.0007.0003.0005c.0001.0002.0003.0005-.8445.5355s-.8446.5354-.8444.5357l.0004.0007.001.0015a.8732.8732 0 0 0 .01.0156l.024.0366c.0202.0302.0483.0718.0843.1231.072.1026.1756.2447.309.4133.2657.3356.6557.7838 1.1552 1.2344.9803.8845 2.4924 1.876 4.3855 1.876v-2Z'
+      />,
+      <ellipse
+        cx={13.875}
+        cy={5.237}
+        fill='currentColor'
+        rx={1.165}
+        ry={1.156}
+      />
+    )
+  }
+)
+
+export const IconNavigationArrowLinesOld: 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,
@@ -44,4 +77,25 @@ export const IconNavigationArrowLines: IconComponentType = forwardRef(
   }
 )
 
+export const IconNavigationArrowLines: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconNavigationArrowLinesNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconNavigationArrowLinesOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconNavigationArrowLines[iconSymbol] = true

package/react/navigation-up-left-slash.tsx

@@ -5,21 +5,49 @@
 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 IconNavigationUpLeftSlash: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconNavigationUpLeftSlashNew: 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='m2 3.1782.0617.1675 2.9477 8 1.8766-.6914-2.1928-5.9513 5.9557 2.2333.7022-1.8726-8-3-.1697-.0637h-.1814l-1 1v.1782Zm20.0014 5.7573-5.6557-2.0839-.6914 1.8767 2.4109.8883c-3.9883 1.2841-7.1645 4.4602-8.4486 8.4486l-.5199-1.4109-1.8766.6914 1.7149 4.6544h2.0533l.0116-.0021c0-6.0212 4.9769-10.998 10.9982-10.998l.0033-.0186v-2.0459Z'
+        clipRule='evenodd'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m3 19 15-17'
+      />
+    )
+  }
+)
+
+export const IconNavigationUpLeftSlashOld: 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 +68,25 @@ export const IconNavigationUpLeftSlash: IconComponentType = forwardRef(
   }
 )
 
+export const IconNavigationUpLeftSlash: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconNavigationUpLeftSlashNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconNavigationUpLeftSlashOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconNavigationUpLeftSlash[iconSymbol] = true

package/react/navigation-up-right.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 IconNavigationUpRight: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconNavigationUpRightNew: 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='m22.0014 3.1782-.0617.1675-6.8732 18.6544h-2.0534l-.0116-.0021c0-6.0212-4.9768-10.998-10.9982-10.998l-.0033-.0186v-2.0459l18.6556-6.8738.1674-.0617h.1784l1 1v.1782Zm-7.6165 14.887 4.929-13.3777-13.3777 4.9291c3.9884 1.2841 7.1645 4.4602 8.4487 8.4486Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconNavigationUpRightOld: 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 IconNavigationUpRight: IconComponentType = forwardRef(
   }
 )
 
+export const IconNavigationUpRight: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconNavigationUpRightNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconNavigationUpRightOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconNavigationUpRight[iconSymbol] = true

package/react/next.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 IconNext: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconNextNew: 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='M19 4v16'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m5 7.4142 1.155-1.155 8.845 5.307v.8676l-8.845 5.307-1.155-1.155v-9.1716Z'
+      />
+    )
+  }
+)
+
+export const IconNextOld: 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,
@@ -39,4 +66,15 @@ export const IconNext: IconComponentType = forwardRef(
   }
 )
 
+export const IconNext: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconNextNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconNextOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconNext[iconSymbol] = true