@atlaskit/icon 22.2.0 → 22.3.1

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/icon",
-  "version": "22.2.0",
+  "version": "22.3.1",
   "description": "An icon is a visual representation of a command, device, directory, or common action.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,8 @@
     "build-glyphs": "ts-node --project ../../../tsconfig.node.json ./build/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.48.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -39,10 +40,12 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@af/icon-build-process": "^0.5.0",
+    "@af/icon-build-process": "^0.6.0",
     "@af/visual-regression": "*",
+    "@atlaskit/code": "^15.2.0",
     "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/logo": "^13.16.0",
+    "@atlaskit/logo": "^13.17.0",
+    "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/theme": "^12.8.0",
@@ -50,6 +53,7 @@
     "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/icon-lab": "^0.0.1",
     "@babel/core": "^7.20.0",
     "@emotion/babel-preset-css-prop": "^10.0.7",
     "@testing-library/react": "^12.1.5",
@@ -96,12 +100,20 @@
   "homepage": "https://atlassian.design/components/icon/",
   "af:exports": {
     "./base": "./src/entry-points/base.tsx",
+    "./UNSAFE_base-new": "./src/entry-points/base-new.tsx",
     "./constants": "./src/entry-points/constants.tsx",
     "./metadata": "./src/entry-points/metadata.tsx",
     "./svg": "./src/entry-points/svg.tsx",
     "./types": "./src/entry-points/types.tsx",
     "./glyph": "./glyph",
+    "./core": "./core",
+    "./utility": "./utility",
     ".": "./src/index.tsx"
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.design-system-team.enable-new-icons": {
+      "type": "boolean"
+    }
+  }
 }

package/utility/add.d.ts

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

package/utility/add.js

