@atlaskit/icon 22.1.1 → 22.3.0

package/dist/esm/metadata-utility.js

@@ -0,0 +1,208 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by the build process.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ *
+ * To change the format of this file, modify build/icon/createIconDocs.tsx.
+ * Add synonyms via the 'synonyms' parameter.
+ */
+
+var metadata = {
+  add: {
+    keywords: ['add', 'plus', 'create', 'new', 'icon', 'utility', 'create', 'plus'],
+    componentName: 'AddIcon',
+    package: '@atlaskit/icon/utility/add',
+    oldName: 'AddIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for creating and adding an object as a secondary action within a Menu Item.'
+  },
+  'check-circle': {
+    keywords: ['check-circle', 'checkcircle', 'tick', 'icon', 'utility', 'tick', 'yes', 'success', 'filled'],
+    componentName: 'CheckCircleIcon',
+    package: '@atlaskit/icon/utility/check-circle',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  },
+  'check-mark': {
+    keywords: ['check-mark', 'checkmark', 'icon', 'utility', 'Known uses: table cells', 'checkboxes.'],
+    componentName: 'CheckMarkIcon',
+    package: '@atlaskit/icon/utility/check-mark',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'TBD'
+  },
+  'chevron-down': {
+    keywords: ['chevron-down', 'chevrondown', 'expand', 'collapse', 'icon', 'utility', 'accordion', 'down'],
+    componentName: 'ChevronDownIcon',
+    package: '@atlaskit/icon/utility/chevron-down',
+    oldName: 'ChevronDownIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for dropdown menus, selects, accordions, and expands.'
+  },
+  'chevron-left': {
+    keywords: ['chevron-left', 'chevronleft', 'back', 'previous', 'icon', 'utility', 'less than', '<', 'previous'],
+    componentName: 'ChevronLeftIcon',
+    package: '@atlaskit/icon/utility/chevron-left',
+    oldName: 'ChevronLeftIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for collapse side nav and to indicate previous in dates.'
+  },
+  'chevron-right': {
+    keywords: ['chevron-right', 'chevronright', 'forward', 'next', 'icon', 'utility', 'greater than', '>', 'next'],
+    componentName: 'ChevronRightIcon',
+    package: '@atlaskit/icon/utility/chevron-right',
+    oldName: 'ChevronRightIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for menu fly-outs and to indicate next in dates.'
+  },
+  'chevron-up': {
+    keywords: ['chevron-up', 'chevronup', 'expand', 'collapse', 'icon', 'utility', 'up', 'accordion'],
+    componentName: 'ChevronUpIcon',
+    package: '@atlaskit/icon/utility/chevron-up',
+    oldName: 'ChevronUpIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for accordions.'
+  },
+  cross: {
+    keywords: ['cross', 'close', 'x', 'cancel', 'icon', 'utility', 'remove', 'clear', 'x'],
+    componentName: 'CrossIcon',
+    package: '@atlaskit/icon/utility/cross',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Known uses: remove tag.'
+  },
+  'cross-circle': {
+    keywords: ['cross-circle', 'crosscircle', 'close', 'x', 'cancel', 'icon', 'utility', 'x', 'exit', 'clear', 'no', 'filled', 'form'],
+    componentName: 'CrossCircleIcon',
+    package: '@atlaskit/icon/utility/cross-circle',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  },
+  error: {
+    keywords: ['error', 'warning', 'alert', 'icon', 'utility', 'filled', 'status', 'form', 'helper'],
+    componentName: 'ErrorIcon',
+    package: '@atlaskit/icon/utility/error',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  },
+  information: {
+    keywords: ['information', 'icon', 'utility', 'info', 'filled', 'helper', 'tip', 'form'],
+    componentName: 'InformationIcon',
+    package: '@atlaskit/icon/utility/information',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  },
+  'link-external': {
+    keywords: ['link-external', 'linkexternal', 'icon', 'utility', 'new tab', 'new window', 'open in', 'url', 'hyperlink', 'www', 'http', 'https', 'website', 'external', 'shortcut', 'diagonal arrow', 'secondary', 'tertiary'],
+    componentName: 'LinkExternalIcon',
+    package: '@atlaskit/icon/utility/link-external',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for links that open up a new tab as a secondary/tertiary action.'
+  },
+  'lock-locked': {
+    keywords: ['lock-locked', 'locklocked', 'icon', 'utility', 'secondary', 'tertiary', 'permissions', 'no access', 'restricted', 'security', 'secure', 'forbidden', 'authentication'],
+    componentName: 'LockLockedIcon',
+    package: '@atlaskit/icon/utility/lock-locked',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for indicating something is locked in the side navigation Menu Item.'
+  },
+  'lock-unlocked': {
+    keywords: ['lock-unlocked', 'lockunlocked', 'icon', 'utility', 'secondary', 'tertiary', 'open permissions', 'unrestricted access', 'security', 'insecure', 'authentication'],
+    componentName: 'LockUnlockedIcon',
+    package: '@atlaskit/icon/utility/lock-unlocked',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for indicating something is locked in the side navigation Menu Item.'
+  },
+  'show-more-horizontal': {
+    keywords: ['show-more-horizontal', 'showmorehorizontal', 'icon', 'utility', 'ellipses', 'three dots', 'meatball', 'more actions', 'secondary', 'tertiary'],
+    componentName: 'ShowMoreHorizontalIcon',
+    package: '@atlaskit/icon/utility/show-more-horizontal',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for secondary/tertiary more action menus.'
+  },
+  'show-more-vertical': {
+    keywords: ['show-more-vertical', 'showmorevertical', 'icon', 'utility', 'three dots', 'kebab', 'more actions', 'secondary', 'tertiary'],
+    componentName: 'ShowMoreVerticalIcon',
+    package: '@atlaskit/icon/utility/show-more-vertical',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for secondary/tertiary action menus, traditionally on mobile.'
+  },
+  'star-starred': {
+    keywords: ['star-starred', 'starstarred', 'icon', 'utility', 'favourite', 'star', 'starred', 'filled', 'menu', 'secondary', 'tertiary'],
+    componentName: 'StarStarredIcon',
+    package: '@atlaskit/icon/utility/star-starred',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for starred or favourited objects as a secondary/tertiary action.'
+  },
+  'star-unstarred': {
+    keywords: ['star-unstarred', 'starunstarred', 'icon', 'utility', 'favourite', 'star', 'form', 'secondary', 'tertiary'],
+    componentName: 'StarUnstarredIcon',
+    package: '@atlaskit/icon/utility/star-unstarred',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for starring or favoriting objects as a secondary/tertiary action.'
+  },
+  warning: {
+    keywords: ['warning', 'error', 'alert', 'icon', 'utility', 'alert', 'danger', 'triangle', 'filled', 'secondary', 'tertiary'],
+    componentName: 'WarningIcon',
+    package: '@atlaskit/icon/utility/warning',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  }
+};
+export default metadata;

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+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 {
+    /**
+     * @internal NOT FOR PUBLIC USE.
+     * Sets whether the icon should inherit size from a parent. Used by Icon Tile.
+     */
+    shouldScale?: boolean;
+}
+/**
+ * __Icon__
+ *
+ * An icon is used as a visual representation of common actions and commands to provide context.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+export declare const Icon: import("react").NamedExoticComponent<NewIconProps>;
+export default Icon;

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

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { type IconTileProps } from '../types';
+/**
+ * __IconTile__ -- ⚠️ Experimental ⚠️
+ *
+ * An icon tile is used to present an icon with a background color.
+ * Icon tiles, unlike standard icons, can scale up and down to provide greater emphasis.
+ *
+ * This component is currently in an experimental state and is subject to change in minor or patch releases.
+ *
+ */
+export default function IconTile(props: IconTileProps): jsx.JSX.Element;

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

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

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

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

