@atlaskit/button 16.10.1 → 16.10.2

package/dist/cjs/new-button/variants/shared/content.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var textStyles = (0, _primitives.xcss)({
+  // content can grow and shrink
+  flexGrow: 1,
+  flexShrink: 1,
+  // ellipsis for overflow text
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var iconStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  // icon size cannot grow and shrink
+  flexGrow: 0,
+  flexShrink: 0,
+  alignSelf: 'center',
+  fontSize: 0,
+  lineHeight: 0,
+  userSelect: 'none'
+});
+var commonStyles = (0, _primitives.xcss)({
+  transition: 'opacity 0.3s'
+});
+var fadeStyles = (0, _primitives.xcss)({
+  opacity: 0
+});
+/**
+ * __Content__
+ *
+ * Used for slots within a Button, including icons and text content.
+ */
+var Content = function Content(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    hasOverlay = _ref.hasOverlay;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: "span",
+    xcss: [commonStyles].concat((0, _toConsumableArray2.default)(type === 'text' ? [textStyles] : [iconStyles]), (0, _toConsumableArray2.default)(hasOverlay ? [fadeStyles] : []))
+  }, children);
+};
+var _default = exports.default = Content;

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

@@ -21,6 +21,17 @@ 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) { (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 no-duplicate-imports
 // Include modified onClick with analytics
 
+var overlayStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  insetInlineStart: 'space.0',
+  insetBlockStart: 'space.0',
+  insetInlineEnd: 'space.0',
+  insetBlockEnd: 'space.0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+
 /**
  * __Use button base__
  *
@@ -95,7 +106,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.10.2",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -121,7 +132,7 @@ var useButtonBase = function useButtonBase(_ref) {
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, overlay ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
       as: "span",
-      xcss: _xcss.overlayStyles
+      xcss: overlayStyles
     }, overlay) : null)
   }, (0, _blockEvents.default)(isEffectivelyDisabled, {
     onClick: onClick,
@@ -136,5 +147,4 @@ var useButtonBase = function useButtonBase(_ref) {
     onClickCapture: onClickCapture
   }));
 };
-var _default = useButtonBase;
-exports.default = _default;
+var _default = exports.default = useButtonBase;

package/dist/cjs/new-button/variants/shared/xcss.js

@@ -4,10 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.contentStyles = void 0;
-exports.getFadingStyles = getFadingStyles;
 exports.getXCSS = getXCSS;
-exports.overlayStyles = exports.iconStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
@@ -149,43 +146,4 @@ function getXCSS(_ref3) {
       transitionDuration: '0s, 0s'
     })
   }));
-}
-var iconStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  // icon size cannot grow and shrink
-  flexGrow: 0,
-  flexShrink: 0,
-  alignSelf: 'center',
-  fontSize: 0,
-  lineHeight: 0,
-  userSelect: 'none'
-});
-exports.iconStyles = iconStyles;
-var contentStyles = (0, _primitives.xcss)({
-  // content can grow and shrink
-  flexGrow: 1,
-  flexShrink: 1,
-  // ellipsis for overflow text
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-exports.contentStyles = contentStyles;
-function getFadingStyles(_ref4) {
-  var hasOverlay = _ref4.hasOverlay;
-  return (0, _primitives.xcss)({
-    opacity: hasOverlay ? 0 : 1,
-    transition: 'opacity 0.3s'
-  });
-}
-var overlayStyles = (0, _primitives.xcss)({
-  position: 'absolute',
-  left: 'space.0',
-  top: 'space.0',
-  right: 'space.0',
-  bottom: 'space.0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
-exports.overlayStyles = overlayStyles;
+}

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

@@ -101,5 +101,4 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
 
 // Tools including enzyme rely on components having a display name
 Button.displayName = 'Button';
-var _default = Button;
-exports.default = _default;
+var _default = exports.default = Button;

package/dist/cjs/old-button/custom-theme-button/custom-theme-button.js

@@ -200,5 +200,4 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
 
 // Tools including enzyme rely on components having a display name
 CustomThemeButton.displayName = 'CustomThemeButton';
-var _default = CustomThemeButton;
-exports.default = _default;
+var _default = exports.default = CustomThemeButton;

package/dist/cjs/old-button/custom-theme-button/theme.js

@@ -98,5 +98,4 @@ var Theme = (0, _components.createTheme)(function (themeProps) {
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = Theme;
-exports.default = _default;
+var _default = exports.default = Theme;

package/dist/cjs/old-button/loading-button.js

@@ -45,5 +45,4 @@ var LoadingButton = /*#__PURE__*/_react.default.forwardRef(function LoadingButto
 
 // Tools including enzyme rely on components having a display name
 LoadingButton.displayName = 'LoadingButton';
-var _default = LoadingButton;
-exports.default = _default;
+var _default = exports.default = LoadingButton;

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

@@ -21,6 +21,7 @@ var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _css = require("./css");
 var _getIfVisuallyHiddenChildren = require("./get-if-visually-hidden-children");
 var _excluded = ["analyticsContext", "appearance", "autoFocus", "buttonCss", "children", "className", "href", "component", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onBlur", "onClick", "onFocus", "onMouseDown", "overlay", "shouldFitContainer", "spacing", "tabIndex", "type", "testId"];
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /** @jsx jsx */
 // eslint-disable-next-line no-duplicate-imports
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -54,7 +55,7 @@ var getChildren = function getChildren(children, childrenStyles) {
     css: childrenStyles
   }, children) : null;
 };
-var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props, ref) {
+var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props, ref) {
   var analyticsContext = props.analyticsContext,
     _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
@@ -117,7 +118,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.10.2",
     analyticsData: analyticsContext
   });
 
