@atlaskit/icon 22.7.0 → 22.9.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/icon
 
+## 22.9.0
+
+### Minor Changes
+
+- [#125980](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125980)
+  [`4df9272f5f016`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4df9272f5f016) -
+  Adds four new icons to the experimental /core icon set: 'notification', 'menu', 'app-switcher',
+  and 'app-switcher-legacy'
+
+## 22.8.0
+
+### Minor Changes
+
+- [#124884](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124884)
+  [`3108a1a229e07`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3108a1a229e07) - -
+  Icons in `@atlaskit/icon/glyph` can now switch to updated designs behind a feature flag.
+  - SVGs in `/svgs`, used by icons in `@atlaskit/icon/glyph`, have been re-optimised with the latest
+    version of SVGO; some slight changes to SVG code or subpixel aliasing may occur
+
 ## 22.7.0
 
 ### Minor Changes

package/afm-post-office/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../../../tsconfig.entry-points.post-office.json",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "outDir": "../../../../../tsDist/@atlaskit__icon/app",
+    "composite": true,
+    "rootDir": "../"
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  "references": [
+    {
+      "path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../tokens/afm-post-office/tsconfig.json"
+    }
+  ]
+}

package/build/index.tsx

@@ -1,6 +1,10 @@
 import path from 'path';
-import { UNSAFE_buildNew as buildIconsNew, UNSAFE_createIconDocsNew } from '@af/icon-build-process';
-import type { UNSAFE_NewIconBuildConfig } from '@af/icon-build-process';
+import buildIcons, {
+	UNSAFE_buildNew as buildIconsNew,
+	UNSAFE_createIconDocsNew,
+	createIconDocs,
+} from '@af/icon-build-process';
+import type { UNSAFE_NewIconBuildConfig, IconBuildConfig } from '@af/icon-build-process';
 import pkgDir from 'pkg-dir';
 import fs from 'fs-extra';
 import synonyms from '../utils/synonyms';
@@ -22,22 +26,21 @@ if (!root) {
  * To avoid unnecessary churn, this step is switched off, and any updates to the old icon set can be done piecemeal.
  */
 
-// const config: IconBuildConfig = {
-//   srcDir: path.resolve(root, 'svgs_raw'),
-//   processedDir: path.resolve(root, 'svgs'),
-//   destDir: path.resolve(root, 'glyph'),
-//   maxWidth: 24,
-//   maxHeight: 24,
-//   glob: '**/*.svg',
-//   baseIconEntryPoint: '@atlaskit/icon/base',
-// };
-// buildIcons(config).then((icons) => {
-//   const iconDocs = createIconDocs(icons, '@atlaskit/icon', synonyms, [
-//     'icon',
-//     'core',
-//   ]);
-//   return fs.outputFile(path.resolve(root, 'src/metadata.tsx'), iconDocs);
-// });
+const config: IconBuildConfig = {
+	srcDir: path.resolve(root, 'svgs_raw'),
+	processedDir: path.resolve(root, 'svgs'),
+	destDir: path.resolve(root, 'glyph'),
+	maxWidth: 24,
+	maxHeight: 24,
+	glob: '**/*.svg',
+	baseIconEntryPoint: '@atlaskit/icon/base',
+	newIconsDir: path.resolve(root, 'icons_raw'),
+	migrationMap,
+};
+buildIcons(config).then((icons) => {
+	const iconDocs = createIconDocs(icons, '@atlaskit/icon', synonyms, ['icon', 'core']);
+	return fs.outputFile(path.resolve(root, 'src/metadata.tsx'), iconDocs);
+});
 
 /**
  * The updated icon build process for the new icons under `@atlaskit/icon/core/*`

package/core/app-switcher-legacy.d.ts

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

package/core/app-switcher-legacy.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _UNSAFE_baseNew = _interopRequireDefault(require("@atlaskit/icon/UNSAFE_base-new"));
+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.
+ *
+ * Icon: "AppSwitcherLegacy".
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for the legacy app switcher in global product navigation.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const AppSwitcherLegacyIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path fill="currentColor" d="M11.75 11.75h2.5v2.5h-2.5zm-10-10h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5zm5-10h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5zm5-10h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5z"/><path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M11.75 11.75h2.5v2.5h-2.5zm-10-10h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5zm5-10h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5zm5-10h2.5v2.5h-2.5zm0 5h2.5v2.5h-2.5z"/>`
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+AppSwitcherLegacyIcon.displayName = 'AppSwitcherLegacyIcon';
+var _default = exports.default = AppSwitcherLegacyIcon;

package/core/app-switcher.d.ts

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

package/core/app-switcher.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _UNSAFE_baseNew = _interopRequireDefault(require("@atlaskit/icon/UNSAFE_base-new"));
+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.
+ *
+ * Icon: "AppSwitcher".
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for app switcher in global product navigation.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const AppSwitcherIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M1.75 3c0-.69.56-1.25 1.25-1.25h2c.69 0 1.25.56 1.25 1.25v2c0 .69-.56 1.25-1.25 1.25H3c-.69 0-1.25-.56-1.25-1.25zm8 0c0-.69.56-1.25 1.25-1.25h2c.69 0 1.25.56 1.25 1.25v2c0 .69-.56 1.25-1.25 1.25h-2c-.69 0-1.25-.56-1.25-1.25zm-8 8c0-.69.56-1.25 1.25-1.25h2c.69 0 1.25.56 1.25 1.25v2c0 .69-.56 1.25-1.25 1.25H3c-.69 0-1.25-.56-1.25-1.25zm8 0c0-.69.56-1.25 1.25-1.25h2c.69 0 1.25.56 1.25 1.25v2c0 .69-.56 1.25-1.25 1.25h-2c-.69 0-1.25-.56-1.25-1.25z"/>`
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+AppSwitcherIcon.displayName = 'AppSwitcherIcon';
+var _default = exports.default = AppSwitcherIcon;

package/core/menu.d.ts

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

package/core/menu.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _UNSAFE_baseNew = _interopRequireDefault(require("@atlaskit/icon/UNSAFE_base-new"));
+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.
+ *
+ * Icon: "Menu".
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for accessing the menu in global product navigation.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const MenuIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-width="1.5" d="M1 13.25h14M1 8h14M1 2.75h14"/>`
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+MenuIcon.displayName = 'MenuIcon';
+var _default = exports.default = MenuIcon;

package/core/migration/app-switcher--switcher.d.ts

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

package/core/migration/app-switcher--switcher.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _appSwitcher = _interopRequireDefault(require("@atlaskit/icon/core/app-switcher"));
+var _switcher = _interopRequireDefault(require("@atlaskit/icon/glyph/switcher"));
+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 AppSwitcherIcon.
+ * This component is AppSwitcherIcon, with `UNSAFE_fallbackIcon` set to "SwitcherIcon".
+ *
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for app switcher in global product navigation.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const AppSwitcherIcon = props => /*#__PURE__*/_react.default.createElement(_appSwitcher.default, Object.assign({
+  LEGACY_fallbackIcon: _switcher.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+AppSwitcherIcon.Name = 'AppSwitcherIconMigration';
+var _default = exports.default = AppSwitcherIcon;

package/core/migration/app-switcher.d.ts

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

package/core/migration/app-switcher.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _appSwitcher = _interopRequireDefault(require("@atlaskit/icon/core/app-switcher"));
+var _appSwitcher2 = _interopRequireDefault(require("@atlaskit/icon/glyph/app-switcher"));
+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 AppSwitcherIcon.
+ * This component is AppSwitcherIcon, with `UNSAFE_fallbackIcon` set to "AppSwitcherIcon".
+ *
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for app switcher in global product navigation.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const AppSwitcherIcon = props => /*#__PURE__*/_react.default.createElement(_appSwitcher.default, Object.assign({
+  LEGACY_fallbackIcon: _appSwitcher2.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+AppSwitcherIcon.Name = 'AppSwitcherIconMigration';
+var _default = exports.default = AppSwitcherIcon;

package/core/migration/menu--menu-expand.d.ts

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

package/core/migration/menu--menu-expand.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _menu = _interopRequireDefault(require("@atlaskit/icon/core/menu"));
+var _menuExpand = _interopRequireDefault(require("@atlaskit/icon/glyph/menu-expand"));
+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 MenuIcon.
+ * This component is MenuIcon, with `UNSAFE_fallbackIcon` set to "MenuExpandIcon".
+ *
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for accessing the menu in global product navigation.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const MenuIcon = props => /*#__PURE__*/_react.default.createElement(_menu.default, Object.assign({
+  LEGACY_fallbackIcon: _menuExpand.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+MenuIcon.Name = 'MenuIconMigration';
+var _default = exports.default = MenuIcon;

package/core/migration/menu.d.ts

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

package/core/migration/menu.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _menu = _interopRequireDefault(require("@atlaskit/icon/core/menu"));
+var _menu2 = _interopRequireDefault(require("@atlaskit/icon/glyph/menu"));
+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 MenuIcon.
+ * This component is MenuIcon, with `UNSAFE_fallbackIcon` set to "MenuIcon".
+ *
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for accessing the menu in global product navigation.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const MenuIcon = props => /*#__PURE__*/_react.default.createElement(_menu.default, Object.assign({
+  LEGACY_fallbackIcon: _menu2.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+MenuIcon.Name = 'MenuIconMigration';
+var _default = exports.default = MenuIcon;

package/core/migration/notification--notification-direct.d.ts

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

package/core/migration/notification--notification-direct.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _notification = _interopRequireDefault(require("@atlaskit/icon/core/notification"));
+var _notificationDirect = _interopRequireDefault(require("@atlaskit/icon/glyph/notification-direct"));
+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 NotificationIcon.
+ * This component is NotificationIcon, with `UNSAFE_fallbackIcon` set to "NotificationDirectIcon".
+ *
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for notifications within global product navigation and within product screens.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const NotificationIcon = props => /*#__PURE__*/_react.default.createElement(_notification.default, Object.assign({
+  LEGACY_fallbackIcon: _notificationDirect.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+NotificationIcon.Name = 'NotificationIconMigration';
+var _default = exports.default = NotificationIcon;

package/core/migration/notification.d.ts

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

package/core/migration/notification.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _notification = _interopRequireDefault(require("@atlaskit/icon/core/notification"));
+var _notification2 = _interopRequireDefault(require("@atlaskit/icon/glyph/notification"));
+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 NotificationIcon.
+ * This component is NotificationIcon, with `UNSAFE_fallbackIcon` set to "NotificationIcon".
+ *
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for notifications within global product navigation and within product screens.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const NotificationIcon = props => /*#__PURE__*/_react.default.createElement(_notification.default, Object.assign({
+  LEGACY_fallbackIcon: _notification2.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+NotificationIcon.Name = 'NotificationIconMigration';
+var _default = exports.default = NotificationIcon;

package/core/notification.d.ts

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

package/core/notification.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _UNSAFE_baseNew = _interopRequireDefault(require("@atlaskit/icon/UNSAFE_base-new"));
+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.
+ *
+ * Icon: "Notification".
+ * Category: Single-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for notifications within global product navigation and within product screens.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const NotificationIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m3.675 9.106-2.23 3.159a.625.625 0 0 0 .511.985h12.088a.625.625 0 0 0 .51-.985l-2.229-3.159a.4.4 0 0 1-.075-.236V5a4.25 4.25 0 0 0-8.5 0v3.87a.4.4 0 0 1-.075.236Z"/><path fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M10 13.25H6a2 2 0 1 0 4 0Z"/>`
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+NotificationIcon.displayName = 'NotificationIcon';
+var _default = exports.default = NotificationIcon;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconFacade = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _icon = _interopRequireDefault(require("./icon"));
+var _excluded = ["dangerouslySetGlyph"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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.
+ */
+var IconFacade = exports.IconFacade = /*#__PURE__*/(0, _react.memo)(function IconFacade(_ref) {
+  var _props$size;
+  var dangerouslySetGlyph = _ref.dangerouslySetGlyph,
+    props = (0, _objectWithoutProperties2.default)(_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 = (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  if (useNewIcon && NewIcon) {
+    return /*#__PURE__*/_react.default.createElement(NewIcon, (0, _extends2.default)({}, props, {
+      spacing: spacing,
+      color: props.primaryColor || 'currentColor',
+      type: props.iconType
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    dangerouslySetGlyph: dangerouslySetGlyph
+  }, props));
+});
+var _default = exports.default = IconFacade;

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

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "Icon", {
     return _icon.Icon;
   }
 });
+Object.defineProperty(exports, "UNSAFE_IconFacade", {
+  enumerable: true,
+  get: function get() {
+    return _iconFacade.IconFacade;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -17,5 +23,6 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _icon = _interopRequireWildcard(require("../components/icon"));
+var _iconFacade = require("../components/icon-facade");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/dist/cjs/metadata-core.js

@@ -111,6 +111,27 @@ var metadata = {
     type: 'Global noun',
     usage: 'Reserved for marketplace apps and integrations across products.'
   },
+  'app-switcher': {
+    keywords: ['app-switcher', 'appswitcher', 'icon', 'core', 'application switcher', 'change product', 'switch product', 'product switcher', 'top navigation'],
+    componentName: 'AppSwitcherIcon',
+    package: '@atlaskit/icon/core/app-switcher',
+    oldName: ['app-switcher', 'switcher'],
+    categorization: 'Single-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Core',
+    usage: 'Reserved for app switcher in global product navigation.'
+  },
+  'app-switcher-legacy': {
+    keywords: ['app-switcher-legacy', 'appswitcherlegacy', 'icon', 'core', 'application switcher', 'change product', 'switch product', 'product switcher', 'top navigation'],
+    componentName: 'AppSwitcherLegacyIcon',
+    package: '@atlaskit/icon/core/app-switcher-legacy',
+    categorization: 'Single-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Core',
+    usage: 'Reserved for the legacy app switcher in global product navigation.'
+  },
   apps: {
     keywords: ['apps', 'icon', 'core', 'third-party', 'applications'],
     componentName: 'AppsIcon',
@@ -1168,6 +1189,17 @@ var metadata = {
     type: 'Core',
     usage: 'Reserved for user mentions.'
   },
+  menu: {
+    keywords: ['menu', 'hamburger', 'navigation', 'switcher', 'app switcher', 'icon', 'core', 'menu', 'top navigation', '3 lines', 'hamburger'],
+    componentName: 'MenuIcon',
+    package: '@atlaskit/icon/core/menu',
+    oldName: ['menu-expand', 'menu'],
+    categorization: 'Single-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Core',
+    usage: 'Reserved for accessing the menu in global product navigation.'
+  },
   microphone: {
     keywords: ['microphone', 'icon', 'core', 'mic', 'mic on', 'voice', 'speak'],
     componentName: 'MicrophoneIcon',
@@ -1198,6 +1230,17 @@ var metadata = {
     type: 'Core',
     usage: 'Reserved for a non-expandable item in a page tree.'
   },
+  notification: {
+    keywords: ['notification', 'bell', 'alarm', 'icon', 'core', 'bell', 'alert', 'top navigation'],
+    componentName: 'NotificationIcon',
+    package: '@atlaskit/icon/core/notification',
+    oldName: ['notification-direct', 'notification'],
+    categorization: 'Single-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Core',
+    usage: 'Reserved for notifications within global product navigation and within product screens.'
+  },
   'office-building': {
     keywords: ['office-building', 'officebuilding', 'icon', 'core', 'organization', 'organisation', 'business'],
     componentName: 'OfficeBuildingIcon',