newspack-components 4.10.0 → 4.12.0-alpha.1

package/dist/cjs/reorder-modal/style.scss

@@ -0,0 +1,114 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-reorder-modal {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		min-height: calc(#{wp-vars.$grid-unit} * 23);
+	}
+
+	&__loading {
+		align-items: center;
+		display: flex;
+		flex: 1;
+		justify-content: center;
+	}
+
+	&__notice {
+		margin: 0 0 wp-vars.$grid-unit-10;
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		gap: wp-vars.$grid-unit-10;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	&__item {
+		--newspack-reorder-modal-divider: #{wp-colors.$gray-100};
+		--wp-ui-card-padding: #{wp-vars.$grid-unit-15};
+
+		align-items: stretch;
+		cursor: grab;
+		flex-direction: row;
+		margin: 0;
+
+		&:focus-within,
+		&:hover {
+			--newspack-reorder-modal-divider: #{wp-colors.$gray-300};
+
+			border-color: wp-colors.$gray-300;
+		}
+
+		&.is-dragging {
+			cursor: grabbing;
+			opacity: 0.5;
+		}
+	}
+
+	&__grip {
+		align-items: center;
+		color: wp-colors.$gray-700;
+		display: flex;
+		padding-left: wp-vars.$grid-unit-05;
+	}
+
+	&__move {
+		align-items: center;
+		border-right: 1px solid var(--newspack-reorder-modal-divider);
+		display: flex;
+		flex-direction: column;
+		padding: wp-vars.$grid-unit-05;
+	}
+
+	&__content {
+		align-items: center;
+		align-self: center;
+		display: flex;
+		flex: 1;
+		gap: wp-vars.$grid-unit-10;
+		min-width: 0;
+		padding-block-end: var(--wp-ui-card-padding);
+	}
+
+	&__title {
+		@include wp-mixins.heading-large();
+
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__badge {
+		display: flex;
+		flex-shrink: 0;
+	}
+
+	&__toggle {
+		align-items: center;
+		display: flex;
+		padding-inline-end: wp-vars.$grid-unit-15;
+	}
+
+	&__description {
+		margin: 0 0 wp-vars.$grid-unit-20;
+	}
+
+	&__item.is-off &__title {
+		color: wp-colors.$gray-700;
+	}
+
+	&__footer {
+		display: flex;
+		gap: wp-vars.$grid-unit-10;
+		justify-content: flex-end;
+		margin-top: auto;
+		padding-top: wp-vars.$grid-unit-30;
+	}
+}

package/dist/cjs/tabbed-navigation/style.scss

@@ -21,6 +21,11 @@
 	/* stylelint-disable-next-line plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the indicator token. */
 	--wpds-color-stroke-interactive-neutral-strong: #{np-colors.$primary-600};
 
+	[role="tablist"] {
+		max-width: 100%;
+		overflow-x: auto;
+	}
+
 	a[role="tab"] {
 		text-decoration: none;
 

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _compose = require("@wordpress/compose");
+var _ui = require("@wordpress/ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * A badge whose tooltip explains it. The tooltip serves mouse and keyboard users;
+ * screen readers get the same text as the trigger's description, which keeps it
+ * out of the accessible name of a heading the badge sits in.
+ */
+var _TooltipBadge = function TooltipBadge(_ref) {
+  var label = _ref.label,
+    tooltip = _ref.tooltip,
+    _ref$intent = _ref.intent,
+    intent = _ref$intent === void 0 ? 'none' : _ref$intent;
+  var descriptionId = (0, _compose.useInstanceId)(_TooltipBadge, 'newspack-tooltip-badge');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Tooltip.Root, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Tooltip.Trigger, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          tabIndex: 0,
+          "aria-describedby": descriptionId
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Badge, {
+          intent: intent,
+          children: label
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Tooltip.Popup, {
+        children: tooltip
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      id: descriptionId,
+      hidden: true,
+      children: tooltip
+    })]
+  });
+};
+var _default = exports["default"] = _TooltipBadge;

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

@@ -0,0 +1,30 @@
+"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('TooltipBadge', function () {
+  it('describes its focusable trigger with the tooltip text, keeping it out of a surrounding heading name', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+      children: ["Registration wall", /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        label: "Overrides paid access",
+        tooltip: "This grants registered readers access.",
+        intent: "low"
+      })]
+    }));
+    expect(_react.screen.getByRole('heading', {
+      name: 'Registration wall Overrides paid access'
+    })).toBeInTheDocument();
+    var trigger = _react.screen.getByText('Overrides paid access').closest('[tabindex="0"]');
+    expect(trigger).toHaveAccessibleDescription('This grants registered readers access.');
+  });
+});

