newspack-components 3.0.0 → 4.0.0

package/dist/cjs/hooks/useObjectState.test.js

@@ -50,31 +50,31 @@ const TestComponent = () => {
 describe('useObjectState', () => {
   const getState = () => JSON.parse(_react2.screen.getByPlaceholderText('state').getAttribute('value'));
   beforeEach(() => {
-    (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {}));
+    (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {}));
   });
   it('updates arrays', () => {
     expect(getState()).toStrictEqual(INIT_STATE);
-    _react2.screen.getByText('Remove widgets').click();
+    (0, _react2.act)(() => _react2.screen.getByText('Remove widgets').click());
     expect(getState()).toMatchObject({
       widgets: []
     });
-    _react2.screen.getByText('Add widget').click();
+    (0, _react2.act)(() => _react2.screen.getByText('Add widget').click());
     expect(getState()).toMatchObject({
       widgets: [1]
     });
   });
   it('updates a simple value', () => {
-    _react2.fireEvent.change(_react2.screen.getByPlaceholderText('name'), {
+    (0, _react2.act)(() => _react2.fireEvent.change(_react2.screen.getByPlaceholderText('name'), {
       target: {
         value: 'Ramon'
       }
-    });
+    }));
     expect(getState()).toMatchObject({
       name: 'Ramon'
     });
   });
   it('updates a nested object', () => {
-    _react2.screen.getByText('Nested update').click();
+    (0, _react2.act)(() => _react2.screen.getByText('Nested update').click());
     expect(getState()).toMatchObject({
       attributes: {
         bar: 2,

package/dist/cjs/image-upload/index.test.js

@@ -16,7 +16,7 @@ describe('ImageUpload', () => {
   it('should render an add image button', () => {
     const {
       getByText
-    } = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {}));
+    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {}));
     expect(getByText('Upload')).toBeInTheDocument();
   });
   it('should render replace and remove buttons if there is an image provided', () => {
@@ -27,7 +27,7 @@ describe('ImageUpload', () => {
     const {
       getByText,
       getByTestId
-    } = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       image: image
     }));
     expect(getByText('Remove')).toBeInTheDocument();

package/dist/cjs/index.js

@@ -28,6 +28,12 @@ Object.defineProperty(exports, "AutocompleteWithSuggestions", {
     return _autocompleteWithSuggestions.default;
   }
 });
+Object.defineProperty(exports, "BoxContrast", {
+  enumerable: true,
+  get: function () {
+    return _boxContrast.default;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -64,12 +70,6 @@ Object.defineProperty(exports, "CustomSelectControl", {
     return _customSelectControl.default;
   }
 });
-Object.defineProperty(exports, "DateRangePicker", {
-  enumerable: true,
-  get: function () {
-    return _dateRangePicker.default;
-  }
-});
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function () {
@@ -130,24 +130,12 @@ Object.defineProperty(exports, "NewspackIcon", {
     return _newspackIcon.default;
   }
 });
-Object.defineProperty(exports, "NewspackLogo", {
-  enumerable: true,
-  get: function () {
-    return _newspackLogo.default;
-  }
-});
 Object.defineProperty(exports, "Notice", {
   enumerable: true,
   get: function () {
     return _notice.default;
   }
 });
-Object.defineProperty(exports, "PatronsLogo", {
-  enumerable: true,
-  get: function () {
-    return _patronsLogo.default;
-  }
-});
 Object.defineProperty(exports, "PluginInstaller", {
   enumerable: true,
   get: function () {
@@ -286,6 +274,7 @@ var _autocompleteTokenfield = _interopRequireDefault(require("./autocomplete-tok
 var _autocompleteWithSuggestions = _interopRequireDefault(require("./autocomplete-with-suggestions"));
 var _button = _interopRequireDefault(require("./button"));
 var _buttonCard = _interopRequireDefault(require("./button-card"));
+var _boxContrast = _interopRequireDefault(require("./box-contrast"));
 var _card = _interopRequireDefault(require("./card"));
 var _categoryAutocomplete = _interopRequireDefault(require("./category-autocomplete"));
 var _colorPicker = _interopRequireDefault(require("./color-picker"));
@@ -300,9 +289,7 @@ var _globalNotices = _interopRequireDefault(require("./global-notices"));
 var _grid = _interopRequireDefault(require("./grid"));
 var _modal = _interopRequireDefault(require("./modal"));
 var _newspackIcon = _interopRequireDefault(require("./newspack-icon"));
-var _newspackLogo = _interopRequireDefault(require("./newspack-logo"));
 var _notice = _interopRequireDefault(require("./notice"));
-var _patronsLogo = _interopRequireDefault(require("./patrons-logo"));
 var _pluginInstaller = _interopRequireDefault(require("./plugin-installer"));
 var _pluginSettings = _interopRequireDefault(require("./plugin-settings"));
 var _pluginToggle = _interopRequireDefault(require("./plugin-toggle"));
@@ -311,7 +298,6 @@ var _progressBar = _interopRequireDefault(require("./progress-bar"));
 var _radioControl = _interopRequireDefault(require("./radio-control"));
 var _sectionHeader = _interopRequireDefault(require("./section-header"));
 var _selectControl = _interopRequireDefault(require("./select-control"));
-var _dateRangePicker = _interopRequireDefault(require("./date-range-picker"));
 var _settings = _interopRequireDefault(require("./settings"));
 var _stepsList = _interopRequireDefault(require("./steps-list"));
 var _stepsListItem = _interopRequireDefault(require("./steps-list-item"));

package/dist/cjs/modal/index.js

@@ -26,22 +26,20 @@ var _jsxRuntime = require("react/jsx-runtime");
  * External dependencies.
  */
 
-class Modal extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      isWide,
-      isNarrow,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
-      className: classes,
-      ...otherProps
-    });
-  }
+function Modal({
+  className,
+  isWide,
+  isNarrow,
+  hideTitle,
+  ...otherProps
+}, ref) {
+  const classes = (0, _classnames.default)('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', hideTitle && 'newspack-modal--hide-title',
+  // Note: also hides the X close button.
+  className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
+    className: classes,
+    ...otherProps,
+    ref: ref
+  });
 }
-var _default = exports.default = Modal;
+var _default = exports.default = (0, _element.forwardRef)(Modal);

package/dist/cjs/modal/style.scss

@@ -2,16 +2,16 @@
  * Modal
  */
 
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-modal {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
 
 	@media screen and ( min-width: 744px ) {
 		max-width: 680px;
@@ -28,6 +28,17 @@
 		width: 360px;
 	}
 
+	&--hide-title {
+		.components-modal__header {
+			display: none;
+		}
+
+		.components-modal__content {
+			margin-top: 0;
+			padding-top: 32px;
+		}
+	}
+
 	@media screen and ( min-width: 960px ) {
 		max-height: calc(100% - 128px);
 	}

package/dist/cjs/newspack-icon/index.js

@@ -42,12 +42,12 @@ class NewspackIcon extends _element.Component {
       xmlns: "http://www.w3.org/2000/svg",
       height: size,
       width: size,
-      viewBox: "0 0 32 32",
+      viewBox: "0 0 24 24",
       className: classes,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
         fillRule: "evenodd",
         clipRule: "evenodd",
-        d: "M32 16c0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16S7.164 0 16 0s16 7.164 16 16zm-10.732.622h1.72v-1.124h-2.823l1.103 1.124zm-3.249-3.31h4.97v-1.124h-6.072l1.102 1.124zm-3.248-3.31h8.217V8.877h-9.32l1.103 1.125zM9.01 8.877l13.977 14.246h-4.66l-5.866-5.98v5.98h-3.45V8.877z"
+        d: "M24 12C24 18.6271 18.6271 24 12 24C5.37213 24 0 18.6271 0 12C0 5.3729 5.3729 0 12 0C18.6271 0 24 5.3729 24 12ZM17.4545 17.4546L6.54545 6.54545V17.4545H8.72727V11.8182L14.3636 17.4546H17.4545ZM11.2727 8.18182H17.4545V6.54545H9.63636L11.2727 8.18182ZM17.4545 11.2727H14.3636L12.7273 9.63636H17.4545V11.2727ZM17.4545 12.7273V14.3636L15.8182 12.7273H17.4545Z"
       })
     });
   }

package/dist/cjs/newspack-icon/style.scss

@@ -2,21 +2,19 @@
  * Newspack Icon
  */
 
-@use "../../../shared/scss/colors";
-
 .newspack-icon {
-	background: colors.$primary-500;
+	background: var(--wp-admin-theme-color);
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: colors.$primary-500;
+		fill: var(--wp-admin-theme-color);
 	}
 
 	&--simple {
 		background: none;
-		fill: colors.$primary-500;
+		fill: var(--wp-admin-theme-color);
 		padding: 0;
 	}
 

package/dist/cjs/notice/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
-var _i18n = require("@wordpress/i18n");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -65,7 +64,7 @@ class Notice extends _element.Component {
         className: "newspack-notice__content",
         children: [rawHTML ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
           children: noticeText
-        }) : noticeText, debugMode && (0, _i18n.__)('Debug Mode', 'newspack-plugin'), children || null]
+        }) : noticeText, children || null]
       })]
     });
   }

