@mirohq/design-system-icons 0.59.1 → 0.60.1

package/react/camera.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 IconCamera: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCameraNew: 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='M3 20h-1l1 1v-1Zm18 0v1l1-1h-1Zm-12-16v-1l-.8944.5528.8944.4472Zm6 0 .8944-.4472-.8944-.5528v1Zm1.5 3-.8944.4472a1 1 0 0 0 .8944.5528v-1Zm-9 0v1a1 1 0 0 0 .8944-.5528l-.8944-.4472Zm-4.5 0v-1l-1 1h1Zm18 0h1l-1-1v1Zm-19 2v11h2v-11h-2Zm1 12h18v-2h-18v2Zm19-1v-10h-2v10h2Zm0-2v-9h-2v9h2Zm-3-12h-2v2h2v-2Zm-17 3v9h2v-9h-2Zm7-4h6v-2h-6v2Zm5.1056-.5528 1.5 3 1.7888-.8944-1.5-3-1.7888.8944Zm2.3944 3.5528h2.5v-2h-2.5v2Zm-8.1056-.5528 1.5-3-1.7888-.8944-1.5 3 1.7888.8944Zm-2.3944.5528h1.5v-2h-1.5v2Zm0-2h-3v2h3v-2Zm-4 1v2h2v-2h-2Zm17 1h2v-2h-2v2Zm1-1v2h2v-2h-2Z'
+      />,
+      <circle
+        cx={12}
+        cy={13}
+        r={3.5}
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+      />
+    )
+  }
+)
+
+export const IconCameraOld: 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,
@@ -45,4 +72,15 @@ export const IconCamera: IconComponentType = forwardRef(
   }
 )
 
+export const IconCamera: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCameraNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconCameraOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconCamera[iconSymbol] = true

package/react/card-circles.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 IconCardCircles: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCardCirclesNew: 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='M13 15h3v3h-3v-3ZM11 6h-3v3h3v-3Z' />,
+      <path
+        fill='currentColor'
+        d='M4 5c0-1.6568 1.3431-3 3-3h10c1.6569 0 3 1.3432 3 3v14c0 1.6569-1.3431 3-3 3h-10c-1.6569 0-3-1.3431-3-3v-14Zm3-1c-.5523 0-1 .4477-1 1v14c0 .5523.4477 1 1 1h10c.5523 0 1-.4477 1-1v-14c0-.5523-.4477-1-1-1h-10Z'
+      />
+    )
+  }
+)
+
+export const IconCardCirclesOld: 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 +62,25 @@ export const IconCardCircles: IconComponentType = forwardRef(
   }
 )
 
+export const IconCardCircles: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCardCirclesNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconCardCirclesOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconCardCircles[iconSymbol] = true

package/react/card-number-three.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 IconCardNumberThree: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCardNumberThreeNew: 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='M17 3h-10c-1.1046 0-2 .8954-2 2v14c0 1.1046.8954 2 2 2h10c1.1046 0 2-.8954 2-2v-14c0-1.1046-.8954-2-2-2Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12.0015 12h-1.0015m1.0015 0c1.1046 0 2-.8954 2-2s-.8962-2-2.0007-2c-1.1046 0-2.0008.8954-2.0008 2m2.0015 2c1.1046 0 2 .8954 2 2s-.8962 2-2.0007 2c-1.1046 0-2.0008-.8954-2.0008-2'
+      />,
+      <path fill='currentColor' d='M15 17h2v2h-2zM7 5h2v2h-2z' />
+    )
+  }
+)
+
+export const IconCardNumberThreeOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -38,7 +65,28 @@ export const IconCardNumberThree: IconComponentType = forwardRef(
       <path
         stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
-        d='M12 11.9999v.0001'
+        d='M12 12v.0001'
+      />
+    )
+  }
+)
+
+export const IconCardNumberThree: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCardNumberThreeNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconCardNumberThreeOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
       />
     )
   }

