newspack-components 4.8.0 → 4.9.0-alpha.1

package/dist/cjs/card-feature/index.test.js

@@ -91,7 +91,8 @@ describe('CardFeature', function () {
     it('names the feature in the configure state too', function () {
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content Gifting",
-        enabled: true
+        enabled: true,
+        onConfigure: function onConfigure() {}
       }));
       expect(_react.screen.getByRole('button', {
         name: 'Configure Content Gifting'
@@ -160,6 +161,72 @@ describe('CardFeature', function () {
       expect(onConfigure).toHaveBeenCalledTimes(1);
       expect(onEnable).not.toHaveBeenCalled();
     });
+
+    // A button reading Configure with nothing behind it would click to nowhere.
+    it('drops the primary button once enabled when there is nothing to configure', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true,
+        onEnable: jest.fn(),
+        moreControls: [{
+          title: 'Disable',
+          onClick: jest.fn()
+        }]
+      }));
+      expect(_react.screen.queryByRole('button', {
+        name: /Configure/
+      })).toBeNull();
+      expect(moreMenu()).toBeInTheDocument();
+    });
+
+    // Enabling removes the button that was just used; without a hand-off,
+    // keyboard focus falls to the page.
+    it('hands focus to the More menu when enabling removes the focused button', function () {
+      var props = {
+        title: 'Content gifting',
+        onEnable: jest.fn(),
+        moreControls: [{
+          title: 'Disable',
+          onClick: jest.fn()
+        }]
+      };
+      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread({}, props))),
+        rerender = _render2.rerender;
+      primaryButton().focus();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread(_objectSpread({}, props), {}, {
+        enabled: true
+      })));
+      expect(moreMenu()).toHaveFocus();
+    });
+    it('leaves focus alone when the removed button did not have it', function () {
+      var props = {
+        title: 'Content gifting',
+        onEnable: jest.fn(),
+        moreControls: [{
+          title: 'Disable',
+          onClick: jest.fn()
+        }]
+      };
+      var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            children: "Elsewhere"
+          })]
+        })),
+        rerender = _render3.rerender;
+      _react.screen.getByRole('button', {
+        name: 'Elsewhere'
+      }).focus();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread(_objectSpread({}, props), {}, {
+          enabled: true
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          children: "Elsewhere"
+        })]
+      }));
+      expect(_react.screen.getByRole('button', {
+        name: 'Elsewhere'
+      })).toHaveFocus();
+    });
     it('still routes to onEnable when enabled with an unmet requirement, since the button reads Enable', function () {
       var onEnable = jest.fn();
       var onConfigure = jest.fn();
@@ -217,18 +284,19 @@ describe('CardFeature', function () {
     it('leaves the enabled badge unlinked, since it explains nothing about the button', function () {
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
-        enabled: true
+        enabled: true,
+        onConfigure: function onConfigure() {}
       }));
       expect(primaryButton()).not.toHaveAttribute('aria-describedby');
     });
     it('disables the button while an action is in flight, even with an actionable requirement', function () {
       var onEnable = jest.fn();
-      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           busy: true,
           onEnable: onEnable
         })),
-        rerender = _render2.rerender;
+        rerender = _render4.rerender;
       expect(primaryButton()).toHaveAttribute('aria-disabled', 'true');
       _react.fireEvent.click(primaryButton());
       expect(onEnable).not.toHaveBeenCalled();
@@ -242,12 +310,12 @@ describe('CardFeature', function () {
       expect(primaryButton()).toHaveAttribute('aria-disabled', 'true');
     });
     it('accepts custom labels for both states', function () {
-      var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Apple News",
           enableLabel: "Connect",
           configureLabel: "Manage connection"
         })),
-        rerender = _render3.rerender;
+        rerender = _render5.rerender;
       expect(_react.screen.getByRole('button', {
         name: 'Connect Apple News'
       })).toBeInTheDocument();
