newspack-components 4.2.0 → 4.4.0-alpha.1

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

@@ -0,0 +1,123 @@
+"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 _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.
+ */
+
+/*
+ * See both https://wordpress.github.io/gutenberg/?path=/docs/components-confirmdialog--docs and
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-modal--docs for all supported props.
+ */
+
+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'
+};
+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, _objectSpread(_objectSpread({
+    className: classes
+  }, otherProps), {}, {
+    ref: ref,
+    onConfirm: handleOnConfirm,
+    onCancel: handleOnCancel,
+    __experimentalHideHeader: false
+  }));
+}
+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

@@ -0,0 +1,47 @@
+"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"));
+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
+ */
+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", _objectSpread({
+    className: classes,
+    style: style
+  }, otherProps));
+};
+var _default = exports["default"] = Divider;

package/dist/cjs/divider/style.scss

@@ -0,0 +1,51 @@
+/**
+ * Divider
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-divider {
+	background: transparent;
+	border: 0;
+	display: block;
+	height: 1px;
+	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
+	margin-left: 0;
+	margin-right: 0;
+	margin-top: min(32px, var(--divider-margin-top, 64px));
+	padding: 0;
+
+	@media screen and (min-width: 783px) {
+		margin-bottom: var(--divider-margin-bottom, 64px);
+		margin-top: var(--divider-margin-top, 64px);
+	}
+
+	// Alignment
+
+	&--alignment-full-width {
+		margin-left: calc(-50vw + 50%);
+		width: 100vw;
+	}
+
+	&--alignment-none {
+		width: 100%;
+	}
+
+	// Variant
+
+	&--variant-default {
+		background-color: wp-colors.$gray-300;
+	}
+
+	&--variant-primary {
+		background-color: var(--wp-admin-theme-color);
+	}
+
+	&--variant-secondary {
+		background-color: wp-colors.$gray-900;
+	}
+
+	&--variant-tertiary {
+		background-color: wp-colors.$gray-100;
+	}
+}

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/form-token-field/style.scss

@@ -7,11 +7,6 @@
 .newspack-form-token-field {
 	width: 100%;
 
-	.components-form-token-field__input-container {
-		padding-bottom: 1px;
-		padding-top: 1px;
-	}
-
 	// Help
 
 	&__help {

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;