@atlaskit/empty-state 7.4.6 → 7.4.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/empty-state
 
+## 7.4.7
+
+### Patch Changes
+
+- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+
 ## 7.4.6
 
 ### Patch Changes

package/dist/cjs/empty-state.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
-
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-
 var _styled = require("./styled");
-
 /**
  * __Empty state__
  *
@@ -39,22 +33,22 @@ var _styled = require("./styled");
  */
 var EmptyState = function EmptyState(_ref) {
   var description = _ref.description,
-      header = _ref.header,
-      imageHeight = _ref.imageHeight,
-      imageUrl = _ref.imageUrl,
-      imageWidth = _ref.imageWidth,
-      isLoading = _ref.isLoading,
-      _ref$maxImageHeight = _ref.maxImageHeight,
-      maxImageHeight = _ref$maxImageHeight === void 0 ? 160 : _ref$maxImageHeight,
-      _ref$maxImageWidth = _ref.maxImageWidth,
-      maxImageWidth = _ref$maxImageWidth === void 0 ? 160 : _ref$maxImageWidth,
-      primaryAction = _ref.primaryAction,
-      renderImage = _ref.renderImage,
-      secondaryAction = _ref.secondaryAction,
-      width = _ref.width,
-      size = _ref.size,
-      tertiaryAction = _ref.tertiaryAction,
-      testId = _ref.testId;
+    header = _ref.header,
+    imageHeight = _ref.imageHeight,
+    imageUrl = _ref.imageUrl,
+    imageWidth = _ref.imageWidth,
+    isLoading = _ref.isLoading,
+    _ref$maxImageHeight = _ref.maxImageHeight,
+    maxImageHeight = _ref$maxImageHeight === void 0 ? 160 : _ref$maxImageHeight,
+    _ref$maxImageWidth = _ref.maxImageWidth,
+    maxImageWidth = _ref$maxImageWidth === void 0 ? 160 : _ref$maxImageWidth,
+    primaryAction = _ref.primaryAction,
+    renderImage = _ref.renderImage,
+    secondaryAction = _ref.secondaryAction,
+    width = _ref.width,
+    size = _ref.size,
+    tertiaryAction = _ref.tertiaryAction,
+    testId = _ref.testId;
   var actionsContainer = primaryAction || secondaryAction || isLoading ? /*#__PURE__*/_react.default.createElement(_styled.ActionsContainer, null, /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, secondaryAction, primaryAction), /*#__PURE__*/_react.default.createElement(_styled.SpinnerContainer, null, isLoading && /*#__PURE__*/_react.default.createElement(_spinner.default, null))) : null;
   return /*#__PURE__*/_react.default.createElement(_styled.Container, {
     testId: testId,
@@ -72,6 +66,5 @@ var EmptyState = function EmptyState(_ref) {
     imageHeight: imageHeight
   }), /*#__PURE__*/_react.default.createElement(_styled.Header, null, header), description && /*#__PURE__*/_react.default.createElement(_styled.Description, null, description), actionsContainer, tertiaryAction);
 };
-
 var _default = EmptyState;
 exports.default = _default;

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _emptyState.default;
   }
 });
-
 var _emptyState = _interopRequireDefault(require("./empty-state"));

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

@@ -4,19 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 /** @jsx jsx */
+
 var actionsStyles = (0, _react.css)({
   display: 'flex',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
-  marginBottom: "var(--ds-scale-100, 8px)",
-  // TODO Delete this comment after verifying spacing token -> previous value ``${5 * gridSize}px``
-  paddingLeft: "var(--ds-scale-500, 40px)",
+  marginBottom: "var(--ds-space-100, 8px)",
+  paddingLeft: "var(--ds-space-500, 40px)",
   alignItems: 'center',
   justifyContent: 'center'
 });
+
 /**
  * __Actions container__
  *
@@ -24,13 +22,11 @@ var actionsStyles = (0, _react.css)({
  *
  * @internal
  */
