newspack-components 4.6.2 → 4.7.0-alpha.1

package/dist/cjs/confirm-dialog/index.test.js

@@ -65,6 +65,34 @@ describe('ConfirmDialog navigation blocking', function () {
     expect(replaceSpy).toHaveBeenCalledTimes(1);
     expect(history.location.pathname).toBe('/');
   });
+
+  // v5 keeps a single prompt slot, so an unprompted re-sync would be caught by
+  // whichever dialog on the screen did install a blocker.
+  it('cancels an unprompted dialog without tripping another blocker', function () {
+    var historyRef = {
+      current: null
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.MemoryRouter, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HistoryGrabber, {
+        historyRef: historyRef
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        when: true,
+        confirmButtonText: "Leave",
+        cancelButtonText: "Stay",
+        children: "Wizard guard"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        isOpen: true,
+        confirmButtonText: "Discard changes",
+        cancelButtonText: "Keep editing",
+        children: "Unsaved changes"
+      })]
+    }));
+    var replaceSpy = jest.spyOn(historyRef.current, 'replace');
+    cancelNavigation();
+    expect(dialog()).not.toBeInTheDocument();
+    expect(_react.screen.queryByText('Wizard guard')).not.toBeInTheDocument();
+    expect(replaceSpy).not.toHaveBeenCalled();
+  });
   it('replays a blocked push on confirm: re-sync replace first, then push, and re-arms the blocker', function () {
     var history = renderWithHistory();
     var replaceSpy = jest.spyOn(history, 'replace');
@@ -170,4 +198,152 @@ describe('ConfirmDialog navigation blocking', function () {
     expect(history.location.pathname).toBe('/');
     expect(dialog()).toBeInTheDocument();
   });
+});
+
+// `useHistory` returns undefined outside a wizard, where `newspack-multibranded-site`
+// runs react-router v6 against this package's v5.
+describe('ConfirmDialog without a router', function () {
+  var renderUnrouted = function renderUnrouted() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], _objectSpread(_objectSpread({
+      isOpen: true,
+      confirmButtonText: "Discard changes",
+      cancelButtonText: "Keep editing"
+    }, props), {}, {
+      children: "Unsaved changes"
+    })));
+  };
+  it('cancels with no history to re-sync', function () {
+    var onCancel = jest.fn();
+    renderUnrouted({
+      onCancel: onCancel
+    });
+    expect(dialog()).toBeInTheDocument();
+    cancelNavigation();
+    expect(onCancel).toHaveBeenCalled();
+    expect(dialog()).not.toBeInTheDocument();
+  });
+  it('confirms with no history to re-sync', function () {
+    var onConfirm = jest.fn();
+    renderUnrouted({
+      onConfirm: onConfirm
+    });
+    confirmNavigation();
+    expect(onConfirm).toHaveBeenCalled();
+    expect(dialog()).not.toBeInTheDocument();
+  });
+  it('installs no blocker when asked to block without a router', function () {
+    expect(function () {
+      return renderUnrouted({
+        when: true
+      });
+    }).not.toThrow();
+    expect(dialog()).toBeInTheDocument();
+  });
+});
+describe('ConfirmDialog controlled by isOpen', function () {
+  var tree = function tree(isOpen) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      isOpen: isOpen,
+      confirmButtonText: "Discard changes",
+      cancelButtonText: "Keep editing",
+      children: "Unsaved changes"
+    });
+  };
+  it('closes when isOpen goes false', function () {
+    var _render = (0, _react.render)(tree(true)),
+      rerender = _render.rerender;
+    expect(dialog()).toBeInTheDocument();
+    rerender(tree(false));
+    expect(dialog()).not.toBeInTheDocument();
+  });
+  it('opens again afterwards', function () {
+    var _render2 = (0, _react.render)(tree(true)),
+      rerender = _render2.rerender;
+    rerender(tree(false));
+    rerender(tree(true));
+    expect(dialog()).toBeInTheDocument();
+  });
+  it('leaves a blocked navigation prompt up', function () {
+    var historyRef = {
+      current: null
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.MemoryRouter, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HistoryGrabber, {
+        historyRef: historyRef
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        when: true,
+        isOpen: false,
+        confirmButtonText: "Discard changes",
+        cancelButtonText: "Keep editing",
+        children: "Unsaved changes"
+      })]
+    }));
+    (0, _react.act)(function () {
+      return historyRef.current.push('/next');
+    });
+    expect(dialog()).toBeInTheDocument();
+  });
+  it('withdraws a blocked navigation prompt when isOpen goes false', function () {
+    var historyRef = {
+      current: null
+    };
+    var withOpen = function withOpen(isOpen) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.MemoryRouter, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HistoryGrabber, {
+          historyRef: historyRef
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+          when: true,
+          isOpen: isOpen,
+          confirmButtonText: "Discard changes",
+          cancelButtonText: "Keep editing",
+          children: "Unsaved changes"
+        })]
+      });
+    };
+    var _render3 = (0, _react.render)(withOpen(true)),
+      rerender = _render3.rerender;
+    (0, _react.act)(function () {
+      return historyRef.current.push('/next');
+    });
+    expect(dialog()).toBeInTheDocument();
+    rerender(withOpen(false));
+    expect(dialog()).not.toBeInTheDocument();
+    expect(historyRef.current.location.pathname).toBe('/');
+
+    // Confirming the next prompt must not replay the abandoned destination.
+    rerender(withOpen(true));
+    confirmNavigation();
+    expect(historyRef.current.location.pathname).toBe('/');
+  });
+});
+describe('ConfirmDialog named by a hidden title', function () {
+  it('takes its accessible name from the title while hiding the header', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      isOpen: true,
+      hideTitle: true,
+      title: "Unsaved changes",
+      confirmButtonText: "Discard changes",
+      children: "You have unsaved changes that will be lost. Discard changes?"
+    }));
+    var frame = _react.screen.getByRole('dialog', {
+      name: 'Unsaved changes'
+    });
+    expect(frame).toHaveClass('newspack-modal--hide-title');
+    expect(frame.querySelector('.components-modal__header')).toContainElement(_react.screen.getByRole('heading', {
+      name: 'Unsaved changes'
+    }));
+  });
+  it('has no accessible name without a title', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+      isOpen: true,
+      hideTitle: true,
+      confirmButtonText: "Discard changes",
+      children: "You have unsaved changes that will be lost. Discard changes?"
+    }));
+    expect(_react.screen.queryByRole('dialog', {
+      name: 'Unsaved changes'
+    })).not.toBeInTheDocument();
+    expect(_react.screen.getByRole('dialog')).not.toHaveAttribute('aria-labelledby');
+  });
 });

