newspack-components 4.8.1-alpha.1 → 4.9.0-alpha.1

package/CHANGELOG.md

@@ -1,11 +1,12 @@
-## newspack-components [4.8.1-alpha.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.8.0...newspack-components@4.8.1-alpha.1) (2026-09-17)
+# newspack-components [4.9.0-alpha.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.8.1-alpha.1...newspack-components@4.9.0-alpha.1) (2026-09-28)
 
 
-### Bug Fixes
+### Features
 
-* **components:** confirm before the footer's destructive actions ([#965](https://github.com/Automattic/newspack-workspace/issues/965)) ([e4e6676](https://github.com/Automattic/newspack-workspace/commit/e4e66763aa5ce74265689aa6fee4941f2f7348be))
-* **empty-state:** adopt the shared component on three screens ([#1035](https://github.com/Automattic/newspack-workspace/issues/1035)) ([ddfc071](https://github.com/Automattic/newspack-workspace/commit/ddfc071f905e37b20addce7a6416f22665c9042d))
-* **subscribers:** use core Notice for load-failure states ([#1029](https://github.com/Automattic/newspack-workspace/issues/1029)) ([f13281b](https://github.com/Automattic/newspack-workspace/commit/f13281b9d5a176d8beb9667aba6f8d599c6ad331))
+* **audience:** refresh the Integrations brand marks ([#1155](https://github.com/Automattic/newspack-workspace/issues/1155)) ([af2729c](https://github.com/Automattic/newspack-workspace/commit/af2729cc6a5dd69cebe18456762eb21c55ae16a3))
+* **audience:** refresh the Integrations screen icons, order and copy ([#1151](https://github.com/Automattic/newspack-workspace/issues/1151)) ([1d3f5a6](https://github.com/Automattic/newspack-workspace/commit/1d3f5a6c074f18491b3047c0e679e6c4f7b1f3cd))
+* **reader-activation:** split Gravity Forms into its own integration ([#1170](https://github.com/Automattic/newspack-workspace/issues/1170)) ([7bd756b](https://github.com/Automattic/newspack-workspace/commit/7bd756bc30b12856091c126c6d054d45e6b78244))
+* **sync:** read the push log in a sync activity tab ([#1114](https://github.com/Automattic/newspack-workspace/issues/1114)) ([c1a2d2d](https://github.com/Automattic/newspack-workspace/commit/c1a2d2d299b8a0150ce1c4de37e14edf437176b3))
 
 # newspack-components [4.8.0](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.7.0...newspack-components@4.8.0) (2026-09-14)
 

package/dist/cjs/card-feature/index.js

@@ -80,6 +80,30 @@ var _CardFeature = function CardFeature(_ref) {
   // translators: %1$s: the button's visible action label, e.g. "Enable". %2$s: the feature's name. The visible label must stay first (WCAG 2.5.3).
   (0, _i18n._x)('%1$s %2$s', 'accessible button name: visible action label, then feature name', 'newspack-plugin'), buttonLabel, title);
   var showMoreControls = enabled && !!(moreControls !== null && moreControls !== void 0 && moreControls.length) && (!requirements || requirementsActionable);
+  // A Configure button with nothing behind it would click to nowhere.
+  var showPrimaryButton = !isConfigureState || !!onConfigure;
+
+  // Enabling a feature with nothing to configure removes the button that was
+  // just used, so its focus goes to the More menu instead of the page. React
+  // detaches a ref before removing the node, which is the last point the
+  // button can still be read as focused.
+  var actionsRef = (0, _element.useRef)(null);
+  var primaryButtonNode = (0, _element.useRef)(null);
+  var primaryButtonLeftWithFocus = (0, _element.useRef)(false);
+  var primaryButtonRef = (0, _element.useCallback)(function (node) {
+    if (!node && primaryButtonNode.current) {
+      primaryButtonLeftWithFocus.current = primaryButtonNode.current === primaryButtonNode.current.ownerDocument.activeElement;
+    }
+    primaryButtonNode.current = node;
+  }, []);
+  (0, _element.useEffect)(function () {
+    var _actionsRef$current;
+    if (showPrimaryButton || !primaryButtonLeftWithFocus.current) {
+      return;
+    }
+    primaryButtonLeftWithFocus.current = false;
+    (_actionsRef$current = actionsRef.current) === null || _actionsRef$current === void 0 || (_actionsRef$current = _actionsRef$current.querySelector('.components-dropdown-menu__toggle')) === null || _actionsRef$current === void 0 || _actionsRef$current.focus();
+  }, [showPrimaryButton]);
   var handleButtonClick = function handleButtonClick() {
     if (isConfigureState) {
       onConfigure === null || onConfigure === void 0 || onConfigure();
@@ -89,8 +113,7 @@ var _CardFeature = function CardFeature(_ref) {
   };
   var iconDescriptor = icon && !(0, _element.isValidElement)(icon) ? icon : null;
   var iconClasses = iconDescriptor ? (0, _classnames["default"])('newspack-card-feature__icon', {
-    'newspack-card-feature__icon--radius-small': !!iconDescriptor.backgroundColor && iconDescriptor.radius !== 'full',
-    'newspack-card-feature__icon--radius-full': iconDescriptor.radius === 'full'
+    'newspack-card-feature__icon--has-background': !!iconDescriptor.backgroundColor
   }) : undefined;
   var renderedIcon = null;
   if ((0, _element.isValidElement)(icon)) {
@@ -137,10 +160,12 @@ var _CardFeature = function CardFeature(_ref) {
         gap: "sm",
         wrap: "wrap",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Stack, {
+          ref: actionsRef,
           direction: "row",
           align: "center",
           gap: "sm",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
+          children: [showPrimaryButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
+            ref: primaryButtonRef,
             variant: isConfigureState ? 'tertiary' : 'secondary',
             accessibleWhenDisabled: true,
             "aria-describedby": describedById,

package/dist/cjs/card-feature/index.test.js

@@ -91,7 +91,8 @@ describe('CardFeature', function () {
     it('names the feature in the configure state too', function () {
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content Gifting",
-        enabled: true
+        enabled: true,
+        onConfigure: function onConfigure() {}
       }));
       expect(_react.screen.getByRole('button', {
         name: 'Configure Content Gifting'
@@ -160,6 +161,72 @@ describe('CardFeature', function () {
       expect(onConfigure).toHaveBeenCalledTimes(1);
       expect(onEnable).not.toHaveBeenCalled();
     });
+
+    // A button reading Configure with nothing behind it would click to nowhere.
+    it('drops the primary button once enabled when there is nothing to configure', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+        title: "Content gifting",
+        enabled: true,
+        onEnable: jest.fn(),
+        moreControls: [{
+          title: 'Disable',
+          onClick: jest.fn()
+        }]
+      }));
+      expect(_react.screen.queryByRole('button', {
+        name: /Configure/
+      })).toBeNull();
+      expect(moreMenu()).toBeInTheDocument();
+    });
+
+    // Enabling removes the button that was just used; without a hand-off,
+    // keyboard focus falls to the page.
+    it('hands focus to the More menu when enabling removes the focused button', function () {
+      var props = {
+        title: 'Content gifting',
+        onEnable: jest.fn(),
+        moreControls: [{
+          title: 'Disable',
+          onClick: jest.fn()
+        }]
+      };
+      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread({}, props))),
+        rerender = _render2.rerender;
+      primaryButton().focus();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread(_objectSpread({}, props), {}, {
+        enabled: true
+      })));
+      expect(moreMenu()).toHaveFocus();
+    });
+    it('leaves focus alone when the removed button did not have it', function () {
+      var props = {
+        title: 'Content gifting',
+        onEnable: jest.fn(),
+        moreControls: [{
+          title: 'Disable',
+          onClick: jest.fn()
+        }]
+      };
+      var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            children: "Elsewhere"
+          })]
+        })),
+        rerender = _render3.rerender;
+      _react.screen.getByRole('button', {
+        name: 'Elsewhere'
+      }).focus();
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], _objectSpread(_objectSpread({}, props), {}, {
+          enabled: true
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          children: "Elsewhere"
+        })]
+      }));
+      expect(_react.screen.getByRole('button', {
+        name: 'Elsewhere'
+      })).toHaveFocus();
+    });
     it('still routes to onEnable when enabled with an unmet requirement, since the button reads Enable', function () {
       var onEnable = jest.fn();
       var onConfigure = jest.fn();
@@ -217,18 +284,19 @@ describe('CardFeature', function () {
     it('leaves the enabled badge unlinked, since it explains nothing about the button', function () {
       (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
-        enabled: true
+        enabled: true,
+        onConfigure: function onConfigure() {}
       }));
       expect(primaryButton()).not.toHaveAttribute('aria-describedby');
     });
     it('disables the button while an action is in flight, even with an actionable requirement', function () {
       var onEnable = jest.fn();
-      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           busy: true,
           onEnable: onEnable
         })),
-        rerender = _render2.rerender;
+        rerender = _render4.rerender;
       expect(primaryButton()).toHaveAttribute('aria-disabled', 'true');
       _react.fireEvent.click(primaryButton());
       expect(onEnable).not.toHaveBeenCalled();
@@ -242,12 +310,12 @@ describe('CardFeature', function () {
       expect(primaryButton()).toHaveAttribute('aria-disabled', 'true');
     });
     it('accepts custom labels for both states', function () {
-      var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Apple News",
           enableLabel: "Connect",
           configureLabel: "Manage connection"
         })),
-        rerender = _render3.rerender;
+        rerender = _render5.rerender;
       expect(_react.screen.getByRole('button', {
         name: 'Connect Apple News'
       })).toBeInTheDocument();
@@ -255,7 +323,8 @@ describe('CardFeature', function () {
         title: "Apple News",
         enabled: true,
         enableLabel: "Connect",
-        configureLabel: "Manage connection"
+        configureLabel: "Manage connection",
+        onConfigure: function onConfigure() {}
       }));
       expect(_react.screen.getByRole('button', {
         name: 'Manage connection Apple News'
@@ -264,10 +333,10 @@ describe('CardFeature', function () {
   });
   describe('badge', function () {
     it('shows nothing when off, and the enabled badge when on', function () {
-      var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting"
         })),
-        rerender = _render4.rerender;
+        rerender = _render6.rerender;
       expect(_react.screen.queryByText('Enabled')).not.toBeInTheDocument();
       rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
@@ -302,11 +371,11 @@ describe('CardFeature', function () {
       onClick: jest.fn()
     }];
     it('appears only when enabled and controls are supplied', function () {
-      var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           moreControls: controls
         })),
-        rerender = _render5.rerender;
+        rerender = _render7.rerender;
       expect(moreMenu()).not.toBeInTheDocument();
       rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
@@ -321,14 +390,14 @@ describe('CardFeature', function () {
       expect(moreMenu()).toBeInTheDocument();
     });
     it('stays available on an actionable requirement and hides on a locked one', function () {
-      var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           enabled: true,
           requirements: "Requires metering",
           requirementsActionable: true,
           moreControls: controls
         })),
-        rerender = _render6.rerender;
+        rerender = _render8.rerender;
       expect(moreMenu()).toBeInTheDocument();
       rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
@@ -341,88 +410,74 @@ describe('CardFeature', function () {
   });
   describe('icon', function () {
     it('renders a ready element as-is, without the descriptor container', function () {
-      var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             "data-testid": "ready-icon"
           })
         })),
-        container = _render7.container;
+        container = _render9.container;
       expect(_react.screen.getByTestId('ready-icon')).toBeInTheDocument();
       expect(container.querySelector('.newspack-card-feature__icon')).toBeNull();
     });
-    it('applies the descriptor colours inline and rounds fully on request', function () {
-      var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+    it('applies the descriptor colours inline and rounds a backed icon', function () {
+      var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           icon: {
             node: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               "data-testid": "descriptor-icon"
             }),
             fill: '#003da5',
-            backgroundColor: '#dfe7f4',
-            radius: 'full'
+            backgroundColor: '#dfe7f4'
           }
         })),
