newspack-components 4.7.0 → 4.8.0

package/dist/esm/card-feature/style.scss

@@ -2,55 +2,51 @@
  * CardFeature
  */
 
-@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 "../mixins" as np-mixins;
 
 .newspack-card-feature {
 	height: 100%;
 
-	.newspack-card--core__header {
-		height: 100%;
-	}
-
-	.newspack-card--core__header-content {
-		gap: 16px;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
+	&__actions {
+		margin-top: auto;
 
-		// Push the action row (buttons + badge) to the bottom.
-		> :last-child {
-			margin-top: auto;
+		.newspack-card-feature__badge {
+			flex-shrink: 1;
+			min-width: 0;
 		}
 	}
 
 	&__content {
 		flex: 1;
-		min-width: 0; // prevent flex blowout on long words
+		min-width: 0;
 	}
 
 	&__title {
-		font-size: wp-vars.$font-size-x-large;
-		line-height: wp-vars.$font-line-height-x-large;
-		text-align: left;
+		@include wp-mixins.heading-x-large();
+
+		margin: 0;
 	}
 
 	&__description {
-		text-align: left;
+		@include np-mixins.text-muted;
+
+		margin: 0;
 	}
 
 	&__icon {
 		align-items: center;
 		display: flex;
-		flex: 0 0 40px;
-		height: 40px;
+		flex: 0 0 wp-vars.$grid-unit-50;
+		height: wp-vars.$grid-unit-50;
 		justify-content: center;
 
 		svg {
 			display: block;
 			fill: currentcolor;
-			height: 24px;
-			width: 24px;
+			height: wp-vars.$grid-unit-30;
+			width: wp-vars.$grid-unit-30;
 		}
 
 		&--radius-small {
@@ -62,14 +58,7 @@
 		}
 	}
 
-	// Unmet requirements state: lighter border, muted content.
-	&.newspack-card-feature--muted {
-		border-color: wp-colors.$gray-100;
-		box-shadow: wp-colors.$gray-100 0 0 0 1px;
-
-		.newspack-card-feature__title,
-		.newspack-card-feature__description {
-			color: wp-colors.$gray-700;
-		}
+	&.newspack-card-feature--muted &__title {
+		@include np-mixins.text-muted;
 	}
 }

package/dist/esm/card-form/index.js

@@ -17,16 +17,16 @@ import classnames from 'classnames';
 import { useEffect, useRef, createElement } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Badge } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
-import Badge from '../badge';
 import Card from '../card';
 import './style.scss';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var _CardForm = function CardForm(_ref) {
-  var _badge$level;
+  var _badge$intent;
   var title = _ref.title,
     description = _ref.description,
     badge = _ref.badge,
@@ -113,9 +113,9 @@ var _CardForm = function CardForm(_ref) {
         }), /*#__PURE__*/_jsxs(HStack, {
           spacing: 2,
           expanded: false,
-          children: [badge && /*#__PURE__*/_jsx(Badge, {
-            text: badge.text,
-            level: (_badge$level = badge.level) !== null && _badge$level !== void 0 ? _badge$level : 'success'
+          children: [(badge === null || badge === void 0 ? void 0 : badge.label) && /*#__PURE__*/_jsx(Badge, {
+            intent: (_badge$intent = badge.intent) !== null && _badge$intent !== void 0 ? _badge$intent : 'stable',
+            children: badge.label
           }), actions]
         })]
       })

package/dist/esm/card-sortable-list/index.js

@@ -12,11 +12,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 import { Disabled, Draggable, __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { useEffect, useLayoutEffect, useRef, useState } from '@wordpress/element';
+import { Badge } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
-import { Badge, Card } from '../';
+import { Card } from '../';
 import './style.scss';
 
 /**
@@ -383,6 +384,7 @@ var CardSortableList = function CardSortableList(_ref) {
             onDragEnd: handleDragEnd,
             appendToOwnerDocument: true,
             children: function children(_ref2) {
+              var _item$badge, _item$badge$intent;
               var onDraggableStart = _ref2.onDraggableStart,
                 onDraggableEnd = _ref2.onDraggableEnd;
               return /*#__PURE__*/_jsx(Card, {
@@ -394,9 +396,9 @@ var CardSortableList = function CardSortableList(_ref) {
                 __experimentalCoreProps: _objectSpread(_objectSpread({
                   header: /*#__PURE__*/_jsxs(_Fragment, {
                     children: [/*#__PURE__*/_jsxs("h3", {
-                      children: [item.title, /*#__PURE__*/_jsx(Badge, {
-                        level: item.badgeLevel,
-                        text: item.badgeText
+                      children: [item.title, ((_item$badge = item.badge) === null || _item$badge === void 0 ? void 0 : _item$badge.label) && /*#__PURE__*/_jsx(Badge, {
+                        intent: (_item$badge$intent = item.badge.intent) !== null && _item$badge$intent !== void 0 ? _item$badge$intent : 'none',
+                        children: item.badge.label
                       })]
                     }), item.description && /*#__PURE__*/_jsx("p", {
                       children: item.description

package/dist/esm/card-sortable-list/index.test.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies.
+ */
+import CardSortableList from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+var items = [{
+  id: 1,
+  title: 'Homepage',
+  badge: {
+    label: 'Active',
+    intent: 'stable'
+  }
+}, {
+  id: 2,
+  title: 'About',
+  badge: {
+    label: 'Draft',
+    intent: 'draft'
+  }
+}];
+describe('CardSortableList', function () {
+  it('renders a badge for each item that has badge text', function () {
+    render(/*#__PURE__*/_jsx(CardSortableList, {
+      items: items
+    }));
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+  });
+  it('renders no badge for an item without badge text', function () {
+    var _render = render(/*#__PURE__*/_jsx(CardSortableList, {
+        items: [{
+          id: 1,
+          title: 'Homepage'
+        }]
+      })),
+      container = _render.container;
+    expect(screen.getByText('Homepage')).toBeInTheDocument();
+    // An unguarded Badge would still emit an empty span, so assert on element children.
+    expect(container.querySelector('h3').children).toHaveLength(0);
+  });
+});

package/dist/esm/collapsible-group/context.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+
+export var TitleLevelContext = createContext(2);
+export var useTitleLevel = function useTitleLevel() {
+  return useContext(TitleLevelContext);
+};

package/dist/esm/collapsible-group/index.js

@@ -0,0 +1,17 @@
+/**
+ * CollapsibleGroup
+ */
+
+/**
+ * Internal dependencies
+ */
+import Item from './item';
+import Root from './root';
+
+// The group is itself renderable, so `Item` hangs off it rather than forming a namespace object like `Drawer`.
+var CollapsibleGroup = Object.assign(Root, {
+  Item: Item
+});
+CollapsibleGroup.displayName = 'CollapsibleGroup';
+Item.displayName = 'CollapsibleGroup.Item';
+export default CollapsibleGroup;

package/dist/esm/collapsible-group/index.test.js

@@ -0,0 +1,215 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import CollapsibleGroup from './index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var renderItems = function renderItems(count) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return render(/*#__PURE__*/_jsx(CollapsibleGroup, _objectSpread(_objectSpread({}, props), {}, {
+    children: Array.from({
+      length: count
+    }, function (_, i) {
+      return /*#__PURE__*/_jsx(CollapsibleGroup.Item, {
+        title: "Panel ".concat(i),
+        children: "content"
+      }, i);
+    })
+  })));
+};
+var dividers = function dividers(container) {
+  return container.querySelectorAll('.newspack-divider');
+};
+var items = function items(container) {
+  return container.querySelectorAll('.newspack-collapsible-group__item');
+};
+describe('CollapsibleGroup dividers', function () {
+  it('renders no divider for a single item', function () {
+    var _renderItems = renderItems(1),
+      container = _renderItems.container;
+    expect(items(container)).toHaveLength(1);
+    expect(dividers(container)).toHaveLength(0);
+  });
+  it('renders a divider between items but not after the last', function () {
+    var _renderItems2 = renderItems(3),
+      container = _renderItems2.container;
+    expect(items(container)).toHaveLength(3);
+    expect(dividers(container)).toHaveLength(2);
+    expect(container.querySelector('.newspack-collapsible-group').lastElementChild).not.toHaveClass('newspack-divider');
+  });
+  it('counts only rendered items when placing dividers', function () {
+    var _render = render(/*#__PURE__*/_jsxs(CollapsibleGroup, {
+        children: [/*#__PURE__*/_jsx(CollapsibleGroup.Item, {
+          title: "Panel 0",
+          children: "content"
+        }), /*#__PURE__*/_jsx(CollapsibleGroup.Item, {
+          title: "Panel 1",
+          children: "content"
+        }), false, 'trailing text']
+      })),
+      container = _render.container;
+    expect(items(container)).toHaveLength(2);
+    expect(dividers(container)).toHaveLength(1);
+    expect(container.querySelector('.newspack-collapsible-group').lastElementChild).not.toHaveClass('newspack-divider');
+  });
+  it('renders tertiary dividers', function () {
+    var _renderItems3 = renderItems(2),
+      container = _renderItems3.container;
+    expect(dividers(container)[0]).toHaveClass('newspack-divider--variant-tertiary');
+  });
+});
+describe('CollapsibleGroup titleLevel', function () {
+  it('renders item titles as h2 by default', function () {
+    renderItems(2);
+    expect(screen.getAllByRole('heading', {
+      level: 2
+    })).toHaveLength(2);
+  });
+  it('renders every item title at the level given', function () {
+    renderItems(2, {
+      titleLevel: 3
+    });
+    expect(screen.getAllByRole('heading', {
+      level: 3
+    })).toHaveLength(2);
+    expect(screen.queryByRole('heading', {
+      level: 2
+    })).not.toBeInTheDocument();
+  });
+  it('clamps a level above the heading range', function () {
+    renderItems(2, {
+      titleLevel: 7
+    });
+    expect(screen.getAllByRole('heading', {
+      level: 6
+    })).toHaveLength(2);
+  });
+  it('clamps a level below the heading range', function () {
+    renderItems(1, {
+      titleLevel: 0
+    });
+    expect(screen.getByRole('heading', {
+      level: 1
+    })).toBeInTheDocument();
+  });
+  it('inherits the level in a nested group', function () {
+    render(/*#__PURE__*/_jsx(CollapsibleGroup, {
+      titleLevel: 4,
+      children: /*#__PURE__*/_jsx(CollapsibleGroup.Item, {
+        title: "Outer",
+        defaultOpen: true,
+        children: /*#__PURE__*/_jsx(CollapsibleGroup, {
+          children: /*#__PURE__*/_jsx(CollapsibleGroup.Item, {
+            title: "Inner",
+            children: "content"
+          })
+        })
+      })
+    }));
+    expect(screen.getByRole('heading', {
+      level: 4,
+      name: 'Inner'
+    })).toBeInTheDocument();
+  });
+  it('inherits the level in a nested group when the title is hidden', function () {
+    render(/*#__PURE__*/_jsx(CollapsibleGroup, {
+      titleLevel: 4,
+      hideSingleTitle: true,
+      children: /*#__PURE__*/_jsx(CollapsibleGroup.Item, {
+        title: "Outer",
+        children: /*#__PURE__*/_jsx(CollapsibleGroup, {
+          children: /*#__PURE__*/_jsx(CollapsibleGroup.Item, {
+            title: "Inner",
+            children: "content"
+          })
+        })
+      })
+    }));
+    expect(screen.getByRole('heading', {
+      level: 4,
+      name: 'Inner'
+    })).toBeInTheDocument();
+  });
+});
+describe('CollapsibleGroup hideSingleTitle', function () {
+  it('keeps the title on a lone item by default', function () {
+    renderItems(1);
+    expect(screen.getByRole('button', {
+      name: 'Panel 0'
+    })).toBeInTheDocument();
+  });
+  it('drops the title and opens a lone item when set', function () {
+    renderItems(1, {
+      hideSingleTitle: true
+    });
+    expect(screen.queryByRole('button', {
+      name: 'Panel 0'
+    })).not.toBeInTheDocument();
+    expect(screen.getByText('content')).toBeVisible();
+  });
+  it('leaves titles alone when there is more than one item', function () {
+    renderItems(2, {
+      hideSingleTitle: true
+    });
+    expect(screen.getByRole('button', {
+      name: 'Panel 0'
+    })).toBeInTheDocument();
+    expect(screen.getByRole('button', {
+      name: 'Panel 1'
+    })).toBeInTheDocument();
+  });
+});
+describe('CollapsibleGroup item state', function () {
+  it('expands only the item marked defaultOpen', function () {
+    render(/*#__PURE__*/_jsxs(CollapsibleGroup, {
+      children: [/*#__PURE__*/_jsx(CollapsibleGroup.Item, {
+        title: "Open",
+        defaultOpen: true,
+        children: "open content"
+      }), /*#__PURE__*/_jsx(CollapsibleGroup.Item, {
+        title: "Closed",
+        children: "closed content"
+      })]
+    }));
+    expect(screen.getByRole('button', {
+      name: 'Open'
+    })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByRole('button', {
+      name: 'Closed'
+    })).toHaveAttribute('aria-expanded', 'false');
+  });
+  it('leaves a collapsed panel reachable by find-in-page', function () {
+    var _renderItems4 = renderItems(1),
+      container = _renderItems4.container;
+    expect(container.querySelector('.newspack-collapsible-group__panel')).toHaveAttribute('hidden', 'until-found');
+    expect(screen.getByText('content')).toBeInTheDocument();
+  });
+  it('opens an item when its trigger is clicked', function () {
+    var _renderItems5 = renderItems(1),
+      container = _renderItems5.container;
+    var trigger = screen.getByRole('button', {
+      name: 'Panel 0'
+    });
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(container.querySelector('.newspack-collapsible-group__panel')).not.toHaveAttribute('hidden');
+  });
+  it('closes an open item when its trigger is clicked', function () {
+    var _renderItems6 = renderItems(1),
+      container = _renderItems6.container;
+    var trigger = screen.getByRole('button', {
+      name: 'Panel 0'
+    });
+    fireEvent.click(trigger);
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(container.querySelector('.newspack-collapsible-group__panel')).toHaveAttribute('hidden', 'until-found');
+  });
+});

package/dist/esm/collapsible-group/item.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, chevronDown } from '@wordpress/icons';
+import { Collapsible } from '@wordpress/ui';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { useTitleLevel } from './context';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Item = function Item(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    title = _ref.title;
+  var titleLevel = useTitleLevel();
+  if (!title) {
+    return /*#__PURE__*/_jsx("div", {
+      className: classNames('newspack-collapsible-group__item', className),
+      children: children
+    });
+  }
+  var Heading = "h".concat(titleLevel);
+  return /*#__PURE__*/_jsxs(Collapsible.Root, {
+    className: classNames('newspack-collapsible-group__item', className),
+    defaultOpen: defaultOpen,
+    children: [/*#__PURE__*/_jsx(Heading, {
+      className: "newspack-collapsible-group__heading",
+      children: /*#__PURE__*/_jsxs(Collapsible.Trigger, {
+        className: "newspack-collapsible-group__trigger",
+        children: [title, /*#__PURE__*/_jsx(Icon, {
+          icon: chevronDown,
+          size: 24
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Collapsible.Panel, {
+      className: "newspack-collapsible-group__panel",
+      hiddenUntilFound: true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "newspack-collapsible-group__panel-inner",
+        children: children
+      })
+    })]
+  });
+};
+export default Item;

package/dist/esm/collapsible-group/root.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { Children, Fragment, cloneElement, isValidElement } from '@wordpress/element';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import Divider from '../divider';
+import { TitleLevelContext, useTitleLevel } from './context';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var clampTitleLevel = function clampTitleLevel(level) {
+  return Number.isFinite(level) ? Math.min(6, Math.max(1, Math.round(level))) : undefined;
+};
+var Root = function Root(_ref) {
+  var _clampTitleLevel;
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'xl' : _ref$gap,
+    _ref$hideSingleTitle = _ref.hideSingleTitle,
+    hideSingleTitle = _ref$hideSingleTitle === void 0 ? false : _ref$hideSingleTitle,
+    titleLevel = _ref.titleLevel;
+  var inheritedTitleLevel = useTitleLevel();
+  var items = Children.toArray(children).filter(isValidElement);
+  var hideTitle = hideSingleTitle && items.length === 1;
+  return /*#__PURE__*/_jsx(TitleLevelContext.Provider, {
+    value: (_clampTitleLevel = clampTitleLevel(titleLevel)) !== null && _clampTitleLevel !== void 0 ? _clampTitleLevel : inheritedTitleLevel,
+    children: /*#__PURE__*/_jsx(Stack, {
+      className: classNames('newspack-collapsible-group', className),
+      direction: "column",
+      gap: gap,
+      children: items.map(function (item, index) {
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [hideTitle ? cloneElement(item, {
+            title: undefined
+          }) : item, index < items.length - 1 && /*#__PURE__*/_jsx(Divider, {
+            variant: "tertiary",
+            marginBottom: 0,
+            marginTop: 0
+          })]
+        }, item.key);
+      })
+    })
+  });
+};
+export default Root;

package/dist/esm/collapsible-group/style.scss

@@ -0,0 +1,47 @@
+@use "../mixins" as mixins;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-collapsible-group {
+	&__heading {
+		margin: 0;
+	}
+
+	&__trigger {
+		@include wp-mixins.heading-large();
+		align-items: center;
+		background: none;
+		border: 0;
+		color: inherit;
+		cursor: pointer;
+		display: flex;
+		gap: wp-vars.$grid-unit-10;
+		justify-content: space-between;
+		padding: 0;
+		text-align: left;
+		width: 100%;
+
+		&:focus-visible {
+			@include mixins.wpds-focus-ring;
+			outline-offset: wp-vars.$grid-unit-05;
+		}
+
+		svg {
+			flex-shrink: 0;
+		}
+
+		&[aria-expanded="true"] svg {
+			transform: rotate(180deg);
+		}
+
+		@media (prefers-reduced-motion: no-preference) {
+			svg {
+				transition: transform 0.1s ease-out;
+			}
+		}
+	}
+
+	&__panel-inner {
+		padding-top: wp-vars.$grid-unit-30;
+	}
+}

package/dist/esm/collapsible-group/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies.
+ */
+import { Stack } from '@wordpress/ui';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { useEmptyStateInvariant } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+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;
+  useEmptyStateInvariant();
+  var isColumn = orientation === 'column';
+
+  // Rows wrap: the empty state only gets half the grid above 1054px.
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: isColumn ? 'column' : 'row',
+    align: "center",
+    justify: "center",
+    gap: gap,
+    wrap: isColumn ? undefined : 'wrap',
+    className: classnames('newspack-empty-state__actions', className),
+    children: children
+  });
+};
+export default Actions;

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

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies.
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+
+export var EmptyStateContext = createContext(null);
+var FALLBACK_CONTEXT = {
+  size: 'default'
+};
+export var useEmptyStateContext = function useEmptyStateContext() {
+  var context = 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.
+ */
+export var useEmptyStateInvariant = function useEmptyStateInvariant() {
+  var context = useContext(EmptyStateContext);
+  if (!context && process.env.NODE_ENV !== 'production') {
+    throw new Error('EmptyState subcomponents must be rendered inside EmptyState.Root.');
+  }
+};