@atlaskit/icon 22.9.0 → 22.11.0

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

@@ -1,5 +1,5 @@
 import type { ComponentType, ReactNode, SVGProps as ReactSVGProps } from 'react';
-import type { IconColor, IconColorPressed } from '@atlaskit/tokens/css-type-schema';
+import type { IconColor, IconColorPressed, TextColor, TextColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
     /**
@@ -34,9 +34,9 @@ export interface GlyphColorProps {
  */
 export interface NewGlyphColorProps {
     /**
-     * Color for the icon. Supports any icon design token, or 'currentColor' to inherit the current text color.
+     * Color for the icon. Supports any icon or text design token, or 'currentColor' to inherit the current text color.
      */
-    color?: IconColor | IconColorPressed | 'currentColor';
+    color?: IconColor | IconColorPressed | Exclude<TextColor, 'transparent'> | TextColorPressed | 'currentColor';
 }
 export interface GlyphSizeProps {
     /**
@@ -161,11 +161,27 @@ export interface SVGProps extends GlyphProps {
  * The migration outcome for a given legacy icon
  */
 type IconMigrationResult = {
+    /**
+     * The recommended new icon that the legacy icon should be migrated to
+     */
     newIcon?: {
-        name?: string;
-        type?: string;
-        package?: string;
+        name: string;
+        type: string;
+        package: string;
     };
+    /**
+     * Alternative new icon that the legacy icon can be migrated to
+     * Primarily used to maintain migration guidance for icons that have since had a
+     * change to the recommended migration path in "newIcon"
+     */
+    additionalIcons?: {
+        name: string;
+        type: string;
+        package: string;
+    }[];
+    /**
+     * For each size the legacy icon can take, the per-size migration guidance
+     */
     sizeGuidance: Record<Size, IconMigrationSizeGuidance>;
 };
 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';

package/glyph/bitbucket/repos.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
+var _angleBrackets = _interopRequireDefault(require("@atlaskit/icon/core/angle-brackets"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const BitbucketReposIcon = 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="M5 5v14h14V5zm0-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2"/><path d="M9.23 8.31 6.3 11.26a1.06 1.06 0 0 0 0 1.48l2.93 2.96a1.03 1.03 0 0 0 1.47 0 1.05 1.05 0 0 0 0-1.48L8.5 12l2.2-2.22a1.05 1.05 0 0 0 0-1.48 1.02 1.02 0 0 0-.73-.3c-.27 0-.53.1-.73.31m4.06 0a1.05 1.05 0 0 0 0 1.48L15.5 12l-2.2 2.22a1.05 1.05 0 0 0 0 1.48c.4.41 1.06.41 1.46 0l2.93-2.95a1.05 1.05 0 0 0 0-1.48l-2.93-2.96a1.03 1.03 0 0 0-1.46 0"/></g></svg>`
-}, props));
+}, props, {
+  newIcon: _angleBrackets.default
+}));
 BitbucketReposIcon.displayName = 'BitbucketReposIcon';
 var _default = exports.default = BitbucketReposIcon;

package/glyph/download.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
+var _download = _interopRequireDefault(require("@atlaskit/icon/core/download"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const DownloadIcon = 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="M10.687 17.292a.983.983 0 0 0-1.397 0 1 1 0 0 0 0 1.407l1.964 1.98a1.08 1.08 0 0 0 1.538 0l1.919-1.933a1 1 0 0 0 0-1.408.983.983 0 0 0-1.398 0l-1.29 1.3z"/><path fill-rule="nonzero" d="M13.001 19.993 13 10.006C13 9.451 12.552 9 12 9s-1 .45-1 1.007l.001 9.987c0 .555.448 1.006 1 1.006s1-.45 1-1.007"/><path d="M7.938 5.48a5 5 0 0 0-.777-.062C4.356 5.418 2 7.62 2 10.498 2 13.409 4.385 16 7.1 16h2.881v-1.993H7.1c-1.657 0-3.115-1.663-3.115-3.508 0-1.778 1.469-3.087 3.104-3.087h.012c.389 0 .686.05.97.15l.17.063c.605.248.875-.246.875-.246l.15-.267c.73-1.347 2.201-2.096 3.716-2.12a4.14 4.14 0 0 1 4.069 3.645l.046.34s.071.525.665.525c.013 0 .012.005.023.005h.254c1.136 0 1.976.959 1.976 2.158 0 1.207-.987 2.342-2.07 2.342h-3.964V16h3.964C20.105 16 22 13.955 22 11.665c0-2-1.312-3.663-3.138-4.074-.707-2.707-3.053-4.552-5.886-4.591-1.975.02-3.901.9-5.038 2.48"/></g></svg>`
-}, props));
+}, props, {
+  newIcon: _download.default
+}));
 DownloadIcon.displayName = 'DownloadIcon';
 var _default = exports.default = DownloadIcon;

