@automattic/jetpack-components 1.4.16 → 1.6.0

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.6.0] - 2026-03-16
+### Added
+- Add support for X connection. [#47538]
+- AdminPage: Add breadcrumbs prop passthrough to admin-ui Page component. [#47493]
+
+### Changed
+- Update dependencies. [#47472]
+
+### Fixed
+- Fix AdminPage footer Container causing horizontal scroll on narrow viewports by explicitly setting box-sizing: border-box. [#47570]
+
+## [1.5.0] - 2026-03-09
+### Added
+- Add AdminHeader component wrapping @wordpress/admin-ui Page for unified admin page headers. [#47313]
+
+### Changed
+- AdminPage: Override admin-ui header position so it's not sticky. [#47313]
+- AdminPage: Remove admin-ui header border via scoped CSS to support unified admin-ui Page layout. [#47313]
+- AdminPage: Remove header border-bottom for a cleaner unified header appearance. [#47313]
+- Remove padding from admin page header subtitle for consistent spacing. [#47417]
+- Replace admin-ui CSS proxy file with direct import, now that webpack-config handles bundling centrally. [#47313]
+- Switch to Native TypeScript compiler based on Go. [#47375]
+- Widen AdminPage subTitle prop type from string to ReactNode. [#47434]
+
+### Fixed
+- AdminPage: Fix aria-label attribute by passing a string value to the Page component. [#47461]
+- Admin page: Fix Hello Dolly banner display and clear floats on Jetpack admin pages. [#47313]
+- Admin Page: Restore border on header component. [#47425]
+
 ## [1.4.16] - 2026-02-26
 ### Changed
 - Container: Adjust maximum width to 1040px. [#47308]
@@ -1672,6 +1701,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.6.0]: https://github.com/Automattic/jetpack-components/compare/1.5.0...1.6.0
+[1.5.0]: https://github.com/Automattic/jetpack-components/compare/1.4.16...1.5.0
 [1.4.16]: https://github.com/Automattic/jetpack-components/compare/1.4.15...1.4.16
 [1.4.15]: https://github.com/Automattic/jetpack-components/compare/1.4.14...1.4.15
 [1.4.14]: https://github.com/Automattic/jetpack-components/compare/1.4.13...1.4.14

package/build/components/action-button/index.d.ts

@@ -1,16 +1,6 @@
-/**
- * The Jetpack Action button.
- *
- * This component extends the regular `Button` component and adds a `isLoading` prop that will disable and display a spinner, giving the user the feedback that some action is happening. It also provides a generic error message.
- *
- * It is useful to async actions when the user has to wait the result of a request or process.
- *
- * @param {object} props - The properties.
- * @return {import('react').ReactNode} The `ActionButton` component.
- */
-declare const ActionButton: {
-    (props: any): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
+declare function ActionButton(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace ActionButton {
+    var propTypes: {
         /** The button label. */
         label: any;
         /** The callback to be called on click. */
@@ -32,5 +22,5 @@ declare const ActionButton: {
         /** Text to display when loading */
         loadingText: any;
     };
-};
+}
 export default ActionButton;

package/build/components/action-button/index.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import Button from "../button/index.js";
+import Button from '../button/index.js';
 import styles from './style.module.scss';
 /**
  * The Jetpack Action button.

package/build/components/action-popover/index.js

@@ -1,17 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * External dependencies
  */
 import { Popover } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
-import Button from "../button/index.js";
-import useBreakpointMatch from "../layout/use-breakpoint-match/index.js";
-import Text from "../text/index.js";
+import Button from '../button/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import Text from '../text/index.js';
 /**
  * Internal dependencies
  */
-import ThemeProvider from "../theme-provider/index.js";
+import ThemeProvider from '../theme-provider/index.js';
 import styles from './styles.module.scss';
 const ActionPopover = ({ hideCloseButton = false, title, children, step = null, totalSteps = null, buttonContent = null, buttonDisabled = false, buttonHref = null, buttonExternalLink = false, offset = 32, onClose, onClick, ...otherPopoverProps }) => {
     const [isSm] = useBreakpointMatch('sm');
@@ -33,6 +33,10 @@ const ActionPopover = ({ hideCloseButton = false, title, children, step = null,
         /* translators: 1 Current step, 2 Total steps */
         __('%1$d of %2$d', 'jetpack-components'), step, totalSteps);
     }
-    return (_jsx(Popover, { ...popoverProps, children: _jsx(ThemeProvider, { children: _jsxs("div", { className: styles.wrapper, children: [_jsxs("div", { className: styles.header, children: [_jsx(Text, { variant: "title-small", className: styles.title, children: title }), !hideCloseButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "small", variant: "tertiary", "aria-label": "close", className: styles['close-button'], icon: close, iconSize: 16, onClick: onClose }) }))] }), children, _jsxs("div", { className: styles.footer, children: [showSteps && (_jsx(Text, { variant: "body", className: styles.steps, children: stepsText })), _jsx(Button, { variant: "primary", className: styles['action-button'], disabled: buttonDisabled, onClick: onClick, isExternalLink: buttonExternalLink, href: buttonHref, children: buttonContent })] })] }) }) }));
+    return (_jsx(Popover, { ...popoverProps, children: _jsx(ThemeProvider, { children: _jsxs("div", { className: styles.wrapper, children: [
+                    _jsxs("div", { className: styles.header, children: [
+                            _jsx(Text, { variant: "title-small", className: styles.title, children: title }), !hideCloseButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "small", variant: "tertiary", "aria-label": "close", className: styles['close-button'], icon: close, iconSize: 16, onClick: onClose }) }))] }), children, _jsxs("div", { className: styles.footer, children: [showSteps && (_jsx(Text, { variant: "body", className: styles.steps, children: stepsText })), _jsx(Button, { variant: "primary", className: styles['action-button'], disabled: buttonDisabled, onClick: onClick, isExternalLink: buttonExternalLink, href: buttonHref, children: buttonContent })
+                        ] })
+                ] }) }) }));
 };
 export default ActionPopover;

package/build/components/admin-page/index.d.ts

@@ -1,3 +1,4 @@
+import '@wordpress/admin-ui/build-style/style.css';
 import type { AdminPageProps } from './types.ts';
 import type { FC } from 'react';
 /**

package/build/components/admin-page/index.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import restApi from '@automattic/jetpack-api';
+import { Page } from '@wordpress/admin-ui';
+import '@wordpress/admin-ui/build-style/style.css';
+import { __experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+ } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useEffect, useCallback } from 'react';
-import JetpackFooter from "../jetpack-footer/index.js";
-import JetpackLogo from "../jetpack-logo/index.js";
-import Col from "../layout/col/index.js";
-import Container from "../layout/container/index.js";
+import JetpackFooter from '../jetpack-footer/index.js';
+import JetpackLogo from '../jetpack-logo/index.js';
+import Col from '../layout/col/index.js';
+import Container from '../layout/container/index.js';
 import styles from './style.module.scss';
 /**
  * This is the base structure for any admin page. It comes with Header and Footer.
@@ -16,13 +21,14 @@ import styles from './style.module.scss';
  * @param {AdminPageProps} props - Component properties.
  * @return {ReactNode} AdminPage component.
  */
-const AdminPage = ({ children, className, moduleName = __('Jetpack', 'jetpack-components'), moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, }) => {
+const AdminPage = ({ children, className, moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */, moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, breadcrumbs, tabs, showBottomBorder = true, }) => {
     useEffect(() => {
         restApi.setApiRoot(apiRoot);
         restApi.setApiNonce(apiNonce);
     }, [apiRoot, apiNonce]);
     const rootClassName = clsx(styles['admin-page'], className, {
         [styles.background]: showBackground,
+        [styles['without-bottom-border']]: tabs || !showBottomBorder,
     });
     const testConnection = useCallback(async () => {
         try {
@@ -37,8 +43,22 @@ const AdminPage = ({ children, className, moduleName = __('Jetpack', 'jetpack-co
             __('There was an error testing Jetpack. Error: %s', 'jetpack-components'), error.message));
         }
     }, []);
+    // Compose the title with logo for the admin-ui Page header.
+    // Note: The inner Heading causes a double h2 wrapping because Page's Header
+    // also wraps title in a Heading. This is a known issue — the inner Heading is
+    // needed until https://github.com/WordPress/gutenberg/pull/75899 fixes
+    // non-string title rendering in admin-ui. Once that lands, remove the Heading
+    // here and pass the plain HStack with a string child.
+    const composedTitle = title ? (_jsxs(HStack, { spacing: 2, justify: "left", children: [logo || _jsx(JetpackLogo, { showText: false, height: 20 }), _jsx(Heading, { as: "h2", level: 3, weight: 500, truncate: true, children: title })
+        ] })) : undefined;
+    const footer = showFooter && (_jsx(Container, { className: styles['admin-page-footer'], horizontalSpacing: 5, children: _jsx(Col, { children: _jsx(JetpackFooter, { moduleName: moduleName, moduleNameHref: moduleNameHref, menu: optionalMenuItems, useInternalLinks: useInternalLinks }) }) }));
+    // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
+    if (showHeader && (composedTitle || breadcrumbs)) {
+        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { ariaLabel: title, breadcrumbs: breadcrumbs, title: composedTitle, subTitle: subTitle, actions: actions, showSidebarToggle: false, children: [tabs, _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), footer] }) }));
+    }
+    // Legacy path: no title provided, render the classic header.
     return (_jsxs("div", { className: rootClassName, children: [showHeader && (_jsx(Container, { horizontalSpacing: 5, children: _jsxs(Col, { className: clsx(styles['admin-page-header'], 'jp-admin-page-header'), children: [header ? header : _jsx(JetpackLogo, {}), sandboxedDomain && (_jsx("code", { className: styles['sandbox-domain-badge'], onClick: testConnection, onKeyDown: testConnection, 
                             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-                            role: "button", tabIndex: 0, title: `Sandboxing via ${sandboxedDomain}. Click to test connection.`, children: "API Sandboxed" }))] }) })), _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), showFooter && (_jsx(Container, { horizontalSpacing: 5, children: _jsx(Col, { children: _jsx(JetpackFooter, { moduleName: moduleName, moduleNameHref: moduleNameHref, menu: optionalMenuItems, useInternalLinks: useInternalLinks }) }) }))] }));
+                            role: "button", tabIndex: 0, title: `Sandboxing via ${sandboxedDomain}. Click to test connection.`, children: "API Sandboxed" }))] }) })), _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), footer] }));
 };
 export default AdminPage;