package/dist/cjs/wizard/index.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("@wordpress/components");
+var _ui = require("@wordpress/ui");
 var _data = require("@wordpress/data");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -114,12 +115,13 @@ var ResetHeaderData = function ResetHeaderData() {
  * can read the current route and derive the active-tab breadcrumb.
  */
 var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
-  var _activeSection;
+  var _activeSection, _activeSection2;
   var hideHeader = _ref.hideHeader,
     headerText = _ref.headerText,
     sections = _ref.sections,
     sectionName = _ref.sectionName,
     subTitle = _ref.subTitle,
+    headerSubTitle = _ref.headerSubTitle,
     actions = _ref.actions,
     wizardTabbedNavigation = _ref.tabbedNavigation,
     children = _ref.children;
@@ -149,11 +151,19 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
         break;
       }
     }
+
+    // WizardError normally mounts inside the tab bar, so a route without one renders it itself.
   } catch (err) {
     _iterator.e(err);
   } finally {
     _iterator.f();
   }
+  if ((_activeSection = (0, _breadcrumbsSelect.activeSection)(sections, pathname)) !== null && _activeSection !== void 0 && _activeSection.hideTabbedNavigation && tabbedNavigation) {
+    tabbedNavigation = null;
+    children = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError["default"], {}), children]
+    });
+  }
   if (hideHeader) {
     // Without the Page shell the tabs still own the content: it renders
     // inside the active tab's panel.
@@ -173,10 +183,10 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
   // Append any render-time leaf crumb(s) the section supplied via
   // headerData.sectionName (deduped against the current trailing label).
   breadcrumbItems = (0, _breadcrumbsSelect.appendSectionName)(breadcrumbItems, sectionName);
-  var sectionSubTitle = (_activeSection = (0, _breadcrumbsSelect.activeSection)(sections, pathname)) === null || _activeSection === void 0 ? void 0 : _activeSection.subHeaderText;
+  var sectionSubTitle = (_activeSection2 = (0, _breadcrumbsSelect.activeSection)(sections, pathname)) === null || _activeSection2 === void 0 ? void 0 : _activeSection2.subHeaderText;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
     breadcrumbItems: breadcrumbItems,
-    subTitle: sectionSubTitle !== null && sectionSubTitle !== void 0 ? sectionSubTitle : subTitle,
+    subTitle: headerSubTitle || (sectionSubTitle !== null && sectionSubTitle !== void 0 ? sectionSubTitle : subTitle),
     actions: actions,
     tabbedNavigation: tabbedNavigation,
     children: children
@@ -189,7 +199,7 @@ var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
  * @property {string}     [subHeaderText]           The sub-header text, optional.
  * @property {string}     [apiSlug]                 The API slug, optional.
  * @property {string}     [className]               CSS classes, optional.
- * @property {any[]}      sections                  Array of sections. A section's own `subHeaderText` replaces the wizard's while it is active.
+ * @property {any[]}      sections                  Array of sections. A section's own `subHeaderText` replaces the wizard's while it is active, and `hideTabbedNavigation` hides the tab bar on its route.
  *                                                  Its optional `tabbedNavigation( params )` returns the tab items shown while its route matches.
  * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
  * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
@@ -247,7 +257,8 @@ var Wizard = function Wizard(_ref2, ref) {
     sectionSize = headerData.sectionSize,
     sectionTitle = headerData.sectionTitle,
     sectionPrimaryAction = headerData.sectionPrimaryAction,
-    sectionSecondaryAction = headerData.sectionSecondaryAction;
+    sectionSecondaryAction = headerData.sectionSecondaryAction,
+    headerSubTitle = headerData.subTitle;
   var mainActions = actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
     return action.type === 'primary' || action.type === 'secondary';
   });