package/dist/types/index.d.ts

@@ -1,5 +1,7 @@
 export { default } from './components/icon';
+export { default as UNSAFE_IconNew } from './components/icon-new';
 export { default as SVG } from './components/svg';
 export { sizeMap as size, sizes } from './constants';
 export { default as Skeleton } from './components/skeleton';
-export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, } from './types';
+export { default as IconTile } from './components/icon-tile';
+export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, } from './types';

package/dist/types/metadata-core.d.ts

@@ -0,0 +1,22 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by the build process.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ *
+ * To change the format of this file, modify build/icon/createIconDocs.tsx.
+ * Add synonyms via the 'synonyms' parameter.
+ */
+interface Data {
+    keywords: string[];
+    componentName: string;
+    package: string;
+    oldName?: string | string[];
+    categorization?: string;
+    location?: string;
+    team?: string;
+    type?: string;
+    usage?: string;
+}
+declare const metadata: Record<string, Data>;
+export default metadata;

package/dist/types/metadata-utility.d.ts

@@ -0,0 +1,22 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by the build process.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ *
+ * To change the format of this file, modify build/icon/createIconDocs.tsx.
+ * Add synonyms via the 'synonyms' parameter.
+ */
+interface Data {
+    keywords: string[];
+    componentName: string;
+    package: string;
+    oldName?: string | string[];
+    categorization?: string;
+    location?: string;
+    team?: string;
+    type?: string;
+    usage?: string;
+}
+declare const metadata: Record<string, Data>;
+export default metadata;

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
+import type { IconColor } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
     /**
@@ -26,6 +27,17 @@ export interface GlyphColorProps {
      */
     secondaryColor?: string;
 }