package/build/components/admin-page/style.module.scss

@@ -9,12 +9,39 @@
 		background-color: var(--jp-white);
 	}
 
+	// Remove the admin-ui header border when tabs are present,
+	// or when showBottomBorder is false.
+	// Ideally admin-ui would expose a prop or CSS custom property for this:
+	// https://github.com/WordPress/gutenberg/issues/75428
+	&.without-bottom-border :global(.admin-ui-page__header) {
+		border-bottom: none;
+	}
+
+	// Disable sticky header until we make it work better across all pages.
+	// JETPACK-1386
+	:global(.admin-ui-page__header) {
+		position: relative;
+	}
+
+	// Normalize admin headers: implementation of admin-ui needs to
+	// comprehend old wp-admin floating containers, such as Hello Dolly.
+	:global(.admin-ui-page) {
+		clear: both;
+	}
+
 	.admin-page-header {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 	}
 
+	// Ensure footer Container padding is included in its max-width,
+	// preventing horizontal scroll when the content area is narrower
+	// than the Container's max-width + padding (JETPACK-1424).
+	.admin-page-footer {
+		box-sizing: border-box;
+	}
+
 	.sandbox-domain-badge {
 		background: #d63638;
 		text-transform: uppercase;
@@ -26,3 +53,9 @@
 		color: #fff;
 	}
 }
