@atlaskit/icon 28.2.1 → 28.3.0

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

@@ -0,0 +1,95 @@
+/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+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: "_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
+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 = 'small',
+    testId
+  } = props;
+  const ExpandedIcon = Icon;
+  return /*#__PURE__*/React.createElement(Tile, {
+    size: sizeCrossCompatibleMap[size],
+    backgroundColor: backgroundColorMap[appearance],
+    label: label,
+    testId: testId
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([iconColorMap[appearance]])
+  }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+    color: "currentColor",
+    label: label,
+    shouldScale: true
+  })));
+}

package/dist/{esm/components/icon-tile.compiled.css → es2019/components/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/es2019/components/{icon-tile.js → icon-tile/icon-tile-old.js}

@@ -1,10 +1,23 @@
-/* icon-tile.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./icon-tile.compiled.css";
+/* icon-tile-old.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./icon-tile-old.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
+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'
+};
 const sizeMap = {
   '16': "_1bsb7vkz _4t3i7vkz",
+  '20': "_1bsbgktf _4t3igktf",
   '24': "_1bsb1tcg _4t3i1tcg",
   '32': "_1bsbzwfg _4t3izwfg",
   '40': "_1bsb1ylp _4t3i1ylp",
@@ -39,13 +52,9 @@ const shapeMap = {
 const 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.
  */
 export default function IconTile(props) {
   const {
@@ -54,23 +63,16 @@ export default function IconTile(props) {
     appearance,
     size = '24',
     shape = 'square',
-    LEGACY_fallbackComponent,
     testId
   } = props;
   const ExpandedIcon = Icon;
-
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
-    return LEGACY_fallbackComponent;
-  } else {
-    return /*#__PURE__*/React.createElement("span", {
-      "data-testid": testId,
-      className: 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: 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/es2019/components/icon-tile/index.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+// Import both versions
+import IconTileNew from './icon-tile-new';
+import IconTileOld from './icon-tile-old';
+
+// Color mapping for size 16 standalone icons that will no longer be tiles
+const 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.
+ */
+export default function IconTile({
+  appearance,
+  icon: Icon,
+  label,
+  size,
+  testId,
+  shape,
+  LEGACY_fallbackComponent,
+  UNSAFE_circleReplacementComponent
+}) {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
+    return LEGACY_fallbackComponent;
+  }
+  if (UNSAFE_circleReplacementComponent && shape === 'circle' && fg('platform_dst_icon_tile_circle_replacement')) {
+    return UNSAFE_circleReplacementComponent;
+  }
+  if (shape !== 'circle' && fg('platform_dst_new_icon_tile')) {
+    // Handle size 16 - render icon directly without Tile
+    if (size === '16') {
+      return /*#__PURE__*/React.createElement(Icon, {
+        color: appearanceToIconColorMap[appearance],
+        label: label,
+        testId: testId
+      });
+    }
+    return /*#__PURE__*/React.createElement(IconTileNew, {
+      appearance: appearance,
+      icon: Icon,
+      label: label,
+      shape: shape,
+      size: size,
+      testId: testId
+    });
+  }
+  return /*#__PURE__*/React.createElement(IconTileOld, {
+    appearance: appearance,
+    icon: Icon,
+    label: label,
+    shape: shape,
+    size: size,
+    testId: testId
+  });
+}

package/dist/es2019/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./icon.compiled.css";
 import * as React from 'react';

package/dist/es2019/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 */
 import "./skeleton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/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 */
 import "./svg.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/metadata-core.js

@@ -3,7 +3,7 @@
  *
  * 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
  */
 
@@ -511,7 +511,7 @@ const 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'
   },
@@ -1111,7 +1111,7 @@ const 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'
   },
@@ -1204,7 +1204,7 @@ const 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'
   },
@@ -1417,7 +1417,7 @@ const 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'
   },
@@ -1428,7 +1428,7 @@ const 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'
   },
@@ -1713,7 +1713,7 @@ const 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'
   },
@@ -1739,7 +1739,7 @@ const 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'
   },
@@ -1901,7 +1901,7 @@ const 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'
   },
@@ -2115,7 +2115,7 @@ const 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'
   },
@@ -2272,7 +2272,7 @@ const 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'
   },
@@ -2400,7 +2400,7 @@ const 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'
   },
@@ -3073,7 +3073,7 @@ const 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'
   },
@@ -3617,7 +3617,7 @@ const 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/es2019/metadata.js

@@ -3,7 +3,7 @@
  *
  * 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/esm/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/esm/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/esm/components/icon-tile/icon-tile-new.js

@@ -0,0 +1,94 @@
+/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./icon-tile-new.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Tile from '@atlaskit/tile';
+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.
+ */
+export default 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, {
+    size: sizeCrossCompatibleMap[size],
+    backgroundColor: backgroundColorMap[appearance],
+    label: label,
+    testId: testId
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([iconColorMap[appearance]])
+  }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+    color: "currentColor",
+    label: label,
+    shouldScale: true
+  })));
+}

package/dist/{es2019/components/icon-tile.compiled.css → esm/components/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/esm/components/{icon-tile.js → icon-tile/icon-tile-old.js}

@@ -1,10 +1,23 @@
-/* icon-tile.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./icon-tile.compiled.css";
+/* icon-tile-old.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./icon-tile-old.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
+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",
@@ -39,13 +52,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.
  */
 export default function IconTile(props) {
   var Icon = props.icon,
@@ -55,22 +64,15 @@ export default 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 && !fg('platform-visual-refresh-icons')) {
-    return LEGACY_fallbackComponent;
-  } else {
-    return /*#__PURE__*/React.createElement("span", {
-      "data-testid": testId,
-      className: 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: 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
+  }));
 }