@atlaskit/icon 21.10.7 → 21.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/icon
 
+## 21.11.0
+
+### Minor Changes
+
+- [`a3973745679`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3973745679) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+## 21.10.8
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 21.10.7
 
 ### Patch Changes

package/base/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/base.js",
   "module:es2019": "../dist/es2019/entry-points/base.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/base.d.ts"
+  "types": "../dist/types/entry-points/base.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/base.d.ts"
+      ]
+    }
+  }
 }

package/codemods/__tests__/21.2.0-metadata-entry.test.tsx

@@ -115,13 +115,11 @@ describe('Update imports', () => {
       import { metadata } from '@atlaskit/icon';
       import { metadata as objectIconMetadata } from '@atlaskit/icon-object';
       import { metadata as fileTypeIconMetadata } from '@atlaskit/icon-file-type';
-      import { metadata as priorityIconMetadata } from '@atlaskit/icon-priority';
     `,
     `
       import metadata from '@atlaskit/icon/metadata';
       import { metadata as objectIconMetadata } from '@atlaskit/icon-object';
       import { metadata as fileTypeIconMetadata } from '@atlaskit/icon-file-type';
-      import { metadata as priorityIconMetadata } from '@atlaskit/icon-priority';
     `,
     'should work as expected on a real-world case',
   );

package/constants/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/constants.js",
   "module:es2019": "../dist/es2019/entry-points/constants.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/constants.d.ts"
+  "types": "../dist/types/entry-points/constants.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/constants.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/components/icon.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -25,7 +25,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var iconStyles = (0, _core.css)({
+var iconStyles = (0, _react2.css)({
   display: 'inline-block',
   flexShrink: 0,
   lineHeight: 1,
@@ -42,7 +42,7 @@ var iconStyles = (0, _core.css)({
  * For windows high contrast mode
  */
 
-var baseHcmStyles = (0, _core.css)({
+var baseHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '> svg': {
@@ -54,7 +54,7 @@ var baseHcmStyles = (0, _core.css)({
     }
   }
 });
-var primaryEqualsSecondaryHcmStyles = (0, _core.css)({
+var primaryEqualsSecondaryHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '> svg': {
@@ -66,7 +66,7 @@ var primaryEqualsSecondaryHcmStyles = (0, _core.css)({
     }
   }
 });
-var secondaryTransparentHcmStyles = (0, _core.css)({
+var secondaryTransparentHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '> svg': {
@@ -101,7 +101,7 @@ var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
       __html: dangerouslySetGlyph
     }
   } : {
-    children: Glyph ? (0, _core.jsx)(Glyph, {
+    children: Glyph ? (0, _react2.jsx)(Glyph, {
       role: "presentation"
     }) : null
   };
@@ -114,7 +114,7 @@ var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("span", (0, _extends2.default)({
+  return (0, _react2.jsx)("span", (0, _extends2.default)({
     "data-testid": testId,
     role: label ? 'img' : 'presentation',
     "aria-label": label ? label : undefined,
@@ -128,7 +128,7 @@ var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     // We could then simplify how common styles are dealt with simply by encapsualting them
     // at their appropriate level and/or having a singular approach to css variables in the package
     dimensions && // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.css)({
+    (0, _react2.css)({
       width: dimensions.width,
       height: dimensions.height,
       '> svg': dimensions

package/dist/cjs/components/skeleton.js

@@ -5,28 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = require("react");
+var _react2 = require("react");
 
 var _styles = require("./styles");
 
 /** @jsx jsx */
-var skeletonStyles = (0, _core.css)({
+var skeletonStyles = (0, _react.css)({
   display: 'inline-block',
   borderRadius: '50%'
 });
-var subtleOpacityStyles = (0, _core.css)({
+var subtleOpacityStyles = (0, _react.css)({
   opacity: 0.15
 });
-var strongOpacityStyles = (0, _core.css)({
+var strongOpacityStyles = (0, _react.css)({
   opacity: 0.3
 });
 /**
  * __Skeleton__
  */
 
-var Skeleton = /*#__PURE__*/(0, _react.memo)(function Skeleton(_ref) {
+var Skeleton = /*#__PURE__*/(0, _react2.memo)(function Skeleton(_ref) {
   var testId = _ref.testId,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
@@ -34,7 +34,7 @@ var Skeleton = /*#__PURE__*/(0, _react.memo)(function Skeleton(_ref) {
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": testId,
     style: {
       backgroundColor: color

package/dist/cjs/components/styles.js

@@ -7,7 +7,7 @@ exports.sizeStyleMap = exports.getIconSize = exports.commonSVGStyles = void 0;
 
 var _constants = require("../constants");
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var commonSVGStyles = {
   overflow: 'hidden',
@@ -23,10 +23,10 @@ var commonSVGStyles = {
   }
 };
 exports.commonSVGStyles = commonSVGStyles;
-var smallStyles = (0, _core.css)(_constants.dimensions.small);
-var mediumStyles = (0, _core.css)(_constants.dimensions.medium);
-var largeStyles = (0, _core.css)(_constants.dimensions.large);
-var xlargeStyles = (0, _core.css)(_constants.dimensions.xlarge); // pre-built css style-size map
+var smallStyles = (0, _react.css)(_constants.dimensions.small);
+var mediumStyles = (0, _react.css)(_constants.dimensions.medium);
+var largeStyles = (0, _react.css)(_constants.dimensions.large);
+var xlargeStyles = (0, _react.css)(_constants.dimensions.xlarge); // pre-built css style-size map
 
 var sizeStyleMap = {
   small: smallStyles,

package/dist/cjs/components/svg.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -17,7 +17,7 @@ var _styles = require("./styles");
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var svgStyles = (0, _core.css)(_styles.commonSVGStyles);
+var svgStyles = (0, _react2.css)(_styles.commonSVGStyles);
 /**
  * __SVG__
  *
@@ -40,7 +40,7 @@ var SVG = /*#__PURE__*/(0, _react.memo)(function SVG(_ref) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("svg", {
+  return (0, _react2.jsx)("svg", {
     viewBox: "0 0 24 24",
     style: {
       color: primaryColor,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "21.10.7",
+	"version": "21.11.0",
 	"sideEffects": false
 }

package/dist/es2019/components/icon.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';

package/dist/es2019/components/skeleton.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { memo } from 'react';
 import { sizeStyleMap } from './styles';
 const skeletonStyles = css({

package/dist/es2019/components/styles.js

@@ -1,5 +1,5 @@
 import { dimensions } from '../constants';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export const commonSVGStyles = {
   overflow: 'hidden',
   pointerEvents: 'none',

package/dist/es2019/components/svg.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, sizeStyleMap } from './styles'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "21.10.7",
+	"version": "21.11.0",
 	"sideEffects": false
 }

package/dist/esm/components/icon.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';

package/dist/esm/components/skeleton.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { memo } from 'react';
 import { sizeStyleMap } from './styles';
 var skeletonStyles = css({

package/dist/esm/components/styles.js

@@ -1,5 +1,5 @@
 import { dimensions } from '../constants';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export var commonSVGStyles = {
   overflow: 'hidden',
   pointerEvents: 'none',

package/dist/esm/components/svg.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, sizeStyleMap } from './styles'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "21.10.7",
+	"version": "21.11.0",
 	"sideEffects": false
 }

package/dist/types/components/styles.d.ts

@@ -1,11 +1,11 @@
 import type { Size } from '../types';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 export declare const commonSVGStyles: CSSObject;
 export declare const sizeStyleMap: {
-    small: import("@emotion/utils").SerializedStyles;
-    medium: import("@emotion/utils").SerializedStyles;
-    large: import("@emotion/utils").SerializedStyles;
-    xlarge: import("@emotion/utils").SerializedStyles;
+    small: import("@emotion/react").SerializedStyles;
+    medium: import("@emotion/react").SerializedStyles;
+    large: import("@emotion/react").SerializedStyles;
+    xlarge: import("@emotion/react").SerializedStyles;
 };
 /**
  * Returns the width of the icon's parent span. This function has

package/dist/types-ts4.0/components/icon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { IconProps } from '../types';
+/**
+ * __Icon__
+ *
+ * An icon is used as a visual representation of common actions and commands to provide context.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+export declare const Icon: import("react").NamedExoticComponent<IconProps>;
+export default Icon;

package/dist/types-ts4.0/components/skeleton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { SkeletonProps } from '../types';
+/**
+ * __Skeleton__
+ */
+declare const Skeleton: import("react").NamedExoticComponent<SkeletonProps>;
+export default Skeleton;

package/dist/types-ts4.0/components/styles.d.ts

@@ -0,0 +1,28 @@
+import type { Size } from '../types';
+import { CSSObject } from '@emotion/react';
+export declare const commonSVGStyles: CSSObject;
+export declare const sizeStyleMap: {
+    small: import("@emotion/react").SerializedStyles;
+    medium: import("@emotion/react").SerializedStyles;
+    large: import("@emotion/react").SerializedStyles;
+    xlarge: import("@emotion/react").SerializedStyles;
+};
+/**
+ * Returns the width of the icon's parent span. This function has
+ * special behaviour to deal with icon-file-type specifically.
+ *
+ * The reality is the SVG still has its own dimensions, so this is
+ * a secondary fallback which in 95% of cases is not required.
+ * It's only really being kept to maintain backward compatability.
+ */
+export declare const getIconSize: ({ width, height, size, }: {
+    size?: Size | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => {
+    readonly width: string;
+    readonly height: string;
+} | {
+    width: number;
+    height: number;
+} | undefined;

package/dist/types-ts4.0/components/svg.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { SVGProps } from '../types';
+/**
+ * __SVG__
+ *
+ * An icon is used as a visual representation of common actions and commands to provide context.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-svgs)
+ */
+declare const SVG: import("react").NamedExoticComponent<SVGProps>;
+export default SVG;

package/dist/types-ts4.0/components/utils.d.ts

@@ -0,0 +1,6 @@
+import type { ThemeModes } from '@atlaskit/theme/types';
+/**
+ * Returns the background color depending on the passed through mode.
+ * @param mode
+ */
+export declare const getBackground: (mode?: ThemeModes) => "var(--ds-surface)";

package/dist/types-ts4.0/constants.d.ts

@@ -0,0 +1,21 @@
+import type { Size } from './types';
+export declare const sizes: Record<Size, string>;
+export declare const sizeMap: Record<Size, Size>;
+export declare const dimensions: {
+    readonly small: {
+        readonly width: string;
+        readonly height: string;
+    };
+    readonly medium: {
+        readonly width: string;
+        readonly height: string;
+    };
+    readonly large: {
+        readonly width: string;
+        readonly height: string;
+    };
+    readonly xlarge: {
+        readonly width: string;
+        readonly height: string;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { default, Icon } from '../components/icon';
+export type { IconProps } from '../types';

package/dist/types-ts4.0/entry-points/constants.d.ts

@@ -0,0 +1 @@
+export { sizeMap, sizes } from '../constants';

package/dist/types-ts4.0/entry-points/metadata.d.ts

@@ -0,0 +1 @@
+export { default } from '../metadata';

package/dist/types-ts4.0/entry-points/svg.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../components/svg';
+export type { SVGProps } from '../types';

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

@@ -0,0 +1 @@
+export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, } from '../types';

package/dist/types-ts4.0/extract-react-types/custom-glyph.d.ts

@@ -0,0 +1,2 @@
+import type { CustomGlyphProps as Props } from '../types';
+export default function CustomGlyphProps(props: Props): null;

package/dist/types-ts4.0/extract-react-types/glyph-no-color-size.d.ts

@@ -0,0 +1,2 @@
+import type { OtherGlyphProps } from '../types';
+export default function (_: OtherGlyphProps): void;

package/dist/types-ts4.0/extract-react-types/glyph-no-color.d.ts

@@ -0,0 +1,2 @@
+import type { OtherGlyphProps, GlyphSizeProps } from '../types';
+export default function (_: OtherGlyphProps & GlyphSizeProps): void;

package/dist/types-ts4.0/extract-react-types/glyph.d.ts

@@ -0,0 +1,2 @@
+import type { GlyphProps } from '../types';
+export default function (_: GlyphProps): void;

package/dist/types-ts4.0/extract-react-types/svg.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps as Props } from '../types';
+export default function SVGProps(props: Props): null;

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

@@ -0,0 +1,5 @@
+export { default } from './components/icon';
+export { default as SVG } from './components/svg';
+export { sizeMap as size, sizes } from './constants';
+export { default as Skeleton } from './components/skeleton';
+export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, } from './types';

package/dist/types-ts4.0/metadata.d.ts

@@ -0,0 +1,16 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by the build process.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ *
+ * To change the format of this file, modify build/icon/createIconDocs.js.
+ * Add synonyms in icon/icons/synonyms.js.
+ */
+interface Data {
+    keywords: string[];
+    componentName: string;
+    package: string;
+}
+declare const metaData: Record<string, Data>;
+export default metaData;

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

@@ -0,0 +1,82 @@
+import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
+export declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
+export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
+    /**
+     * provided to a custom glyph
+     */
+    'data-testid'?: string;
+    /**
+     * provided to a custom glyph
+     */
+    'aria-label'?: string;
+    /**
+     * provided classname for custom glyph to match ADG styles
+     */
+    className?: string;
+}
+export interface GlyphColorProps {
+    /**
+     * Primary color for the icon.
+     * Inherits the current font color by default.
+     */
+    primaryColor?: string;
+    /**
+     * Secondary color for the icon.
+     * Defaults to the page background for an icon that supports two colors.
+     */
+    secondaryColor?: string;
+}
+export interface GlyphSizeProps {
+    /**
+     * There are three icon sizes – small (16px), medium (24px), and large (32px).
+     * This pixel size refers to the canvas the icon sits on,
+     * not the size of the icon shape itself.
+     */
+    size?: Size;
+}
+export interface OtherGlyphProps {
+    /**
+     * Text used to describe what the icon is in context.
+     * A label is needed when there is no pairing visible text next to the icon.
+     * An empty string marks the icon as presentation only.
+     */
+    label: string;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
+}
+export interface IconProps extends GlyphProps {
+    /**
+     * Custom icon component that returns an SVG element with set `viewBox`,
+     * `width`, and `height` props.
+     */
+    glyph?: ComponentType<CustomGlyphProps>;
+    /**
+     * @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 SkeletonProps {
+    color?: string;
+    size?: Size;
+    weight?: 'normal' | 'strong';
+    /**
+     * A unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+export interface SVGProps extends GlyphProps {
+    /**
+     * The children of the SVG, should still honour the constraints of icons
+     */
+    children?: ReactNode;
+}

package/metadata/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/metadata.js",
   "module:es2019": "../dist/es2019/entry-points/metadata.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/metadata.d.ts"
+  "types": "../dist/types/entry-points/metadata.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/metadata.d.ts"
+      ]
+    }
+  }
 }

package/package.json

@@ -1,17 +1,24 @@
 {
   "name": "@atlaskit/icon",
-  "version": "21.10.7",
+  "version": "21.11.0",
   "description": "An icon is a visual representation of a command, device, directory, or common action.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/icon/",
@@ -19,7 +26,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Icon"
+      "name": "Icon",
+      "category": "Components"
     }
   },
   "af:exports": {
@@ -35,10 +43,10 @@
     "build-glyphs": "ts-node --project ../../../tsconfig.node.json ./build/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -47,21 +55,21 @@
     "@af/icon-build-process": "^0.3.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/dynamic-table": "^14.5.0",
+    "@atlaskit/ds-lib": "^2.1.1",
+    "@atlaskit/dynamic-table": "^14.8.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/icon-object": "^6.2.0",
-    "@atlaskit/icon-priority": "^6.3.0",
-    "@atlaskit/logo": "^13.6.0",
-    "@atlaskit/modal-dialog": "^12.2.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/logo": "^13.10.0",
+    "@atlaskit/modal-dialog": "^12.4.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/textfield": "^5.3.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@babel/core": "^7.12.3",
     "@emotion/babel-preset-css-prop": "^10.0.7",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "classnames": "^2.2.5",
     "fs-extra": "^4.0.2",
     "jest-emotion": "^10.0.32",
@@ -70,7 +78,7 @@
     "nullthrows": "^1.1.1",
     "pkg-dir": "^4.2.0",
     "react-dom": "^16.8.0",
-    "ts-node": "^10.0.0",
+    "ts-node": "^10.9.1",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [
@@ -79,6 +87,7 @@
   ],
   "techstack": {
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "styling": [
         "static",

package/report.api.md

@@ -0,0 +1,138 @@
+## API Report File for "@atlaskit/icon".
+
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+```ts
+/// <reference types="react" />
+
+import type { ComponentType } from 'react';
+import { NamedExoticComponent } from 'react';
+import type { ReactNode } from 'react';
+import type { SVGProps as SVGProps_2 } from 'react';
+
+export declare interface CustomGlyphProps extends SVGProps_2<SVGSVGElement> {
+  /**
+   * provided to a custom glyph
+   */
+  'data-testid'?: string;
+  /**
+   * provided to a custom glyph
+   */
+  'aria-label'?: string;
+  /**
+   * provided classname for custom glyph to match ADG styles
+   */
+  className?: string;
+}
+
+declare interface GlyphColorProps {
+  /**
+   * Primary color for the icon.
+   * Inherits the current font color by default.
+   */
+  primaryColor?: string;
+  /**
+   * Secondary color for the icon.
+   * Defaults to the page background for an icon that supports two colors.
+   */
+  secondaryColor?: string;
+}
+
+export declare interface GlyphProps
+  extends OtherGlyphProps,
+    GlyphSizeProps,
+    GlyphColorProps {}
+
+declare interface GlyphSizeProps {
+  /**
+   * There are three icon sizes – small (16px), medium (24px), and large (32px).
+   * This pixel size refers to the canvas the icon sits on,
+   * not the size of the icon shape itself.
+   */
+  size?: Size;
+}
+
+/**
+ * __Icon__
+ *
+ * An icon is used as a visual representation of common actions and commands to provide context.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+declare const Icon: NamedExoticComponent<IconProps>;
+export default Icon;
+
+export declare interface IconProps extends GlyphProps {
+  /**
+   * Custom icon component that returns an SVG element with set `viewBox`,
+   * `width`, and `height` props.
+   */
+  glyph?: ComponentType<CustomGlyphProps>;
+  /**
+   * @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;
+}
+
+declare interface OtherGlyphProps {
+  /**
+   * Text used to describe what the icon is in context.
+   * A label is needed when there is no pairing visible text next to the icon.
+   * An empty string marks the icon as presentation only.
+   */
+  label: string;
+  /**
+   * A `testId` prop is provided for specified elements,
+   * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+   * serving as a hook for automated tests.
+   */
+  testId?: string;
+}
+
+export declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
+
+export declare const size: Record<Size, Size>;
+
+export declare const sizes: Record<Size, string>;
+
+/**
+ * __Skeleton__
+ */
+export declare const Skeleton: NamedExoticComponent<SkeletonProps>;
+
+export declare interface SkeletonProps {
+  color?: string;
+  size?: Size;
+  weight?: 'normal' | 'strong';
+  /**
+   * A unique string that appears as a data attribute `data-testid` in the rendered code,
+   * serving as a hook for automated tests.
+   */
+  testId?: string;
+}
+
+/**
+ * __SVG__
+ *
+ * An icon is used as a visual representation of common actions and commands to provide context.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-svgs)
+ */
+export declare const SVG: NamedExoticComponent<SVGProps>;
+
+export declare interface SVGProps extends GlyphProps {
+  /**
+   * The children of the SVG, should still honour the constraints of icons
+   */
+  children?: ReactNode;
+}
+
+export {};
+```

package/svg/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/svg.js",
   "module:es2019": "../dist/es2019/entry-points/svg.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/svg.d.ts"
+  "types": "../dist/types/entry-points/svg.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/svg.d.ts"
+      ]
+    }
+  }
 }

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/types.d.ts"
+  "types": "../dist/types/entry-points/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/types.d.ts"
+      ]
+    }
+  }
 }