newspack-components 4.3.0 → 4.4.0-alpha.1

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

@@ -4,20 +4,29 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _element = require("@wordpress/element");
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _router = _interopRequireDefault(require("../proxied-imports/router"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "size", "hideTitle", "isDestructive", "onConfirm", "onCancel", "when", "isOpen"];
 /**
  * Modal
  */
-
 /**
  * WordPress dependencies.
  */
-
 // eslint-disable-line @wordpress/no-unsafe-wp-apis
+/**
+ * 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 useHistory = _router["default"].useHistory;
 
 /**
  * External dependencies.
@@ -28,32 +37,87 @@ var _jsxRuntime = require("react/jsx-runtime");
  * https://wordpress.github.io/gutenberg/?path=/docs/components-modal--docs for all supported props.
  */
 
-const sizeClassMap = {
+var sizeClassMap = {
   small: 'newspack-modal--size-small',
   medium: 'newspack-modal--size-medium',
   large: 'newspack-modal--size-large',
   'x-large': 'newspack-modal--size-x-large',
   full: 'newspack-modal--size-full'
 };
-function ConfirmDialog({
-  className,
-  size = 'small',
-  hideTitle,
-  isDestructive,
-  onConfirm,
-  onCancel,
-  ...otherProps
-}, ref) {
-  const classes = (0, _classnames.default)('newspack-modal', sizeClassMap[size], hideTitle && 'newspack-modal--hide-title',
+var noOp = function noOp() {};
+function ConfirmDialog(_ref, ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    hideTitle = _ref.hideTitle,
+    isDestructive = _ref.isDestructive,
+    _ref$onConfirm = _ref.onConfirm,
+    onConfirm = _ref$onConfirm === void 0 ? noOp : _ref$onConfirm,
+    _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? noOp : _ref$onCancel,
+    _ref$when = _ref.when,
+    when = _ref$when === void 0 ? false : _ref$when,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useState = (0, _element.useState)(isOpen),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showDialog = _useState2[0],
+    setShowDialog = _useState2[1];
+  var history = useHistory();
+  var pendingNavigation = (0, _element.useRef)(null);
+  var handleOnConfirm = (0, _element.useCallback)(function () {
+    var _pendingNavigation$cu;
+    setShowDialog(false);
+    (_pendingNavigation$cu = pendingNavigation.current) === null || _pendingNavigation$cu === void 0 || _pendingNavigation$cu.call(pendingNavigation);
+    pendingNavigation.current = null;
+    onConfirm();
+  }, [onConfirm, pendingNavigation]);
+  var handleOnCancel = (0, _element.useCallback)(function () {
+    setShowDialog(false);
+    pendingNavigation.current = null;
+    onCancel();
+  }, [onCancel, pendingNavigation]);
+
+  // Block navigation when there are unsaved changes.
+  (0, _element.useEffect)(function () {
+    if (!when) {
+      return;
+    }
+    var unblock = history.block(function (location, action) {
+      pendingNavigation.current = function () {
+        unblock();
+        if (action === 'REPLACE') {
+          history.replace(location);
+        } else {
+          history.push(location);
+        }
+      };
+      setShowDialog(true);
+      return false;
+    });
+    return unblock;
+  }, [when, history]);
+
+  // Show the dialog imperatively without blocking navigation.
+  (0, _element.useEffect)(function () {
+    if (isOpen) {
+      setShowDialog(true);
+    }
+  }, [isOpen]);
+  if (!showDialog) {
+    return null;
+  }
+  var classes = (0, _classnames["default"])('newspack-modal', sizeClassMap[size], hideTitle && 'newspack-modal--hide-title',
   // Note: also hides the X close button.
   isDestructive && 'newspack-modal--destructive', className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
-    className: classes,
-    ...otherProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, _objectSpread(_objectSpread({
+    className: classes
+  }, otherProps), {}, {
     ref: ref,
-    onConfirm: onConfirm,
-    onCancel: onCancel,
+    onConfirm: handleOnConfirm,
+    onCancel: handleOnCancel,
     __experimentalHideHeader: false
-  });
+  }));
 }
-var _default = exports.default = (0, _element.forwardRef)(ConfirmDialog);
+var _default = exports["default"] = (0, _element.forwardRef)(ConfirmDialog);

package/dist/cjs/consts.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HANDOFF_KEY = void 0;
-const HANDOFF_KEY = exports.HANDOFF_KEY = 'newspack_wizard_handoff_message';
+var HANDOFF_KEY = exports.HANDOFF_KEY = 'newspack_wizard_handoff_message';

package/dist/cjs/custom-select-control/index.js

@@ -4,42 +4,53 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+var _excluded = ["className"];
+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; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * Custom Select Control
- */
-
-/**
+ */ /**
  * WordPress dependencies
- */
-
-/**
+ */ /**
  * External dependencies
- */
-
-/**
+ */ /**
  * Internal dependencies
  */
-
-class CustomSelectControl extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-custom-select-control', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CustomSelectControl, {
-      className: classes,
-      ...otherProps
-    });
+var CustomSelectControl = /*#__PURE__*/function (_Component) {
+  function CustomSelectControl() {
+    (0, _classCallCheck2["default"])(this, CustomSelectControl);
+    return _callSuper(this, CustomSelectControl, arguments);
   }
-}
-var _default = exports.default = CustomSelectControl;
+  (0, _inherits2["default"])(CustomSelectControl, _Component);
+  return (0, _createClass2["default"])(CustomSelectControl, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        otherProps = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var classes = (0, _classnames["default"])('newspack-custom-select-control', className);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CustomSelectControl, _objectSpread({
+        className: classes
+      }, otherProps));
+    }
+  }]);
+}(_element.Component);
+var _default = exports["default"] = CustomSelectControl;

