newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/babel.config.js

@@ -0,0 +1,25 @@
+module.exports = api => {
+	api.cache( true );
+	return {
+		extends: 'newspack-scripts/config/babel.config.js',
+		presets: [
+			[
+				'@babel/preset-env',
+				{
+					corejs: 3.6,
+					useBuiltIns: 'entry',
+					// Exclude transforms that make all code slower, see https://github.com/facebook/create-react-app/pull/5278
+					exclude: [ 'transform-typeof-symbol' ],
+				},
+			],
+			[
+				'@babel/preset-react',
+				{
+					runtime: 'automatic',
+					importSource: process.env.IMPORT_SOURCE,
+				},
+			],
+			[ '@babel/preset-typescript', { allowDeclareFields: true } ],
+		],
+	};
+};

package/copy-styles.js

@@ -9,8 +9,7 @@ const rcopy = require( 'recursive-copy' );
 const dir = process.cwd();
 
 const inputDir = path.join( dir, 'src' );
-const outputDirEsm = path.join( dir, 'dist', 'esm' );
-const outputDirCommon = path.join( dir, 'dist', 'cjs' );
+const outputDir = path.join( dir, 'dist' );
 
 console.log( 'Copying styles %s', dir );
 
@@ -21,14 +20,7 @@ const copyOptions = {
 	debug: true,
 };
 
-rcopy( inputDir, outputDirEsm, copyOptions )
-	.then( results => {
-		console.log( 'copied %d files', results.length );
-	} )
-	.catch( err => {
-		console.error( err );
-	} );
-rcopy( inputDir, outputDirCommon, copyOptions )
+rcopy( inputDir, outputDir, copyOptions )
 	.then( results => {
 		console.log( 'copied %d files', results.length );
 	} )

package/dist/accordion/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _icons = require("@wordpress/icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const Accordion = ({
+  children,
+  title
+}) => {
+  const [isOpen, setIsOpen] = (0, _element.useState)(false);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
+    className: (0, _classnames.default)('newspack-accordion', {
+      'newspack-accordion--is-open': isOpen
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("summary", {
+      onClick: () => setIsOpen(!isOpen),
+      children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+        className: "newspack-accordion__icon",
+        icon: _icons.chevronRight,
+        size: 24
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-accordion__content",
+      children: children
+    })]
+  });
+};
+var _default = exports.default = Accordion;

package/dist/accordion/style.scss

@@ -0,0 +1,31 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-accordion {
+	border: 1px solid wp-colors.$gray-300;
+
+	&__icon {
+		transition: transform 200ms ease-out;
+		transform: rotate(90deg);
+	}
+
+	&--is-open {
+		.newspack-accordion {
+			&__icon {
+				transform: rotate(-90deg);
+			}
+		}
+	}
+	summary {
+		padding: 16px 32px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		cursor: pointer;
+		font-size: 14px;
+		font-weight: bold;
+	}
+
+	&__content {
+		padding: 16px 32px;
+	}
+}

package/dist/{cjs/action-card → action-card}/index.js

@@ -1,18 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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 _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
 var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Action Card
  */