-        container = _render8.container;
+        container = _render0.container;
       var iconContainer = container.querySelector('.newspack-card-feature__icon');
       expect(_react.screen.getByTestId('descriptor-icon')).toBeInTheDocument();
-      expect(iconContainer).toHaveClass('newspack-card-feature__icon--radius-full');
+      expect(iconContainer).toHaveClass('newspack-card-feature__icon--has-background');
       expect(iconContainer).toHaveStyle({
         backgroundColor: '#dfe7f4',
         color: '#003da5'
       });
     });
     it('hides the descriptor container from assistive tech, since the title already names the feature', function () {
-      var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           icon: {
             node: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {})
           }
         })),
-        container = _render9.container;
+        container = _render1.container;
       expect(container.querySelector('.newspack-card-feature__icon')).toHaveAttribute('aria-hidden', 'true');
     });
-    it('falls back to small corners when a background is set without a radius', function () {
-      var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
-          title: "Content gifting",
-          icon: {
-            node: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}),
-            backgroundColor: '#dfe7f4'
-          }
-        })),
-        container = _render0.container;
-      var iconContainer = container.querySelector('.newspack-card-feature__icon');
-      expect(iconContainer).toHaveClass('newspack-card-feature__icon--radius-small');
-      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--radius-full');
-    });
-    it('leaves an unbacked descriptor icon without a radius class', function () {
-      var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+    it('leaves an unbacked descriptor icon without the background class', function () {
+      var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
           title: "Content gifting",
           icon: {
             node: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}),
             fill: '#003da5'
           }
         })),
