@mirohq/design-system-icons 0.59.1 → 0.60.0

package/react/at.tsx

@@ -5,37 +5,64 @@
 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 IconAtNew: 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='M12 3v1h.002l-.002-1Zm0 18 .0654-.9979a1.0202 1.0202 0 0 0-.0654-.0021v1Zm0-19c-5.5229 0-10 4.4771-10 10h2c0-4.4183 3.5817-8 8-8v-2Zm-10 10c0 5.5228 4.4771 10 10 10v-2c-4.4183 0-8-3.5817-8-8h-2Zm20 0c0-4.4-3.3073-10.0134-10.002-10l.004 2c5.3053-.0106 7.998 4.3997 7.998 8h2Zm-2 0v1.5h2v-1.5h-2Zm-5 0c0 1.6569-1.3431 3-3 3v2c2.7614 0 5-2.2386 5-5h-2Zm-3 3c-1.6569 0-3-1.3431-3-3h-2c0 2.7614 2.2386 5 5 5v-2Zm-3-3c0-1.6569 1.3431-3 3-3v-2c-2.7614 0-5 2.2386-5 5h2Zm3-3c1.6569 0 3 1.3431 3 3h2c0-2.7614-2.2386-5-5-5v2Zm8 4.5c0 .8285-.6716 1.5-1.5 1.5v2c1.933 0 3.5-1.567 3.5-3.5h-2Zm-1.5 1.5c-.8284 0-1.5-.6715-1.5-1.5h-2c0 1.933 1.567 3.5 3.5 3.5v-2Zm-1.5-1.5v-1.5h-2v1.5h2Zm-5 7.5c-.0654.9979-.0652.9979-.0649.9979h.0006a.0053.0053 0 0 0 .0013.0001l.0034.0002a.4084.4084 0 0 0 .0096.0006l.03.0016c.0248.0012.059.0027.1018.004.0856.0026.206.0048.355.0033a11.1565 11.1565 0 0 0 1.1946-.0773c.9498-.1125 2.2296-.3876 3.3794-1.0707l-1.0216-1.7194c-.8134.4832-1.7837.7081-2.5931.804a9.1635 9.1635 0 0 1-.9789.0635 6.6775 6.6775 0 0 1-.3393-.005l-.0132-.0007-.0014-.0001h.0006l.0007.0001h.0004c.0002 0 .0004 0-.065.9979Z'
+    />
+  )
+})
+
+export const IconAtOld: 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'
+      strokeLinejoin='round'
+      strokeWidth='var(--svg-stroke-width)'
+      d='M16 12c0 2.2091-1.7909 4-4 4-2.2091 0-4-1.7909-4-4 0-2.2091 1.7909-4 4-4 2.2091 0 4 1.7909 4 4Zm0 0v1.5c0 1.3808 1.1193 2.5 2.5 2.5s2.5-1.1192 2.5-2.5v-1.5c0-4.0002-3-9-9-8.988-4.9706 0-9 4.0295-9 9 0 4.9706 4.0294 9 9 9 0 0 2.5367 0 4.5-1.1663'
+    />,
+    <path
+      stroke='currentColor'
+      strokeWidth='var(--svg-stroke-width)'
+      d='M16 12v.0001'
+    />
+  )
+})
+
 export const IconAt: IconComponentType = forwardRef(
   ({ size = 'medium', weight = 'normal', ...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
-        stroke='currentColor'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='var(--svg-stroke-width)'
-        d='M16 12c0 2.2091-1.7909 4-4 4-2.2091 0-4-1.7909-4-4 0-2.2091 1.7909-4 4-4 2.2091 0 4 1.7909 4 4Zm0 0v1.5c0 1.3808 1.1193 2.5 2.5 2.5s2.5-1.1192 2.5-2.5v-1.5c0-4.0002-3-9-9-8.988-4.9706 0-9 4.0295-9 9 0 4.9706 4.0294 9 9 9 0 0 2.5367 0 4.5-1.1663'
-      />,
-      <path
-        stroke='currentColor'
-        strokeWidth='var(--svg-stroke-width)'
-        d='M16 12v.0001'
-      />
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconAtNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconAtOld {...props} size={size} weight={weight} ref={forwardRef} />
     )
   }
 )

