@atlaskit/icon 21.11.4 → 21.12.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/icon
 
+## 21.12.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.11.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.11.4
 
 ### Patch Changes

package/dist/cjs/components/icon.js

@@ -1,29 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Icon = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _components = require("@atlaskit/theme/components");
-
 var _utils = require("./utils");
-
 var _styles = require("./styles");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-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; }
+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; } /** @jsx jsx */
+/**
+ * We are hiding these props from consumers as they're used to
+ * hack around icon sizing specifically for icon-file-type.
+ */
 
 var iconStyles = (0, _react2.css)({
   display: 'inline-block',
@@ -41,7 +35,6 @@ var iconStyles = (0, _react2.css)({
 /**
  * For windows high contrast mode
  */
-
 var baseHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -50,10 +43,10 @@ var baseHcmStyles = (0, _react2.css)({
       '--icon-primary-color': 'CanvasText',
       // foreground
       '--icon-secondary-color': 'Canvas' // background
-
     }
   }
 });
+
 var primaryEqualsSecondaryHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -62,19 +55,19 @@ var primaryEqualsSecondaryHcmStyles = (0, _react2.css)({
       // set the --icon-primary-color to Canvas
       // this is usually to convey state i.e. Checkbox checked -> not checked
       '--icon-primary-color': 'Canvas' // foreground
-
     }
   }
 });
+
 var secondaryTransparentHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '> svg': {
       '--icon-secondary-color': 'transparent' // background
-
     }
   }
 });
+
 /**
  * __Icon__
  *
@@ -83,19 +76,18 @@ var secondaryTransparentHcmStyles = (0, _react2.css)({
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
  */
-
 var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
   var _ref = props,
-      Glyph = _ref.glyph,
-      dangerouslySetGlyph = _ref.dangerouslySetGlyph,
-      _ref$primaryColor = _ref.primaryColor,
-      primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
-      secondaryColor = _ref.secondaryColor,
-      size = _ref.size,
-      testId = _ref.testId,
-      label = _ref.label,
-      width = _ref.width,
-      height = _ref.height;
+    Glyph = _ref.glyph,
+    dangerouslySetGlyph = _ref.dangerouslySetGlyph,
+    _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    size = _ref.size,
+    testId = _ref.testId,
+    label = _ref.label,
+    width = _ref.width,
+    height = _ref.height;
   var glyphProps = dangerouslySetGlyph ? {
     dangerouslySetInnerHTML: {
       __html: dangerouslySetGlyph
@@ -110,10 +102,8 @@ var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     height: height,
     size: size
   });