-        container = _render1.container;
+        container = _render10.container;
       var iconContainer = container.querySelector('.newspack-card-feature__icon');
-      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--radius-small');
+      expect(iconContainer).not.toHaveClass('newspack-card-feature__icon--has-background');
     });
   });
   it('passes className through to the card element', function () {
-    var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+    var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
         className: "newspack-subscribers__card"
       })),
-      container = _render10.container;
+      container = _render11.container;
     expect(container.querySelector('.newspack-card-feature')).toHaveClass('newspack-subscribers__card');
   });
   it('marks the card as muted only when requirements are set', function () {
-    var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+    var _render12 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
         title: "Content gifting",
         enabled: true
       })),
-      container = _render11.container,
-      rerender = _render11.rerender;
+      container = _render12.container,
+      rerender = _render12.rerender;
     expect(container.querySelector('.newspack-card-feature--muted')).toBeNull();
     rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
       title: "Content gifting",

package/dist/cjs/card-feature/style.scss

@@ -49,11 +49,7 @@
 			width: wp-vars.$grid-unit-30;
 		}
 
-		&--radius-small {
-			border-radius: wp-vars.$radius-small;
-		}
-
-		&--radius-full {
+		&--has-background {
 			border-radius: wp-vars.$radius-round;
 		}
 	}

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