-
 var ActionsContainer = function ActionsContainer(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("div", {
     css: actionsStyles
   }, children);
 };
-
 var _default = ActionsContainer;
 exports.default = _default;

package/dist/cjs/styled/container.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _constants = require("@atlaskit/theme/constants");
-
 /** @jsx jsx */
+
 var gridSize = (0, _constants.gridSize)();
 var verticalMarginSize = gridSize * 6;
 var columnWidth = gridSize * 8;
@@ -18,14 +16,15 @@ var containerStyles = (0, _react.css)({
   margin: "".concat(verticalMarginSize, "px auto"),
   textAlign: 'center'
 });
-/* Use max-width so the component can shrink on smaller viewports. */
 
+/* Use max-width so the component can shrink on smaller viewports. */
 var wideContainerStyles = (0, _react.css)({
   maxWidth: "".concat(columnWidth * 6 + gutter * 5, "px")
 });
 var narrowContainerStyles = (0, _react.css)({
   maxWidth: "".concat(columnWidth * 4 + gutter * 3, "px")
 });
+
 /**
  * __Container__
  *
@@ -33,16 +32,14 @@ var narrowContainerStyles = (0, _react.css)({
  *
  * @internal
  */
-
 var Container = function Container(_ref) {
   var children = _ref.children,
-      width = _ref.width,
-      testId = _ref.testId;
+    width = _ref.width,
+    testId = _ref.testId;
   return (0, _react.jsx)("div", {
     "data-testid": testId,
     css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
   }, children);
 };
-
 var _default = Container;
 exports.default = _default;

package/dist/cjs/styled/description.js

@@ -4,19 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 /** @jsx jsx */
+
 var descriptionStyles = (0, _react.css)({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  marginTop: "var(--ds-scale-0, 0px)",
-  // TODO Delete this comment after verifying spacing token -> previous value ``${getGridSize() * 3}px``
-  marginBottom: "var(--ds-scale-300, 24px)",
+  marginTop: "var(--ds-space-0, 0px)",
+  marginBottom: "var(--ds-space-300, 24px)",
   color: "var(--ds-text, ".concat(_colors.N800, ")")
 });
+
 /**
  * __Description__
  *
@@ -24,13 +21,11 @@ var descriptionStyles = (0, _react.css)({
  *
  * @internal
  */
-
 var Description = function Description(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("p", {
     css: descriptionStyles
   }, children);
 };
-
 var _default = Description;
 exports.default = _default;

package/dist/cjs/styled/header.js

@@ -4,19 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _typography = require("@atlaskit/theme/typography");
-
 /** @jsx jsx */
+
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var headerStyles = (0, _react.css)([(0, _typography.h600)(), {
   marginTop: 0,
   marginBottom: "".concat((0, _constants.gridSize)() * 2, "px")
 }]);
+
 /**
  * __Header__
  *
@@ -24,13 +22,11 @@ var headerStyles = (0, _react.css)([(0, _typography.h600)(), {
  *
  * @internal
  */
-
 var EmptyStateHeader = function EmptyStateHeader(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("h4", {
     css: headerStyles
   }, children);
 };
-
 var _default = EmptyStateHeader;
 exports.default = _default;

package/dist/cjs/styled/image.js

@@ -1,19 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("@emotion/react");
-
 var _constants = require("@atlaskit/theme/constants");
-
 /** @jsx jsx */