+
+// Make Hello Dolly background white for Jetpack admin pages.
+:global(.jetpack-admin-page #dolly) {
+	background-color: #fff;
+}
+

package/build/components/admin-page/types.d.ts

@@ -14,9 +14,35 @@ export type AdminPageProps = {
      */
     showHeader?: boolean;
     /**
-     * Custom header. Optional
+     * Custom header. Optional.
+     * @deprecated Use `title` and `subTitle` props instead for the unified header.
      */
     header?: ReactNode;
+    /**
+     * Product title displayed in the unified header (e.g. "Social", "Backup").
+     * When provided, renders the admin-ui Page header instead of the legacy header slot.
+     */
+    title?: string;
+    /**
+     * Optional tagline displayed below the title in the unified header.
+     */
+    subTitle?: ReactNode;
+    /**
+     * Custom logo element for the unified header. Defaults to JetpackLogo icon.
+     */
+    logo?: ReactNode;
+    /**
+     * Action elements displayed on the right side of the unified header.
+     */
+    actions?: ReactNode;
+    /**
+     * Breadcrumb navigation displayed next to the title in the unified header.
+     */
+    breadcrumbs?: ReactNode;
+    /**
+     * Tab navigation displayed below the title/tagline in the unified header.
+     */
+    tabs?: ReactNode;
     /**
      * Whether or not to display the Footer
      */
@@ -57,4 +83,9 @@ export type AdminPageProps = {
      * Class name to be applied to the root element of the component.
      */
     className?: string;
+    /**
+     * Show bottom border of the header. Defaults to true.
+     * Hidden when `tabs` is used.
+     */
+    showBottomBorder?: boolean;
 };

package/build/components/alert/index.js

@@ -28,6 +28,7 @@ const getIconByLevel = (level) => {
  */
 const Alert = ({ level = 'warning', children, showIcon = true, className }) => {
     const classes = clsx(styles.container, styles[`is-${level}`], className);
-    return (_jsxs("div", { className: classes, children: [showIcon && (_jsx("div", { className: styles['icon-wrapper'], children: _jsx(Icon, { icon: getIconByLevel(level), className: styles.icon }) })), _jsx("div", { children: children })] }));
+    return (_jsxs("div", { className: classes, children: [showIcon && (_jsx("div", { className: styles['icon-wrapper'], children: _jsx(Icon, { icon: getIconByLevel(level), className: styles.icon }) })), _jsx("div", { children: children })
+        ] }));
 };
 export default Alert;

package/build/components/automattic-byline-logo/index.js

@@ -8,6 +8,8 @@ import clsx from 'clsx';
  * @return {ReactNode} AutomatticBylineLogo component.
  */
 const AutomatticBylineLogo = ({ title = __('An Automattic Airline', 'jetpack-components'), height = 7, className, ...otherProps }) => {
-    return (_jsxs("svg", { role: "img", x: "0", y: "0", viewBox: "0 0 935 38.2", enableBackground: "new 0 0 935 38.2", "aria-labelledby": "jp-automattic-byline-logo-title", height: height, className: clsx('jp-automattic-byline-logo', className), ...otherProps, children: [_jsx("desc", { id: "jp-automattic-byline-logo-title", children: title }), _jsx("path", { d: "M317.1 38.2c-12.6 0-20.7-9.1-20.7-18.5v-1.2c0-9.6 8.2-18.5 20.7-18.5 12.6 0 20.8 8.9 20.8 18.5v1.2C337.9 29.1 329.7 38.2 317.1 38.2zM331.2 18.6c0-6.9-5-13-14.1-13s-14 6.1-14 13v0.9c0 6.9 5 13.1 14 13.1s14.1-6.2 14.1-13.1V18.6zM175 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7L157 1.3h5.5L182 36.8H175zM159.7 8.2L152 23.1h15.7L159.7 8.2zM212.4 38.2c-12.7 0-18.7-6.9-18.7-16.2V1.3h6.6v20.9c0 6.6 4.3 10.5 12.5 10.5 8.4 0 11.9-3.9 11.9-10.5V1.3h6.7V22C231.4 30.8 225.8 38.2 212.4 38.2zM268.6 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H268.6zM397.3 36.8V8.7l-1.8 3.1 -14.9 25h-3.3l-14.7-25 -1.8-3.1v28.1h-6.5V1.3h9.2l14 24.4 1.7 3 1.7-3 13.9-24.4h9.1v35.5H397.3zM454.4 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7l19.2-35.5h5.5l19.5 35.5H454.4zM439.1 8.2l-7.7 14.9h15.7L439.1 8.2zM488.4 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H488.4zM537.3 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H537.3zM569.3 36.8V4.6c2.7 0 3.7-1.4 3.7-3.4h2.8v35.5L569.3 36.8 569.3 36.8zM628 11.3c-3.2-2.9-7.9-5.7-14.2-5.7 -9.5 0-14.8 6.5-14.8 13.3v0.7c0 6.7 5.4 13 15.3 13 5.9 0 10.8-2.8 13.9-5.7l4 4.2c-3.9 3.8-10.5 7.1-18.3 7.1 -13.4 0-21.6-8.7-21.6-18.3v-1.2c0-9.6 8.9-18.7 21.9-18.7 7.5 0 14.3 3.1 18 7.1L628 11.3zM321.5 12.4c1.2 0.8 1.5 2.4 0.8 3.6l-6.1 9.4c-0.8 1.2-2.4 1.6-3.6 0.8l0 0c-1.2-0.8-1.5-2.4-0.8-3.6l6.1-9.4C318.7 11.9 320.3 11.6 321.5 12.4L321.5 12.4z" }), _jsx("path", { d: "M37.5 36.7l-4.7-8.9H11.7l-4.6 8.9H0L19.4 0.8H25l19.7 35.9H37.5zM22 7.8l-7.8 15.1h15.9L22 7.8zM82.8 36.7l-23.3-24 -2.3-2.5v26.6h-6.7v-36H57l22.6 24 2.3 2.6V0.8h6.7v35.9H82.8z" }), _jsx("path", { d: "M719.9 37l-4.8-8.9H694l-4.6 8.9h-7.1l19.5-36h5.6l19.8 36H719.9zM704.4 8l-7.8 15.1h15.9L704.4 8zM733 37V1h6.8v36H733zM781 37c-1.8 0-2.6-2.5-2.9-5.8l-0.2-3.7c-0.2-3.6-1.7-5.1-8.4-5.1h-12.8V37H750V1h19.6c10.8 0 15.7 4.3 15.7 9.9 0 3.9-2 7.7-9 9 7 0.5 8.5 3.7 8.6 7.9l0.1 3c0.1 2.5 0.5 4.3 2.2 6.1V37H781zM778.5 11.8c0-2.6-2.1-5.1-7.9-5.1h-13.8v10.8h14.4c5 0 7.3-2.4 7.3-5.2V11.8zM794.8 37V1h6.8v30.4h28.2V37H794.8zM836.7 37V1h6.8v36H836.7zM886.2 37l-23.4-24.1 -2.3-2.5V37h-6.8V1h6.5l22.7 24.1 2.3 2.6V1h6.8v36H886.2zM902.3 37V1H935v5.6h-26v9.2h20v5.5h-20v10.1h26V37H902.3z" })] }));
+    return (_jsxs("svg", { role: "img", x: "0", y: "0", viewBox: "0 0 935 38.2", enableBackground: "new 0 0 935 38.2", "aria-labelledby": "jp-automattic-byline-logo-title", height: height, className: clsx('jp-automattic-byline-logo', className), ...otherProps, children: [
+            _jsx("desc", { id: "jp-automattic-byline-logo-title", children: title }), _jsx("path", { d: "M317.1 38.2c-12.6 0-20.7-9.1-20.7-18.5v-1.2c0-9.6 8.2-18.5 20.7-18.5 12.6 0 20.8 8.9 20.8 18.5v1.2C337.9 29.1 329.7 38.2 317.1 38.2zM331.2 18.6c0-6.9-5-13-14.1-13s-14 6.1-14 13v0.9c0 6.9 5 13.1 14 13.1s14.1-6.2 14.1-13.1V18.6zM175 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7L157 1.3h5.5L182 36.8H175zM159.7 8.2L152 23.1h15.7L159.7 8.2zM212.4 38.2c-12.7 0-18.7-6.9-18.7-16.2V1.3h6.6v20.9c0 6.6 4.3 10.5 12.5 10.5 8.4 0 11.9-3.9 11.9-10.5V1.3h6.7V22C231.4 30.8 225.8 38.2 212.4 38.2zM268.6 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H268.6zM397.3 36.8V8.7l-1.8 3.1 -14.9 25h-3.3l-14.7-25 -1.8-3.1v28.1h-6.5V1.3h9.2l14 24.4 1.7 3 1.7-3 13.9-24.4h9.1v35.5H397.3zM454.4 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7l19.2-35.5h5.5l19.5 35.5H454.4zM439.1 8.2l-7.7 14.9h15.7L439.1 8.2zM488.4 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H488.4zM537.3 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H537.3zM569.3 36.8V4.6c2.7 0 3.7-1.4 3.7-3.4h2.8v35.5L569.3 36.8 569.3 36.8zM628 11.3c-3.2-2.9-7.9-5.7-14.2-5.7 -9.5 0-14.8 6.5-14.8 13.3v0.7c0 6.7 5.4 13 15.3 13 5.9 0 10.8-2.8 13.9-5.7l4 4.2c-3.9 3.8-10.5 7.1-18.3 7.1 -13.4 0-21.6-8.7-21.6-18.3v-1.2c0-9.6 8.9-18.7 21.9-18.7 7.5 0 14.3 3.1 18 7.1L628 11.3zM321.5 12.4c1.2 0.8 1.5 2.4 0.8 3.6l-6.1 9.4c-0.8 1.2-2.4 1.6-3.6 0.8l0 0c-1.2-0.8-1.5-2.4-0.8-3.6l6.1-9.4C318.7 11.9 320.3 11.6 321.5 12.4L321.5 12.4z" }), _jsx("path", { d: "M37.5 36.7l-4.7-8.9H11.7l-4.6 8.9H0L19.4 0.8H25l19.7 35.9H37.5zM22 7.8l-7.8 15.1h15.9L22 7.8zM82.8 36.7l-23.3-24 -2.3-2.5v26.6h-6.7v-36H57l22.6 24 2.3 2.6V0.8h6.7v35.9H82.8z" }), _jsx("path", { d: "M719.9 37l-4.8-8.9H694l-4.6 8.9h-7.1l19.5-36h5.6l19.8 36H719.9zM704.4 8l-7.8 15.1h15.9L704.4 8zM733 37V1h6.8v36H733zM781 37c-1.8 0-2.6-2.5-2.9-5.8l-0.2-3.7c-0.2-3.6-1.7-5.1-8.4-5.1h-12.8V37H750V1h19.6c10.8 0 15.7 4.3 15.7 9.9 0 3.9-2 7.7-9 9 7 0.5 8.5 3.7 8.6 7.9l0.1 3c0.1 2.5 0.5 4.3 2.2 6.1V37H781zM778.5 11.8c0-2.6-2.1-5.1-7.9-5.1h-13.8v10.8h14.4c5 0 7.3-2.4 7.3-5.2V11.8zM794.8 37V1h6.8v30.4h28.2V37H794.8zM836.7 37V1h6.8v36H836.7zM886.2 37l-23.4-24.1 -2.3-2.5V37h-6.8V1h6.5l22.7 24.1 2.3 2.6V1h6.8v36H886.2zM902.3 37V1H935v5.6h-26v9.2h20v5.5h-20v10.1h26V37H902.3z" })
+        ] }));
 };
 export default AutomatticBylineLogo;

package/build/components/automattic-for-agencies-logo/index.d.ts

@@ -6,6 +6,6 @@ import type { ReactElement } from 'react';
  * @param {string} props.color - Color code for the logo text
  * @return {ReactElement} Component template
  */
-export default function AutomatticForAgenciesLogo({ color, }: {
+export default function AutomatticForAgenciesLogo({ color }: {
     color: string;
 }): ReactElement;

package/build/components/automattic-icon-logo/index.d.ts

@@ -7,7 +7,7 @@ import type { ReactElement } from 'react';
  * @param {string} props.outerColor - Color code for the logo's outer
  * @return {ReactElement} Component template
  */
-export default function AutomatticIconLogo({ innerColor, outerColor, }: {
+export default function AutomatticIconLogo({ innerColor, outerColor }: {
     innerColor: string;
     outerColor: string;
 }): ReactElement;

package/build/components/automattic-icon-logo/index.js

@@ -9,5 +9,7 @@ import { Path, SVG } from '@wordpress/components';
  * @return {ReactElement} Component template
  */
 export default function AutomatticIconLogo({ innerColor = '#00A3E0', outerColor = '#FFFFFF', }) {
-    return (_jsxs(SVG, { clipRule: "evenodd", fill: "none", fillRule: "evenodd", height: "43", viewBox: "0 0 47 43", width: "47", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M39.3164 20.9589C39.3164 13.2129 33.656 6.30469 23.4214 6.30469C13.1867 6.30469 7.58624 13.2129 7.58624 20.9589V21.9206C7.58624 29.6677 13.1867 36.6942 23.4214 36.6942C33.656 36.6942 39.3164 29.6677 39.3164 21.9206V20.9589ZM23.4214 43C9.21187 43 0 32.7913 0 22.1604V20.8407C0 10.0285 9.21187 0 23.4214 0C37.6919 0 46.9038 10.0285 46.9038 20.8407V22.1604C46.9038 32.7913 37.6919 43 23.4214 43Z", fill: innerColor }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M28.4548 14.1897C29.752 15.0401 30.1158 16.8077 29.2739 18.1343L22.712 28.4682C21.8691 29.7959 20.1348 30.1799 18.8397 29.3295C17.5446 28.477 17.1765 26.7137 18.0205 25.386L24.5824 15.0522C25.4253 13.7256 27.1597 13.3404 28.4548 14.1897Z", fill: outerColor })] }));
+    return (_jsxs(SVG, { clipRule: "evenodd", fill: "none", fillRule: "evenodd", height: "43", viewBox: "0 0 47 43", width: "47", xmlns: "http://www.w3.org/2000/svg", children: [
+            _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M39.3164 20.9589C39.3164 13.2129 33.656 6.30469 23.4214 6.30469C13.1867 6.30469 7.58624 13.2129 7.58624 20.9589V21.9206C7.58624 29.6677 13.1867 36.6942 23.4214 36.6942C33.656 36.6942 39.3164 29.6677 39.3164 21.9206V20.9589ZM23.4214 43C9.21187 43 0 32.7913 0 22.1604V20.8407C0 10.0285 9.21187 0 23.4214 0C37.6919 0 46.9038 10.0285 46.9038 20.8407V22.1604C46.9038 32.7913 37.6919 43 23.4214 43Z", fill: innerColor }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M28.4548 14.1897C29.752 15.0401 30.1158 16.8077 29.2739 18.1343L22.712 28.4682C21.8691 29.7959 20.1348 30.1799 18.8397 29.3295C17.5446 28.477 17.1765 26.7137 18.0205 25.386L24.5824 15.0522C25.4253 13.7256 27.1597 13.3404 28.4548 14.1897Z", fill: outerColor })
+        ] }));
 }

package/build/components/boost-score-bar/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import Gridicon from "../gridicon/index.js";
+import Gridicon from '../gridicon/index.js';
 import './style.scss';
 export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevScore = 0, scoreBarType, noBoostScoreTooltip, }) => {
     if (!active) {
@@ -30,6 +30,11 @@ export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevSc
         }
         return 'fill-bad';
     };