package/dist/cjs/notice/style.scss

@@ -4,7 +4,7 @@
 
 @use "sass:color";
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-notice {
 	align-items: center;
@@ -13,7 +13,7 @@
 	display: flex;
 	justify-content: flex-start;
 	margin: 32px 0;
-	padding: 6px 8px;
+	padding: 8px 12px;
 
 	> svg {
 		display: block;
@@ -23,24 +23,26 @@
 	}
 
 	&__is-debug {
-		background: colors.$primary-700;
-		border-radius: 2px;
+		background: colors.$primary-600;
+		border-radius: 50%;
 		bottom: 16px;
 		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 		color: white;
 		font-weight: bold;
 		margin: 0 16px;
+		padding: 6px;
 		position: fixed;
 		text-transform: uppercase;
 		z-index: 9997;
 
 		> svg {
 			fill: white;
+			margin: 0;
 		}
 	}
 
 	&__is-error {
-		background: color.adjust(wp-colors.$alert-red, $lightness: 51%);
+		background: color.adjust(wp-colors.$alert-red, $lightness: 35%);
 
 		> svg {
 			fill: wp-colors.$alert-red;
@@ -49,7 +51,7 @@
 	}
 
 	&__is-handoff {
-		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 35%);
 		margin-top: 0;
 		position: sticky;
 		top: 46px;
@@ -64,12 +66,12 @@
 		background: colors.$primary-050;
 
 		> svg {
-			fill: colors.$primary-500;
+			fill: var(--wp-admin-theme-color);
 		}
 	}
 
 	&__is-success {
-		background: color.adjust(wp-colors.$alert-green, $lightness: 42%);
+		background: color.adjust(wp-colors.$alert-green, $lightness: 45%);
 
 		> svg {
 			fill: wp-colors.$alert-green;
@@ -77,7 +79,7 @@
 	}
 
 	&__is-warning {
-		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 35%);
 
 		> svg {
 			fill: wp-colors.$alert-yellow;

package/dist/cjs/plugin-installer/index.js

@@ -191,8 +191,8 @@ class PluginInstaller extends _element.Component {
       pluginInfo
     } = this.state;
     const {
-      is_atomic: isAtomic
-    } = window;
+      is_managed: isManaged
+    } = window.newspack_aux_data || {};
     const slugs = Object.keys(pluginInfo);
 
     // Store all plugin status info for installer button text value based on current status.
@@ -234,7 +234,7 @@ class PluginInstaller extends _element.Component {
         } else if (!installable) {
           actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "newspack-plugin-installer__status",
-            children: [isAtomic ? (0, _i18n.__)('Contact Newspack support to install', 'newspack-plugin') : (0, _i18n.__)('Plugin must be installed manually', 'newspack-plugin'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: [isManaged ? (0, _i18n.__)('Contact Newspack support to install', 'newspack-plugin') : (0, _i18n.__)('Plugin must be installed manually', 'newspack-plugin'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "newspack-checkbox-icon"
             })]
           });

package/dist/cjs/plugin-settings/SettingsSection.js

@@ -58,6 +58,7 @@ const getControlType = setting => {
   }
 };
 const SettingsSection = props => {
+  var _props$id;
   const [saveDisabled, setSaveDisabled] = (0, _element.useState)(true);
   const {
     error,
@@ -98,6 +99,7 @@ const SettingsSection = props => {
     columns = 1;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
+    id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : null,
     isMedium: true,
     disabled: disabled,
     title: title,

package/dist/cjs/plugin-settings/index.js

@@ -188,7 +188,8 @@ class PluginSettings extends _element.Component {
       title,
       description,
       hasGreyHeader,
-      children
+      children,
+      titleLevel = 1
     } = this.props;
     const {
       settings,
@@ -198,6 +199,7 @@ class PluginSettings extends _element.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
       children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
         title: title,
+        heading: titleLevel,
         description: description
       }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         isError: true,
@@ -208,6 +210,7 @@ class PluginSettings extends _element.Component {
         }),
         children: [Object.keys(settings).map(sectionKey => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsSection.default, {
           disabled: inFlight,
+          id: `plugin-settings-${sectionKey}`,
           sectionKey: sectionKey,
           title: this.getSectionTitle(sectionKey),
           description: this.getSectionDescription(sectionKey),

package/dist/cjs/plugin-toggle/index.js

@@ -103,6 +103,7 @@ var _jsxRuntime = require("react/jsx-runtime");
       pluginInfo
     } = this.state;
     return this.prepareDataForRender(plugins, pluginInfo).map((plugin, index) => {
+      var _plugin$onClick;
       const {
         name,
         description,
@@ -119,6 +120,7 @@ var _jsxRuntime = require("react/jsx-runtime");
         description: description,
         actionText: this.actionTextForPlugin(plugin),
         handoff: handoff,
+        onClick: (_plugin$onClick = plugin.onClick) !== null && _plugin$onClick !== void 0 ? _plugin$onClick : null,
         href: href,
         toggle: true,
         toggleChecked: this.isPluginInstalledAndActive(plugin),

package/dist/cjs/popover/style.scss

@@ -2,7 +2,6 @@
  * Popover
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-popover {
@@ -16,7 +15,7 @@
 			padding: 6px 8px;
 
 			&:hover {
-				color: colors.$primary-500;
+				color: var(--wp-admin-theme-color);
 
 				.components-menu-items__item-icon {
 					fill: currentcolor;
@@ -24,7 +23,7 @@
 			}
 
 			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 2px colors.$primary-500;
+				box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 				position: relative;
 				z-index: 1;
 			}
@@ -42,7 +41,7 @@
 					&:focus,
 					&:focus:enabled &:hover,
 					&:not(:disabled, [aria-disabled="true"], .is-default):hover {
-						color: colors.$primary-500;
+						color: var(--wp-admin-theme-color);
 					}
 				}
 
@@ -89,8 +88,8 @@
 					min-height: 36px;
 
 					&:focus ~ div.components-input-control__backdrop {
-						border-color: colors.$primary-500;
-						box-shadow: inset 0 0 0 1px colors.$primary-500;
+						border-color: var(--wp-admin-theme-color);
+						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 					}
 				}
 

package/dist/cjs/progress-bar/index.test.js

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

package/dist/cjs/progress-bar/style.scss

@@ -2,7 +2,6 @@
  * Progress Bar
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-progress-bar {
@@ -35,7 +34,7 @@
 	}
 
 	&__bar {
-		background-color: colors.$primary-500;
+		background-color: var(--wp-admin-theme-color);
 		height: 8px;
 		transition: width 125ms ease-in-out;
 	}

package/dist/cjs/proxied-imports/router.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * A proxy for react-router-dom.
  * Ensures that both components and the plugin use the same instance of

package/dist/cjs/radio-control/style.scss

@@ -2,7 +2,6 @@
  * Radio Control
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-radio-control {
@@ -24,7 +23,6 @@
 	}
 
 	// Options
-
 	.components-radio-control__option {
 		align-items: center;
 		display: flex;
@@ -40,20 +38,22 @@
 	}
 
 	// Radio
-
 	input[type="radio"] {
 		height: 24px;
-		margin-right: 8px;
 		width: 24px;
+		max-height: 24px;
+		max-width: 24px;
 
 		@media screen and ( min-width: 782px ) {
 			height: 20px;
 			width: 20px;
+			max-height: 20px;
+			max-width: 20px;
 		}
 
 		&:checked {
-			background-color: colors.$primary-500;
-			border-color: colors.$primary-500;
+			background-color: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
 
 			&::before {
 				border: none;
@@ -61,20 +61,18 @@
 		}
 
 		&:focus {
-			border-color: colors.$primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px colors.$primary-500;
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 2px white, 0 0 0 3.5px var(--wp-admin-theme-color);
 		}
 	}
 
 	// Multiple Radio Controls
-
 	& + & {
 		margin-bottom: 32px;
 		margin-top: -16px;
 	}
 
 	// Multiple Controls
-
 	+ .newspack-select-control,
 	+ .newspack-text-control {
 		margin-bottom: 32px;
@@ -82,7 +80,6 @@
 	}
 
 	// Reset
-
 	.components-base-control__field,
 	.components-base-control__label,
 	.components-base-control__help {