@mirohq/design-system-icons 0.59.1 → 0.60.0

package/react/envelope.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 IconEnvelope: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconEnvelopeNew: 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='m3 5 8 8h2l8-8'
+      />
+    )
+  }
+)
+
+export const IconEnvelopeOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -39,4 +66,25 @@ export const IconEnvelope: IconComponentType = forwardRef(
   }
 )
 
+export const IconEnvelope: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconEnvelopeNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconEnvelopeOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconEnvelope[iconSymbol] = true

package/react/eraser.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 IconEraser: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconEraserNew: 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 20 8.3358-8.3358c.781-.781.781-2.0474 0-2.8284l-4.1716-4.1716c-.781-.781-2.0474-.781-2.8284 0l-8.9216 8.9216c-.781.781-.781 2.0474 0 2.8284l3.5858 3.5858h13'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m9 9 7 7'
+      />
+    )
+  }
+)
+
+export const IconEraserOld: 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,15 @@ export const IconEraser: IconComponentType = forwardRef(
   }
 )
 
+export const IconEraser: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconEraserNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconEraserOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconEraser[iconSymbol] = true

package/react/exclamation-mark-octagon.tsx

@@ -5,21 +5,55 @@
 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 IconExclamationMarkOctagon: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconExclamationMarkOctagonNew: 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='M16 3h-8l-5 5v8l5 5h8l5-5v-8l-5-5Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12 13v-6'
+      />,
+      <circle
+        cx={12}
+        cy={15.5}
+        r={1.5}
+        fill='currentColor'
+        transform='rotate(-180 12 15.5)'
+      />
+    )
+  }
+)
+
+export const IconExclamationMarkOctagonOld: 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 +78,25 @@ export const IconExclamationMarkOctagon: IconComponentType = forwardRef(
   }
 )
 
+export const IconExclamationMarkOctagon: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconExclamationMarkOctagonNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconExclamationMarkOctagonOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconExclamationMarkOctagon[iconSymbol] = true

package/react/exclamation-point-circle.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 IconExclamationPointCircle: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconExclamationPointCircleNew: 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 7.0262v6.9738h-2v-6.9738h2ZM10.5 16.5c0-.8284.6716-1.5 1.5-1.5s1.5.6716 1.5 1.5c0 .8285-.6716 1.5-1.5 1.5s-1.5-.6715-1.5-1.5Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9Z'
+      />
+    )
+  }
+)
+
+export const IconExclamationPointCircleOld: 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 +69,25 @@ export const IconExclamationPointCircle: IconComponentType = forwardRef(
   }
 )
 
+export const IconExclamationPointCircle: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconExclamationPointCircleNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconExclamationPointCircleOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconExclamationPointCircle[iconSymbol] = true

package/react/export.tsx

@@ -5,21 +5,55 @@
 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 IconExport: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconExportNew: 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='square'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M3 15v4c0 1.1046.8954 2 2 2h14c1.1046 0 2-.8954 2-2v-4'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12.0002 16v-11'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m8 8 4-4 4 4'
+      />
+    )
+  }
+)
+
+export const IconExportOld: 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 +74,15 @@ export const IconExport: IconComponentType = forwardRef(
   }
 )
 
+export const IconExport: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconExportNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconExportOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconExport[iconSymbol] = true

package/react/external-format.tsx

@@ -5,21 +5,20 @@
 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 IconExternalFormat: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconExternalFormatNew: 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,
@@ -30,12 +29,61 @@ export const IconExternalFormat: IconComponentType = forwardRef(
         strokeWidth='var(--svg-stroke-width)'
         d='M18 3h-12c-1.6569 0-3 1.3431-3 3v12c0 1.6569 1.3431 3 3 3h12c1.6569 0 3-1.3431 3-3v-12c0-1.6569-1.3431-3-3-3Z'
       />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m7.5 16.5 8.5-8.499M16 14.001v-6h-6'
+      />
+    )
+  }
+)
+
+export const IconExternalFormatOld: 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='m8 16.001 8-8m0 0v6m0-6h-6'
+        d='M18 3h-12c-1.6569 0-3 1.3431-3 3v12c0 1.6569 1.3431 3 3 3h12c1.6569 0 3-1.3431 3-3v-12c0-1.6569-1.3431-3-3-3Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m7.5 16.5 8.5-8.499m0 0v6m0-6h-6'
+      />
+    )
+  }
+)
+
+export const IconExternalFormat: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconExternalFormatNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconExternalFormatOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
       />
     )
   }

package/react/eye-closed-dots-four-frame-broken.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 IconEyeClosedDotsFourFrameBroken: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconEyeClosedDotsFourFrameBrokenNew: 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 6h-2v14h16v-6'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M7 16h2M11 16h2M15 16h2'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m10.3422 8.1711-.8422 1.3289m3.5.5-.5 1.4999m3.5-1.4999.5 1.4999m2-2.9999 1 1'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M9 6s2.2 3.5 5.5 3.5 5.5-3.5 5.5-3.5'
+      />
+    )
+  })
+
+export const IconEyeClosedDotsFourFrameBrokenOld: 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,6 +77,26 @@ export const IconEyeClosedDotsFourFrameBroken: IconComponentType = forwardRef(
         d='M12 8v.0001'
       />
     )
+  })
+
+export const IconEyeClosedDotsFourFrameBroken: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconEyeClosedDotsFourFrameBrokenNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconEyeClosedDotsFourFrameBrokenOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
   }
 )
 

package/react/eye-closed.tsx

@@ -5,21 +5,50 @@
 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 IconEyeClosed: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconEyeClosedNew: 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 15-3 3m6.5 0-1 3m6-3 1.5 3m2-6 3 3'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M3 12s3.6 6 9 6 9-6 9-6'
+      />
+    )
+  }
+)
+
+export const IconEyeClosedOld: 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 +69,25 @@ export const IconEyeClosed: IconComponentType = forwardRef(
   }
 )
 
+export const IconEyeClosed: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconEyeClosedNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconEyeClosedOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconEyeClosed[iconSymbol] = true