@mirohq/design-system-icons 0.59.1 → 0.60.1

package/react/comment-group.tsx

@@ -5,21 +5,47 @@
 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 IconCommentGroup: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCommentGroupNew: 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='M10 15h-1l1 1v-1Zm5 0v-1h-5v2h5v-1Zm-4 0c0-.6681.1804-.9835.3594-1.1773.2197-.2377.5409-.4096 1.0474-.6351.4351-.1938 1.1114-.4638 1.6294-.9203.598-.5271.9638-1.2611.9638-2.2673h-2c0 .4526-.1342.6329-.2862.7668-.232.2045-.5557.3422-1.1206.5937-.4935.2198-1.1723.5309-1.7027 1.1049-.5709.6178-.8905 1.4428-.8905 2.5346h2Zm4-5c0-.9706-.3392-1.787-.9218-2.3632-.5718-.5655-1.3258-.8472-2.0683-.8545-.7432-.0074-1.5059.2603-2.0857.8299-.5899.5795-.9242 1.4052-.9242 2.3878h2c0-.5157.1657-.8038.3258-.961.1702-.1673.4075-.2593.6643-.2568.2575.0025.5035.1004.6817.2766.1674.1656.3282.453.3282.9412h2Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M4 22v-17.5a.5.5 0 0 1 .5-.5h15.5v15h-12.3077l-3.6923 3Z'
+      />
+    )
+  }
+)
+
+export const IconCommentGroupOld: 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,
@@ -32,7 +58,28 @@ export const IconCommentGroup: IconComponentType = forwardRef(
       />,
       <path
         fill='currentColor'
-        d='M14.2595 16.4946h1v-2h-1v2Zm-4.5188-1h-1v1h1v-1Zm4.5188 0-.0001-1h-4.5187v2h4.5187l.0001-1Zm-3.5188 0c0-.6321.1895-.9693.4237-1.2107.2798-.2883.6841-.5046 1.2586-.7727.5063-.2363 1.2267-.5437 1.7792-1.0148.6263-.534 1.0573-1.2815 1.0573-2.3291h-2c0 .411-.1339.6188-.3549.8072-.2948.2514-.704.4334-1.3274.7243-.5552.2591-1.2806.6076-1.848 1.1923-.613.6316-.9885 1.4757-.9885 2.6035h2Zm4.5188-5.3273c0-1.0114-.4022-1.8398-1.0474-2.4046-.6259-.548-1.4304-.8064-2.2032-.8131-.773-.0068-1.5849.2378-2.2183.7886-.6535.5683-1.0499 1.406-1.0499 2.4291h2c0-.4753.1685-.7514.3623-.9199.2138-.186.5316-.301.8883-.298.3569.0032.6821.1243.9034.318.202.177.3648.4525.3648.8999h2Z'
+        d='M14.2595 16.4946h1v-2h-1v2Zm-4.5188-1h-1v1h1v-1Zm4.5188 0-.0001-1h-4.5187v2h4.5187l.0001-1Zm-3.5188 0c0-.6321.1895-.9693.4237-1.2107.2798-.2883.6841-.5047 1.2586-.7727.5063-.2363 1.2267-.5437 1.7792-1.0148.6263-.534 1.0573-1.2815 1.0573-2.3291h-2c0 .411-.1339.6188-.3549.8072-.2948.2513-.704.4334-1.3274.7243-.5552.2591-1.2806.6076-1.848 1.1923-.613.6316-.9885 1.4757-.9885 2.6035h2Zm4.5188-5.3273c0-1.0114-.4022-1.8398-1.0474-2.4046-.6259-.548-1.4304-.8064-2.2032-.8132-.773-.0067-1.5849.238-2.2183.7887-.6535.5683-1.0499 1.406-1.0499 2.4291h2c0-.4753.1685-.7514.3623-.9199.2138-.186.5316-.301.8883-.298.3569.0032.6821.1243.9034.318.202.177.3648.4525.3648.8999h2Z'
+      />
+    )
+  }
+)
+
+export const IconCommentGroup: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCommentGroupNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconCommentGroupOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
       />
     )
   }