@@ -18,14 +18,14 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 /**
- * The single source for how an ESP provider is shown: brand mark plus badge
- * background. A new provider needs an icon file, an `espProviderIcons` entry,
+ * The single source for how a provider is shown: brand mark plus badge
+ * background. A new provider needs an icon file, a `providerIcons` entry,
  * and a background rule in this component's stylesheet.
  */var IntegrationIcon = function IntegrationIcon(_ref) {
   var provider = _ref.provider,
     className = _ref.className;
-  var icons = _integrationIcons.espProviderIcons;
-  var node = Object.prototype.hasOwnProperty.call(_integrationIcons.espProviderIcons, provider) ? icons[provider] : null;
+  var icons = _integrationIcons.providerIcons;
+  var node = Object.prototype.hasOwnProperty.call(_integrationIcons.providerIcons, provider) ? icons[provider] : null;
   if (!node) {
     return null;
   }

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

@@ -21,14 +21,26 @@
 		background: #004cff;
 	}
 
-	&--mailchimp {
-		background: #ffe01b;
+	&--beehiiv {
+		background: #060419;
 	}
 
 	&--constant-contact {
 		background: wp-colors.$gray-100;
 	}
 
+	&--fundraiseup {
+		background: #2bb77b;
+	}
+
+	&--gravity-forms {
+		background: #ff4f00;
+	}
+
+	&--mailchimp {
+		background: #ffe01b;
+	}
+
 	&--manual {
 		background: wp-colors.$gray-800;
 		color: wp-colors.$white;
@@ -39,4 +51,8 @@
 			fill: currentcolor;
 		}
 	}
+
+	&--salesforce {
+		background: #0d9dda;
+	}
 }

package/dist/cjs/integration-icons/active-campaign.js

