@atlaskit/icon 22.20.1 → 22.21.0

package/dist/types/components/icon-facade.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { NewIconProps } from '../types';
+import type { NewCoreIconProps, NewUtilityIconProps } from '../types';
 /**
  * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
  *
@@ -9,7 +9,7 @@ import type { NewIconProps } from '../types';
  * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
  */
 export declare const IconFacade: React.NamedExoticComponent<import("../types").IconProps & {
-    newIcon?: React.ComponentType<NewIconProps> | undefined;
-    iconType?: "utility" | "global" | undefined;
+    newIcon?: React.ComponentType<NewUtilityIconProps> | React.ComponentType<NewCoreIconProps> | undefined;
+    iconType?: "core" | "utility" | undefined;
 }>;
 export default IconFacade;

package/dist/types/components/icon-new.d.ts

@@ -4,13 +4,13 @@ import type { NewIconProps } from '../types';
  * We are hiding this props from consumers as it's reserved
  * for use by Icon Tile.
  */
-export interface InternalIconPropsNew extends NewIconProps {
+export type InternalIconPropsNew = NewIconProps & {
     /**
      * @internal NOT FOR PUBLIC USE.
      * Sets whether the icon should inherit size from a parent. Used by Icon Tile.
      */
     shouldScale?: boolean;
-}
+};
 /**
  * __Icon__
  *

package/dist/types/entry-points/base-new.d.ts

@@ -1,2 +1,2 @@
 export { default, Icon } from '../components/icon-new';
-export type { NewIconProps } from '../types';
+export type { NewIconProps, NewCoreIconProps, NewUtilityIconProps } from '../types';

package/dist/types/entry-points/types.d.ts

@@ -1 +1 @@
-export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, IconMigrationMap as UNSAFE_IconMigrationMap, } from '../types';
+export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, NewUtilityIconProps as UNSAFE_NewUtilityIconProps, NewCoreIconProps as UNSAFE_NewCoreIconProps, IconMigrationMap as UNSAFE_IconMigrationMap, } from '../types';

package/dist/types/index.d.ts

@@ -4,4 +4,4 @@ export { default as SVG } from './components/svg';
 export { sizeMap as size, sizes } from './constants';
 export { default as Skeleton } from './components/skeleton';
 export { default as IconTile } from './components/icon-tile';
-export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, IconMigrationMap as UNSAFE_IconMigrationMap, } from './types';
+export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, NewUtilityIconProps as UNSAFE_NewUtilityIconProps, NewCoreIconProps as UNSAFE_NewCoreIconProps, IconMigrationMap as UNSAFE_IconMigrationMap, } from './types';

package/dist/types/types.d.ts

@@ -1,6 +1,8 @@
 import type { ComponentType, ReactElement, ReactNode, SVGProps as ReactSVGProps } from 'react';
 import type { IconColor, IconColorPressed, TextColor, TextColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
+export type IconSpacing = 'none' | 'spacious';
+export type UtilityIconSpacing = 'none' | 'spacious' | 'compact';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
     /**
      * provided to a custom glyph
@@ -46,13 +48,22 @@ export interface GlyphSizeProps {
      */
     size?: Size;
 }
