@atlaskit/icon 34.4.0 → 34.6.0

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

@@ -1,74 +1,34 @@
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-// Import both versions
-import IconTileNew from './icon-tile-new';
+import IconTileNew from './icon-tile';
 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, #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.
  */
-export default function IconTile({
-  appearance,
-  icon: Icon,
-  label,
-  size,
-  testId,
-  shape,
-  UNSAFE_circleReplacementComponent
-}) {
-  if (UNSAFE_circleReplacementComponent && shape === 'circle' && (fg('platform_dst_icon_tile_circle_replacement') || fg('platform_dst_icon_tile_circle_replacement_stage2'))) {
-    return UNSAFE_circleReplacementComponent;
-  }
-  if (shape !== 'circle' && (fg('platform_dst_new_icon_tile') || fg('platform_dst_new_icon_tile_stage2'))) {
-    // Handle size 16 - render icon directly without Tile
-    if (size === '16') {
-      return /*#__PURE__*/React.createElement(Icon, {
-        color: appearanceToIconColorMap[appearance],
-        label: label,
-        testId: testId
-      });
-    }
+export default function IconTile(props) {
+  if (props.shape === 'circle' && (fg('platform_dst_icon_tile_circle_replacement') || fg('platform_dst_icon_tile_circle_replacement_stage2'))) {
+    return props.UNSAFE_circleReplacementComponent;
+  } else if (props.shape === 'circle') {
+    return /*#__PURE__*/React.createElement(IconTileOld, {
+      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.createElement(IconTileNew, {
-      appearance: appearance,
-      icon: Icon,
-      label: label,
-      shape: shape,
-      size: size,
-      testId: testId
+      appearance: props.appearance,
+      icon: props.icon,
+      label: props.label,
+      shape: props.shape,
+      size: props.size,
+      testId: props.testId
     });
   }
-  return /*#__PURE__*/React.createElement(IconTileOld, {
-    appearance: appearance,
-    icon: Icon,
-    label: label,
-    shape: shape,
-    size: size,
-    testId: testId
-  });
 }

package/dist/esm/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';
-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",
@@ -80,7 +65,7 @@ export default function IconTileNew(props) {
     testId = props.testId;
   var ExpandedIcon = Icon;
   return /*#__PURE__*/React.createElement(Tile, {
-    size: sizeCrossCompatibleMap[size],
+    size: size,
     backgroundColor: backgroundColorMap[appearance],
     label: label,
     testId: testId

package/dist/esm/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/esm/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";
 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",
@@ -61,7 +54,7 @@ export default 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/esm/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/esm/components/icon-tile/icon-tile.js

@@ -0,0 +1,82 @@
+/* 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
+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.
+ */
+export default 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, {
+    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
+  })));
+}

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

@@ -1,73 +1,34 @@
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-// Import both versions
-import IconTileNew from './icon-tile-new';
+import IconTileNew from './icon-tile';
 import IconTileOld from './icon-tile-old';
 
-// 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.
  */
-export default 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' && (fg('platform_dst_icon_tile_circle_replacement') || fg('platform_dst_icon_tile_circle_replacement_stage2'))) {
-    return UNSAFE_circleReplacementComponent;
-  }
-  if (shape !== 'circle' && (fg('platform_dst_new_icon_tile') || fg('platform_dst_new_icon_tile_stage2'))) {
-    // Handle size 16 - render icon directly without Tile
-    if (size === '16') {
-      return /*#__PURE__*/React.createElement(Icon, {
-        color: appearanceToIconColorMap[appearance],
-        label: label,
-        testId: testId
-      });
-    }
+export default function IconTile(props) {
+  if (props.shape === 'circle' && (fg('platform_dst_icon_tile_circle_replacement') || fg('platform_dst_icon_tile_circle_replacement_stage2'))) {
+    return props.UNSAFE_circleReplacementComponent;
+  } else if (props.shape === 'circle') {
+    return /*#__PURE__*/React.createElement(IconTileOld, {
+      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.createElement(IconTileNew, {
-      appearance: appearance,
-      icon: Icon,
-      label: label,
-      shape: shape,
-      size: size,
-      testId: testId
+      appearance: props.appearance,
+      icon: props.icon,
+      label: props.label,
+      shape: props.shape,
+      size: props.size,
+      testId: props.testId
     });
   }
-  return /*#__PURE__*/React.createElement(IconTileOld, {
-    appearance: appearance,
-    icon: Icon,
-    label: label,
-    shape: shape,
-    size: size,
-    testId: testId
-  });
 }

package/dist/types/components/icon-tile/icon-tile.d.ts

@@ -0,0 +1,7 @@
+import { type IconTileProps } from '../../types';
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+export default function IconTileNew(props: IconTileProps): JSX.Element;

package/dist/types/components/icon-tile/index.d.ts

@@ -5,4 +5,4 @@ import { type IconTileProps } from '../../types';
  *
  * An icon with background shape, color, and size properties determined by Tile.
  */
-export default function IconTile({ appearance, icon: Icon, label, size, testId, shape, UNSAFE_circleReplacementComponent, }: IconTileProps): React.JSX.Element;
+export default function IconTile(props: IconTileProps): React.JSX.Element;

package/dist/types/entry-points/types.d.ts

@@ -1 +1 @@
-export type { CustomGlyphProps, GlyphProps, IconProps, IconSize, IconSpacing, IconTileAppearance, IconTileProps, IconTileSize, LEGACY_Metadata, LegacyIconTileSize, NewCoreIconProps, NewGlyphColorProps, NewIconProps, NewIconTileSize, SVGProps, Size, SkeletonProps, UNSAFE_NewCoreGlyphProps, UNSAFE_NewGlyphProps, } from '../types';
+export type { CustomGlyphProps, GlyphProps, IconProps, IconSize, IconSpacing, IconTileAppearance, IconTileProps, IconTileSize, LEGACY_Metadata, NewCoreIconProps, NewGlyphColorProps, NewIconProps, SVGProps, Size, SkeletonProps, UNSAFE_NewCoreGlyphProps, UNSAFE_NewGlyphProps, } from '../types';

package/dist/types/types.d.ts

@@ -135,10 +135,8 @@ export type NewCoreIconProps = Omit<UNSAFE_NewCoreGlyphProps, 'dangerouslySetGly
 export type UNSAFE_NewGlyphProps = UNSAFE_NewCoreGlyphProps;
 export type NewIconProps = Omit<UNSAFE_NewGlyphProps, 'dangerouslySetGlyph'>;
 export type IconTileAppearance = 'gray' | 'blue' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'magenta' | 'purple' | 'grayBold' | 'blueBold' | 'tealBold' | 'greenBold' | 'limeBold' | 'yellowBold' | 'orangeBold' | 'redBold' | 'magentaBold' | 'purpleBold';
-export type NewIconTileSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export type LegacyIconTileSize = '16' | '24' | '32' | '40' | '48';
-export type IconTileSize = NewIconTileSize | LegacyIconTileSize;
-export interface IconTileProps {
+export type IconTileSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+interface IconTileBaseProps {
     /**
      * The icon to display
      */
@@ -152,40 +150,46 @@ export interface IconTileProps {
      */
     appearance: IconTileAppearance;
     /**
-     * Size of the tile, in pixels. Defaults to `24`.
+     * Size of the tile. Defaults to `medium`.
      *
-     * Now supports both semantic t-shirt size names and pixel number values. Pixel number values are deprecated and will be removed in a future release, however they will both be available and backwards-compatible during a transition period.
-     *
-     * Size `16` will not have a replacement after deprecation, and should be replaced with direct icons without a tile or enlarging to the next available size `xsmall`.
-     *
-     * All available sizes:
-     * - `16` (deprecated)
-     * - `xsmall` (new)
-     * - `small` or `24`
-     * - `medium` or `32`
-     * - `large` or `40`
-     * - `xlarge` or `48`
+     * Available sizes: `xsmall`, `small`, `medium`, `large`, `xlarge`.
      */
     size?: IconTileSize;
     /**
-     * Shape of the tile background. Defaults to "square"
+     * A unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+interface IconTileSquareProps extends IconTileBaseProps {
+    /**
+     * Shape of the tile background. Defaults to "square".
+     */
+    shape?: 'square';
+    /**
+     * A component to render in place of circle shaped icon tiles, swapped out with a feature flag.
+     *
+     * Only applicable when `shape="circle"`.
+     */
+    UNSAFE_circleReplacementComponent?: never;
+}
+interface IconTileCircleProps extends IconTileBaseProps {
+    /**
+     * Shape of the tile background.
      * @deprecated Circle shape is deprecated and will be removed in a future version. Consider migrating to alternatives such as a square tile, or an `IconButton` for interactive elements.
      * If necessary, the only way to retain a circle appearance is to rebuild the component custom using ADS primitives. The prop `UNSAFE_circleReplacementComponent` can be used to
      * implement alternatives.
      */
-    shape?: 'square' | 'circle';
+    shape: 'circle';
     /**
      * A component to render in place of circle shaped icon tiles, swapped out with a feature flag.
      *
-     * This prop is temporary, and will be used by ADS to safely rollout alternatives as circle shaped icon tiles are deprecated.
+     * Required when `shape="circle"`. This prop is temporary, and will be used by ADS to safely
+     * rollout alternatives as circle shaped icon tiles are deprecated.
      */
-    UNSAFE_circleReplacementComponent?: ReactElement;
-    /**
-     * A unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
+    UNSAFE_circleReplacementComponent: ReactElement;
 }
+export type IconTileProps = IconTileSquareProps | IconTileCircleProps;
 export interface SkeletonProps {
     color?: string;
     size?: Size;

package/dist/types-ts4.5/components/icon-tile/icon-tile.d.ts

@@ -0,0 +1,7 @@
+import { type IconTileProps } from '../../types';
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+export default function IconTileNew(props: IconTileProps): JSX.Element;

package/dist/types-ts4.5/components/icon-tile/index.d.ts

@@ -5,4 +5,4 @@ import { type IconTileProps } from '../../types';
  *
  * An icon with background shape, color, and size properties determined by Tile.
  */
-export default function IconTile({ appearance, icon: Icon, label, size, testId, shape, UNSAFE_circleReplacementComponent, }: IconTileProps): React.JSX.Element;
+export default function IconTile(props: IconTileProps): React.JSX.Element;

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

@@ -1 +1 @@
-export type { CustomGlyphProps, GlyphProps, IconProps, IconSize, IconSpacing, IconTileAppearance, IconTileProps, IconTileSize, LEGACY_Metadata, LegacyIconTileSize, NewCoreIconProps, NewGlyphColorProps, NewIconProps, NewIconTileSize, SVGProps, Size, SkeletonProps, UNSAFE_NewCoreGlyphProps, UNSAFE_NewGlyphProps, } from '../types';
+export type { CustomGlyphProps, GlyphProps, IconProps, IconSize, IconSpacing, IconTileAppearance, IconTileProps, IconTileSize, LEGACY_Metadata, NewCoreIconProps, NewGlyphColorProps, NewIconProps, SVGProps, Size, SkeletonProps, UNSAFE_NewCoreGlyphProps, UNSAFE_NewGlyphProps, } from '../types';

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

@@ -135,10 +135,8 @@ export type NewCoreIconProps = Omit<UNSAFE_NewCoreGlyphProps, 'dangerouslySetGly
 export type UNSAFE_NewGlyphProps = UNSAFE_NewCoreGlyphProps;
 export type NewIconProps = Omit<UNSAFE_NewGlyphProps, 'dangerouslySetGlyph'>;
 export type IconTileAppearance = 'gray' | 'blue' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'magenta' | 'purple' | 'grayBold' | 'blueBold' | 'tealBold' | 'greenBold' | 'limeBold' | 'yellowBold' | 'orangeBold' | 'redBold' | 'magentaBold' | 'purpleBold';
-export type NewIconTileSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-export type LegacyIconTileSize = '16' | '24' | '32' | '40' | '48';
-export type IconTileSize = NewIconTileSize | LegacyIconTileSize;
-export interface IconTileProps {
+export type IconTileSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+interface IconTileBaseProps {
     /**
      * The icon to display
      */
@@ -152,40 +150,46 @@ export interface IconTileProps {
      */
     appearance: IconTileAppearance;
     /**
-     * Size of the tile, in pixels. Defaults to `24`.
+     * Size of the tile. Defaults to `medium`.
      *
-     * Now supports both semantic t-shirt size names and pixel number values. Pixel number values are deprecated and will be removed in a future release, however they will both be available and backwards-compatible during a transition period.
-     *
-     * Size `16` will not have a replacement after deprecation, and should be replaced with direct icons without a tile or enlarging to the next available size `xsmall`.
-     *
-     * All available sizes:
-     * - `16` (deprecated)
-     * - `xsmall` (new)
-     * - `small` or `24`
-     * - `medium` or `32`
-     * - `large` or `40`
-     * - `xlarge` or `48`
+     * Available sizes: `xsmall`, `small`, `medium`, `large`, `xlarge`.
      */
     size?: IconTileSize;
     /**
-     * Shape of the tile background. Defaults to "square"
+     * A unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+interface IconTileSquareProps extends IconTileBaseProps {
+    /**
+     * Shape of the tile background. Defaults to "square".
+     */
+    shape?: 'square';
+    /**
+     * A component to render in place of circle shaped icon tiles, swapped out with a feature flag.
+     *
+     * Only applicable when `shape="circle"`.
+     */
+    UNSAFE_circleReplacementComponent?: never;
+}
+interface IconTileCircleProps extends IconTileBaseProps {
+    /**
+     * Shape of the tile background.
      * @deprecated Circle shape is deprecated and will be removed in a future version. Consider migrating to alternatives such as a square tile, or an `IconButton` for interactive elements.
      * If necessary, the only way to retain a circle appearance is to rebuild the component custom using ADS primitives. The prop `UNSAFE_circleReplacementComponent` can be used to
      * implement alternatives.
      */
-    shape?: 'square' | 'circle';
+    shape: 'circle';
     /**
      * A component to render in place of circle shaped icon tiles, swapped out with a feature flag.
      *
-     * This prop is temporary, and will be used by ADS to safely rollout alternatives as circle shaped icon tiles are deprecated.
+     * Required when `shape="circle"`. This prop is temporary, and will be used by ADS to safely
+     * rollout alternatives as circle shaped icon tiles are deprecated.
      */
-    UNSAFE_circleReplacementComponent?: ReactElement;
-    /**
-     * A unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
+    UNSAFE_circleReplacementComponent: ReactElement;
 }
+export type IconTileProps = IconTileSquareProps | IconTileCircleProps;
 export interface SkeletonProps {
     color?: string;
     size?: Size;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "34.4.0",
+	"version": "34.6.0",
 	"description": "An icon is a symbol representing a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -65,14 +65,14 @@
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/logo": "^20.1.0",
 		"@atlaskit/menu": "^8.5.0",
-		"@atlaskit/modal-dialog": "^14.18.0",
+		"@atlaskit/modal-dialog": "^15.0.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/theme": "^23.2.0",
 		"@atlaskit/toggle": "^15.6.0",
-		"@atlaskit/tooltip": "^22.0.0",
-		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlaskit/tooltip": "^22.2.0",
+		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
@@ -120,12 +120,6 @@
 	},
 	"homepage": "https://atlassian.design/components/icon/",
 	"platform-feature-flags": {
-		"platform_dst_new_icon_tile": {
-			"type": "boolean"
-		},
-		"platform_dst_new_icon_tile_stage2": {
-			"type": "boolean"
-		},
 		"platform_dst_icon_tile_circle_replacement": {
 			"type": "boolean"
 		},

package/svgs/core/ai-generative-text-summary.svg

@@ -1 +1 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><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"/></svg>
+<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><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"/></svg>

package/svgs/core/briefcase.svg

@@ -1 +1 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><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"/></svg>
+<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><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"/></svg>

package/svgs/core/chart-pie.svg

@@ -1 +1 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><mask id="mask0_66923_23419" 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_66923_23419)"><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"/></svg>
+<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><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"/></svg>

package/svgs/core/customize.svg

@@ -1 +1 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><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"/></svg>
+<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><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"/></svg>

package/svgs/core/filter.svg

@@ -1 +1 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentcolor" fill-rule="evenodd" d="M15 3.5H1V2h14zm-2 5.25H3v-1.5h10zM11 14H5v-1.5h6z" clip-rule="evenodd"/></svg>
+<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentcolor" d="M11 12v1.5H5V12zm2-4.75v1.5H3v-1.5zm2-4.75V4H1V2.5z"/></svg>