@automattic/jetpack-components 1.8.1 → 1.8.3

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.8.3] - 2026-04-20
+### Changed
+- AdminPage: Add a stable, non-hashed `jp-admin-page` class on the component root so shared SCSS mixins and global stylesheets can target AdminPage without coupling to the hashed CSS-Modules className. [#48109]
+- Button, ToggleControl: Remove Jetpack color overrides on core WordPress components. [#47317]
+- Update package dependencies. [#48106] [#48126] [#48141]
+
+### Removed
+- Remove internal Badge component in favor of @wordpress/ui. [#48156]
+
+### Fixed
+- Navigator modal: Allow overlay closing when users click it. [#48121]
+
+## [1.8.2] - 2026-04-15
+### Changed
+- Update package dependencies. [#47907]
+
 ## [1.8.1] - 2026-04-09
 ### Changed
 - Update package dependencies. [#47890]
@@ -1732,6 +1748,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.8.3]: https://github.com/Automattic/jetpack-components/compare/1.8.2...1.8.3
+[1.8.2]: https://github.com/Automattic/jetpack-components/compare/1.8.1...1.8.2
 [1.8.1]: https://github.com/Automattic/jetpack-components/compare/1.8.0...1.8.1
 [1.8.0]: https://github.com/Automattic/jetpack-components/compare/1.7.0...1.8.0
 [1.7.0]: https://github.com/Automattic/jetpack-components/compare/1.6.1...1.7.0

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

@@ -25,7 +25,10 @@ const AdminPage = ({ children, className, showHeader = true, showFooter = true,
         restApi.setApiRoot(apiRoot);
         restApi.setApiNonce(apiNonce);
     }, [apiRoot, apiNonce]);
-    const rootClassName = clsx(styles['admin-page'], className, {
+    // `jp-admin-page` is a stable, non-hashed hook for global stylesheets and
+    // shared SCSS mixins (notably `jetpack-admin-page-layout` in
+    // @automattic/jetpack-base-styles). Do not rename.
+    const rootClassName = clsx(styles['admin-page'], 'jp-admin-page', className, {
         [styles.background]: showBackground,
         [styles['without-bottom-border']]: tabs || !showBottomBorder,
     });

package/build/components/button/style.module.scss

@@ -1,11 +1,4 @@
 .button {
-	--wp-admin-theme-color: var(--jp-black);
-	--wp-admin-theme-color-darker-10: var(--jp-black-80);
-	--wp-admin-theme-color-darker-20: var(--jp-black-80);
-	// 1.51px to avoid subpixel rendering issues on Firefox/Linux
-	--wp-admin-border-width-focus: 1.51px;
-
-	border-radius: var(--jp-border-radius);
 	justify-content: center;
 	font-weight: 600;
 
@@ -67,32 +60,6 @@
 		min-width: 100%;
 	}
 
-	// SPECIFICS
-	// PRIMARY AND SECONDARY
-
-	// Primary & Secondary
-	&:global(.is-primary),
-	&:global(.is-secondary) {
-		// Disabled
-		&:disabled {
-			background: var(--jp-gray);
-			color: var(--jp-gray-20);
-		}
-	}
-
-	// Only Secondary
-	&:global(.is-secondary) {
-		background: var(--jp-white);
-		// 1.51px to avoid subpixel rendering issues on Firefox/Linux
-		box-shadow: inset 0 0 0 1.51px var(--jp-black);
-
-		// Hover & Active
-		&:active:not(:disabled),
-		&:hover:not(:disabled) {
-			background: var(--jp-gray-0);
-		}
-	}
-
 	// SPECIFICS
 	// LINK & EXTERNAL LINK
 
@@ -102,90 +69,6 @@
 		&.small {
 			padding: 0;
 		}
-
-		// Hover State
-		&:hover:not(:disabled) {
-			text-decoration-thickness: 3px;
-		}
-
-		// Focus State
-		&:focus:not(:disabled) {
-			text-decoration-line: none;
-		}
-	}
-
-	// DESTRUCTIVE
-
-	&:global(.is-destructive) {
-		// Primary
-		&:global(.is-primary) {
-			box-shadow: none;
-
-			&:not(:disabled) {
-				color: var(--jp-white);
-				background: var(--jp-red-50);
-				box-shadow: inset 0 0 0 1px var(--jp-red-50);
-			}
-
-			&:hover:not(:disabled) {
-				background: var(--jp-red-60);
-				box-shadow: inset 0 0 0 1px var(--jp-red-60);
-			}
-
-			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
-				background: var(--jp-red-70);
-				color: var(--jp-white);
-			}
-
-			&:active:not(:disabled) {
-				background: var(--jp-red-50);
-			}
-		}
-
-		// Secondary
-		&:global(.is-secondary) {
-			box-shadow: none;
-
-			&:not(:disabled) {
-				color: var(--jp-red-50);
-				background: var(--jp-white);
-				box-shadow: inset 0 0 0 1.5px var(--jp-red-50);
-			}
-
-			&:hover:not(:disabled) {
-				background: var(--jp-red-0);
-				box-shadow: inset 0 0 0 1.5px var(--jp-red-60);
-				color: var(--jp-red-60);
-			}
-
-			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
-				color: var(--jp-red-70);
-			}
-
-			&:active:not(:disabled) {
-				background: var(--jp-gray-0);
-			}
-		}
-
-		// Link
-		&:global(.is-link) {
-
-			&:not(:disabled) {
-				color: var(--jp-red-50);
-			}
-
-			&:hover:not(:disabled) {
-				color: var(--jp-red-60);
-				box-shadow: none;
-			}
-
-			&:focus:not(:disabled) {
-				color: var(--jp-red-70);
-				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
-			}
-		}
 	}
 
 	// LOADING

package/build/components/jetpack-footer/style.scss

@@ -4,7 +4,7 @@
 .jetpack-footer {
 	border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
 	box-sizing: border-box;
-	font-size: var(--wpds-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md, 13px);
 	padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
 	width: 100%;
 

package/build/components/navigator-modal/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Modal, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 import { NavigatorModalContext } from './context.js';
 import { Screen } from './screen.js';
 import './styles.scss';
@@ -14,18 +14,37 @@ import './styles.scss';
  */
 function InternalNavigatorModal({ children, className, ...props }) {
     const { onClose, initialPath } = useContext(NavigatorModalContext);
+    const overlayRef = useRef(null);
+    const isUserInteracting = useRef(false);
+    // Track pointer interaction on the overlay so we can distinguish
+    // user-initiated overlay clicks from the WP Modal dismisser mechanism,
+    // which also calls onRequestClose() without an event argument.
+    useEffect(() => {
+        const overlay = overlayRef.current;
+        if (!overlay) {
+            return;
+        }
+        const handler = () => {
+            isUserInteracting.current = true;
+        };
+        overlay.addEventListener('pointerdown', handler);
+        return () => overlay.removeEventListener('pointerdown', handler);
+    }, []);
     // WordPress Modal's dismisser mechanism (ModalContext) calls onRequestClose()
     // without arguments when another non-nested Modal mounts. We guard against
     // this so that external modals (e.g. Image Studio) don't destroy this one.
     // User-initiated closes (Escape, close button) always pass an event.
+    // Overlay clicks don't pass an event but are identified by the
+    // isUserInteracting flag set via the pointerdown listener above.
     // The NavigatorModal's own Header/Footer close buttons call context.onClose
     // directly and are unaffected by this guard.
     const onRequestClose = useCallback((event) => {
-        if (event) {
+        if (event || isUserInteracting.current) {
+            isUserInteracting.current = false;
             onClose?.();
         }
     }, [onClose]);
-    return (_jsx(Modal, { __experimentalHideHeader: true, onRequestClose: onRequestClose, className: clsx('jp-navigator-modal', className), ...props, children: _jsx(Navigator, { initialPath: initialPath, className: "jp-navigator-modal__navigator", children: children }) }));
+    return (_jsx(Modal, { ref: overlayRef, __experimentalHideHeader: true, onRequestClose: onRequestClose, className: clsx('jp-navigator-modal', className), ...props, children: _jsx(Navigator, { initialPath: initialPath, className: "jp-navigator-modal__navigator", children: children }) }));
 }
 /**
  * Renders a modal with navigator capabilities.

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

@@ -90,9 +90,6 @@
 		width: 100%;
 		height: auto;
 		font-size: 18px;
-		background: var(--jp-black);
-		color: var(--jp-white) !important;
-		border-radius: var(--jp-border-radius);
 		padding: 14px 24px;
 		margin: 24px 0 32px;
 		justify-content: center;

package/build/components/radio-control/index.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RadioControl as WPRadioControl } from '@wordpress/components';
 import clsx from 'clsx';
-import styles from './styles.module.scss';
 const RadioControl = ({ selected, className, disabled, help, label, hideLabelFromVision, options, onChange, }) => {
-    return (_jsx(WPRadioControl, { selected: selected, className: clsx(styles.radio, className), disabled: disabled, help: help, label: label, hideLabelFromVision: hideLabelFromVision, options: options, onChange: onChange }));
+    return (_jsx(WPRadioControl, { selected: selected, className: clsx('radio', className), disabled: disabled, help: help, label: label, hideLabelFromVision: hideLabelFromVision, options: options, onChange: onChange }));
 };
 export default RadioControl;

package/build/components/terms-of-service/styles.scss

@@ -3,7 +3,6 @@
 	color: var(--jp-black);
 
 	.terms-of-service__link {
-		color: var(--jp-green-50);
 		white-space: nowrap;
 	}
 }

package/build/components/toggle-control/styles.module.scss

@@ -3,8 +3,6 @@
 /// Overrides the @wordpress/components ToggleControl component.
 /// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle
 .toggle {
-	--base-width: 8px;
-	--track-width: calc(var(--base-width) * 6);
 
 	&.is-small {
 		--base-width: 6px;
@@ -13,41 +11,6 @@
 	&.no-label :global(.components-toggle-control__label) {
 		display: none;
 	}
-
-	:global {
-
-		.components-form-toggle {
-			--wp-admin-theme-color: var(--jp-green-40);
-			height: calc(var(--base-width) * 3);
-
-
-			&__input:focus + .components-form-toggle__track {
-				box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
-			}
-
-			.components-form-toggle__track {
-				width: var(--track-width);
-				height: calc(var(--base-width) * 3);
-				border-radius: 12px;
-				border-width: 2px;
-			}
-
-			.components-form-toggle__thumb {
-				width: calc(var(--base-width) * 2);
-				height: calc(var(--base-width) * 2);
-				top: calc(var(--base-width) / 2);
-				left: calc(var(--base-width) / 2);
-			}
-
-			&.is-checked .components-form-toggle__thumb {
-				transform: translateX(calc(var(--base-width) * 3));
-			}
-		}
-
-		.components-toggle-control__help {
-			margin-inline-start: calc(var(--track-width) + var(--spacing-base));
-		}
-	}
 }
 
 .toggle.is-toggling {

package/build/components/upsell-banner/style.scss

@@ -74,15 +74,9 @@
 
 			.upsell-banner--content-cta-button {
 				white-space: nowrap;
-				box-shadow: inset 0 0 0 1.5px rgb(0, 0, 0);
 				font-weight: 400;
 				padding: 8px 16px;
 
-				&.secondary {
-					background-color: var(--jp-white);
-					color: var(--jp-black);
-				}
-
 				&.primary {
 					margin-left: 8px;
 				}

package/build/index.d.ts

@@ -36,7 +36,6 @@ export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.tsx';
 export { default as TermsOfService } from './components/terms-of-service/index.tsx';
-export { default as Badge } from './components/badge/index.tsx';
 export { default as Chip } from './components/chip/index.tsx';
 export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.tsx';
 export { default as BoostScoreBar } from './components/boost-score-bar/index.tsx';

package/build/index.js

@@ -49,7 +49,6 @@ export { default as QRCode } from './components/qr-code/index.js';
 export { default as Button } from './components/button/index.js';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
 export { default as TermsOfService } from './components/terms-of-service/index.js';
-export { default as Badge } from './components/badge/index.js';
 export { default as Chip } from './components/chip/index.js';
 export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.js';
 export { default as BoostScoreBar } from './components/boost-score-bar/index.js';

package/components/admin-page/index.tsx

@@ -47,7 +47,10 @@ const AdminPage: FC< AdminPageProps > = ( {
 		restApi.setApiNonce( apiNonce );
 	}, [ apiRoot, apiNonce ] );
 
-	const rootClassName = clsx( styles[ 'admin-page' ], className, {
+	// `jp-admin-page` is a stable, non-hashed hook for global stylesheets and
+	// shared SCSS mixins (notably `jetpack-admin-page-layout` in
+	// @automattic/jetpack-base-styles). Do not rename.
+	const rootClassName = clsx( styles[ 'admin-page' ], 'jp-admin-page', className, {
 		[ styles.background ]: showBackground,
 		[ styles[ 'without-bottom-border' ] ]: tabs || ! showBottomBorder,
 	} );

package/components/button/style.module.scss

@@ -1,11 +1,4 @@
 .button {
-	--wp-admin-theme-color: var(--jp-black);
-	--wp-admin-theme-color-darker-10: var(--jp-black-80);
-	--wp-admin-theme-color-darker-20: var(--jp-black-80);
-	// 1.51px to avoid subpixel rendering issues on Firefox/Linux
-	--wp-admin-border-width-focus: 1.51px;
-
-	border-radius: var(--jp-border-radius);
 	justify-content: center;
 	font-weight: 600;
 
@@ -67,32 +60,6 @@
 		min-width: 100%;
 	}
 
-	// SPECIFICS
-	// PRIMARY AND SECONDARY
-
-	// Primary & Secondary
-	&:global(.is-primary),
-	&:global(.is-secondary) {
-		// Disabled
-		&:disabled {
-			background: var(--jp-gray);
-			color: var(--jp-gray-20);
-		}
-	}
-
-	// Only Secondary
-	&:global(.is-secondary) {
-		background: var(--jp-white);
-		// 1.51px to avoid subpixel rendering issues on Firefox/Linux
-		box-shadow: inset 0 0 0 1.51px var(--jp-black);
-
-		// Hover & Active
-		&:active:not(:disabled),
-		&:hover:not(:disabled) {
-			background: var(--jp-gray-0);
-		}
-	}
-
 	// SPECIFICS
 	// LINK & EXTERNAL LINK
 
@@ -102,90 +69,6 @@
 		&.small {
 			padding: 0;
 		}
-
-		// Hover State
-		&:hover:not(:disabled) {
-			text-decoration-thickness: 3px;
-		}
-
-		// Focus State
-		&:focus:not(:disabled) {
-			text-decoration-line: none;
-		}
-	}
-
-	// DESTRUCTIVE
-
-	&:global(.is-destructive) {
-		// Primary
-		&:global(.is-primary) {
-			box-shadow: none;
-
-			&:not(:disabled) {
-				color: var(--jp-white);
-				background: var(--jp-red-50);
-				box-shadow: inset 0 0 0 1px var(--jp-red-50);
-			}
-
-			&:hover:not(:disabled) {
-				background: var(--jp-red-60);
-				box-shadow: inset 0 0 0 1px var(--jp-red-60);
-			}
-
-			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
-				background: var(--jp-red-70);
-				color: var(--jp-white);
-			}
-
-			&:active:not(:disabled) {
-				background: var(--jp-red-50);
-			}
-		}
-
-		// Secondary
-		&:global(.is-secondary) {
-			box-shadow: none;
-
-			&:not(:disabled) {
-				color: var(--jp-red-50);
-				background: var(--jp-white);
-				box-shadow: inset 0 0 0 1.5px var(--jp-red-50);
-			}
-
-			&:hover:not(:disabled) {
-				background: var(--jp-red-0);
-				box-shadow: inset 0 0 0 1.5px var(--jp-red-60);
-				color: var(--jp-red-60);
-			}
-
-			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
-				color: var(--jp-red-70);
-			}
-
-			&:active:not(:disabled) {
-				background: var(--jp-gray-0);
-			}
-		}
-
-		// Link
-		&:global(.is-link) {
-
-			&:not(:disabled) {
-				color: var(--jp-red-50);
-			}
-
-			&:hover:not(:disabled) {
-				color: var(--jp-red-60);
-				box-shadow: none;
-			}
-
-			&:focus:not(:disabled) {
-				color: var(--jp-red-70);
-				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
-			}
-		}
 	}
 
 	// LOADING

package/components/jetpack-footer/style.scss

@@ -4,7 +4,7 @@
 .jetpack-footer {
 	border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
 	box-sizing: border-box;
-	font-size: var(--wpds-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md, 13px);
 	padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
 	width: 100%;
 

package/components/navigator-modal/index.tsx

@@ -1,6 +1,6 @@
 import { Modal, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 import { NavigatorModalContext } from './context.ts';
 import { Screen } from './screen.tsx';
 import './styles.scss';
@@ -24,16 +24,36 @@ function InternalNavigatorModal( {
 	...props
 }: Omit< ModalProps, 'onRequestClose' > ) {
 	const { onClose, initialPath } = useContext( NavigatorModalContext );
+	const overlayRef = useRef< HTMLDivElement >( null );
+	const isUserInteracting = useRef( false );
+
+	// Track pointer interaction on the overlay so we can distinguish
+	// user-initiated overlay clicks from the WP Modal dismisser mechanism,
+	// which also calls onRequestClose() without an event argument.
+	useEffect( () => {
+		const overlay = overlayRef.current;
+		if ( ! overlay ) {
+			return;
+		}
+		const handler = () => {
+			isUserInteracting.current = true;
+		};
+		overlay.addEventListener( 'pointerdown', handler );
+		return () => overlay.removeEventListener( 'pointerdown', handler );
+	}, [] );
 
 	// WordPress Modal's dismisser mechanism (ModalContext) calls onRequestClose()
 	// without arguments when another non-nested Modal mounts. We guard against
 	// this so that external modals (e.g. Image Studio) don't destroy this one.
 	// User-initiated closes (Escape, close button) always pass an event.
+	// Overlay clicks don't pass an event but are identified by the
+	// isUserInteracting flag set via the pointerdown listener above.
 	// The NavigatorModal's own Header/Footer close buttons call context.onClose
 	// directly and are unaffected by this guard.
 	const onRequestClose = useCallback(
 		( event?: React.SyntheticEvent ) => {
-			if ( event ) {
+			if ( event || isUserInteracting.current ) {
+				isUserInteracting.current = false;
 				onClose?.();
 			}
 		},
@@ -42,6 +62,7 @@ function InternalNavigatorModal( {
 
 	return (
 		<Modal
+			ref={ overlayRef }
 			__experimentalHideHeader
 			onRequestClose={ onRequestClose }
 			className={ clsx( 'jp-navigator-modal', className ) }

package/components/pricing-card/style.scss

@@ -90,9 +90,6 @@
 		width: 100%;
 		height: auto;
 		font-size: 18px;
-		background: var(--jp-black);
-		color: var(--jp-white) !important;
-		border-radius: var(--jp-border-radius);
 		padding: 14px 24px;
 		margin: 24px 0 32px;
 		justify-content: center;

package/components/radio-control/index.tsx

@@ -1,6 +1,5 @@
 import { RadioControl as WPRadioControl } from '@wordpress/components';
 import clsx from 'clsx';
-import styles from './styles.module.scss';
 import type { FC, ReactNode } from 'react';
 
 export interface RadioControlProps {
@@ -42,7 +41,7 @@ const RadioControl: FC< RadioControlProps > = ( {
 	return (
 		<WPRadioControl
 			selected={ selected }
-			className={ clsx( styles.radio, className ) }
+			className={ clsx( 'radio', className ) }
 			disabled={ disabled }
 			help={ help }
 			label={ label }

package/components/terms-of-service/styles.scss

@@ -3,7 +3,6 @@
 	color: var(--jp-black);
 
 	.terms-of-service__link {
-		color: var(--jp-green-50);
 		white-space: nowrap;
 	}
 }

package/components/toggle-control/styles.module.scss

@@ -3,8 +3,6 @@
 /// Overrides the @wordpress/components ToggleControl component.
 /// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle
 .toggle {
-	--base-width: 8px;
-	--track-width: calc(var(--base-width) * 6);
 
 	&.is-small {
 		--base-width: 6px;
@@ -13,41 +11,6 @@
 	&.no-label :global(.components-toggle-control__label) {
 		display: none;
 	}
-
-	:global {
-
-		.components-form-toggle {
-			--wp-admin-theme-color: var(--jp-green-40);
-			height: calc(var(--base-width) * 3);
-
-
-			&__input:focus + .components-form-toggle__track {
-				box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
-			}
-
-			.components-form-toggle__track {
-				width: var(--track-width);
-				height: calc(var(--base-width) * 3);
-				border-radius: 12px;
-				border-width: 2px;
-			}
-
-			.components-form-toggle__thumb {
-				width: calc(var(--base-width) * 2);
-				height: calc(var(--base-width) * 2);
-				top: calc(var(--base-width) / 2);
-				left: calc(var(--base-width) / 2);
-			}
-
-			&.is-checked .components-form-toggle__thumb {
-				transform: translateX(calc(var(--base-width) * 3));
-			}
-		}
-
-		.components-toggle-control__help {
-			margin-inline-start: calc(var(--track-width) + var(--spacing-base));
-		}
-	}
 }
 
 .toggle.is-toggling {

package/components/upsell-banner/style.scss

@@ -74,15 +74,9 @@
 
 			.upsell-banner--content-cta-button {
 				white-space: nowrap;
-				box-shadow: inset 0 0 0 1.5px rgb(0, 0, 0);
 				font-weight: 400;
 				padding: 8px 16px;
 
-				&.secondary {
-					background-color: var(--jp-white);
-					color: var(--jp-black);
-				}
-
 				&.primary {
 					margin-left: 8px;
 				}

package/index.ts

@@ -51,7 +51,6 @@ export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.tsx';
 export { default as TermsOfService } from './components/terms-of-service/index.tsx';
-export { default as Badge } from './components/badge/index.tsx';
 export { default as Chip } from './components/chip/index.tsx';
 export {
 	default as PricingTable,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.8.1",
+	"version": "1.8.3",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -45,23 +45,23 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.22",
-		"@automattic/jetpack-boost-score-api": "^1.0.37",
+		"@automattic/jetpack-api": "^1.0.23",
+		"@automattic/jetpack-boost-score-api": "^1.0.38",
 		"@automattic/jetpack-script-data": "^0.6.2",
-		"@automattic/number-formatters": "^1.1.5",
+		"@automattic/number-formatters": "^1.1.6",
 		"@babel/runtime": "^7",
-		"@wordpress/admin-ui": "1.10.0",
-		"@wordpress/browserslist-config": "6.43.0",
-		"@wordpress/components": "32.5.0",
-		"@wordpress/compose": "7.43.0",
-		"@wordpress/data": "10.43.0",
-		"@wordpress/date": "5.43.0",
-		"@wordpress/element": "6.43.0",
-		"@wordpress/i18n": "6.16.0",
-		"@wordpress/icons": "12.0.0",
-		"@wordpress/notices": "5.43.0",
-		"@wordpress/theme": "0.10.0",
-		"@wordpress/ui": "0.9.0",
+		"@wordpress/admin-ui": "1.12.0",
+		"@wordpress/browserslist-config": "6.44.0",
+		"@wordpress/components": "32.6.0",
+		"@wordpress/compose": "7.44.0",
+		"@wordpress/data": "10.44.0",
+		"@wordpress/date": "5.44.0",
+		"@wordpress/element": "6.44.0",
+		"@wordpress/i18n": "6.17.0",
+		"@wordpress/icons": "12.2.0",
+		"@wordpress/notices": "5.44.0",
+		"@wordpress/theme": "0.11.0",
+		"@wordpress/ui": "0.11.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
@@ -71,12 +71,12 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.21",
+		"@automattic/jetpack-base-styles": "^1.1.0",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@jest/globals": "30.3.0",
-		"@storybook/addon-docs": "10.3.3",
-		"@storybook/react": "10.3.3",
+		"@storybook/addon-docs": "10.3.5",
+		"@storybook/react": "10.3.5",
 		"@testing-library/dom": "10.4.1",
 		"@testing-library/react": "16.3.2",
 		"@testing-library/user-event": "14.6.1",
@@ -89,7 +89,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",
-		"storybook": "10.3.3",
+		"storybook": "10.3.5",
 		"ts-dedent": "2.2.0",
 		"typescript": "5.9.3",
 		"webpack": "5.105.2",

package/build/components/badge/index.d.ts

@@ -1,19 +0,0 @@
-import type { ReactNode, FC } from 'react';
-type BadgeProps = {
-    children?: ReactNode;
-    className?: string;
-    variant?: 'success' | 'warning' | 'danger';
-    [key: string]: unknown;
-};
-/**
- * Badge component
- *
- * @param {object}      props           - The component properties.
- * @param {string}      props.variant   - The badge variant (i.e. 'success', 'warning', 'danger').
- * @param {JSX.Element} props.children  - Badge text or content.
- * @param {string}      props.className - Additional class name to pass to the Badge component.
- *
- * @return {ReactElement} The `Badge` component.
- */
-declare const Badge: FC<BadgeProps>;
-export default Badge;

package/build/components/badge/index.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './style.module.scss';
-/**
- * Badge component
- *
- * @param {object}      props           - The component properties.
- * @param {string}      props.variant   - The badge variant (i.e. 'success', 'warning', 'danger').
- * @param {JSX.Element} props.children  - Badge text or content.
- * @param {string}      props.className - Additional class name to pass to the Badge component.
- *
- * @return {ReactElement} The `Badge` component.
- */
-const Badge = ({ children, className, variant, ...props }) => {
-    const classes = clsx(styles.badge, {
-        [styles['is-success']]: variant === 'success',
-        [styles['is-warning']]: variant === 'warning',
-        [styles['is-danger']]: variant === 'danger',
-    }, className);
-    return (_jsx("span", { className: classes, ...props, children: children }));
-};
-export default Badge;

package/build/components/badge/style.module.scss

@@ -1,25 +0,0 @@
-.badge {
-	display: inline-block;
-	border-radius: 4px;
-	background-color: var(--jp-gray-0);
-	color: var(--jp-gray-80);
-	padding: 4px 8px;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 16px;
-
-	&.is-success {
-		background-color: var(--jp-green-5);
-		color: var(--jp-green-50);
-	}
-
-	&.is-warning {
-		background-color: var(--jp-yellow-5);
-		color: var(--jp-yellow-60);
-	}
-
-	&.is-danger {
-		background-color: var(--jp-red-5);
-		color: var(--jp-red-70);
-	}
-}

package/build/components/radio-control/styles.module.scss

@@ -1,26 +0,0 @@
-/// Radio Control
-///
-/// Overrides the @wordpress/components RadioControl component.
-/// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/radio-control
-
-.radio {
-
-	:global {
-
-		.components-radio-control {
-
-			&__input[type="radio"] {
-
-				&:checked {
-					background: var(--jp-green-40);
-					border-color: var(--jp-green-40);
-				}
-
-				&:focus {
-					border-color: var(--jp-green-50);
-					box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
-				}
-			}
-		}
-	}
-}

package/components/badge/index.tsx

@@ -1,39 +0,0 @@
-import clsx from 'clsx';
-import styles from './style.module.scss';
-import type { ReactNode, ReactElement, FC } from 'react';
-
-type BadgeProps = {
-	children?: ReactNode;
-	className?: string;
-	variant?: 'success' | 'warning' | 'danger';
-	[ key: string ]: unknown;
-};
-
-/**
- * Badge component
- *
- * @param {object}      props           - The component properties.
- * @param {string}      props.variant   - The badge variant (i.e. 'success', 'warning', 'danger').
- * @param {JSX.Element} props.children  - Badge text or content.
- * @param {string}      props.className - Additional class name to pass to the Badge component.
- *
- * @return {ReactElement} The `Badge` component.
- */
-const Badge: FC< BadgeProps > = ( { children, className, variant, ...props } ) => {
-	const classes = clsx(
-		styles.badge,
-		{
-			[ styles[ 'is-success' ] ]: variant === 'success',
-			[ styles[ 'is-warning' ] ]: variant === 'warning',
-			[ styles[ 'is-danger' ] ]: variant === 'danger',
-		},
-		className
-	);
-	return (
-		<span className={ classes } { ...props }>
-			{ children }
-		</span>
-	);
-};
-
-export default Badge;

package/components/badge/style.module.scss

@@ -1,25 +0,0 @@
-.badge {
-	display: inline-block;
-	border-radius: 4px;
-	background-color: var(--jp-gray-0);
-	color: var(--jp-gray-80);
-	padding: 4px 8px;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 16px;
-
-	&.is-success {
-		background-color: var(--jp-green-5);
-		color: var(--jp-green-50);
-	}
-
-	&.is-warning {
-		background-color: var(--jp-yellow-5);
-		color: var(--jp-yellow-60);
-	}
-
-	&.is-danger {
-		background-color: var(--jp-red-5);
-		color: var(--jp-red-70);
-	}
-}

package/components/radio-control/styles.module.scss

@@ -1,26 +0,0 @@
-/// Radio Control
-///
-/// Overrides the @wordpress/components RadioControl component.
-/// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/radio-control
-
-.radio {
-
-	:global {
-
-		.components-radio-control {
-
-			&__input[type="radio"] {
-
-				&:checked {
-					background: var(--jp-green-40);
-					border-color: var(--jp-green-40);
-				}
-
-				&:focus {
-					border-color: var(--jp-green-50);
-					box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
-				}
-			}
-		}
-	}
-}