@@ -137,7 +138,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
 
   // we are 'disabling' input with a button when there is an overlay
   var hasOverlay = Boolean(overlay);
-  var fadeCss = (0, _react2.css)((0, _css.getFadingCss)({
+  var fadeStyles = (0, _react2.css)((0, _css.getFadingCss)({
     hasOverlay: hasOverlay
   }));
   var isInteractive = !isDisabled && !hasOverlay;
@@ -178,21 +179,20 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
   }, (0, _blockEvents.default)({
     isInteractive: isInteractive
   })), iconBefore ? (0, _react2.jsx)("span", {
-    css: [fadeCss, (0, _css.getIconStyle)({
+    css: [fadeStyles, (0, _css.getIconStyle)({
       spacing: spacing
     }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
   }, iconBefore) : null, !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? (0, _react2.jsx)("span", {
-    css: [fadeCss, (0, _css.getContentStyle)({
+    css: [fadeStyles, (0, _css.getContentStyle)({
       spacing: spacing
     })]
-  }, children) : null, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeCss, (0, _css.getContentStyle)({
+  }, children) : null, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeStyles, (0, _css.getContentStyle)({
     spacing: spacing
   })]), iconAfter ? (0, _react2.jsx)("span", {
-    css: [fadeCss, (0, _css.getIconStyle)({
+    css: [fadeStyles, (0, _css.getIconStyle)({
       spacing: spacing
     }), getSpacingFix(children, iconAfterSpacingFixStyle)]
   }, iconAfter) : null, overlay ? (0, _react2.jsx)("span", {
     css: [_css.overlayCss, spinnerHackCss]
   }, overlay) : null));
-});
-exports.default = _default;
+});

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

@@ -326,5 +326,4 @@ var values = {
     }
   }
 };
-var _default = values;
-exports.default = _default;
+var _default = exports.default = values;

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

@@ -229,7 +229,7 @@ function getFadingCss(_ref6) {
     transition: 'opacity 0.3s'
   });
 }
-var overlayCss = {
+var overlayCss = exports.overlayCss = {
   // stretching to full width / height of button
   // this is important as we need it to still block
   // event if clicking in the button's own padding
@@ -242,5 +242,4 @@ var overlayCss = {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
-};
-exports.overlayCss = overlayCss;
+};

package/dist/cjs/old-button/shared/get-if-visually-hidden-children.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.getIfVisuallyHiddenChildren = void 0;
 var _react = require("react");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-var getIfVisuallyHiddenChildren = function getIfVisuallyHiddenChildren(children) {
+var getIfVisuallyHiddenChildren = exports.getIfVisuallyHiddenChildren = function getIfVisuallyHiddenChildren(children) {
   return children && /*#__PURE__*/(0, _react.isValidElement)(children) && children.type === _visuallyHidden.default;
-};
-exports.getIfVisuallyHiddenChildren = getIfVisuallyHiddenChildren;
+};

package/dist/cjs/utils/appearances.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var appearances = ['default', 'primary', 'link', 'subtle', 'subtle-link', 'warning', 'danger'];
-var _default = appearances;
-exports.default = _default;
+var _default = exports.default = appearances;

package/dist/cjs/utils/spacing.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var spacing = ['default', 'compact', 'none'];
-var _default = spacing;
-exports.default = _default;
+var _default = exports.default = spacing;

package/dist/cjs/utils/variants.js

@@ -21,7 +21,7 @@ var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     href: "#"
   }, props), props.children);
 });