package/dist/cjs/dataviews/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = DataViews;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _dataviews = require("@wordpress/dataviews");
@@ -35,4 +35,13 @@ function DataViews(_ref) {
     className: (0, _classnames["default"])('newspack-dataviews', className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviews.DataViews, _objectSpread({}, props))
   });
-}
+}
+
+// The implementation is typed against the `unknown` instantiation because
+// BaseDataViews' conditionally-optional `getItemId` prop cannot be related
+// to a JSX spread while `Item` is an unresolved type parameter. The export
+// re-types it with the generic signature so call sites get item-aware
+// typing for `data`, `fields`, `actions`, `getItemId`, etc. The assertion
+// is verified by the compiler: the generic signature is assignable to the
+// implementation's concrete one.
+var _default = exports["default"] = DataViews;

package/dist/cjs/divider/index.js

@@ -20,6 +20,19 @@ var _excluded = ["alignment", "className", "marginBottom", "marginTop", "variant
 /**
  * External dependencies
  */
+/**
+ * Divider component.
+ *
+ * Every prop beyond the documented ones is forwarded to the `hr` element.
+ *
+ * @param {import('react').ComponentPropsWithoutRef<'hr'> & {
+ *   alignment?: string,
+ *   marginBottom?: number|string,
+ *   marginTop?: number|string,
+ *   variant?: string,
+ * }} props - Component props: the documented options plus any `hr` attribute.
+ * @return {JSX.Element} Divider component.
+ */
 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; }
 var Divider = function Divider(_ref) {

package/dist/cjs/drawer/action.js

@@ -0,0 +1,74 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _element = require("@wordpress/element");
+var _button = _interopRequireDefault(require("../button"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["ariaLabel", "closes", "onClick", "href", "children"];
+/**
+ * WordPress dependencies.
+ */
+/**
+ * Internal dependencies.
+ */
+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; }
+var Action = function Action(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+    _ref$closes = _ref.closes,
+    closes = _ref$closes === void 0 ? false : _ref$closes,
+    onClick = _ref.onClick,
+    href = _ref.href,
+    children = _ref.children,
+    buttonProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  // Not useDrawerContext: only `closes` requires the context.
+  var context = (0, _element.useContext)(_context.DrawerContext);
+
+  // `href=""` is still an anchor; a null from a JS caller means no link at all.
+  var hasHref = 'string' === typeof href;
+  (0, _element.useEffect)(function () {
+    if ('production' === process.env.NODE_ENV || !hasHref) {
+      return;
+    }
+    if (onClick || closes) {
+      // eslint-disable-next-line no-console
+      console.warn('Drawer: an action with `href` cannot also take `onClick` or `closes`, and they are ignored. ' + 'A link that ran the close funnel would navigate away while the unsaved-changes confirmation was still opening.');
+    }
+  }, [hasHref, onClick, closes]);
+  (0, _element.useEffect)(function () {
+    if ('production' === process.env.NODE_ENV) {
+      return;
+    }
+    if (typeof children === 'string' && ariaLabel && !ariaLabel.toLowerCase().includes(children.toLowerCase())) {
+      // eslint-disable-next-line no-console
+      console.warn("Drawer: action ariaLabel \"".concat(ariaLabel, "\" does not contain its visible label \"").concat(children, "\". ") + 'Voice control matches spoken commands against the accessible name (WCAG 2.5.3, Label in Name), ' + 'so ariaLabel must extend the visible text rather than replace it.');
+    }
+  }, [ariaLabel, children]);
+  var handleClick = function handleClick(event) {
+    onClick === null || onClick === void 0 || onClick(event);
+    if (closes) {
+      if (!context) {
+        throw new Error('Drawer subcomponents must be rendered inside Drawer.Root.');
+      }
+      context.requestClose();
+    }
+  };
+
+  // Button swallows `href` whenever an onClick is present, so a link supplies none.
+  var handlesClick = !hasHref && (!!onClick || closes);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], _objectSpread(_objectSpread({
+    "aria-label": ariaLabel,
+    href: hasHref ? href : undefined,
+    onClick: handlesClick ? handleClick : undefined
+  }, buttonProps), {}, {
+    children: children
+  }));
+};
+var _default = exports["default"] = Action;

