@atlaskit/icon 22.27.0 → 23.0.0

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import type { NewIconProps } from '../types';
+import type { UNSAFE_NewGlyphProps } from '../types';
 /**
  * We are hiding this props from consumers as it's reserved
  * for use by Icon Tile.
  */
-export type InternalIconPropsNew = NewIconProps & {
+export type InternalIconPropsNew = UNSAFE_NewGlyphProps & {
     /**
      * @internal NOT FOR PUBLIC USE.
      * Sets whether the icon should inherit size from a parent. Used by Icon Tile.
@@ -19,5 +19,5 @@ export type InternalIconPropsNew = NewIconProps & {
  * - [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 declare const Icon: import("react").NamedExoticComponent<UNSAFE_NewGlyphProps>;
 export default Icon;

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

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * To change the format of this file, modify `UNSAFE_createDeprecatedIconDocs` in icon-build-process/src/create-deprecated-icon-docs.tsx.
+ * To change the format of this file, modify `createDeprecatedIconDocs` in icon-build-process/src/create-deprecated-icon-docs.tsx.
  *
- * @codegen <<SignedSource::bdbeb289627e24a55c8fe9daf29c6b55>>
+ * @codegen <<SignedSource::8445ed95dffea52ddea417fc5752ff90>>
  * @codegenCommand yarn build:icon-glyphs
  */
 declare const deprecatedIcons: Record<string, {

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

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * To change the format of this file, modify `UNSAFE_createDeprecatedIconDocs` in icon-build-process/src/create-deprecated-icon-docs.tsx.
+ * To change the format of this file, modify `createDeprecatedIconDocs` in icon-build-process/src/create-deprecated-icon-docs.tsx.
  *
- * @codegen <<SignedSource::bdbeb289627e24a55c8fe9daf29c6b55>>
+ * @codegen <<SignedSource::8445ed95dffea52ddea417fc5752ff90>>
  * @codegenCommand yarn build:icon-glyphs
  */
 declare const deprecatedIcons: Record<string, {

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

@@ -1,3 +1,3 @@
 export { default, Icon } from '../components/icon';
-export { IconFacade as UNSAFE_IconFacade } from '../components/icon-facade';
+export { IconFacade } from '../components/icon-facade';
 export type { IconProps } from '../types';

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

@@ -1 +1 @@
-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';
+export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps, NewUtilityIconProps, NewCoreIconProps, IconMigrationMap, } from '../types';

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 export { default } from './components/icon';
-export { default as UNSAFE_IconNew } from './components/icon-new';
+export { default as 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 { default as IconTile } from './components/icon-tile';
-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';
+export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps, NewUtilityIconProps, NewCoreIconProps, IconMigrationMap, } from './types';

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

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * To change the format of this file, modify `UNSAFE_createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
+ * To change the format of this file, modify `createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::2bc63b966f9ddb3b49da0d4179774c48>>
+ * @codegen <<SignedSource::7ee5d608c596d6e618679140e4d13235>>
  * @codegenCommand yarn build:icon-glyphs
  */
 interface metadata {

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

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * To change the format of this file, modify `UNSAFE_createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
+ * To change the format of this file, modify `createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::eae29e6af1dc94a7dd24d2f620ae9efc>>
+ * @codegen <<SignedSource::20ebb8ddb0be6095662c7520a06da9a5>>
  * @codegenCommand yarn build:icon-glyphs
  */
 interface metadata {

package/dist/types/types.d.ts

@@ -37,7 +37,7 @@ export interface GlyphColorProps {
 export interface NewGlyphColorProps {
     /**
      * Color for the icon. Supports any icon or text design token, or 'currentColor' to inherit the current text color.
-     * Defaults to `currentColor`, inheriting the current text color.
+     * Defaults to `currentColor`.
      */
     color?: IconColor | IconColorPressed | Exclude<TextColor, 'transparent'> | TextColorPressed | 'currentColor';
 }
@@ -51,18 +51,13 @@ export interface GlyphSizeProps {
 }
 export interface NewCoreGlyphSpacingProps {
     /**
-     * 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.
+     * Core icons (16px) have no additional spacing by default, but can be set to "spacious", creating a 24px bounding box.
      */
     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.
+     * Adds padding around the icon. Utility icons (12px) have no spacing by default, but can be set to "compact" (16px bounding box) or "spacious" (24px bounding box).
      */
     spacing?: UtilityIconSpacing;
 }
@@ -154,13 +149,16 @@ export interface BaseNewIconProps {
      */
     LEGACY_margin?: string;
 }
-export interface NewCoreIconProps extends BaseNewIconProps, NewCoreGlyphProps, IconInternalGlyphProps {
+export interface UNSAFE_NewCoreGlyphProps extends BaseNewIconProps, NewCoreGlyphProps, IconInternalGlyphProps {
     type?: 'core';
 }
-export interface NewUtilityIconProps extends BaseNewIconProps, NewUtilityGlyphProps, IconInternalGlyphProps {
+export interface UNSAFE_NewUtilityGlyphProps extends BaseNewIconProps, NewUtilityGlyphProps, IconInternalGlyphProps {
     type: 'utility';
 }
-export type NewIconProps = NewUtilityIconProps | NewCoreIconProps;
+export type NewCoreIconProps = Omit<UNSAFE_NewCoreGlyphProps, 'dangerouslySetGlyph' | 'type'>;
+export type NewUtilityIconProps = Omit<UNSAFE_NewUtilityGlyphProps, 'dangerouslySetGlyph' | 'type'>;
+export type UNSAFE_NewGlyphProps = UNSAFE_NewUtilityGlyphProps | UNSAFE_NewCoreGlyphProps;
+export type NewIconProps = Omit<UNSAFE_NewGlyphProps, 'dangerouslySetGlyph' | 'type'>;
 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 {
@@ -189,6 +187,11 @@ export interface IconTileProps {
      * Legacy component to render when the icon refresh feature flag is turned off.
      */
     LEGACY_fallbackComponent?: ReactElement;
+    /**
+     * A unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
 }
 export interface SkeletonProps {
     color?: string;
@@ -237,7 +240,7 @@ export type IconMigrationSizeGuidance = '16-icon-tile' | '24-icon-tile' | '32-ic
 export type IconMigrationMap = Record<string, IconMigrationResult>;
 export type IconFacadeProps = IconProps & {
     newIcon?: React.ComponentType<NewUtilityIconProps> | React.ComponentType<NewCoreIconProps>;
-    iconType?: NewIconProps['type'];
+    iconType?: UNSAFE_NewGlyphProps['type'];
 };
 interface LEGACY_Data {
     keywords: string[];

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

@@ -1,5 +1,4 @@
 import React from 'react';
-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 +8,7 @@ import type { NewCoreIconProps, NewUtilityIconProps } 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<NewUtilityIconProps> | React.ComponentType<NewCoreIconProps> | undefined;
+    newIcon?: React.ComponentType<import("../types").NewUtilityIconProps> | React.ComponentType<import("../types").NewCoreIconProps> | undefined;
     iconType?: "core" | "utility" | undefined;
 }>;
 export default IconFacade;

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import type { NewIconProps } from '../types';
+import type { UNSAFE_NewGlyphProps } from '../types';
 /**
  * We are hiding this props from consumers as it's reserved
  * for use by Icon Tile.
  */
-export type InternalIconPropsNew = NewIconProps & {
+export type InternalIconPropsNew = UNSAFE_NewGlyphProps & {
     /**
      * @internal NOT FOR PUBLIC USE.
      * Sets whether the icon should inherit size from a parent. Used by Icon Tile.
@@ -19,5 +19,5 @@ export type InternalIconPropsNew = NewIconProps & {
  * - [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 declare const Icon: import("react").NamedExoticComponent<UNSAFE_NewGlyphProps>;
 export default Icon;

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

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * To change the format of this file, modify `UNSAFE_createDeprecatedIconDocs` in icon-build-process/src/create-deprecated-icon-docs.tsx.
+ * To change the format of this file, modify `createDeprecatedIconDocs` in icon-build-process/src/create-deprecated-icon-docs.tsx.
  *
- * @codegen <<SignedSource::bdbeb289627e24a55c8fe9daf29c6b55>>
+ * @codegen <<SignedSource::8445ed95dffea52ddea417fc5752ff90>>
  * @codegenCommand yarn build:icon-glyphs
  */
 declare const deprecatedIcons: Record<string, {

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

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * To change the format of this file, modify `UNSAFE_createDeprecatedIconDocs` in icon-build-process/src/create-deprecated-icon-docs.tsx.
+ * To change the format of this file, modify `createDeprecatedIconDocs` in icon-build-process/src/create-deprecated-icon-docs.tsx.
  *
- * @codegen <<SignedSource::bdbeb289627e24a55c8fe9daf29c6b55>>
+ * @codegen <<SignedSource::8445ed95dffea52ddea417fc5752ff90>>
  * @codegenCommand yarn build:icon-glyphs
  */
 declare const deprecatedIcons: Record<string, {

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

@@ -1,3 +1,3 @@
 export { default, Icon } from '../components/icon';
-export { IconFacade as UNSAFE_IconFacade } from '../components/icon-facade';
+export { IconFacade } from '../components/icon-facade';
 export type { IconProps } 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, NewUtilityIconProps as UNSAFE_NewUtilityIconProps, NewCoreIconProps as UNSAFE_NewCoreIconProps, IconMigrationMap as UNSAFE_IconMigrationMap, } from '../types';
+export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps, NewUtilityIconProps, NewCoreIconProps, IconMigrationMap, } from '../types';

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

@@ -1,7 +1,7 @@
 export { default } from './components/icon';
-export { default as UNSAFE_IconNew } from './components/icon-new';
+export { default as 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 { default as IconTile } from './components/icon-tile';
-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';
+export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps, NewUtilityIconProps, NewCoreIconProps, IconMigrationMap, } from './types';

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

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * To change the format of this file, modify `UNSAFE_createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
+ * To change the format of this file, modify `createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::2bc63b966f9ddb3b49da0d4179774c48>>
+ * @codegen <<SignedSource::7ee5d608c596d6e618679140e4d13235>>
  * @codegenCommand yarn build:icon-glyphs
  */
 interface metadata {

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

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * To change the format of this file, modify `UNSAFE_createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
+ * To change the format of this file, modify `createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::eae29e6af1dc94a7dd24d2f620ae9efc>>
+ * @codegen <<SignedSource::20ebb8ddb0be6095662c7520a06da9a5>>
  * @codegenCommand yarn build:icon-glyphs
  */
 interface metadata {

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

@@ -37,7 +37,7 @@ export interface GlyphColorProps {
 export interface NewGlyphColorProps {
     /**
      * Color for the icon. Supports any icon or text design token, or 'currentColor' to inherit the current text color.
-     * Defaults to `currentColor`, inheriting the current text color.
+     * Defaults to `currentColor`.
      */
     color?: IconColor | IconColorPressed | Exclude<TextColor, 'transparent'> | TextColorPressed | 'currentColor';
 }
@@ -51,18 +51,13 @@ export interface GlyphSizeProps {
 }
 export interface NewCoreGlyphSpacingProps {
     /**
-     * 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.
+     * Core icons (16px) have no additional spacing by default, but can be set to "spacious", creating a 24px bounding box.
      */
     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.
+     * Adds padding around the icon. Utility icons (12px) have no spacing by default, but can be set to "compact" (16px bounding box) or "spacious" (24px bounding box).
      */
     spacing?: UtilityIconSpacing;
 }
@@ -154,13 +149,16 @@ export interface BaseNewIconProps {
      */
     LEGACY_margin?: string;
 }
-export interface NewCoreIconProps extends BaseNewIconProps, NewCoreGlyphProps, IconInternalGlyphProps {
+export interface UNSAFE_NewCoreGlyphProps extends BaseNewIconProps, NewCoreGlyphProps, IconInternalGlyphProps {
     type?: 'core';
 }
-export interface NewUtilityIconProps extends BaseNewIconProps, NewUtilityGlyphProps, IconInternalGlyphProps {
+export interface UNSAFE_NewUtilityGlyphProps extends BaseNewIconProps, NewUtilityGlyphProps, IconInternalGlyphProps {
     type: 'utility';
 }
-export type NewIconProps = NewUtilityIconProps | NewCoreIconProps;
+export type NewCoreIconProps = Omit<UNSAFE_NewCoreGlyphProps, 'dangerouslySetGlyph' | 'type'>;
+export type NewUtilityIconProps = Omit<UNSAFE_NewUtilityGlyphProps, 'dangerouslySetGlyph' | 'type'>;
+export type UNSAFE_NewGlyphProps = UNSAFE_NewUtilityGlyphProps | UNSAFE_NewCoreGlyphProps;
+export type NewIconProps = Omit<UNSAFE_NewGlyphProps, 'dangerouslySetGlyph' | 'type'>;
 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 {
@@ -189,6 +187,11 @@ export interface IconTileProps {
      * Legacy component to render when the icon refresh feature flag is turned off.
      */
     LEGACY_fallbackComponent?: ReactElement;
+    /**
+     * A unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
 }
 export interface SkeletonProps {
     color?: string;
@@ -237,7 +240,7 @@ export type IconMigrationSizeGuidance = '16-icon-tile' | '24-icon-tile' | '32-ic
 export type IconMigrationMap = Record<string, IconMigrationResult>;
 export type IconFacadeProps = IconProps & {
     newIcon?: React.ComponentType<NewUtilityIconProps> | React.ComponentType<NewCoreIconProps>;
-    iconType?: NewIconProps['type'];
+    iconType?: UNSAFE_NewGlyphProps['type'];
 };
 interface LEGACY_Data {
     keywords: string[];

package/glyph/activity.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _dashboard = _interopRequireDefault(require("@atlaskit/icon/core/dashboard"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ActivityIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ActivityIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill="currentcolor" fill-rule="evenodd"><path fill-rule="nonzero" d="M19.004 17C19 17 19 7.006 19 7.006 19 7 4.996 7 4.996 7 5 7 5 16.994 5 16.994 5 17 19.004 17 19.004 17M3 7.006A2 2 0 0 1 4.995 5h14.01A2 2 0 0 1 21 7.006v9.988A2 2 0 0 1 19.005 19H4.995A2 2 0 0 1 3 16.994z"/><path d="M4 6h16v5H4zm5 2c0 .556.446 1 .995 1h8.01c.54 0 .995-.448.995-1 0-.556-.446-1-.995-1h-8.01C9.455 7 9 7.448 9 8M5 8c0 .556.448 1 1 1 .556 0 1-.448 1-1 0-.556-.448-1-1-1-.556 0-1 .448-1 1"/></g></svg>`
 }, props, {
   newIcon: _dashboard.default

package/glyph/add-circle.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AddCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const AddCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill-rule="evenodd"><circle cx="12" cy="12" r="10" fill="currentcolor"/><path fill="inherit" d="M11.046 7.958v3.088H7.958a.954.954 0 1 0 0 1.908h3.088v3.088a.954.954 0 1 0 1.908 0v-3.088h3.088a.954.954 0 1 0 0-1.908h-3.088V7.958a.954.954 0 1 0-1.908 0"/></g></svg>`
 }, props, {
   newIcon: _add.default

package/glyph/add-item.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/core/shortcut"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AddItemIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const AddItemIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill="currentcolor" fill-rule="evenodd"><path fill-rule="nonzero" d="M16.002 3H4.995A1.995 1.995 0 0 0 3 4.995v14.01C3 20.107 3.893 21 4.995 21h14.01A1.995 1.995 0 0 0 21 19.005V7.998 11h-2v8H5V5h8V3z"/><path d="M19 5V3.99A1 1 0 0 0 18 3c-.556 0-1 .444-1 .99V5h-1a1 1 0 0 0 0 2h1v1.01A1 1 0 0 0 18 9c.556 0 1-.444 1-.99V7h1a1 1 0 0 0 0-2z"/></g></svg>`
 }, props, {
   newIcon: _shortcut.default

package/glyph/add.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AddIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const AddIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentcolor" fill-rule="evenodd" d="M13 11V3.993A.997.997 0 0 0 12 3c-.556 0-1 .445-1 .993V11H3.993A.997.997 0 0 0 3 12c0 .557.445 1 .993 1H11v7.007c0 .548.448.993 1 .993.556 0 1-.445 1-.993V13h7.007A.997.997 0 0 0 21 12c0-.556-.445-1-.993-1z"/></svg>`
 }, props, {
   newIcon: _add.default

package/glyph/addon.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _app = _interopRequireDefault(require("@atlaskit/icon/core/app"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AddonIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const AddonIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill="currentcolor" fill-rule="evenodd"><path d="m5.376 6.455 5.248-3.104c.792-.469 1.963-.467 2.752 0l5.248 3.104C19.416 6.923 20 7.962 20 8.895v6.21c0 .936-.587 1.973-1.376 2.44l-5.248 3.104c-.792.469-1.963.467-2.752 0l-5.248-3.104C4.584 17.077 4 16.038 4 15.105v-6.21c0-.936.587-1.973 1.376-2.44m6.99-1.314c-.165-.098-.566-.098-.733 0L6.385 8.245c-.166.098-.367.454-.367.65v6.21c0 .195.2.551.367.65l5.248 3.104c.166.098.567.098.734 0l5.248-3.104c.166-.098.367-.454.367-.65v-6.21c0-.195-.2-.551-.367-.65z"/><path d="M12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8m0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/></g></svg>`
 }, props, {
   newIcon: _app.default

package/glyph/app-access.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _personAdded = _interopRequireDefault(require("@atlaskit/icon/core/person-added"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AppAccessIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const AppAccessIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill-rule="evenodd"><path fill="currentcolor" d="M12.682 12H5.01A2.006 2.006 0 0 0 3 14v4.446c0 2.162 4.836 2.951 8.368 2.368A5.98 5.98 0 0 1 10 17a6 6 0 0 1 2.682-5"/><circle cx="9" cy="7" r="4" fill="currentcolor"/><circle cx="16" cy="17" r="5" fill="currentcolor"/><path fill="inherit" d="M14.674 19.331c.36.36.941.36 1.3 0l2.758-2.763a.92.92 0 0 0-1.301-1.298l-2.108 2.11-.755-.754a.92.92 0 0 0-1.3 1.3z"/></g></svg>`
 }, props, {
   newIcon: _personAdded.default

package/glyph/app-switcher.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _appSwitcher = _interopRequireDefault(require("@atlaskit/icon/core/app-switcher"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AppSwitcherIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const AppSwitcherIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentcolor" fill-rule="evenodd" d="M4 5.01C4 4.451 4.443 4 5.01 4h1.98C7.549 4 8 4.443 8 5.01v1.98C8 7.549 7.557 8 6.99 8H5.01C4.451 8 4 7.557 4 6.99zm0 6c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98C8 13.549 7.557 14 6.99 14H5.01C4.451 14 4 13.557 4 12.99zm6-6c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98C14 7.549 13.557 8 12.99 8h-1.98C10.451 8 10 7.557 10 6.99zm0 6c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01zm6-6c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98C20 7.549 19.557 8 18.99 8h-1.98C16.451 8 16 7.557 16 6.99zm0 6c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01zm-12 6c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98C8 19.549 7.557 20 6.99 20H5.01C4.451 20 4 19.557 4 18.99zm6 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01zm6 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01z"/></svg>`
 }, props, {
   newIcon: _appSwitcher.default

package/glyph/archive.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _archiveBox = _interopRequireDefault(require("@atlaskit/icon/core/archive-box"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ArchiveIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ArchiveIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentcolor" fill-rule="evenodd" d="M19 3H4.85A2 2 0 0 0 3 5v4h1v10.45A1.67 1.67 0 0 0 5.77 21h12.46A1.67 1.67 0 0 0 20 19.45V9h1V5a2 2 0 0 0-2-2m-1 16H6V9h12zm1-12H5V5h14zm-4 7H9v-2h6z" clip-rule="evenodd"/></svg>`
 }, props, {
   newIcon: _archiveBox.default

package/glyph/arrow-down-circle.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ArrowDownCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ArrowDownCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill-rule="evenodd"><circle cx="12" cy="12" r="10" fill="currentcolor" fill-rule="nonzero"/><path fill="inherit" d="M10.994 8v5.586l-1.279-1.272a1.01 1.01 0 0 0-1.421 0 1 1 0 0 0 0 1.416l2.994 2.977a1.01 1.01 0 0 0 1.423 0l2.994-2.977a1 1 0 0 0 0-1.416 1.01 1.01 0 0 0-1.421 0l-1.279 1.272V8c0-.552-.45-1-1.005-1s-1.006.448-1.006 1"/></g></svg>`
 }, props, {
   newIcon: _arrowDown.default

package/glyph/arrow-down.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ArrowDownIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ArrowDownIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentcolor" fill-rule="evenodd" d="M11 6v9.586l-3.793-3.793a1 1 0 0 0-1.414 0c-.39.39-.39 1.024 0 1.415l5.5 5.499A1 1 0 0 0 12 19a1 1 0 0 0 .707-.293l5.5-5.499a1 1 0 1 0-1.414-1.415L13 15.586V6a1 1 0 0 0-2 0"/></svg>`
 }, props, {
   newIcon: _arrowDown.default

package/glyph/arrow-left-circle.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/arrow-left"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ArrowLeftCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ArrowLeftCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><circle cx="12" cy="12" r="10" fill="currentcolor"/><path fill="inherit" d="M16 10.995h-5.586l1.272-1.279a1.01 1.01 0 0 0 0-1.421.996.996 0 0 0-1.415 0l-2.978 2.994a1.01 1.01 0 0 0 0 1.423l2.978 2.993a1 1 0 0 0 1.415 0 1.01 1.01 0 0 0 0-1.421l-1.272-1.279H16c.552 0 1-.45 1-1.005s-.448-1.005-1-1.005"/></svg>`
 }, props, {
   newIcon: _arrowLeft.default

package/glyph/arrow-left.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/arrow-left"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ArrowLeftIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ArrowLeftIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentcolor" fill-rule="evenodd" d="M12.207 5.793a1 1 0 0 1 0 1.414L8.414 11H18a1 1 0 1 1 0 2H8.414l3.793 3.793a1 1 0 1 1-1.415 1.414l-5.499-5.5A1 1 0 0 1 5 12.028v-.057a1 1 0 0 1 .293-.678l5.499-5.5a1 1 0 0 1 1.415 0" clip-rule="evenodd"/></svg>`
 }, props, {
   newIcon: _arrowLeft.default

package/glyph/arrow-right-circle.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/core/arrow-right"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ArrowRightCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ArrowRightCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill-rule="evenodd"><circle cx="12" cy="12" r="10" fill="currentcolor" fill-rule="nonzero"/><path fill="inherit" d="M12.314 8.294a1.01 1.01 0 0 0 0 1.422l1.271 1.279H8c-.553 0-1.001.45-1.001 1.005S7.447 13.005 8 13.005h5.585l-1.271 1.279a1.01 1.01 0 0 0 0 1.422 1 1 0 0 0 1.415 0l2.978-2.995a1.01 1.01 0 0 0 0-1.422l-2.978-2.995a1 1 0 0 0-1.415 0"/></g></svg>`
 }, props, {
   newIcon: _arrowRight.default

package/glyph/arrow-right.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/core/arrow-right"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ArrowRightIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ArrowRightIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentcolor" fill-rule="evenodd" d="M11.793 5.793a1 1 0 0 0 0 1.414L15.586 11H6a1 1 0 0 0 0 2h9.586l-3.793 3.793a1 1 0 0 0 0 1.414c.39.39 1.024.39 1.415 0l5.499-5.5a1 1 0 0 0 .293-.679v-.057a1 1 0 0 0-.293-.678l-5.499-5.5a1 1 0 0 0-1.415 0"/></svg>`
 }, props, {
   newIcon: _arrowRight.default

package/glyph/arrow-up-circle.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ArrowUpCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ArrowUpCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill-rule="evenodd"><circle cx="12" cy="12" r="10" fill="currentcolor" fill-rule="nonzero"/><path fill="inherit" d="M11.288 7.293 8.294 10.27a1 1 0 0 0 0 1.416 1.01 1.01 0 0 0 1.421 0l1.279-1.272V16c0 .552.451 1 1.006 1s1.005-.448 1.005-1v-5.586l1.279 1.272a1.01 1.01 0 0 0 1.421 0 1 1 0 0 0 0-1.416l-2.994-2.977a1.01 1.01 0 0 0-1.423 0"/></g></svg>`
 }, props, {
   newIcon: _arrowUp.default

package/glyph/arrow-up.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ArrowUpIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const ArrowUpIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentcolor" fill-rule="evenodd" d="m11.293 5.293-5.5 5.499a1 1 0 0 0 0 1.415 1 1 0 0 0 1.414 0L11 8.414V18a1 1 0 0 0 2 0V8.414l3.793 3.793a1 1 0 1 0 1.414-1.415l-5.5-5.499A1 1 0 0 0 12 5a1 1 0 0 0-.707.293"/></svg>`
 }, props, {
   newIcon: _arrowUp.default

package/glyph/attachment.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _attachment = _interopRequireDefault(require("@atlaskit/icon/core/attachment"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AttachmentIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const AttachmentIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentcolor" fill-rule="evenodd" d="M11.643 17.965c-1.53 1.495-4.016 1.496-5.542.004a3.773 3.773 0 0 1 .002-5.412l7.147-6.985a2.316 2.316 0 0 1 3.233-.003c.893.873.895 2.282.004 3.153l-6.703 6.55a.653.653 0 0 1-.914-.008.62.62 0 0 1 0-.902l6.229-6.087a.94.94 0 0 0 0-1.353.995.995 0 0 0-1.384 0l-6.23 6.087a2.5 2.5 0 0 0 0 3.607 2.643 2.643 0 0 0 3.683.009l6.703-6.55a4.074 4.074 0 0 0-.003-5.859 4.306 4.306 0 0 0-6.002.003l-7.148 6.985a5.655 5.655 0 0 0-.001 8.118c2.29 2.239 6.015 2.238 8.31-.005l6.686-6.533a.94.94 0 0 0 0-1.353.995.995 0 0 0-1.384 0z"/></svg>`
 }, props, {
   newIcon: _attachment.default

package/glyph/audio-circle.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _audio = _interopRequireDefault(require("@atlaskit/icon/core/audio"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AudioCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const AudioCircleIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><circle cx="12" cy="12" r="10" fill="currentcolor"/><path fill="inherit" d="M16 9.283V13.6h-.003A1.5 1.5 0 1 1 14.5 12q.264.001.5.085v-2.08l-4 .431V14.6h-.003A1.5 1.5 0 0 1 8 14.5a1.5 1.5 0 0 1 2-1.415V9.034c0-.238.186-.451.432-.478l5.136-.553a.38.38 0 0 1 .432.384z"/></svg>`
 }, props, {
   newIcon: _audio.default

package/glyph/audio.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _audio = _interopRequireDefault(require("@atlaskit/icon/core/audio"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AudioIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const AudioIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentcolor" d="M19 6.673V15.2a2.8 2.8 0 0 1-2.8 2.8h-.4a2.8 2.8 0 0 1-2.8-2.8v-.4a2.8 2.8 0 0 1 2.8-2.8h.4q.419.001.8.116V8.242l-6 .621V16.2A2.8 2.8 0 0 1 8.2 19h-.4A2.8 2.8 0 0 1 5 16.2v-.4A2.8 2.8 0 0 1 7.8 13h.4q.419.001.8.116V6.654c0-.38.31-.721.72-.764l8.56-.886c.398-.041.72.235.72.615z"/></svg>`
 }, props, {
   newIcon: _audio.default

package/glyph/backlog.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 var _backlog = _interopRequireDefault(require("@atlaskit/icon/core/backlog"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const BacklogIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const BacklogIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill="currentcolor"><path d="M5 19.002C5 19 17 19 17 19v-2.002C17 17 5 17 5 17zm-2-2.004C3 15.894 3.895 15 4.994 15h12.012c1.101 0 1.994.898 1.994 1.998v2.004A1.997 1.997 0 0 1 17.006 21H4.994A2 2 0 0 1 3 19.002z"/><path d="M5 15h12v-2H5zm-2-4h16v6H3z"/><path d="M7 11.002C7 11 19 11 19 11V8.998C19 9 7 9 7 9zM5 8.998C5 7.894 5.895 7 6.994 7h12.012C20.107 7 21 7.898 21 8.998v2.004A1.997 1.997 0 0 1 19.006 13H6.994A2 2 0 0 1 5 11.002z"/><path d="M5 5v2h12V5zm-2-.002C3 3.894 3.895 3 4.994 3h12.012C18.107 3 19 3.898 19 4.998V9H3z"/></g></svg>`
 }, props, {
   newIcon: _backlog.default

package/glyph/billing-filled.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const BillingFilledIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const BillingFilledIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill-rule="evenodd"><path fill="currentcolor" fill-rule="nonzero" d="M5 3.99C5 2.892 5.897 2 7.006 2h9.988C18.102 2 19 2.898 19 3.99v16.02c0 1.099-.897 1.99-2.006 1.99H7.006A2.003 2.003 0 0 1 5 20.01z"/><rect width="8" height="2" x="8" y="6" fill="inherit" rx="1"/><rect width="5" height="2" x="8" y="9" fill="inherit" rx="1"/><rect width="5" height="2" x="8" y="12" fill="inherit" rx="1"/><rect width="5" height="2" x="8" y="15" fill="inherit" rx="1"/><rect width="2" height="2" x="14" y="12" fill="inherit" rx="1"/><rect width="2" height="2" x="14" y="15" fill="inherit" rx="1"/><rect width="2" height="2" x="14" y="9" fill="inherit" rx="1"/></g></svg>`
 }, props));
 BillingFilledIcon.displayName = 'BillingFilledIcon';

package/glyph/billing.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const BillingIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
+const BillingIcon = props => /*#__PURE__*/_react.default.createElement(_base.IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill="currentcolor" fill-rule="evenodd"><path fill-rule="nonzero" d="M7 4v16h10V4zm-2-.01C5 2.892 5.897 2 7.006 2h9.988C18.102 2 19 2.898 19 3.99v16.02c0 1.099-.897 1.99-2.006 1.99H7.006A2.003 2.003 0 0 1 5 20.01z"/><rect width="8" height="2" x="8" y="6" rx="1"/><rect width="5" height="2" x="8" y="9" rx="1"/><rect width="5" height="2" x="8" y="12" rx="1"/><rect width="5" height="2" x="8" y="15" rx="1"/><rect width="2" height="2" x="14" y="12" rx="1"/><rect width="2" height="2" x="14" y="15" rx="1"/><rect width="2" height="2" x="14" y="9" rx="1"/></g></svg>`
 }, props));
 BillingIcon.displayName = 'BillingIcon';