@atlaskit/button 20.4.2 → 20.5.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/button
 
+## 20.5.0
+
+### Minor Changes
+
+- [#110533](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110533)
+  [`9856bf5d3faeb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9856bf5d3faeb) -
+  Updated styles for new button to use `rem` unit for width and height instead of `em` with
+  fractional units.
+
 ## 20.4.2
 
 ### Patch Changes

package/dist/cjs/new-button/containers/split-button/split-button.js

@@ -68,6 +68,14 @@ var dividerHeight = {
     height: "".concat(24 / 14, "em")
   })
 };
+var dividerHeightWithRem = {
+  default: (0, _react.css)({
+    height: '2rem'
+  }),
+  compact: (0, _react.css)({
+    height: '1.5rem'
+  })
+};
 var defaultDividerHeight = {
   // The divider height is calculated by subtracting twice the border width from the button height.
   // This ensures the divider does not intersect with the button's border, avoiding visual issues
@@ -79,6 +87,17 @@ var defaultDividerHeight = {
     height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
   })
 };
+var defaultDividerHeightWithRem = {
+  // The divider height is calculated by subtracting twice the border width from the button height.
+  // This ensures the divider does not intersect with the button's border, avoiding visual issues
+  // caused by overlapping alpha colors (color.border) at the intersection.
+  default: (0, _react.css)({
+    height: "calc(2rem - ".concat("var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  }),
+  compact: (0, _react.css)({
+    height: "calc(1.5rem - ".concat("var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  })
+};
 /**
  * TODO: Add JSDoc
  */
@@ -87,10 +106,13 @@ var Divider = exports.Divider = function Divider(_ref) {
     spacing = _ref.spacing,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  // Pulling these out of the below `css` prop to avoid nested ternaries
+  var defaultDividerHeightStyles = (0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
+  var dividerHeightStyles = (0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
   return (
     // I find it funny to provide a div for Divider
     (0, _react.jsx)("div", {
-      css: [baseDividerStyles, appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultDividerHeightStyles[spacing] : dividerHeightStyles[spacing], isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

package/dist/cjs/new-button/variants/shared/use-button-base.js

@@ -23,6 +23,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// If updating `buttonStyles`, also update `buttonStylesWithRem`.
 var buttonStyles = (0, _primitives.xcss)({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -53,6 +54,36 @@ var buttonStyles = (0, _primitives.xcss)({
     position: 'absolute'
   }
 });
+var buttonStylesWithRem = (0, _primitives.xcss)({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  position: 'relative',
+  alignItems: 'baseline',
+  justifyContent: 'center',
+  columnGap: 'space.050',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.0',
+  flexShrink: 0,
+  height: '2rem',
+  font: 'font.body',
+  fontWeight: 'font.weight.medium',
+  paddingBlock: 'space.075',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  textAlign: 'center',
+  transition: 'background 0.1s ease-out',
+  verticalAlign: 'middle',
+  '::after': {
+    borderRadius: 'inherit',
+    inset: 'space.0',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width, 1px)",
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+});
 var defaultInteractiveStyles = (0, _primitives.xcss)({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
@@ -362,6 +393,8 @@ var selectedDiscoveryStyles = (0, _primitives.xcss)({
     background: "var(--ds-background-selected, #403294)"
   }
 });
+
+// If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
 var spacingCompactStyles = (0, _primitives.xcss)({
   columnGap: 'space.050',
   height: "".concat(24 / 14, "em"),
@@ -370,6 +403,14 @@ var spacingCompactStyles = (0, _primitives.xcss)({
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
+var spacingCompactStylesWithRem = (0, _primitives.xcss)({
+  columnGap: 'space.050',
+  height: '1.5rem',
+  paddingBlock: 'space.025',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  verticalAlign: 'middle'
+});
 var circleStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius.circle'
 });
@@ -379,16 +420,28 @@ var fullWidthStyles = (0, _primitives.xcss)({
 var loadingStyles = (0, _primitives.xcss)({
   cursor: 'progress'
 });
+// If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
 var iconButtonStyles = (0, _primitives.xcss)({
   height: "".concat(32 / 14, "em"),
   width: "".concat(32 / 14, "em"),
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
+var iconButtonStylesWithRem = (0, _primitives.xcss)({
+  height: '2rem',
+  width: '2rem',
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0'
+});
+// If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
 var iconButtonCompactStyles = (0, _primitives.xcss)({
   width: "".concat(24 / 14, "em"),
   height: "".concat(24 / 14, "em")
 });
+var iconButtonCompactStylesWithRem = (0, _primitives.xcss)({
+  width: '1.5rem',
+  height: '1.5rem'
+});
 var buttonIconBeforeStyles = (0, _primitives.xcss)({
   paddingInlineStart: 'space.100'
 });
@@ -484,13 +537,13 @@ var useButtonBase = function useButtonBase(_ref) {
   (0, _useAutoFocus.default)(localRef, autoFocus);
   return _objectSpread({
     ref: (0, _mergeRefs.default)([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [(0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? buttonStylesWithRem : buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? spacingCompactStylesWithRem : spacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && ((0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? iconButtonStylesWithRem : iconButtonStyles), isIconButton && spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? iconButtonCompactStylesWithRem : iconButtonCompactStyles), shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/_react.default.createElement(_splitButtonContext.SplitButtonContext.Provider, {
       value: undefined

package/dist/cjs/old-button/shared/button-base.js

@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.4.2",
+    packageVersion: "20.5.0",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/new-button/containers/split-button/split-button.js

@@ -62,6 +62,14 @@ const dividerHeight = {
     height: `${24 / 14}em`
   })
 };
+const dividerHeightWithRem = {
+  default: css({
+    height: '2rem'
+  }),
+  compact: css({
+    height: '1.5rem'
+  })
+};
 const defaultDividerHeight = {
   // The divider height is calculated by subtracting twice the border width from the button height.
   // This ensures the divider does not intersect with the button's border, avoiding visual issues
@@ -73,6 +81,17 @@ const defaultDividerHeight = {
     height: `calc(${24 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
   })
 };
+const defaultDividerHeightWithRem = {
+  // The divider height is calculated by subtracting twice the border width from the button height.
+  // This ensures the divider does not intersect with the button's border, avoiding visual issues
+  // caused by overlapping alpha colors (color.border) at the intersection.
+  default: css({
+    height: `calc(2rem - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
+  }),
+  compact: css({
+    height: `calc(1.5rem - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
+  })
+};
 /**
  * TODO: Add JSDoc
  */
@@ -81,10 +100,13 @@ export const Divider = ({
   spacing,
   isDisabled = false
 }) => {
+  // Pulling these out of the below `css` prop to avoid nested ternaries
+  const defaultDividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
+  const dividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeightStyles[spacing] : dividerHeightStyles[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -10,6 +10,7 @@ import { SplitButtonContext, useSplitButtonContext } from '../../containers/spli
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
 import renderLoadingOverlay from './loading-overlay';
+// If updating `buttonStyles`, also update `buttonStylesWithRem`.
 const buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -40,6 +41,36 @@ const buttonStyles = xcss({
     position: 'absolute'
   }
 });
+const buttonStylesWithRem = xcss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  position: 'relative',
+  alignItems: 'baseline',
+  justifyContent: 'center',
+  columnGap: 'space.050',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.0',
+  flexShrink: 0,
+  height: '2rem',
+  font: 'font.body',
+  fontWeight: 'font.weight.medium',
+  paddingBlock: 'space.075',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  textAlign: 'center',
+  transition: 'background 0.1s ease-out',
+  verticalAlign: 'middle',
+  '::after': {
+    borderRadius: 'inherit',
+    inset: 'space.0',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width, 1px)",
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+});
 const defaultInteractiveStyles = xcss({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
@@ -349,6 +380,8 @@ const selectedDiscoveryStyles = xcss({
     background: "var(--ds-background-selected, #403294)"
   }
 });
+
+// If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
 const spacingCompactStyles = xcss({
   columnGap: 'space.050',
   height: `${24 / 14}em`,
@@ -357,6 +390,14 @@ const spacingCompactStyles = xcss({
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
+const spacingCompactStylesWithRem = xcss({
+  columnGap: 'space.050',
+  height: '1.5rem',
+  paddingBlock: 'space.025',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  verticalAlign: 'middle'
+});
 const circleStyles = xcss({
   borderRadius: 'border.radius.circle'
 });
@@ -366,16 +407,28 @@ const fullWidthStyles = xcss({
 const loadingStyles = xcss({
   cursor: 'progress'
 });
+// If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
 const iconButtonStyles = xcss({
   height: `${32 / 14}em`,
   width: `${32 / 14}em`,
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
+const iconButtonStylesWithRem = xcss({
+  height: '2rem',
+  width: '2rem',
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0'
+});
+// If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
 const iconButtonCompactStyles = xcss({
   width: `${24 / 14}em`,
   height: `${24 / 14}em`
 });
+const iconButtonCompactStylesWithRem = xcss({
+  width: '1.5rem',
+  height: '1.5rem'
+});
 const buttonIconBeforeStyles = xcss({
   paddingInlineStart: 'space.100'
 });
@@ -463,13 +516,13 @@ const useButtonBase = ({
   useAutoFocus(localRef, autoFocus);
   return {
     ref: mergeRefs([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [fg('platform_dst_button_replace_em_with_rem') ? buttonStylesWithRem : buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? spacingCompactStylesWithRem : spacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonStylesWithRem : iconButtonStyles), isIconButton && spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonCompactStylesWithRem : iconButtonCompactStyles), shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
       value: undefined

package/dist/es2019/old-button/shared/button-base.js

@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.4.2",
+    packageVersion: "20.5.0",
     analyticsData: analyticsContext
   });
 

package/dist/esm/new-button/containers/split-button/split-button.js

@@ -64,6 +64,14 @@ var dividerHeight = {
     height: "".concat(24 / 14, "em")
   })
 };
+var dividerHeightWithRem = {
+  default: css({
+    height: '2rem'
+  }),
+  compact: css({
+    height: '1.5rem'
+  })
+};
 var defaultDividerHeight = {
   // The divider height is calculated by subtracting twice the border width from the button height.
   // This ensures the divider does not intersect with the button's border, avoiding visual issues
@@ -75,6 +83,17 @@ var defaultDividerHeight = {
     height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
   })
 };
+var defaultDividerHeightWithRem = {
+  // The divider height is calculated by subtracting twice the border width from the button height.
+  // This ensures the divider does not intersect with the button's border, avoiding visual issues
+  // caused by overlapping alpha colors (color.border) at the intersection.
+  default: css({
+    height: "calc(2rem - ".concat("var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  }),
+  compact: css({
+    height: "calc(1.5rem - ".concat("var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  })
+};
 /**
  * TODO: Add JSDoc
  */
@@ -83,10 +102,13 @@ export var Divider = function Divider(_ref) {
     spacing = _ref.spacing,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  // Pulling these out of the below `css` prop to avoid nested ternaries
+  var defaultDividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
+  var dividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeightStyles[spacing] : dividerHeightStyles[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

package/dist/esm/new-button/variants/shared/use-button-base.js

@@ -13,6 +13,7 @@ import { SplitButtonContext, useSplitButtonContext } from '../../containers/spli
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
 import renderLoadingOverlay from './loading-overlay';
+// If updating `buttonStyles`, also update `buttonStylesWithRem`.
 var buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -43,6 +44,36 @@ var buttonStyles = xcss({
     position: 'absolute'
   }
 });
+var buttonStylesWithRem = xcss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  position: 'relative',
+  alignItems: 'baseline',
+  justifyContent: 'center',
+  columnGap: 'space.050',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.0',
+  flexShrink: 0,
+  height: '2rem',
+  font: 'font.body',
+  fontWeight: 'font.weight.medium',
+  paddingBlock: 'space.075',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  textAlign: 'center',
+  transition: 'background 0.1s ease-out',
+  verticalAlign: 'middle',
+  '::after': {
+    borderRadius: 'inherit',
+    inset: 'space.0',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width, 1px)",
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+});
 var defaultInteractiveStyles = xcss({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
@@ -352,6 +383,8 @@ var selectedDiscoveryStyles = xcss({
     background: "var(--ds-background-selected, #403294)"
   }
 });
+
+// If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
 var spacingCompactStyles = xcss({
   columnGap: 'space.050',
   height: "".concat(24 / 14, "em"),
@@ -360,6 +393,14 @@ var spacingCompactStyles = xcss({
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
+var spacingCompactStylesWithRem = xcss({
+  columnGap: 'space.050',
+  height: '1.5rem',
+  paddingBlock: 'space.025',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  verticalAlign: 'middle'
+});
 var circleStyles = xcss({
   borderRadius: 'border.radius.circle'
 });
@@ -369,16 +410,28 @@ var fullWidthStyles = xcss({
 var loadingStyles = xcss({
   cursor: 'progress'
 });
+// If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
 var iconButtonStyles = xcss({
   height: "".concat(32 / 14, "em"),
   width: "".concat(32 / 14, "em"),
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
+var iconButtonStylesWithRem = xcss({
+  height: '2rem',
+  width: '2rem',
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0'
+});
+// If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
 var iconButtonCompactStyles = xcss({
   width: "".concat(24 / 14, "em"),
   height: "".concat(24 / 14, "em")
 });
+var iconButtonCompactStylesWithRem = xcss({
+  width: '1.5rem',
+  height: '1.5rem'
+});
 var buttonIconBeforeStyles = xcss({
   paddingInlineStart: 'space.100'
 });
@@ -474,13 +527,13 @@ var useButtonBase = function useButtonBase(_ref) {
   useAutoFocus(localRef, autoFocus);
   return _objectSpread({
     ref: mergeRefs([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [fg('platform_dst_button_replace_em_with_rem') ? buttonStylesWithRem : buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? spacingCompactStylesWithRem : spacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonStylesWithRem : iconButtonStyles), isIconButton && spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonCompactStylesWithRem : iconButtonCompactStyles), shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
       value: undefined

package/dist/esm/old-button/shared/button-base.js

@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.4.2",
+    packageVersion: "20.5.0",
     analyticsData: analyticsContext
   });
 

package/dist/types/new-button/containers/split-button/utils.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
 export declare const getActions: (children: ReactNode) => {
-    PrimaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal;
-    SecondaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal;
+    PrimaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
+    SecondaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
 };

package/dist/types/new-button/variants/default/link.d.ts

@@ -1,8 +1,8 @@
-import { type Ref } from 'react';
+import React, { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => React.JSX.Element;
 /**
  * __Link Button__
  *

package/dist/types/new-button/variants/icon/link.d.ts

@@ -1,8 +1,8 @@
-import { type Ref } from 'react';
+import React, { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => React.JSX.Element;
 /**
  * __Link Icon Button__
  *

package/dist/types/new-button/variants/shared/content.d.ts

@@ -10,5 +10,5 @@ type ContentProps = {
  *
  * Used for slots within a Button, including icons and text content.
  */
-declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
+declare const Content: ({ children, type, isLoading, position }: ContentProps) => React.JSX.Element;
 export default Content;

package/dist/types/new-button/variants/shared/icon-renderer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type IconProp } from '../types';
 /**
  * __Icon renderer__
@@ -8,5 +8,5 @@ import { type IconProp } from '../types';
  */
 declare const IconRenderer: ({ icon: Icon }: {
     icon: IconProp;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default IconRenderer;

package/dist/types/new-button/variants/shared/loading-overlay.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type Appearance, type ButtonSpacing } from '../types';
 export default function renderLoadingOverlay({ appearance, spacing, isDisabled, isSelected, testId, }: {
     spacing?: ButtonSpacing;
@@ -6,4 +6,4 @@ export default function renderLoadingOverlay({ appearance, spacing, isDisabled,
     isDisabled?: boolean;
     isSelected?: boolean;
     testId?: string;
-}): JSX.Element;
+}): React.JSX.Element;

package/dist/types/old-button/shared/loading-spinner.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { type BaseProps } from '../types';
 type LoadingSpinnerProps = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
-export default function LoadingSpinner({ appearance, isDisabled, isSelected, spacing, }: LoadingSpinnerProps): JSX.Element;
+export default function LoadingSpinner({ appearance, isDisabled, isSelected, spacing, }: LoadingSpinnerProps): React.JSX.Element;
 export {};

package/dist/types-ts4.5/new-button/containers/split-button/utils.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
 export declare const getActions: (children: ReactNode) => {
-    PrimaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal;
-    SecondaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal;
+    PrimaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
+    SecondaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
 };

package/dist/types-ts4.5/new-button/variants/default/link.d.ts

@@ -1,8 +1,8 @@
-import { type Ref } from 'react';
+import React, { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => React.JSX.Element;
 /**
  * __Link Button__
  *

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -1,8 +1,8 @@
-import { type Ref } from 'react';
+import React, { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => React.JSX.Element;
 /**
  * __Link Icon Button__
  *

package/dist/types-ts4.5/new-button/variants/shared/content.d.ts

@@ -10,5 +10,5 @@ type ContentProps = {
  *
  * Used for slots within a Button, including icons and text content.
  */
-declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
+declare const Content: ({ children, type, isLoading, position }: ContentProps) => React.JSX.Element;
 export default Content;

package/dist/types-ts4.5/new-button/variants/shared/icon-renderer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type IconProp } from '../types';
 /**
  * __Icon renderer__
@@ -8,5 +8,5 @@ import { type IconProp } from '../types';
  */
 declare const IconRenderer: ({ icon: Icon }: {
     icon: IconProp;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default IconRenderer;

package/dist/types-ts4.5/new-button/variants/shared/loading-overlay.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type Appearance, type ButtonSpacing } from '../types';
 export default function renderLoadingOverlay({ appearance, spacing, isDisabled, isSelected, testId, }: {
     spacing?: ButtonSpacing;
@@ -6,4 +6,4 @@ export default function renderLoadingOverlay({ appearance, spacing, isDisabled,
     isDisabled?: boolean;
     isSelected?: boolean;
     testId?: string;
-}): JSX.Element;
+}): React.JSX.Element;

package/dist/types-ts4.5/old-button/shared/loading-spinner.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { type BaseProps } from '../types';
 type LoadingSpinnerProps = Pick<BaseProps, 'appearance' | 'isDisabled' | 'isSelected' | 'spacing'>;
-export default function LoadingSpinner({ appearance, isDisabled, isSelected, spacing, }: LoadingSpinnerProps): JSX.Element;
+export default function LoadingSpinner({ appearance, isDisabled, isSelected, spacing, }: LoadingSpinnerProps): React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "20.4.2",
+	"version": "20.5.0",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -132,6 +132,9 @@
 	"platform-feature-flags": {
 		"platform-component-visual-refresh": {
 			"type": "boolean"
+		},
+		"platform_dst_button_replace_em_with_rem": {
+			"type": "boolean"
 		}
 	}
 }