@@ -0,0 +1,27 @@
+"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: "Add".
+ * 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(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-width="1.5" d="M6 6h5M6 6H1m5 0V1m0 5v5"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+AddIcon.displayName = 'AddIcon';
+var _default = exports.default = AddIcon;

package/utility/check-circle.d.ts

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

package/utility/check-circle.js

@@ -0,0 +1,27 @@
+"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: "CheckCircle".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for Helper Messages in Forms.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const CheckCircleIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path fill="currentColor" fill-rule="evenodd" d="M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12m-.652-3.238 4.2-4.5-1.096-1.024L4.79 7.161 3.54 5.867 2.46 6.909l1.8 1.862a.75.75 0 0 0 1.088-.01" clip-rule="evenodd"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+CheckCircleIcon.displayName = 'CheckCircleIcon';
+var _default = exports.default = CheckCircleIcon;

package/utility/check-mark.d.ts

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

package/utility/check-mark.js

@@ -0,0 +1,27 @@
+"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: "CheckMark".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: TBD
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const CheckMarkIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M1.125 6.75 4 9.75l6.875-7.25"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+CheckMarkIcon.displayName = 'CheckMarkIcon';
+var _default = exports.default = CheckMarkIcon;

package/utility/chevron-down.d.ts

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

package/utility/chevron-down.js

@@ -0,0 +1,27 @@
+"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: "ChevronDown".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for dropdown menus, selects, accordions, and expands.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const ChevronDownIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M10.5 4 6 8.5 1.5 4"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+ChevronDownIcon.displayName = 'ChevronDownIcon';
+var _default = exports.default = ChevronDownIcon;

package/utility/chevron-left.d.ts

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

package/utility/chevron-left.js

@@ -0,0 +1,27 @@
+"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: "ChevronLeft".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for collapse side nav and to indicate previous in dates.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const ChevronLeftIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m8 10.75-4.5-4.5L8 1.75"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+var _default = exports.default = ChevronLeftIcon;

package/utility/chevron-right.d.ts

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

package/utility/chevron-right.js

@@ -0,0 +1,27 @@
+"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: "ChevronRight".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for menu fly-outs and to indicate next in dates.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const ChevronRightIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m4 10.75 4.5-4.5L4 1.75"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+var _default = exports.default = ChevronRightIcon;

package/utility/chevron-up.d.ts

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

package/utility/chevron-up.js

@@ -0,0 +1,27 @@
+"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: "ChevronUp".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for accordions.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const ChevronUpIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M10.5 8 6 3.5 1.5 8"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+ChevronUpIcon.displayName = 'ChevronUpIcon';
+var _default = exports.default = ChevronUpIcon;

package/utility/cross-circle.d.ts

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

package/utility/cross-circle.js

@@ -0,0 +1,27 @@
+"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: "CrossCircle".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for Helper Messages in Forms.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const CrossCircleIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path fill="currentColor" fill-rule="evenodd" d="M6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12m3.28-8.22L7.06 6l2.22 2.22-1.06 1.06L6 7.06 3.78 9.28 2.72 8.22 4.94 6 2.72 3.78l1.06-1.06L6 4.94l2.22-2.22z" clip-rule="evenodd"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+CrossCircleIcon.displayName = 'CrossCircleIcon';
+var _default = exports.default = CrossCircleIcon;

package/utility/cross.d.ts

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

package/utility/cross.js

@@ -0,0 +1,27 @@
+"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: "Cross".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Known uses: remove tag.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const CrossIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path fill="currentColor" fill-rule="evenodd" d="m7.06 6 3.47-3.47-1.06-1.06L6 4.94 2.53 1.47 1.47 2.53 4.94 6 1.47 9.47l1.06 1.06L6 7.06l3.47 3.47 1.06-1.06z" clip-rule="evenodd"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+CrossIcon.displayName = 'CrossIcon';
+var _default = exports.default = CrossIcon;

package/utility/error.d.ts

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

package/utility/error.js

@@ -0,0 +1,27 @@
+"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: "Error".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for Helper Messages in Forms.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const ErrorIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path fill="currentColor" fill-rule="evenodd" d="M.384 5.116 5.116.384a1.25 1.25 0 0 1 1.768 0l4.732 4.732a1.25 1.25 0 0 1 0 1.768l-4.732 4.732a1.25 1.25 0 0 1-1.768 0L.384 6.884a1.25 1.25 0 0 1 0-1.768M6.75 2.5v4h-1.5v-4zM6 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2" clip-rule="evenodd"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+ErrorIcon.displayName = 'ErrorIcon';
+var _default = exports.default = ErrorIcon;

package/utility/information.d.ts

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

package/utility/information.js

@@ -0,0 +1,27 @@
+"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: "Information".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for Helper Messages in Forms.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const InformationIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path fill="currentColor" fill-rule="evenodd" d="M12 6A6 6 0 1 1 0 6a6 6 0 0 1 12 0m-7.5-.75H6a.75.75 0 0 1 .75.75v4h-1.5V6.75H4.5zM6 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2" clip-rule="evenodd"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+InformationIcon.displayName = 'InformationIcon';
+var _default = exports.default = InformationIcon;

package/utility/link-external.d.ts

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

package/utility/link-external.js

@@ -0,0 +1,27 @@
+"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: "LinkExternal".
+ * Category: Multi-purpose
+ * Location: ADS
+ * Usage guidance: Reserved for links that open up a new tab as a secondary/tertiary action.
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+const LinkExternalIcon = props => /*#__PURE__*/_react.default.createElement(_UNSAFE_baseNew.default, Object.assign({
+  dangerouslySetGlyph: `<path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M10.25 6.25v-4.5h-4.5m-2.25 0h-.81a.94.94 0 0 0-.94.94v6.62c0 .52.42.94.94.94h6.62c.52 0 .94-.42.94-.94V8.5M5 7l5.25-5.25"/>`,
+  type: 'utility'
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props));
+LinkExternalIcon.displayName = 'LinkExternalIcon';
+var _default = exports.default = LinkExternalIcon;