-    return (_jsxs("div", { className: clsx('jb-score-bar', `jb-score-bar--${scoreBarType}`), children: [_jsxs("div", { className: "jb-score-bar__label", children: [getIcon(), _jsx("div", { children: scoreBarType === 'desktop' ? desktopIconLabel : mobileIconLabel })] }), _jsx("div", { className: "jb-score-bar__bounds", children: _jsxs("div", { className: clsx('jb-score-bar__filler', getFillColor()), style: { width: `${score}%` }, children: [isLoading ? (_jsx("div", { className: "jb-score-bar__loading", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 128 128", children: _jsxs("g", { children: [_jsx("path", { d: "M64 0a7 7 0 11-7 7 7 7 0 017-7zm29.86 12.2a2.8 2.8 0 11-3.83 1.02 2.8 2.8 0 013.83-1.02zm22.16 21.68a3.15 3.15 0 11-4.3-1.15 3.15 3.15 0 014.3 1.15zm.87 60.53a4.2 4.2 0 11-1.57-5.7 4.2 4.2 0 011.54 5.73zm7.8-30.5a3.85 3.85 0 11-3.85-3.85 3.85 3.85 0 013.85 3.84zm-30 53.2a4.55 4.55 0 111.66-6.23 4.55 4.55 0 01-1.67 6.22zM64 125.9a4.9 4.9 0 114.9-4.9 4.9 4.9 0 01-4.9 4.9zm-31.06-8.22a5.25 5.25 0 117.17-1.93 5.25 5.25 0 01-7.14 1.93zM9.9 95.1a5.6 5.6 0 117.65 2.06A5.6 5.6 0 019.9 95.1zM1.18 63.9a5.95 5.95 0 115.95 5.94 5.95 5.95 0 01-5.96-5.94zm8.1-31.6a6.3 6.3 0 112.32 8.6 6.3 6.3 0 01-2.3-8.6zM32.25 8.87a6.65 6.65 0 11-2.44 9.1 6.65 6.65 0 012.46-9.1z" }), _jsx("animateTransform", { attributeName: "transform", type: "rotate", values: "0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64", calcMode: "discrete", dur: "1080ms", repeatCount: "indefinite" })] }) }) })) : (_jsx("div", { className: "jb-score-bar__score", children: score })), showPrevScores && !!prevScore && prevScore < score && (_jsxs("div", { className: "jb-score-bar__no_boost_score", style: { left: `min(${prevScoreOffset}%, calc( 100% - var(--clearance-space))` }, children: [prevScore, noBoostScoreTooltip && (_jsx("div", { role: "tooltip", className: "jb-score-bar__no_boost_score_tooltip", children: noBoostScoreTooltip }))] }))] }) })] }));
+    return (_jsxs("div", { className: clsx('jb-score-bar', `jb-score-bar--${scoreBarType}`), children: [
+            _jsxs("div", { className: "jb-score-bar__label", children: [getIcon(), _jsx("div", { children: scoreBarType === 'desktop' ? desktopIconLabel : mobileIconLabel })
+                ] }), _jsx("div", { className: "jb-score-bar__bounds", children: _jsxs("div", { className: clsx('jb-score-bar__filler', getFillColor()), style: { width: `${score}%` }, children: [isLoading ? (_jsx("div", { className: "jb-score-bar__loading", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 128 128", children: _jsxs("g", { children: [
+                                        _jsx("path", { d: "M64 0a7 7 0 11-7 7 7 7 0 017-7zm29.86 12.2a2.8 2.8 0 11-3.83 1.02 2.8 2.8 0 013.83-1.02zm22.16 21.68a3.15 3.15 0 11-4.3-1.15 3.15 3.15 0 014.3 1.15zm.87 60.53a4.2 4.2 0 11-1.57-5.7 4.2 4.2 0 011.54 5.73zm7.8-30.5a3.85 3.85 0 11-3.85-3.85 3.85 3.85 0 013.85 3.84zm-30 53.2a4.55 4.55 0 111.66-6.23 4.55 4.55 0 01-1.67 6.22zM64 125.9a4.9 4.9 0 114.9-4.9 4.9 4.9 0 01-4.9 4.9zm-31.06-8.22a5.25 5.25 0 117.17-1.93 5.25 5.25 0 01-7.14 1.93zM9.9 95.1a5.6 5.6 0 117.65 2.06A5.6 5.6 0 019.9 95.1zM1.18 63.9a5.95 5.95 0 115.95 5.94 5.95 5.95 0 01-5.96-5.94zm8.1-31.6a6.3 6.3 0 112.32 8.6 6.3 6.3 0 01-2.3-8.6zM32.25 8.87a6.65 6.65 0 11-2.44 9.1 6.65 6.65 0 012.46-9.1z" }), _jsx("animateTransform", { attributeName: "transform", type: "rotate", values: "0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64", calcMode: "discrete", dur: "1080ms", repeatCount: "indefinite" })
+                                    ] }) }) })) : (_jsx("div", { className: "jb-score-bar__score", children: score })), showPrevScores && !!prevScore && prevScore < score && (_jsxs("div", { className: "jb-score-bar__no_boost_score", style: { left: `min(${prevScoreOffset}%, calc( 100% - var(--clearance-space))` }, children: [prevScore, noBoostScoreTooltip && (_jsx("div", { role: "tooltip", className: "jb-score-bar__no_boost_score_tooltip", children: noBoostScoreTooltip }))] }))] }) })
+        ] }));
 };
 export default BoostScoreBar;