+/**
+ * NOTE: we want to move away from icons using text colors and make the icon tokens darker - so currentColor will eventually go away, and
+ * we will be shifting existing usages down (`color.text` -> `color.icon` -> `color.icon.`) via a codemod.
+ * For now, icon defaults to `color.text` under the hood to emulate the darker appearance.
+ */
+export interface NewGlyphColorProps {
+    /**
+     * Color for the icon. Supports any icon design token, or 'currentColor' to inherit the current text color.
+     */
+    color?: IconColor | 'currentColor';
+}
 export interface GlyphSizeProps {
     /**
      * There are three icon sizes – small (16px), medium (24px), and large (32px).
@@ -34,6 +46,14 @@ export interface GlyphSizeProps {
      */
     size?: Size;
 }
+export interface NewGlyphSpacingProps {
+    /**
+     * 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';
+}
 export interface OtherGlyphProps {
     /**
      * Text used to describe what the icon is in context.
@@ -48,21 +68,69 @@ export interface OtherGlyphProps {
      */
     testId?: string;
 }
+interface IconInternalGlyphProps {
+    /**
+     * @deprecated
+     * Custom icon string that should contain an SVG element with set `viewBox`,
+     * `width`, and `height` attributes.
+     * It's recommended to use the `glyph` prop instead.
+     */
+    dangerouslySetGlyph?: string;
+}
 export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
 }
-export interface IconProps extends GlyphProps {
+export interface NewGlyphProps extends OtherGlyphProps, NewGlyphSpacingProps, NewGlyphColorProps {
+}
+export interface IconProps extends GlyphProps, IconInternalGlyphProps {
     /**
      * Custom icon component that returns an SVG element with set `viewBox`,
      * `width`, and `height` props.
      */
     glyph?: ComponentType<CustomGlyphProps>;
+}
+export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
     /**
-     * @deprecated
-     * Custom icon string that should contain an SVG element with set `viewBox`,
-     * `width`, and `height` attributes.
-     * It's recommended to use the `glyph` prop instead.
+     * Legacy icon component to render when feature flag turned off.
+     * The legacy icon defaults to "medium" size, with `primaryColor` set to the value of the `color` prop.
      */
-    dangerouslySetGlyph?: string;
+    LEGACY_fallbackIcon?: ComponentType<IconProps>;
+    /**
+     * Secondary color to be rendered by the legacy fallback icon
+     */
+    LEGACY_secondaryColor?: string;
+    /**
+     * Size of the legacy fallback icon. Legacy icons default to "medium".
+     */
+    LEGACY_size?: 'small' | 'medium';
+    /**
+     * Icon type. Used in icon build process.
+     */
+    type?: 'utility' | 'global';
+}
+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>;
+    /**
+     * The label for the icon
+     */
+    label: string;
+    /**
+     * The appearance of the tile
+     */
+    appearance: IconTileAppearance;
+    /**
+     * Size of the tile, in pixels. Defaults to "24".
+     * In a future release, semantic names will be introduced, and number values will be deprecated.
+     */
+    size?: IconTileSize;
+    /**
+     * Shape of the tile background. Defaults to "square"
+     */
+    shape?: 'square' | 'circle';
 }
 export interface SkeletonProps {
     color?: string;
@@ -80,3 +148,4 @@ export interface SVGProps extends GlyphProps {
      */
     children?: ReactNode;
 }
+export {};

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+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 {
+    /**
+     * @internal NOT FOR PUBLIC USE.
+     * Sets whether the icon should inherit size from a parent. Used by Icon Tile.
+     */
+    shouldScale?: boolean;
+}
+/**
+ * __Icon__
+ *
+ * An icon is used as a visual representation of common actions and commands to provide context.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+export declare const Icon: import("react").NamedExoticComponent<NewIconProps>;
+export default Icon;

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

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import { type IconTileProps } from '../types';
+/**
+ * __IconTile__ -- ⚠️ Experimental ⚠️
+ *
+ * An icon tile is used to present an icon with a background color.
+ * Icon tiles, unlike standard icons, can scale up and down to provide greater emphasis.
+ *
+ * This component is currently in an experimental state and is subject to change in minor or patch releases.
+ *
+ */
+export default function IconTile(props: IconTileProps): jsx.JSX.Element;

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

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

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

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

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

@@ -1,5 +1,7 @@
 export { default } from './components/icon';
+export { default as UNSAFE_IconNew } from './components/icon-new';
 export { default as SVG } from './components/svg';
 export { sizeMap as size, sizes } from './constants';
 export { default as Skeleton } from './components/skeleton';
-export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, } from './types';
+export { default as IconTile } from './components/icon-tile';
+export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, } from './types';

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