package/glyph/editor/add.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
-var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
+var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EditorAddIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentColor" fill-rule="evenodd" d="M13 11V7a1 1 0 0 0-2 0v4H7a1 1 0 0 0 0 2h4v4a1 1 0 0 0 2 0v-4h4a1 1 0 0 0 0-2z"/></svg>`
 }, props, {
-  newIcon: _edit.default
+  newIcon: _add.default
 }));
 EditorAddIcon.displayName = 'EditorAddIcon';
 var _default = exports.default = EditorAddIcon;

package/glyph/editor/table.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
+var _grid = _interopRequireDefault(require("@atlaskit/icon/core/grid"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EditorTableIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentColor" fill-rule="evenodd" d="M8 6h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2m0 2v3h3V8zm5 0v3h3V8zm-5 5v3h3v-3zm5 0v3h3v-3z"/></svg>`
-}, props));
+}, props, {
+  newIcon: _grid.default
+}));
 EditorTableIcon.displayName = 'EditorTableIcon';
 var _default = exports.default = EditorTableIcon;

package/glyph/emoji/flags.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
+var _flag = _interopRequireDefault(require("@atlaskit/icon/core/flag"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EmojiFlagsIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentColor" fill-rule="evenodd" d="M6 12.235v6.446c0 .537.45.977 1 .977s1-.44 1-.977v-5.778c1.17-.341 2.389-.045 3.768.29.982.238 2.036.495 3.13.495a5.7 5.7 0 0 0 2.547-.567 1 1 0 0 0 .563-.9V5.466a.998.998 0 0 0-1.437-.9c-1.345.654-2.731.317-4.331-.071-1.729-.42-3.687-.895-5.678.072A1 1 0 0 0 6 5.466zm3.111-1.48c1.094 0 2.148.256 3.129.495 1.381.335 2.6.63 3.768.289V6.836c-1.488.27-2.93-.08-4.24-.398-1.379-.335-2.598-.632-3.768-.29v4.704a6 6 0 0 1 1.111-.097"/></svg>`
-}, props));
+}, props, {
+  newIcon: _flag.default
+}));
 EmojiFlagsIcon.displayName = 'EmojiFlagsIcon';
 var _default = exports.default = EmojiFlagsIcon;

package/glyph/emoji/people.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
+var _emoji = _interopRequireDefault(require("@atlaskit/icon/core/emoji"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EmojiPeopleIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentColor" fill-rule="evenodd" d="M12 4c-4.412 0-8 3.588-8 8s3.588 8 8 8 8-3.588 8-8-3.588-8-8-8m0 14.222A6.23 6.23 0 0 1 5.778 12 6.23 6.23 0 0 1 12 5.778 6.23 6.23 0 0 1 18.222 12 6.23 6.23 0 0 1 12 18.222M14.83 14a3.001 3.001 0 0 1-5.66 0zM14 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-4 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>`
-}, props));
+}, props, {
+  newIcon: _emoji.default
+}));
 EmojiPeopleIcon.displayName = 'EmojiPeopleIcon';
 var _default = exports.default = EmojiPeopleIcon;

package/glyph/export.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
+var _upload = _interopRequireDefault(require("@atlaskit/icon/core/upload"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ExportIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentColor" d="M13 6.491V16a1 1 0 0 1-2 0V6.491L9.784 7.697a1.05 1.05 0 0 1-1.478 0 1.03 1.03 0 0 1 0-1.465l2.955-2.929a1.05 1.05 0 0 1 1.478 0l2.955 2.93c.408.404.408 1.06 0 1.464a1.05 1.05 0 0 1-1.478 0zM9 9v2H7c-.002 0 0 7.991 0 7.991 0 .004 9.994.009 9.994.009.003 0 .006-7.991.006-7.991 0-.006-2-.009-2-.009V9h2c1.105 0 2 .902 2 2.009v7.982c0 1.11-.897 2.009-2.006 2.009H7.006A2.01 2.01 0 0 1 5 18.991V11.01A2 2 0 0 1 7 9z"/></svg>`
-}, props));
+}, props, {
+  newIcon: _upload.default
+}));
 ExportIcon.displayName = 'ExportIcon';
 var _default = exports.default = ExportIcon;