package/react/cone-serpentine.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 IconConeSerpentine: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconConeSerpentineNew: 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='M14.9968 2.4984c0 .8276-.6709 1.4984-1.4984 1.4984-.8276 0-1.4985-.6708-1.4985-1.4984 0-.8275.6709-1.4984 1.4985-1.4984.8275 0 1.4984.6709 1.4984 1.4984Zm8.2134-.8184-.3394.9407-1.0039 2.7822-1.2569.6093-2.1626-.7209-.5453 1.1402-.4315.9021-1.8043-.863.4315-.9021.9263-1.9365 1.2183-.5172 2.0744.6914.6727-1.8644.3394-.9406 1.8813.6788Zm-4.2105 7.32h5v2h-5v-2Zm-9.9997-3 .0135-1-.942.6286-6 15 1.2999 1.2999 15-6 .6285-.9406-.9999.0121c.9999-.0121.9999-.0126.9999-.0131v-.0033l-.0001-.0055-.0004-.0143-.0005-.0167-.001-.0251a4.0803 4.0803 0 0 0-.0081-.1345 6.4565 6.4565 0 0 0-.0528-.4572c-.0573-.382-.167-.9121-.3772-1.5387-.4213-1.2562-1.2453-2.8956-2.8486-4.4988-1.6032-1.6031-3.2434-2.428-4.5003-2.8504-.627-.2107-1.1574-.3209-1.5396-.3786a6.3991 6.3991 0 0 0-.4574-.0533 4.1462 4.1462 0 0 0-.1764-.0099l-.0143-.0003-.0054-.0002h-.0033c-.0006 0-.001 0-.0145.9999Zm-4.205 13.2049 9.9774-3.9909c-1.0404-.4868-2.239-1.2662-3.4798-2.507-1.2405-1.2406-2.0198-2.4391-2.5066-3.4794l-3.991 9.9773Zm11.8687-5.7773c.0478.1426.0889.2782.1241.4056a6.5168 6.5168 0 0 1-.2815-.0824c-.9486-.301-2.3092-.9677-3.7994-2.4579-1.4902-1.4903-2.1568-2.8509-2.4578-3.7994a6.5224 6.5224 0 0 1-.082-.28c.1278.0354.2637.0767.4068.1248 1.0054.3378 2.3672 1.0129 3.7231 2.3688 1.3559 1.3558 2.0299 2.7164 2.3667 3.7205Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconConeSerpentineOld: 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,
@@ -42,4 +64,25 @@ export const IconConeSerpentine: IconComponentType = forwardRef(
   }
 )
 
+export const IconConeSerpentine: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconConeSerpentineNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconConeSerpentineOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconConeSerpentine[iconSymbol] = true

package/react/connection-line-elbows.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 IconConnectionLineElbows: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconConnectionLineElbowsNew: 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='M3 20h4c1.1046 0 2-.8954 2-2v-9c0-1.1046.8954-2 2-2h4m0 0v3l6-3-6-3v3Z'
+      />
+    )
+  }
+)
+
+export const IconConnectionLineElbowsOld: 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 +63,25 @@ export const IconConnectionLineElbows: IconComponentType = forwardRef(
   }
 )
 
+export const IconConnectionLineElbows: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconConnectionLineElbowsNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconConnectionLineElbowsOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconConnectionLineElbows[iconSymbol] = true

package/react/connection-line-straight.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 IconConnectionLineStraight: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconConnectionLineStraightNew: 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='m14.5 9.5-11.5 11.5m18-18-3 10-7-7 10-3Z'
+      />
+    )
+  }
+)
+
+export const IconConnectionLineStraightOld: 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,
@@ -33,7 +55,7 @@ export const IconConnectionLineStraight: IconComponentType = forwardRef(
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
-        d='m15.1214 8.6568-2.1213-2.1213 6.6568-2.4142-2.4142 6.6569-2.1213-2.1214Zm0 0-11.1213 11.3432'
+        d='m15.1213 8.6568-2.1213-2.1213 6.6569-2.4142-2.4143 6.6569-2.1213-2.1214Zm0 0-11.1213 11.3432'
       />,
       <path
         stroke='currentColor'
@@ -44,4 +66,25 @@ export const IconConnectionLineStraight: IconComponentType = forwardRef(
   }
 )
 
+export const IconConnectionLineStraight: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconConnectionLineStraightNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconConnectionLineStraightOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconConnectionLineStraight[iconSymbol] = true