package/react/attachment.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 IconAttachment: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconAttachmentNew: 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='M13.7955 3.0302a3.625 3.625 0 0 1 5.1255 5.1268 1.0487 1.0487 0 0 1-.0222.022l-8.8026 8.4718-1.4145-1.4144 8.8176-8.4863a1.6251 1.6251 0 0 0-2.3038-2.2916l-9.1936 9.1664a3.5002 3.5002 0 0 0 2.4838 5.9514 3.5001 3.5001 0 0 0 2.4664-1.0026l6.9018-6.8916 1.4142 1.4142-6.9108 6.9007a5.5004 5.5004 0 0 1-7.7464-.0316 5.5 5.5 0 0 1-.0315-7.7464l.0067-.0068 9.2094-9.182Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconAttachmentOld: 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,25 @@ export const IconAttachment: IconComponentType = forwardRef(
   }
 )
 
+export const IconAttachment: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconAttachmentNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconAttachmentOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconAttachment[iconSymbol] = true

package/react/badge.tsx

@@ -30,11 +30,6 @@ export const IconBadge: IconComponentType = forwardRef(
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M8 17c-6 0-6-9 0-9h8c6 0 6 9 0 9h-8Z'
-      />,
-      <path
-        stroke='currentColor'
-        strokeWidth='var(--svg-stroke-width)'
-        d='M20 12v.0001'
       />
     )
   }

package/react/bell-slash.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 IconBellSlash: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconBellSlashNew: 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='m2 21 17-19'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M9 18h13'
+      />,
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M4.943 8.3574c.3746-3.6125 3.419-6.3574 7.0508-6.3574 2.0868 0 3.9791.9061 5.2828 2.3617l-1.2766.6383v.9505c-.9358-1.1931-2.3897-1.9505-4.0062-1.9505-2.6072 0-4.7926 1.9705-5.0616 4.5637l-.9375 9.0395-1.9893-.2064.9375-9.0394Zm12.022-.3574c.0414.1901.0724.3844.0922.5823l.2017 2.0167v.0005l.746 7.4995 1.9902-.198-.7461-7.5v-.0005l-.2017-2.0172a7.1802 7.1802 0 0 0-.0488-.3833h-2.0335Zm-2.965 12h-4v1l1 1h2l1-1v-1Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconBellSlashOld: 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 +74,25 @@ export const IconBellSlash: IconComponentType = forwardRef(
   }
 )
 
+export const IconBellSlash: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconBellSlashNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconBellSlashOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconBellSlash[iconSymbol] = true

package/react/bell-tilt.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 IconBellTilt: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconBellTiltNew: 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='M20.0717 3.9275c2.571 2.5711 2.7756 6.6721.4731 9.4862l-5.4901 6.7101 1.4842 1.4842-1.4142 1.4142-2.1241-2.1241-9.8995-9.8995-2.1213-2.1213 1.4142-1.4142 1.4814 1.4814 6.7101-5.49c2.8141-2.3026 6.9151-2.098 9.4862.473Zm-8.2197 1.0748-6.5553 5.3634 8.3368 8.3368 5.3634-6.5552c1.6518-2.0189 1.5051-4.961-.3394-6.8055-1.8446-1.8446-4.7866-1.9913-6.8055-.3395Zm-3.0913 13.0701-2.8284-2.8284-.7071.7071v1.4142l1.4142 1.4142h1.4142l.7071-.7071Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconBellTiltOld: 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,4 +55,25 @@ export const IconBellTilt: IconComponentType = forwardRef(
   }
 )
 
+export const IconBellTilt: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconBellTiltNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconBellTiltOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconBellTilt[iconSymbol] = true

package/react/bell.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 IconBell: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconBellNew: 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='M12.0039 2c-3.636 0-6.6805 2.7552-7.0423 6.3732l-.8627 8.6268h-2.0989v2h20.0039v-2h-2.095l-.8627-8.6268c-.3618-3.618-3.4063-6.3732-7.0423-6.3732Zm5.0522 6.5722.8428 8.4278h-11.79l.8428-8.4278c.2595-2.5956 2.4437-4.5722 5.0522-4.5722s4.7927 1.9766 5.0522 4.5722Zm-7.0561 11.4278h4v1l-1 1h-2l-1-1v-1Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconBellOld: 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,4 +55,15 @@ export const IconBell: IconComponentType = forwardRef(
   }
 )
 