package/glyph/lightbulb-filled.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
+var _lightbulb = _interopRequireDefault(require("@atlaskit/icon/core/lightbulb"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const LightbulbFilledIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentColor" fill-rule="evenodd" d="M11.998 4A5.997 5.997 0 0 0 6 9.998c0 2.218 2.288 4.484 2.288 4.484.39.387.71 1.112.71 1.611s.45.907 1 .907h4c.55 0 1-.408 1-.907s.32-1.224.71-1.611c0 0 2.288-2.266 2.288-4.484A5.997 5.997 0 0 0 11.998 4m2.965 15c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v.003c0 .55.45 1 1 1h4c.55 0 1-.45 1-1z"/></svg>`
-}, props));
+}, props, {
+  newIcon: _lightbulb.default
+}));
 LightbulbFilledIcon.displayName = 'LightbulbFilledIcon';
 var _default = exports.default = LightbulbFilledIcon;

package/glyph/link-filled.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const LinkFilledIcon = 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-rule="evenodd"><circle cx="12" cy="12" r="10" fill="currentColor"/><path fill="inherit" d="m11.75 16.15.548-.537a.585.585 0 0 0 0-.838.61.61 0 0 0-.854 0l-.574.564c-.564.553-1.483.662-2.101.168a1.482 1.482 0 0 1-.119-2.223l1.694-1.663a1.543 1.543 0 0 1 2.156 0l.647.635.853-.839-.646-.635a2.775 2.775 0 0 0-3.863 0l-1.694 1.664a2.66 2.66 0 0 0 .208 3.979c1.104.884 2.738.715 3.746-.275"/><path fill="inherit" d="m12.25 7.85-.547.537a.585.585 0 0 0 0 .838.61.61 0 0 0 .853 0l.574-.564c.564-.553 1.483-.662 2.101-.168.71.57.75 1.603.119 2.223l-1.694 1.663a1.543 1.543 0 0 1-2.156 0l-.647-.635-.853.839.646.635a2.775 2.775 0 0 0 3.863 0l1.695-1.664a2.66 2.66 0 0 0-.209-3.979c-1.104-.884-2.738-.715-3.746.275"/></g></svg>`
-}, props));
+}, props, {
+  newIcon: _link.default
+}));
 LinkFilledIcon.displayName = 'LinkFilledIcon';
 var _default = exports.default = LinkFilledIcon;

package/glyph/media-services/fit-to-page.js

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
+var _minimize = _interopRequireDefault(require("@atlaskit/icon/core/minimize"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const MediaServicesFitToPageIcon = props => /*#__PURE__*/_react.default.createElement(_base.UNSAFE_IconFacade, Object.assign({
   dangerouslySetGlyph: `<svg width="24" height="24" viewBox="0 0 24 24" role="presentation"><path fill="currentColor" fill-rule="evenodd" d="M16.413 8.997H18A1 1 0 0 1 18 11h-3.9l-.047-.001a.98.98 0 0 1-.736-.285l-.032-.032A.98.98 0 0 1 13 9.946V6.002a1 1 0 1 1 2 0v1.587l3.309-3.308a.977.977 0 0 1 1.374.005l.032.032a.976.976 0 0 1 .005 1.374zm-8.826 6.006H6A1 1 0 0 1 6 13h3.9l.047.001a.98.98 0 0 1 .736.285l.032.032c.2.2.296.47.284.736l.001.048v3.896a1 1 0 1 1-2 0v-1.587l-3.309 3.308a.977.977 0 0 1-1.374-.005l-.032-.032a.976.976 0 0 1-.005-1.374z"/></svg>`
-}, props));
+}, props, {
+  newIcon: _minimize.default
+}));
 MediaServicesFitToPageIcon.displayName = 'MediaServicesFitToPageIcon';
 var _default = exports.default = MediaServicesFitToPageIcon;

package/glyph/vid-audio-on.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
-var _audio = _interopRequireDefault(require("@atlaskit/icon/core/audio"));
+var _microphone = _interopRequireDefault(require("@atlaskit/icon/core/microphone"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const VidAudioOnIcon = 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"><rect width="6" height="12" x="9" y="3" rx="3"/><path fill-rule="nonzero" d="M13 17.917c2.833-.476 5-2.941 5-5.91V9a1 1 0 0 0-2 0v3.006A4 4 0 0 1 12 16c-2.205 0-4-1.795-4-3.994V9a1 1 0 1 0-2 0v3.006c0 2.96 2.162 5.433 5 5.91v2.075a1 1 0 1 0 2 0z"/></g></svg>`
 }, props, {
-  newIcon: _audio.default
+  newIcon: _microphone.default
 }));
 VidAudioOnIcon.displayName = 'VidAudioOnIcon';
 var _default = exports.default = VidAudioOnIcon;

