@atlaskit/button 16.3.10 → 16.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/button
 
+## 16.4.0
+
+### Minor Changes
+
+- [`9f6369f5505`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f6369f5505) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behaviour change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.3.10
 
 ### Patch Changes

package/dist/cjs/button-group.js

@@ -9,14 +9,14 @@ exports.default = ButtonGroup;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /** @jsx jsx */
-var buttonGroupStyles = (0, _core.css)({
+var buttonGroupStyles = (0, _react2.css)({
   display: 'inline-flex',
   // TODO Delete this comment after verifying spacing token -> previous value `4`
   gap: "var(--ds-scale-050, 4px)",
@@ -28,14 +28,14 @@ var buttonGroupStyles = (0, _core.css)({
 function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
       children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: buttonGroupStyles
-  }, _react.default.Children.map(children, function (child, idx) {
+  }, _react.default.Children.map(_react.default.Children.toArray(children), function (child, idx) {
     if (!child) {
       return null;
     }
 
-    return (0, _core.jsx)(_react.Fragment, {
+    return (0, _react2.jsx)(_react.Fragment, {
       key: idx
     }, appearance ?
     /*#__PURE__*/

package/dist/cjs/entry-points/standard-button.js

@@ -12,6 +12,6 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-require("@emotion/core");
+require("@emotion/react");
 
 var _button = _interopRequireDefault(require("../button"));

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

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -101,7 +101,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.10",
+    packageVersion: "16.4.0",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -119,9 +119,9 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
   }, [isDisabled]); // we are 'disabling' input with a button when there is an overlay
 
   var hasOverlay = Boolean(overlay);
-  var fadeCss = (0, _css.getFadingCss)({
+  var fadeCss = (0, _react2.css)((0, _css.getFadingCss)({
     hasOverlay: hasOverlay
-  });
+  }));
   var isInteractive = !isDisabled && !hasOverlay;
   /**
    * HACK: Spinner needs to have different colours in the "new" tokens design compared to the old design.
@@ -139,7 +139,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     };
   }
 
-  return (0, _core.jsx)(Component, (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
     ref: setRef,
@@ -157,19 +157,19 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     tabIndex: isDisabled ? -1 : tabIndex
   }, (0, _blockEvents.default)({
     isInteractive: isInteractive
-  })), iconBefore ? (0, _core.jsx)("span", {
+  })), iconBefore ? (0, _react2.jsx)("span", {
     css: [fadeCss, (0, _css.getIconStyle)({
       spacing: spacing
     })]
-  }, iconBefore) : null, children ? (0, _core.jsx)("span", {
+  }, iconBefore) : null, children ? (0, _react2.jsx)("span", {
     css: [fadeCss, (0, _css.getContentStyle)({
       spacing: spacing
     })]
-  }, children) : null, iconAfter ? (0, _core.jsx)("span", {
+  }, children) : null, iconAfter ? (0, _react2.jsx)("span", {
     css: [fadeCss, (0, _css.getIconStyle)({
       spacing: spacing
     })]
-  }, iconAfter) : null, overlay ? (0, _core.jsx)("span", {
+  }, iconAfter) : null, overlay ? (0, _react2.jsx)("span", {
     css: [_css.overlayCss, spinnerHackCss]
   }, overlay) : null);
 });

package/dist/cjs/shared/css.js

@@ -13,6 +13,8 @@ exports.overlayCss = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _react = require("@emotion/react");
+
 var _constants = require("@atlaskit/theme/constants");
 
 var _colors = _interopRequireDefault(require("./colors"));
@@ -212,23 +214,23 @@ function getCss(_ref3) {
 
 function getIconStyle(_ref4) {
   var spacing = _ref4.spacing;
-  return {
-    alignSelf: 'center',
+  return (0, _react.css)({
     display: 'flex',
+    margin: spacing === 'none' ? 0 : innerMargin.icon,
     // icon size cannot grow and shrink
     flexGrow: 0,
     flexShrink: 0,
-    lineHeight: 0,
+    alignSelf: 'center',
     fontSize: 0,
-    userSelect: 'none',
-    margin: spacing === 'none' ? 0 : innerMargin.icon
-  };
+    lineHeight: 0,
+    userSelect: 'none'
+  });
 } // inline-flex child
 
 
 function getContentStyle(_ref5) {
   var spacing = _ref5.spacing;
-  return {
+  return (0, _react.css)({
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,
@@ -237,15 +239,15 @@ function getContentStyle(_ref5) {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
-  };
+  });
 }
 
 function getFadingCss(_ref6) {
   var hasOverlay = _ref6.hasOverlay;
-  return {
-    transition: 'opacity 0.3s',
-    opacity: hasOverlay ? 0 : 1
-  };
+  return (0, _react.css)({
+    opacity: hasOverlay ? 0 : 1,
+    transition: 'opacity 0.3s'
+  });
 }
 
 var overlayCss = {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.3.10",
+	"version": "16.4.0",
 	"sideEffects": false
 }

package/dist/es2019/button-group.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 const buttonGroupStyles = css({
   display: 'inline-flex',
   // TODO Delete this comment after verifying spacing token -> previous value `4`
@@ -15,7 +15,7 @@ export default function ButtonGroup({
 }) {
   return jsx("div", {
     css: buttonGroupStyles
-  }, React.Children.map(children, (child, idx) => {
+  }, React.Children.map(React.Children.toArray(children), (child, idx) => {
     if (!child) {
       return null;
     }

package/dist/es2019/entry-points/standard-button.js

@@ -2,5 +2,5 @@
  * Must import '@emotion/core' in order to resolve type error
  * https://product-fabric.atlassian.net/browse/DSP-3222
  */
-import '@emotion/core';
+import '@emotion/react';
 export { default } from '../button';

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
@@ -68,7 +68,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.10",
+    packageVersion: "16.4.0",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -86,9 +86,9 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, [isDisabled]); // we are 'disabling' input with a button when there is an overlay
 
   const hasOverlay = Boolean(overlay);
-  const fadeCss = getFadingCss({
+  const fadeCss = css(getFadingCss({
     hasOverlay
-  });
+  }));
   const isInteractive = !isDisabled && !hasOverlay;
   /**
    * HACK: Spinner needs to have different colours in the "new" tokens design compared to the old design.

package/dist/es2019/shared/css.js

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import { borderRadius as getBorderRadius, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 const borderRadius = getBorderRadius();
@@ -198,23 +199,23 @@ export function getCss({
 export function getIconStyle({
   spacing
 }) {
-  return {
-    alignSelf: 'center',
+  return css({
     display: 'flex',
+    margin: spacing === 'none' ? 0 : innerMargin.icon,
     // icon size cannot grow and shrink
     flexGrow: 0,
     flexShrink: 0,
-    lineHeight: 0,
+    alignSelf: 'center',
     fontSize: 0,
-    userSelect: 'none',
-    margin: spacing === 'none' ? 0 : innerMargin.icon
-  };
+    lineHeight: 0,
+    userSelect: 'none'
+  });
 } // inline-flex child
 
 export function getContentStyle({
   spacing
 }) {
-  return {
+  return css({
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,
@@ -223,15 +224,15 @@ export function getContentStyle({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
-  };
+  });
 }
 export function getFadingCss({
   hasOverlay
 }) {
-  return {
-    transition: 'opacity 0.3s',
-    opacity: hasOverlay ? 0 : 1
-  };
+  return css({
+    opacity: hasOverlay ? 0 : 1,
+    transition: 'opacity 0.3s'
+  });
 }
 export const overlayCss = {
   // stretching to full width / height of button

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.3.10",
+	"version": "16.4.0",
 	"sideEffects": false
 }

package/dist/esm/button-group.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 var buttonGroupStyles = css({
   display: 'inline-flex',
   // TODO Delete this comment after verifying spacing token -> previous value `4`
@@ -14,7 +14,7 @@ export default function ButtonGroup(_ref) {
       children = _ref.children;
   return jsx("div", {
     css: buttonGroupStyles
-  }, React.Children.map(children, function (child, idx) {
+  }, React.Children.map(React.Children.toArray(children), function (child, idx) {
     if (!child) {
       return null;
     }

package/dist/esm/entry-points/standard-button.js

@@ -2,5 +2,5 @@
  * Must import '@emotion/core' in order to resolve type error
  * https://product-fabric.atlassian.net/browse/DSP-3222
  */
-import '@emotion/core';
+import '@emotion/react';
 export { default } from '../button';

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

@@ -4,7 +4,7 @@ var _excluded = ["appearance", "buttonCss", "spacing", "autoFocus", "isDisabled"
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
@@ -77,7 +77,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.3.10",
+    packageVersion: "16.4.0",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -95,9 +95,9 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, [isDisabled]); // we are 'disabling' input with a button when there is an overlay
 
   var hasOverlay = Boolean(overlay);
-  var fadeCss = getFadingCss({
+  var fadeCss = css(getFadingCss({
     hasOverlay: hasOverlay
-  });
+  }));
   var isInteractive = !isDisabled && !hasOverlay;
   /**
    * HACK: Spinner needs to have different colours in the "new" tokens design compared to the old design.

package/dist/esm/shared/css.js

@@ -4,6 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+import { css } from '@emotion/react';
 import { borderRadius as getBorderRadius, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 var borderRadius = getBorderRadius();
@@ -196,22 +197,22 @@ export function getCss(_ref3) {
 
 export function getIconStyle(_ref4) {
   var spacing = _ref4.spacing;
-  return {
-    alignSelf: 'center',
+  return css({
     display: 'flex',
+    margin: spacing === 'none' ? 0 : innerMargin.icon,
     // icon size cannot grow and shrink
     flexGrow: 0,
     flexShrink: 0,
-    lineHeight: 0,
+    alignSelf: 'center',
     fontSize: 0,
-    userSelect: 'none',
-    margin: spacing === 'none' ? 0 : innerMargin.icon
-  };
+    lineHeight: 0,
+    userSelect: 'none'
+  });
 } // inline-flex child
 
 export function getContentStyle(_ref5) {
   var spacing = _ref5.spacing;
-  return {
+  return css({
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,
@@ -220,14 +221,14 @@ export function getContentStyle(_ref5) {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
-  };
+  });
 }
 export function getFadingCss(_ref6) {
   var hasOverlay = _ref6.hasOverlay;
-  return {
-    transition: 'opacity 0.3s',
-    opacity: hasOverlay ? 0 : 1
-  };
+  return css({
+    opacity: hasOverlay ? 0 : 1,
+    transition: 'opacity 0.3s'
+  });
 }
 export var overlayCss = {
   // stretching to full width / height of button

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.3.10",
+	"version": "16.4.0",
 	"sideEffects": false
 }

package/dist/types/button-group.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { Appearance } from './types';
 export declare type ButtonGroupProps = {
     /**
@@ -8,4 +9,4 @@ export declare type ButtonGroupProps = {
     appearance?: Appearance;
     children?: React.ReactNode;
 };
-export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): JSX.Element;
+export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): jsx.JSX.Element;

package/dist/types/custom-theme-button/custom-theme-button-types.d.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { ThemeModes } from '@atlaskit/theme/types';
 import { BaseProps } from '../types';
 export declare type ThemeTokens = {

package/dist/types/custom-theme-button/theme.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { InteractionState, ThemeProps, ThemeTokens } from './custom-theme-button-types';
 export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
 export declare function getSpecifiers(styles: CSSObject): CSSObject;

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

@@ -2,6 +2,6 @@
  * Must import '@emotion/core' in order to resolve type error
  * https://product-fabric.atlassian.net/browse/DSP-3222
  */
-import '@emotion/core';
+import '@emotion/react';
 export { default } from '../button';
 export type { ButtonProps } from '../button';

package/dist/types/shared/block-events.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export default function blockEvents({ isInteractive, }: {
     isInteractive: boolean;
 }): React.DOMAttributes<HTMLElement>;

package/dist/types/shared/button-base.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.AllHTMLAttributes<HTMLElement>, "disabled">, "data-testid" | "data-has-overlay"> & {
     'data-testid'?: undefined;
     'data-has-overlay'?: undefined;

package/dist/types/shared/css.d.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance, Spacing } from '../types';
 export declare type GetCssArgs = {
@@ -12,11 +12,11 @@ export declare type GetCssArgs = {
 export declare function getCss({ appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
 export declare function getIconStyle({ spacing }: {
     spacing: Spacing;
-}): CSSObject;
+}): import("@emotion/react").SerializedStyles;
 export declare function getContentStyle({ spacing }: {
     spacing: Spacing;
-}): CSSObject;
-export declare function getFadingCss({ hasOverlay, }: {
+}): import("@emotion/react").SerializedStyles;
+export declare function getFadingCss({ hasOverlay }: {
     hasOverlay: boolean;
-}): CSSObject;
+}): import("@emotion/react").SerializedStyles;
 export declare const overlayCss: CSSObject;

package/dist/types-ts4.0/button-group.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { Appearance } from './types';
 export declare type ButtonGroupProps = {
     /**
@@ -8,4 +9,4 @@ export declare type ButtonGroupProps = {
     appearance?: Appearance;
     children?: React.ReactNode;
 };
-export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): JSX.Element;
+export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): jsx.JSX.Element;

package/dist/types-ts4.0/custom-theme-button/custom-theme-button-types.d.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { ThemeModes } from '@atlaskit/theme/types';
 import { BaseProps } from '../types';
 export declare type ThemeTokens = {

package/dist/types-ts4.0/custom-theme-button/theme.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { InteractionState, ThemeProps, ThemeTokens } from './custom-theme-button-types';
 export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
 export declare function getSpecifiers(styles: CSSObject): CSSObject;

package/dist/types-ts4.0/entry-points/standard-button.d.ts

@@ -2,6 +2,6 @@
  * Must import '@emotion/core' in order to resolve type error
  * https://product-fabric.atlassian.net/browse/DSP-3222
  */
-import '@emotion/core';
+import '@emotion/react';
 export { default } from '../button';
 export type { ButtonProps } from '../button';

package/dist/types-ts4.0/shared/block-events.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export default function blockEvents({ isInteractive, }: {
     isInteractive: boolean;
 }): React.DOMAttributes<HTMLElement>;

package/dist/types-ts4.0/shared/button-base.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.AllHTMLAttributes<HTMLElement>, "disabled">, "data-testid" | "data-has-overlay"> & {
     'data-testid'?: undefined;
     'data-has-overlay'?: undefined;

package/dist/types-ts4.0/shared/css.d.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance, Spacing } from '../types';
 export declare type GetCssArgs = {
@@ -12,11 +12,11 @@ export declare type GetCssArgs = {
 export declare function getCss({ appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon, }: GetCssArgs): CSSObject;
 export declare function getIconStyle({ spacing }: {
     spacing: Spacing;
-}): CSSObject;
+}): import("@emotion/react").SerializedStyles;
 export declare function getContentStyle({ spacing }: {
     spacing: Spacing;
-}): CSSObject;
-export declare function getFadingCss({ hasOverlay, }: {
+}): import("@emotion/react").SerializedStyles;
+export declare function getFadingCss({ hasOverlay }: {
     hasOverlay: boolean;
-}): CSSObject;
+}): import("@emotion/react").SerializedStyles;
 export declare const overlayCss: CSSObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.3.10",
+  "version": "16.4.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,11 +42,11 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/spinner": "^15.1.0",
+    "@atlaskit/spinner": "^15.2.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/button".
+## API Report File for "@atlaskit/button"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -8,7 +12,8 @@
 /// <reference types="react" />
 
 import { ComponentType } from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { ThemeModes } from '@atlaskit/theme/types';
@@ -16,7 +21,8 @@ import { ThemeModes as ThemeModes_2 } from '@atlaskit/theme';
 import { ThemeProp } from '@atlaskit/theme/components';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
-export declare type Appearance =
+// @public (undocumented)
+export type Appearance =
   | 'default'
   | 'danger'
   | 'link'
@@ -25,92 +31,37 @@ export declare type Appearance =
   | 'subtle-link'
   | 'warning';
 
-export declare type BaseOwnProps = {
-  /**
-   * The base styling to apply to the button
-   */
+// @public (undocumented)
+export type BaseOwnProps = {
   appearance?: Appearance;
-  /**
-   * Set the button to autofocus on mount
-   */
   autoFocus?: boolean;
-  /**
-   * Add a classname to the button
-   */
   className?: string;
-  /**
-   * Used to 'overlay' something over a button. This is commonly used to display a loading spinner
-   */
   overlay?: React_2.ReactNode;
-  /**
-   * Provides a url for buttons being used as a link
-   */
   href?: string;
-  /**
-   * Places an icon within the button, after the button's text
-   */
   iconAfter?: React_2.ReactChild;
-  /**
-   * Places an icon within the button, before the button's text
-   */
   iconBefore?: React_2.ReactChild;
-  /**
-   * Set if the button is disabled
-   */
   isDisabled?: boolean;
-  /**
-   * Change the style to indicate the button is selected
-   */
   isSelected?: boolean;
-  /**
-   * Handler to be called on blur
-   */
   onBlur?: React_2.FocusEventHandler<HTMLElement>;
-  /**
-   * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
-   */
   onClick?: (
     e: React_2.MouseEvent<HTMLElement>,
     analyticsEvent: UIAnalyticsEvent,
   ) => void;
-  /**
-   * Handler to be called on focus
-   */
   onFocus?: React_2.FocusEventHandler<HTMLElement>;
-  /**
-   * Set the amount of padding in the button
-   */
   spacing?: Spacing;
-  /**
-   * Pass target down to a link within the button component, if a href is provided
-   */
   target?: React_2.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-  /**
-   * Pass type down to a button
-   */
   type?: React_2.ButtonHTMLAttributes<HTMLButtonElement>['type'];
-  /**
-   * Option to fit button width to its parent width
-   */
   shouldFitContainer?: boolean;
-  /**
-   * Text content to be rendered in the button
-   */
   children?: React_2.ReactNode;
-  /**
-   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-   */
   testId?: string;
   component?:
     | React_2.ComponentType<React_2.AllHTMLAttributes<HTMLElement>>
     | React_2.ElementType;
-  /**
-   * Additional information to be included in the `context` of analytics events that come from button
-   */
   analyticsContext?: Record<string, any>;
 };
 
-export declare type BaseProps = Combine<
+// @public (undocumented)
+export type BaseProps = Combine<
   Combine<
     Omit<React_2.AllHTMLAttributes<HTMLElement>, 'disabled'>,
     {
@@ -121,66 +72,52 @@ export declare type BaseProps = Combine<
   BaseOwnProps
 >;
 
-/**
- * __Button__
- *
- * A button triggers an event or action. They let users know what will happen next.
- *
- * - [Examples](https://atlassian.design/components/button/examples)
- * - [Code](https://atlassian.design/components/button/code)
- * - [Usage](https://atlassian.design/components/button/usage)
- */
-declare const Button: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
+// @public
+const Button: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
   ButtonProps & React_2.RefAttributes<HTMLElement>
 >>;
 export default Button;
 
-export declare function ButtonGroup({
+// @public (undocumented)
+export function ButtonGroup({
   appearance,
   children,
-}: ButtonGroupProps): JSX.Element;
+}: ButtonGroupProps): jsx.JSX.Element;
 
-declare type ButtonGroupProps = {
-  /**
-   * The appearance to apply to all buttons.
-   */
+// @public (undocumented)
+type ButtonGroupProps = {
   appearance?: Appearance;
   children?: React_2.ReactNode;
 };
 
-export declare interface ButtonProps extends BaseProps {}
+// @public (undocumented)
+export interface ButtonProps extends BaseProps {}
 
-declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+// @public (undocumented)
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
 
-/**
- * __Custom theme button__
- *
- * A custom theme button. Avoid using this component. It exists for those already using custom theming, which is hard to use and has performance issues.
- *
- * - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
- */
-export declare const CustomThemeButton: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
+// @public
+export const CustomThemeButton: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
   Omit<BaseProps, 'overlay'> &
     CustomThemeButtonOwnProps &
     React_2.RefAttributes<HTMLElement>
 >>;
 
-export declare type CustomThemeButtonOwnProps = {
+// @public (undocumented)
+export type CustomThemeButtonOwnProps = {
   isLoading?: boolean;
-  /**
-   * Slow + discouraged custom theme API
-   * See custom theme guide for usage details
-   */
   theme?: (
     current: (props: ThemeProps) => ThemeTokens,
     props: ThemeProps,
   ) => ThemeTokens;
 };
 
-export declare type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> &
+// @public (undocumented)
+export type CustomThemeButtonProps = Omit<BaseProps, 'overlay'> &
   CustomThemeButtonOwnProps;
 
-export declare type InteractionState =
+// @public (undocumented)
+export type InteractionState =
   | 'disabled'
   | 'focusSelected'
   | 'selected'
@@ -189,29 +126,27 @@ export declare type InteractionState =
   | 'focus'
   | 'default';
 
-/**
- * __Loading button__
- *
- * A small wrapper around Button that allows you to show an @atlaskit/spinner as an overlay on the button when you set an isLoading prop to true.
- *
- * - [Examples](https://atlassian.design/components/button/examples#loading-button)
- */
-export declare const LoadingButton: React_2.ForwardRefExoticComponent<
+// @public
+export const LoadingButton: React_2.ForwardRefExoticComponent<
   Omit<BaseProps, 'overlay'> &
     LoadingButtonOwnProps &
     React_2.RefAttributes<HTMLElement>
 >;
 
-export declare type LoadingButtonOwnProps = {
+// @public (undocumented)
+export type LoadingButtonOwnProps = {
   isLoading?: boolean;
 };
 
-export declare type LoadingButtonProps = Omit<BaseProps, 'overlay'> &
+// @public (undocumented)
+export type LoadingButtonProps = Omit<BaseProps, 'overlay'> &
   LoadingButtonOwnProps;
 
-export declare type Spacing = 'compact' | 'default' | 'none';
+// @public (undocumented)
+export type Spacing = 'compact' | 'default' | 'none';
 
-export declare const Theme: {
+// @public (undocumented)
+export const Theme: {
   Consumer: ComponentType<
     {
       children: (tokens: ThemeTokens) => ReactNode;
@@ -228,16 +163,18 @@ export declare const Theme: {
   useTheme: (props: ThemeProps) => ThemeTokens;
 };
 
-export declare type ThemeProps = Partial<CustomThemeButtonProps> & {
+// @public (undocumented)
+export type ThemeProps = Partial<CustomThemeButtonProps> & {
   state: InteractionState;
   iconIsOnlyChild?: boolean;
   mode?: ThemeModes;
 };
 
-export declare type ThemeTokens = {
+// @public (undocumented)
+export type ThemeTokens = {
   buttonStyles: CSSObject;
   spinnerStyles: CSSObject;
 };
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```