@mirohq/design-system-icons 0.59.1 → 0.60.0

package/react/squares-two-overlap.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 IconSquaresTwoOverlap: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSquaresTwoOverlapNew: 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.3077 7h-6.3077c-1.1046 0-2 .8954-2 2v10c0 1.1046.8954 2 2 2h8c1.1046 0 2-.8954 2-2v-8l-3.6923-4Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M9 7v-2c0-1.1046.8954-2 2-2h6.3077l3.6923 4v8c0 1.1046-.8954 2-2 2h-4'
+      />
+    )
+  }
+)
+
+export const IconSquaresTwoOverlapOld: 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 IconSquaresTwoOverlap: IconComponentType = forwardRef(
   }
 )
 
+export const IconSquaresTwoOverlap: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSquaresTwoOverlapNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconSquaresTwoOverlapOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconSquaresTwoOverlap[iconSymbol] = true

package/react/squares-ungroup.tsx

@@ -34,11 +34,6 @@ export const IconSquaresUngroup: IconComponentType = forwardRef(
       <path
         fill='currentColor'
         d='M8 2h3v3h-3v-3ZM19 2h3v3h-3v-3ZM19 13h3v3h-3v-3ZM8 13h3v3h-3v-3ZM2 8h3v3h-3v-3ZM2 19h3v3h-3v-3ZM13 19h3v3h-3v-3Z'
-      />,
-      <path
-        stroke='currentColor'
-        strokeWidth='var(--svg-stroke-width)'
-        d='M10 12v.0001'
       />
     )
   }

package/react/squares-unmerge.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 IconSquaresUnmerge: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSquaresUnmergeNew: 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='M9 3h12v12h-12v-12Zm6 6h-12v12h12v-12Z'
+      />
+    )
+  }
+)
+
+export const IconSquaresUnmergeOld: 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 IconSquaresUnmerge: IconComponentType = forwardRef(
   }
 )
 
+export const IconSquaresUnmerge: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSquaresUnmergeNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconSquaresUnmergeOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconSquaresUnmerge[iconSymbol] = true

package/react/stack.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 IconStack: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconStackNew: 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 13.5 4 2-10 4.5-10-4.5 4-2m6-9.5 10 4.5-10 4.5-10-4.5 10-4.5Z'
+      />
+    )
+  }
+)
+
+export const IconStackOld: 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 +62,15 @@ export const IconStack: IconComponentType = forwardRef(
   }
 )
 
+export const IconStack: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconStackNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconStackOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconStack[iconSymbol] = true

package/react/star-filled.tsx

@@ -5,21 +5,45 @@
 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 IconStarFilled: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconStarFilledNew: 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='m15 9-3-6-3 6-6 1 4 4.5-1 6.5 6-3 6 3-1-6.5 4-4.5-6-1Z'
+      />,
+      <path
+        fill='currentColor'
+        d='m12 3 .8944-.4472h-1.7888l.8944.4472Zm3 6-.8944.4472.2277.4555.5023.0837.1644-.9864Zm6 1 .7474.6644-.583-1.6508-.1644.9864Zm-4 4.5-.7474-.6644-.3125.3516.0715.4649.9884-.1521Zm1 6.5-.4472.8944 1.4356-1.0465-.9884.1521Zm-6-3 .4472-.8944-.4472-.2236-.4472.2236.4472.8944Zm-6 3-.9884-.1521 1.4356 1.0465-.4472-.8944Zm1-6.5.9884.1521.0715-.4649-.3125-.3516-.7474.6644Zm-4-4.5-.1644-.9864-.583 1.6508.7474-.6644Zm6-1 .1644.9864.5023-.0837.2277-.4555-.8944-.4472Zm2.1056-5.5528 3 6 1.7888-.8944-3-6-1.7888.8944Zm3.73 6.5392 6 1 .3288-1.9728-6-1-.3288 1.9728Zm5.417-.6508-4 4.5 1.4948 1.3288 4-4.5-1.4948-1.3288Zm-4.241 5.3165 1 6.5 1.9768-.3042-1-6.5-1.9768.3042Zm2.4356 5.4535-6-3-.8944 1.7888 6 3 .8944-1.7888Zm-6.8944-3-6 3 .8944 1.7888 6-3-.8944-1.7888Zm-4.5644 4.0465 1-6.5-1.9768-.3042-1 6.5 1.9768.3042Zm.759-7.3165-4-4.5-1.4948 1.3288 4 4.5 1.4948-1.3288Zm-4.583-2.8492 6-1-.3288-1.9728-6 1 .3288 1.9728Zm6.73-1.5392 3-6-1.7888-.8944-3 6 1.7888.8944Z'
+      />
+    )
+  }
+)
+
+export const IconStarFilledOld: 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 +68,25 @@ export const IconStarFilled: IconComponentType = forwardRef(
   }
 )
 
