@atlaskit/icon 28.2.1 → 28.4.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/icon
 
+## 28.4.0
+
+### Minor Changes
+
+- [`0a012007605a2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0a012007605a2) -
+  This release updates icons in `@atlaskit/icon`.
+
+  ### Updated:
+
+  **`@atlaskit/icon/core`**
+
+  - `chart-pie`
+
+## 28.3.0
+
+### Minor Changes
+
+- [`99f4f441fac8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/99f4f441fac8c) -
+  We are testing new design language visual changes to Icon Tile behind a feature flag. If this
+  change is successful it will be available in a later release.
+
+  Additionally, backwards-compatible API changes were required to support this:
+
+  - Deprecation of pixel number `size` in favor of new t-shirt sizes
+  - Deprecation of `size` "16"
+  - Deprecation of `shape`
+  - Added `UNSAFE_circleReplacementComponent` prop temporarily to assist `shape` migrations
+  - Deprecation of `LEGACY_fallbackComponent`
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 28.2.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../tile/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../tokens/afm-cc/tsconfig.json"
 		}

package/afm-dev-agents/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../tile/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../tokens/afm-dev-agents/tsconfig.json"
 		}

package/afm-jira/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../tile/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../tokens/afm-jira/tsconfig.json"
 		}

package/afm-passionfruit/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../tile/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../tokens/afm-passionfruit/tsconfig.json"
 		}

package/afm-post-office/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../tile/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../tokens/afm-post-office/tsconfig.json"
 		}

package/afm-rovo-extension/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../tile/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../tokens/afm-rovo-extension/tsconfig.json"
 		}

package/afm-townsquare/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../tile/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../tokens/afm-townsquare/tsconfig.json"
 		}

package/build/index.tsx

