@mirohq/design-system-icons 0.59.1 → 0.60.0

package/react/diagram-card-magnifying-glass.tsx

@@ -5,21 +5,53 @@
 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 IconDiagramCardMagnifyingGlass: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconDiagramCardMagnifyingGlassNew: 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='m11 20-3.75-3.75m.75-2.25c0 1.6569-1.3431 3-3 3-1.6568 0-3-1.3431-3-3s1.3432-3 3-3c1.6569 0 3 1.3431 3 3Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M14 19h7v-14h-18v3'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M11 10h7M11 14h7'
+      />
+    )
+  }
+)
+
+export const IconDiagramCardMagnifyingGlassOld: 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,4 +69,25 @@ export const IconDiagramCardMagnifyingGlass: IconComponentType = forwardRef(
   }
 )
 
+export const IconDiagramCardMagnifyingGlass: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconDiagramCardMagnifyingGlassNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconDiagramCardMagnifyingGlassOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconDiagramCardMagnifyingGlass[iconSymbol] = true

package/react/diagram-card-small-1.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 IconDiagramCardSmall1: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconDiagramCardSmall1New: 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 6h18v12h-18v-12Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M6 12h10'
+      />
+    )
+  }
+)
+
+export const IconDiagramCardSmall1Old: 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 +67,25 @@ export const IconDiagramCardSmall1: IconComponentType = forwardRef(
   }
 )
 
+export const IconDiagramCardSmall1: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconDiagramCardSmall1New
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconDiagramCardSmall1Old
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconDiagramCardSmall1[iconSymbol] = true

package/react/diagram-card-small-2.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 IconDiagramCardSmall2: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconDiagramCardSmall2New: 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 6h18v12h-18v-12Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12 12h6'
+      />,
+      <circle cx={8} cy={12} r={2} fill='currentColor' />
+    )
+  }
+)
+
+export const IconDiagramCardSmall2Old: 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 +69,25 @@ export const IconDiagramCardSmall2: IconComponentType = forwardRef(
   }
 )
 
+export const IconDiagramCardSmall2: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconDiagramCardSmall2New
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconDiagramCardSmall2Old
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconDiagramCardSmall2[iconSymbol] = true

package/react/diagram-card-small-3.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 IconDiagramCardSmall3: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconDiagramCardSmall3New: 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 6h18v12h-18v-12Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M6 14h4M6 10h6M15 6v12'
+      />
+    )
+  }
+)
+
+export const IconDiagramCardSmall3Old: 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,
@@ -36,4 +63,25 @@ export const IconDiagramCardSmall3: IconComponentType = forwardRef(
   }
 )
 
+export const IconDiagramCardSmall3: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconDiagramCardSmall3New
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconDiagramCardSmall3Old
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconDiagramCardSmall3[iconSymbol] = true

package/react/diagram-card-team.tsx

@@ -5,21 +5,68 @@
 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 IconDiagramCardTeam: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconDiagramCardTeamNew: 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='M18 19h3v-14h-18v2'