@@ -0,0 +1,22 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by the build process.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ *
+ * To change the format of this file, modify build/icon/createIconDocs.tsx.
+ * Add synonyms via the 'synonyms' parameter.
+ */
+interface Data {
+    keywords: string[];
+    componentName: string;
+    package: string;
+    oldName?: string | string[];
+    categorization?: string;
+    location?: string;
+    team?: string;
+    type?: string;
+    usage?: string;
+}
+declare const metadata: Record<string, Data>;
+export default metadata;

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

@@ -0,0 +1,22 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by the build process.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ *
+ * To change the format of this file, modify build/icon/createIconDocs.tsx.
+ * Add synonyms via the 'synonyms' parameter.
+ */
+interface Data {
+    keywords: string[];
+    componentName: string;
+    package: string;
+    oldName?: string | string[];
+    categorization?: string;
+    location?: string;
+    team?: string;
+    type?: string;
+    usage?: string;
+}
+declare const metadata: Record<string, Data>;
+export default metadata;

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

@@ -1,4 +1,5 @@
 import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
+import type { IconColor } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
     /**
@@ -26,6 +27,17 @@ export interface GlyphColorProps {
      */
     secondaryColor?: string;
 }
+/**
+ * NOTE: we want to move away from icons using text colors and make the icon tokens darker - so currentColor will eventually go away, and
+ * we will be shifting existing usages down (`color.text` -> `color.icon` -> `color.icon.`) via a codemod.
+ * For now, icon defaults to `color.text` under the hood to emulate the darker appearance.
+ */
+export interface NewGlyphColorProps {
+    /**
+     * Color for the icon. Supports any icon design token, or 'currentColor' to inherit the current text color.
+     */
+    color?: IconColor | 'currentColor';
+}
 export interface GlyphSizeProps {
     /**
      * There are three icon sizes – small (16px), medium (24px), and large (32px).
@@ -34,6 +46,14 @@ export interface GlyphSizeProps {
      */
     size?: Size;
 }
+export interface NewGlyphSpacingProps {
+    /**
+     * 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';
+}
 export interface OtherGlyphProps {
     /**
      * Text used to describe what the icon is in context.
@@ -48,21 +68,69 @@ export interface OtherGlyphProps {
      */
     testId?: string;
 }
+interface IconInternalGlyphProps {
+    /**
+     * @deprecated
+     * Custom icon string that should contain an SVG element with set `viewBox`,
+     * `width`, and `height` attributes.
+     * It's recommended to use the `glyph` prop instead.
+     */
+    dangerouslySetGlyph?: string;
+}
 export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
 }
-export interface IconProps extends GlyphProps {
+export interface NewGlyphProps extends OtherGlyphProps, NewGlyphSpacingProps, NewGlyphColorProps {
+}
+export interface IconProps extends GlyphProps, IconInternalGlyphProps {
     /**
      * Custom icon component that returns an SVG element with set `viewBox`,
      * `width`, and `height` props.
      */
     glyph?: ComponentType<CustomGlyphProps>;
+}
+export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
     /**
-     * @deprecated
-     * Custom icon string that should contain an SVG element with set `viewBox`,
-     * `width`, and `height` attributes.
-     * It's recommended to use the `glyph` prop instead.
+     * Legacy icon component to render when feature flag turned off.
+     * The legacy icon defaults to "medium" size, with `primaryColor` set to the value of the `color` prop.
      */
-    dangerouslySetGlyph?: string;
+    LEGACY_fallbackIcon?: ComponentType<IconProps>;
+    /**
+     * Secondary color to be rendered by the legacy fallback icon
+     */
+    LEGACY_secondaryColor?: string;
+    /**
+     * Size of the legacy fallback icon. Legacy icons default to "medium".
+     */
+    LEGACY_size?: 'small' | 'medium';
+    /**
+     * Icon type. Used in icon build process.
+     */
+    type?: 'utility' | 'global';
+}
+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>;
+    /**
+     * The label for the icon
+     */
+    label: string;
+    /**
+     * The appearance of the tile
+     */
+    appearance: IconTileAppearance;
+    /**
+     * Size of the tile, in pixels. Defaults to "24".
+     * In a future release, semantic names will be introduced, and number values will be deprecated.
+     */
+    size?: IconTileSize;
+    /**
+     * Shape of the tile background. Defaults to "square"
+     */
+    shape?: 'square' | 'circle';
 }
 export interface SkeletonProps {
     color?: string;
@@ -80,3 +148,4 @@ export interface SVGProps extends GlyphProps {
      */
     children?: ReactNode;
 }
+export {};

package/metadata/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/metadata.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/entry-points/metadata.d.ts"
       ]