@atlaskit/icon 34.5.0 → 35.0.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @atlaskit/icon
 
+## 35.0.0
+
+### Major Changes
+
+- [`2b84ca637685f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2b84ca637685f) -
+  [ux] Cleans up the `IconTile` API following the rollout of `platform_dst_new_icon_tile` and
+  `platform_dst_new_icon_tile_stage2` flags.
+
+  ### Breaking changes
+  - **`size="16"` removed** — Migrate to direct icon glyph usage (e.g. `<MyIcon label="..." />`), or
+    use `size="xsmall"` for the smallest tile (20px).
+  - **Pixel number sizes removed** — `size` values `"24"`, `"32"`, `"40"`, `"48"` have been removed.
+    Migrate to t-shirt sizes:
+    - `"small"` (replaces `"24"`)
+    - `"medium"` (replaces `"32"`)
+    - `"large"` (replaces `"40"`)
+    - `"xlarge"` (replaces `"48"`)
+  - **`LegacyIconTileSize` and `NewIconTileSize` types removed** — Use `IconTileSize` directly.
+  - Icon tile defaults to size `medium` (previously - `small`).
+  - `UNSAFE_circleReplacementComponent` is required if `shape='circle'` is passed in.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 34.6.0
+
+### Minor Changes
+
+- [`b75e40f942dce`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b75e40f942dce) -
+  This release updates icons in `@atlaskit/icon`.
+
+  ### Updated:
+
+  **`@atlaskit/icon/core`**
+  - `ai-generative-text-summary`
+  - `briefcase`
+  - `chart-pie`
+  - `customize`
+  - `filter`
+
 ## 34.5.0
 
 ### Minor Changes

package/core/ai-generative-text-summary.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::07658a43ee3277e5d5c56493565b6ae4>>
+ * @codegen <<SignedSource::95423e512da4efab75a02d0a150e041a>>
  * @codegenCommand yarn build:icon-glyphs
  */
 "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const AiGenerativeTextSummaryIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
   name: "AiGenerativeTextSummaryIcon",
-  dangerouslySetGlyph: `<path fill="currentcolor" fill-rule="evenodd" d="M1 1h14v1.5H1zm0 4.166h14v1.5H1zm10.796 4.328a.75.75 0 0 1 1.41 0l.615 1.687 1.686.615a.75.75 0 0 1 0 1.41l-1.686.615-.615 1.686a.75.75 0 0 1-1.41 0l-.615-1.686-1.687-.615a.75.75 0 0 1 0-1.41l1.687-.615zM1 9.333h7v1.5H1zm0 4.166h5v1.5H1z" clip-rule="evenodd"/>`
+  dangerouslySetGlyph: `<path fill="currentcolor" d="M6 12.5V14H1v-1.5zm3.5-5.25v1.5H1v-1.5zM15 2v1.5H1V2zm-2.5 7a.75.75 0 0 1 .71.49l.61 1.69 1.69.62a.75.75 0 0 1 .49.7l-.01.12a.75.75 0 0 1-.48.59l-1.69.61-.61 1.69a.75.75 0 0 1-.59.48l-.12.01a.75.75 0 0 1-.7-.49l-.61-1.69-1.69-.61a.75.75 0 0 1-.48-.59L9 12.5a.75.75 0 0 1 .49-.7l1.69-.61.62-1.69a.75.75 0 0 1 .59-.48z"/>`
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 AiGenerativeTextSummaryIcon.displayName = 'AiGenerativeTextSummaryIcon';

package/core/briefcase.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b1fe1fe9833d3664cbcca445cd4b54d9>>
+ * @codegen <<SignedSource::41cd11067ce1d0d6d14f19a5e317169f>>
  * @codegenCommand yarn build:icon-glyphs
  */
 "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const BriefcaseIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
   name: "BriefcaseIcon",
-  dangerouslySetGlyph: `<path fill="currentcolor" fill-rule="evenodd" d="M6 2.5a.5.5 0 0 0-.5.5v1h5V3a.5.5 0 0 0-.5-.5zM12 4V3a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v1H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM3 5.5a.5.5 0 0 0-.5.5v2h11V6a.5.5 0 0 0-.5-.5zm10.5 4H8.75V11h-1.5V9.5H2.5V13a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5z" clip-rule="evenodd"/>`
+  dangerouslySetGlyph: `<path fill="currentcolor" d="M14 10.555A13.4 13.4 0 0 1 8 12a13.4 13.4 0 0 1-6-1.445V13a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5zM14 6a.5.5 0 0 0-.5-.5h-11A.5.5 0 0 0 2 6v2.84q.056.036.121.075A11.9 11.9 0 0 0 8 10.5a11.9 11.9 0 0 0 5.879-1.585L14 8.84zm-4-3a.5.5 0 0 0-.5-.5h-3A.5.5 0 0 0 6 3v1h4zm1.5 1h2a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V3a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2z"/><path fill="currentcolor" d="M8 8a.75.75 0 1 1 0 1.5A.75.75 0 0 1 8 8"/>`
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 BriefcaseIcon.displayName = 'BriefcaseIcon';

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::f98839aa6331f989febbeba007e97e95>>
+ * @codegen <<SignedSource::696e8e582a2b305e33fcb167389e54e1>>
  * @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_67704_26611" 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_67704_26611)"><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_67965_18713" 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_67965_18713)"><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/core/customize.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c3a6b9bc7cd562874d0d59c11159dd71>>
+ * @codegen <<SignedSource::cdb0c4632ec53a88d1120e8b448f861e>>
  * @codegenCommand yarn build:icon-glyphs
  */
 "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const CustomizeIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
   name: "CustomizeIcon",
-  dangerouslySetGlyph: `<path fill="currentcolor" fill-rule="evenodd" d="M3 2.375C3 1.615 3.616 1 4.375 1h1.75c.76 0 1.375.616 1.375 1.375v4.25C7.5 7.385 6.884 8 6.125 8h-1.75C3.615 8 3 7.384 3 6.625V5.25H0v-1.5h3zm1.5.125v4H6v-4zM16 5.25H8.5v-1.5H16zM8.5 9.375C8.5 8.615 9.116 8 9.875 8h1.75C12.385 8 13 8.616 13 9.375v1.375h3v1.5h-3v1.375c0 .76-.616 1.375-1.375 1.375h-1.75c-.76 0-1.375-.616-1.375-1.375zM10 9.5v4h1.5v-4zM0 12.25v-1.5h7.5v1.5z" clip-rule="evenodd"/>`
+  dangerouslySetGlyph: `<path fill="currentcolor" d="M7.5 10.5V12H0v-1.5zM16 4v1.5H8.5V4zm-5.5 8.75h1v-3h-1zM13 10.5h3V12h-3v.875c0 .76-.616 1.375-1.375 1.375h-1.25c-.76 0-1.375-.616-1.375-1.375v-3.25c0-.76.616-1.375 1.375-1.375h1.25c.76 0 1.375.616 1.375 1.375zM5.5 3.25h-1v3h1zM7 6.375c0 .76-.616 1.375-1.375 1.375h-1.25C3.615 7.75 3 7.134 3 6.375V5.5H0V4h3v-.875c0-.76.616-1.375 1.375-1.375h1.25C6.385 1.75 7 2.366 7 3.125z"/>`
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 CustomizeIcon.displayName = 'CustomizeIcon';

package/core/filter.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::82ab01af3f80a4391aaf33fbaff15a85>>
+ * @codegen <<SignedSource::0b83e18362be7337c33091ec68bfbcb2>>
  * @codegenCommand yarn build:icon-glyphs
  */
 "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const FilterIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
   name: "FilterIcon",
-  dangerouslySetGlyph: `<path fill="currentcolor" fill-rule="evenodd" d="M15 3.5H1V2h14zm-2 5.25H3v-1.5h10zM11 14H5v-1.5h6z" clip-rule="evenodd"/>`
+  dangerouslySetGlyph: `<path fill="currentcolor" d="M11 12v1.5H5V12zm2-4.75v1.5H3v-1.5zm2-4.75V4H1V2.5z"/>`
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 FilterIcon.displayName = 'FilterIcon';

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

@@ -12,21 +12,6 @@ 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: "_syaz6txe",
@@ -89,7 +74,7 @@ function IconTileNew(props) {
     testId = props.testId;
   var ExpandedIcon = Icon;
   return /*#__PURE__*/React.createElement(_tile.default, {
-    size: sizeCrossCompatibleMap[size],
+    size: size,
     backgroundColor: backgroundColorMap[appearance],
     label: label,
     testId: testId

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

@@ -3,7 +3,6 @@
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._1bah1h6o{justify-content:center}
 ._1bsb1tcg{width:24px}
 ._1bsb1ylp{width:40px}
-._1bsb7vkz{width:1pc}
 ._1bsbckbl{width:3pc}
 ._1bsbgktf{width:20px}
 ._1bsbzwfg{width:2pc}
@@ -12,7 +11,6 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4t3i1ylp{height:40px}
-._4t3i7vkz{height:1pc}
 ._4t3ickbl{height:3pc}
 ._4t3igktf{height:20px}
 ._4t3izwfg{height:2pc}

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

@@ -11,20 +11,13 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 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'
+  xlarge: '48'
 };
 var sizeMap = {
-  '16': "_1bsb7vkz _4t3i7vkz",
   '20': "_1bsbgktf _4t3igktf",
   '24': "_1bsb1tcg _4t3i1tcg",
   '32': "_1bsbzwfg _4t3izwfg",
@@ -69,7 +62,7 @@ function IconTile(props) {
     label = props.label,
     appearance = props.appearance,
     _props$size = props.size,
-    size = _props$size === void 0 ? '24' : _props$size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
     _props$shape = props.shape,
     shape = _props$shape === void 0 ? 'square' : _props$shape,
     testId = props.testId;

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

@@ -0,0 +1,13 @@
+._syaz17hp{color:var(--ds-icon-accent-green,#22a06b)}
+._syaz1j6y{color:var(--ds-icon-accent-orange,#e06c00)}
+._syaz1oqg{color:var(--ds-icon-accent-yellow,#b38600)}
+._syaz1q3r{color:var(--ds-icon,#292a2e)}
+._syaz5w2r{color:var(--ds-icon-inverse,#fff)}
+._syaz6txe{color:var(--ds-icon-accent-blue,#357de8)}
+._syaz8645{color:var(--ds-icon-accent-lime,#6a9a23)}
+._syaz8uof{color:var(--ds-icon-accent-teal,#2898bd)}
+._syazdgkc{color:var(--ds-icon-subtle,#505258)}
+._syaznbxb{color:var(--ds-icon-accent-red,#c9372c)}
+._syazuq3u{color:var(--ds-icon-accent-purple,#af59e1)}
+._syazv8hk{color:var(--ds-icon-accent-magenta,#cd519d)}
+._vwz4idpf{line-height:0}

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

@@ -0,0 +1,91 @@
+/* icon-tile.tsx generated by @compiled/babel-plugin v0.39.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.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); }
+// Icon color mapping for Tile-based icons
+var iconColorMap = {
+  blue: "_syaz6txe",
+  blueBold: "_syaz1q3r",
+  gray: "_syazdgkc",
+  grayBold: "_syaz5w2r",
+  green: "_syaz17hp",
+  greenBold: "_syaz1q3r",
+  lime: "_syaz8645",
+  limeBold: "_syaz1q3r",
+  magenta: "_syazv8hk",
+  magentaBold: "_syaz1q3r",
+  orange: "_syaz1j6y",
+  orangeBold: "_syaz1q3r",
+  purple: "_syazuq3u",
+  purpleBold: "_syaz1q3r",
+  red: "_syaznbxb",
+  redBold: "_syaz1q3r",
+  teal: "_syaz8uof",
+  tealBold: "_syaz1q3r",
+  yellow: "_syaz1oqg",
+  yellowBold: "_syaz1q3r"
+};
+var iconWrapperStyles = {
+  root: "_vwz4idpf"
+};
+
+// 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 ? 'medium' : _props$size,
+    testId = props.testId;
+  var ExpandedIcon = Icon;
+  return /*#__PURE__*/React.createElement(_tile.default, {
+    size: size,
+    backgroundColor: backgroundColorMap[appearance],
+    label: label,
+    testId: testId
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([iconColorMap[appearance], iconWrapperStyles.root])
+  }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+    color: "currentColor",
+    label: "",
+    shouldScale: true
+  })));
+}

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

@@ -7,74 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = IconTile;
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _iconTileNew = _interopRequireDefault(require("./icon-tile-new"));
+var _iconTile = _interopRequireDefault(require("./icon-tile"));
 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, #357DE8)",
-  blueBold: "var(--ds-icon-accent-blue, #357DE8)",
-  gray: "var(--ds-icon-accent-gray, #7D818A)",
-  grayBold: "var(--ds-icon-accent-gray, #7D818A)",
-  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, #E06C00)",
-  orangeBold: "var(--ds-icon-accent-orange, #E06C00)",
-  purple: "var(--ds-icon-accent-purple, #AF59E1)",
-  purpleBold: "var(--ds-icon-accent-purple, #AF59E1)",
-  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,
-    UNSAFE_circleReplacementComponent = _ref.UNSAFE_circleReplacementComponent;
-  if (UNSAFE_circleReplacementComponent && shape === 'circle' && ((0, _platformFeatureFlags.fg)('platform_dst_icon_tile_circle_replacement') || (0, _platformFeatureFlags.fg)('platform_dst_icon_tile_circle_replacement_stage2'))) {
-    return UNSAFE_circleReplacementComponent;
-  }
-  if (shape !== 'circle' && ((0, _platformFeatureFlags.fg)('platform_dst_new_icon_tile') || (0, _platformFeatureFlags.fg)('platform_dst_new_icon_tile_stage2'))) {
-    // 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
+function IconTile(props) {
+  if (props.shape === 'circle' && ((0, _platformFeatureFlags.fg)('platform_dst_icon_tile_circle_replacement') || (0, _platformFeatureFlags.fg)('platform_dst_icon_tile_circle_replacement_stage2'))) {
+    return props.UNSAFE_circleReplacementComponent;
+  } else if (props.shape === 'circle') {
+    return /*#__PURE__*/_react.default.createElement(_iconTileOld.default, {
+      appearance: props.appearance,
+      icon: props.icon,
+      label: props.label,
+      shape: 'circle',
+      size: props.size,
+      testId: props.testId,
+      UNSAFE_circleReplacementComponent: props.UNSAFE_circleReplacementComponent
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_iconTile.default, {
+      appearance: props.appearance,
+      icon: props.icon,
+      label: props.label,
+      shape: props.shape,
+      size: props.size,
+      testId: props.testId
     });
   }
-  return /*#__PURE__*/_react.default.createElement(_iconTileOld.default, {
-    appearance: appearance,
-    icon: Icon,
-    label: label,
-    shape: shape,
-    size: size,
-    testId: testId
-  });
 }

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

@@ -3,21 +3,6 @@ import "./icon-tile-new.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import Tile from '@atlaskit/tile';
-const 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
 const iconColorMap = {
   blue: "_syaz6txe",
@@ -81,7 +66,7 @@ export default function IconTileNew(props) {
   } = props;
   const ExpandedIcon = Icon;
   return /*#__PURE__*/React.createElement(Tile, {
-    size: sizeCrossCompatibleMap[size],
+    size: size,
     backgroundColor: backgroundColorMap[appearance],
     label: label,
     testId: testId

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

@@ -3,7 +3,6 @@
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._1bah1h6o{justify-content:center}
 ._1bsb1tcg{width:24px}
 ._1bsb1ylp{width:40px}
-._1bsb7vkz{width:1pc}
 ._1bsbckbl{width:3pc}
 ._1bsbgktf{width:20px}
 ._1bsbzwfg{width:2pc}
@@ -12,7 +11,6 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4t3i1ylp{height:40px}
-._4t3i7vkz{height:1pc}
 ._4t3ickbl{height:3pc}
 ._4t3igktf{height:20px}
 ._4t3izwfg{height:2pc}

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

@@ -3,20 +3,13 @@ import "./icon-tile-old.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 const 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'
+  xlarge: '48'
 };
 const sizeMap = {
-  '16': "_1bsb7vkz _4t3i7vkz",
   '20': "_1bsbgktf _4t3igktf",
   '24': "_1bsb1tcg _4t3i1tcg",
   '32': "_1bsbzwfg _4t3izwfg",
@@ -61,7 +54,7 @@ export default function IconTile(props) {
     icon: Icon,
     label,
     appearance,
-    size = '24',
+    size = 'medium',
     shape = 'square',
     testId
   } = props;

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

@@ -0,0 +1,13 @@
+._syaz17hp{color:var(--ds-icon-accent-green,#22a06b)}
+._syaz1j6y{color:var(--ds-icon-accent-orange,#e06c00)}
+._syaz1oqg{color:var(--ds-icon-accent-yellow,#b38600)}
+._syaz1q3r{color:var(--ds-icon,#292a2e)}
+._syaz5w2r{color:var(--ds-icon-inverse,#fff)}
+._syaz6txe{color:var(--ds-icon-accent-blue,#357de8)}
+._syaz8645{color:var(--ds-icon-accent-lime,#6a9a23)}
+._syaz8uof{color:var(--ds-icon-accent-teal,#2898bd)}
+._syazdgkc{color:var(--ds-icon-subtle,#505258)}
+._syaznbxb{color:var(--ds-icon-accent-red,#c9372c)}
+._syazuq3u{color:var(--ds-icon-accent-purple,#af59e1)}
+._syazv8hk{color:var(--ds-icon-accent-magenta,#cd519d)}
+._vwz4idpf{line-height:0}

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

@@ -0,0 +1,83 @@
+/* icon-tile.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./icon-tile.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Tile from '@atlaskit/tile';
+// Icon color mapping for Tile-based icons
+const iconColorMap = {
+  blue: "_syaz6txe",
+  blueBold: "_syaz1q3r",
+  gray: "_syazdgkc",
+  grayBold: "_syaz5w2r",
+  green: "_syaz17hp",
+  greenBold: "_syaz1q3r",
+  lime: "_syaz8645",
+  limeBold: "_syaz1q3r",
+  magenta: "_syazv8hk",
+  magentaBold: "_syaz1q3r",
+  orange: "_syaz1j6y",
+  orangeBold: "_syaz1q3r",
+  purple: "_syazuq3u",
+  purpleBold: "_syaz1q3r",
+  red: "_syaznbxb",
+  redBold: "_syaz1q3r",
+  teal: "_syaz8uof",
+  tealBold: "_syaz1q3r",
+  yellow: "_syaz1oqg",
+  yellowBold: "_syaz1q3r"
+};
+const iconWrapperStyles = {
+  root: "_vwz4idpf"
+};
+
+// Background color mapping for Tile component
+const 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.
+ */
+export default function IconTileNew(props) {
+  const {
+    icon: Icon,
+    label,
+    appearance,
+    size = 'medium',
+    testId
+  } = props;
+  const ExpandedIcon = Icon;
+  return /*#__PURE__*/React.createElement(Tile, {
+    size: size,
+    backgroundColor: backgroundColorMap[appearance],
+    label: label,
+    testId: testId
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([iconColorMap[appearance], iconWrapperStyles.root])
+  }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+    color: "currentColor",
+    label: "",
+    shouldScale: true
+  })));
+}