@atlaskit/empty-state 7.12.3 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/empty-state
 
+## 8.0.0
+
+### Major Changes
+
+- [#162676](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162676)
+  [`6dd54dec02a69`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6dd54dec02a69) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/empty-state`, you will need to ensure that
+  your bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in
+  support for `.css` imports, so you may not need to do anything. If you are using a different
+  bundler, please refer to the documentation for that bundler to understand how to handle `.css`
+  imports.
+
+  For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 7.12.3
 
 ### Patch Changes

package/dist/cjs/empty-state.js

@@ -11,6 +11,11 @@ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _styled = require("./styled");
+/**
+ * TODO - https://product-fabric.atlassian.net/browse/DSP-21565
+ * Will be moved to @atlaskit/primitives/compiled, VRs will be updated.
+ */
+
 /**
  * __Empty state__
  *

package/dist/cjs/styled/actions-container.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._bozg1jfw{padding-inline-start:var(--ds-space-500,40px)}

package/dist/cjs/styled/actions-container.js

@@ -1,24 +1,17 @@
+/* actions-container.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var actionsStyles = (0, _react.css)({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginBlockEnd: "var(--ds-space-100, 8px)",
-  paddingInlineStart: "var(--ds-space-500, 40px)"
-});
+require("./actions-container.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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 && {}.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 actionsStyles = null;
 
 /**
  * __Actions container__
@@ -29,8 +22,8 @@ var actionsStyles = (0, _react.css)({
  */
 var ActionsContainer = function ActionsContainer(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)("div", {
-    css: actionsStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _1bah1h6o _6rthu2gc _bozg1jfw"])
   }, children);
 };
 var _default = exports.default = ActionsContainer;

package/dist/cjs/styled/container.compiled.css

@@ -0,0 +1,4 @@
+._18s81efg{margin:var(--_129ypg0)}
+._p12f1pl1{max-width:29pc}
+._p12fko4j{max-width:19pc}
+._y3gn1h6o{text-align:center}

package/dist/cjs/styled/container.js

@@ -1,39 +1,20 @@
+/* container.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-var gridSize = (0, _constants.gridSize)();
-var verticalMarginSize = "var(--ds-space-600, 48px)";
-var columnWidth = gridSize * 8;
-var gutter = gridSize * 2;
-var containerStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  margin: "".concat(verticalMarginSize, " auto"),
-  textAlign: 'center'
-});
-
+require("./container.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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 && {}.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 containerStyles = null;
 /* Use max-width so the component can shrink on smaller viewports. */
-var wideContainerStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: "".concat(columnWidth * 6 + gutter * 5, "px")
-});
-var narrowContainerStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: "".concat(columnWidth * 4 + gutter * 3, "px")
-});
+var wideContainerStyles = null;
+var narrowContainerStyles = null;
 /**
  * __Container__
  *
@@ -45,9 +26,12 @@ var Container = function Container(_ref) {
   var children = _ref.children,
     width = _ref.width,
     testId = _ref.testId;
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
+    className: (0, _runtime.ax)(["_18s81efg _y3gn1h6o", width === 'narrow' ? "_p12fko4j" : "_p12f1pl1"]),
+    style: {
+      "--_129ypg0": (0, _runtime.ix)("var(--ds-space-600, 48px)".concat(" auto"))
+    }
   }, children);
 };
 var _default = exports.default = Container;

package/dist/cjs/styled/description.compiled.css

@@ -0,0 +1,3 @@
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._6rth1ejb{margin-block-end:var(--ds-space-300,24px)}
+._syaz1o8f{color:var(--_ggxzyp)}

package/dist/cjs/styled/description.js

@@ -1,23 +1,18 @@
+/* description.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./description.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _colors = require("@atlaskit/theme/colors");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var descriptionStyles = (0, _react.css)({
-  color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  marginBlockEnd: "var(--ds-space-300, 24px)",
-  marginBlockStart: "var(--ds-space-0, 0px)"
-});
+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 && {}.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 descriptionStyles = null;
 
 /**
  * __Description__
@@ -28,8 +23,11 @@ var descriptionStyles = (0, _react.css)({
  */
 var Description = function Description(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)("p", {
-    css: descriptionStyles
+  return /*#__PURE__*/React.createElement("p", {
+    className: (0, _runtime.ax)(["_syaz1o8f _6rth1ejb _1pfhze3t"]),
+    style: {
+      "--_ggxzyp": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N800, ")"))
+    }
   }, children);
 };
 var _default = exports.default = Description;

package/dist/cjs/styled/header.compiled.css

@@ -0,0 +1,8 @@
+._1dyzvkfx{letter-spacing:-.008em}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1wyb6pmy{font-size:var(--_1tbkb5d)}
+._6rthpxbi{margin-block-end:var(--ds-space-200,1pc)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vwz4cjiy{line-height:1.2}
+._zg8l1kw7{font-style:inherit}

package/dist/cjs/styled/header.js

@@ -1,25 +1,17 @@
+/* header.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
-var _typography = require("@atlaskit/theme/typography");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
-var headerStyles = (0, _react.css)([
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-(0, _typography.h600)(), {
-  marginTop: "var(--ds-space-0, 0px)",
-  marginBottom: "var(--ds-space-200, 16px)"
-}]);
+require("./header.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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 && {}.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 headerStyles = null;
 
 /**
  * __Header__
@@ -33,8 +25,11 @@ var EmptyStateHeader = function EmptyStateHeader(_ref) {
     _ref$level = _ref.level,
     level = _ref$level === void 0 ? 4 : _ref$level;
   var Tag = "h".concat(level > 0 && level < 7 ? level : level > 6 ? 6 : 4);
-  return (0, _react.jsx)(Tag, {
-    css: headerStyles
+  return /*#__PURE__*/React.createElement(Tag, {
+    className: (0, _runtime.ax)(["_syaz1fxt _1wyb6pmy _zg8l1kw7 _k48p1wq8 _1dyzvkfx _vwz4cjiy _6rthpxbi _1pfhze3t"]),
+    style: {
+      "--_1tbkb5d": (0, _runtime.ix)("".concat(20 / 14, "em"))
+    }
   }, children);
 };
 var _default = exports.default = EmptyStateHeader;

package/dist/cjs/styled/image.compiled.css

@@ -0,0 +1,4 @@
+._18s81t55{margin:var(--_a0hk7v)}
+._1e0c1ule{display:block}
+._c71l649k{max-height:var(--_zsxb2b)}
+._p12f163m{max-width:var(--_11x3y0)}

package/dist/cjs/styled/image.js

@@ -1,28 +1,23 @@
+/* image.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./image.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+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 && {}.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 CSS_VAR_MAX_WIDTH = '--max-width';
 var CSS_VAR_MAX_HEIGHT = '--max-height';
-var imageStyles = (0, _react.css)({
-  display: 'block',
-  maxWidth: "var(".concat(CSS_VAR_MAX_WIDTH, ")"),
-  maxHeight: "var(".concat(CSS_VAR_MAX_HEIGHT, ")"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  margin: "0 auto ".concat("var(--ds-space-300, 24px)")
-});
+var imageStyles = null;
 
 /**
  * __Image__
@@ -32,7 +27,7 @@ var imageStyles = (0, _react.css)({
  * @internal
  */
 var Image = function Image(_ref) {
-  var _ref2;
+  var _objectSpread2;
   var maxHeight = _ref.maxHeight,
     maxWidth = _ref.maxWidth,
     _ref$height = _ref.height,
@@ -40,15 +35,18 @@ var Image = function Image(_ref) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'auto' : _ref$width,
     src = _ref.src;
-  return (0, _react.jsx)("img", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), (0, _defineProperty2.default)(_ref2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _ref2),
+  return /*#__PURE__*/React.createElement("img", {
     width: width,
     height: height,
     alt: "",
     role: "presentation",
-    css: imageStyles,
-    src: src
+    src: src,
+    className: (0, _runtime.ax)(["_1e0c1ule _p12f163m _c71l649k _18s81t55"]),
+    style: _objectSpread(_objectSpread({}, (_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), (0, _defineProperty2.default)(_objectSpread2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _objectSpread2)), {}, {
+      "--_11x3y0": (0, _runtime.ix)("var(".concat(CSS_VAR_MAX_WIDTH, ")")),
+      "--_zsxb2b": (0, _runtime.ix)("var(".concat(CSS_VAR_MAX_HEIGHT, ")")),
+      "--_a0hk7v": (0, _runtime.ix)("0 auto ".concat("var(--ds-space-300, 24px)"))
+    })
   });
 };
 var _default = exports.default = Image;

package/dist/cjs/styled/spinner-container.compiled.css

@@ -0,0 +1,2 @@
+._1bsb1ejb{width:var(--ds-space-300,24px)}
+._ahbqpxbi{margin-inline-start:var(--ds-space-200,1pc)}

package/dist/cjs/styled/spinner-container.js

@@ -1,21 +1,17 @@
+/* spinner-container.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var spinnerContainerStyles = (0, _react.css)({
-  width: "var(--ds-space-300, 24px)",
-  marginInlineStart: "var(--ds-space-200, 16px)"
-});
+require("./spinner-container.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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 && {}.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 spinnerContainerStyles = null;
 
 /**
  * __Spinner container__
@@ -26,8 +22,8 @@ var spinnerContainerStyles = (0, _react.css)({
  */
 var SpinnerContainer = function SpinnerContainer(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)("div", {
-    css: spinnerContainerStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1bsb1ejb _ahbqpxbi"])
   }, children);
 };
 var _default = exports.default = SpinnerContainer;

package/dist/es2019/empty-state.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Heading from '@atlaskit/heading';
+/**
+ * TODO - https://product-fabric.atlassian.net/browse/DSP-21565
+ * Will be moved to @atlaskit/primitives/compiled, VRs will be updated.
+ */
 import { Box, Text } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import { ActionsContainer, Container, Image as HeaderImage, SpinnerContainer } from './styled';

package/dist/es2019/styled/actions-container.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._bozg1jfw{padding-inline-start:var(--ds-space-500,40px)}

package/dist/es2019/styled/actions-container.js

@@ -1,17 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-const actionsStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginBlockEnd: "var(--ds-space-100, 8px)",
-  paddingInlineStart: "var(--ds-space-500, 40px)"
-});
+/* actions-container.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./actions-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const actionsStyles = null;
 
 /**
  * __Actions container__
@@ -22,7 +13,7 @@ const actionsStyles = css({
  */
 const ActionsContainer = ({
   children
-}) => jsx("div", {
-  css: actionsStyles
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1txw _4cvr1h6o _1bah1h6o _6rthu2gc _bozg1jfw"])
 }, children);
 export default ActionsContainer;

package/dist/es2019/styled/container.compiled.css

@@ -0,0 +1,4 @@
+._18s81h9n{margin:var(--ds-space-600,3pc) auto}
+._p12f1pl1{max-width:29pc}
+._p12fko4j{max-width:19pc}
+._y3gn1h6o{text-align:center}

package/dist/es2019/styled/container.js

@@ -1,32 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-const gridSize = getGridSize();
-const verticalMarginSize = "var(--ds-space-600, 48px)";
-const columnWidth = gridSize * 8;
-const gutter = gridSize * 2;
-const containerStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  margin: `${verticalMarginSize} auto`,
-  textAlign: 'center'
-});
-
+/* container.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const containerStyles = null;
 /* Use max-width so the component can shrink on smaller viewports. */
-const wideContainerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: `${columnWidth * 6 + gutter * 5}px`
-});
-const narrowContainerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: `${columnWidth * 4 + gutter * 3}px`
-});
+const wideContainerStyles = null;
+const narrowContainerStyles = null;
 /**
  * __Container__
  *
@@ -38,8 +17,8 @@ const Container = ({
   children,
   width,
   testId
-}) => jsx("div", {
+}) => /*#__PURE__*/React.createElement("div", {
   "data-testid": testId,
-  css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
+  className: ax(["_18s81h9n _y3gn1h6o", width === 'narrow' ? "_p12fko4j" : "_p12f1pl1"])
 }, children);
 export default Container;

package/dist/es2019/styled/description.compiled.css

@@ -0,0 +1,3 @@
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._6rth1ejb{margin-block-end:var(--ds-space-300,24px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/es2019/styled/description.js

@@ -1,16 +1,9 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* description.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./description.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { N800 } from '@atlaskit/theme/colors';
-const descriptionStyles = css({
-  color: `var(--ds-text, ${N800})`,
-  marginBlockEnd: "var(--ds-space-300, 24px)",
-  marginBlockStart: "var(--ds-space-0, 0px)"
-});
+const descriptionStyles = null;
 
 /**
  * __Description__
@@ -21,7 +14,7 @@ const descriptionStyles = css({
  */
 const Description = ({
   children
-}) => jsx("p", {
-  css: descriptionStyles
+}) => /*#__PURE__*/React.createElement("p", {
+  className: ax(["_syaz1fxt _6rth1ejb _1pfhze3t"])
 }, children);
 export default Description;

package/dist/es2019/styled/header.compiled.css

@@ -0,0 +1,8 @@
+._1dyzvkfx{letter-spacing:-.008em}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1wyb1yan{font-size:1.4285714285714286em}
+._6rthpxbi{margin-block-end:var(--ds-space-200,1pc)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vwz4cjiy{line-height:1.2}
+._zg8l1kw7{font-style:inherit}

package/dist/es2019/styled/header.js

@@ -1,18 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { h600 } from '@atlaskit/theme/typography';
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
-const headerStyles = css([
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-h600(), {
-  marginTop: "var(--ds-space-0, 0px)",
-  marginBottom: "var(--ds-space-200, 16px)"
-}]);
+/* header.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./header.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const headerStyles = null;
 
 /**
  * __Header__
@@ -26,8 +16,8 @@ const EmptyStateHeader = ({
   level = 4
 }) => {
   const Tag = `h${level > 0 && level < 7 ? level : level > 6 ? 6 : 4}`;
-  return jsx(Tag, {
-    css: headerStyles
+  return /*#__PURE__*/React.createElement(Tag, {
+    className: ax(["_syaz1fxt _1wyb1yan _zg8l1kw7 _k48p1wq8 _1dyzvkfx _vwz4cjiy _6rthpxbi _1pfhze3t"])
   }, children);
 };
 export default EmptyStateHeader;

package/dist/es2019/styled/image.compiled.css

@@ -0,0 +1,4 @@
+._18s81ixx{margin:0 auto var(--ds-space-300,24px)}
+._1e0c1ule{display:block}
+._c71l8wry{max-height:var(--max-height)}
+._p12fnzqo{max-width:var(--max-width)}

package/dist/es2019/styled/image.js

@@ -1,19 +1,10 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* image.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./image.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 const CSS_VAR_MAX_WIDTH = '--max-width';
 const CSS_VAR_MAX_HEIGHT = '--max-height';
-const imageStyles = css({
-  display: 'block',
-  maxWidth: `var(${CSS_VAR_MAX_WIDTH})`,
-  maxHeight: `var(${CSS_VAR_MAX_HEIGHT})`,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  margin: `0 auto ${"var(--ds-space-300, 24px)"}`
-});
+const imageStyles = null;
 
 /**
  * __Image__
@@ -28,7 +19,7 @@ const Image = ({
   height = 'auto',
   width = 'auto',
   src
-}) => jsx("img", {
+}) => /*#__PURE__*/React.createElement("img", {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   style: {
     [CSS_VAR_MAX_WIDTH]: `${maxWidth}px`,
@@ -38,7 +29,7 @@ const Image = ({
   height: height,
   alt: "",
   role: "presentation",
-  css: imageStyles,
-  src: src
+  src: src,
+  className: ax(["_1e0c1ule _p12fnzqo _c71l8wry _18s81ixx"])
 });
 export default Image;

package/dist/es2019/styled/spinner-container.compiled.css

@@ -0,0 +1,2 @@
+._1bsb1ejb{width:var(--ds-space-300,24px)}
+._ahbqpxbi{margin-inline-start:var(--ds-space-200,1pc)}

package/dist/es2019/styled/spinner-container.js

@@ -1,14 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-const spinnerContainerStyles = css({
-  width: "var(--ds-space-300, 24px)",
-  marginInlineStart: "var(--ds-space-200, 16px)"
-});
+/* spinner-container.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./spinner-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const spinnerContainerStyles = null;
 
 /**
  * __Spinner container__
@@ -19,7 +13,7 @@ const spinnerContainerStyles = css({
  */
 const SpinnerContainer = ({
   children
-}) => jsx("div", {
-  css: spinnerContainerStyles
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb1ejb _ahbqpxbi"])
 }, children);
 export default SpinnerContainer;

package/dist/esm/empty-state.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Heading from '@atlaskit/heading';
+/**
+ * TODO - https://product-fabric.atlassian.net/browse/DSP-21565
+ * Will be moved to @atlaskit/primitives/compiled, VRs will be updated.
+ */
 import { Box, Text } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import { ActionsContainer, Container, Image as HeaderImage, SpinnerContainer } from './styled';

package/dist/esm/styled/actions-container.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._bozg1jfw{padding-inline-start:var(--ds-space-500,40px)}

package/dist/esm/styled/actions-container.js

@@ -1,17 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-var actionsStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginBlockEnd: "var(--ds-space-100, 8px)",
-  paddingInlineStart: "var(--ds-space-500, 40px)"
-});
+/* actions-container.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./actions-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var actionsStyles = null;
 
 /**
  * __Actions container__
@@ -22,8 +13,8 @@ var actionsStyles = css({
  */
 var ActionsContainer = function ActionsContainer(_ref) {
   var children = _ref.children;
-  return jsx("div", {
-    css: actionsStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _4cvr1h6o _1bah1h6o _6rthu2gc _bozg1jfw"])
   }, children);
 };
 export default ActionsContainer;

package/dist/esm/styled/container.compiled.css

@@ -0,0 +1,4 @@
+._18s81efg{margin:var(--_129ypg0)}
+._p12f1pl1{max-width:29pc}
+._p12fko4j{max-width:19pc}
+._y3gn1h6o{text-align:center}

package/dist/esm/styled/container.js

@@ -1,32 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-var gridSize = getGridSize();
-var verticalMarginSize = "var(--ds-space-600, 48px)";
-var columnWidth = gridSize * 8;
-var gutter = gridSize * 2;
-var containerStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  margin: "".concat(verticalMarginSize, " auto"),
-  textAlign: 'center'
-});
-
+/* container.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var containerStyles = null;
 /* Use max-width so the component can shrink on smaller viewports. */
-var wideContainerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: "".concat(columnWidth * 6 + gutter * 5, "px")
-});
-var narrowContainerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: "".concat(columnWidth * 4 + gutter * 3, "px")
-});
+var wideContainerStyles = null;
+var narrowContainerStyles = null;
 /**
  * __Container__
  *
@@ -38,9 +17,12 @@ var Container = function Container(_ref) {
   var children = _ref.children,
     width = _ref.width,
     testId = _ref.testId;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
+    className: ax(["_18s81efg _y3gn1h6o", width === 'narrow' ? "_p12fko4j" : "_p12f1pl1"]),
+    style: {
+      "--_129ypg0": ix("var(--ds-space-600, 48px)".concat(" auto"))
+    }
   }, children);
 };
 export default Container;

package/dist/esm/styled/description.compiled.css

@@ -0,0 +1,3 @@
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._6rth1ejb{margin-block-end:var(--ds-space-300,24px)}
+._syaz1o8f{color:var(--_ggxzyp)}

package/dist/esm/styled/description.js

@@ -1,16 +1,9 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* description.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./description.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { N800 } from '@atlaskit/theme/colors';
-var descriptionStyles = css({
-  color: "var(--ds-text, ".concat(N800, ")"),
-  marginBlockEnd: "var(--ds-space-300, 24px)",
-  marginBlockStart: "var(--ds-space-0, 0px)"
-});
+var descriptionStyles = null;
 
 /**
  * __Description__
@@ -21,8 +14,11 @@ var descriptionStyles = css({
  */
 var Description = function Description(_ref) {
   var children = _ref.children;
-  return jsx("p", {
-    css: descriptionStyles
+  return /*#__PURE__*/React.createElement("p", {
+    className: ax(["_syaz1o8f _6rth1ejb _1pfhze3t"]),
+    style: {
+      "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")"))
+    }
   }, children);
 };
 export default Description;

package/dist/esm/styled/header.compiled.css

@@ -0,0 +1,8 @@
+._1dyzvkfx{letter-spacing:-.008em}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1wyb6pmy{font-size:var(--_1tbkb5d)}
+._6rthpxbi{margin-block-end:var(--ds-space-200,1pc)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vwz4cjiy{line-height:1.2}
+._zg8l1kw7{font-style:inherit}

package/dist/esm/styled/header.js

@@ -1,18 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { h600 } from '@atlaskit/theme/typography';
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
-var headerStyles = css([
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-h600(), {
-  marginTop: "var(--ds-space-0, 0px)",
-  marginBottom: "var(--ds-space-200, 16px)"
-}]);
+/* header.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./header.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var headerStyles = null;
 
 /**
  * __Header__
@@ -26,8 +16,11 @@ var EmptyStateHeader = function EmptyStateHeader(_ref) {
     _ref$level = _ref.level,
     level = _ref$level === void 0 ? 4 : _ref$level;
   var Tag = "h".concat(level > 0 && level < 7 ? level : level > 6 ? 6 : 4);
-  return jsx(Tag, {
-    css: headerStyles
+  return /*#__PURE__*/React.createElement(Tag, {
+    className: ax(["_syaz1fxt _1wyb6pmy _zg8l1kw7 _k48p1wq8 _1dyzvkfx _vwz4cjiy _6rthpxbi _1pfhze3t"]),
+    style: {
+      "--_1tbkb5d": ix("".concat(20 / 14, "em"))
+    }
   }, children);
 };
 export default EmptyStateHeader;

package/dist/esm/styled/image.compiled.css

@@ -0,0 +1,4 @@
+._18s81t55{margin:var(--_a0hk7v)}
+._1e0c1ule{display:block}
+._c71l649k{max-height:var(--_zsxb2b)}
+._p12f163m{max-width:var(--_11x3y0)}

package/dist/esm/styled/image.js

@@ -1,20 +1,13 @@
+/* image.tsx generated by @compiled/babel-plugin v0.32.2 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import "./image.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+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) { _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; }
 var CSS_VAR_MAX_WIDTH = '--max-width';
 var CSS_VAR_MAX_HEIGHT = '--max-height';
-var imageStyles = css({
-  display: 'block',
-  maxWidth: "var(".concat(CSS_VAR_MAX_WIDTH, ")"),
-  maxHeight: "var(".concat(CSS_VAR_MAX_HEIGHT, ")"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  margin: "0 auto ".concat("var(--ds-space-300, 24px)")
-});
+var imageStyles = null;
 
 /**
  * __Image__
@@ -24,7 +17,7 @@ var imageStyles = css({
  * @internal
  */
 var Image = function Image(_ref) {
-  var _ref2;
+  var _objectSpread2;
   var maxHeight = _ref.maxHeight,
     maxWidth = _ref.maxWidth,
     _ref$height = _ref.height,
@@ -32,15 +25,18 @@ var Image = function Image(_ref) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'auto' : _ref$width,
     src = _ref.src;
-  return jsx("img", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style: (_ref2 = {}, _defineProperty(_ref2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), _defineProperty(_ref2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _ref2),
+  return /*#__PURE__*/React.createElement("img", {
     width: width,
     height: height,
     alt: "",
     role: "presentation",
-    css: imageStyles,
-    src: src
+    src: src,
+    className: ax(["_1e0c1ule _p12f163m _c71l649k _18s81t55"]),
+    style: _objectSpread(_objectSpread({}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), _defineProperty(_objectSpread2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _objectSpread2)), {}, {
+      "--_11x3y0": ix("var(".concat(CSS_VAR_MAX_WIDTH, ")")),
+      "--_zsxb2b": ix("var(".concat(CSS_VAR_MAX_HEIGHT, ")")),
+      "--_a0hk7v": ix("0 auto ".concat("var(--ds-space-300, 24px)"))
+    })
   });
 };
 export default Image;

package/dist/esm/styled/spinner-container.compiled.css

@@ -0,0 +1,2 @@
+._1bsb1ejb{width:var(--ds-space-300,24px)}
+._ahbqpxbi{margin-inline-start:var(--ds-space-200,1pc)}

package/dist/esm/styled/spinner-container.js

@@ -1,14 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-var spinnerContainerStyles = css({
-  width: "var(--ds-space-300, 24px)",
-  marginInlineStart: "var(--ds-space-200, 16px)"
-});
+/* spinner-container.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./spinner-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var spinnerContainerStyles = null;
 
 /**
  * __Spinner container__
@@ -19,8 +13,8 @@ var spinnerContainerStyles = css({
  */
 var SpinnerContainer = function SpinnerContainer(_ref) {
   var children = _ref.children;
-  return jsx("div", {
-    css: spinnerContainerStyles
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1ejb _ahbqpxbi"])
   }, children);
 };
 export default SpinnerContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.12.3",
+	"version": "8.0.0",
 	"description": "An empty state appears when there is no data to display and describes what the user can do next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,26 +21,27 @@
 		"runReact18": true,
 		"website": {
 			"name": "Empty state",
-			"category": "Components"
+			"category": "Status indicators"
 		}
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/heading": "^3.1.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
+		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",