-var variants = [{
+var variants = exports.variants = [{
   name: 'Button',
   Component: _button.default,
   elementType: HTMLButtonElement
@@ -30,6 +30,4 @@ var variants = [{
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement
 }];
-exports.variants = variants;
-var _default = variants;
-exports.default = _default;
+var _default = exports.default = variants;

package/dist/es2019/containers/button-group.js

@@ -4,6 +4,7 @@ import { css, jsx } from '@emotion/react';
 const buttonGroupStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '> *': {
     flex: '1 0 auto'
   }

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

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
-import { Box } from '@atlaskit/primitives';
+import Content from '../shared/content';
 import useButtonBase from '../shared/use-button-base';
-import { contentStyles, getFadingStyles, iconStyles } from '../shared/xcss';
 /**
  * __Use default button base__
  *
@@ -37,23 +36,20 @@ const useDefaultButton = ({
   shouldFitContainer,
   spacing
 }) => {
-  const fadeStyles = getFadingStyles({
-    hasOverlay: Boolean(overlay)
-  });
+  const hasOverlay = Boolean(overlay);
   const baseProps = useButtonBase({
     analyticsContext,
     appearance,
     autoFocus,
     buttonType,
-    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, iconStyles]
-    }, iconBefore), children && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, contentStyles]
-    }, children), iconAfter && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, iconStyles]
+    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      hasOverlay: hasOverlay
+    }, iconBefore), children && /*#__PURE__*/React.createElement(Content, {
+      hasOverlay: hasOverlay
+    }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      hasOverlay: hasOverlay
     }, iconAfter)),
     interactionName,
     isDisabled,

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box } from '@atlaskit/primitives';
+import Content from '../shared/content';
 import useButtonBase from '../shared/use-button-base';
-import { getFadingStyles, iconStyles } from '../shared/xcss';
 /**
  * __Use icon button__
  *
@@ -37,9 +36,7 @@ const useIconButton = ({
   shouldFitContainer,
   spacing
 }) => {
-  const fadeStyles = getFadingStyles({
-    hasOverlay: Boolean(overlay)
-  });
+  const hasOverlay = Boolean(overlay);
   const baseProps = useButtonBase({
     analyticsContext,
     appearance,
@@ -49,9 +46,9 @@ const useIconButton = ({
      * TODO: Have not finished IconButton yet. It also needs a required accessible
      * label - likely implemented using VisuallyHidden
      */
-    children: /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, iconStyles]
+    children: /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      hasOverlay: hasOverlay
     }, icon),
     interactionName,
     isDisabled,

