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

package/dist/plugin-toggle/index.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _ = require("../");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * Plugin toggle group component.
+ */class PluginToggle extends _element.Component {
+  state = {
+    pluginInfo: {}
+  };
+  componentDidMount = () => {
+    this.retrievePluginInfo();
+  };
+
+  /**
+   * Retrieve complete data about Newspack plugins.
+   */
+  retrievePluginInfo = () => {
+    return new Promise(() => {
+      (0, _apiFetch.default)({
+        path: '/newspack/v1/plugins/'
+      }).then(pluginInfo => this.setState({
+        pluginInfo
+      }));
+    });
+  };
+
+  /**
+   * Install/activate or remove a plugin.
+   */
+  managePlugin = (plugin, value) => {
+    const {
+      plugins
+    } = this.props;
+    const {
+      pluginInfo
+    } = this.state;
+    const action = value ? 'configure' : 'deactivate';
+    const params = {
+      path: `/newspack/v1/plugins/${plugin}/${action}/`,
+      method: 'post'
+    };
+    this.setState({
+      pluginInfo: {
+        ...pluginInfo,
+        [plugin]: {
+          ...pluginInfo[plugin],
+          inFlight: action
+        }
+      }
+    }, () => {
+      (0, _apiFetch.default)(params).then(response => {
+        const {
+          shouldRefreshAfterUpdate
+        } = plugins[plugin];
+        this.setState(({
+          pluginInfo: currentPluginInfo
+        }) => ({
+          pluginInfo: {
+            ...currentPluginInfo,
+            [plugin]: response
+          }
+        }), () => shouldRefreshAfterUpdate && location.reload());
+      }).catch(e => {
+        this.setState({
+          pluginInfo: {
+            ...pluginInfo,
+            [plugin]: {
+              ...pluginInfo[plugin],
+              error: e.message || (0, _i18n.__)('There was an error managing this plugin.', 'newspack-plugin')
+            }
+          }
+        });
+      });
+    });
+  };
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      plugins
+    } = this.props;
+    const {
+      pluginInfo
+    } = this.state;
+    return this.prepareDataForRender(plugins, pluginInfo).map((plugin, index) => {
+      const {
+        name,
+        description,
+        href,
+        slug,
+        editPath
+      } = plugin;
+      const pluginStatus = this.isPluginInstalledAndActive(plugin);
+      const handoff = !href && pluginStatus && editPath ? slug : null;
+      const error = this.errorForPlugin(plugin);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
+        className: this.classNameForPlugin(plugin),
+        title: name,
+        description: description,
+        actionText: this.actionTextForPlugin(plugin),
+        handoff: handoff,
+        href: href,
+        toggle: true,
+        toggleChecked: this.isPluginInstalledAndActive(plugin),
+        toggleOnChange: value => this.managePlugin(slug, value),
+        notification: error,
+        notificationHTML: error,
+        notificationLevel: "error"
+      }, index);
+    });
+  }
+
+  /**
+   * Prepare plugins data for render. Change all keys to camelCase, merge API-fetched data with prop.
+   */
+  prepareDataForRender = (pluginsFromProps, pluginsFromAPI) => Object.keys(pluginsFromProps).map(pluginSlug => pluginsFromAPI[pluginSlug] ? Object.keys(pluginsFromAPI[pluginSlug]).reduce((accumulator, key) => ({
+    ...accumulator,
+    [key.charAt(0).toLowerCase() + key.slice(1)]: pluginsFromAPI[pluginSlug][key]
+  }), {}) : {}).map(plugin => Object.assign(plugin, pluginsFromProps[plugin.slug]));
+
+  /**
+   * Generate a classname for the ActionCard based on plugin state. Applies 'in-flight' class if an API is underway and 'loading' if the plugin data is not yet available.
+   */
+  classNameForPlugin = plugin => {
+    const {
+      status,
+      inFlight
+    } = plugin;
+    if (inFlight) {
+      return 'in-flight';
+    }
+    if (!status) {
+      return 'loading';
+    }
+  };
+
+  /**
+   * Generate the ActionCard action text for a plugin.
+   */
+  actionTextForPlugin = plugin => {
+    const {
+      actionText,
+      editPath,
+      href,
+      inFlight,
+      name
+    } = plugin;
+    // Show spinner when plugin data is unavailable, or when an API call is in flight.
+    if ('configure' === inFlight) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [(0, _i18n.__)('Installing…', 'newspack-plugin'), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    if ('deactivate' === inFlight) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [(0, _i18n.__)('Deactivating…', 'newspack-plugin'), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    if (!name) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [(0, _i18n.__)('Loading…', 'newspack-plugin'), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    // No action button at all if the plugin isn't installed and active.
+    if (!this.isPluginInstalledAndActive(plugin)) {
+      return null;
+    }
+    if (href || editPath) {
+      return actionText ? actionText : (0, _i18n.__)('Configure', 'newspack-plugin');
+    }
+  };
+
+  /**
+   * Get error message for this plugin.
+   */
+  errorForPlugin = plugin => {
+    const {
+      slug
+    } = plugin;
+    const {
+      pluginInfo
+    } = this.state;
+    return pluginInfo[slug]?.error || null;
+  };
+
+  /**
+   * Get installation/activation status for a plugin.
+   */
+  isPluginInstalledAndActive = plugin => {
+    const {
+      status
+    } = plugin;
+    return status === 'active';
+  };
+}
+var _default = exports.default = PluginToggle;

package/dist/{esm/plugin-toggle → plugin-toggle}/style.scss

@@ -2,7 +2,7 @@
  * Plugin Toggle
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-action-card {
 	&.in-flight,

package/dist/{cjs/popover → popover}/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
 });
@@ -9,7 +9,7 @@ var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -35,7 +35,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-popover', padding && 'newspack-popover__padding-' + padding, className);
-    return (0, _jsxRuntime.jsx)(_components.Popover, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
       className: classes,
       ...otherProps
     });