+
 var CSS_VAR_MAX_WIDTH = '--max-width';
 var CSS_VAR_MAX_HEIGHT = '--max-height';
 var imageStyles = (0, _react.css)({
@@ -22,6 +18,7 @@ var imageStyles = (0, _react.css)({
   maxHeight: "var(".concat(CSS_VAR_MAX_HEIGHT, ")"),
   margin: "0 auto ".concat((0, _constants.gridSize)() * 3, "px")
 });
+
 /**
  * __Image__
  *
@@ -29,17 +26,15 @@ var imageStyles = (0, _react.css)({
  *
  * @internal
  */
-
 var Image = function Image(_ref) {
   var _ref2;
-
   var maxHeight = _ref.maxHeight,
-      maxWidth = _ref.maxWidth,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 'auto' : _ref$height,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'auto' : _ref$width,
-      src = _ref.src;
+    maxWidth = _ref.maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'auto' : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'auto' : _ref$width,
+    src = _ref.src;
   return (0, _react.jsx)("img", {
     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),
     width: width,
@@ -50,6 +45,5 @@ var Image = function Image(_ref) {
     src: src
   });
 };
-
 var _default = Image;
 exports.default = _default;

package/dist/cjs/styled/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -41,15 +40,9 @@ Object.defineProperty(exports, "SpinnerContainer", {
     return _spinnerContainer.default;
   }
 });
-
 var _actionsContainer = _interopRequireDefault(require("./actions-container"));
-
 var _container = _interopRequireDefault(require("./container"));
-
 var _description = _interopRequireDefault(require("./description"));
-
 var _header = _interopRequireDefault(require("./header"));
-
 var _image = _interopRequireDefault(require("./image"));
-
 var _spinnerContainer = _interopRequireDefault(require("./spinner-container"));

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

@@ -4,15 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 /** @jsx jsx */
+
 var spinnerContainerStyles = (0, _react.css)({
-  width: "var(--ds-scale-300, 24px)",
-  // TODO Delete this comment after verifying spacing token -> previous value ``${2 * gridSize}px``
-  marginLeft: "var(--ds-scale-200, 16px)"
+  width: "var(--ds-space-300, 24px)",
+  marginLeft: "var(--ds-space-200, 16px)"
 });
+
 /**
  * __Spinner container__
  *
@@ -20,13 +19,11 @@ var spinnerContainerStyles = (0, _react.css)({
  *
  * @internal
  */
-
 var SpinnerContainer = function SpinnerContainer(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("div", {
     css: spinnerContainerStyles
   }, children);
 };
-
 var _default = SpinnerContainer;
 exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.4.6",
+	"version": "7.4.7",
 	"sideEffects": false
 }

package/dist/es2019/empty-state.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Spinner from '@atlaskit/spinner';
 import { ActionsContainer, Container, Description, Header, Image, SpinnerContainer } from './styled';
-
 /**
  * __Empty state__
  *
@@ -59,5 +58,4 @@ const EmptyState = ({
     imageHeight
   }), /*#__PURE__*/React.createElement(Header, null, header), description && /*#__PURE__*/React.createElement(Description, null, description), actionsContainer, tertiaryAction);
 };
-
 export default EmptyState;

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

@@ -1,14 +1,14 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 const actionsStyles = css({
   display: 'flex',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
-  marginBottom: "var(--ds-scale-100, 8px)",
-  // TODO Delete this comment after verifying spacing token -> previous value ``${5 * gridSize}px``
-  paddingLeft: "var(--ds-scale-500, 40px)",
+  marginBottom: "var(--ds-space-100, 8px)",
+  paddingLeft: "var(--ds-space-500, 40px)",
   alignItems: 'center',
   justifyContent: 'center'
 });
+
 /**
  * __Actions container__
  *
@@ -16,11 +16,9 @@ const actionsStyles = css({
  *
  * @internal
  */
-
 const ActionsContainer = ({
   children
 }) => jsx("div", {
   css: actionsStyles
 }, children);
-
 export default ActionsContainer;

package/dist/es2019/styled/container.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
@@ -9,14 +10,15 @@ const containerStyles = css({
   margin: `${verticalMarginSize}px auto`,
   textAlign: 'center'
 });
-/* Use max-width so the component can shrink on smaller viewports. */
 