@@ -5,18 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var activeCampaign = /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+var activeCampaign = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
   fill: "none",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M16.6934 10.5811C17.1772 10.9036 17.4355 11.4194 17.4355 11.9678C17.4355 12.516 17.1449 13.0319 16.6934 13.3545L6.56445 20V18.6133C6.56445 18.1939 6.75844 17.7746 7.14551 17.5166L15.5 11.9678L7.14551 6.38672C6.79063 6.16086 6.56445 5.74175 6.56445 5.29004V4L16.6934 10.5811Z",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M17.28 10.4037C17.8244 10.7666 18.115 11.3468 18.115 11.9637C18.115 12.5805 17.788 13.1609 17.28 13.5238L5.88501 21V19.4399C5.88501 18.9681 6.10324 18.4965 6.5387 18.2062L15.9375 11.9637L6.5387 5.68506C6.13946 5.43097 5.88501 4.95947 5.88501 4.45129V3L17.28 10.4037ZM5.88501 8.37122C5.88501 7.89959 6.4296 7.64482 6.79248 7.8988L12.7438 11.9275L11.9451 12.4713C11.4371 12.7977 10.7842 12.7978 10.2762 12.4713L8.96997 11.6375L5.88501 9.56873V8.37122Z",
     fill: "white"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M6.56445 8.77441C6.56445 8.35519 7.04853 8.12873 7.37109 8.35449L12.6611 11.9355L11.9512 12.4189C11.4996 12.7091 10.9193 12.7092 10.4678 12.4189L9.30664 11.6777L6.56445 9.83887V8.77441Z",
-    fill: "white"
-  })]
+  })
 });
 var _default = exports["default"] = activeCampaign;

package/dist/cjs/integration-icons/beehiiv.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var beehiiv = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M18.6602 11.4894H5.35668C5.19293 11.4883 5.03627 11.4225 4.92088 11.3063C4.80549 11.1901 4.74073 11.033 4.74073 10.8692V9.92487C4.7398 9.67122 4.78886 9.41988 4.88509 9.1852C4.98132 8.95052 5.12284 8.73709 5.30157 8.55712C5.4803 8.37714 5.69274 8.23414 5.92675 8.13629C6.16076 8.03843 6.41176 7.98764 6.6654 7.9868H17.3353C17.5889 7.98754 17.8398 8.03822 18.0738 8.13595C18.3078 8.23368 18.5203 8.37654 18.6991 8.55637C18.8779 8.7362 19.0195 8.94949 19.1158 9.18406C19.2122 9.41862 19.2614 9.66987 19.2607 9.92346V10.8685C19.2638 10.9491 19.2506 11.0296 19.2218 11.1049C19.193 11.1803 19.1492 11.249 19.0931 11.307C19.0369 11.365 18.9697 11.411 18.8953 11.4422C18.8209 11.4734 18.7409 11.4899 18.6602 11.4894ZM15.8574 6.96492H8.15947C7.99191 6.96343 7.8317 6.89593 7.71361 6.77704C7.59552 6.65816 7.52908 6.4975 7.52872 6.32994C7.52872 4.74919 8.80643 3.46302 10.3773 3.46302H13.641C15.2119 3.46302 16.4896 4.74919 16.4896 6.32994C16.4907 6.41334 16.4752 6.49613 16.4439 6.57345C16.4126 6.65077 16.3662 6.72106 16.3074 6.7802C16.2486 6.83934 16.1785 6.88615 16.1014 6.91787C16.0243 6.94959 15.9416 6.96558 15.8582 6.96492H15.8574ZM19.2755 12.5113H4.74073C3.7858 12.5113 3 13.3013 3 14.2619C3 15.2225 3.7858 16.0132 4.74073 16.0132H9.89879C10.0834 15.0216 10.9453 14.2619 11.9919 14.2619C12.4923 14.2631 12.9767 14.4386 13.3618 14.7582C13.7468 15.0778 14.0085 15.5216 14.1019 16.0132H19.2607C20.2149 16.0132 21 15.2225 21 14.2619C21 13.3013 20.2304 12.5113 19.2755 12.5113ZM18.6454 17.0358H14.1336V20.537H17.5214C18.4756 20.537 19.2607 19.7477 19.2607 18.7864V17.6708C19.2636 17.5882 19.2499 17.506 19.2202 17.4289C19.1906 17.3518 19.1457 17.2816 19.0883 17.2223C19.0308 17.163 18.962 17.1159 18.8859 17.0838C18.8098 17.0518 18.728 17.0354 18.6454 17.0358ZM5.35668 17.0358C5.189 17.0371 5.02861 17.1045 4.91037 17.2234C4.79213 17.3423 4.72559 17.5031 4.72523 17.6708V18.7864C4.72523 19.747 5.51102 20.537 6.46596 20.537H9.85298V17.0358H5.35668Z",
+    fill: "white"
+  })
+});
+var _default = exports["default"] = beehiiv;

