@atlaskit/empty-state 7.4.9 → 7.4.11

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/empty-state
 
+## 7.4.11
+
+### Patch Changes
+
+- [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
+- Updated dependencies
+
+## 7.4.10
+
+### Patch Changes
+
+- [`74c1b81a476`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74c1b81a476) - Replaces use of `gridSize` with space tokens. There is no expected visual change.
+
 ## 7.4.9
 
 ### Patch Changes

package/dist/cjs/styled/container.js

@@ -8,13 +8,15 @@ var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 var gridSize = (0, _constants.gridSize)();
-var verticalMarginSize = gridSize * 6;
+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-spacing
-  margin: "".concat(verticalMarginSize, "px auto"),
+  margin: "".concat(verticalMarginSize, " auto"),
   textAlign: 'center'
 });
 
@@ -25,7 +27,6 @@ var wideContainerStyles = (0, _react.css)({
 var narrowContainerStyles = (0, _react.css)({
   maxWidth: "".concat(columnWidth * 4 + gutter * 3, "px")
 });
-
 /**
  * __Container__
  *

package/dist/cjs/styled/header.js

@@ -5,14 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 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")
+  marginTop: "var(--ds-space-0, 0px)",
+  marginBottom: "var(--ds-space-200, 16px)"
 }]);
 
 /**

package/dist/cjs/styled/image.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 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';
@@ -17,7 +16,7 @@ var imageStyles = (0, _react.css)({
   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-spacing
-  margin: "0 auto ".concat((0, _constants.gridSize)() * 3, "px")
+  margin: "0 auto ".concat("var(--ds-space-300, 24px)")
 });
 
 /**

package/dist/cjs/version.json

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

package/dist/es2019/styled/container.js

@@ -1,14 +1,16 @@
 /** @jsx jsx */
 
 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 = gridSize * 6;
+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-spacing
-  margin: `${verticalMarginSize}px auto`,
+  margin: `${verticalMarginSize} auto`,
   textAlign: 'center'
 });
 
@@ -19,7 +21,6 @@ const wideContainerStyles = css({
 const narrowContainerStyles = css({
   maxWidth: `${columnWidth * 4 + gutter * 3}px`
 });
-
 /**
  * __Container__
  *

package/dist/es2019/styled/header.js

@@ -1,13 +1,11 @@
 /** @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
 const headerStyles = css([h600(), {
-  marginTop: 0,
-  marginBottom: `${getGridSize() * 2}px`
+  marginTop: "var(--ds-space-0, 0px)",
+  marginBottom: "var(--ds-space-200, 16px)"
 }]);
 
 /**

package/dist/es2019/styled/image.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const CSS_VAR_MAX_WIDTH = '--max-width';
 const CSS_VAR_MAX_HEIGHT = '--max-height';
 const imageStyles = css({
@@ -9,7 +8,7 @@ const imageStyles = css({
   maxWidth: `var(${CSS_VAR_MAX_WIDTH})`,
   maxHeight: `var(${CSS_VAR_MAX_HEIGHT})`,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  margin: `0 auto ${getGridSize() * 3}px`
+  margin: `0 auto ${"var(--ds-space-300, 24px)"}`
 });
 
 /**

package/dist/es2019/version.json

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

package/dist/esm/styled/container.js

@@ -1,14 +1,16 @@
 /** @jsx jsx */
 
 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 = gridSize * 6;
+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-spacing
-  margin: "".concat(verticalMarginSize, "px auto"),
+  margin: "".concat(verticalMarginSize, " auto"),
   textAlign: 'center'
 });
 
@@ -19,7 +21,6 @@ var wideContainerStyles = css({
 var narrowContainerStyles = css({
   maxWidth: "".concat(columnWidth * 4 + gutter * 3, "px")
 });
-
 /**
  * __Container__
  *

package/dist/esm/styled/header.js

@@ -1,13 +1,11 @@
 /** @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
 var headerStyles = css([h600(), {
-  marginTop: 0,
-  marginBottom: "".concat(getGridSize() * 2, "px")
+  marginTop: "var(--ds-space-0, 0px)",
+  marginBottom: "var(--ds-space-200, 16px)"
 }]);
 
 /**

package/dist/esm/styled/image.js

@@ -2,7 +2,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';
 var CSS_VAR_MAX_HEIGHT = '--max-height';
 var imageStyles = css({
@@ -10,7 +9,7 @@ var imageStyles = css({
   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-spacing
-  margin: "0 auto ".concat(getGridSize() * 3, "px")
+  margin: "0 auto ".concat("var(--ds-space-300, 24px)")
 });
 
 /**

package/dist/esm/version.json

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

package/dist/types/styled/actions-container.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 /**
  * __Actions container__
  *
@@ -7,5 +7,7 @@ import { FC } from 'react';
  *
  * @internal
  */
-declare const ActionsContainer: FC;
+declare const ActionsContainer: FC<{
+    children: ReactNode;
+}>;
 export default ActionsContainer;

package/dist/types/styled/container.d.ts

@@ -1,6 +1,11 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import type { Width } from '../index';
+declare type ContainerProps = {
+    testId?: string;
+    width: Width;
+    children: ReactNode;
+};
 /**
  * __Container__
  *
@@ -8,8 +13,5 @@ import type { Width } from '../index';
  *
  * @internal
  */
-declare const Container: FC<{
-    testId?: string;
-    width: Width;
-}>;
+declare const Container: FC<ContainerProps>;
 export default Container;

package/dist/types/styled/description.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 /**
  * __Description__
  *
@@ -7,5 +7,7 @@ import { FC } from 'react';
  *
  * @internal
  */
-declare const Description: FC;
+declare const Description: FC<{
+    children: ReactNode;
+}>;
 export default Description;

package/dist/types/styled/header.d.ts

@@ -7,5 +7,7 @@ import { FC } from 'react';
  *
  * @internal
  */
-declare const EmptyStateHeader: FC;
+declare const EmptyStateHeader: FC<{
+    children: string;
+}>;
 export default EmptyStateHeader;

package/dist/types/styled/spinner-container.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 /**
  * __Spinner container__
  *
@@ -7,5 +7,7 @@ import { FC } from 'react';
  *
  * @internal
  */
-declare const SpinnerContainer: FC;
+declare const SpinnerContainer: FC<{
+    children?: ReactNode;
+}>;
 export default SpinnerContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/empty-state",
-  "version": "7.4.9",
+  "version": "7.4.11",
   "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/"
@@ -26,7 +26,7 @@
   "dependencies": {
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/spinner": "^15.4.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"