+/* Use max-width so the component can shrink on smaller viewports. */
 const wideContainerStyles = css({
   maxWidth: `${columnWidth * 6 + gutter * 5}px`
 });
 const narrowContainerStyles = css({
   maxWidth: `${columnWidth * 4 + gutter * 3}px`
 });
+
 /**
  * __Container__
  *
@@ -24,7 +26,6 @@ const narrowContainerStyles = css({
  *
  * @internal
  */
-
 const Container = ({
   children,
   width,
@@ -33,5 +34,4 @@ const Container = ({
   "data-testid": testId,
   css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
 }, children);
-
 export default Container;

package/dist/es2019/styled/description.js

@@ -1,13 +1,13 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 const descriptionStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  marginTop: "var(--ds-scale-0, 0px)",
-  // TODO Delete this comment after verifying spacing token -> previous value ``${getGridSize() * 3}px``
-  marginBottom: "var(--ds-scale-300, 24px)",
+  marginTop: "var(--ds-space-0, 0px)",
+  marginBottom: "var(--ds-space-300, 24px)",
   color: `var(--ds-text, ${N800})`
 });
+
 /**
  * __Description__
  *
@@ -15,11 +15,9 @@ const descriptionStyles = css({
  *
  * @internal
  */
-
 const Description = ({
   children
 }) => jsx("p", {
   css: descriptionStyles
 }, children);
-
 export default Description;

package/dist/es2019/styled/header.js

@@ -1,12 +1,15 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { h600 } from '@atlaskit/theme/typography'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+import { h600 } from '@atlaskit/theme/typography';
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const headerStyles = css([h600(), {
   marginTop: 0,
   marginBottom: `${getGridSize() * 2}px`
 }]);
+
 /**
  * __Header__
  *
@@ -14,11 +17,9 @@ const headerStyles = css([h600(), {
  *
  * @internal
  */
-
 const EmptyStateHeader = ({
   children
 }) => jsx("h4", {
   css: headerStyles
 }, children);
-
 export default EmptyStateHeader;

package/dist/es2019/styled/image.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const CSS_VAR_MAX_WIDTH = '--max-width';
@@ -9,6 +10,7 @@ const imageStyles = css({
   maxHeight: `var(${CSS_VAR_MAX_HEIGHT})`,
   margin: `0 auto ${getGridSize() * 3}px`
 });
+
 /**
  * __Image__
  *
@@ -16,7 +18,6 @@ const imageStyles = css({
  *
  * @internal
  */