@@ -29,7 +29,7 @@ async function main() {
 
 	/**
 	 * The legacy icon build process. A past SVGO update disabled this process and slightly changed the SVG output.
-	 * Re-running this step re-generates all icons and triggers a large number of platform/product snapshot tests.
+	 * Re-running this step re-generates all icons and triggers a large number of platform/app snapshot tests.
 	 *
 	 * To avoid unnecessary churn, this step is switched off, and any updates to the old icon set can be done piecemeal.
 	 */

package/core/chart-pie.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::458e1f507cdfe939b7f46674372cf129>>
+ * @codegen <<SignedSource::4428a859d58db8bc3cfb72e5cd497419>>
  * @codegenCommand yarn build:icon-glyphs
  */
 "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const ChartPieIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
   name: "ChartPieIcon",
-  dangerouslySetGlyph: `<mask id="mask0_55124_7686" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="currentcolor" d="M5.106 0C5.04.239 5 .49 5 .75v7.5a2.75 2.75 0 0 0 3.462 2.656l7.246-1.941q.15-.04.292-.098V16H0V0zm5.672 4.59-.278.076v-.29q.143.102.278.215M16 2.17A10.3 10.3 0 0 0 13.831 0H16z"/></mask><g mask="url(#mask0_55124_7686)"><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M1.75 8a6.25 6.25 0 1 0 12.5 0 6.25 6.25 0 0 0-12.5 0Z"/></g><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25V.75c3.47 0 6.39 2.357 7.246 5.558z"/>`
+  dangerouslySetGlyph: `<mask id="mask0_56173_3412" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="currentcolor" d="M5.106 0C5.04.239 5 .49 5 .75v7.5a2.75 2.75 0 0 0 3.462 2.656l7.246-1.941q.15-.04.292-.098V16H0V0zm5.672 4.59-.278.076v-.29q.143.102.278.215M16 2.17A10.3 10.3 0 0 0 13.831 0H16z"/></mask><g mask="url(#mask0_56173_3412)"><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M1.75 8a6.25 6.25 0 1 0 12.5 0 6.25 6.25 0 0 0-12.5 0Z"/></g><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25V.75c3.47 0 6.39 2.357 7.246 5.558z"/>`
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 ChartPieIcon.displayName = 'ChartPieIcon';

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

@@ -1,4 +1,4 @@
-/* icon-new.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* icon-new.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/icon-tile/icon-tile-new.compiled.css

@@ -0,0 +1,12 @@
+._syaz17hp{color:var(--ds-icon-accent-green,#22a06b)}
+._syaz1oju{color:var(--ds-icon-subtle,#626f86)}
+._syaz1oqg{color:var(--ds-icon-accent-yellow,#b38600)}
+._syaz1ov1{color:var(--ds-icon-accent-blue,#1d7afc)}
+._syaz5w2r{color:var(--ds-icon-inverse,#fff)}
+._syaz5yjc{color:var(--ds-icon-accent-purple,#8270db)}
+._syaz7r97{color:var(--ds-icon-accent-orange,#e56910)}
+._syaz8645{color:var(--ds-icon-accent-lime,#6a9a23)}
+._syaz8uof{color:var(--ds-icon-accent-teal,#2898bd)}
+._syaznbxb{color:var(--ds-icon-accent-red,#c9372c)}
+._syazv8hk{color:var(--ds-icon-accent-magenta,#cd519d)}
+._syazwdcn{color:var(--ds-icon,#44546f)}

package/dist/cjs/components/icon-tile/icon-tile-new.js

@@ -0,0 +1,103 @@
+/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconTileNew;
+require("./icon-tile-new.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _tile = _interopRequireDefault(require("@atlaskit/tile"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var sizeCrossCompatibleMap = {
+  // Size mapping from old pixel sizes to new t-shirt sizes
+  '16': 'xsmall',
+  // Not used
+  '24': 'small',
+  '32': 'medium',
+  '40': 'large',
+  '48': 'xlarge',
+  xsmall: 'xsmall',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  xlarge: 'xlarge'
+};
+
+// Icon color mapping for Tile-based icons
+var iconColorMap = {
+  blue: "_syaz1ov1",
+  blueBold: "_syazwdcn",
+  gray: "_syaz1oju",
+  grayBold: "_syaz5w2r",
+  green: "_syaz17hp",
+  greenBold: "_syazwdcn",
+  lime: "_syaz8645",
+  limeBold: "_syazwdcn",
+  magenta: "_syazv8hk",
+  magentaBold: "_syazwdcn",
+  orange: "_syaz7r97",
+  orangeBold: "_syazwdcn",
+  purple: "_syaz5yjc",
+  purpleBold: "_syazwdcn",
+  red: "_syaznbxb",
+  redBold: "_syazwdcn",
+  teal: "_syaz8uof",
+  tealBold: "_syazwdcn",
+  yellow: "_syaz1oqg",
+  yellowBold: "_syazwdcn"
+};
+
+// Background color mapping for Tile component
+var backgroundColorMap = {
+  blue: undefined,
+  blueBold: 'color.background.accent.blue.subtle',
+  gray: undefined,
+  grayBold: 'color.background.neutral.bold',
+  green: undefined,
+  greenBold: 'color.background.accent.green.subtle',
+  lime: undefined,
+  limeBold: 'color.background.accent.lime.subtle',
+  magenta: undefined,
+  magentaBold: 'color.background.accent.magenta.subtle',
+  orange: undefined,
+  orangeBold: 'color.background.accent.orange.subtle',
+  purple: undefined,
+  purpleBold: 'color.background.accent.purple.subtle',
+  red: undefined,
+  redBold: 'color.background.accent.red.subtle',
+  teal: undefined,
+  tealBold: 'color.background.accent.teal.subtle',
+  yellow: undefined,
+  yellowBold: 'color.background.accent.yellow.subtle'
+};
+
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+function IconTileNew(props) {
+  var Icon = props.icon,
+    label = props.label,
+    appearance = props.appearance,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'small' : _props$size,
+    testId = props.testId;
+  var ExpandedIcon = Icon;
+  return /*#__PURE__*/React.createElement(_tile.default, {
+    size: sizeCrossCompatibleMap[size],
+    backgroundColor: backgroundColorMap[appearance],
+    label: label,
+    testId: testId
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([iconColorMap[appearance]])
+  }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+    color: "currentColor",
+    label: label,
+    shouldScale: true
+  })));
+}

package/dist/cjs/components/{icon-tile.compiled.css → icon-tile/icon-tile-old.compiled.css}

@@ -5,6 +5,7 @@
 ._1bsb1ylp{width:40px}
 ._1bsb7vkz{width:1pc}
 ._1bsbckbl{width:3pc}
