@atlaskit/icon 22.3.2 → 22.4.1

package/dist/cjs/components/icon.js

@@ -12,7 +12,9 @@ var _react2 = require("@emotion/react");
 var _utils = require("./utils");
 var _styles = require("./styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * @jsxRuntime classic
+ */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * We are hiding these props from consumers as they're used to
  * hack around icon sizing specifically for icon-file-type.
@@ -22,7 +24,7 @@ var iconStyles = (0, _react2.css)({
   display: 'inline-block',
   flexShrink: 0,
   lineHeight: 1,
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> svg': _objectSpread(_objectSpread({}, _styles.commonSVGStyles), {}, {
     maxWidth: '100%',
     maxHeight: '100%',
@@ -36,7 +38,7 @@ var iconStyles = (0, _react2.css)({
  */
 var baseHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> svg': {
       filter: 'grayscale(1)',
       '--icon-primary-color': 'CanvasText',
@@ -47,7 +49,7 @@ var baseHcmStyles = (0, _react2.css)({
 });
 var primaryEqualsSecondaryHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> svg': {
       // if the primaryColor is the same as the secondaryColor we
       // set the --icon-primary-color to Canvas
@@ -58,7 +60,7 @@ var primaryEqualsSecondaryHcmStyles = (0, _react2.css)({
 });
 var secondaryTransparentHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> svg': {
       '--icon-secondary-color': 'transparent' // background
     }
@@ -108,7 +110,9 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     ,
     style: {
       '--icon-primary-color': primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--icon-secondary-color': secondaryColor || (0, _utils.getBackground)()
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     }
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
@@ -116,10 +120,13 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     // We could then simplify how common styles are dealt with simply by encapsulating them
     // at their appropriate level and/or having a singular approach to css variables in the package
     dimensions &&
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.css)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       width: dimensions.width,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: dimensions.height,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       '> svg': dimensions
     })]
   }));

package/dist/cjs/components/skeleton.js

@@ -7,7 +7,11 @@ exports.default = void 0;
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _styles = require("./styles");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var skeletonStyles = (0, _react.css)({
   display: 'inline-block',
@@ -36,7 +40,9 @@ var Skeleton = /*#__PURE__*/(0, _react2.memo)(function Skeleton(_ref) {
     style: {
       backgroundColor: color
     },
-    css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles, _styles.sizeStyleMap[size]]
+    css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    _styles.sizeStyleMap[size]]
   });
 });
 var _default = exports.default = Skeleton;