+export const IconBell: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconBellNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconBellOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconBell[iconSymbol] = true

package/react/board.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 IconBoard: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconBoardNew: 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='M11 1v2h-6c-1.6568 0-3 1.3431-3 3v10c0 1.6569 1.3432 3 3 3h2.583l-1.25 3h2.1667l1.25-3h4.5l1.25 3h2.1667l-1.25-3h2.5836c1.6569 0 3-1.3431 3-3v-10c0-1.6569-1.3431-3-3-3h-6v-2h-2Zm-7 5c0-.5523.4477-1 1-1h14c.5523 0 1 .4477 1 1v10c0 .5523-.4477 1-1 1h-14c-.5523 0-1-.4477-1-1v-10Z'
+        clipRule='evenodd'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M11 13h7'
+      />
+    )
+  }
+)
+
+export const IconBoardOld: 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 IconBoard: IconComponentType = forwardRef(
   }
 )
 
+export const IconBoard: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconBoardNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconBoardOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconBoard[iconSymbol] = true

package/react/book-open-info.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 IconBookOpenInfo: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconBookOpenInfoNew: 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 20-.3613.9324 1.3613-.9324h-1Zm-8 0v1h.2898l.2448-.1549-.5346-.8451Zm3-16 .0881.996-.0881-.996Zm4 .5.3389-.9408-.3389.9408Zm-8 1-.6466.7628.6466.5481.6466-.5481-.6466-.7628Zm-9 14.5h-1l1.3613.9324-.3613-.9324Zm8 0-.5346.845.2448.155h.2898v-1Zm-3-16-.0881.996.0881-.996Zm-4 .5-.339-.9408.339.9408Zm16 1.5v14h2v-14h-2Zm-3.5 14c.8184 0 1.8361.2189 2.6979.4623.4205.1188.7847.2378 1.0429.3268a15.3034 15.3034 0 0 1 .3761.135l.0181.0069.0037.0014a.001.001 0 0 1 .0004.0002l-.0001-.0001h-.0001c-.0001-.0001-.0002-.0001.3611-.9325.3613-.9325.3612-.9325.3611-.9326l-.0004-.0001-.0008-.0003a.0185.0185 0 0 0-.0023-.0009l-.0075-.0029a17.151 17.151 0 0 0-.4574-.1649 21.5831 21.5831 0 0 0-1.1511-.3607c-.9084-.2566-2.1407-.5376-3.2416-.5376v2Zm-3.5 0c.5346.8451.5344.8452.5342.8453l-.0004.0003-.0007.0004a.0037.0037 0 0 1-.001.0006l-.0003.0002a4.5272 4.5272 0 0 1 .2108-.1181 6.648 6.648 0 0 1 .6539-.2982c.5639-.222 1.3102-.4305 2.1035-.4305v-2c-1.126 0-2.1297.2914-2.836.5695a8.6305 8.6305 0 0 0-.8527.3892 6.575 6.575 0 0 0-.2427.1341 4.4625 4.4625 0 0 0-.0984.0591l-.0027.0017-.0012.0007-.0005.0003c-.0002.0001-.0004.0003.5342.8454Zm3.0881-15.004c1.4574-.1288 2.7789.1588 3.573.4448l.6778-1.8816c-1.0143-.3654-2.6289-.7144-4.427-.5554l.1762 1.9923Zm-4.0881.504c.6466.7628.6464.763.6461.7632l-.0005.0004a.0149.0149 0 0 1-.0009.0008l-.0014.0011-.0011.001a3.6105 3.6105 0 0 1 .1971-.1446c.1487-.1016.3772-.2451.6773-.3965.6012-.3034 1.4784-.6326 2.5715-.7293l-.1762-1.9923c-1.3971.1236-2.52.5443-3.2962.936-.3886.196-.6932.3862-.9054.5314a5.598 5.598 0 0 0-.2495.1801 3.7716 3.7716 0 0 0-.0942.0747l-.0077.0065-.0031.0026-.0013.001-.0006.0006c-.0002.0002-.0005.0004.6461.7633Zm10 .5c0-.509-.1169-1.0227-.409-1.4723-.2967-.4566-.7319-.7811-1.2521-.9685l-.6778 1.8816c.1531.0552.2179.1228.2529.1766.0395.061.086.1759.086.3826h2Zm-20 0v14h2v-14h-2Zm5.5 12c-1.101 0-2.3332.281-3.2416.5376a21.5628 21.5628 0 0 0-1.1511.3607 17.2774 17.2774 0 0 0-.4315.1551 2.2197 2.2197 0 0 0-.026.0098l-.0074.0029a.0181.0181 0 0 0-.0023.0009.009.009 0 0 0-.0008.0003l-.0004.0001c0 .0001-.0002.0001.3611.9326.3613.9324.3612.9324.3611.9325h-.0001l-.0001.0001.0004-.0002.0038-.0014.018-.0069a15.3999 15.3999 0 0 1 .376-.135c.2583-.089.6225-.208 1.043-.3268.8618-.2434 1.8795-.4623 2.6979-.4623v-2Zm3.5 2c.5346-.8451.5344-.8453.5342-.8454l-.0005-.0003-.0012-.0008-.0027-.0016a4.4625 4.4625 0 0 0-.0984-.0591 6.575 6.575 0 0 0-.2427-.1341 8.6305 8.6305 0 0 0-.8527-.3892c-.7063-.2781-1.71-.5695-2.836-.5695v2c.7933 0 1.5396.2085 2.1035.4305.2782.1095.5024.2185.6539.2982.0755.0397.1322.0718.1678.0925a2.0082 2.0082 0 0 1 .043.0256l-.0003-.0002a.0037.0037 0 0 1-.001-.0006l-.0007-.0004-.0004-.0003c-.0002-.0001-.0004-.0003.5342-.8453Zm-2.9119-16.9962c-1.7981-.159-3.4128.19-4.427.5554l.6778 1.8816c.794-.286 2.1156-.5736 3.573-.4447l.1762-1.9923Zm3.9119 2.4962c.6466-.7629.6463-.763.6461-.7633l-.0006-.0005-.0013-.0011-.0031-.0026-.0077-.0065a3.7716 3.7716 0 0 0-.0942-.0747 5.598 5.598 0 0 0-.2495-.1801c-.2122-.1452-.5168-.3354-.9054-.5314-.7762-.3917-1.899-.8124-3.2962-.936l-.1762 1.9923c1.0931.0966 1.9703.426 2.5715.7293.3001.1514.5286.2949.6773.3966.0742.0507.1281.0908.1606.1158a1.6535 1.6535 0 0 1 .0365.0287l-.0011-.001-.0014-.0011a.0149.0149 0 0 1-.0009-.0008l-.0005-.0004c-.0003-.0002-.0005-.0004.6461-.7632Zm-8 .5c0-.2067.0465-.3217.086-.3826.035-.0537.0998-.1214.253-.1766l-.678-1.8816c-.5201.1874-.9553.5119-1.252.9685-.2921.4496-.409.9633-.409 1.4723h2Zm7 15h2v-2h-2v2Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12 17v-4h-2'
+      />,
+      <circle cx={12} cy={9.5} r={1.5} fill='currentColor' />
+    )
+  }
+)
+
+export const IconBookOpenInfoOld: 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 +67,25 @@ export const IconBookOpenInfo: IconComponentType = forwardRef(
   }
 )
 
+export const IconBookOpenInfo: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconBookOpenInfoNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconBookOpenInfoOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconBookOpenInfo[iconSymbol] = true

package/react/bookmark.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 IconBookmark: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconBookmarkNew: 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'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M18.5 4h-13a.5.5 0 0 0-.5.5v16.5l7-3.7778 7 3.7778v-16.5a.5.5 0 0 0-.5-.5Z'
+      />
+    )
+  }
+)
+
+export const IconBookmarkOld: 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 IconBookmark: IconComponentType = forwardRef(
   }
 )
 
+export const IconBookmark: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconBookmarkNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconBookmarkOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconBookmark[iconSymbol] = true