package/dist/cjs/drawer/body.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * Internal dependencies.
+ */
+
+// Core tab-stops its own container once it overflows; the drawer scrolls here.
+var Body = function Body(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _element.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    node = _useState2[0],
+    setNode = _useState2[1];
+  var _useState3 = (0, _element.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isScrollable = _useState4[0],
+    setIsScrollable = _useState4[1];
+  (0, _element.useEffect)(function () {
+    if (!node) {
+      return;
+    }
+    var measure = function measure() {
+      return setIsScrollable(node.scrollHeight > node.clientHeight);
+    };
+    measure();
+    if (!window.ResizeObserver) {
+      return;
+    }
+    var resize = new ResizeObserver(measure);
+    var observeChildren = function observeChildren() {
+      resize.disconnect();
+      resize.observe(node);
+      // Border box: a section's padding rides on an inline custom property.
+      Array.from(node.children).forEach(function (child) {
+        return resize.observe(child, {
+          box: 'border-box'
+        });
+      });
+      measure();
+    };
+    observeChildren();
+    var mutation = new MutationObserver(observeChildren);
+    mutation.observe(node, {
+      childList: true
+    });
+    return function () {
+      resize.disconnect();
+      mutation.disconnect();
+    };
+  }, [node]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+    ref: setNode,
+    className: "newspack-drawer__body",
+    spacing: 0,
+    justify: "flex-start"
+    // A bare div is role=generic, where ARIA prohibits an author name.
+    ,
+    role: isScrollable ? 'group' : undefined,
+    tabIndex: isScrollable ? 0 : undefined,
+    "aria-label": isScrollable ? (0, _i18n.__)('Scrollable section', 'newspack-plugin') : undefined,
+    children: children
+  });
+};
+var _default = exports["default"] = Body;