package/dist/{esm/popover → popover}/style.scss

@@ -2,8 +2,8 @@
  * Popover
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-popover {
 	.components-popover__content {
@@ -23,7 +23,7 @@
 				}
 			}
 
-			&:focus:not( :disabled ) {
+			&:focus:not(:disabled) {
 				box-shadow: inset 0 0 0 2px colors.$primary-500;
 				position: relative;
 				z-index: 1;
@@ -34,14 +34,14 @@
 				padding: 6px 8px;
 				text-decoration: none;
 
-				&:not( .is-destructive ) {
+				&:not(.is-destructive) {
 					color: wp-colors.$gray-700;
 
 					&:active,
 					&:active:enabled,
 					&:focus,
 					&:focus:enabled &:hover,
-					&:not( :disabled, [aria-disabled='true'], .is-default ):hover {
+					&:not(:disabled, [aria-disabled="true"], .is-default):hover {
 						color: colors.$primary-500;
 					}
 				}
@@ -52,7 +52,7 @@
 				}
 			}
 
-			&.is-destructive:not( :focus ) {
+			&.is-destructive:not(:focus) {
 				box-shadow: none !important;
 			}
 
@@ -131,7 +131,7 @@
 		}
 	}
 
-	&:not( .is-without-arrow )::before {
+	&:not(.is-without-arrow)::before {
 		border-color: wp-colors.$gray-300;
 	}
 

package/dist/{cjs/position-control → position-control}/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
 });
@@ -9,17 +9,19 @@ var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
-const __ = _i18n.__;
+
 /**
  * External dependencies
  */
+
 /**
  * Internal dependencies
  */