@@ -255,7 +323,8 @@ describe('CardFeature', function () {
         title: "Apple News",
         enabled: true,
         enableLabel: "Connect",
-        configureLabel: "Manage connection"
+        configureLabel: "Manage connection",
+        onConfigure: function onConfigure() {}
       }));
       expect(_react.screen.getByRole('button', {
         name: 'Manage connection Apple News'
@@ -264,10 +333,10 @@ describe('CardFeature', function () {
   });
   describe('badge', function () {
     it('shows nothing when off, and the enabled badge when on', function () {
-      var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting"
         })),
-        rerender = _render4.rerender;
+        rerender = _render6.rerender;
       expect(_react.screen.queryByText('Enabled')).not.toBeInTheDocument();
       rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
@@ -302,11 +371,11 @@ describe('CardFeature', function () {
       onClick: jest.fn()
     }];
     it('appears only when enabled and controls are supplied', function () {
-      var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           moreControls: controls
         })),
-        rerender = _render5.rerender;
+        rerender = _render7.rerender;
       expect(moreMenu()).not.toBeInTheDocument();
       rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
@@ -321,14 +390,14 @@ describe('CardFeature', function () {
       expect(moreMenu()).toBeInTheDocument();
     });
     it('stays available on an actionable requirement and hides on a locked one', function () {
-      var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           enabled: true,
           requirements: "Requires metering",
           requirementsActionable: true,
           moreControls: controls
         })),
-        rerender = _render6.rerender;
+        rerender = _render8.rerender;
       expect(moreMenu()).toBeInTheDocument();
       rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
@@ -341,88 +410,74 @@ describe('CardFeature', function () {
   });
   describe('icon', function () {
     it('renders a ready element as-is, without the descriptor container', function () {
-      var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             "data-testid": "ready-icon"
           })
         })),
-        container = _render7.container;
+        container = _render9.container;
       expect(_react.screen.getByTestId('ready-icon')).toBeInTheDocument();
       expect(container.querySelector('.newspack-card-feature__icon')).toBeNull();
     });
-    it('applies the descriptor colours inline and rounds fully on request', function () {
-      var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+    it('applies the descriptor colours inline and rounds a backed icon', function () {
+      var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           icon: {
             node: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               "data-testid": "descriptor-icon"
             }),
             fill: '#003da5',
-            backgroundColor: '#dfe7f4',
-            radius: 'full'
+            backgroundColor: '#dfe7f4'
           }
         })),
-        container = _render8.container;
+        container = _render0.container;
       var iconContainer = container.querySelector('.newspack-card-feature__icon');
       expect(_react.screen.getByTestId('descriptor-icon')).toBeInTheDocument();
-      expect(iconContainer).toHaveClass('newspack-card-feature__icon--radius-full');
+      expect(iconContainer).toHaveClass('newspack-card-feature__icon--has-background');
       expect(iconContainer).toHaveStyle({
         backgroundColor: '#dfe7f4',
         color: '#003da5'
       });
     });
     it('hides the descriptor container from assistive tech, since the title already names the feature', function () {
-      var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           icon: {
             node: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
           }
         })),
-        container = _render9.container;
+        container = _render1.container;
       expect(container.querySelector('.newspack-card-feature__icon')).toHaveAttribute('aria-hidden', 'true');
     });
-    it('falls back to small corners when a background is set without a radius', function () {
-      var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
-          title: "Content gifting",
-          icon: {
-            node: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}),
-            backgroundColor: '#dfe7f4'
-          }
-        })),
-        container = _render0.container;
-      var iconContainer = container.querySelector('.newspack-card-feature__icon');
-      expect(iconContainer).toHaveClass('newspack-card-feature__icon--radius-small');
-      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--radius-full');
-    });
-    it('leaves an unbacked descriptor icon without a radius class', function () {
-      var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+    it('leaves an unbacked descriptor icon without the background class', function () {
+      var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           icon: {
             node: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}),
             fill: '#003da5'
           }
         })),
-        container = _render1.container;
+        container = _render10.container;
       var iconContainer = container.querySelector('.newspack-card-feature__icon');
-      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--radius-small');
+      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--has-background');
     });
   });
   it('passes className through to the card element', function () {
-    var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+    var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
         className: "newspack-subscribers__card"
       })),
-      container = _render10.container;
+      container = _render11.container;
     expect(container.querySelector('.newspack-card-feature')).toHaveClass('newspack-subscribers__card');
   });
   it('marks the card as muted only when requirements are set', function () {
-    var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+    var _render12 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
         enabled: true
       })),