+export const IconStarFilled: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconStarFilledNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconStarFilledOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconStarFilled[iconSymbol] = true

package/react/star-half.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 IconStarHalf: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconStarHalfNew: 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 3 .8944-.4472h-1.7888l.8944.4472Zm3 6-.8944.4472.2277.4555.5023.0837.1644-.9864Zm6 1 .7474.6644-.583-1.6508-.1644.9864Zm-4 4.5-.7474-.6644-.3125.3516.0715.4649.9884-.1521Zm1 6.5-.4472.8944 1.4356-1.0465-.9884.1521Zm-6-3 .4472-.8944-.4472-.2236-.4472.2236.4472.8944Zm-6 3-.9884-.1521 1.4356 1.0465-.4472-.8944Zm1-6.5.9884.1521.0715-.4649-.3125-.3516-.7474.6644Zm-4-4.5-.1644-.9864-.583 1.6508.7474-.6644Zm6-1 .1644.9864.5023-.0837.2277-.4555-.8944-.4472Zm2.1056-5.5528 3 6 1.7888-.8944-3-6-1.7888.8944Zm3.73 6.5392 6 1 .3288-1.9728-6-1-.3288 1.9728Zm5.417-.6508-4 4.5 1.4948 1.3288 4-4.5-1.4948-1.3288Zm-4.241 5.3165 1 6.5 1.9768-.3042-1-6.5-1.9768.3042Zm2.4356 5.4535-6-3-.8944 1.7888 6 3 .8944-1.7888Zm-6.8944-3-6 3 .8944 1.7888 6-3-.8944-1.7888Zm-4.5644 4.0465 1-6.5-1.9768-.3042-1 6.5 1.9768.3042Zm.759-7.3165-4-4.5-1.4948 1.3288 4 4.5 1.4948-1.3288Zm-4.583-2.8492 6-1-.3288-1.9728-6 1 .3288 1.9728Zm6.73-1.5392 3-6-1.7888-.8944-3 6 1.7888.8944Z'
+      />,
+      <path
+        fill='currentColor'
+        d='M11 7v-2l-2 4-6 1 4 4.5-1 6.5 5-2.5v-11.5Z'
+      />,
+      <path
+        fill='currentColor'
+        d='M11 5h1l-1.8944-.4472.8944.4472Zm0 13.5.4472.8944.5528-.2764v-.618h-1Zm-5 2.5-.9884-.1521 1.4356 1.0465-.4472-.8944Zm1-6.5.9884.1521.0715-.4649-.3125-.3516-.7474.6644Zm-4-4.5-.1644-.9864-.583 1.6508.7474-.6644Zm6-1 .1644.9864.5023-.0837.2277-.4555-.8944-.4472Zm1-4v2h2v-2h-2Zm0 2v2h2v-2h-2Zm0 2v3.5h2v-3.5h-2Zm0 3.5v1.5h2v-1.5h-2Zm0 1.5v4.5h2v-4.5h-2Zm.5528 3.6056-5 2.5.8944 1.7888 5-2.5-.8944-1.7888Zm-3.5644 3.5465 1-6.5-1.9768-.3042-1 6.5 1.9768.3042Zm.759-7.3165-4-4.5-1.4948 1.3288 4 4.5 1.4948-1.3288Zm-4.583-2.8492 6-1-.3288-1.9728-6 1 .3288 1.9728Zm6.73-1.5392 2-4-1.7888-.8944-2 4 1.7888.8944Z'
+      />
+    )
+  }
+)
+
+export const IconStarHalfOld: 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 +72,25 @@ export const IconStarHalf: IconComponentType = forwardRef(
   }
 )
 
+export const IconStarHalf: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconStarHalfNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconStarHalfOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconStarHalf[iconSymbol] = true

package/react/star.tsx

@@ -5,21 +5,41 @@
 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 IconStar: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconStarNew: 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 3 .8944-.4472h-1.7888l.8944.4472Zm3 6-.8944.4472.2277.4555.5023.0837.1644-.9864Zm6 1 .7474.6644-.583-1.6508-.1644.9864Zm-4 4.5-.7474-.6644-.3125.3516.0715.4649.9884-.1521Zm1 6.5-.4472.8944 1.4356-1.0465-.9884.1521Zm-6-3 .4472-.8944-.4472-.2236-.4472.2236.4472.8944Zm-6 3-.9884-.1521 1.4356 1.0465-.4472-.8944Zm1-6.5.9884.1521.0715-.4649-.3125-.3516-.7474.6644Zm-4-4.5-.1644-.9864-.583 1.6508.7474-.6644Zm6-1 .1644.9864.5023-.0837.2277-.4555-.8944-.4472Zm2.1056-5.5528 3 6 1.7888-.8944-3-6-1.7888.8944Zm3.73 6.5392 6 1 .3288-1.9728-6-1-.3288 1.9728Zm5.417-.6508-4 4.5 1.4948 1.3288 4-4.5-1.4948-1.3288Zm-4.241 5.3165 1 6.5 1.9768-.3042-1-6.5-1.9768.3042Zm2.4356 5.4535-6-3-.8944 1.7888 6 3 .8944-1.7888Zm-6.8944-3-6 3 .8944 1.7888 6-3-.8944-1.7888Zm-4.5644 4.0465 1-6.5-1.9768-.3042-1 6.5 1.9768.3042Zm.759-7.3165-4-4.5-1.4948 1.3288 4 4.5 1.4948-1.3288Zm-4.583-2.8492 6-1-.3288-1.9728-6 1 .3288 1.9728Zm6.73-1.5392 3-6-1.7888-.8944-3 6 1.7888.8944Z'