@@ -30,12 +29,10 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 
 class ActionCard extends _element.Component {
-  constructor(...args) {
-    super(...args);
-    (0, _defineProperty2.default)(this, "state", {
-      expanded: false
-    });
-  }
+  state = {
+    expanded: false
+  };
+
   /**
    * When the collapse prop is updated to true, collapse the card if already expanded.
    */
@@ -103,120 +100,120 @@ class ActionCard extends _element.Component {
     const hasInternalLink = href && href.indexOf('http') !== 0;
     const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
     const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-    return (0, _jsxRuntime.jsxs)(_.Card, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
       className: classes,
       onClick: simple && onClick,
-      children: [(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-action-card__region newspack-action-card__region-top",
-        children: [toggleOnChange && (0, _jsxRuntime.jsx)(_components.ToggleControl, {
+        children: [toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
           checked: toggleChecked,
           onChange: toggleOnChange,
           disabled: disabled
-        }), image && !toggleOnChange && (0, _jsxRuntime.jsx)("div", {
+        }), image && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "newspack-action-card__region newspack-action-card__region-left",
-          children: (0, _jsxRuntime.jsx)("a", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
             href: imageLink,
-            children: (0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "newspack-action-card__image",
               style: backgroundImageStyles(image)
             })
           })
-        }), checkbox && !toggleOnChange && (0, _jsxRuntime.jsx)("div", {
+        }), checkbox && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "newspack-action-card__region newspack-action-card__region-left",
-          children: (0, _jsxRuntime.jsx)("span", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: (0, _classnames.default)('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
-            children: 'checked' === checkbox && (0, _jsxRuntime.jsx)(_icons.Icon, {
+            children: 'checked' === checkbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
               icon: _icons.check
             })
           })
-        }), (0, _jsxRuntime.jsx)("div", {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "newspack-action-card__region newspack-action-card__region-center",
-          children: (0, _jsxRuntime.jsxs)(_.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
             columns: 1,
             gutter: 8,
             noMargin: true,
-            children: [(0, _jsxRuntime.jsxs)("h2", {
-              children: [(0, _jsxRuntime.jsxs)("span", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
                 className: "newspack-action-card__title",
                 ...titleProps,
-                children: [titleLink && (0, _jsxRuntime.jsx)("a", {
+                children: [titleLink && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
                   href: titleLink,
                   children: title
-                }), !titleLink && expandable && (0, _jsxRuntime.jsx)(_.Button, {
+                }), !titleLink && expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
                   isLink: true,
                   onClick: () => this.setState({
                     expanded: !expanded
                   }),
                   children: title
                 }), !titleLink && !expandable && title]
-              }), badges?.length && badges.map((badgeText, i) => (0, _jsxRuntime.jsx)("span", {
+              }), badges?.length && badges.map((badgeText, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "newspack-action-card__badge",
                 children: badgeText
               }, `badge-${i}`))]
-            }), description && (0, _jsxRuntime.jsxs)("p", {
+            }), description && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
               children: [typeof description === 'string' && description, typeof description === 'function' && description()]
             })]
           })
-        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && (0, _jsxRuntime.jsxs)("div", {
+        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "newspack-action-card__region newspack-action-card__region-right",
-          children: [actionContent && actionContent, actionText && (handoff ? (0, _jsxRuntime.jsx)(_.Handoff, {
+          children: [actionContent && actionContent, actionText && (handoff ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Handoff, {
             plugin: handoff,
             editLink: editLink,
             compact: true,
             isLink: true,
             children: actionText
-          }) : onClick || hasInternalLink ? (0, _jsxRuntime.jsx)(_.Button, {
+          }) : onClick || hasInternalLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             disabled: disabled,
             isLink: true,
             href: href,
             onClick: onClick,
             className: "newspack-action-card__primary_button",
             children: actionText
-          }) : href ? (0, _jsxRuntime.jsx)(_components.ExternalLink, {
+          }) : href ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
             href: href,
             className: "newspack-action-card__primary_button",
             children: actionText
-          }) : (0, _jsxRuntime.jsxs)("div", {
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "newspack-action-card__container",
-            children: [actionText, isWaiting && (0, _jsxRuntime.jsx)(_.Waiting, {
+            children: [actionText, isWaiting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
               isRight: true
             })]
-          })), isDisplayingSecondaryAction && (0, _jsxRuntime.jsx)(_.Button, {
+          })), isDisplayingSecondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             isLink: true,
             onClick: onSecondaryActionClick,
             className: "newspack-action-card__secondary_button",
             isDestructive: secondaryDestructive,
             children: secondaryActionText
           })]
-        }), expandable && (0, _jsxRuntime.jsx)(_.Button, {
+        }), expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
           onClick: () => this.setState({
             expanded: !expanded
           }),
-          children: (0, _jsxRuntime.jsx)(_icons.Icon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
             icon: expanded ? _icons.chevronUp : _icons.chevronDown,
             height: 24,
             width: 24
           })
         })]