-      container = _render11.container,
-      rerender = _render11.rerender;
+      container = _render12.container,
+      rerender = _render12.rerender;
     expect(container.querySelector('.newspack-card-feature--muted')).toBeNull();
     rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
       title: "Content gifting",

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

@@ -49,11 +49,7 @@
 			width: wp-vars.$grid-unit-30;
 		}
 
-		&--radius-small {
-			border-radius: wp-vars.$radius-small;
-		}
-
-		&--radius-full {
+		&--has-background {
 			border-radius: wp-vars.$radius-round;
 		}
 	}

package/dist/cjs/debug-badge/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Debug Badge
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * Debug Badge component.
+ *
+ * Gates itself on `window.newspack_aux_data.is_debug_mode`, so consumers render
+ * it unconditionally and it stays absent outside debug mode.
+ *
+ * @return {JSX.Element|null} Debug Badge component, or nothing outside debug mode.
+ */var DebugBadge = function DebugBadge() {
+  var _window$newspack_aux_;
+  if (!((_window$newspack_aux_ = window.newspack_aux_data) !== null && _window$newspack_aux_ !== void 0 && _window$newspack_aux_.is_debug_mode)) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "newspack-debug-badge",
+    role: "img",
+    "aria-label": (0, _i18n.__)('Debug mode', 'newspack-plugin'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+      icon: _icons.bug
+    })
+  });
+};
+var _default = exports["default"] = DebugBadge;

package/dist/cjs/debug-badge/index.test.js

@@ -0,0 +1,50 @@
+"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('DebugBadge', function () {
+  afterEach(function () {
+    delete window.newspack_aux_data;
+  });
+  it('renders the badge and its glyph in debug mode', function () {
+    window.newspack_aux_data = {
+      is_debug_mode: true
+    };
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {})),
+      container = _render.container;
+    expect(container.querySelector('.newspack-debug-badge')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-debug-badge > svg')).toBeInTheDocument();
+  });
+  it('names itself for assistive tech', function () {
+    window.newspack_aux_data = {
+      is_debug_mode: true
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {}));
+    expect(_react.screen.getByRole('img', {
+      name: 'Debug mode'
+    })).toBeInTheDocument();
+  });
+  it('renders nothing outside debug mode', function () {
+    window.newspack_aux_data = {
+      is_debug_mode: false
+    };
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {})),
+      container = _render2.container;
+    expect(container).toBeEmptyDOMElement();
+  });
+  it('renders nothing when the global is absent', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {})),
+      container = _render3.container;
+    expect(container).toBeEmptyDOMElement();
+  });
+});

package/dist/cjs/debug-badge/style.scss