package/dist/cjs/integration-icons/gravity-forms.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var gravityForms = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M8.74072 8.98989H24V4.73383H8.77618C6.75022 4.67092 4.79489 5.46964 3.41 6.92583C0.0886559 10.4377 0 19.2696 0 19.2696H23.8818V11.2749H19.5912V15.0019H4.58018C4.67474 13.6123 5.31889 11.1296 6.53633 9.84462C7.10785 9.25496 7.91399 8.9424 8.74072 8.98989Z",
+    fill: "white"
+  })
+});
+var _default = exports["default"] = gravityForms;

package/dist/cjs/integration-icons/index.js

@@ -10,25 +10,38 @@ Object.defineProperty(exports, "activeCampaign", {
     return _activeCampaign["default"];
   }
 });
+Object.defineProperty(exports, "beehiiv", {
+  enumerable: true,
+  get: function get() {
+    return _beehiiv["default"];
+  }
+});
 Object.defineProperty(exports, "constantContact", {
   enumerable: true,
   get: function get() {
     return _constantContact["default"];
   }
 });
-exports.espProviderOrder = exports.espProviderIcons = void 0;
+exports.espProviderOrder = void 0;
 Object.defineProperty(exports, "fundraiseUp", {
   enumerable: true,
   get: function get() {
     return _fundraiseUp["default"];
   }
 });
+Object.defineProperty(exports, "gravityForms", {
+  enumerable: true,
+  get: function get() {
+    return _gravityForms["default"];
+  }
+});
 Object.defineProperty(exports, "mailchimp", {
   enumerable: true,
   get: function get() {
     return _mailchimp["default"];
   }
 });