-      }), notification && (0, _jsxRuntime.jsxs)("div", {
+      }), notification && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-action-card__notification newspack-action-card__region-children",
-        children: ['error' === notificationLevel && (0, _jsxRuntime.jsx)(_.Notice, {
+        children: ['error' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           noticeText: notification,
           isError: true,
           rawHTML: notificationHTML
-        }), 'info' === notificationLevel && (0, _jsxRuntime.jsx)(_.Notice, {
+        }), 'info' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           noticeText: notification,
           rawHTML: notificationHTML
-        }), 'success' === notificationLevel && (0, _jsxRuntime.jsx)(_.Notice, {
+        }), 'success' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           noticeText: notification,
           isSuccess: true,
           rawHTML: notificationHTML
-        }), 'warning' === notificationLevel && (0, _jsxRuntime.jsx)(_.Notice, {
+        }), 'warning' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           noticeText: notification,
           isWarning: true,
           rawHTML: notificationHTML
         })]
-      }), children && (expandable && expanded || !expandable) && (0, _jsxRuntime.jsx)("div", {
+      }), children && (expandable && expanded || !expandable) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-action-card__region-children",
         children: children
       })]

package/dist/{cjs/action-card → action-card}/style.scss

@@ -2,8 +2,8 @@
  * Action Card
  */
 
-@use 'sass:color';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "sass:color";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-card.newspack-action-card {
 	padding: 0;
@@ -15,7 +15,7 @@
 		transition: box-shadow 125ms ease-in-out;
 
 		&:hover {
-			box-shadow: 0 4px 8px rgba( black, 0.08 );
+			box-shadow: 0 4px 8px rgba(black, 0.08);
 		}
 	}
 
@@ -34,7 +34,7 @@
 	}
 
 	&.newspack-card__is-primary {
-		box-shadow: inset 4px 0 0 var( --wp-admin-theme-color );
+		box-shadow: inset 4px 0 0 var(--wp-admin-theme-color);
 	}
 
 	&.newspack-card__is-secondary {
@@ -181,12 +181,12 @@
 		}
 
 		.newspack-action-card__region-top {
-			background-color: rgba( black, 0.025 );
+			background-color: rgba(black, 0.025);
 		}
 
 		.newspack-action-card__region-center {
 			p {
-				color: color.adjust( wp-colors.$gray-700, $lightness: -0.75% );
+				color: color.adjust(wp-colors.$gray-700, $lightness: -0.75%);
 			}
 		}
 	}
@@ -209,7 +209,7 @@
 			border-left-width: 1px;
 			border-bottom-width: 1px;
 			border-radius: 0 0 0 2px;
-			content: '';
+			content: "";
 			display: block;
 			position: absolute;
 			inset: -17px 100% 50% -28px;
@@ -219,7 +219,7 @@
 	// Typography
 
 	h2,
-	p:not( [class*='components-base-control'] ) {
+	p:not([class*="components-base-control"]) {
 		margin: 0;
 		max-width: 100%;
 		width: 100%;
@@ -242,7 +242,7 @@
 			&:active,
 			&:focus,
 			&:hover {
-				color: var( --wp-admin-theme-color );
+				color: var(--wp-admin-theme-color);
 			}
 		}
 	}

package/dist/{cjs/autocomplete-tokenfield → autocomplete-tokenfield}/index.js