-export interface NewGlyphSpacingProps {
+export interface NewCoreGlyphSpacingProps {
     /**
-     * Icons have only one available size, but can be displayed with additional spacing.
+     * Core Icons have only one available size, but can be displayed with additional spacing.
      * "none" is default, and allows the icon to be placed in buttons and allows the parent component to manage spacing.
      * "spacious" provides accessible spacing between the icon and other elements.
      */
-    spacing?: 'none' | 'spacious';
+    spacing?: IconSpacing;
+}
+export interface NewUtilityGlyphSpacingProps {
+    /**
+     * Utility Icons have only one available size, but can be displayed with additional spacing.
+     * "none" is default, and allows the icon to be placed in buttons and allows the parent component to manage spacing.
+     * "compact" provides accessible compact spacing between the icon and other elements.
+     * "spacious" provides accessible spacing between the icon and other elements.
+     */
+    spacing?: UtilityIconSpacing;
 }
 export interface OtherGlyphProps {
     /**
@@ -83,7 +94,9 @@ interface IconInternalGlyphProps {
 }
 export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
 }
-export interface NewGlyphProps extends OtherGlyphProps, NewGlyphSpacingProps, NewGlyphColorProps {
+export interface NewCoreGlyphProps extends OtherGlyphProps, NewCoreGlyphSpacingProps, NewGlyphColorProps {
+}
+export interface NewUtilityGlyphProps extends OtherGlyphProps, NewUtilityGlyphSpacingProps, NewGlyphColorProps {
 }
 export interface IconProps extends GlyphProps, IconInternalGlyphProps {
     /**
@@ -92,7 +105,7 @@ export interface IconProps extends GlyphProps, IconInternalGlyphProps {
      */
     glyph?: ComponentType<CustomGlyphProps>;
 }
-export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
+export interface BaseNewIconProps {
     /**
      * Legacy icon component to render when the icon refresh feature flag is turned off.
      * The legacy icon defaults to "medium" size, with `primaryColor` set to the value of the `color` prop.
@@ -111,22 +124,25 @@ export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
      * Size of the legacy fallback icon. Legacy icons default to "medium".
      */
     LEGACY_size?: Size;
-    /**
-     * Icon type. Used in icon build process.
-     */
-    type?: 'utility' | 'global';
     /**
      * Sets a margin on the fallback legacy icon.
      */
     LEGACY_margin?: string;
 }
+export interface NewCoreIconProps extends BaseNewIconProps, NewCoreGlyphProps, IconInternalGlyphProps {
+    type?: 'core';
+}
+export interface NewUtilityIconProps extends BaseNewIconProps, NewUtilityGlyphProps, IconInternalGlyphProps {
+    type: 'utility';
+}
+export type NewIconProps = NewUtilityIconProps | NewCoreIconProps;
 export type IconTileAppearance = 'gray' | 'blue' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'magenta' | 'purple' | 'grayBold' | 'blueBold' | 'tealBold' | 'greenBold' | 'limeBold' | 'yellowBold' | 'orangeBold' | 'redBold' | 'magentaBold' | 'purpleBold';
 export type IconTileSize = '16' | '24' | '32' | '40' | '48';
 export interface IconTileProps {
     /**
      * The icon to display
      */
-    icon: ComponentType<NewIconProps>;
+    icon: ComponentType<NewUtilityIconProps> | ComponentType<NewCoreIconProps>;
     /**
      * The label for the icon
      */
@@ -195,7 +211,7 @@ type IconMigrationResult = {
 export type IconMigrationSizeGuidance = '16-icon-tile' | '24-icon-tile' | '32-icon-tile' | '48-icon-tile' | 'swap' | 'swap-slight-visual-change' | 'swap-visual-change' | 'swap-size-shift-utility' | 'product-icon' | 'not-recommended' | 'icon-tile' | 'top-nav' | 'icon-lab' | 'no-larger-size';
 export type IconMigrationMap = Record<string, IconMigrationResult>;
 export type IconFacadeProps = IconProps & {
-    newIcon?: React.ComponentType<NewIconProps>;
+    newIcon?: React.ComponentType<NewUtilityIconProps> | React.ComponentType<NewCoreIconProps>;
     iconType?: NewIconProps['type'];
 };
 export {};

package/dist/types-ts4.5/components/icon-facade.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { NewIconProps } from '../types';
+import type { NewCoreIconProps, NewUtilityIconProps } from '../types';
 /**
  * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
  *
@@ -9,7 +9,7 @@ import type { NewIconProps } from '../types';
  * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
  */
 export declare const IconFacade: React.NamedExoticComponent<import("../types").IconProps & {
-    newIcon?: React.ComponentType<NewIconProps> | undefined;
-    iconType?: "utility" | "global" | undefined;
+    newIcon?: React.ComponentType<NewUtilityIconProps> | React.ComponentType<NewCoreIconProps> | undefined;
+    iconType?: "core" | "utility" | undefined;
 }>;
 export default IconFacade;

package/dist/types-ts4.5/components/icon-new.d.ts

@@ -4,13 +4,13 @@ import type { NewIconProps } from '../types';
  * We are hiding this props from consumers as it's reserved
  * for use by Icon Tile.
  */
-export interface InternalIconPropsNew extends NewIconProps {
+export type InternalIconPropsNew = NewIconProps & {
     /**
      * @internal NOT FOR PUBLIC USE.
      * Sets whether the icon should inherit size from a parent. Used by Icon Tile.
      */
     shouldScale?: boolean;
-}
+};
 /**
  * __Icon__
  *

package/dist/types-ts4.5/entry-points/base-new.d.ts

@@ -1,2 +1,2 @@
 export { default, Icon } from '../components/icon-new';
-export type { NewIconProps } from '../types';
+export type { NewIconProps, NewCoreIconProps, NewUtilityIconProps } from '../types';

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -1 +1 @@
-export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, IconMigrationMap as UNSAFE_IconMigrationMap, } from '../types';
+export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, NewUtilityIconProps as UNSAFE_NewUtilityIconProps, NewCoreIconProps as UNSAFE_NewCoreIconProps, IconMigrationMap as UNSAFE_IconMigrationMap, } from '../types';

package/dist/types-ts4.5/index.d.ts

@@ -4,4 +4,4 @@ export { default as SVG } from './components/svg';
 export { sizeMap as size, sizes } from './constants';
 export { default as Skeleton } from './components/skeleton';
 export { default as IconTile } from './components/icon-tile';
-export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, IconMigrationMap as UNSAFE_IconMigrationMap, } from './types';
+export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, NewUtilityIconProps as UNSAFE_NewUtilityIconProps, NewCoreIconProps as UNSAFE_NewCoreIconProps, IconMigrationMap as UNSAFE_IconMigrationMap, } from './types';

package/dist/types-ts4.5/types.d.ts

@@ -1,6 +1,8 @@
 import type { ComponentType, ReactElement, ReactNode, SVGProps as ReactSVGProps } from 'react';
 import type { IconColor, IconColorPressed, TextColor, TextColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
+export type IconSpacing = 'none' | 'spacious';
+export type UtilityIconSpacing = 'none' | 'spacious' | 'compact';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
     /**
      * provided to a custom glyph
@@ -46,13 +48,22 @@ export interface GlyphSizeProps {
      */
     size?: Size;
 }
-export interface NewGlyphSpacingProps {
+export interface NewCoreGlyphSpacingProps {
     /**
-     * Icons have only one available size, but can be displayed with additional spacing.
+     * Core Icons have only one available size, but can be displayed with additional spacing.
      * "none" is default, and allows the icon to be placed in buttons and allows the parent component to manage spacing.
      * "spacious" provides accessible spacing between the icon and other elements.
      */
-    spacing?: 'none' | 'spacious';
+    spacing?: IconSpacing;
+}
+export interface NewUtilityGlyphSpacingProps {
+    /**
+     * Utility Icons have only one available size, but can be displayed with additional spacing.
+     * "none" is default, and allows the icon to be placed in buttons and allows the parent component to manage spacing.
+     * "compact" provides accessible compact spacing between the icon and other elements.
+     * "spacious" provides accessible spacing between the icon and other elements.
+     */
+    spacing?: UtilityIconSpacing;
 }
 export interface OtherGlyphProps {
     /**
@@ -83,7 +94,9 @@ interface IconInternalGlyphProps {
 }
 export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
 }
-export interface NewGlyphProps extends OtherGlyphProps, NewGlyphSpacingProps, NewGlyphColorProps {
+export interface NewCoreGlyphProps extends OtherGlyphProps, NewCoreGlyphSpacingProps, NewGlyphColorProps {
+}
+export interface NewUtilityGlyphProps extends OtherGlyphProps, NewUtilityGlyphSpacingProps, NewGlyphColorProps {
 }
 export interface IconProps extends GlyphProps, IconInternalGlyphProps {
     /**
@@ -92,7 +105,7 @@ export interface IconProps extends GlyphProps, IconInternalGlyphProps {
      */
     glyph?: ComponentType<CustomGlyphProps>;
 }
-export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
+export interface BaseNewIconProps {
     /**
      * Legacy icon component to render when the icon refresh feature flag is turned off.
      * The legacy icon defaults to "medium" size, with `primaryColor` set to the value of the `color` prop.
@@ -111,22 +124,25 @@ export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
      * Size of the legacy fallback icon. Legacy icons default to "medium".
      */
     LEGACY_size?: Size;
-    /**
-     * Icon type. Used in icon build process.
-     */
-    type?: 'utility' | 'global';
     /**
      * Sets a margin on the fallback legacy icon.
      */
     LEGACY_margin?: string;
 }
+export interface NewCoreIconProps extends BaseNewIconProps, NewCoreGlyphProps, IconInternalGlyphProps {
+    type?: 'core';
+}
+export interface NewUtilityIconProps extends BaseNewIconProps, NewUtilityGlyphProps, IconInternalGlyphProps {
+    type: 'utility';
+}
+export type NewIconProps = NewUtilityIconProps | NewCoreIconProps;
 export type IconTileAppearance = 'gray' | 'blue' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'magenta' | 'purple' | 'grayBold' | 'blueBold' | 'tealBold' | 'greenBold' | 'limeBold' | 'yellowBold' | 'orangeBold' | 'redBold' | 'magentaBold' | 'purpleBold';
 export type IconTileSize = '16' | '24' | '32' | '40' | '48';
 export interface IconTileProps {
     /**
      * The icon to display
      */
-    icon: ComponentType<NewIconProps>;
+    icon: ComponentType<NewUtilityIconProps> | ComponentType<NewCoreIconProps>;
     /**
      * The label for the icon
      */
@@ -195,7 +211,7 @@ type IconMigrationResult = {
 export type IconMigrationSizeGuidance = '16-icon-tile' | '24-icon-tile' | '32-icon-tile' | '48-icon-tile' | 'swap' | 'swap-slight-visual-change' | 'swap-visual-change' | 'swap-size-shift-utility' | 'product-icon' | 'not-recommended' | 'icon-tile' | 'top-nav' | 'icon-lab' | 'no-larger-size';
 export type IconMigrationMap = Record<string, IconMigrationResult>;
 export type IconFacadeProps = IconProps & {
-    newIcon?: React.ComponentType<NewIconProps>;
+    newIcon?: React.ComponentType<NewUtilityIconProps> | React.ComponentType<NewCoreIconProps>;
     iconType?: NewIconProps['type'];
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "22.20.1",
+	"version": "22.21.0",
 	"description": "An icon is a visual representation of a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,14 +39,14 @@
 		"@af/icon-build-process": "^2.1.0",
 		"@af/visual-regression": "*",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/ds-lib": "^2.6.0",
+		"@atlaskit/ds-lib": "^3.0.0",
 		"@atlaskit/logo": "^14.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/toggle": "^13.4.0",
-		"@atlaskit/tooltip": "^18.7.0",
+		"@atlaskit/tooltip": "^18.8.0",
 		"@atlaskit/visual-regression": "*",
 		"@babel/core": "7.24.9",
 		"@emotion/babel-preset-css-prop": "^10.0.7",
@@ -108,7 +108,7 @@
 		".": "./src/index.tsx"
 	},
 	"platform-feature-flags": {
-		"platform.design-system-team.enable-new-icons": {
+		"platform-visual-refresh-icons": {
 			"type": "boolean",
 			"showOnWebsiteForTransitiveDependencies": true
 		},
@@ -121,6 +121,9 @@
 		},
 		"platform-design-system-new-icon-default-color-2": {
 			"type": "boolean"
+		},
+		"platform-visual-refresh-icons-facade-button-fix": {
+			"type": "boolean"
 		}
 	}
 }

package/utility/add.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d6358924c0c81b5614cc665654b75038>>
+ * @codegen <<SignedSource::fcabb9c6976a15a2ead9bd6a9986f272>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const AddIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default AddIcon;

package/utility/arrow-down.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a37f5f3d92e63232532970cd1a91de97>>
+ * @codegen <<SignedSource::a72241454c376dfe0e5ab7b530990e8d>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ArrowDownIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ArrowDownIcon;

package/utility/arrow-left.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::25bff349f2cc2fc211a9cceeb8a6e8cb>>
+ * @codegen <<SignedSource::71026353709d110d43127de022eb62ae>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ArrowLeftIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ArrowLeftIcon;

package/utility/arrow-right.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1572de0a8ffc11b81b024ab9d713a612>>
+ * @codegen <<SignedSource::c3ecdb28bb13c71a6efd246282e6574a>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ArrowRightIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ArrowRightIcon;

package/utility/arrow-up.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1be91662bae25b5721e89c71a70ca1c3>>
+ * @codegen <<SignedSource::2f18730c7de534ec7b48df75f63c9c6e>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ArrowUpIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ArrowUpIcon;

package/utility/check-circle.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f2d06be614c131b3b4a66c2b0f4b529a>>
+ * @codegen <<SignedSource::6bed33a679b2ce96dd7f22900154458d>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const CheckCircleIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default CheckCircleIcon;

package/utility/check-mark.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ec2e26d42a22478e3f4bcc8933fa28b5>>
+ * @codegen <<SignedSource::ee0926f0a4d4c30b73768d9172b28f6f>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const CheckMarkIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default CheckMarkIcon;

package/utility/chevron-down.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9e76c3cb6f0f3b7e2d89cd675ada1691>>
+ * @codegen <<SignedSource::590f58df6a9d24d8473cd7f3b3d346a0>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ChevronDownIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ChevronDownIcon;

package/utility/chevron-left.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8e2a4cb2dbbcd6763dd7cca1979a4a13>>
+ * @codegen <<SignedSource::7f47c412f54ad5e9ea9c4f8f014b7872>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ChevronLeftIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ChevronLeftIcon;

package/utility/chevron-right.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0187bc0f36f47b9a3d59c788f17dc31>>
+ * @codegen <<SignedSource::239e792e059f3b19d56eaa7bdbaa96b3>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ChevronRightIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ChevronRightIcon;

package/utility/chevron-up.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::02baf44ed8ce4ec044f81028ad58a7c0>>
+ * @codegen <<SignedSource::94cc55a260a759b9ae83ce9bb0670794>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ChevronUpIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ChevronUpIcon;

package/utility/cross-circle.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c0e3653344070de9417929716432c254>>
+ * @codegen <<SignedSource::9dbb78dc751043a46a70ea72b03c6b66>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const CrossCircleIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default CrossCircleIcon;

package/utility/cross.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::154c01402933eb3a9ba571b0fc100cf7>>
+ * @codegen <<SignedSource::d32e9f179b32efb11c32da8902ad44b3>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const CrossIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default CrossIcon;

package/utility/drag-handle.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::122487c97142e9a4242ee95accac9bd8>>
+ * @codegen <<SignedSource::d5fc9d529ac9aecbd844bd79990f7a15>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewUtilityIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const DragHandleIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
+  (props: Omit<NewUtilityIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default DragHandleIcon;