@@ -310,9 +321,10 @@ var Wizard = function Wizard(_ref2, ref) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [!pluginRequirementsKnown && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "newspack-wizard__loader",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-              alignment: "center",
-              spacing: 2,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+              direction: "column",
+              align: "center",
+              gap: "sm",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
                 noMargin: true
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
@@ -466,6 +478,7 @@ var Wizard = function Wizard(_ref2, ref) {
             sections: routedSections,
             sectionName: sectionName,
             subTitle: subHeaderText,
+            headerSubTitle: headerSubTitle,
             actions: headerActions,
             tabbedNavigation: tabbedNavigation,
             children: content

package/dist/cjs/wizard/index.test.js

@@ -548,4 +548,82 @@ describe('Wizard section subtitle', function () {
       }
     }, _callee1);
   })));
+});
+describe('Wizard tab bar on hidden routes', function () {
+  beforeEach(function () {
+    _apiFetch["default"].mockReset();
+    _apiFetch["default"].mockResolvedValue({});
+  });
+  it('hides the tab bar on a hideTabbedNavigation route and restores it on a tab route', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee10() {
+    var _t10, _t11, _t12;
+    return _regenerator().w(function (_context10) {
+      while (1) switch (_context10.n) {
+        case 0:
+          window.location.hash = '#/list';
+          (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+            headerText: "Test wizard",
+            sections: [{
+              label: 'List',
+              path: '/list',
+              exact: true,
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "List view"
+                });
+              }
+            }, {
+              label: 'Other',
+              path: '/other',
+              exact: true,
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "Other view"
+                });
+              }
+            }, {
+              path: '/list/:id',
+              isHidden: true,
+              hideTabbedNavigation: true,
+              render: function render() {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "Item view"
+                });
+              }
+            }]
+          }));
+          _t10 = expect;
+          _context10.n = 1;
+          return _react.screen.findByText('List view');
+        case 1:
+          _t10(_context10.v).toBeInTheDocument();
+          expect(_react.screen.getByRole('tab', {
+            name: 'Other'
+          })).toBeInTheDocument();
+          (0, _react.act)(function () {
+            window.location.hash = '#/list/esp';
+            window.dispatchEvent(new HashChangeEvent('hashchange'));
+          });
+          _t11 = expect;
+          _context10.n = 2;
+          return _react.screen.findByText('Item view');
+        case 2:
+          _t11(_context10.v).toBeInTheDocument();
+          expect(_react.screen.queryByRole('tab')).not.toBeInTheDocument();
+          (0, _react.act)(function () {
+            window.location.hash = '#/list';
+            window.dispatchEvent(new HashChangeEvent('hashchange'));
+          });
+          _t12 = expect;
+          _context10.n = 3;
+          return _react.screen.findByText('List view');
+        case 3:
+          _t12(_context10.v).toBeInTheDocument();
+          expect(_react.screen.getByRole('tab', {
+            name: 'Other'
+          })).toBeInTheDocument();
+        case 4:
+          return _context10.a(2);
+      }
+    }, _callee10);
+  })));
 });

package/dist/cjs/wizard/store/index.js

@@ -31,7 +31,8 @@ var DEFAULT_STATE = {
     badges: [],
     sectionDescription: '',
     sectionName: '',
-    sectionTitle: ''
+    sectionTitle: '',
+    subTitle: ''
   },
   isLoading: false,
   isQuietLoading: false,

package/dist/esm/breadcrumbs/index.js