-
 const Image = ({
   maxHeight,
   maxWidth,
@@ -35,5 +36,4 @@ const Image = ({
   css: imageStyles,
   src: src
 });
-
 export default Image;

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

@@ -1,10 +1,11 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 const spinnerContainerStyles = css({
-  width: "var(--ds-scale-300, 24px)",
-  // TODO Delete this comment after verifying spacing token -> previous value ``${2 * gridSize}px``
-  marginLeft: "var(--ds-scale-200, 16px)"
+  width: "var(--ds-space-300, 24px)",
+  marginLeft: "var(--ds-space-200, 16px)"
 });
+
 /**
  * __Spinner container__
  *
@@ -12,11 +13,9 @@ const spinnerContainerStyles = css({
  *
  * @internal
  */
-
 const SpinnerContainer = ({
   children
 }) => jsx("div", {
   css: spinnerContainerStyles
 }, children);
-
 export default SpinnerContainer;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.4.6",
+	"version": "7.4.7",
 	"sideEffects": false
 }

package/dist/esm/empty-state.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Spinner from '@atlaskit/spinner';
 import { ActionsContainer, Container, Description, Header, Image, SpinnerContainer } from './styled';
-
 /**
  * __Empty state__
  *
@@ -27,22 +26,22 @@ import { ActionsContainer, Container, Description, Header, Image, SpinnerContain
  */
 var EmptyState = function EmptyState(_ref) {
   var description = _ref.description,
-      header = _ref.header,
-      imageHeight = _ref.imageHeight,
-      imageUrl = _ref.imageUrl,
-      imageWidth = _ref.imageWidth,
-      isLoading = _ref.isLoading,
-      _ref$maxImageHeight = _ref.maxImageHeight,
-      maxImageHeight = _ref$maxImageHeight === void 0 ? 160 : _ref$maxImageHeight,
-      _ref$maxImageWidth = _ref.maxImageWidth,
-      maxImageWidth = _ref$maxImageWidth === void 0 ? 160 : _ref$maxImageWidth,
-      primaryAction = _ref.primaryAction,
-      renderImage = _ref.renderImage,
-      secondaryAction = _ref.secondaryAction,
-      width = _ref.width,
-      size = _ref.size,
-      tertiaryAction = _ref.tertiaryAction,
-      testId = _ref.testId;
+    header = _ref.header,
+    imageHeight = _ref.imageHeight,
+    imageUrl = _ref.imageUrl,
+    imageWidth = _ref.imageWidth,
+    isLoading = _ref.isLoading,
+    _ref$maxImageHeight = _ref.maxImageHeight,
+    maxImageHeight = _ref$maxImageHeight === void 0 ? 160 : _ref$maxImageHeight,
+    _ref$maxImageWidth = _ref.maxImageWidth,
+    maxImageWidth = _ref$maxImageWidth === void 0 ? 160 : _ref$maxImageWidth,
+    primaryAction = _ref.primaryAction,
+    renderImage = _ref.renderImage,
+    secondaryAction = _ref.secondaryAction,
+    width = _ref.width,
+    size = _ref.size,
+    tertiaryAction = _ref.tertiaryAction,
+    testId = _ref.testId;
   var actionsContainer = primaryAction || secondaryAction || isLoading ? /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction, primaryAction), /*#__PURE__*/React.createElement(SpinnerContainer, null, isLoading && /*#__PURE__*/React.createElement(Spinner, null))) : null;
   return /*#__PURE__*/React.createElement(Container, {
     testId: testId,
@@ -60,5 +59,4 @@ var EmptyState = function EmptyState(_ref) {
     imageHeight: imageHeight
   }), /*#__PURE__*/React.createElement(Header, null, header), description && /*#__PURE__*/React.createElement(Description, null, description), actionsContainer, tertiaryAction);
 };
-
 export default EmptyState;

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

@@ -1,14 +1,14 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 var actionsStyles = css({
   display: 'flex',
-  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
-  marginBottom: "var(--ds-scale-100, 8px)",
-  // TODO Delete this comment after verifying spacing token -> previous value ``${5 * gridSize}px``
-  paddingLeft: "var(--ds-scale-500, 40px)",
+  marginBottom: "var(--ds-space-100, 8px)",
+  paddingLeft: "var(--ds-space-500, 40px)",
   alignItems: 'center',
   justifyContent: 'center'
 });
+
 /**
  * __Actions container__
  *
@@ -16,12 +16,10 @@ var actionsStyles = css({
  *
  * @internal
  */
-
 var ActionsContainer = function ActionsContainer(_ref) {
   var children = _ref.children;
   return jsx("div", {
     css: actionsStyles
   }, children);
 };
-
 export default ActionsContainer;

package/dist/esm/styled/container.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
@@ -9,14 +10,15 @@ var containerStyles = css({
   margin: "".concat(verticalMarginSize, "px auto"),
   textAlign: 'center'
 });
-/* Use max-width so the component can shrink on smaller viewports. */
 
+/* Use max-width so the component can shrink on smaller viewports. */
 var wideContainerStyles = css({
   maxWidth: "".concat(columnWidth * 6 + gutter * 5, "px")
 });
 var narrowContainerStyles = css({
   maxWidth: "".concat(columnWidth * 4 + gutter * 3, "px")
 });
+
 /**
  * __Container__
  *
@@ -24,15 +26,13 @@ var narrowContainerStyles = css({
  *
  * @internal
  */