+
 function PositionControl({
   allowedPositions,
   value,
@@ -35,64 +37,64 @@ function PositionControl({
   const options = size === 'full-width' ? [{
     value: 'top',
     /* translators: Overlay Position */
-    label: __('Top', 'newspack-plugin')
+    label: (0, _i18n.__)('Top', 'newspack-plugin')
   }, {
     value: 'center',
     /* translators: Overlay Position */
-    label: __('Center', 'newspack-plugin')
+    label: (0, _i18n.__)('Center', 'newspack-plugin')
   }, {
     value: 'bottom',
     /* translators: Overlay Position */
-    label: __('Bottom', 'newspack-plugin')
+    label: (0, _i18n.__)('Bottom', 'newspack-plugin')
   }] : [{
     value: 'top_left',
     /* translators: Overlay Position */
-    label: __('Top Left', 'newspack-plugin')
+    label: (0, _i18n.__)('Top Left', 'newspack-plugin')
   }, {
     value: 'top',
     /* translators: Overlay Position */
-    label: __('Top Center', 'newspack-plugin')
+    label: (0, _i18n.__)('Top Center', 'newspack-plugin')
   }, {
     value: 'top_right',
     /* translators: Overlay Position */
-    label: __('Top Right', 'newspack-plugin')
+    label: (0, _i18n.__)('Top Right', 'newspack-plugin')
   }, {
     value: 'center_left',
     /* translators: Overlay Position */
-    label: __('Center Left', 'newspack-plugin')
+    label: (0, _i18n.__)('Center Left', 'newspack-plugin')
   }, {
     value: 'center',
     /* translators: Overlay Position */
-    label: __('Center', 'newspack-plugin')
+    label: (0, _i18n.__)('Center', 'newspack-plugin')
   }, {
     value: 'center_right',
     /* translators: Overlay Position */
-    label: __('Center Right', 'newspack-plugin')
+    label: (0, _i18n.__)('Center Right', 'newspack-plugin')
   }, {
     value: 'bottom_left',
     /* translators: Overlay Position */
-    label: __('Bottom Left', 'newspack-plugin')
+    label: (0, _i18n.__)('Bottom Left', 'newspack-plugin')
   }, {
     value: 'bottom',
     /* translators: Overlay Position */
-    label: __('Bottom Center', 'newspack-plugin')
+    label: (0, _i18n.__)('Bottom Center', 'newspack-plugin')
   }, {
     value: 'bottom_right',
     /* translators: Overlay Position */
-    label: __('Bottom Right', 'newspack-plugin')
+    label: (0, _i18n.__)('Bottom Right', 'newspack-plugin')
   }];
-  return (0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('newspack-position-placement-control', 'size-' + size),
-    children: [(0, _jsxRuntime.jsx)("p", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       className: "components-base-control__label",
       children: label
-    }), (0, _jsxRuntime.jsx)(_components.ButtonGroup, {
-      "aria-label": __('Select Position', 'newspack-plugin'),
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ButtonGroup, {
+      "aria-label": (0, _i18n.__)('Select Position', 'newspack-plugin'),
       ...props,
       children: options.map((option, index) => {
-        return (0, _jsxRuntime.jsx)("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: option.value === value ? 'is-selected' : null,
-          children: (0, _jsxRuntime.jsx)(_components.Button, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
             isSmall: true,
             title: option.label,
             "aria-label": option.label,
@@ -104,7 +106,7 @@ function PositionControl({
           })
         }, `newspack-position-placement-item-${index}`);
       })
-    }), (0, _jsxRuntime.jsx)("p", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       className: "components-base-control__help",
       children: help
     })]

package/dist/{cjs/position-control → position-control}/style.scss

@@ -1,4 +1,4 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-position-placement-control {
 	margin-bottom: 1em;
@@ -10,8 +10,8 @@
 
 	.components-button-group {
 		display: grid;
-		grid-template-columns: repeat( 3, 1fr );
-		grid-template-rows: repeat( 3, 1fr );
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: repeat(3, 1fr);
 
 		div {
 			padding: 1px;
@@ -24,19 +24,19 @@
 			width: 100%;
 		}
 
-		div:nth-of-type( 1 ) .components-button {
+		div:nth-of-type(1) .components-button {
 			border-radius: 4px 0 0 !important;
 		}
 
-		div:nth-of-type( 3 ) .components-button {
+		div:nth-of-type(3) .components-button {
 			border-radius: 0 4px 0 0 !important;
 		}
 
-		div:nth-last-of-type( 1 ) .components-button {
+		div:nth-last-of-type(1) .components-button {
 			border-radius: 0 0 4px !important;
 		}
 
-		div:nth-last-of-type( 3 ) .components-button {
+		div:nth-last-of-type(3) .components-button {
 			border-radius: 0 0 0 4px !important;
 		}
 	}
@@ -48,7 +48,7 @@
 			border-radius: 4px 4px 0 0 !important;
 		}
 
-		div:nth-of-type( 2 ) .components-button {
+		div:nth-of-type(2) .components-button {
 			border-radius: 0 !important;
 		}
 

package/dist/{cjs/progress-bar → progress-bar}/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _element = require("@wordpress/element");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Progress Bar
  */
@@ -49,21 +49,21 @@ class ProgressBar extends _element.Component {
     const barStyle = {
       width: this.getCompletionPercentage(cleanCompleted, cleanTotal) + '%'
     };
-    return (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-progress-bar",
-      children: [(label || displayFraction) && (0, _jsxRuntime.jsxs)("div", {
+      children: [(label || displayFraction) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-progress-bar__headings",
-        children: [label && (0, _jsxRuntime.jsx)("h2", {
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
           children: label
-        }), displayFraction && (0, _jsxRuntime.jsx)("p", {
+        }), displayFraction && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           className: "is-dark",
-          children: (0, _jsxRuntime.jsxs)("strong", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("strong", {
             children: [cleanCompleted, "/", cleanTotal]
           })
         })]
-      }), (0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-progress-bar__container",
-        children: (0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "newspack-progress-bar__bar",
           style: barStyle,
           "data-testid": "progress-bar-indicator"

package/dist/{cjs/progress-bar → progress-bar}/index.test.js

@@ -1,16 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@testing-library/react");
 var _ = _interopRequireDefault(require("./"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _react3 = require("@emotion/react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 describe('ProgressBar', () => {
   it('should render a progress indicator', () => {
     const {
       getByTestId
-    } = (0, _react2.render)((0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "1",
       total: "2"
     }));
@@ -21,7 +22,7 @@ describe('ProgressBar', () => {
     const label = 'test label';
     const {
       getByText
-    } = (0, _react2.render)((0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "1",
       total: "2",
       label: label
@@ -31,7 +32,7 @@ describe('ProgressBar', () => {
   it('should render progress as a fraction', () => {
     const {
       getByText
-    } = (0, _react2.render)((0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "1",
       total: "2",
       displayFraction: true
@@ -42,7 +43,7 @@ describe('ProgressBar', () => {
     const label = 'test label';
     const {
       getByText
-    } = (0, _react2.render)((0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "1",
       total: "2",
       label: label,
@@ -77,7 +78,7 @@ describe('ProgressBar', () => {
       it(`with expected  progress of ${expectedWidth}`, () => {
         const {
           getByTestId
-        } = (0, _react2.render)((0, _react3.createElement)(_.default, {
+        } = (0, _react2.render)( /*#__PURE__*/(0, _react.createElement)(_.default, {
           ...props,
           key: expectedWidth
         }));
@@ -89,7 +90,7 @@ describe('ProgressBar', () => {
     const {
       getByText,
       getByTestId
-    } = (0, _react2.render)((0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "cats",
       total: "dogs",
       displayFraction: true
@@ -101,7 +102,7 @@ describe('ProgressBar', () => {
     const {
       getByText,
       getByTestId
-    } = (0, _react2.render)((0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "3",
       total: "-1",
       displayFraction: true

package/dist/{esm/progress-bar → progress-bar}/style.scss

@@ -2,8 +2,8 @@
  * Progress Bar
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-progress-bar {
 	margin: 32px 0;

package/dist/proxied-imports/router.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var ReactRouterDOM = _interopRequireWildcard(require("react-router-dom"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * A proxy for react-router-dom.
+ * Ensures that both components and the plugin use the same instance of
+ * React Router, even if there are node_modules in components.
+ */
+var _default = exports.default = ReactRouterDOM;

package/dist/{cjs/radio-control → radio-control}/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
 });
@@ -9,7 +9,7 @@ var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
@@ -34,7 +34,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-radio-control', className);
-    return (0, _jsxRuntime.jsx)(_components.RadioControl, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RadioControl, {
       className: classes,
       ...otherProps
     });

package/dist/{esm/radio-control → radio-control}/style.scss

@@ -2,8 +2,8 @@
  * Radio Control
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-radio-control {
 	color: wp-colors.$gray-700;
@@ -41,7 +41,7 @@
 
 	// Radio
 
-	input[type='radio'] {
+	input[type="radio"] {
 		height: 24px;
 		margin-right: 8px;
 		width: 24px;