@@ -0,0 +1,26 @@
+/**
+ * Debug Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+@use "../../../colors/colors.module" as np-colors;
+
+.newspack-debug-badge {
+	background: np-colors.$primary-600;
+	border-radius: wp-vars.$radius-round;
+	bottom: 0;
+	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	display: grid;
+	height: wp-vars.$button-size;
+	margin: 0 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;
+	place-items: center;
+	pointer-events: none;
+	position: fixed;
+	width: wp-vars.$button-size;
+	z-index: 9997;
+
+	> svg {
+		fill: wp-colors.$white;
+	}
+}

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

@@ -53,17 +53,30 @@ describe('EmptyState.Root', function () {
       gap: 'var(--wpds-dimension-gap-2xl, 32px)'
     });
   });
+  it('tightens the stack gap when small', function () {
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        size: "small",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render4.container;
+    var stack = container.querySelector('.newspack-empty-state').firstElementChild;
+    expect(stack).toHaveStyle({
+      gap: 'var(--wpds-dimension-gap-xl, 24px)'
+    });
+  });
 
   // 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, {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         className: "consumer-empty-state",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           children: "body"
         })
       })),
-      container = _render4.container;
+      container = _render5.container;
     expect(container.querySelector('.newspack-empty-state')).toHaveClass('consumer-empty-state');
   });
 
@@ -80,13 +93,13 @@ describe('EmptyState.Root', function () {
 });
 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, {
+    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 = _render5.container;
+      container = _render6.container;
     expect(container.querySelector('.newspack-empty-state__title')).toHaveTextContent('Get started with newsletters');
     expect(container.querySelector('.newspack-empty-state__description')).toHaveTextContent('Compose and send.');
   });
@@ -94,13 +107,13 @@ describe('EmptyState.Header', function () {
   // 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, {
+    var _render7 = (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;
+      container = _render7.container;
     var header = container.querySelector('.newspack-empty-state__header');
     expect(header).toHaveStyle({
       flexDirection: 'column',
@@ -114,33 +127,33 @@ describe('EmptyState.Header', function () {
     });
   });
   it('wraps the icon in the disc', function () {
-    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render8 = (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;
+      container = _render8.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, {
+    var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "Get started with newsletters"
         })
       })),
-      container = _render8.container;
+      container = _render9.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, {
+    var _render0 = (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;
+      container = _render0.container;
     expect(_react.screen.getByRole('heading', {
       level: 2,
       name: 'Get started with newsletters'
@@ -149,14 +162,14 @@ describe('EmptyState.Header', function () {
     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, {
+    var _render1 = (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;
+      container = _render1.container;
     expect(container.querySelector('.newspack-empty-state__header--small')).toBeInTheDocument();
     expect(_react.screen.getByRole('heading', {
       level: 3,
@@ -181,13 +194,13 @@ describe('EmptyState.Header', function () {
     })).toBeInTheDocument();
   });
   it('carries its own class hook alongside any className', function () {
-    var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render10 = (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;
+      container = _render10.container;
     var header = container.querySelector('.newspack-empty-state__header');
     expect(header).toBeInTheDocument();
     expect(header).toHaveClass('consumer-header');
@@ -211,11 +224,11 @@ describe('EmptyState.Header', function () {
     var previous = process.env.NODE_ENV;
     process.env.NODE_ENV = 'production';
     try {
-      var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
+      var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Header, {
           title: "Orphan",
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
         })),
-        container = _render10.container;
+        container = _render11.container;
       expect(_react.screen.getByRole('heading', {
         level: 2,
         name: 'Orphan'
@@ -229,7 +242,7 @@ describe('EmptyState.Header', function () {
 });
 describe('EmptyState.Actions', function () {
   it('renders its children in a centred row', function () {
-    var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render12 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Actions, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
             type: "button",
@@ -237,7 +250,7 @@ describe('EmptyState.Actions', function () {
           })
         })
       })),
-      container = _render11.container;
+      container = _render12.container;
     expect(container.querySelector('.newspack-empty-state__actions')).toBeInTheDocument();
     expect(container.querySelector('.newspack-empty-state__actions')).toHaveStyle({
       justifyContent: 'center',
@@ -248,7 +261,7 @@ describe('EmptyState.Actions', function () {
     })).toBeInTheDocument();
   });
   it('stacks into a column while keeping the hook class', function () {
-    var _render12 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+    var _render13 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"].Actions, {
           orientation: "column",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
@@ -260,7 +273,7 @@ describe('EmptyState.Actions', function () {
           })]
         })
       })),
-      container = _render12.container;
+      container = _render13.container;
     var actions = container.querySelector('.newspack-empty-state__actions');
     expect(actions).toBeInTheDocument();
     expect(actions).toHaveStyle({
@@ -291,10 +304,10 @@ describe('EmptyState.Actions', function () {
     var previous = process.env.NODE_ENV;
     process.env.NODE_ENV = 'production';
     try {
-      var _render13 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Actions, {
+      var _render14 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Actions, {
           children: "x"
         })),
-        container = _render13.container;
+        container = _render14.container;
       expect(container.querySelector('.newspack-empty-state__actions')).toBeInTheDocument();
     } finally {
       process.env.NODE_ENV = previous;

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

@@ -37,6 +37,7 @@ var Root = function Root(_ref) {
       size: size
     };
   }, [size]);
+  var isSmall = size === 'small';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.EmptyStateContext.Provider, {
     value: context,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_grid["default"], {
@@ -46,7 +47,7 @@ var Root = function Root(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Stack, _objectSpread(_objectSpread({
         className: "newspack-empty-state__stack",
         direction: "column",
-        gap: "2xl"
+        gap: isSmall ? 'xl' : '2xl'
       }, gridColumn), {}, {
         children: children
       }))