+      />,
+      <circle
+        cx={5.5}
+        cy={11.5}
+        r={1.5}
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M16 10h2M16 14h2'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m9 20-.09-.9102c-.1731-1.7535-1.648-3.0898-3.41-3.0898-1.762 0-3.2369 1.3363-3.41 3.0898l-.09.9102M15 20l-.0535-.474c-.2268-2.0083-1.9255-3.526-3.9465-3.526'
+      />,
+      <circle
+        cx={11.5}
+        cy={11.5}
+        r={1.5}
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+      />
+    )
+  }
+)
+
+export const IconDiagramCardTeamOld: 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,
@@ -27,11 +74,32 @@ export const IconDiagramCardTeam: IconComponentType = forwardRef(
       <path
         fill='currentColor'
         fillRule='evenodd'
-        d='M2 6c0-.5523.4477-1 1-1h18c.5523 0 1 .4477 1 1v12c0 .5523-.4477 1-1 1h-4c-.5523 0-1-.4477-1-1s.4477-1 1-1h3v-10h-16v1c0 .5523-.4477 1-1 1s-1-.4477-1-1v-2Zm12 4c0-.5523.4477-1 1-1h2c.5523 0 1 .4477 1 1s-.4477 1-1 1h-2c-.5523 0-1-.4477-1-1Zm-8.5 1c-.5522 0-1 .4477-1 1s.4478 1 1 1c.5523 0 1-.4477 1-1s-.4477-1-1-1Zm-3 1c0-1.6569 1.3432-3 3-3 1.6569 0 3 1.3431 3 3s-1.3431 3-3 3c-1.6568 0-3-1.3431-3-3Zm6.5-2c0-.5523.4477-1 1-1 1.6569 0 3 1.3431 3 3s-1.3431 3-3 3c-.5523 0-1-.4477-1-1s.4477-1 1-1 1-.4477 1-1-.4477-1-1-1-1-.4477-1-1Zm6 4c0-.5523.4477-1 1-1h1c.5523 0 1 .4477 1 1s-.4477 1-1 1h-1c-.5523 0-1-.4477-1-1Zm-11.08 3.5c-.4048 0-.6902.2737-.7412.565l-.1938 1.1074c-.0952.544-.6134.9078-1.1574.8126-.544-.0952-.9078-.6134-.8126-1.1574l.1938-1.1073c.2302-1.3159 1.405-2.2203 2.7112-2.2203h8.2537c1.3035 0 2.4145.9434 2.6284 2.2285l.1844 1.1073c.0906.5448-.2775 1.0599-.8223 1.1506-.5447.0907-1.0599-.2774-1.1506-.8222l-.1843-1.1073a.6653.6653 0 0 0-.6556-.5569h-2.4307c.019.072.0352.1455.0483.2203l.1937 1.1073c.0952.544-.2686 1.0622-.8126 1.1574-.544.0952-1.0622-.2686-1.1574-.8126l-.1938-1.1074c-.051-.2913-.3364-.565-.7412-.565h-3.16Z'
+        d='M2 6c0-.5523.4476-1 1-1h17.9999c.5523 0 1 .4477 1 1v12c0 .5523-.4477 1-1 1h-4c-.5523 0-1-.4477-1-1s.4477-1 1-1h3v-10h-16v1c0 .5523-.4477 1-1 1s-1-.4477-1-1v-2Zm11.9999 4c0-.5523.4477-1 1-1h2c.5523 0 1 .4477 1 1s-.4477 1-1 1h-2c-.5523 0-1-.4477-1-1Zm-8.5 1c-.5522 0-1 .4477-1 1s.4478 1 1 1c.5523 0 1-.4477 1-1s-.4477-1-1-1Zm-3 1c0-1.6569 1.3432-3 3-3 1.6569 0 3 1.3431 3 3s-1.3431 3-3 3c-1.6568 0-3-1.3431-3-3Zm6.5-2c0-.5523.4477-1 1-1 1.6569 0 3 1.3431 3 3s-1.3431 3-3 3c-.5523 0-1-.4477-1-1s.4477-1 1-1 1-.4477 1-1-.4477-1-1-1-1-.4477-1-1Zm6 4c0-.5523.4477-1 1-1h1c.5523 0 1 .4477 1 1s-.4477 1-1 1h-1c-.5523 0-1-.4477-1-1Zm-11.08 3.5c-.4048 0-.6902.2737-.7412.565l-.1938 1.1074c-.0952.544-.6133.9078-1.1574.8126-.544-.0952-.9078-.6134-.8126-1.1574l.1938-1.1073c.2303-1.3159 1.405-2.2203 2.7112-2.2203h8.2537c1.3035 0 2.4145.9434 2.6284 2.2285l.1844 1.1073c.0907.5448-.2775 1.0599-.8223 1.1506-.5447.0907-1.0599-.2774-1.1506-.8222l-.1843-1.1073a.6653.6653 0 0 0-.6556-.5569h-2.4307c.019.072.0352.1455.0483.2203l.1937 1.1073c.0953.544-.2686 1.0622-.8126 1.1574-.544.0952-1.0622-.2686-1.1574-.8126l-.1938-1.1074c-.051-.2913-.3364-.565-.7412-.565h-3.16Z'
         clipRule='evenodd'
       />
     )
   }
 )
 
+export const IconDiagramCardTeam: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconDiagramCardTeamNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconDiagramCardTeamOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconDiagramCardTeam[iconSymbol] = true