package/dist/es2019/new-button/variants/shared/content.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+const textStyles = xcss({
+  // content can grow and shrink
+  flexGrow: 1,
+  flexShrink: 1,
+  // ellipsis for overflow text
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const iconStyles = xcss({
+  display: 'flex',
+  // icon size cannot grow and shrink
+  flexGrow: 0,
+  flexShrink: 0,
+  alignSelf: 'center',
+  fontSize: 0,
+  lineHeight: 0,
+  userSelect: 'none'
+});
+const commonStyles = xcss({
+  transition: 'opacity 0.3s'
+});
+const fadeStyles = xcss({
+  opacity: 0
+});
+/**
+ * __Content__
+ *
+ * Used for slots within a Button, including icons and text content.
+ */
+const Content = ({
+  children,
+  type = 'text',
+  hasOverlay
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: [commonStyles, ...(type === 'text' ? [textStyles] : [iconStyles]), ...(hasOverlay ? [fadeStyles] : [])]
+  }, children);
+};
+export default Content;

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

@@ -4,12 +4,23 @@ import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 // eslint-disable-next-line no-duplicate-imports
 import InteractionContext from '@atlaskit/interaction-context';
-import { Box } from '@atlaskit/primitives';
+import { Box, xcss } from '@atlaskit/primitives';
 import blockEvents from './block-events';
-import { getXCSS, overlayStyles } from './xcss';
+import { getXCSS } from './xcss';
 
 // Include modified onClick with analytics
 
+const overlayStyles = xcss({
+  position: 'absolute',
+  insetInlineStart: 'space.0',
+  insetBlockStart: 'space.0',
+  insetInlineEnd: 'space.0',
+  insetBlockEnd: 'space.0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+
 /**
  * __Use button base__
  *
@@ -77,7 +88,7 @@ const useButtonBase = ({
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.10.2",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/es2019/new-button/variants/shared/xcss.js

@@ -142,41 +142,4 @@ export function getXCSS({
       transitionDuration: '0s, 0s'
     }
   });
-}
-export const iconStyles = xcss({
-  display: 'flex',
-  // icon size cannot grow and shrink
-  flexGrow: 0,
-  flexShrink: 0,
-  alignSelf: 'center',
-  fontSize: 0,
-  lineHeight: 0,
-  userSelect: 'none'
-});
-export const contentStyles = xcss({
-  // content can grow and shrink
-  flexGrow: 1,
-  flexShrink: 1,
-  // ellipsis for overflow text
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-export function getFadingStyles({
-  hasOverlay
-}) {
-  return xcss({
-    opacity: hasOverlay ? 0 : 1,
-    transition: 'opacity 0.3s'
-  });
-}
-export const overlayStyles = xcss({
-  position: 'absolute',
-  left: 'space.0',
-  top: 'space.0',
-  right: 'space.0',
-  bottom: 'space.0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
+}

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /** @jsx jsx */
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -102,7 +103,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.10.2",
     analyticsData: analyticsContext
   });
 
@@ -122,7 +123,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
 
   // we are 'disabling' input with a button when there is an overlay
   const hasOverlay = Boolean(overlay);
-  const fadeCss = css(getFadingCss({
+  const fadeStyles = css(getFadingCss({
     hasOverlay
   }));
   const isInteractive = !isDisabled && !hasOverlay;
@@ -163,17 +164,17 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, blockEvents({
     isInteractive
   })), iconBefore ? jsx("span", {
-    css: [fadeCss, getIconStyle({
+    css: [fadeStyles, getIconStyle({
       spacing
     }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
   }, iconBefore) : null, !getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? jsx("span", {
-    css: [fadeCss, getContentStyle({
+    css: [fadeStyles, getContentStyle({
       spacing
     })]
-  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeCss, getContentStyle({
+  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeStyles, getContentStyle({
     spacing
   })]), iconAfter ? jsx("span", {
-    css: [fadeCss, getIconStyle({
+    css: [fadeStyles, getIconStyle({
       spacing
     }), getSpacingFix(children, iconAfterSpacingFixStyle)]
   }, iconAfter) : null, overlay ? jsx("span", {

package/dist/esm/containers/button-group.js

@@ -4,6 +4,7 @@ import { css, jsx } from '@emotion/react';
 var buttonGroupStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '> *': {
     flex: '1 0 auto'
   }

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

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
-import { Box } from '@atlaskit/primitives';
+import Content from '../shared/content';
 import useButtonBase from '../shared/use-button-base';
-import { contentStyles, getFadingStyles, iconStyles } from '../shared/xcss';
 /**
  * __Use default button base__
  *
@@ -36,23 +35,20 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing;
-  var fadeStyles = getFadingStyles({
-    hasOverlay: Boolean(overlay)
-  });
+  var hasOverlay = Boolean(overlay);
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: buttonType,
-    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, iconStyles]
-    }, iconBefore), children && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, contentStyles]
-    }, children), iconAfter && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, iconStyles]
+    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      hasOverlay: hasOverlay
+    }, iconBefore), children && /*#__PURE__*/React.createElement(Content, {
+      hasOverlay: hasOverlay
+    }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      hasOverlay: hasOverlay
     }, iconAfter)),
     interactionName: interactionName,
     isDisabled: isDisabled,

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box } from '@atlaskit/primitives';
+import Content from '../shared/content';
 import useButtonBase from '../shared/use-button-base';
-import { getFadingStyles, iconStyles } from '../shared/xcss';
 /**
  * __Use icon button__
  *
@@ -34,9 +33,7 @@ var useIconButton = function useIconButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing;
-  var fadeStyles = getFadingStyles({
-    hasOverlay: Boolean(overlay)
-  });
+  var hasOverlay = Boolean(overlay);
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -46,9 +43,9 @@ var useIconButton = function useIconButton(_ref) {
      * TODO: Have not finished IconButton yet. It also needs a required accessible
      * label - likely implemented using VisuallyHidden
      */
-    children: /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, iconStyles]
+    children: /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      hasOverlay: hasOverlay
     }, icon),
     interactionName: interactionName,
     isDisabled: isDisabled,