newspack-components 4.7.0 → 4.8.0

package/dist/cjs/empty-state/actions.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var Actions = function Actions(_ref) {
+  var _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'row' : _ref$orientation,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'sm' : _ref$gap,
+    className = _ref.className,
+    children = _ref.children;
+  (0, _context.useEmptyStateInvariant)();
+  var isColumn = orientation === 'column';
+
+  // Rows wrap: the empty state only gets half the grid above 1054px.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, {
+    direction: isColumn ? 'column' : 'row',
+    align: "center",
+    justify: "center",
+    gap: gap,
+    wrap: isColumn ? undefined : 'wrap',
+    className: (0, _classnames["default"])('newspack-empty-state__actions', className),
+    children: children
+  });
+};
+var _default = exports["default"] = Actions;

package/dist/cjs/empty-state/context.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEmptyStateInvariant = exports.useEmptyStateContext = exports.EmptyStateContext = void 0;
+var _element = require("@wordpress/element");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var EmptyStateContext = exports.EmptyStateContext = (0, _element.createContext)(null);
+var FALLBACK_CONTEXT = {
+  size: 'default'
+};
+var useEmptyStateContext = exports.useEmptyStateContext = function useEmptyStateContext() {
+  var context = (0, _element.useContext)(EmptyStateContext);
+  if (!context && process.env.NODE_ENV !== 'production') {
+    throw new Error('EmptyState subcomponents must be rendered inside EmptyState.Root.');
+  }
+  return context !== null && context !== void 0 ? context : FALLBACK_CONTEXT;
+};
+
+/**
+ * Assert placement inside a `Root` without depending on the value.
+ *
+ * For subcomponents that read nothing from context. Both hooks throw in
+ * development so the mistake surfaces while it is cheap, and neither throws in
+ * production, because a stray subcomponent should not blank an admin screen
+ * over a layout hint.
+ */
+var useEmptyStateInvariant = exports.useEmptyStateInvariant = function useEmptyStateInvariant() {
+  var context = (0, _element.useContext)(EmptyStateContext);
+  if (!context && process.env.NODE_ENV !== 'production') {
+    throw new Error('EmptyState subcomponents must be rendered inside EmptyState.Root.');
+  }
+};

package/dist/cjs/empty-state/header.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _icons = require("@wordpress/icons");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var Header = function Header(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    heading = _ref.heading,
+    className = _ref.className;
+  var _useEmptyStateContext = (0, _context.useEmptyStateContext)(),
+    size = _useEmptyStateContext.size;
+  var isSmall = size === 'small';
+
+  // Heading level is a document-outline concern, so the size only sets a default.
+  var level = heading !== null && heading !== void 0 ? heading : isSmall ? 3 : 2;
+  var HeadingTag = "h".concat(level);
+
+  // Two stacks so each gap belongs to exactly one of them: the inner one spaces the
+  // icon from the title, the outer one the title from the description.
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+    direction: "column",
+    align: "center",
+    gap: "sm",
+    className: (0, _classnames["default"])('newspack-empty-state__header', isSmall && 'newspack-empty-state__header--small', className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+      direction: "column",
+      align: "center",
+      gap: isSmall ? 'md' : 'lg',
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-empty-state__icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: icon,
+          size: isSmall ? 24 : 48
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
+        className: "newspack-empty-state__title",
+        children: title
+      })]
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "newspack-empty-state__description",
+      children: description
+    })]
+  });
+};
+var _default = exports["default"] = Header;