package/glyph/vid-full-screen-off.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _base = require("@atlaskit/icon/base");
-var _fullscreenExit = _interopRequireDefault(require("@atlaskit/icon/core/fullscreen-exit"));
+var _minimize = _interopRequireDefault(require("@atlaskit/icon/core/minimize"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const VidFullScreenOffIcon = 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="M9 15.003v2.995a1 1 0 1 0 2 0v-3.896C11 13.494 10.507 13 9.9 13H6a1 1 0 0 0 0 2.003z"/><path fill-rule="nonzero" d="M3.74 20.294a.997.997 0 0 0 1.407.005l5.152-5.152a1 1 0 0 0-.005-1.407l-.034-.034a.997.997 0 0 0-1.407-.005l-5.152 5.152a1 1 0 0 0 .005 1.407z"/><path d="M19.067 3.321 13.32 9.066a1.115 1.115 0 0 0 .005 1.57l.036.037a1.11 1.11 0 0 0 1.571.005l5.747-5.744a1.116 1.116 0 0 0-.006-1.57l-.037-.037a1.117 1.117 0 0 0-1.57-.006"/><path d="M13 6.002v3.896c0 .608.493 1.102 1.1 1.102H18a1 1 0 0 0 0-2.003h-3V6.002a1 1 0 1 0-2 0"/></g></svg>`
 }, props, {
-  newIcon: _fullscreenExit.default
+  newIcon: _minimize.default
 }));
 VidFullScreenOffIcon.displayName = 'VidFullScreenOffIcon';
 var _default = exports.default = VidFullScreenOffIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "22.9.0",
+	"version": "22.11.0",
 	"description": "An icon is a visual representation of a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -40,7 +40,7 @@
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
-		"@af/icon-build-process": "^1.1.0",
+		"@af/icon-build-process": "^2.0.0",
 		"@af/visual-regression": "*",
 		"@atlaskit/code": "^15.4.0",
 		"@atlaskit/ds-lib": "^2.3.0",
@@ -50,9 +50,8 @@
 		"@atlaskit/textfield": "^6.4.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/toggle": "^13.2.0",
-		"@atlaskit/tooltip": "^18.5.0",
+		"@atlaskit/tooltip": "^18.6.0",
 		"@atlaskit/visual-regression": "*",
-		"@atlassian/icon-lab": "^0.0.2",
 		"@babel/core": "^7.20.0",
 		"@emotion/babel-preset-css-prop": "^10.0.7",
 		"@testing-library/react": "^12.1.5",

package/utility/migration/add--editor-add.d.ts

@@ -0,0 +1,9 @@
+
+import React from 'react';
+import Icon from '@atlaskit/icon/UNSAFE_base-new';
+
+declare const AddIconMigration: {
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type' | 'spacing' | 'LEGACY_fallbackIcon'> ): JSX.Element;
+  displayName: string;
+};
+export default AddIconMigration;

package/utility/migration/add--editor-add.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _add = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
+var _add2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * ⚠️ EXPERIMENTAL ⚠️ - New icons are a work in progress and subject to change or removal in future minor or patch releases.
+ * Please reach out in #help-design-system before using these in production.
+ *
+ * Migration Icon component for AddIcon.
+ * This component is AddIcon, with `UNSAFE_fallbackIcon` set to "EditorAddIcon".
+ *
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for creating and adding an object as a secondary action within a Menu Item.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const AddIcon = props => /*#__PURE__*/_react.default.createElement(_add.default, Object.assign({
+  LEGACY_fallbackIcon: _add2.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+AddIcon.Name = 'AddIconMigration';
+var _default = exports.default = AddIcon;