@atlaskit/icon 22.6.0 → 22.8.0

package/dist/es2019/migration-map.js

@@ -116,19 +116,15 @@ const migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  'app-switcher': {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'top-nav',
-      medium: 'top-nav',
-      large: 'top-nav',
-      xlarge: 'top-nav'
-    }
-  },
+  // 'app-switcher': {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'top-nav',
+  // 		medium: 'top-nav',
+  // 		large: 'top-nav',
+  // 		xlarge: 'top-nav',
+  // 	},
+  // },
   archive: {
     newIcon: {
       name: 'archive-box',
@@ -1037,19 +1033,15 @@ const migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  download: {
-    newIcon: {
-      name: 'cloud-arrow-down',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // download: {
+  // 	newIcon: { name: 'cloud-arrow-down', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'drag-handler': {
     newIcon: {
       name: 'drag-handle',
@@ -2872,32 +2864,24 @@ const migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'menu-expand': {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  menu: {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'menu-expand': {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // menu: {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   mobile: {
     newIcon: {
       name: 'device-mobile',
@@ -2945,32 +2929,24 @@ const migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'notification-direct': {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-slight-visual-change',
-      medium: 'swap-slight-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  notification: {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'notification-direct': {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-slight-visual-change',
+  // 		medium: 'swap-slight-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // notification: {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'office-building-filled': {
     newIcon: {
       name: 'office-building',
@@ -3598,19 +3574,15 @@ const migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  switcher: {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'not-recommended',
-      xlarge: 'not-recommended'
-    }
-  },
+  // switcher: {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'not-recommended',
+  // 		xlarge: 'not-recommended',
+  // 	},
+  // },
   table: {
     newIcon: {
       name: 'grid',

package/dist/esm/components/icon-facade.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["dangerouslySetGlyph"];
+import React, { memo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import LegacyIcon from './icon';
+var sizesEligibleForNewIcons = ['small', 'medium'];
+
+/**
+ * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
+ *
+ * @param {IconFacadeProps} props - The props for the IconFacade component. Includes properties for configuring
+ * the icon such as `size`, `spacing`, `primaryColor`, `iconType`, and potentially others depending on the icon.
+ * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
+ * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
+ */
+export var IconFacade = /*#__PURE__*/memo(function IconFacade(_ref) {
+  var _props$size;
+  var dangerouslySetGlyph = _ref.dangerouslySetGlyph,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var NewIcon = props.newIcon;
+
+  // By default, the icon size will be medium and spacing will be none for small icons
+  var size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
+  var spacing = size === 'small' ? 'none' : 'spacious';
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var useNewIcon = fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  if (useNewIcon && NewIcon) {
+    return /*#__PURE__*/React.createElement(NewIcon, _extends({}, props, {
+      spacing: spacing,
+      color: props.primaryColor || 'currentColor',
+      type: props.iconType
+    }));
+  }
+  return /*#__PURE__*/React.createElement(LegacyIcon, _extends({
+    dangerouslySetGlyph: dangerouslySetGlyph
+  }, props));
+});
+export default IconFacade;

package/dist/esm/components/icon-new.js

@@ -1,8 +1,9 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -100,7 +101,8 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'global' : _ref$type,
     dangerouslySetGlyph = _ref.dangerouslySetGlyph,
-    shouldScale = _ref.shouldScale;
+    shouldScale = _ref.shouldScale,
+    LEGACY_margin = _ref.LEGACY_margin;
   var dangerouslySetInnerHTML = dangerouslySetGlyph ? {
     __html: dangerouslySetGlyph
   } : undefined;
@@ -114,6 +116,9 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
       size: LEGACY_size,
       label: label,
       testId: testId
+      // @ts-ignore-next-line
+      ,
+      UNSAFE_margin: LEGACY_margin
     });
   }
 

package/dist/esm/components/icon-tile.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/components/icon.js

@@ -4,13 +4,14 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
+import { getBackground } from './utils';
 
 /**
  * We are hiding these props from consumers as they're used to
@@ -83,7 +84,8 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     testId = _ref.testId,
     label = _ref.label,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    UNSAFE_margin = _ref.UNSAFE_margin;
   var glyphProps = dangerouslySetGlyph ? {
     dangerouslySetInnerHTML: {
       __html: dangerouslySetGlyph
@@ -105,12 +107,13 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     "aria-hidden": label ? undefined : true
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: {
+    style: _objectSpread({
       '--icon-primary-color': primaryColor,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--icon-secondary-color': secondaryColor || getBackground()
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    }
+    }, UNSAFE_margin ? {
+      margin: UNSAFE_margin
+    } : {})
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
     // NB: This can be resolved if this component, composes base SVG / and/or skeleton

package/dist/esm/components/skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { memo } from 'react';

package/dist/esm/components/svg.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/entry-points/base.js

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

package/dist/esm/migration-map.js

@@ -116,19 +116,15 @@ var migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  'app-switcher': {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'top-nav',
-      medium: 'top-nav',
-      large: 'top-nav',
-      xlarge: 'top-nav'
-    }
-  },
+  // 'app-switcher': {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'top-nav',
+  // 		medium: 'top-nav',
+  // 		large: 'top-nav',
+  // 		xlarge: 'top-nav',
+  // 	},
+  // },
   archive: {
     newIcon: {
       name: 'archive-box',
@@ -1037,19 +1033,15 @@ var migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  download: {
-    newIcon: {
-      name: 'cloud-arrow-down',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // download: {
+  // 	newIcon: { name: 'cloud-arrow-down', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'drag-handler': {
     newIcon: {
       name: 'drag-handle',
@@ -2872,32 +2864,24 @@ var migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'menu-expand': {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  menu: {
-    newIcon: {
-      name: 'menu',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap',
-      medium: 'swap',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'menu-expand': {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // menu: {
+  // 	newIcon: { name: 'menu', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap',
+  // 		medium: 'swap',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   mobile: {
     newIcon: {
       name: 'device-mobile',
@@ -2945,32 +2929,24 @@ var migrationMap = {
       xlarge: 'icon-lab'
     }
   },
-  'notification-direct': {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-slight-visual-change',
-      medium: 'swap-slight-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
-  notification: {
-    newIcon: {
-      name: 'notification',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'icon-tile',
-      xlarge: 'icon-tile'
-    }
-  },
+  // 'notification-direct': {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-slight-visual-change',
+  // 		medium: 'swap-slight-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
+  // notification: {
+  // 	newIcon: { name: 'notification', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'icon-tile',
+  // 		xlarge: 'icon-tile',
+  // 	},
+  // },
   'office-building-filled': {
     newIcon: {
       name: 'office-building',
@@ -3598,19 +3574,15 @@ var migrationMap = {
       xlarge: 'icon-tile'
     }
   },
-  switcher: {
-    newIcon: {
-      name: 'app-switcher',
-      type: 'core',
-      package: '@atlaskit/icon'
-    },
-    sizeGuidance: {
-      small: 'swap-visual-change',
-      medium: 'swap-visual-change',
-      large: 'not-recommended',
-      xlarge: 'not-recommended'
-    }
-  },
+  // switcher: {
+  // 	newIcon: { name: 'app-switcher', type: 'core', package: '@atlaskit/icon' },
+  // 	sizeGuidance: {
+  // 		small: 'swap-visual-change',
+  // 		medium: 'swap-visual-change',
+  // 		large: 'not-recommended',
+  // 		xlarge: 'not-recommended',
+  // 	},
+  // },
   table: {
     newIcon: {
       name: 'grid',

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { NewIconProps } from '../types';
+/**
+ * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
+ *
+ * @param {IconFacadeProps} props - The props for the IconFacade component. Includes properties for configuring
+ * the icon such as `size`, `spacing`, `primaryColor`, `iconType`, and potentially others depending on the icon.
+ * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
+ * @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;
+}>;
+export default IconFacade;

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

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

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
+import type { ComponentType, ReactNode, SVGProps as ReactSVGProps } from 'react';
 import type { IconColor, IconColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
@@ -111,6 +111,10 @@ export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
      * Icon type. Used in icon build process.
      */
     type?: 'utility' | 'global';
+    /**
+     * Sets a margin on the fallback legacy icon.
+     */
+    LEGACY_margin?: string;
 }
 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';
@@ -166,4 +170,8 @@ 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>;
+    iconType?: NewIconProps['type'];
+};
 export {};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { NewIconProps } from '../types';
+/**
+ * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
+ *
+ * @param {IconFacadeProps} props - The props for the IconFacade component. Includes properties for configuring
+ * the icon such as `size`, `spacing`, `primaryColor`, `iconType`, and potentially others depending on the icon.
+ * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
+ * @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;
+}>;
+export default IconFacade;

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

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

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

@@ -1,4 +1,4 @@
-import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
+import type { ComponentType, ReactNode, SVGProps as ReactSVGProps } from 'react';
 import type { IconColor, IconColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
@@ -111,6 +111,10 @@ export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
      * Icon type. Used in icon build process.
      */
     type?: 'utility' | 'global';
+    /**
+     * Sets a margin on the fallback legacy icon.
+     */
+    LEGACY_margin?: string;
 }
 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';
@@ -166,4 +170,8 @@ 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>;
+    iconType?: NewIconProps['type'];
+};
 export {};

package/glyph/activity.js

@@ -4,17 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _base = require("@atlaskit/icon/base");
-
+var _dashboard = _interopRequireDefault(require("@atlaskit/icon/core/dashboard"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ActivityIcon = props => /*#__PURE__*/_react.default.createElement(_base.Icon, Object.assign({
-  dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path 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 17zM3 7.006A2 2 0 014.995 5h14.01A2 2 0 0121 7.006v9.988A2 2 0 0119.005 19H4.995A2 2 0 013 16.994V7.006z" fill-rule="nonzero"/><path d="M4 6h16v5H4V6zm5 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 8zM5 8c0 .556.448 1 1 1 .556 0 1-.448 1-1 0-.556-.448-1-1-1-.556 0-1 .448-1 1z"/></g></svg>`
-}, props));
-
+const ActivityIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_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
+}));
 ActivityIcon.displayName = 'ActivityIcon';
-var _default = ActivityIcon;
-exports.default = _default;
+var _default = exports.default = ActivityIcon;