-
 var Container = function Container(_ref) {
   var children = _ref.children,
-      width = _ref.width,
-      testId = _ref.testId;
+    width = _ref.width,
+    testId = _ref.testId;
   return jsx("div", {
     "data-testid": testId,
     css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
   }, children);
 };
-
 export default Container;

package/dist/esm/styled/description.js

@@ -1,13 +1,13 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 var descriptionStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
-  marginTop: "var(--ds-scale-0, 0px)",
-  // TODO Delete this comment after verifying spacing token -> previous value ``${getGridSize() * 3}px``
-  marginBottom: "var(--ds-scale-300, 24px)",
+  marginTop: "var(--ds-space-0, 0px)",
+  marginBottom: "var(--ds-space-300, 24px)",
   color: "var(--ds-text, ".concat(N800, ")")
 });
+
 /**
  * __Description__
  *
@@ -15,12 +15,10 @@ var descriptionStyles = css({
  *
  * @internal
  */
-
 var Description = function Description(_ref) {
   var children = _ref.children;
   return jsx("p", {
     css: descriptionStyles
   }, children);
 };
-
 export default Description;

package/dist/esm/styled/header.js

@@ -1,12 +1,15 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { h600 } from '@atlaskit/theme/typography'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+import { h600 } from '@atlaskit/theme/typography';
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var headerStyles = css([h600(), {
   marginTop: 0,
   marginBottom: "".concat(getGridSize() * 2, "px")
 }]);
+
 /**
  * __Header__
  *
@@ -14,12 +17,10 @@ var headerStyles = css([h600(), {
  *
  * @internal
  */
-
 var EmptyStateHeader = function EmptyStateHeader(_ref) {
   var children = _ref.children;
   return jsx("h4", {
     css: headerStyles
   }, children);
 };
-
 export default EmptyStateHeader;

package/dist/esm/styled/image.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var CSS_VAR_MAX_WIDTH = '--max-width';
@@ -11,6 +11,7 @@ var imageStyles = css({
   maxHeight: "var(".concat(CSS_VAR_MAX_HEIGHT, ")"),
   margin: "0 auto ".concat(getGridSize() * 3, "px")
 });
+
 /**
  * __Image__
  *
@@ -18,17 +19,15 @@ var imageStyles = css({
  *
  * @internal
  */
-
 var Image = function Image(_ref) {
   var _ref2;
-
   var maxHeight = _ref.maxHeight,
-      maxWidth = _ref.maxWidth,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 'auto' : _ref$height,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'auto' : _ref$width,
-      src = _ref.src;
+    maxWidth = _ref.maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'auto' : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'auto' : _ref$width,
+    src = _ref.src;
   return jsx("img", {
     style: (_ref2 = {}, _defineProperty(_ref2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), _defineProperty(_ref2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _ref2),
     width: width,
@@ -39,5 +38,4 @@ var Image = function Image(_ref) {
     src: src
   });
 };
-
 export default Image;

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

@@ -1,10 +1,11 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 var spinnerContainerStyles = css({
-  width: "var(--ds-scale-300, 24px)",
-  // TODO Delete this comment after verifying spacing token -> previous value ``${2 * gridSize}px``
-  marginLeft: "var(--ds-scale-200, 16px)"
+  width: "var(--ds-space-300, 24px)",
+  marginLeft: "var(--ds-space-200, 16px)"
 });
+
 /**
  * __Spinner container__
  *
@@ -12,12 +13,10 @@ var spinnerContainerStyles = css({
  *
  * @internal
  */
-
 var SpinnerContainer = function SpinnerContainer(_ref) {
   var children = _ref.children;
   return jsx("div", {
     css: spinnerContainerStyles
   }, children);
 };
-
 export default SpinnerContainer;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.4.6",
+	"version": "7.4.7",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/empty-state",
-  "version": "7.4.6",
+  "version": "7.4.7",
   "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/"

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/empty-state"