@@ -1,16 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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 _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -28,16 +27,6 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */class AutocompleteTokenField extends _element.Component {
   constructor(props) {
     super(props);
-    /**
-     * If the component has tokens passed in props, it should fetch info after it mounts.
-     */
-    (0, _defineProperty2.default)(this, "isFetchingInfoOnLoad", () => {
-      const {
-        tokens,
-        fetchSavedInfo
-      } = this.props;
-      return Boolean(tokens.length && fetchSavedInfo);
-    });
     this.state = {
       suggestions: [],
       validValues: {},
@@ -45,6 +34,18 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
     };
     this.debouncedUpdateSuggestions = (0, _debounce.default)(this.updateSuggestions, 500);
   }
+
+  /**
+   * If the component has tokens passed in props, it should fetch info after it mounts.
+   */
+  isFetchingInfoOnLoad = () => {
+    const {
+      tokens,
+      fetchSavedInfo
+    } = this.props;
+    return Boolean(tokens.length && fetchSavedInfo);
+  };
+
   /**
    * When the component loads, fetch information about the tokens so we can populate
    * the tokens with the correct labels.
@@ -243,11 +244,11 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
     if (label) {
       classNames.push('has-label');
     }
-    return (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-autocomplete-tokenfield",
-      children: [(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: classNames.join(' '),
-        children: [(0, _jsxRuntime.jsx)(_components.FormTokenField, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, {
           value: this.getTokens(),
           suggestions: suggestions.map(suggestion => suggestion.label),
           onChange: tokens => this.handleOnChange(tokens),
@@ -255,8 +256,8 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
           label: label,
           maxLength: maxLength,
           placeholder: placeholder
-        }), loading && (0, _jsxRuntime.jsx)(_components.Spinner, {})]
-      }), help && (0, _jsxRuntime.jsx)("p", {
+        }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
+      }), help && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         className: "newspack-autocomplete-tokenfield__help",
         children: help
       })]

package/dist/{esm/autocomplete-tokenfield → autocomplete-tokenfield}/style.scss

@@ -2,7 +2,7 @@
  * Autocomplete Token Field
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-autocomplete-tokenfield {
 	.components-spinner {
@@ -43,7 +43,7 @@
 		padding-left: 0;
 	}
 
-	.components-button:focus:not( :disabled ) {
-		box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+	.components-button:focus:not(:disabled) {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 }

package/dist/{cjs/autocomplete-with-suggestions → autocomplete-with-suggestions}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,24 +13,24 @@ var _i18n = require("@wordpress/i18n");
 var _url = require("@wordpress/url");
 var _ = require("../");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
-const __ = _i18n.__,
-  _x = _i18n._x;
+
 /**
  * External dependencies.
  */
+
 const AutocompleteWithSuggestions = ({
   fetchSavedPosts = false,
   // If passed, will use this function to fetch saved data.
   fetchSuggestions = false,
   // If passed, will use this function to fetch suggestions data.
-  help = __('Begin typing search term, click autocomplete result to select.', 'newspack-plugin'),
+  help = (0, _i18n.__)('Begin typing search term, click autocomplete result to select.', 'newspack-plugin'),
   hideHelp = false,
   // If true, all help text will be hidden.
-  label = __('Search', 'newspack-plugin'),
+  label = (0, _i18n.__)('Search', 'newspack-plugin'),
   maxItemsToSuggest = 0,
   // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
   multiSelect = false,
@@ -44,9 +44,9 @@ const AutocompleteWithSuggestions = ({
     label: 'Post'
   }],
   // If passed, will render a selector to change the post type queried for suggestions.
-  postTypeLabel = __('item', 'newspack-plugin'),
+  postTypeLabel = (0, _i18n.__)('item', 'newspack-plugin'),
   // String to describe the data being shown.
-  postTypeLabelPlural = __('items', 'newspack-plugin'),
+  postTypeLabelPlural = (0, _i18n.__)('items', 'newspack-plugin'),
   // Plural string to describe the data being shown.
   selectedItems = [],
   // Array of saved items.
@@ -108,7 +108,7 @@ const AutocompleteWithSuggestions = ({
     });
     return posts.map(post => ({
       value: parseInt(post.id),
-      label: (0, _htmlEntities.decodeEntities)(post.title) || __('(no title)', 'newspack-plugin')
+      label: (0, _htmlEntities.decodeEntities)(post.title) || (0, _i18n.__)('(no title)', 'newspack-plugin')
     }));
   };
 
@@ -136,7 +136,7 @@ const AutocompleteWithSuggestions = ({
     return posts.reduce((acc, post) => {
       acc.push({
         value: parseInt(post.id),
-        label: (0, _htmlEntities.decodeEntities)(post?.title.rendered) || __('(no title)', 'newspack-plugin')
+        label: (0, _htmlEntities.decodeEntities)(post?.title.rendered) || (0, _i18n.__)('(no title)', 'newspack-plugin')
       });
       return acc;
     }, []);
@@ -181,20 +181,20 @@ const AutocompleteWithSuggestions = ({
     const selections = selectedPost ? [...selectedItems, selectedPost] : selectedItems;
     const selectedMessage = multiSelect ? (0, _i18n.sprintf)(
     // Translators: %1: the length of selections. %2: the selection leabel.
-    __('%1$s %2$s selected', 'newspack-plugin'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) :
+    (0, _i18n.__)('%1$s %2$s selected', 'newspack-plugin'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) : (0, _i18n.sprintf)(
     // Translators: %s: The label for the selection.
-    (0, _i18n.sprintf)(__('Selected %s', 'newspack-plugin'), postTypeLabel);
-    return (0, _jsxRuntime.jsxs)("div", {
+    (0, _i18n.__)('Selected %s', 'newspack-plugin'), postTypeLabel);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-autocomplete-with-suggestions__selected-items",
-      children: [(0, _jsxRuntime.jsxs)("p", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "newspack-autocomplete-with-suggestions__label",
-        children: [selectedMessage, 1 < selections.length && _x(' – ', 'separator character', 'newspack-plugin'), 1 < selections.length && (0, _jsxRuntime.jsx)(_components.Button, {
+        children: [selectedMessage, 1 < selections.length && (0, _i18n._x)(' – ', 'separator character', 'newspack-plugin'), 1 < selections.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           onClick: () => onChange([]),
           isLink: true,
           isDestructive: true,
-          children: __('Clear all', 'newspack-plugin')
+          children: (0, _i18n.__)('Clear all', 'newspack-plugin')
         })]
-      }), selections.map(selection => (0, _jsxRuntime.jsx)(_components.Button, {
+      }), selections.map(selection => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
         className: "newspack-autocomplete-with-suggestions__selected-item-button",
         isTertiary: true,
         onClick: () => onChange(selections.filter(_selection => _selection.value !== selection.value)),
@@ -207,10 +207,10 @@ const AutocompleteWithSuggestions = ({
    * Render post type select dropdown.
    */
   const renderPostTypeSelect = () => {
-    return (0, _jsxRuntime.jsx)(_components.SelectControl, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
       label: (0, _i18n.sprintf)(
       // Translators: %s: The name of the type.
-      __('%s type', 'newspack-plugin'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
+      (0, _i18n.__)('%s type', 'newspack-plugin'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
       value: postTypeToSearch,
       options: postTypes.map(postTypeOption => ({
         label: postTypeOption.label,
@@ -229,13 +229,13 @@ const AutocompleteWithSuggestions = ({
     if (multiSelect) {
       const selections = selectedPost ? [...selectedItems, selectedPost] : [...selectedItems];
       const isSelected = !!selections.find(_selection => parseInt(_selection.value) === parseInt(suggestion.value) && _selection.label === suggestion.label);
-      return (0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: isSelected,
         onChange: () => handleOnChange([suggestion]),
         label: suggestion.label
       }, suggestion.value);
     }
-    return (0, _jsxRuntime.jsx)(_components.Button, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
       isLink: true,
       onClick: () => handleOnChange([suggestion]),
       children: suggestion.label
@@ -250,24 +250,24 @@ const AutocompleteWithSuggestions = ({
       return null;
     }
     const className = multiSelect ? 'newspack-autocomplete-with-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
-    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [!hideHelp && (0, _jsxRuntime.jsx)("p", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!hideHelp && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         className: "newspack-autocomplete-with-suggestions__label",
-        children: /* Translators: %s: the name of a post type. */(0, _i18n.sprintf)(__('Or, select a recent %s:', 'newspack-plugin'), postTypeLabel)
-      }), (0, _jsxRuntime.jsxs)("div", {
+        children: /* Translators: %s: the name of a post type. */(0, _i18n.sprintf)((0, _i18n.__)('Or, select a recent %s:', 'newspack-plugin'), postTypeLabel)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: className,
-        children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && (0, _jsxRuntime.jsx)(_components.Button, {
+        children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           disabled: isLoadingMore,
           isSecondary: true,
           onClick: () => setIsLoadingMore(true),
-          children: isLoadingMore ? __('Loading…', 'newspack-plugin') : __('Load more', 'newspack-plugin')
+          children: isLoadingMore ? (0, _i18n.__)('Loading…', 'newspack-plugin') : (0, _i18n.__)('Load more', 'newspack-plugin')
         })]
       })]
     });
   };
-  return (0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classNames.join(' '),
-    children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), (0, _jsxRuntime.jsx)(_.AutocompleteTokenField, {
+    children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.AutocompleteTokenField, {
       tokens: [],
       onChange: handleOnChange,
       fetchSuggestions: async search => handleFetchSuggestions(search, 0, postTypeToSearch),