@atlaskit/button 17.22.1 → 17.23.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/button
 
+## 17.23.0
+
+### Minor Changes
+
+- [#112945](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112945)
+  [`d7af9e23536c0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7af9e23536c0) -
+  New button prevents unintended spread props being passed to children. The following props will now
+  be ignored:
+
+  - css
+  - style
+  - as
+  - className
+
+  Note: These props were already excluded via types. The API has not changed.
+
+## 17.22.2
+
+### Patch Changes
+
+- [#105813](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105813)
+  [`f2f51e7a24d00`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f2f51e7a24d00) -
+  Internal change only. Remove references to deprecated @atlaskit/theme constants and replace with
+  hard-coded values.
+- Updated dependencies
+
 ## 17.22.1
 
 ### Patch Changes

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _constants = require("@atlaskit/theme/constants");
 var _splitButtonContext = require("./split-button-context");
 var _utils = require("./utils");
 /**
@@ -16,10 +15,9 @@ var _utils = require("./utils");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var fontSize = (0, _constants.fontSize)();
 var heights = {
-  default: "".concat(32 / fontSize, "em"),
-  compact: "".concat(24 / fontSize, "em"),
+  default: "".concat(32 / 14, "em"),
+  compact: "".concat(24 / 14, "em"),
   none: 'auto'
 };
 var baseDividerStyles = (0, _react.css)({

package/dist/cjs/new-button/variants/default/button.js

@@ -8,9 +8,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 /**
  * __Button__
  *
@@ -51,7 +53,14 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = (0, _useDefaultButton.default)({
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,

package/dist/cjs/new-button/variants/default/link.js

@@ -9,9 +9,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 && Object.prototype.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; }
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
@@ -43,12 +45,19 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     testId = _ref.testId,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = (0, _useDefaultButton.default)({
-    ariaLabel: ariaLabel,
-    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'link',
     children: children,

package/dist/cjs/new-button/variants/icon/button.js

@@ -8,10 +8,12 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 /**
  * __Icon Button__
  *
@@ -53,7 +55,15 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
+
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
    * buttons. It's currently duplicated and mostly the same.
@@ -105,9 +115,8 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
     }, function (triggerProps) {
-      return /*#__PURE__*/_react.default.createElement(_pressable.default
-      // Top level props
-      , (0, _extends2.default)({}, rest, {
+      return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, rest, {
+        // Top level props
         "aria-labelledby": baseProps['aria-labelledby'],
         type: type,
         testId: testId,

package/dist/cjs/new-button/variants/icon/link.js

@@ -9,10 +9,12 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 && Object.prototype.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; }
 var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
@@ -45,7 +47,14 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     testId = _ref.testId,
     tooltip = _ref.tooltip,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = (0, _useIconButton.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,

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

@@ -14,16 +14,14 @@ var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-fo
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var _constants = require("@atlaskit/theme/constants");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _splitButtonContext = require("../../containers/split-button/split-button-context");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
-var _constants2 = require("./constants");
+var _constants = require("./constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 && Object.prototype.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; }
-var fontSize = (0, _constants.fontSize)();
 var buttonStyles = (0, _primitives.xcss)({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -36,7 +34,7 @@ var buttonStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius.100',
   borderWidth: 'border.width.0',
   flexShrink: 0,
-  height: "".concat(32 / fontSize, "em"),
+  height: "".concat(32 / 14, "em"),
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   textAlign: 'center',
@@ -56,7 +54,7 @@ var hardCodedButtonStyles = (0, _primitives.xcss)({
   fontSize: 'inherit',
   fontStyle: 'normal',
   fontWeight: 500,
-  lineHeight: "".concat(32 / fontSize, "em"),
+  lineHeight: "".concat(32 / 14, "em"),
   paddingBlock: 'space.0'
 });
 var tokenizedButtonStyles = (0, _primitives.xcss)({
@@ -93,6 +91,7 @@ var defaultStyles = (0, _primitives.xcss)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
   // @ts-expect-error — using tokens for explicit fallback usage.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
   color: "var(--ds-text, ".concat(colors.N500, ")"),
   ':visited': {
     // @ts-expect-error
@@ -422,13 +421,13 @@ var selectedDiscoveryStyles = (0, _primitives.xcss)({
 });
 var spacingCompactStyles = (0, _primitives.xcss)({
   columnGap: 'space.050',
-  height: "".concat(24 / fontSize, "em"),
+  height: "".concat(24 / 14, "em"),
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
 var baseSpacingCompactStyles = (0, _primitives.xcss)({
-  lineHeight: "".concat(24 / fontSize, "em")
+  lineHeight: "".concat(24 / 14, "em")
 });
 var tokenizedSpacingCompactStyles = (0, _primitives.xcss)({
   paddingBlock: 'space.025'
@@ -457,14 +456,14 @@ var nonInteractiveStyles = (0, _primitives.xcss)({
   cursor: 'not-allowed'
 });
 var iconButtonStyles = (0, _primitives.xcss)({
-  height: "".concat(32 / fontSize, "em"),
-  width: "".concat(32 / fontSize, "em"),
+  height: "".concat(32 / 14, "em"),
+  width: "".concat(32 / 14, "em"),
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
 var iconButtonCompactStyles = (0, _primitives.xcss)({
-  width: "".concat(24 / fontSize, "em"),
-  height: "".concat(24 / fontSize, "em")
+  width: "".concat(24 / 14, "em"),
+  height: "".concat(24 / 14, "em")
 });
 var buttonIconBeforeStyles = (0, _primitives.xcss)({
   paddingInlineStart: 'space.100'
@@ -580,7 +579,7 @@ var useButtonBase = function useButtonBase(_ref) {
     }, overlay) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
       id: loadingLabelId
     }, ", Loading")),
-    'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(_constants2.LOADING_LABEL) : ariaLabel,
+    'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(_constants.LOADING_LABEL) : ariaLabel,
     'aria-labelledby': isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy
   }, (0, _blockEvents.default)(isEffectivelyDisabled, {
     onClick: onClick,

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

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

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

@@ -16,7 +16,6 @@ var _colors = _interopRequireDefault(require("./colors"));
 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; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var gridSize = (0, _constants.gridSize)();
-var fontSize = (0, _constants.fontSize)();
 
 // ## Button layout
 //
@@ -31,9 +30,9 @@ var fontSize = (0, _constants.fontSize)();
 //                                        Margins don't collapse with inline-flex
 //
 var heights = {
-  default: "".concat(gridSize * 4 / fontSize, "em"),
+  default: "".concat(32 / 14, "em"),
   // 32px
-  compact: "".concat(gridSize * 3 / fontSize, "em"),
+  compact: "".concat(24 / 14, "em"),
   none: 'auto'
 };
 var lineHeights = {

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

@@ -6,11 +6,9 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { fontSize as getFontSize } from '@atlaskit/theme/constants';
-const fontSize = getFontSize();
 const heights = {
-  default: `${32 / fontSize}em`,
-  compact: `${24 / fontSize}em`,
+  default: `${32 / 14}em`,
+  compact: `${24 / 14}em`,
   none: 'auto'
 };
 import { SplitButtonContext } from './split-button-context';

package/dist/es2019/new-button/variants/default/button.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
 /**
@@ -41,8 +42,17 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   type = 'button',
   UNSAFE_iconAfter_size,
   UNSAFE_iconBefore_size,
-  ...rest
+  ...unsafeRest
 }, ref) {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   const baseProps = useDefaultButton({
     ariaLabel,
     ariaLabelledBy,

package/dist/es2019/new-button/variants/default/link.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import useDefaultButton from './use-default-button';
 const LinkButtonBase = ({
@@ -31,13 +32,22 @@ const LinkButtonBase = ({
   testId,
   UNSAFE_iconAfter_size,
   UNSAFE_iconBefore_size,
-  ...rest
+  ...unsafeRest
 }, ref) => {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   const baseProps = useDefaultButton({
-    ariaLabel,
-    ariaLabelledBy,
     analyticsContext,
     appearance,
+    ariaLabel,
+    ariaLabelledBy,
     autoFocus,
     buttonType: 'link',
     children,

package/dist/es2019/new-button/variants/icon/button.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -43,8 +44,18 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   tooltip,
   type = 'button',
   UNSAFE_size,
-  ...rest
+  ...unsafeRest
 }, ref) {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
+
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
    * buttons. It's currently duplicated and mostly the same.
@@ -95,9 +106,8 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
       hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
-    }, triggerProps => /*#__PURE__*/React.createElement(Pressable
-    // Top level props
-    , _extends({}, rest, {
+    }, triggerProps => /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+      // Top level props
       "aria-labelledby": baseProps['aria-labelledby'],
       type: type,
       testId: testId,

package/dist/es2019/new-button/variants/icon/link.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -33,8 +34,17 @@ const LinkIconButtonBase = ({
   testId,
   tooltip,
   UNSAFE_size,
-  ...rest
+  ...unsafeRest
 }, ref) => {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   const baseProps = useIconButton({
     analyticsContext,
     appearance,

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

@@ -5,12 +5,10 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
-import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
-const fontSize = getFontSize();
 const buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -23,7 +21,7 @@ const buttonStyles = xcss({
   borderRadius: 'border.radius.100',
   borderWidth: 'border.width.0',
   flexShrink: 0,
-  height: `${32 / fontSize}em`,
+  height: `${32 / 14}em`,
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   textAlign: 'center',
@@ -43,7 +41,7 @@ const hardCodedButtonStyles = xcss({
   fontSize: 'inherit',
   fontStyle: 'normal',
   fontWeight: 500,
-  lineHeight: `${32 / fontSize}em`,
+  lineHeight: `${32 / 14}em`,
   paddingBlock: 'space.0'
 });
 const tokenizedButtonStyles = xcss({
@@ -80,6 +78,7 @@ const defaultStyles = xcss({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   background: `var(--ds-background-neutral, ${colors.N20A})`,
   // @ts-expect-error — using tokens for explicit fallback usage.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
   color: `var(--ds-text, ${colors.N500})`,
   ':visited': {
     // @ts-expect-error
@@ -409,13 +408,13 @@ const selectedDiscoveryStyles = xcss({
 });
 const spacingCompactStyles = xcss({
   columnGap: 'space.050',
-  height: `${24 / fontSize}em`,
+  height: `${24 / 14}em`,
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
 const baseSpacingCompactStyles = xcss({
-  lineHeight: `${24 / fontSize}em`
+  lineHeight: `${24 / 14}em`
 });
 const tokenizedSpacingCompactStyles = xcss({
   paddingBlock: 'space.025'
@@ -444,14 +443,14 @@ const nonInteractiveStyles = xcss({
   cursor: 'not-allowed'
 });
 const iconButtonStyles = xcss({
-  height: `${32 / fontSize}em`,
-  width: `${32 / fontSize}em`,
+  height: `${32 / 14}em`,
+  width: `${32 / 14}em`,
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
 const iconButtonCompactStyles = xcss({
-  width: `${24 / fontSize}em`,
-  height: `${24 / fontSize}em`
+  width: `${24 / 14}em`,
+  height: `${24 / 14}em`
 });
 const buttonIconBeforeStyles = xcss({
   paddingInlineStart: 'space.100'

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

@@ -119,7 +119,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.22.1",
+    packageVersion: "17.23.0",
     analyticsData: analyticsContext
   });
 

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

@@ -1,11 +1,10 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { fontSize as getFontSize,
+import {
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 const gridSize = getGridSize();
-const fontSize = getFontSize();
 
 // ## Button layout
 //
@@ -20,9 +19,9 @@ const fontSize = getFontSize();
 //                                        Margins don't collapse with inline-flex
 //
 const heights = {
-  default: `${gridSize * 4 / fontSize}em`,
+  default: `${32 / 14}em`,
   // 32px
-  compact: `${gridSize * 3 / fontSize}em`,
+  compact: `${24 / 14}em`,
   none: 'auto'
 };
 const lineHeights = {

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

@@ -6,11 +6,9 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { fontSize as getFontSize } from '@atlaskit/theme/constants';
-var fontSize = getFontSize();
 var heights = {
-  default: "".concat(32 / fontSize, "em"),
-  compact: "".concat(24 / fontSize, "em"),
+  default: "".concat(32 / 14, "em"),
+  compact: "".concat(24 / 14, "em"),
   none: 'auto'
 };
 import { SplitButtonContext } from './split-button-context';

package/dist/esm/new-button/variants/default/button.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
 /**
@@ -44,7 +46,14 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = useDefaultButton({
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,

package/dist/esm/new-button/variants/default/link.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import useDefaultButton from './use-default-button';
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
@@ -33,12 +35,19 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     testId = _ref.testId,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = useDefaultButton({
-    ariaLabel: ariaLabel,
-    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'link',
     children: children,

package/dist/esm/new-button/variants/icon/button.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -46,7 +48,15 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
+
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
    * buttons. It's currently duplicated and mostly the same.
@@ -98,9 +108,8 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
     }, function (triggerProps) {
-      return /*#__PURE__*/React.createElement(Pressable
-      // Top level props
-      , _extends({}, rest, {
+      return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+        // Top level props
         "aria-labelledby": baseProps['aria-labelledby'],
         type: type,
         testId: testId,

package/dist/esm/new-button/variants/icon/link.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"],
+  _excluded2 = ["className", "css", "as", "style"];
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -35,7 +37,14 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     testId = _ref.testId,
     tooltip = _ref.tooltip,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = useIconButton({
     analyticsContext: analyticsContext,
     appearance: appearance,

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

@@ -8,12 +8,10 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
-import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
-var fontSize = getFontSize();
 var buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -26,7 +24,7 @@ var buttonStyles = xcss({
   borderRadius: 'border.radius.100',
   borderWidth: 'border.width.0',
   flexShrink: 0,
-  height: "".concat(32 / fontSize, "em"),
+  height: "".concat(32 / 14, "em"),
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   textAlign: 'center',
@@ -46,7 +44,7 @@ var hardCodedButtonStyles = xcss({
   fontSize: 'inherit',
   fontStyle: 'normal',
   fontWeight: 500,
-  lineHeight: "".concat(32 / fontSize, "em"),
+  lineHeight: "".concat(32 / 14, "em"),
   paddingBlock: 'space.0'
 });
 var tokenizedButtonStyles = xcss({
@@ -83,6 +81,7 @@ var defaultStyles = xcss({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
   // @ts-expect-error — using tokens for explicit fallback usage.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
   color: "var(--ds-text, ".concat(colors.N500, ")"),
   ':visited': {
     // @ts-expect-error
@@ -412,13 +411,13 @@ var selectedDiscoveryStyles = xcss({
 });
 var spacingCompactStyles = xcss({
   columnGap: 'space.050',
-  height: "".concat(24 / fontSize, "em"),
+  height: "".concat(24 / 14, "em"),
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
 var baseSpacingCompactStyles = xcss({
-  lineHeight: "".concat(24 / fontSize, "em")
+  lineHeight: "".concat(24 / 14, "em")
 });
 var tokenizedSpacingCompactStyles = xcss({
   paddingBlock: 'space.025'
@@ -447,14 +446,14 @@ var nonInteractiveStyles = xcss({
   cursor: 'not-allowed'
 });
 var iconButtonStyles = xcss({
-  height: "".concat(32 / fontSize, "em"),
-  width: "".concat(32 / fontSize, "em"),
+  height: "".concat(32 / 14, "em"),
+  width: "".concat(32 / 14, "em"),
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
 var iconButtonCompactStyles = xcss({
-  width: "".concat(24 / fontSize, "em"),
-  height: "".concat(24 / fontSize, "em")
+  width: "".concat(24 / 14, "em"),
+  height: "".concat(24 / 14, "em")
 });
 var buttonIconBeforeStyles = xcss({
   paddingInlineStart: 'space.100'

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

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

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

@@ -3,12 +3,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { fontSize as getFontSize,
+import {
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 var gridSize = getGridSize();
-var fontSize = getFontSize();
 
 // ## Button layout
 //
@@ -23,9 +22,9 @@ var fontSize = getFontSize();
 //                                        Margins don't collapse with inline-flex
 //
 var heights = {
-  default: "".concat(gridSize * 4 / fontSize, "em"),
+  default: "".concat(32 / 14, "em"),
   // 32px
-  compact: "".concat(gridSize * 3 / fontSize, "em"),
+  compact: "".concat(24 / 14, "em"),
   none: 'auto'
 };
 var lineHeights = {

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

@@ -2,7 +2,7 @@ import { 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, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...rest }: 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, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

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

@@ -2,7 +2,7 @@ import { 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, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...rest }: 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, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

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

@@ -2,7 +2,7 @@ import { 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, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...rest }: 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, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

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

@@ -2,7 +2,7 @@ import { 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, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...rest }: 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, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "17.22.1",
+	"version": "17.23.0",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -137,7 +137,7 @@
 		"@atlaskit/platform-feature-flags": "^0.2.5",
 		"@atlaskit/primitives": "^8.0.0",
 		"@atlaskit/spinner": "^16.2.0",
-		"@atlaskit/theme": "^12.10.0",
+		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.51.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@atlaskit/visually-hidden": "^1.4.0",
@@ -204,6 +204,9 @@
 		"platform.design-system-team.component-visual-refresh_t8zbo": {
 			"type": "boolean"
 		},
+		"platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw": {
+			"type": "boolean"
+		},
 		"platform.design-system-team.button-render-prop-fix_lyo55": {
 			"type": "boolean"
 		}