+      />
+    )
+  }
+)
+
+export const IconStarOld: 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 +60,15 @@ export const IconStar: IconComponentType = forwardRef(
   }
 )
 
+export const IconStar: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconStarNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconStarOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconStar[iconSymbol] = true

package/react/sticky-corners.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 IconStickyCorners: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconStickyCornersNew: 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 3h-5v5m18 8v5h-5m-8 0h-5v-5m18-8v-5h-5M13 16v-3h2'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M16 13.0005c0 1.6566-1.3429 2.9997-2.9995 3l-4.9984.0008v-8.0012l7.9979-.0001v5.0005Z'
+      />
+    )
+  }
+)
+
+export const IconStickyCornersOld: 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,25 @@ export const IconStickyCorners: IconComponentType = forwardRef(
   }
 )
 
+export const IconStickyCorners: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconStickyCornersNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconStickyCornersOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconStickyCorners[iconSymbol] = true

package/react/sticky-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 IconStickyEyeClosed: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconStickyEyeClosedNew: 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='M4 5c0-.5523.4477-1 1-1h1v-2h-1c-1.6568 0-3 1.3432-3 3v14c0 1.6569 1.3432 3 3 3h7c5.5228 0 10-4.4772 10-10v-3h-2c0 1.6569-1.3431 3-3 3h-4l-1 1v3.9961c0 1.6568-1.3431 3-3 3h-4v.0039c-.5523 0-1-.4477-1-1v-14Zm9.0477 14.932c3.5793-.4682 6.4143-3.3023 6.8839-6.8812a4.9774 4.9774 0 0 1-2.9316.9492h-3v2.9961a4.9774 4.9774 0 0 1-.9523 2.9359Z'
+        clipRule='evenodd'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m10 5-1.5 1.5m4-.5-.5 2m3.5-2 .5 2m2.5-2.5 1 1m.5-3.5s-2.2 3-5.5 3-5.5-3-5.5-3'
+      />
+    )
+  }
+)
+
+export const IconStickyEyeClosedOld: 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 IconStickyEyeClosed: IconComponentType = forwardRef(
   }
 )
 
+export const IconStickyEyeClosed: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconStickyEyeClosedNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconStickyEyeClosedOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconStickyEyeClosed[iconSymbol] = true

package/react/sticky-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 IconStickyEyeOpen: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconStickyEyeOpenNew: 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='M4 5c0-.5523.4477-1 1-1h1v-2h-1c-1.6568 0-3 1.3432-3 3v14c0 1.6569 1.3432 3 3 3h7c5.5228 0 10-4.4772 10-10v-3h-2c0 1.6569-1.3431 3-3 3h-4l-1 1v3.9961c0 1.6568-1.3431 3-3 3h-4v.0039c-.5523 0-1-.4477-1-1v-14Zm9.0477 14.932c3.5793-.4682 6.4143-3.3023 6.8839-6.8812a4.9774 4.9774 0 0 1-2.9316.9492h-3v2.9961a4.9774 4.9774 0 0 1-.9523 2.9359Z'
+        clipRule='evenodd'
+      />,
+      <path
+        fill='currentColor'
+        d='m20 5.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-.1314c.0106-.0161.019-.0291.0253-.0389a1.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-.532.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.0007a7.6411 7.6411 0 0 1 .336-.4628c.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.6411 7.6411 0 0 1-.2598-.3498 4.4977 4.4977 0 0 1-.0762-.113l.0004.0007a.009.009 0 0 1 .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.1702c.0764.1098.1867.2622.3288.4431.2831.3603.6987.8415 1.2308 1.3252 1.0452.9502 2.652 2.0101 4.6602 2.0101v-2Z'
+      />,
+      <circle cx={14.5} cy={5.5} r={1.5} fill='currentColor' />
+    )
+  }
+)
+
+export const IconStickyEyeOpenOld: 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 IconStickyEyeOpen: IconComponentType = forwardRef(
   }
 )
 
+export const IconStickyEyeOpen: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconStickyEyeOpenNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconStickyEyeOpenOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconStickyEyeOpen[iconSymbol] = true