package/dist/cjs/dataviews/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = DataViews;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _dataviews = require("@wordpress/dataviews");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className"];
+/**
+ * DataViews
+ *
+ * Wrapper around @wordpress/dataviews with Newspack styling.
+ */
+/**
+ * WordPress dependencies
+ */
+/**
+ * External 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; }
+function DataViews(_ref) {
+  var className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('newspack-dataviews', className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviews.DataViews, _objectSpread({}, props))
+  });
+}

package/dist/cjs/dataviews/style.scss

@@ -0,0 +1,9 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@wordpress/dataviews/build-style/style.css";
+
+.newspack-dataviews {
+	/* Make sure full-width DataViews aligns with the 48px margin. */
+	.newspack-wizard__content--full-width & {
+		margin-top: -16px;
+	}
+}

package/dist/cjs/divider/index.js

@@ -4,39 +4,44 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["alignment", "className", "marginBottom", "marginTop", "variant"];
 /**
  * Divider
  */
-
 /**
  * Internal dependencies
  */
-
 /**
  * External dependencies
  */
-
-const Divider = ({
-  alignment = 'none',
-  className = undefined,
-  marginBottom = 64,
-  marginTop = 64,
-  variant = 'default',
-  ...otherProps
-}) => {
-  const classes = (0, _classnames.default)('newspack-divider', className, alignment && `newspack-divider--alignment-${alignment}`, variant && `newspack-divider--variant-${variant}`);
-  const style = {
-    '--divider-margin-bottom': typeof marginBottom === 'number' ? `${marginBottom}px` : marginBottom,
-    '--divider-margin-top': typeof marginTop === 'number' ? `${marginTop}px` : marginTop
+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) {
+  var _ref$alignment = _ref.alignment,
+    alignment = _ref$alignment === void 0 ? 'none' : _ref$alignment,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$marginBottom = _ref.marginBottom,
+    marginBottom = _ref$marginBottom === void 0 ? 64 : _ref$marginBottom,
+    _ref$marginTop = _ref.marginTop,
+    marginTop = _ref$marginTop === void 0 ? 64 : _ref$marginTop,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = (0, _classnames["default"])('newspack-divider', className, alignment && "newspack-divider--alignment-".concat(alignment), variant && "newspack-divider--variant-".concat(variant));
+  var style = {
+    '--divider-margin-bottom': typeof marginBottom === 'number' ? "".concat(marginBottom, "px") : marginBottom,
+    '--divider-margin-top': typeof marginTop === 'number' ? "".concat(marginTop, "px") : marginTop
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", _objectSpread({
     className: classes,
-    style: style,
-    ...otherProps
-  });
+    style: style
+  }, otherProps));
 };
-var _default = exports.default = Divider;
+var _default = exports["default"] = Divider;

package/dist/cjs/footer/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 require("./style.scss");
@@ -20,21 +20,26 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies.
  */
 
-const Footer = ({
-  simple = undefined
-}) => {
-  const {
-    components_demo: componentsDemo = false,
-    support = false,
-    setup_wizard: setupWizard = false,
-    reset_url: resetUrl = false,
-    plugin_version: pluginVersion = {
+var Footer = function Footer(_ref) {
+  var _ref$simple = _ref.simple,
+    simple = _ref$simple === void 0 ? undefined : _ref$simple;
+  var _ref2 = window.newspack_urls || {},
+    _ref2$components_demo = _ref2.components_demo,
+    componentsDemo = _ref2$components_demo === void 0 ? false : _ref2$components_demo,
+    _ref2$support = _ref2.support,
+    support = _ref2$support === void 0 ? false : _ref2$support,
+    _ref2$setup_wizard = _ref2.setup_wizard,
+    setupWizard = _ref2$setup_wizard === void 0 ? false : _ref2$setup_wizard,
+    _ref2$reset_url = _ref2.reset_url,
+    resetUrl = _ref2$reset_url === void 0 ? false : _ref2$reset_url,
+    _ref2$plugin_version = _ref2.plugin_version,
+    pluginVersion = _ref2$plugin_version === void 0 ? {
       label: 'Newspack'
-    },
-    remove_starter_content: removeStarterContent = false,
-    support_email: supportEmail
-  } = window.newspack_urls || {};
-  const footerElements = [{
+    } : _ref2$plugin_version,
+    _ref2$remove_starter_ = _ref2.remove_starter_content,
+    removeStarterContent = _ref2$remove_starter_ === void 0 ? false : _ref2$remove_starter_,
+    supportEmail = _ref2.support_email;
+  var footerElements = [{
     label: pluginVersion.label,
     url: 'https://newspack.com/category/release-notes/',
     external: true
@@ -74,26 +79,27 @@ const Footer = ({
   if (supportEmail) {
     footerElements.push({
       label: (0, _i18n.__)('Contact Support', 'newspack-plugin'),
-      url: `mailto:${supportEmail}`
+      url: "mailto:".concat(supportEmail)
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "newspack-footer",
     children: !simple && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      children: footerElements.map(({
-        url,
-        label,
-        external
-      }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-        children: external ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
-          href: url,
-          children: label
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-          href: url,
-          children: label
-        })
-      }, index))
+      children: footerElements.map(function (_ref3, index) {
+        var url = _ref3.url,
+          label = _ref3.label,
+          external = _ref3.external;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: external ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
+            href: url,
+            children: label
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: url,
+            children: label
+          })
+        }, index);
+      })
     })
   });
 };