package/dist/cjs/drawer/close-icon.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 _icons = require("@wordpress/icons");
+var _i18n = require("@wordpress/i18n");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _button = _interopRequireDefault(require("../button"));
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var CloseIcon = function CloseIcon(_ref) {
+  var label = _ref.label,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? _icons.close : _ref$icon,
+    className = _ref.className;
+  var _useDrawerContext = (0, _context.useDrawerContext)(),
+    requestClose = _useDrawerContext.requestClose,
+    title = _useDrawerContext.title;
+  var defaultLabel = title !== null && title !== void 0 && title.text ?
+  // translators: %s: the drawer's title.
+  (0, _i18n.sprintf)((0, _i18n.__)('Close %s', 'newspack-plugin'), title.text) : (0, _i18n.__)('Close', 'newspack-plugin');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
+    className: (0, _classnames["default"])('newspack-drawer__dismiss', className),
+    icon: icon,
+    size: "small",
+    label: label || defaultLabel,
+    onClick: requestClose
+  });
+};
+var _default = exports["default"] = CloseIcon;

package/dist/cjs/drawer/content.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+// 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__*/(0, _jsxRuntime.jsx)("div", {
+        children: text
+      }, "text-".concat(rows.length)));
+    }
+    text = [];
+  };
+  _element.Children.toArray(children).forEach(function (child) {
+    if ((0, _element.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,
+    className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+    className: (0, _classnames["default"])('newspack-drawer__content', className),
+    spacing: gap
+    // 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)
+  });
+};
+var _default = exports["default"] = Content;

package/dist/cjs/drawer/context.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDrawerContext = exports.DrawerContext = void 0;
+var _element = require("@wordpress/element");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var DrawerContext = exports.DrawerContext = (0, _element.createContext)(null);
+var useDrawerContext = exports.useDrawerContext = function useDrawerContext() {
+  var context = (0, _element.useContext)(DrawerContext);
+  if (!context) {
+    throw new Error('Drawer subcomponents must be rendered inside Drawer.Root.');
+  }
+  return context;
+};

package/dist/cjs/drawer/context.test.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _context = require("./context");
+var _react = require("@testing-library/react");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * External dependencies.
+ */
+
+var Probe = function Probe() {
+  var _useDrawerContext = (0, _context.useDrawerContext)(),
+    title = _useDrawerContext.title;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: title ? title.text : 'no title'
+  });
+};
+describe('useDrawerContext', function () {
+  it('returns the provided value', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.DrawerContext.Provider, {
+      value: {
+        requestClose: function requestClose() {},
+        title: {
+          id: 't1',
+          text: 'Hello'
+        },
+        setTitle: function setTitle() {}
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Probe, {})
+    }));
+    expect(_react.screen.getByText('Hello')).toBeInTheDocument();
+  });
+  it('throws outside Drawer.Root', function () {
+    var consoleError = jest.spyOn(console, 'error').mockImplementation(function () {});
+    expect(function () {
+      return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Probe, {}));
+    }).toThrow('Drawer subcomponents must be rendered inside Drawer.Root.');
+    consoleError.mockRestore();
+  });
+});

package/dist/cjs/drawer/divider.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var Divider = function Divider(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+    className: (0, _classnames["default"])('newspack-drawer__divider', className)
+  });
+};
+var _default = exports["default"] = Divider;

package/dist/cjs/drawer/footer.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var Footer = function Footer(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('newspack-drawer__footer', className),
+    children: children
+  });
+};
+var _default = exports["default"] = Footer;

package/dist/cjs/drawer/header.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+var Header = function Header(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('newspack-drawer__header', className),
+    children: children
+  });
+};
+var _default = exports["default"] = Header;