+exports.providerIcons = void 0;
 Object.defineProperty(exports, "salesforce", {
   enumerable: true,
   get: function get() {
@@ -43,9 +56,11 @@ Object.defineProperty(exports, "wisepops", {
 });
 var _icons = require("@wordpress/icons");
 var _activeCampaign = _interopRequireDefault(require("./active-campaign"));
+var _beehiiv = _interopRequireDefault(require("./beehiiv"));
 var _constantContact = _interopRequireDefault(require("./constant-contact"));
-var _mailchimp = _interopRequireDefault(require("./mailchimp"));
 var _fundraiseUp = _interopRequireDefault(require("./fundraise-up"));
+var _gravityForms = _interopRequireDefault(require("./gravity-forms"));
+var _mailchimp = _interopRequireDefault(require("./mailchimp"));
 var _salesforce = _interopRequireDefault(require("./salesforce"));
 var _wisepops = _interopRequireDefault(require("./wisepops"));
 /**
@@ -56,12 +71,17 @@ var _wisepops = _interopRequireDefault(require("./wisepops"));
  * Internal dependencies
  */
 
-// ESP provider brand marks keyed by the slug the backend reports
-// (`Newspack_Newsletters::service_provider()`). Rendered via IntegrationIcon.
-var espProviderIcons = exports.espProviderIcons = {
+// Brand marks keyed by the ESP slug the backend reports
+// (`Newspack_Newsletters::service_provider()`), by integration ID, or by the
+// brand slug an integration maps to. Rendered via IntegrationIcon.
+var providerIcons = exports.providerIcons = {
   active_campaign: _activeCampaign["default"],
   mailchimp: _mailchimp["default"],
   constant_contact: _constantContact["default"],
-  manual: _icons.atSymbol
+  manual: _icons.atSymbol,
+  salesforce: _salesforce["default"],
+  beehiiv: _beehiiv["default"],
+  fundraiseup: _fundraiseUp["default"],
+  gravity_forms: _gravityForms["default"]
 };
 var espProviderOrder = exports.espProviderOrder = ['active_campaign', 'mailchimp', 'constant_contact', 'manual'];

package/dist/cjs/integration-icons/salesforce.js

@@ -7,11 +7,13 @@ exports["default"] = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var salesforce = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
   xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 32 32",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
   fill: "none",
   children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M13.3173 7.24314C14.3498 6.16866 15.7848 5.50017 17.3737 5.50017C19.4877 5.50017 21.3287 6.67965 22.3122 8.42612C23.1661 8.04463 24.1111 7.83113 25.1016 7.83113C28.913 7.83113 32 10.9461 32 14.7925C32 18.639 28.9095 21.7539 25.1016 21.7539C24.6361 21.7539 24.1811 21.7084 23.7436 21.6174C22.8791 23.1574 21.2307 24.2004 19.3407 24.2004C18.5497 24.2004 17.8007 24.0184 17.1357 23.6929C16.2607 25.7543 14.2168 27.1998 11.8403 27.1998C9.46385 27.1998 7.25189 25.6319 6.4399 23.4339C6.0864 23.5074 5.71891 23.5494 5.34092 23.5494C2.39046 23.5494 0 21.1344 0 18.1525C0 16.154 1.07448 14.411 2.67046 13.4765C2.34146 12.7206 2.15947 11.8841 2.15947 11.0091C2.15947 7.57913 4.94192 4.80018 8.37537 4.80018C10.3913 4.80018 12.1833 5.75916 13.3173 7.24314Z",
-    fill: "var(--integration-icon-color, #0D9DDA)"
+    d: "M10.0838 5.745C10.8213 4.9775 11.8463 4.5 12.9813 4.5C14.4913 4.5 15.8063 5.3425 16.5088 6.59C17.1188 6.3175 17.7938 6.165 18.5013 6.165C21.2238 6.165 23.4288 8.39 23.4288 11.1375C23.4288 13.885 21.2213 16.11 18.5013 16.11C18.1688 16.11 17.8438 16.0775 17.5313 16.0125C16.9138 17.1125 15.7363 17.8575 14.3863 17.8575C13.8213 17.8575 13.2863 17.7275 12.8113 17.495C12.1863 18.9675 10.7263 20 9.02876 20C7.33126 20 5.75126 18.88 5.17126 17.31C4.91876 17.3625 4.65626 17.3925 4.38626 17.3925C2.27876 17.3925 0.571259 15.6675 0.571259 13.5375C0.571259 12.11 1.33876 10.865 2.47876 10.1975C2.24376 9.6575 2.11376 9.06 2.11376 8.435C2.11376 5.985 4.10126 4 6.55376 4C7.99376 4 9.27376 4.685 10.0838 5.745Z",
+    fill: "white"
   })
 });
 var _default = exports["default"] = salesforce;

package/dist/cjs/wizard/breadcrumbs-select.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.appendSectionName = exports.activeBreadcrumbs = void 0;
+exports.appendSectionName = exports.activeSection = exports.activeBreadcrumbs = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _routeMatch = require("../route-match");
 /**
@@ -20,15 +20,28 @@ var _routeMatch = require("../route-match");
  * @return {Array} Breadcrumb items `{ label, url? }`.
  */
 var activeBreadcrumbs = exports.activeBreadcrumbs = function activeBreadcrumbs() {
+  var _activeSection;
+  var sections = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var pathname = arguments.length > 1 ? arguments[1] : undefined;
+  return ((_activeSection = activeSection(sections, pathname)) === null || _activeSection === void 0 ? void 0 : _activeSection.breadcrumbs) || [];
+};
+
+/**
+ * Select the section matching the current route, falling back to the first.
+ *
+ * @param {Array}  sections Wizard sections.
+ * @param {string} pathname Current router pathname.
+ * @return {Object|undefined} The active section, if any.
+ */
+var activeSection = exports.activeSection = function activeSection() {
   var sections = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var pathname = arguments.length > 1 ? arguments[1] : undefined;
   if (!(sections !== null && sections !== void 0 && sections.length)) {
-    return [];
+    return undefined;
   }
-  var match = sections.find(function (section) {
+  return sections.find(function (section) {
     return (0, _routeMatch.matchesRoute)(section, pathname);
   }) || sections[0];
-  return match.breadcrumbs || [];
 };
 
 /**