package/react/corners-three-eye-open.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 IconCornersThreeEyeOpen: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCornersThreeEyeOpenNew: 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='M8 4h-4v5m16 6v5h-5m-6 0h-5v-5'
+      />,
+      <path
+        fill='currentColor'
+        d='m21 7.5.8466.5322v-1.0644l-.8466.5322Zm-11 0-.8466-.5322v1.0644l.8466-.5322Zm5.5-2.5c1.2918 0 2.435.6901 3.3148 1.49.4304.3912.7711.785 1.0036 1.081.1156.1472.203.2682.2598.3498.0284.0408.049.0716.0617.0907l.0129.0198.0018.0029-.0002-.0004-.0004-.0007-.0003-.0004c-.0002-.0003-.0003-.0005.8463-.5327s.8465-.5325.8463-.5328l-.0005-.0007-.001-.0016-.0026-.0041a1.0903 1.0903 0 0 1-.0078-.0122l-.0253-.0388a6.2297 6.2297 0 0 0-.0893-.1314 9.6277 9.6277 0 0 0-.3288-.4431c-.2831-.3603-.6987-.8415-1.2308-1.3252-1.0452-.9502-2.652-2.0101-4.6602-2.0101v2Zm0 7c2.0082 0 3.615-1.0599 4.6602-2.01.5321-.4838.9477-.965 1.2308-1.3253a9.6277 9.6277 0 0 0 .3288-.4431 6.2297 6.2297 0 0 0 .0893-.1315c.0106-.016.019-.029.0253-.0388a1.0903 1.0903 0 0 1 .0078-.012l.0026-.0042.001-.0016.0005-.0007c.0002-.0003.0003-.0006-.8463-.5328s-.8465-.5324-.8463-.5327l.0003-.0004.0004-.0007.0002-.0004-.0018.003-.0129.0197a4.6782 4.6782 0 0 1-.0617.0907 7.6225 7.6225 0 0 1-.2598.3498c-.2325.296-.5732.6898-1.0036 1.081-.8798.7999-2.023 1.49-3.3148 1.49v2Zm0-9c-2.0082 0-3.615 1.0599-4.6602 2.01-.5321.4838-.9477.965-1.2308 1.3253a9.5935 9.5935 0 0 0-.3288.4431 6.5326 6.5326 0 0 0-.1146.1702l-.0078.0122-.0026.0041-.001.0016-.0005.0007c-.0002.0003-.0003.0006.8463.5328s.8465.5324.8463.5327l-.0003.0004-.0004.0007-.0002.0004.0018-.003.0129-.0197c.0127-.0191.0333-.05.0617-.0907a7.6225 7.6225 0 0 1 .2598-.3498c.2325-.296.5732-.6898 1.0036-1.081.8798-.7999 2.023-1.49 3.3148-1.49v-2Zm0 7c-1.2918 0-2.435-.6901-3.3148-1.49-.4304-.3912-.7711-.785-1.0036-1.081a7.6225 7.6225 0 0 1-.2598-.3498 4.6782 4.6782 0 0 1-.0617-.0907l-.0129-.0198-.0018-.0029.0002.0004.0004.0007.0003.0004c.0002.0003.0003.0005-.8463.5327s-.8465.5325-.8463.5328l.0005.0007.001.0016.0026.0041.0078.0122a6.5326 6.5326 0 0 0 .1146.1703c.0764.1097.1867.262.3288.443.2831.3603.6987.8415 1.2308 1.3252 1.0452.9502 2.652 2.0101 4.6602 2.0101v-2Z'
+      />,
+      <circle cx={15.5} cy={7.5} r={1.5} fill='currentColor' />
+    )
+  }
+)
+
+export const IconCornersThreeEyeOpenOld: 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 IconCornersThreeEyeOpen: IconComponentType = forwardRef(
   }
 )
 
+export const IconCornersThreeEyeOpen: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCornersThreeEyeOpenNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconCornersThreeEyeOpenOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconCornersThreeEyeOpen[iconSymbol] = true

package/react/counter.tsx

@@ -5,21 +5,61 @@
 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 IconCounter: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCounterNew: 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='M2 6c0-1.1046.8954-2 2-2h16c1.1046 0 2 .8954 2 2v12c0 1.1046-.8954 2-2 2h-16c-1.1046 0-2-.8954-2-2v-12Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M14 12h6M5 12h4'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12 20v-16'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M17 15v-6'
+      />
+    )
+  }
+)
+
+export const IconCounterOld: 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 +84,15 @@ export const IconCounter: IconComponentType = forwardRef(
   }
 )
 
+export const IconCounter: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCounterNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconCounterOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconCounter[iconSymbol] = true

package/react/credit-card.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 IconCreditCard: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCreditCardNew: 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 7c0-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-10ZM3 9h18M6 13h4M12 13h2'
+      />
+    )
+  }
+)
+
+export const IconCreditCardOld: 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 +60,25 @@ export const IconCreditCard: IconComponentType = forwardRef(
   }
 )
 
+export const IconCreditCard: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCreditCardNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconCreditCardOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconCreditCard[iconSymbol] = true

package/react/crop.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 IconCrop: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCropNew: 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 2v15c0 .5523.4477 1 1 1h11m4 0h-4m-9-12h8c.5523 0 1 .4477 1 1v8m-16-9h4m12 16v-4'
+      />
+    )
+  }
+)
+
+export const IconCropOld: 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 +61,15 @@ export const IconCrop: IconComponentType = forwardRef(
   }
 )
 
+export const IconCrop: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCropNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconCropOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconCrop[iconSymbol] = true