@automattic/jetpack-components 4.0.3 → 5.0.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [5.0.0] - 2026-10-19
+### Added
+- Add a CheckboxCard component. [#53733]
+- AdminPage: Add a `globalControls` slot for Jetpack-wide controls, shown after the page actions in the header. [#53631]
+
+### Changed
+- Gravatar: Use the WordPress Design System neutral surface color token for the placeholder background. [#53800]
+- Update package dependencies. [#53806]
+
+### Removed
+- Remove ProgressBar component. Use Progress or Meter from @wordpress/ui instead. [#53801]
+
+## [4.0.4] - 2026-10-15
+### Changed
+- Update package dependencies. [#53004]
+
 ## [4.0.3] - 2026-10-14
 ### Changed
 - Update dependencies.
@@ -1999,6 +2015,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[5.0.0]: https://github.com/Automattic/jetpack-components/compare/4.0.4...5.0.0
+[4.0.4]: https://github.com/Automattic/jetpack-components/compare/4.0.3...4.0.4
 [4.0.3]: https://github.com/Automattic/jetpack-components/compare/4.0.2...4.0.3
 [4.0.2]: https://github.com/Automattic/jetpack-components/compare/4.0.1...4.0.2
 [4.0.1]: https://github.com/Automattic/jetpack-components/compare/4.0.0...4.0.1

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import restApi from '@automattic/jetpack-api';
 import { Page } from '@wordpress/admin-ui';
 import { __, sprintf } from '@wordpress/i18n';
@@ -17,7 +17,7 @@ import styles from './style.module.scss';
  * @param {AdminPageProps} props - Component properties.
  * @return {ReactNode} AdminPage component.
  */
-const AdminPage = ({ children, className, showHeader = true, showFooter = true, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, breadcrumbs, tabs, showBottomBorder = true, unwrapped = false, }) => {
+const AdminPage = ({ children, className, showHeader = true, showFooter = true, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, globalControls, breadcrumbs, tabs, showBottomBorder = true, unwrapped = false, }) => {
     useEffect(() => {
         restApi.setApiRoot(apiRoot);
         restApi.setApiNonce(apiNonce);
@@ -44,7 +44,7 @@ const AdminPage = ({ children, className, showHeader = true, showFooter = true,
     }, []);
     // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
     if (showHeader && (title || breadcrumbs)) {
-        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { className: "jp-admin-page__page", visual: logo || _jsx(JetpackLogo, { showText: false, height: 20 }), breadcrumbs: breadcrumbs, title: title, subTitle: subTitle, actions: actions, showSidebarToggle: false, children: [tabs, unwrapped ? (children) : (_jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) })), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
+        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { className: "jp-admin-page__page", visual: logo || _jsx(JetpackLogo, { showText: false, height: 20 }), breadcrumbs: breadcrumbs, title: title, subTitle: subTitle, actions: globalControls ? (_jsxs(_Fragment, { children: [actions, actions && (_jsx("span", { role: "separator", "aria-orientation": "vertical", className: styles['global-controls-separator'] })), globalControls] })) : (actions), showSidebarToggle: false, children: [tabs, unwrapped ? (children) : (_jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) })), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
     }
     // 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, 

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

@@ -97,3 +97,9 @@
 		display: none;
 	}
 }
+
+.global-controls-separator {
+	align-self: stretch;
+	inline-size: 1px;
+	background-color: var(--wpds-color-stroke-surface-neutral-weak);
+}

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

@@ -31,6 +31,12 @@ export type AdminPageProps = {
      * Action elements displayed on the right side of the unified header.
      */
     actions?: ReactNode;
+    /**
+     * Jetpack-wide controls, such as the connection control, shown after the page's own `actions`.
+     * Only rendered in the unified header, in `Page`'s actions row, so pass compact controls such as icon buttons.
+     * Pass `null` when there is nothing to show: any element, even an empty one, makes `Page` draw the row.
+     */
+    globalControls?: ReactNode;
     /**
      * Breadcrumb navigation displayed next to the title in the unified header.
      */

package/build/components/checkbox-card/index.d.ts

@@ -0,0 +1,19 @@
+import './style.scss';
+import type { CheckboxCardGridProps, CheckboxCardProps } from './types.ts';
+import type { JSX } from 'react';
+/**
+ * Lays out checkbox cards in two columns, or one on narrow screens.
+ *
+ * @param {CheckboxCardGridProps} props - Component props.
+ * @return {JSX.Element} The grid.
+ */
+export declare function CheckboxCardGrid({ children, className }: CheckboxCardGridProps): JSX.Element;
+/**
+ * A card with a checkbox, toggled by a click on its illustration.
+ *
+ * @param {CheckboxCardProps} props - Component props.
+ * @return {JSX.Element} The card.
+ */
+export default function CheckboxCard({ id, name, title, illustration, checked, onChange, previewUrl, onPreviewClick, disabled, }: CheckboxCardProps): JSX.Element;
+export { CheckboxCard };
+export type { CheckboxCardProps, CheckboxCardGridProps };

package/build/components/checkbox-card/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Card, Checkbox, Field, Link, Stack, Text } from '@wordpress/ui';
+import clsx from 'clsx';
+import './style.scss';
+/**
+ * Lays out checkbox cards in two columns, or one on narrow screens.
+ *
+ * @param {CheckboxCardGridProps} props - Component props.
+ * @return {JSX.Element} The grid.
+ */
+export function CheckboxCardGrid({ children, className }) {
+    return _jsx("div", { className: clsx('jp-checkbox-card-grid', className), children: children });
+}
+/**
+ * A card with a checkbox, toggled by a click on its illustration.
+ *
+ * @param {CheckboxCardProps} props - Component props.
+ * @return {JSX.Element} The card.
+ */
+export default function CheckboxCard({ id, name, title, illustration, checked, onChange, previewUrl, onPreviewClick, disabled, }) {
+    const titleId = `${id}__title`;
+    const handleChange = useCallback((next) => onChange(name, next), [name, onChange]);
+    const handlePreviewClick = useCallback(() => {
+        onPreviewClick?.(name);
+    }, [name, onPreviewClick]);
+    return (_jsxs(Field.Root, { disabled: disabled, children: [_jsx(Card.Root, { className: "jp-checkbox-card", "data-checked": checked, children: _jsx(Card.Content, { children: _jsxs(Card.FullBleed, { className: "jp-checkbox-card__surface", children: [_jsx(Field.Label, { className: "jp-checkbox-card__illustration", children: illustration }), _jsx(Checkbox, { id: id, className: "jp-checkbox-card__checkbox", checked: checked, onCheckedChange: handleChange, "aria-labelledby": titleId })] }) }) }), _jsxs(Stack, { gap: "xs", direction: "column", children: [_jsx(Text, { id: titleId, variant: "body-sm", children: title }), previewUrl && (_jsx(Link, { href: previewUrl, onClick: handlePreviewClick, children: __('Preview and edit', 'jetpack-components') }))] })] }));
+}
+export { CheckboxCard };

package/build/components/checkbox-card/style.scss

@@ -0,0 +1,54 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.jp-checkbox-card-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	column-gap: var(--wpds-dimension-gap-md);
+	row-gap: var(--wpds-dimension-gap-2xl);
+
+	@media (max-width: 720px) {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+.jp-checkbox-card {
+
+	&[data-checked="true"] {
+		border-color: var(--wpds-color-stroke-interactive-brand-active);
+	}
+
+	&:hover:not([data-checked="true"]) {
+		border-color: var(--wpds-color-stroke-surface-neutral-strong);
+	}
+
+	&:has(:focus-visible) {
+
+		@include gb.outset-ring__focus();
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		transition: border-color 0.15s ease-out;
+	}
+}
+
+.jp-checkbox-card__surface {
+	position: relative;
+}
+
+.jp-checkbox-card__illustration {
+	display: flex;
+	aspect-ratio: 294 / 192;
+	background: var(--wpds-color-background-surface-neutral-weak);
+	cursor: var(--wpds-cursor-control);
+
+	> svg {
+		inline-size: 100%;
+		block-size: 100%;
+	}
+}
+
+.jp-checkbox-card__checkbox {
+	position: absolute;
+	inset-block-start: var(--wpds-dimension-padding-md);
+	inset-inline-start: var(--wpds-dimension-padding-md);
+}

package/build/components/checkbox-card/types.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+export type CheckboxCardProps = {
+    /**
+     * Id of the checkbox; the title's id is built from it.
+     */
+    id: string;
+    /**
+     * Passed back to `onChange` and `onPreviewClick`, so one handler can serve every card.
+     */
+    name: string;
+    /**
+     * Caption under the card, and the checkbox's accessible name.
+     */
+    title: string;
+    /**
+     * Picture filling the card, drawn at a 294×192 aspect ratio.
+     */
+    illustration?: ReactNode;
+    /**
+     * Whether the card is checked.
+     */
+    checked: boolean;
+    /**
+     * Called with the card's `name` and the next checked value.
+     */
+    onChange: (name: string, next: boolean) => void;
+    /**
+     * Shows a "Preview and edit" link to this URL under the title.
+     */
+    previewUrl?: string;
+    /**
+     * Called with the card's `name` when the "Preview and edit" link is clicked.
+     */
+    onPreviewClick?: (name: string) => void;
+    /**
+     * Disables the checkbox.
+     */
+    disabled?: boolean;
+};
+export type CheckboxCardGridProps = {
+    /**
+     * The `CheckboxCard`s to lay out.
+     */
+    children: ReactNode;
+    /**
+     * Extra class for the grid.
+     */
+    className?: string;
+};

package/build/components/gravatar/style.scss

@@ -1,5 +1,5 @@
 .jetpack-components-gravatar {
-	background-color: var(--jp-gray-5, #dcdcde);
+	background-color: var(--wpds-color-background-surface-neutral-strong);
 	border-radius: 50%;
 	display: block;
 	flex-shrink: 0; // Prevent shrinking when Gravatar is inside flex containers.

package/build/index.d.ts

@@ -9,6 +9,8 @@ export { default as AutomatticForAgenciesLogo } from './components/automattic-fo
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
 export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
+export { default as CheckboxCard, CheckboxCardGrid } from './components/checkbox-card/index.tsx';
+export type { CheckboxCardProps, CheckboxCardGridProps } from './components/checkbox-card/types.ts';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
@@ -40,7 +42,6 @@ export { default as RecordMeterBar } from './components/record-meter-bar/index.t
 export { default as Popover } from './components/popover/index.tsx';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.tsx';
 export { default as ActionPopover } from './components/action-popover/index.tsx';
-export { default as ProgressBar } from './components/progress-bar/index.tsx';
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';
 export { default as StatCard } from './components/stat-card/index.tsx';

package/build/index.js

@@ -22,6 +22,7 @@ export { default as AutomatticIconLogo } from './components/automattic-icon-logo
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.js';
 export { default as JetpackFooter } from './components/jetpack-footer/index.js';
 export { default as Gravatar } from './components/gravatar/index.js';
+export { default as CheckboxCard, CheckboxCardGrid } from './components/checkbox-card/index.js';
 export { default as IconTooltip } from './components/icon-tooltip/index.js';
 export { default as ActionButton } from './components/action-button/index.js';
 export { default as PricingCard } from './components/pricing-card/index.js';
@@ -52,7 +53,6 @@ export { default as RecordMeterBar } from './components/record-meter-bar/index.j
 export { default as Popover } from './components/popover/index.js';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.js';
 export { default as ActionPopover } from './components/action-popover/index.js';
-export { default as ProgressBar } from './components/progress-bar/index.js';
 export { default as UpsellBanner } from './components/upsell-banner/index.js';
 export { getUserLocale, cleanLocale } from './lib/locale/index.js';
 export { default as StatCard } from './components/stat-card/index.js';

package/components/admin-page/index.tsx

@@ -34,6 +34,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 	subTitle,
 	logo,
 	actions,
+	globalControls,
 	breadcrumbs,
 	tabs,
 	showBottomBorder = true,
@@ -80,7 +81,23 @@ const AdminPage: FC< AdminPageProps > = ( {
 					breadcrumbs={ breadcrumbs }
 					title={ title }
 					subTitle={ subTitle }
-					actions={ actions }
+					actions={
+						globalControls ? (
+							<>
+								{ actions }
+								{ actions && (
+									<span
+										role="separator"
+										aria-orientation="vertical"
+										className={ styles[ 'global-controls-separator' ] }
+									/>
+								) }
+								{ globalControls }
+							</>
+						) : (
+							actions
+						)
+					}
 					showSidebarToggle={ false }
 				>
 					{ tabs }

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

@@ -97,3 +97,9 @@
 		display: none;
 	}
 }
+
+.global-controls-separator {
+	align-self: stretch;
+	inline-size: 1px;
+	background-color: var(--wpds-color-stroke-surface-neutral-weak);
+}

package/components/admin-page/types.ts

@@ -39,6 +39,13 @@ export type AdminPageProps = {
 	 */
 	actions?: ReactNode;
 
+	/**
+	 * Jetpack-wide controls, such as the connection control, shown after the page's own `actions`.
+	 * Only rendered in the unified header, in `Page`'s actions row, so pass compact controls such as icon buttons.
+	 * Pass `null` when there is nothing to show: any element, even an empty one, makes `Page` draw the row.
+	 */
+	globalControls?: ReactNode;
+
 	/**
 	 * Breadcrumb navigation displayed next to the title in the unified header.
 	 */

package/components/checkbox-card/index.tsx

@@ -0,0 +1,79 @@
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Card, Checkbox, Field, Link, Stack, Text } from '@wordpress/ui';
+import clsx from 'clsx';
+import './style.scss';
+import type { CheckboxCardGridProps, CheckboxCardProps } from './types.ts';
+import type { JSX } from 'react';
+
+/**
+ * Lays out checkbox cards in two columns, or one on narrow screens.
+ *
+ * @param {CheckboxCardGridProps} props - Component props.
+ * @return {JSX.Element} The grid.
+ */
+export function CheckboxCardGrid( { children, className }: CheckboxCardGridProps ): JSX.Element {
+	return <div className={ clsx( 'jp-checkbox-card-grid', className ) }>{ children }</div>;
+}
+
+/**
+ * A card with a checkbox, toggled by a click on its illustration.
+ *
+ * @param {CheckboxCardProps} props - Component props.
+ * @return {JSX.Element} The card.
+ */
+export default function CheckboxCard( {
+	id,
+	name,
+	title,
+	illustration,
+	checked,
+	onChange,
+	previewUrl,
+	onPreviewClick,
+	disabled,
+}: CheckboxCardProps ): JSX.Element {
+	const titleId = `${ id }__title`;
+
+	const handleChange = useCallback(
+		( next: boolean ) => onChange( name, next ),
+		[ name, onChange ]
+	);
+
+	const handlePreviewClick = useCallback( () => {
+		onPreviewClick?.( name );
+	}, [ name, onPreviewClick ] );
+
+	return (
+		<Field.Root disabled={ disabled }>
+			<Card.Root className="jp-checkbox-card" data-checked={ checked }>
+				<Card.Content>
+					<Card.FullBleed className="jp-checkbox-card__surface">
+						{ /* Only the illustration toggles: the title and link sit outside the label. */ }
+						<Field.Label className="jp-checkbox-card__illustration">{ illustration }</Field.Label>
+						<Checkbox
+							id={ id }
+							className="jp-checkbox-card__checkbox"
+							checked={ checked }
+							onCheckedChange={ handleChange }
+							aria-labelledby={ titleId }
+						/>
+					</Card.FullBleed>
+				</Card.Content>
+			</Card.Root>
+			<Stack gap="xs" direction="column">
+				<Text id={ titleId } variant="body-sm">
+					{ title }
+				</Text>
+				{ previewUrl && (
+					<Link href={ previewUrl } onClick={ handlePreviewClick }>
+						{ __( 'Preview and edit', 'jetpack-components' ) }
+					</Link>
+				) }
+			</Stack>
+		</Field.Root>
+	);
+}
+
+export { CheckboxCard };
+export type { CheckboxCardProps, CheckboxCardGridProps };

package/components/checkbox-card/style.scss

@@ -0,0 +1,54 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.jp-checkbox-card-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	column-gap: var(--wpds-dimension-gap-md);
+	row-gap: var(--wpds-dimension-gap-2xl);
+
+	@media (max-width: 720px) {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+.jp-checkbox-card {
+
+	&[data-checked="true"] {
+		border-color: var(--wpds-color-stroke-interactive-brand-active);
+	}
+
+	&:hover:not([data-checked="true"]) {
+		border-color: var(--wpds-color-stroke-surface-neutral-strong);
+	}
+
+	&:has(:focus-visible) {
+
+		@include gb.outset-ring__focus();
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		transition: border-color 0.15s ease-out;
+	}
+}
+
+.jp-checkbox-card__surface {
+	position: relative;
+}
+
+.jp-checkbox-card__illustration {
+	display: flex;
+	aspect-ratio: 294 / 192;
+	background: var(--wpds-color-background-surface-neutral-weak);
+	cursor: var(--wpds-cursor-control);
+
+	> svg {
+		inline-size: 100%;
+		block-size: 100%;
+	}
+}
+
+.jp-checkbox-card__checkbox {
+	position: absolute;
+	inset-block-start: var(--wpds-dimension-padding-md);
+	inset-inline-start: var(--wpds-dimension-padding-md);
+}

package/components/checkbox-card/types.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+
+export type CheckboxCardProps = {
+	/**
+	 * Id of the checkbox; the title's id is built from it.
+	 */
+	id: string;
+	/**
+	 * Passed back to `onChange` and `onPreviewClick`, so one handler can serve every card.
+	 */
+	name: string;
+	/**
+	 * Caption under the card, and the checkbox's accessible name.
+	 */
+	title: string;
+	/**
+	 * Picture filling the card, drawn at a 294×192 aspect ratio.
+	 */
+	illustration?: ReactNode;
+	/**
+	 * Whether the card is checked.
+	 */
+	checked: boolean;
+	/**
+	 * Called with the card's `name` and the next checked value.
+	 */
+	onChange: ( name: string, next: boolean ) => void;
+	/**
+	 * Shows a "Preview and edit" link to this URL under the title.
+	 */
+	previewUrl?: string;
+	/**
+	 * Called with the card's `name` when the "Preview and edit" link is clicked.
+	 */
+	onPreviewClick?: ( name: string ) => void;
+	/**
+	 * Disables the checkbox.
+	 */
+	disabled?: boolean;
+};
+
+export type CheckboxCardGridProps = {
+	/**
+	 * The `CheckboxCard`s to lay out.
+	 */
+	children: ReactNode;
+	/**
+	 * Extra class for the grid.
+	 */
+	className?: string;
+};

package/components/gravatar/style.scss

@@ -1,5 +1,5 @@
 .jetpack-components-gravatar {
-	background-color: var(--jp-gray-5, #dcdcde);
+	background-color: var(--wpds-color-background-surface-neutral-strong);
 	border-radius: 50%;
 	display: block;
 	flex-shrink: 0; // Prevent shrinking when Gravatar is inside flex containers.

package/index.ts

@@ -24,6 +24,8 @@ export { default as AutomatticForAgenciesLogo } from './components/automattic-fo
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
 export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
+export { default as CheckboxCard, CheckboxCardGrid } from './components/checkbox-card/index.tsx';
+export type { CheckboxCardProps, CheckboxCardGridProps } from './components/checkbox-card/types.ts';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
@@ -60,7 +62,6 @@ export { default as RecordMeterBar } from './components/record-meter-bar/index.t
 export { default as Popover } from './components/popover/index.tsx';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.tsx';
 export { default as ActionPopover } from './components/action-popover/index.tsx';
-export { default as ProgressBar } from './components/progress-bar/index.tsx';
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';
 export { default as StatCard } from './components/stat-card/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "4.0.3",
+	"version": "5.0.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -30,6 +30,10 @@
 			"types": "./build/components/button/index.d.ts",
 			"default": "./build/components/button/index.js"
 		},
+		"./checkbox-card": {
+			"types": "./build/components/checkbox-card/index.d.ts",
+			"default": "./build/components/checkbox-card/index.js"
+		},
 		"./global-notices": {
 			"types": "./build/components/global-notices/index.d.ts",
 			"default": "./build/components/global-notices/index.js"
@@ -76,26 +80,26 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
-		"@automattic/jetpack-api": "^2.2.0",
-		"@automattic/jetpack-boost-score-api": "^1.2.0",
+		"@automattic/jetpack-api": "^2.2.2",
+		"@automattic/jetpack-boost-score-api": "^1.2.2",
 		"@automattic/jetpack-script-data": "^0.6.10",
-		"@automattic/number-formatters": "^1.2.10",
+		"@automattic/number-formatters": "^1.2.11",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/a11y": "4.55.0",
-		"@wordpress/admin-ui": "2.10.0",
-		"@wordpress/browserslist-config": "6.55.0",
-		"@wordpress/components": "40.1.0",
-		"@wordpress/compose": "8.8.0",
-		"@wordpress/data": "10.55.0",
-		"@wordpress/date": "5.55.0",
-		"@wordpress/dom": "4.55.0",
-		"@wordpress/element": "8.7.0",
-		"@wordpress/i18n": "6.28.0",
-		"@wordpress/icons": "16.0.0",
-		"@wordpress/notices": "5.55.0",
-		"@wordpress/theme": "2.1.0",
-		"@wordpress/ui": "0.22.0",
+		"@wordpress/a11y": "4.57.0",
+		"@wordpress/admin-ui": "2.12.0",
+		"@wordpress/browserslist-config": "6.57.0",
+		"@wordpress/components": "42.0.0",
+		"@wordpress/compose": "8.10.0",
+		"@wordpress/data": "10.57.0",
+		"@wordpress/date": "5.57.0",
+		"@wordpress/dom": "4.57.0",
+		"@wordpress/element": "9.0.0",
+		"@wordpress/i18n": "6.30.0",
+		"@wordpress/icons": "18.0.0",
+		"@wordpress/notices": "5.57.0",
+		"@wordpress/theme": "2.3.0",
+		"@wordpress/ui": "0.24.0",
 		"clsx": "2.1.1",
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
@@ -105,19 +109,19 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.17",
+		"@automattic/jetpack-base-styles": "^1.2.18",
 		"@babel/core": "7.29.7",
-		"@jest/globals": "30.5.1",
+		"@jest/globals": "30.5.2",
 		"@storybook/addon-docs": "10.4.6",
 		"@storybook/react": "10.4.6",
 		"@testing-library/dom": "10.4.2",
 		"@testing-library/react": "16.3.3",
-		"@testing-library/user-event": "14.6.7",
+		"@testing-library/user-event": "14.6.8",
 		"@types/jest": "30.0.0",
 		"@types/react": "18.3.31",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
-		"jest": "30.5.1",
+		"jest": "30.5.2",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",

package/build/components/progress-bar/index.d.ts

@@ -1,10 +0,0 @@
-import { ProgressBarProps } from './types.ts';
-import type { FC } from 'react';
-/**
- * Progress Bar component
- *
- * @param {ProgressBarProps} props - Component props.
- * @return {ReactNode} - ProgressBar react component.
- */
-declare const ProgressBar: FC<ProgressBarProps>;
-export default ProgressBar;

package/build/components/progress-bar/index.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * Internal dependencies
- */
-import styles from './style.module.scss';
-/**
- * Progress Bar component
- *
- * @param {ProgressBarProps} props - Component props.
- * @return {ReactNode} - ProgressBar react component.
- */
-const ProgressBar = ({ className, progressClassName, progress, size = 'normal', }) => {
-    if (progress == null) {
-        return null;
-    }
-    const normalizedProgress = Math.max(Math.min(progress, 1), 0);
-    const style = {
-        width: `${normalizedProgress * 100}%`,
-    };
-    return (_jsx("div", { className: clsx(className, styles.wrapper, { [styles.small]: size === 'small' }), children: _jsx("div", { className: clsx(progressClassName, styles.progress), style: style }) }));
-};
-export default ProgressBar;

package/build/components/progress-bar/style.module.scss

@@ -1,18 +0,0 @@
-.wrapper {
-	width: 100%;
-	height: 12px;
-	background-color: var(--jp-gray-5);
-	border-radius: calc(var(--spacing-base) * 3);
-	overflow: hidden;
-
-	&.small {
-		height: 3px;
-	}
-
-	.progress {
-		height: 100%;
-		border-radius: calc(var(--spacing-base) * 3);
-		background-color: var(--jp-black);
-		min-width: 12px;
-	}
-}

package/build/components/progress-bar/types.d.ts

@@ -1,18 +0,0 @@
-export type ProgressBarProps = {
-    /**
-     * Optional classname to apply to the root element.
-     */
-    className?: string;
-    /**
-     * Optional classname to apply to the progress element.
-     */
-    progressClassName?: string;
-    /**
-     * The current progress percentage, from 0 to 1.
-     */
-    progress: number;
-    /**
-     * The progress bar height.
-     */
-    size?: 'normal' | 'small';
-};

package/components/progress-bar/index.tsx

@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * Internal dependencies
- */
-import styles from './style.module.scss';
-import { ProgressBarProps } from './types.ts';
-import type { FC, ReactNode } from 'react';
-
-/**
- * Progress Bar component
- *
- * @param {ProgressBarProps} props - Component props.
- * @return {ReactNode} - ProgressBar react component.
- */
-const ProgressBar: FC< ProgressBarProps > = ( {
-	className,
-	progressClassName,
-	progress,
-	size = 'normal',
-} ) => {
-	if ( progress == null ) {
-		return null;
-	}
-
-	const normalizedProgress = Math.max( Math.min( progress, 1 ), 0 );
-
-	const style = {
-		width: `${ normalizedProgress * 100 }%`,
-	};
-
-	return (
-		<div className={ clsx( className, styles.wrapper, { [ styles.small ]: size === 'small' } ) }>
-			<div className={ clsx( progressClassName, styles.progress ) } style={ style }></div>
-		</div>
-	);
-};
-
-export default ProgressBar;

package/components/progress-bar/style.module.scss

@@ -1,18 +0,0 @@
-.wrapper {
-	width: 100%;
-	height: 12px;
-	background-color: var(--jp-gray-5);
-	border-radius: calc(var(--spacing-base) * 3);
-	overflow: hidden;
-
-	&.small {
-		height: 3px;
-	}
-
-	.progress {
-		height: 100%;
-		border-radius: calc(var(--spacing-base) * 3);
-		background-color: var(--jp-black);
-		min-width: 12px;
-	}
-}

package/components/progress-bar/types.ts

@@ -1,21 +0,0 @@
-export type ProgressBarProps = {
-	/**
-	 * Optional classname to apply to the root element.
-	 */
-	className?: string;
-
-	/**
-	 * Optional classname to apply to the progress element.
-	 */
-	progressClassName?: string;
-
-	/**
-	 * The current progress percentage, from 0 to 1.
-	 */
-	progress: number;
-
-	/**
-	 * The progress bar height.
-	 */
-	size?: 'normal' | 'small';
-};