package/dist/cjs/components/styles.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.sizeStyleMap = exports.getIconSize = exports.commonSVGStyles = void 0;
 var _constants = require("../constants");
 var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var commonSVGStyles = exports.commonSVGStyles = {
   overflow: 'hidden',
   pointerEvents: 'none',
@@ -18,12 +20,18 @@ var commonSVGStyles = exports.commonSVGStyles = {
     stopColor: 'currentColor'
   }
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var smallStyles = (0, _react.css)(_constants.dimensions.small);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var mediumStyles = (0, _react.css)(_constants.dimensions.medium);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var largeStyles = (0, _react.css)(_constants.dimensions.large);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var xlargeStyles = (0, _react.css)(_constants.dimensions.xlarge);
 
 // pre-built css style-size map
+// eslint-disable-next-line @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var sizeStyleMap = exports.sizeStyleMap = {
   small: smallStyles,
   medium: mediumStyles,

package/dist/cjs/components/svg.js

@@ -8,9 +8,14 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _utils = require("./utils");
 var _styles = require("./styles");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var svgStyles = (0, _react2.css)(_styles.commonSVGStyles);
 
 /**
@@ -34,8 +39,11 @@ var SVG = /*#__PURE__*/(0, _react.memo)(function SVG(_ref) {
     viewBox: "0 0 24 24",
     style: {
       color: primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       fill: secondaryColor || (0, _utils.getBackground)()
-    },
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: [svgStyles, _styles.sizeStyleMap[size]],
     "data-testid": testId,
     "aria-label": label || undefined,

package/dist/es2019/components/icon-new.js

@@ -1,5 +1,9 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { memo } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
@@ -16,7 +20,7 @@ const commonSVGStyles = css({
    * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
    * rule) and then override it with currentColor for the color changes to be picked up.
    */
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   stop: {
     stopColor: 'currentColor'
   }

package/dist/es2019/components/icon-tile.js

@@ -1,5 +1,9 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 const sizeMap = {
   '16': css({

package/dist/es2019/components/icon.js

@@ -1,6 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { memo } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
@@ -14,8 +18,9 @@ const iconStyles = css({
   display: 'inline-block',
   flexShrink: 0,
   lineHeight: 1,
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> svg': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ...commonSVGStyles,
     maxWidth: '100%',
     maxHeight: '100%',
@@ -29,7 +34,7 @@ const iconStyles = css({
  */
 const baseHcmStyles = css({
   '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> svg': {
       filter: 'grayscale(1)',
       '--icon-primary-color': 'CanvasText',
@@ -40,7 +45,7 @@ const baseHcmStyles = css({
 });
 const primaryEqualsSecondaryHcmStyles = css({
   '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> svg': {
       // if the primaryColor is the same as the secondaryColor we
       // set the --icon-primary-color to Canvas
@@ -51,7 +56,7 @@ const primaryEqualsSecondaryHcmStyles = css({
 });
 const secondaryTransparentHcmStyles = css({
   '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> svg': {
       '--icon-secondary-color': 'transparent' // background
     }
@@ -101,7 +106,9 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     ,
     style: {
       '--icon-primary-color': primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--icon-secondary-color': secondaryColor || getBackground()
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     }
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
@@ -109,10 +116,13 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     // We could then simplify how common styles are dealt with simply by encapsulating them
     // at their appropriate level and/or having a singular approach to css variables in the package
     dimensions &&
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       width: dimensions.width,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: dimensions.height,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       '> svg': dimensions
     })]
   }));

package/dist/es2019/components/skeleton.js

@@ -1,4 +1,8 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { memo } from 'react';
 import { sizeStyleMap } from './styles';
@@ -27,7 +31,9 @@ const Skeleton = /*#__PURE__*/memo(function Skeleton({
     style: {
       backgroundColor: color
     },
-    css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles, sizeStyleMap[size]]
+    css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    sizeStyleMap[size]]
   });
 });
 export default Skeleton;

package/dist/es2019/components/styles.js

@@ -1,4 +1,5 @@
 import { dimensions } from '../constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 export const commonSVGStyles = {
   overflow: 'hidden',
@@ -12,12 +13,18 @@ export const commonSVGStyles = {
     stopColor: 'currentColor'
   }
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 const smallStyles = css(dimensions.small);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 const mediumStyles = css(dimensions.medium);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 const largeStyles = css(dimensions.large);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 const xlargeStyles = css(dimensions.xlarge);
 
 // pre-built css style-size map
+// eslint-disable-next-line @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const sizeStyleMap = {
   small: smallStyles,
   medium: mediumStyles,

package/dist/es2019/components/svg.js

@@ -1,10 +1,14 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { memo } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBackground } from './utils';
 import { commonSVGStyles, sizeStyleMap } from './styles';
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 const svgStyles = css(commonSVGStyles);
 
 /**
@@ -27,8 +31,11 @@ const SVG = /*#__PURE__*/memo(function SVG({
     viewBox: "0 0 24 24",
     style: {
       color: primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       fill: secondaryColor || getBackground()
-    },
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: [svgStyles, sizeStyleMap[size]],
     "data-testid": testId,
     "aria-label": label || undefined,

package/dist/esm/components/icon-new.js

@@ -1,5 +1,9 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { memo } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
@@ -16,7 +20,7 @@ var commonSVGStyles = css({
    * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
    * rule) and then override it with currentColor for the color changes to be picked up.
    */
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   stop: {
     stopColor: 'currentColor'
   }

package/dist/esm/components/icon-tile.js

@@ -1,5 +1,9 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 var sizeMap = {
   '16': css({

package/dist/esm/components/icon.js

@@ -2,8 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { memo } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
@@ -17,7 +21,7 @@ var iconStyles = css({
   display: 'inline-block',
   flexShrink: 0,
   lineHeight: 1,
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> svg': _objectSpread(_objectSpread({}, commonSVGStyles), {}, {
     maxWidth: '100%',
     maxHeight: '100%',
@@ -31,7 +35,7 @@ var iconStyles = css({
  */
 var baseHcmStyles = css({
   '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> svg': {
       filter: 'grayscale(1)',
       '--icon-primary-color': 'CanvasText',
@@ -42,7 +46,7 @@ var baseHcmStyles = css({
 });
 var primaryEqualsSecondaryHcmStyles = css({
   '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> svg': {
       // if the primaryColor is the same as the secondaryColor we
       // set the --icon-primary-color to Canvas
@@ -53,7 +57,7 @@ var primaryEqualsSecondaryHcmStyles = css({
 });
 var secondaryTransparentHcmStyles = css({
   '@media screen and (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> svg': {
       '--icon-secondary-color': 'transparent' // background
     }
@@ -103,7 +107,9 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     ,
     style: {
       '--icon-primary-color': primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--icon-secondary-color': secondaryColor || getBackground()
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     }
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
@@ -111,10 +117,13 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     // We could then simplify how common styles are dealt with simply by encapsulating them
     // at their appropriate level and/or having a singular approach to css variables in the package
     dimensions &&
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       width: dimensions.width,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: dimensions.height,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       '> svg': dimensions
     })]
   }));

package/dist/esm/components/skeleton.js

@@ -1,4 +1,8 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { memo } from 'react';
 import { sizeStyleMap } from './styles';
@@ -29,7 +33,9 @@ var Skeleton = /*#__PURE__*/memo(function Skeleton(_ref) {
     style: {
       backgroundColor: color
     },
-    css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles, sizeStyleMap[size]]
+    css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    sizeStyleMap[size]]
   });
 });
 export default Skeleton;

package/dist/esm/components/styles.js

@@ -1,4 +1,5 @@
 import { dimensions } from '../constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 export var commonSVGStyles = {
   overflow: 'hidden',
@@ -12,12 +13,18 @@ export var commonSVGStyles = {
     stopColor: 'currentColor'
   }
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var smallStyles = css(dimensions.small);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var mediumStyles = css(dimensions.medium);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var largeStyles = css(dimensions.large);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var xlargeStyles = css(dimensions.xlarge);
 
 // pre-built css style-size map
+// eslint-disable-next-line @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var sizeStyleMap = {
   small: smallStyles,
   medium: mediumStyles,

package/dist/esm/components/svg.js

@@ -1,10 +1,14 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { memo } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBackground } from './utils';
 import { commonSVGStyles, sizeStyleMap } from './styles';
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var svgStyles = css(commonSVGStyles);
 
 /**
@@ -28,8 +32,11 @@ var SVG = /*#__PURE__*/memo(function SVG(_ref) {
     viewBox: "0 0 24 24",
     style: {
       color: primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       fill: secondaryColor || getBackground()
-    },
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: [svgStyles, sizeStyleMap[size]],
     "data-testid": testId,
     "aria-label": label || undefined,

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
-import type { IconColor } from '@atlaskit/tokens/css-type-schema';
+import type { IconColor, IconColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
     /**
@@ -36,7 +36,7 @@ export interface NewGlyphColorProps {
     /**
      * Color for the icon. Supports any icon design token, or 'currentColor' to inherit the current text color.
      */
-    color?: IconColor | 'currentColor';
+    color?: IconColor | IconColorPressed | 'currentColor';
 }
 export interface GlyphSizeProps {
     /**

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

@@ -1,5 +1,5 @@
 import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
-import type { IconColor } from '@atlaskit/tokens/css-type-schema';
+import type { IconColor, IconColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
     /**
@@ -36,7 +36,7 @@ export interface NewGlyphColorProps {
     /**
      * Color for the icon. Supports any icon design token, or 'currentColor' to inherit the current text color.
      */
-    color?: IconColor | 'currentColor';
+    color?: IconColor | IconColorPressed | 'currentColor';
 }
 export interface GlyphSizeProps {
     /**

package/docs/0-intro.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
 import { md } from '@atlaskit/docs';
+import Link from '@atlaskit/link';
 import SectionMessage from '@atlaskit/section-message';
 
 export default md`
 ${(
-  <SectionMessage appearance="information">
-    This component is now documented on{' '}
-    <a href="https://atlassian.design/components/icon">atlassian.design</a>
-  </SectionMessage>
+	<SectionMessage appearance="information">
+		This component is now documented on{' '}
+		<Link href="https://atlassian.design/components/icon">atlassian.design</Link>
+	</SectionMessage>
 )}
 `;