-var _default = exports.default = Footer;
+var _default = exports["default"] = Footer;

package/dist/cjs/form-token-field/index.js

@@ -4,54 +4,65 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+var _excluded = ["className", "description", "hideHelpFromVision", "hideLabelFromVision"];
+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; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * Form Token Field
- */
-
-/**
+ */ /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
- */
-
-/**
+ */ /**
  * External dependencies.
  */
-
-class FormTokenField extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      description,
-      hideHelpFromVision,
-      hideLabelFromVision,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-form-token-field__input-container', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)({
-        'newspack-form-token-field--label-hidden': hideLabelFromVision,
-        'newspack-form-token-field--help-hidden': hideHelpFromVision
-      }, 'newspack-form-token-field'),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, {
-        className: classes,
-        ...otherProps
-      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "newspack-form-token-field__help",
-        children: description
-      })]
-    });
+var FormTokenField = /*#__PURE__*/function (_Component) {
+  function FormTokenField() {
+    (0, _classCallCheck2["default"])(this, FormTokenField);
+    return _callSuper(this, FormTokenField, arguments);
   }
-}
-var _default = exports.default = FormTokenField;
+  (0, _inherits2["default"])(FormTokenField, _Component);
+  return (0, _createClass2["default"])(FormTokenField, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        description = _this$props.description,
+        hideHelpFromVision = _this$props.hideHelpFromVision,
+        hideLabelFromVision = _this$props.hideLabelFromVision,
+        otherProps = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var classes = (0, _classnames["default"])('newspack-form-token-field__input-container', className);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames["default"])({
+          'newspack-form-token-field--label-hidden': hideLabelFromVision,
+          'newspack-form-token-field--help-hidden': hideHelpFromVision
+        }, 'newspack-form-token-field'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, _objectSpread({
+          className: classes
+        }, otherProps)), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "newspack-form-token-field__help",
+          children: description
+        })]
+      });
+    }
+  }]);
+}(_element.Component);
+var _default = exports["default"] = FormTokenField;

package/dist/cjs/global-notices/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _qs = require("qs");
 var _ = require("../");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -15,12 +15,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-const GlobalNotices = () => {
-  const notice = (0, _qs.parse)(window.location.search)['newspack-notice'];
+var GlobalNotices = function GlobalNotices() {
+  var notice = (0, _qs.parse)(window.location.search)['newspack-notice'];
   if (!notice) {
     return null;
   }
-  return notice.split(',').map((text, i) => {
+  return notice.split(',').map(function (text, i) {
     if (text.indexOf('_error_') === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         isError: true,
@@ -34,4 +34,4 @@ const GlobalNotices = () => {
     }, i);
   });
 };
-var _default = exports.default = GlobalNotices;
+var _default = exports["default"] = GlobalNotices;

package/dist/cjs/grid/index.js

@@ -4,35 +4,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "borders", "columns", "gutter", "noMargin", "rowGap"];
 /**
  * Grid
  */
-
 /**
  * Internal dependencies
  */
-
 /**
  * External dependencies
  */
-
-const Grid = ({
-  className = '',
-  borders = false,
-  columns = 2,
-  gutter = 32,
-  noMargin = false,
-  rowGap = 0,
-  ...otherProps
-}) => {
-  const classes = (0, _classnames.default)('newspack-grid', borders && 'newspack-grid__borders', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: classes,
-    ...otherProps
-  });
+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 Grid = function Grid(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$borders = _ref.borders,
+    borders = _ref$borders === void 0 ? false : _ref$borders,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 2 : _ref$columns,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 32 : _ref$gutter,
+    _ref$noMargin = _ref.noMargin,
+    noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+    _ref$rowGap = _ref.rowGap,
+    rowGap = _ref$rowGap === void 0 ? 0 : _ref$rowGap,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = (0, _classnames["default"])('newspack-grid', borders && 'newspack-grid__borders', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
+    className: classes
+  }, otherProps));
 };
-var _default = exports.default = Grid;
+var _default = exports["default"] = Grid;