package/react/card.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 IconCard: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCardNew: 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 5h18v14h-18v-14Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M6 14h12'
+      />,
+      <path fill='currentColor' d='M16 9h2v2h-2z' />
+    )
+  }
+)
+
+export const IconCardOld: 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 +71,15 @@ export const IconCard: IconComponentType = forwardRef(
   }
 )
 
+export const IconCard: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCardNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconCardOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconCard[iconSymbol] = true

package/react/cards-poker.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 IconCardsPoker: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCardsPokerNew: 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,
+      },
+      <rect
+        width={10.889}
+        height={14}
+        x={4}
+        y={7}
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={1.556}
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M9 5v-.4444c0-.8592.6965-1.5556 1.5556-1.5556h7.7777c.8591 0 1.5556.6965 1.5556 1.5556v10.8888c0 .8592-.6965 1.5556-1.5556 1.5556h-1.3333'
+      />,
+      <path fill='currentColor' d='M6 9h2v2h-2zM11 17h2v2h-2z' />,
+      <circle cx={9.5} cy={14} r={1.5} fill='currentColor' />
+    )
+  }
+)
+
+export const IconCardsPokerOld: 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 +76,25 @@ export const IconCardsPoker: IconComponentType = forwardRef(
   }
 )
 
+export const IconCardsPoker: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCardsPokerNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconCardsPokerOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconCardsPoker[iconSymbol] = true

package/react/chart-bar-y-simple.tsx

@@ -5,21 +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 IconChartBarYSimple: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconChartBarYSimpleNew: 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,
+      },
+      <rect
+        width={4}
+        height={16}
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={1}
+        transform='matrix(-1 0 0 1 21 4)'
+      />,
+      <rect
+        width={4}
+        height={11}
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={1}
+        transform='matrix(-1 0 0 1 14 9)'
+      />,
+      <rect
+        width={4}
+        height={7}
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={1}
+        transform='matrix(-1 0 0 1 7 13)'
+      />
+    )
+  }
+)
+
+export const IconChartBarYSimpleOld: 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 +76,28 @@ export const IconChartBarYSimple: IconComponentType = forwardRef(
       <path
         stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
-        d='M14 11.9999v.0001'
+        d='M14 12v.0001'
+      />
+    )
+  }
+)
+
+export const IconChartBarYSimple: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconChartBarYSimpleNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconChartBarYSimpleOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
       />
     )
   }

package/react/chart-bar-y.tsx

@@ -5,21 +5,69 @@
 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 IconChartBarY: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconChartBarYNew: 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,
+      },
+      <rect
+        width={4}
+        height={14}
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={1}
+        transform='matrix(-1 0 0 1 21 4)'
+      />,
+      <rect
+        width={4}
+        height={10}
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={1}
+        transform='matrix(-1 0 0 1 14 8)'
+      />,
+      <rect
+        width={4}
+        height={6}
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={1}
+        transform='matrix(-1 0 0 1 7 12)'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M2 21h20'
+      />
+    )
+  }
+)
+
+export const IconChartBarYOld: 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 +81,28 @@ export const IconChartBarY: IconComponentType = forwardRef(
       <path
         stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
-        d='M14 8'
+        d='M14 8v.0001'
+      />
+    )
+  }
+)
+
+export const IconChartBarY: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconChartBarYNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconChartBarYOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
       />
     )
   }

package/react/chat-check.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 IconChatCheck: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconChatCheckNew: 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='M12 21c4.9706 0 9-4.0294 9-9s-4.0294-9-9-9-9 4.0294-9 9c0 1.7285.4873 3.3433 1.332 4.7143l-1.332 4.2857 4.2566-1.35c.4168.259.8563.4848 1.3148.6739 1.0567.4357 2.2146.6761 3.4286.6761Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m8 12 3 3.5 5-7'
+      />
+    )
+  }
+)
+
+export const IconChatCheckOld: 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 +67,25 @@ export const IconChatCheck: IconComponentType = forwardRef(
   }
 )
 
+export const IconChatCheck: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconChatCheckNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconChatCheckOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconChatCheck[iconSymbol] = true