package/dist/cjs/empty-state/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.EmptyState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _actions = _interopRequireDefault(require("./actions"));
+var _header = _interopRequireDefault(require("./header"));
+var _root = _interopRequireDefault(require("./root"));
+/**
+ * EmptyState
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var EmptyState = exports.EmptyState = {
+  Root: _root["default"],
+  Header: _header["default"],
+  Actions: _actions["default"]
+};
+Object.entries(EmptyState).forEach(function (_ref) {
+  var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+    name = _ref2[0],
+    part = _ref2[1];
+  part.displayName = "EmptyState.".concat(name);
+});
+var _default = exports["default"] = EmptyState;

package/dist/cjs/empty-state/index.test.js

@@ -0,0 +1,303 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+describe('EmptyState.Root', function () {
+  it('renders the four-column grid spine', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render.container;
+    var grid = container.querySelector('.newspack-empty-state');
+    expect(grid).toHaveClass('newspack-grid');
+    expect(grid).toHaveClass('newspack-grid__columns-4');
+    expect(grid).toHaveClass('newspack-grid--no-margin');
+  });
+
+  // grid/style.scss matches on these attributes, so they are a contract.
+  it('gives the inner stack the data attributes the Grid stylesheet matches on', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render2.container;
+    var stack = container.querySelector('.newspack-empty-state').firstElementChild;
+    expect(stack).toHaveAttribute('data-start', '2');
+    expect(stack).toHaveAttribute('data-end', '4');
+  });
+
+  // The width cap hangs off this class, so losing it silently widens the block.
+  it('carries the stack class hook', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render3.container;
+    var stack = container.querySelector('.newspack-empty-state').firstElementChild;
+    expect(stack).toHaveClass('newspack-empty-state__stack');
+    expect(stack).toHaveStyle({
+      gap: 'var(--wpds-dimension-gap-2xl, 32px)'
+    });
+  });
+
+  // Consumers key `:has()` selectors off this class, so losing it changes their
+  // layout without failing anything.
+  it('merges className onto the grid', function () {
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        className: "consumer-empty-state",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render4.container;
+    expect(container.querySelector('.newspack-empty-state')).toHaveClass('consumer-empty-state');
+  });
+
+  // Elements, not a bare string: the stack keeps a lone string but drops one sitting
+  // beside an element.
+  it('renders its children', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "body"
+      })
+    }));
+    expect(_react.screen.getByText('body')).toBeInTheDocument();
+  });
+});
+describe('EmptyState.Header', function () {
+  it('renders the title and description in the header', function () {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+          title: "Get started with newsletters",
+          description: "Compose and send."
+        })
+      })),
+      container = _render5.container;
+    expect(container.querySelector('.newspack-empty-state__title')).toHaveTextContent('Get started with newsletters');
+    expect(container.querySelector('.newspack-empty-state__description')).toHaveTextContent('Compose and send.');
+  });
+
+  // Spacing comes from the stacks, so a margin creeping back onto the heading or
+  // paragraph would silently widen every gap.
+  it('spaces the header from its stacks rather than from margins', function () {
+    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+          title: "Get started with newsletters",
+          description: "Compose and send."
+        })
+      })),
+      container = _render6.container;
+    var header = container.querySelector('.newspack-empty-state__header');
+    expect(header).toHaveStyle({
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 'var(--wpds-dimension-gap-sm, 8px)'
+    });
+    expect(header.firstElementChild).toHaveStyle({
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 'var(--wpds-dimension-gap-lg, 16px)'
+    });
+  });
+  it('wraps the icon in the disc', function () {
+    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+          title: "Get started with newsletters",
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
+        })
+      })),
+      container = _render7.container;
+    expect(container.querySelector('.newspack-empty-state__icon svg')).toBeInTheDocument();
+  });
+  it('omits the description and the icon when they are not given', function () {
+    var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+          title: "Get started with newsletters"
+        })
+      })),
+      container = _render8.container;
+    expect(container.querySelector('.newspack-empty-state__description')).not.toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__icon')).not.toBeInTheDocument();
+  });
+  it('renders an h2 and a 48px icon at the default size', function () {
+    var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+          title: "Get started with newsletters",
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
+        })
+      })),
+      container = _render9.container;
+    expect(_react.screen.getByRole('heading', {
+      level: 2,
+      name: 'Get started with newsletters'
+    })).toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__header--small')).not.toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__icon svg')).toHaveAttribute('width', '48');
+  });
+  it('drops to an h3, the small modifier and a 24px icon when the root is small', function () {
+    var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        size: "small",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+          title: "No products match this rule",
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
+        })
+      })),
+      container = _render0.container;
+    expect(container.querySelector('.newspack-empty-state__header--small')).toBeInTheDocument();
+    expect(_react.screen.getByRole('heading', {
+      level: 3,
+      name: 'No products match this rule'
+    })).toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__icon svg')).toHaveAttribute('width', '24');
+    expect(container.querySelector('.newspack-empty-state__header').firstElementChild).toHaveStyle({
+      gap: 'var(--wpds-dimension-gap-md, 12px)'
+    });
+  });
+  it('lets heading override the level the size implies', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      size: "small",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+        title: "No products match this rule",
+        heading: 1
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 1,
+      name: 'No products match this rule'
+    })).toBeInTheDocument();
+  });
+  it('carries its own class hook alongside any className', function () {
+    var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+          title: "Get started with newsletters",
+          className: "consumer-header"
+        })
+      })),
+      container = _render1.container;
+    var header = container.querySelector('.newspack-empty-state__header');
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveClass('consumer-header');
+  });
+  it('throws outside Root in development', function () {
+    var consoleError = jest.spyOn(console, 'error').mockImplementation(function () {});
+    try {
+      expect(function () {
+        return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+          title: "Orphan"
+        }));
+      }).toThrow('EmptyState subcomponents must be rendered inside EmptyState.Root.');
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+
+  // Header is the visible half, so a misplaced one blanking an admin screen costs more
+  // than the default size it falls back to.
+  it('falls back to the default size outside Root in production', function () {
+    var previous = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+    try {
+      var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+          title: "Orphan",
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
+        })),
+        container = _render10.container;
+      expect(_react.screen.getByRole('heading', {
+        level: 2,
+        name: 'Orphan'
+      })).toBeInTheDocument();
+      expect(container.querySelector('.newspack-empty-state__header--small')).not.toBeInTheDocument();
+      expect(container.querySelector('.newspack-empty-state__icon svg')).toHaveAttribute('width', '48');
+    } finally {
+      process.env.NODE_ENV = previous;
+    }
+  });
+});
+describe('EmptyState.Actions', function () {
+  it('renders its children in a centred row', function () {
+    var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Actions, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            children: "Add Newsletter"
+          })
+        })
+      })),
+      container = _render11.container;
+    expect(container.querySelector('.newspack-empty-state__actions')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-empty-state__actions')).toHaveStyle({
+      justifyContent: 'center',
+      gap: 'var(--wpds-dimension-gap-sm, 8px)'
+    });
+    expect(_react.screen.getByRole('button', {
+      name: 'Add Newsletter'
+    })).toBeInTheDocument();
+  });
+  it('stacks into a column while keeping the hook class', function () {
+    var _render12 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"].Actions, {
+          orientation: "column",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            children: "Set up Audience Management"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: "https://example.com",
+            children: "Learn more"
+          })]
+        })
+      })),
+      container = _render12.container;
+    var actions = container.querySelector('.newspack-empty-state__actions');
+    expect(actions).toBeInTheDocument();
+    expect(actions).toHaveStyle({
+      flexDirection: 'column'
+    });
+    // A stack's own default is `stretch`, so without align="center" the buttons
+    // would go full-bleed while flexDirection stayed correct.
+    expect(actions).toHaveStyle({
+      alignItems: 'center'
+    });
+  });
+  it('throws outside Root in development', function () {
+    var consoleError = jest.spyOn(console, 'error').mockImplementation(function () {});
+    try {
+      expect(function () {
+        return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Actions, {
+          children: "x"
+        }));
+      }).toThrow('EmptyState subcomponents must be rendered inside EmptyState.Root.');
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+
+  // Actions reads nothing from context, so the invariant is a development aid. A
+  // stray one must not blank an admin screen in production over a layout hint.
+  it('renders outside Root in production', function () {
+    var previous = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+    try {
+      var _render13 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Actions, {
+          children: "x"
+        })),
+        container = _render13.container;
+      expect(container.querySelector('.newspack-empty-state__actions')).toBeInTheDocument();
+    } finally {
+      process.env.NODE_ENV = previous;
+    }
+  });
+});

package/dist/cjs/empty-state/root.js

@@ -0,0 +1,56 @@
+"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 _element = require("@wordpress/element");
+var _ui = require("@wordpress/ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _grid = _interopRequireDefault(require("../grid"));
+var _context = require("./context");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-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) { (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; } /**
+ * WordPress dependencies.
+ */ /**
+ * External dependencies.
+ */ /**
+ * Internal dependencies.
+ */ // Positions the stack in columns 2 to 4. `data-` attributes because that is the form
+// grid/style.scss standardised on, after prop filtering was found to drop a bare `end`
+// before it reached the DOM. That file carries the full note.
+var gridColumn = {
+  'data-start': '2',
+  'data-end': '4'
+};
+var Root = function Root(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    className = _ref.className,
+    children = _ref.children;
+  var context = (0, _element.useMemo)(function () {
+    return {
+      size: size
+    };
+  }, [size]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.EmptyStateContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_grid["default"], {
+      className: (0, _classnames["default"])('newspack-empty-state', className),
+      columns: 4,
+      noMargin: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, _objectSpread(_objectSpread({
+        className: "newspack-empty-state__stack",
+        direction: "column",
+        gap: "2xl"
+      }, gridColumn), {}, {
+        children: children
+      }))
+    })
+  });
+};
+var _default = exports["default"] = Root;