package/react/diagram-card-user.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 IconDiagramCardUser: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconDiagramCardUserNew: 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 19h7v-14h-18v2'
+      />,
+      <circle
+        cx={7}
+        cy={11}
+        r={2}
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12 10h6M12 14h6'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m11 20-.0535-.474c-.2268-2.0083-1.9255-3.526-3.9465-3.526s-3.7197 1.5177-3.9465 3.526l-.0535.474'
+      />
+    )
+  }
+)
+
+export const IconDiagramCardUserOld: 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,
@@ -27,11 +67,32 @@ export const IconDiagramCardUser: IconComponentType = forwardRef(
       <path
         fill='currentColor'
         fillRule='evenodd'
-        d='M2 6c0-.5523.4477-1 1-1h18c.5523 0 1 .4477 1 1v12c0 .5523-.4477 1-1 1h-8c-.5523 0-1-.4477-1-1s.4477-1 1-1h7v-10h-16v1c0 .5523-.4477 1-1 1s-1-.4477-1-1v-2Zm8 4c0-.5523.4477-1 1-1h6c.5523 0 1 .4477 1 1s-.4477 1-1 1h-6c-.5523 0-1-.4477-1-1Zm-3.9999 1c-.5523 0-1 .4477-1 1s.4477 1 1 1 1-.4477 1-1-.4477-1-1-1Zm-3 1c0-1.6569 1.3432-3 3-3 1.6569 0 3 1.3431 3 3s-1.3431 3-3 3c-1.6568 0-3-1.3431-3-3Zm7.9999 2c0-.5523.4477-1 1-1h5c.5523 0 1 .4477 1 1s-.4477 1-1 1h-5c-.5523 0-1-.4477-1-1Zm-6.8056 3.1765c-.5363 0-.9194.3589-.9882.7473l-.2214 1.2506c-.0963.5438-.6152.9066-1.159.8103-.5439-.0963-.9067-.6152-.8104-1.159l.2215-1.2507c.2527-1.4268 1.5383-2.3985 2.9575-2.3985h3.6115c1.419 0 2.7047.9717 2.9574 2.3985l.2215 1.2507c.0963.5438-.2665 1.0627-.8103 1.159-.5439.0963-1.0628-.2665-1.159-.8103l-.2215-1.2506c-.0688-.3884-.452-.7473-.9882-.7473h-3.6114Z'
+        d='M2 6c0-.5523.4478-1 1-1h18.0001c.5522 0 1 .4477 1 1v12c0 .5523-.4478 1-1 1h-8c-.5523 0-1-.4477-1-1s.4477-1 1-1h7v-10h-16v1c0 .5523-.4478 1-1 1-.5523 0-1-.4477-1-1v-2Zm8.0001 4c0-.5523.4477-1 1-1h6c.5522 0 1 .4477 1 1s-.4478 1-1 1h-6c-.5523 0-1-.4477-1-1Zm-4 1c-.5522 0-1 .4477-1 1s.4478 1 1 1c.5524 0 1-.4477 1-1s-.4476-1-1-1Zm-3 1c0-1.6569 1.3432-3 3-3 1.657 0 3 1.3431 3 3s-1.343 3-3 3c-1.6568 0-3-1.3431-3-3Zm8 2c0-.5523.4477-1 1-1h5c.5522 0 1 .4477 1 1s-.4478 1-1 1h-5c-.5523 0-1-.4477-1-1Zm-6.8057 3.1765c-.5362 0-.9193.3589-.988.7473l-.2216 1.2506c-.0962.5438-.6152.9066-1.159.8103-.5438-.0963-.9066-.6152-.8103-1.159l.2214-1.2507c.2527-1.4268 1.5384-2.3985 2.9575-2.3985h3.6115c1.4191 0 2.7048.9717 2.9575 2.3985l.2214 1.2507c.0964.5438-.2664 1.0627-.8103 1.159-.5438.0963-1.0627-.2665-1.159-.8103l-.2215-1.2506c-.0688-.3884-.4519-.7473-.988-.7473h-3.6116Z'
         clipRule='evenodd'
       />
     )
   }
 )
 
+export const IconDiagramCardUser: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconDiagramCardUserNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconDiagramCardUserOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconDiagramCardUser[iconSymbol] = true

package/react/diagramming-format.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 IconDiagrammingFormat: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconDiagrammingFormatNew: 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 4.5c0-1.3807 1.1193-2.5 2.5-2.5h4c1.3807 0 2.5 1.1193 2.5 2.5v4c0 1.3807-1.1193 2.5-2.5 2.5h-4c-1.3807 0-2.5-1.1193-2.5-2.5v-1h-2c-2.2091 0-4 1.7909-4 4v.5c2.419 0 4.4367 1.7178 4.9 4h6.6265l-2.1437-1.7117 1.2341-1.5768 4.3833 3.5001v1.5768l-4.3833 3.4999-1.2341-1.5768 2.1435-1.7115h-6.6263c-.4633 2.2822-2.481 4-4.9 4-2.7614 0-5-2.2386-5-5 0-2.0503 1.2341-3.8124 3-4.584v-.916c0-3.3137 2.6863-6 6-6h2v-1Zm2.5-.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-4Zm-8.5 10c-1.6569 0-3 1.3431-3 3s1.3431 3 3 3 3-1.3431 3-3-1.3431-3-3-3Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconDiagrammingFormatOld: 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 IconDiagrammingFormat: IconComponentType = forwardRef(
   }
 )
 
+export const IconDiagrammingFormat: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconDiagrammingFormatNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconDiagrammingFormatOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconDiagrammingFormat[iconSymbol] = true

package/react/diagramming.tsx

@@ -27,7 +27,7 @@ export const IconDiagramming: IconComponentType = forwardRef(
       <path
         stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
-        d='M14 5h-4c-2.2091 0-4 1.7909-4 4M14 19h-5c-1.6569 0-3-1.3431-3-3'
+        d='M14 5h-4c-2.2091 0-4 1.7909-4 4M14 19h-5c-1.6569 0-3-1.3431-3-3v-1'
       />,
       <rect
         width={6}

package/react/distribute-horizontal.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 IconDistributeHorizontal: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconDistributeHorizontalNew: 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='M20 21v-18m-16 18v-18'
+      />,
+      <path
+        fill='currentColor'
+        d='M10 17h10v4h-10z'
+        transform='rotate(-90 10 17)'
+      />
+    )
+  }
+)
+
+export const IconDistributeHorizontalOld: 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 +66,25 @@ export const IconDistributeHorizontal: IconComponentType = forwardRef(
   }
 )
 
+export const IconDistributeHorizontal: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconDistributeHorizontalNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconDistributeHorizontalOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconDistributeHorizontal[iconSymbol] = true