@@ -92,6 +92,7 @@ var Breadcrumbs = function Breadcrumbs(_ref3) {
       render: /*#__PURE__*/_jsx("ul", {}),
       direction: "row",
       align: "center",
+      wrap: "wrap",
       className: "newspack-breadcrumbs__list",
       children: [preceding.map(function (item, index) {
         return /*#__PURE__*/_jsxs("li", {

package/dist/esm/breadcrumbs/style.scss

@@ -7,8 +7,8 @@
 	padding: 0;
 
 	> li {
-		flex-shrink: 0;
 		margin: 0;
+		min-width: 0;
 
 		a {
 			color: wp-colors.$gray-900;
@@ -20,11 +20,6 @@
 			}
 		}
 	}
-
-	> li:last-child {
-		flex-shrink: 1;
-		min-width: 0;
-	}
 }
 
 .newspack-breadcrumbs__count {
@@ -39,9 +34,7 @@
 }
 
 .newspack-breadcrumbs__list h1.newspack-breadcrumbs__current {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	overflow-wrap: break-word;
 	padding: 0;
-	line-height: normal;
+	line-height: var(--wpds-typography-line-height-md, #{wp-vars.$grid-unit-30});
 }

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

@@ -221,7 +221,7 @@
 				color: inherit;
 				text-decoration: none;
 				&:hover {
-					text-decoration: underline;
+					color: var(--wp-admin-theme-color);
 				}
 			}
 		}

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

@@ -7,23 +7,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Card - Sortable list component.
  */
 
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies.
  */
-import { Disabled, Draggable, __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Disabled, Draggable } from '@wordpress/components';
 import { useEffect, useLayoutEffect, useRef, useState } from '@wordpress/element';
-import { Badge } from '@wordpress/ui';
+import { Badge, Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
-import { Card } from '../';
+import Card from '../card';
+import TooltipBadge from '../tooltip-badge';
 import './style.scss';
-
-/**
- * External dependencies
- */
-import classNames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var DROP_ANIMATION_DURATION = 400; // ms — must match $drop-duration in style.scss
 var BUTTON_MOVE_DURATION = 200; // ms — must match $shift-duration in style.scss
@@ -346,13 +347,14 @@ var CardSortableList = function CardSortableList(_ref) {
     return 0;
   };
   var isDragging = draggingIndex !== null;
-  return /*#__PURE__*/_jsx(VStack, {
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: "column",
+    gap: "lg",
     ref: listRef,
     className: classNames('newspack-card--core--sortable-list', disabled && 'newspack-card--core--sortable-list__is-disabled', isDragging && 'newspack-card--core--sortable-list__is-dragging'),
     style: measurements ? {
       height: measurements.lockedHeight
     } : undefined,
-    spacing: 4,
     children: sortedItems.map(function (item, index) {
       var translateY = getTranslateY(index);
       return /*#__PURE__*/_jsx(Disabled, {
@@ -384,7 +386,7 @@ var CardSortableList = function CardSortableList(_ref) {
             onDragEnd: handleDragEnd,
             appendToOwnerDocument: true,
             children: function children(_ref2) {
-              var _item$badge, _item$badge$intent;
+              var _item$badge, _item$badge$intent, _item$secondaryBadge, _item$secondaryBadge$;
               var onDraggableStart = _ref2.onDraggableStart,
                 onDraggableEnd = _ref2.onDraggableEnd;
               return /*#__PURE__*/_jsx(Card, {
@@ -399,7 +401,14 @@ var CardSortableList = function CardSortableList(_ref) {
                       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$secondaryBadge = item.secondaryBadge) === null || _item$secondaryBadge === void 0 ? void 0 : _item$secondaryBadge.label) && (item.secondaryBadge.tooltip ? /*#__PURE__*/_jsx(TooltipBadge, {
+                        label: item.secondaryBadge.label,
+                        tooltip: item.secondaryBadge.tooltip,
+                        intent: item.secondaryBadge.intent
+                      }) : /*#__PURE__*/_jsx(Badge, {
+                        intent: (_item$secondaryBadge$ = item.secondaryBadge.intent) !== null && _item$secondaryBadge$ !== void 0 ? _item$secondaryBadge$ : 'none',
+                        children: item.secondaryBadge.label
+                      }))]
                     }), item.description && /*#__PURE__*/_jsx("p", {
                       children: item.description
                     })]
@@ -412,7 +421,10 @@ var CardSortableList = function CardSortableList(_ref) {
                 }, item.onToggleChange !== undefined && {
                   actionType: 'toggle',
                   isActive: item.toggleChecked,
-                  onToggle: item.onToggleChange
+                  onToggle: item.onToggleChange,
+                  // Names the toggle for assistive tech. The card hides this
+                  // label, since the header already shows the title.
+                  title: item.title
                 }), item.actions !== undefined && {
                   actions: item.actions
                 })

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

@@ -43,4 +43,25 @@ describe('CardSortableList', function () {
     // An unguarded Badge would still emit an empty span, so assert on element children.
     expect(container.querySelector('h3').children).toHaveLength(0);
   });
+  it('names each toggle after its item', function () {
+    render(/*#__PURE__*/_jsx(CardSortableList, {
+      items: [{
+        id: 1,
+        title: 'Homepage',
+        toggleChecked: true,
+        onToggleChange: function onToggleChange() {}
+      }, {
+        id: 2,
+        title: 'About',
+        toggleChecked: false,
+        onToggleChange: function onToggleChange() {}
+      }]
+    }));
+    expect(screen.getByRole('checkbox', {
+      name: 'Homepage'
+    })).toBeChecked();
+    expect(screen.getByRole('checkbox', {
+      name: 'About'
+    })).not.toBeChecked();
+  });
 });

package/dist/esm/card-sortable-list/style.scss

@@ -6,6 +6,14 @@ $drop-duration: 400ms; /* must match DROP_ANIMATION_DURATION in index.tsx */
 	&__item {
 		cursor: grab;
 
+		/*
+		 * Keep a card's title in the case it was written in. The block editor
+		 * sidebar uppercases every h3 (`.interface-complementary-area h3`).
+		 */
+		.newspack-card--core__header-content h3 {
+			text-transform: none;
+		}
+
 		/*
 		 * Animate items sliding to fill/make space around the dragged item.
 		 */

package/dist/esm/drawer/body.js

@@ -2,9 +2,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * WordPress dependencies.
  */
-import { __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies.
@@ -54,11 +54,10 @@ var Body = function Body(_ref) {
       mutation.disconnect();
     };
   }, [node]);
-  return /*#__PURE__*/_jsx(VStack, {
+  return /*#__PURE__*/_jsx(Stack, {
     ref: setNode,
-    className: "newspack-drawer__body",
-    spacing: 0,
-    justify: "flex-start"
+    direction: "column",
+    className: "newspack-drawer__body"
     // A bare div is role=generic, where ARIA prohibits an author name.
     ,
     role: isScrollable ? 'group' : undefined,

package/dist/esm/drawer/content.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies.
  */
-import { __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
-import { Children, isValidElement } from '@wordpress/element';
+import { Stack } from '@wordpress/ui';
 
 /**
  * External dependencies.
@@ -13,51 +12,23 @@ import classnames from 'classnames';
  * Internal dependencies.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-// VStack drops non-elements, a lone string aside. A run shares one wrapper so
-// `Edited by { name }` is one row, not three.
-var asRows = function asRows(children) {
-  if ('string' === typeof children) {
-    return children;
-  }
-  var rows = [];
-  var text = [];
-  var flushText = function flushText() {
-    if (text.some(function (part) {
-      return '' !== String(part).trim();
-    })) {
-      rows.push(/*#__PURE__*/_jsx("div", {
-        children: text
-      }, "text-".concat(rows.length)));
-    }
-    text = [];
-  };
-  Children.toArray(children).forEach(function (child) {
-    if (isValidElement(child)) {
-      flushText();
-      rows.push(child);
-    } else {
-      text.push(child);
-    }
-  });
-  flushText();
-  return rows;
-};
 var Content = function Content(_ref) {
   var _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? 6 : _ref$padding,
     _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? 4 : _ref$gap,
+    gap = _ref$gap === void 0 ? 'lg' : _ref$gap,
     className = _ref.className,
     children = _ref.children;
-  return /*#__PURE__*/_jsx(VStack, {
-    className: classnames('newspack-drawer__content', className),
-    spacing: gap
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: "column",
+    gap: gap,
+    className: classnames('newspack-drawer__content', className)
     // A custom property, not inline padding, so the stylesheet's seam rules win.
     ,
     style: {
       '--newspack-drawer-content-padding': "".concat(padding * 4, "px")
     },
-    children: asRows(children)
+    children: children
   });
 };
 export default Content;