package/dist/cjs/empty-state/style.scss

@@ -0,0 +1,51 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as np-colors;
+
+.newspack-empty-state {
+	&__stack {
+		margin-inline: auto;
+		max-width: var(--wpds-dimension-surface-width-lg, 560px);
+	}
+
+	&__header {
+		text-align: center;
+		text-wrap: balance;
+	}
+
+	&__icon {
+		background-color: var(--wp-admin-theme-color-lighter-10, #{np-colors.$primary-000});
+		border-radius: 100%;
+		display: grid;
+		height: wp-vars.$grid-unit-50 * 2;
+		place-items: center;
+		width: wp-vars.$grid-unit-50 * 2;
+
+		svg {
+			fill: var(--wp-admin-theme-color, #{np-colors.$primary-600});
+		}
+	}
+
+	&__title {
+		@include wp-mixins.heading-x-large();
+		color: var(--wpds-color-foreground-content-neutral, #{wp-colors.$gray-900});
+		margin: 0;
+	}
+
+	&__description {
+		color: var(--wpds-color-foreground-content-neutral-weak, #{wp-colors.$gray-700});
+		margin: 0;
+	}
+
+	&__header--small {
+		.newspack-empty-state__icon {
+			height: wp-vars.$grid-unit-50;
+			width: wp-vars.$grid-unit-50;
+		}
+
+		.newspack-empty-state__title {
+			@include wp-mixins.heading-large();
+		}
+	}
+}

package/dist/cjs/empty-state/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});