+._1bsbgktf{width:20px}
 ._1bsbzwfg{width:2pc}
 ._1e0c116y{display:inline-flex}
 ._1wybidpf{font-size:0}
@@ -13,6 +14,7 @@
 ._4t3i1ylp{height:40px}
 ._4t3i7vkz{height:1pc}
 ._4t3ickbl{height:3pc}
+._4t3igktf{height:20px}
 ._4t3izwfg{height:2pc}
 ._bfhk1a17{background-color:var(--ds-background-accent-teal-subtler,#c6edfb)}
 ._bfhk1e5c{background-color:var(--ds-background-accent-green-bolder,#1f845a)}

package/dist/cjs/components/{icon-tile.js → icon-tile/icon-tile-old.js}

@@ -1,4 +1,4 @@
-/* icon-tile.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* icon-tile-old.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -6,13 +6,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = IconTile;
-require("./icon-tile.compiled.css");
+require("./icon-tile-old.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var sizeCrossCompatibleMap = {
+  // Size mapping from new t-shirt sizes to old pixel sizes
+  xsmall: '20',
+  small: '24',
+  medium: '32',
+  large: '40',
+  xlarge: '48',
+  '16': '16',
+  '24': '24',
+  '32': '32',
+  '40': '40',
+  '48': '48'
+};
 var sizeMap = {
   '16': "_1bsb7vkz _4t3i7vkz",
+  '20': "_1bsbgktf _4t3igktf",
   '24': "_1bsb1tcg _4t3i1tcg",
   '32': "_1bsbzwfg _4t3izwfg",
   '40': "_1bsb1ylp _4t3i1ylp",
@@ -47,13 +60,9 @@ var shapeMap = {
 var iconTileStyles = null;
 
 /**
- * __IconTile__ -- ⚠️ Experimental ⚠️
- *
- * An icon tile is used to present an icon with a background color.
- * Icon tiles, unlike standard icons, can scale up and down to provide greater emphasis.
- *
- * This component is currently in an experimental state and is subject to change in minor or patch releases.
+ * __IconTile__
  *
+ * An icon with background shape, color, and size properties determined by Tile.
  */
 function IconTile(props) {
   var Icon = props.icon,
@@ -63,22 +72,15 @@ function IconTile(props) {
     size = _props$size === void 0 ? '24' : _props$size,
     _props$shape = props.shape,
     shape = _props$shape === void 0 ? 'square' : _props$shape,
-    LEGACY_fallbackComponent = props.LEGACY_fallbackComponent,
     testId = props.testId;
   var ExpandedIcon = Icon;
-
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  if (LEGACY_fallbackComponent && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
-    return LEGACY_fallbackComponent;
-  } else {
-    return /*#__PURE__*/React.createElement("span", {
-      "data-testid": testId,
-      className: (0, _runtime.ax)(["_1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1wybidpf", appearanceMap[appearance], sizeMap[size], shapeMap[shape]])
-    }, /*#__PURE__*/React.createElement(ExpandedIcon, {
-      color: "currentColor",
-      label: label,
-      spacing: "spacious",
-      shouldScale: true
-    }));
-  }
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1wybidpf", appearanceMap[appearance], sizeMap[sizeCrossCompatibleMap[size]], shapeMap[shape]])
+  }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+    color: "currentColor",
+    label: label,
+    spacing: "spacious",
+    shouldScale: true
+  }));
 }

package/dist/cjs/components/icon-tile/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconTile;
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _iconTileNew = _interopRequireDefault(require("./icon-tile-new"));
+var _iconTileOld = _interopRequireDefault(require("./icon-tile-old"));
+// Import both versions
+
+// Color mapping for size 16 standalone icons that will no longer be tiles
+var appearanceToIconColorMap = {
+  blue: "var(--ds-icon-accent-blue, #1D7AFC)",
+  blueBold: "var(--ds-icon-accent-blue, #1D7AFC)",
+  gray: "var(--ds-icon-accent-gray, #758195)",
+  grayBold: "var(--ds-icon-accent-gray, #758195)",
+  green: "var(--ds-icon-accent-green, #22A06B)",
+  greenBold: "var(--ds-icon-accent-green, #22A06B)",
+  lime: "var(--ds-icon-accent-lime, #6A9A23)",
+  limeBold: "var(--ds-icon-accent-lime, #6A9A23)",
+  magenta: "var(--ds-icon-accent-magenta, #CD519D)",
+  magentaBold: "var(--ds-icon-accent-magenta, #CD519D)",
+  orange: "var(--ds-icon-accent-orange, #E56910)",
+  orangeBold: "var(--ds-icon-accent-orange, #E56910)",
+  purple: "var(--ds-icon-accent-purple, #8270DB)",
+  purpleBold: "var(--ds-icon-accent-purple, #8270DB)",
+  red: "var(--ds-icon-accent-red, #C9372C)",
+  redBold: "var(--ds-icon-accent-red, #C9372C)",
+  teal: "var(--ds-icon-accent-teal, #2898BD)",
+  tealBold: "var(--ds-icon-accent-teal, #2898BD)",
+  yellow: "var(--ds-icon-accent-yellow, #B38600)",
+  yellowBold: "var(--ds-icon-accent-yellow, #B38600)"
+};
+
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+function IconTile(_ref) {
+  var appearance = _ref.appearance,
+    Icon = _ref.icon,
+    label = _ref.label,
+    size = _ref.size,
+    testId = _ref.testId,
+    shape = _ref.shape,
+    LEGACY_fallbackComponent = _ref.LEGACY_fallbackComponent,
+    UNSAFE_circleReplacementComponent = _ref.UNSAFE_circleReplacementComponent;
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (LEGACY_fallbackComponent && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
+    return LEGACY_fallbackComponent;
+  }
+  if (UNSAFE_circleReplacementComponent && shape === 'circle' && (0, _platformFeatureFlags.fg)('platform_dst_icon_tile_circle_replacement')) {
+    return UNSAFE_circleReplacementComponent;
+  }
+  if (shape !== 'circle' && (0, _platformFeatureFlags.fg)('platform_dst_new_icon_tile')) {
+    // Handle size 16 - render icon directly without Tile
+    if (size === '16') {
+      return /*#__PURE__*/_react.default.createElement(Icon, {
+        color: appearanceToIconColorMap[appearance],
+        label: label,
+        testId: testId
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_iconTileNew.default, {
+      appearance: appearance,
+      icon: Icon,
+      label: label,
+      shape: shape,
+      size: size,
+      testId: testId
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_iconTileOld.default, {
+    appearance: appearance,
+    icon: Icon,
+    label: label,
+    shape: shape,
+    size: size,
+    testId: testId
+  });
+}

package/dist/cjs/components/icon.js

@@ -1,4 +1,4 @@
-/* icon.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* icon.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/skeleton.js

@@ -1,4 +1,4 @@
-/* skeleton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/svg.js

@@ -1,4 +1,4 @@
-/* svg.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* svg.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/metadata-core.js

@@ -9,7 +9,7 @@ exports.default = void 0;
  *
  * To change the format of this file, modify `createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::736757b9fbc08cfe04a0dfd387060116>>
+ * @codegen <<SignedSource::ee18f4e5865068325a476701d51323b5>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
@@ -517,7 +517,7 @@ var metadata = {
     package: '@atlaskit/icon/core/cash',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Sales' work type.",
+    usage: "Known usages: \'Sales\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1117,7 +1117,7 @@ var metadata = {
     package: '@atlaskit/icon/core/devices',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Asset' work type.",
+    usage: "Known usages: \'Asset\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1210,7 +1210,7 @@ var metadata = {
     oldName: ['editor/emoji', 'emoji/emoji', 'emoji', 'emoji/people'],
     type: 'core',
     categorization: 'single-purpose',
-    usage: "Single purpose - Reserved for Editor as a category for Emoji's.",
+    usage: "Single purpose - Reserved for Editor as a category for Emoji\'s.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1423,7 +1423,7 @@ var metadata = {
     oldName: ['document-filled', 'document', 'editor/file', 'file'],
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Multi purpose - Known uses: document, file. Do not use to represent a page — use the dedicated 'Page' icon instead.",
+    usage: "Multi purpose - Known uses: document, file. Do not use to represent a page — use the dedicated \'Page\' icon instead.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1434,7 +1434,7 @@ var metadata = {
     oldName: ['documents'],
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Multi purpose - Known uses: documents, files. Do not use to represent pages — use the dedicated 'Pages' icon instead.",
+    usage: "Multi purpose - Known uses: documents, files. Do not use to represent pages — use the dedicated \'Pages\' icon instead.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1719,7 +1719,7 @@ var metadata = {
     oldName: ['tray'],
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Multi purpose - Known uses: 'Your work' in Confluence, inbox, mail.",
+    usage: "Multi purpose - Known uses: \'Your work\' in Confluence, inbox, mail.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1745,7 +1745,7 @@ var metadata = {
       location: '@atlaskit/icon'
     },
     categorization: 'single-purpose',
-    usage: "Reserved for information statuses and messaging.  Filled status icons provide higher visual contrast to draw attention to important information. For information tooltips, use the unfilled 'information circle' icon.",
+    usage: "Reserved for information statuses and messaging.  Filled status icons provide higher visual contrast to draw attention to important information. For information tooltips, use the unfilled \'information circle\' icon.",
     team: 'Design System Team',
     status: 'deprecated'
   },
@@ -1907,7 +1907,7 @@ var metadata = {
     package: '@atlaskit/icon/core/list-checklist',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: Checklist, 'Requirement' work type.",
+    usage: "Known usages: Checklist, \'Requirement\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -2121,7 +2121,7 @@ var metadata = {
     package: '@atlaskit/icon/core/minus-square',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Remove feature' work type.",
+    usage: "Known usages: \'Remove feature\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -2278,7 +2278,7 @@ var metadata = {
     package: '@atlaskit/icon/core/pen',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Design task' work type.",
+    usage: "Known usages: \'Design task\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -2406,7 +2406,7 @@ var metadata = {
     oldName: ['issue-raise'],
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'New feature' work type.",
+    usage: "Known usages: \'New feature\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -3079,7 +3079,7 @@ var metadata = {
     oldName: ['editor/info', 'editor/panel', 'info'],
     type: 'core',
     categorization: 'single-purpose',
-    usage: "Reserved for information statuses and messaging.  Filled status icons provide higher visual contrast to draw attention to important information. For information tooltips, use the unfilled 'information circle' icon.",
+    usage: "Reserved for information statuses and messaging.  Filled status icons provide higher visual contrast to draw attention to important information. For information tooltips, use the unfilled \'information circle\' icon.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -3623,7 +3623,7 @@ var metadata = {
     package: '@atlaskit/icon/core/tools',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Service request' Jira work type.",
+    usage: "Known usages: \'Service request\' Jira work type.",
     team: 'Design System Team',
     status: 'published'
   },

package/dist/cjs/metadata.js

@@ -15,7 +15,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *
  * To change the format of this file, modify `createIconDocs` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::505188bcbfbd2bedd523b7a93366dd82>>
+ * @codegen <<SignedSource::5b9b70e1898d13b76e8faef592720556>>
  * @codegenCommand yarn build:icon-glyphs
  */
 /* eslint-disable import/no-extraneous-dependencies -- This import is within the same package, hence self-referential. */

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

@@ -1,4 +1,4 @@
-/* icon-new.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* icon-new.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./icon-new.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/icon-tile/icon-tile-new.compiled.css

@@ -0,0 +1,12 @@
+._syaz17hp{color:var(--ds-icon-accent-green,#22a06b)}
+._syaz1oju{color:var(--ds-icon-subtle,#626f86)}
+._syaz1oqg{color:var(--ds-icon-accent-yellow,#b38600)}
+._syaz1ov1{color:var(--ds-icon-accent-blue,#1d7afc)}
+._syaz5w2r{color:var(--ds-icon-inverse,#fff)}
+._syaz5yjc{color:var(--ds-icon-accent-purple,#8270db)}
+._syaz7r97{color:var(--ds-icon-accent-orange,#e56910)}
+._syaz8645{color:var(--ds-icon-accent-lime,#6a9a23)}
+._syaz8uof{color:var(--ds-icon-accent-teal,#2898bd)}
+._syaznbxb{color:var(--ds-icon-accent-red,#c9372c)}
+._syazv8hk{color:var(--ds-icon-accent-magenta,#cd519d)}
+._syazwdcn{color:var(--ds-icon,#44546f)}