-
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return (0, _react2.jsx)("span", (0, _extends2.default)({
     "data-testid": testId,
     role: label ? 'img' : undefined,
@@ -124,10 +114,12 @@ var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
       '--icon-secondary-color': secondaryColor || (0, _utils.getBackground)(mode)
     }
   }, glyphProps, {
-    css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles, // NB: This can be resolved if this component, composes base SVG / and/or skeleton
+    css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
+    // NB: This can be resolved if this component, composes base SVG / and/or skeleton
     // 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
+    dimensions &&
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     (0, _react2.css)({
       width: dimensions.width,
       height: dimensions.height,

package/dist/cjs/components/skeleton.js

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _react2 = require("react");
-
 var _styles = require("./styles");
-
 /** @jsx jsx */
+
 var skeletonStyles = (0, _react.css)({
   display: 'inline-block',
   borderRadius: '50%'
@@ -22,18 +19,18 @@ var subtleOpacityStyles = (0, _react.css)({
 var strongOpacityStyles = (0, _react.css)({
   opacity: 0.3
 });
+
 /**
  * __Skeleton__
  */
-
 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,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+    _ref$weight = _ref.weight,
+    weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
   return (0, _react.jsx)("div", {
     "data-testid": testId,
     style: {

package/dist/cjs/components/styles.js

@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sizeStyleMap = exports.getIconSize = exports.commonSVGStyles = void 0;
-
 var _constants = require("../constants");
-
 var _react = require("@emotion/react");
-
 var commonSVGStyles = {
   overflow: 'hidden',
   pointerEvents: 'none',
-
   /**
    * Stop-color doesn't properly apply in chrome when the inherited/current color changes.
    * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
@@ -26,14 +22,16 @@ exports.commonSVGStyles = commonSVGStyles;
 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 xlargeStyles = (0, _react.css)(_constants.dimensions.xlarge);
 
+// pre-built css style-size map
 var sizeStyleMap = {
   small: smallStyles,
   medium: mediumStyles,
   large: largeStyles,
   xlarge: xlargeStyles
 };
+
 /**
  * Returns the width of the icon's parent span. This function has
  * special behaviour to deal with icon-file-type specifically.
@@ -42,26 +40,20 @@ var sizeStyleMap = {
  * a secondary fallback which in 95% of cases is not required.
  * It's only really being kept to maintain backward compatability.
  */
-
 exports.sizeStyleMap = sizeStyleMap;
-
 var getIconSize = function getIconSize(_ref) {
   var width = _ref.width,
-      height = _ref.height,
-      size = _ref.size;
-
+    height = _ref.height,
+    size = _ref.size;
   if (width && height) {
     return {
       width: width,
       height: height
     };
   }
-
   if (size) {
     return _constants.dimensions[size];
   }
-
   return undefined;
 };
-
 exports.getIconSize = getIconSize;

package/dist/cjs/components/svg.js

@@ -4,20 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _components = require("@atlaskit/theme/components");
-
 var _utils = require("./utils");
-
 var _styles = require("./styles");
-
 /** @jsx jsx */
+
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var svgStyles = (0, _react2.css)(_styles.commonSVGStyles);
+
 /**
  * __SVG__
  *
@@ -26,20 +22,17 @@ var svgStyles = (0, _react2.css)(_styles.commonSVGStyles);
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-svgs)
  */
-
 var SVG = /*#__PURE__*/(0, _react.memo)(function SVG(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      label = _ref.label,
-      _ref$primaryColor = _ref.primaryColor,
-      primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
-      secondaryColor = _ref.secondaryColor,
-      testId = _ref.testId,
-      children = _ref.children;
-
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    label = _ref.label,
+    _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    testId = _ref.testId,
+    children = _ref.children;
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return (0, _react2.jsx)("svg", {
     viewBox: "0 0 24 24",
     style: {

package/dist/cjs/components/utils.js

@@ -8,14 +8,13 @@ var themedBackground = {
   light: "var(--ds-surface, #FFFFFF)",
   dark: "var(--ds-surface, #1B2638)"
 };
+
 /**
  * Returns the background color depending on the passed through mode.
  * @param mode
  */
-
 var getBackground = function getBackground() {
   var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
   return themedBackground[mode];
 };
-
 exports.getBackground = getBackground;

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,9 +16,6 @@ Object.defineProperty(exports, "default", {
     return _icon.default;
   }
 });
-
 var _icon = _interopRequireWildcard(require("../components/icon"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -15,5 +15,4 @@ Object.defineProperty(exports, "sizes", {
     return _constants.sizes;
   }
 });
-
 var _constants = require("../constants");

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _metadata.default;
   }
 });
-
 var _metadata = _interopRequireDefault(require("../metadata"));

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _svg.default;
   }
 });
-
 var _svg = _interopRequireDefault(require("../components/svg"));

package/dist/cjs/extract-react-types/custom-glyph.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = CustomGlyphProps;
-
 function CustomGlyphProps(props) {
   return null;
 }

package/dist/cjs/extract-react-types/glyph-no-color-size.js

@@ -4,5 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = _default;
-
 function _default(_) {}

package/dist/cjs/extract-react-types/glyph-no-color.js

@@ -4,5 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = _default;
-
 function _default(_) {}

package/dist/cjs/extract-react-types/glyph.js

@@ -4,5 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = _default;
-
 function _default(_) {}

package/dist/cjs/extract-react-types/svg.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SVGProps;
-
 function SVGProps(props) {
   return null;
 }

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -35,11 +34,7 @@ Object.defineProperty(exports, "sizes", {
     return _constants.sizes;
   }
 });
-
 var _icon = _interopRequireDefault(require("./components/icon"));
-
 var _svg = _interopRequireDefault(require("./components/svg"));
-
 var _constants = require("./constants");
-
 var _skeleton = _interopRequireDefault(require("./components/skeleton"));

package/dist/cjs/metadata.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /* eslint-disable global-require */
-
 /**
  * NOTE:
  *
@@ -16,6 +14,7 @@ exports.default = void 0;
  * To change the format of this file, modify build/icon/createIconDocs.js.
  * Add synonyms in icon/icons/synonyms.js.
  */
+
 var metaData = {
   activity: {
     keywords: ['activity', 'window', 'icon', 'core'],

package/dist/cjs/version.json

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

package/dist/es2019/components/icon.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
+
 /**
  * We are hiding these props from consumers as they're used to
  * hack around icon sizing specifically for icon-file-type.
@@ -16,7 +16,8 @@ const iconStyles = css({
   flexShrink: 0,
   lineHeight: 1,
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '> svg': { ...commonSVGStyles,
+  '> svg': {
+    ...commonSVGStyles,
     maxWidth: '100%',
     maxHeight: '100%',
     color: 'var(--icon-primary-color)',
@@ -27,7 +28,6 @@ const iconStyles = css({
 /**
  * For windows high contrast mode
  */
-
 const baseHcmStyles = css({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -36,10 +36,10 @@ const baseHcmStyles = css({
       '--icon-primary-color': 'CanvasText',
       // foreground
       '--icon-secondary-color': 'Canvas' // background
-
     }
   }
 });
+
 const primaryEqualsSecondaryHcmStyles = css({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -48,19 +48,19 @@ const primaryEqualsSecondaryHcmStyles = css({
       // set the --icon-primary-color to Canvas
       // this is usually to convey state i.e. Checkbox checked -> not checked
       '--icon-primary-color': 'Canvas' // foreground
-
     }
   }
 });
+
 const secondaryTransparentHcmStyles = css({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '> svg': {
       '--icon-secondary-color': 'transparent' // background
-
     }
   }
 });
+
 /**
  * __Icon__
  *
@@ -69,7 +69,6 @@ const secondaryTransparentHcmStyles = css({
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
  */
-
 export const Icon = /*#__PURE__*/memo(function Icon(props) {
   const {
     glyph: Glyph,
@@ -109,10 +108,12 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
       '--icon-secondary-color': secondaryColor || getBackground(mode)
     }
   }, glyphProps, {
-    css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles, // NB: This can be resolved if this component, composes base SVG / and/or skeleton
+    css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
+    // NB: This can be resolved if this component, composes base SVG / and/or skeleton
     // 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
+    dimensions &&
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     css({
       width: dimensions.width,
       height: dimensions.height,

package/dist/es2019/components/skeleton.js

@@ -12,10 +12,10 @@ const subtleOpacityStyles = css({
 const strongOpacityStyles = css({
   opacity: 0.3
 });
+
 /**
  * __Skeleton__
  */
-
 const Skeleton = /*#__PURE__*/memo(function Skeleton({
   testId,
   size = 'medium',

package/dist/es2019/components/styles.js

@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 export const commonSVGStyles = {
   overflow: 'hidden',
   pointerEvents: 'none',
-
   /**
    * Stop-color doesn't properly apply in chrome when the inherited/current color changes.
    * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
@@ -16,14 +15,16 @@ export const commonSVGStyles = {
 const smallStyles = css(dimensions.small);
 const mediumStyles = css(dimensions.medium);
 const largeStyles = css(dimensions.large);
-const xlargeStyles = css(dimensions.xlarge); // pre-built css style-size map
+const xlargeStyles = css(dimensions.xlarge);
 
+// pre-built css style-size map
 export const sizeStyleMap = {
   small: smallStyles,
   medium: mediumStyles,
   large: largeStyles,
   xlarge: xlargeStyles
 };
+
 /**
  * Returns the width of the icon's parent span. This function has
  * special behaviour to deal with icon-file-type specifically.
@@ -32,7 +33,6 @@ export const sizeStyleMap = {
  * a secondary fallback which in 95% of cases is not required.
  * It's only really being kept to maintain backward compatability.
  */
-
 export const getIconSize = ({
   width,
   height,
@@ -44,10 +44,8 @@ export const getIconSize = ({
       height
     };
   }
-
   if (size) {
     return dimensions[size];
   }
-
   return undefined;
 };

package/dist/es2019/components/svg.js

@@ -3,9 +3,11 @@ import { memo } from 'react';
 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
+import { commonSVGStyles, sizeStyleMap } from './styles';
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const svgStyles = css(commonSVGStyles);
+
 /**
  * __SVG__
  *
@@ -14,7 +16,6 @@ const svgStyles = css(commonSVGStyles);
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-svgs)
  */
-
 const SVG = /*#__PURE__*/memo(function SVG({
   size = 'medium',
   label,

package/dist/es2019/components/utils.js

@@ -2,9 +2,9 @@ const themedBackground = {
   light: "var(--ds-surface, #FFFFFF)",
   dark: "var(--ds-surface, #1B2638)"
 };
+
 /**
  * Returns the background color depending on the passed through mode.
  * @param mode
  */
-
 export const getBackground = (mode = 'light') => themedBackground[mode];

package/dist/es2019/metadata.js

@@ -1,5 +1,4 @@
 /* eslint-disable global-require */
-
 /**
  * NOTE:
  *
@@ -9,6 +8,7 @@
  * To change the format of this file, modify build/icon/createIconDocs.js.
  * Add synonyms in icon/icons/synonyms.js.
  */
+
 const metaData = {
   activity: {
     keywords: ['activity', 'window', 'icon', 'core'],

package/dist/es2019/version.json

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

package/dist/esm/components/icon.js

@@ -1,16 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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) { _defineProperty(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; }
-
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
+
 /**
  * We are hiding these props from consumers as they're used to
  * hack around icon sizing specifically for icon-file-type.
@@ -32,7 +30,6 @@ var iconStyles = css({
 /**
  * For windows high contrast mode
  */
-
 var baseHcmStyles = css({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -41,10 +38,10 @@ var baseHcmStyles = css({
       '--icon-primary-color': 'CanvasText',
       // foreground
       '--icon-secondary-color': 'Canvas' // background
-
     }
   }
 });
+
 var primaryEqualsSecondaryHcmStyles = css({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -53,19 +50,19 @@ var primaryEqualsSecondaryHcmStyles = css({
       // set the --icon-primary-color to Canvas
       // this is usually to convey state i.e. Checkbox checked -> not checked
       '--icon-primary-color': 'Canvas' // foreground
-
     }
   }
 });
+
 var secondaryTransparentHcmStyles = css({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '> svg': {
       '--icon-secondary-color': 'transparent' // background
-
     }
   }
 });
+
 /**
  * __Icon__
  *
@@ -74,19 +71,18 @@ var secondaryTransparentHcmStyles = css({
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
  */
-
 export var Icon = /*#__PURE__*/memo(function Icon(props) {
   var _ref = props,
-      Glyph = _ref.glyph,
-      dangerouslySetGlyph = _ref.dangerouslySetGlyph,
-      _ref$primaryColor = _ref.primaryColor,
-      primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
-      secondaryColor = _ref.secondaryColor,
-      size = _ref.size,
-      testId = _ref.testId,
-      label = _ref.label,
-      width = _ref.width,
-      height = _ref.height;
+    Glyph = _ref.glyph,
+    dangerouslySetGlyph = _ref.dangerouslySetGlyph,
+    _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    size = _ref.size,
+    testId = _ref.testId,
+    label = _ref.label,
+    width = _ref.width,
+    height = _ref.height;
   var glyphProps = dangerouslySetGlyph ? {
     dangerouslySetInnerHTML: {
       __html: dangerouslySetGlyph
@@ -101,10 +97,8 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     height: height,
     size: size
   });
-
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return jsx("span", _extends({
     "data-testid": testId,
     role: label ? 'img' : undefined,
@@ -115,10 +109,12 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
       '--icon-secondary-color': secondaryColor || getBackground(mode)
     }
   }, glyphProps, {
-    css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles, // NB: This can be resolved if this component, composes base SVG / and/or skeleton
+    css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
+    // NB: This can be resolved if this component, composes base SVG / and/or skeleton
     // 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
+    dimensions &&
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     css({
       width: dimensions.width,
       height: dimensions.height,

package/dist/esm/components/skeleton.js

@@ -12,18 +12,18 @@ var subtleOpacityStyles = css({
 var strongOpacityStyles = css({
   opacity: 0.3
 });
+
 /**
  * __Skeleton__
  */
-
 var Skeleton = /*#__PURE__*/memo(function Skeleton(_ref) {
   var testId = _ref.testId,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+    _ref$weight = _ref.weight,
+    weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
   return jsx("div", {
     "data-testid": testId,
     style: {

package/dist/esm/components/styles.js

@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 export var commonSVGStyles = {
   overflow: 'hidden',
   pointerEvents: 'none',
-
   /**
    * Stop-color doesn't properly apply in chrome when the inherited/current color changes.
    * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
@@ -16,14 +15,16 @@ export var commonSVGStyles = {
 var smallStyles = css(dimensions.small);
 var mediumStyles = css(dimensions.medium);
 var largeStyles = css(dimensions.large);
-var xlargeStyles = css(dimensions.xlarge); // pre-built css style-size map
+var xlargeStyles = css(dimensions.xlarge);
 
+// pre-built css style-size map
 export var sizeStyleMap = {
   small: smallStyles,
   medium: mediumStyles,
   large: largeStyles,
   xlarge: xlargeStyles
 };
+
 /**
  * Returns the width of the icon's parent span. This function has
  * special behaviour to deal with icon-file-type specifically.
@@ -32,22 +33,18 @@ export var sizeStyleMap = {
  * a secondary fallback which in 95% of cases is not required.
  * It's only really being kept to maintain backward compatability.
  */
-
 export var getIconSize = function getIconSize(_ref) {
   var width = _ref.width,
-      height = _ref.height,
-      size = _ref.size;
-
+    height = _ref.height,
+    size = _ref.size;
   if (width && height) {
     return {
       width: width,
       height: height
     };
   }
-
   if (size) {
     return dimensions[size];
   }
-
   return undefined;
 };

package/dist/esm/components/svg.js

@@ -3,9 +3,11 @@ import { memo } from 'react';
 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
+import { commonSVGStyles, sizeStyleMap } from './styles';
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var svgStyles = css(commonSVGStyles);
+
 /**
  * __SVG__
  *
@@ -14,20 +16,17 @@ var svgStyles = css(commonSVGStyles);
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-svgs)
  */
-
 var SVG = /*#__PURE__*/memo(function SVG(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      label = _ref.label,
-      _ref$primaryColor = _ref.primaryColor,
-      primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
-      secondaryColor = _ref.secondaryColor,
-      testId = _ref.testId,
-      children = _ref.children;
-
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    label = _ref.label,
+    _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    testId = _ref.testId,
+    children = _ref.children;
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return jsx("svg", {
     viewBox: "0 0 24 24",
     style: {

package/dist/esm/components/utils.js

@@ -2,11 +2,11 @@ var themedBackground = {
   light: "var(--ds-surface, #FFFFFF)",
   dark: "var(--ds-surface, #1B2638)"
 };
+
 /**
  * Returns the background color depending on the passed through mode.
  * @param mode
  */
-
 export var getBackground = function getBackground() {
   var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
   return themedBackground[mode];

package/dist/esm/metadata.js

@@ -1,5 +1,4 @@
 /* eslint-disable global-require */
-
 /**
  * NOTE:
  *
@@ -9,6 +8,7 @@
  * To change the format of this file, modify build/icon/createIconDocs.js.
  * Add synonyms in icon/icons/synonyms.js.
  */
+
 var metaData = {
   activity: {
     keywords: ['activity', 'window', 'icon', 'core'],

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/icon",
-  "version": "21.11.4",
+  "version": "21.12.0",
   "description": "An icon is a visual representation of a command, device, directory, or common action.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/icon/",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -37,8 +36,8 @@
     "build-glyphs": "ts-node --project ../../../tsconfig.node.json ./build/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/theme": "^12.5.0",
+    "@atlaskit/tokens": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -47,21 +46,21 @@
   },
   "devDependencies": {
     "@af/icon-build-process": "^0.3.0",
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.7.0",
     "@atlaskit/docs": "*",
-    "@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/logo": "^13.10.0",
-    "@atlaskit/modal-dialog": "^12.4.0",
-    "@atlaskit/section-message": "^6.3.0",
+    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/dynamic-table": "^14.9.0",
+    "@atlaskit/icon-file-type": "^6.4.0",
+    "@atlaskit/icon-object": "^6.3.0",
+    "@atlaskit/logo": "^13.14.0",
+    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.3.0",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/textfield": "^5.4.0",
+    "@atlaskit/tooltip": "^17.8.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",
+    "@babel/core": "^7.20.0",
     "@emotion/babel-preset-css-prop": "^10.0.7",
     "@testing-library/react": "^12.1.5",
     "classnames": "^2.2.5",
@@ -89,7 +88,9 @@
       ],
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "theming": "tokens",
+      "design-tokens": [
+        "color"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/icon"