@automattic/jetpack-components 1.3.11 → 1.3.13

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.3.13] - 2025-12-01
+### Added
+- Add NavigatorModal component. [#46101]
+
+### Changed
+- Update package dependencies. [#46143]
+
+## [1.3.12] - 2025-11-20
+### Changed
+- Update package dependencies. [#46022]
+
 ## [1.3.11] - 2025-11-18
 ### Changed
 - Update dependencies.
@@ -29,8 +40,7 @@
 
 ## [1.3.5] - 2025-10-02
 ### Changed
-- Update package dependencies. [#45334]
-- Update package dependencies. [#45335]
+- Update package dependencies. [#45334] [#45335]
 
 ## [1.3.4] - 2025-09-22
 ### Changed
@@ -1566,6 +1576,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.3.13]: https://github.com/Automattic/jetpack-components/compare/1.3.12...1.3.13
+[1.3.12]: https://github.com/Automattic/jetpack-components/compare/1.3.11...1.3.12
 [1.3.11]: https://github.com/Automattic/jetpack-components/compare/1.3.10...1.3.11
 [1.3.10]: https://github.com/Automattic/jetpack-components/compare/1.3.9...1.3.10
 [1.3.9]: https://github.com/Automattic/jetpack-components/compare/1.3.8...1.3.9

package/build/components/navigator-modal/context.d.ts

@@ -0,0 +1,2 @@
+import type { TNavigatorModalContext } from './types.ts';
+export declare const NavigatorModalContext: import("react").Context<TNavigatorModalContext>;

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

@@ -0,0 +1,6 @@
+import { createContext } from '@wordpress/element';
+const initialContextValue = {
+    onClose: () => { },
+};
+export const NavigatorModalContext = createContext(initialContextValue);
+NavigatorModalContext.displayName = 'NavigatorModalContext';

package/build/components/navigator-modal/footer.d.ts

@@ -0,0 +1,14 @@
+import { Button } from '@wordpress/components';
+import { SharedProps } from './types.ts';
+export type FooterProps = SharedProps & {
+    actions?: Array<React.ComponentProps<typeof Button>>;
+    isScreenLocked?: boolean;
+};
+/**
+ * Renders a footer.
+ *
+ * @param {FooterProps} props - Props
+ *
+ * @return The rendered footer.
+ */
+export declare function Footer({ children, actions, isScreenLocked }: FooterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, FlexBlock, FlexItem, useNavigator } from '@wordpress/components';
+import { useContext } from 'react';
+import { NavigatorModalContext } from "./context.js";
+import styles from './styles.module.scss';
+/**
+ * Renders a footer.
+ *
+ * @param {FooterProps} props - Props
+ *
+ * @return The rendered footer.
+ */
+export function Footer({ children, actions, isScreenLocked }) {
+    const navigator = useNavigator();
+    const context = useContext(NavigatorModalContext);
+    return (_jsxs(Flex, { className: styles.footer, children: [_jsx(FlexBlock, { children: children }), actions ? (_jsx(FlexItem, { children: _jsx(Flex, { children: actions.map(({ onClick, ...actionProps }, index) => (_jsx(Button
+                    // eslint-disable-next-line react/jsx-no-bind
+                    , { 
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick: event => {
+                            onClick?.(event);
+                            if (!isScreenLocked) {
+                                navigator.goBack();
+                            }
+                            else {
+                                context.onClose?.();
+                            }
+                        }, ...actionProps }, index))) }) })) : null] }));
+}

package/build/components/navigator-modal/header.d.ts

@@ -0,0 +1,17 @@
+export type HeaderProps = {
+    /**
+     * The title of the header.
+     */
+    title: string;
+    /**
+     * Whether the screen is locked, in which case to hide the back button.
+     */
+    isScreenLocked?: boolean;
+};
+/**
+ * Renders a header for the NavigatorModal.
+ * @param {HeaderProps} props - Props
+ *
+ * @return component
+ */
+export declare function Header({ title, isScreenLocked }: HeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, useNavigator } from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+import { chevronLeft, chevronRight, close } from '@wordpress/icons';
+import { useCallback, useContext } from 'react';
+import { NavigatorModalContext } from "./context.js";
+import styles from './styles.module.scss';
+/**
+ * Renders a header for the NavigatorModal.
+ * @param {HeaderProps} props - Props
+ *
+ * @return component
+ */
+export function Header({ title, isScreenLocked }) {
+    const context = useContext(NavigatorModalContext);
+    const navigator = useNavigator();
+    const onGoBack = useCallback(() => {
+        navigator.goBack();
+    }, [navigator]);
+    return (_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles['title-wrap'], children: [!isScreenLocked ? (_jsx(Button, { label: __('Go back', 'jetpack-components'), icon: isRTL() ? chevronRight : chevronLeft, onClick: onGoBack, variant: "tertiary", size: "compact" })) : null, _jsx("h1", { children: title })] }), context.isDismissible ? (_jsx(Button, { size: "compact", onClick: context.onClose, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
+}

package/build/components/navigator-modal/index.d.ts

@@ -0,0 +1,16 @@
+import { Screen } from './screen.tsx';
+import { TNavigatorModalContext, SharedProps } from './types.ts';
+/**
+ * Renders a modal with navigator capabilities.
+ *
+ * @param {SharedProps & TNavigatorModalContext} props - Props
+ *
+ * @return Component
+ */
+declare function NavigatorModalMain({ children, className, initialPath, onClose, isDismissible, }: SharedProps & TNavigatorModalContext): import("react/jsx-runtime").JSX.Element;
+export declare const NavigatorModal: typeof NavigatorModalMain & {
+    Screen: typeof Screen & {
+        displayName: string;
+    };
+};
+export {};

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal, Navigator } from '@wordpress/components';
+import clsx from 'clsx';
+import { useContext } from 'react';
+import { NavigatorModalContext } from "./context.js";
+import { Screen } from "./screen.js";
+import styles from './styles.module.scss';
+/**
+ * Renders the internal NavigatorModal component.
+ *
+ * @param { SharedProps } props - Props
+ *
+ * @return Component
+ */
+function InternalNavigatorModal({ children, className }) {
+    const context = useContext(NavigatorModalContext);
+    return (_jsx(Modal, { __experimentalHideHeader: true, onRequestClose: context.onClose, className: clsx(styles.modal, className), children: _jsx(Navigator, { initialPath: context.initialPath, className: styles.navigator, children: children }) }));
+}
+/**
+ * Renders a modal with navigator capabilities.
+ *
+ * @param {SharedProps & TNavigatorModalContext} props - Props
+ *
+ * @return Component
+ */
+function NavigatorModalMain({ children, className, initialPath = '/', onClose, isDismissible = true, }) {
+    return (_jsx(NavigatorModalContext.Provider, { value: { onClose, initialPath, isDismissible }, children: _jsx(InternalNavigatorModal, { className: className, children: children }) }));
+}
+export const NavigatorModal = Object.assign(NavigatorModalMain, {
+    Screen: Object.assign(Screen, {
+        displayName: 'NavigatorModal.Screen',
+    }),
+});

package/build/components/navigator-modal/screen.d.ts

@@ -0,0 +1,51 @@
+import { FooterProps } from './footer.tsx';
+export type ScreenProps = {
+    /**
+     * The title of the screen.
+     */
+    title?: string;
+    /**
+     * The path of the screen.
+     */
+    path: string;
+    /**
+     * The sidebar content
+     */
+    sidebar?: React.ReactNode;
+    /**
+     * Whether the screen is locked or has a parent screen.
+     *
+     * When it's locked, it means there will be no navigation back to a previous screen.
+     */
+    isScreenLocked?: boolean;
+    /**
+     * The footer content
+     */
+    footerContent?: React.ReactNode;
+    /**
+     * The footer actions
+     */
+    footerActions?: FooterProps['actions'];
+    /**
+     * className to be applied to the modal.
+     */
+    className?: string;
+} & ({
+    /**
+     * The content of the screen.
+     */
+    children: React.ReactNode;
+} | {
+    /**
+     * The content of the screen.
+     */
+    content: React.ReactNode;
+});
+/**
+ * Renders a screen.
+ *
+ * @param {ScreenProps} props - Props
+ *
+ * @return The rendered screen.
+ */
+export declare function Screen({ path, className, title, sidebar, isScreenLocked, footerContent, footerActions, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Navigator } from '@wordpress/components';
+import clsx from 'clsx';
+import { Footer } from "./footer.js";
+import { Header } from "./header.js";
+import styles from './styles.module.scss';
+/**
+ * Renders a screen.
+ *
+ * @param {ScreenProps} props - Props
+ *
+ * @return The rendered screen.
+ */
+export function Screen({ path, className, title, sidebar, isScreenLocked, footerContent, footerActions, ...props }) {
+    const hasFooter = Boolean(footerContent || (footerActions && footerActions.length));
+    return (_jsx(Navigator.Screen, { path: path, className: clsx(styles.screen, className), children: _jsxs(Flex, { direction: "column", gap: 0, children: [_jsx(Header, { title: title, isScreenLocked: isScreenLocked }), _jsx("div", { className: styles.body, children: _jsxs(Flex, { gap: 0, align: "start", children: [sidebar ? _jsx("div", { className: styles.sidebar, children: sidebar }) : null, _jsx("div", { className: styles.content, children: ('children' in props && props.children) ||
+                                    ('content' in props && props.content) })] }) }), hasFooter ? (_jsx(Footer, { actions: footerActions, isScreenLocked: isScreenLocked, children: footerContent })) : null] }) }));
+}

package/build/components/navigator-modal/types.d.ts

@@ -0,0 +1,24 @@
+export type TNavigatorModalContext = {
+    /**
+     * Whether the modal is dismissible.
+     */
+    isDismissible?: boolean;
+    /**
+     * The initial active path.
+     */
+    initialPath?: string;
+    /**
+     * Callback fired when the close button is clicked.
+     */
+    onClose?: VoidFunction;
+};
+export type SharedProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * className to be applied to the modal.
+     */
+    className?: string;
+};

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

@@ -0,0 +1 @@
+export {};

package/build/index.d.ts

@@ -64,3 +64,4 @@ export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
 export { default as DetailsViewer } from './components/details-viewer/index.tsx';
 export * from './components/global-notices/index.ts';
+export * from './components/navigator-modal/index.tsx';

package/build/index.js

@@ -78,3 +78,4 @@ export { default as DiffViewer } from "./components/diff-viewer/index.js";
 export { default as MarkedLines } from "./components/marked-lines/index.js";
 export { default as DetailsViewer } from "./components/details-viewer/index.js";
 export * from "./components/global-notices/index.js";
+export * from "./components/navigator-modal/index.js";

package/components/navigator-modal/context.ts

@@ -0,0 +1,10 @@
+import { createContext } from '@wordpress/element';
+import type { TNavigatorModalContext } from './types.ts';
+
+const initialContextValue: TNavigatorModalContext = {
+	onClose: () => {},
+};
+
+export const NavigatorModalContext = createContext( initialContextValue );
+
+NavigatorModalContext.displayName = 'NavigatorModalContext';

package/components/navigator-modal/footer.tsx

@@ -0,0 +1,50 @@
+import { Button, Flex, FlexBlock, FlexItem, useNavigator } from '@wordpress/components';
+import { useContext } from 'react';
+import { NavigatorModalContext } from './context.ts';
+import styles from './styles.module.scss';
+import { SharedProps } from './types.ts';
+
+export type FooterProps = SharedProps & {
+	actions?: Array< React.ComponentProps< typeof Button > >;
+	isScreenLocked?: boolean;
+};
+
+/**
+ * Renders a footer.
+ *
+ * @param {FooterProps} props - Props
+ *
+ * @return The rendered footer.
+ */
+export function Footer( { children, actions, isScreenLocked }: FooterProps ) {
+	const navigator = useNavigator();
+	const context = useContext( NavigatorModalContext );
+
+	return (
+		<Flex className={ styles.footer }>
+			<FlexBlock>{ children }</FlexBlock>
+			{ actions ? (
+				<FlexItem>
+					<Flex>
+						{ actions.map( ( { onClick, ...actionProps }, index ) => (
+							<Button
+								// eslint-disable-next-line react/jsx-no-bind
+								onClick={ event => {
+									onClick?.( event );
+
+									if ( ! isScreenLocked ) {
+										navigator.goBack();
+									} else {
+										context.onClose?.();
+									}
+								} }
+								key={ index }
+								{ ...actionProps }
+							/>
+						) ) }
+					</Flex>
+				</FlexItem>
+			) : null }
+		</Flex>
+	);
+}

package/components/navigator-modal/header.tsx

@@ -0,0 +1,58 @@
+import { Button, useNavigator } from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+import { chevronLeft, chevronRight, close } from '@wordpress/icons';
+import { useCallback, useContext } from 'react';
+import { NavigatorModalContext } from './context.ts';
+import styles from './styles.module.scss';
+
+export type HeaderProps = {
+	/**
+	 * The title of the header.
+	 */
+	title: string;
+	/**
+	 * Whether the screen is locked, in which case to hide the back button.
+	 */
+	isScreenLocked?: boolean;
+};
+
+/**
+ * Renders a header for the NavigatorModal.
+ * @param {HeaderProps} props - Props
+ *
+ * @return component
+ */
+export function Header( { title, isScreenLocked }: HeaderProps ) {
+	const context = useContext( NavigatorModalContext );
+	const navigator = useNavigator();
+
+	const onGoBack = useCallback( () => {
+		navigator.goBack();
+	}, [ navigator ] );
+
+	return (
+		<div className={ styles.header }>
+			<div className={ styles[ 'title-wrap' ] }>
+				{ ! isScreenLocked ? (
+					<Button
+						label={ __( 'Go back', 'jetpack-components' ) }
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						onClick={ onGoBack }
+						variant="tertiary"
+						size="compact"
+					/>
+				) : null }
+				<h1>{ title }</h1>
+			</div>
+			{ context.isDismissible ? (
+				<Button
+					size="compact"
+					onClick={ context.onClose }
+					icon={ close }
+					label={ __( 'Close', 'jetpack-components' ) }
+					variant="tertiary"
+				/>
+			) : null }
+		</div>
+	);
+}

package/components/navigator-modal/index.tsx

@@ -0,0 +1,57 @@
+import { Modal, Navigator } from '@wordpress/components';
+import clsx from 'clsx';
+import { useContext } from 'react';
+import { NavigatorModalContext } from './context.ts';
+import { Screen } from './screen.tsx';
+import styles from './styles.module.scss';
+import { TNavigatorModalContext, SharedProps } from './types.ts';
+
+/**
+ * Renders the internal NavigatorModal component.
+ *
+ * @param { SharedProps } props - Props
+ *
+ * @return Component
+ */
+function InternalNavigatorModal( { children, className }: SharedProps ) {
+	const context = useContext( NavigatorModalContext );
+
+	return (
+		<Modal
+			__experimentalHideHeader
+			onRequestClose={ context.onClose }
+			className={ clsx( styles.modal, className ) }
+		>
+			<Navigator initialPath={ context.initialPath } className={ styles.navigator }>
+				{ children }
+			</Navigator>
+		</Modal>
+	);
+}
+
+/**
+ * Renders a modal with navigator capabilities.
+ *
+ * @param {SharedProps & TNavigatorModalContext} props - Props
+ *
+ * @return Component
+ */
+function NavigatorModalMain( {
+	children,
+	className,
+	initialPath = '/',
+	onClose,
+	isDismissible = true,
+}: SharedProps & TNavigatorModalContext ) {
+	return (
+		<NavigatorModalContext.Provider value={ { onClose, initialPath, isDismissible } }>
+			<InternalNavigatorModal className={ className }>{ children }</InternalNavigatorModal>
+		</NavigatorModalContext.Provider>
+	);
+}
+
+export const NavigatorModal = Object.assign( NavigatorModalMain, {
+	Screen: Object.assign( Screen, {
+		displayName: 'NavigatorModal.Screen',
+	} ),
+} );

package/components/navigator-modal/screen.tsx

@@ -0,0 +1,97 @@
+import { Flex, Navigator } from '@wordpress/components';
+import clsx from 'clsx';
+import { Footer, FooterProps } from './footer.tsx';
+import { Header } from './header.tsx';
+import styles from './styles.module.scss';
+
+export type ScreenProps = {
+	/**
+	 * The title of the screen.
+	 */
+	title?: string;
+
+	/**
+	 * The path of the screen.
+	 */
+	path: string;
+	/**
+	 * The sidebar content
+	 */
+	sidebar?: React.ReactNode;
+	/**
+	 * Whether the screen is locked or has a parent screen.
+	 *
+	 * When it's locked, it means there will be no navigation back to a previous screen.
+	 */
+	isScreenLocked?: boolean;
+	/**
+	 * The footer content
+	 */
+	footerContent?: React.ReactNode;
+
+	/**
+	 * The footer actions
+	 */
+	footerActions?: FooterProps[ 'actions' ];
+
+	/**
+	 * className to be applied to the modal.
+	 */
+	className?: string;
+} & (
+	| {
+			/**
+			 * The content of the screen.
+			 */
+			children: React.ReactNode;
+	  }
+	| {
+			/**
+			 * The content of the screen.
+			 */
+			content: React.ReactNode;
+	  }
+);
+
+/**
+ * Renders a screen.
+ *
+ * @param {ScreenProps} props - Props
+ *
+ * @return The rendered screen.
+ */
+export function Screen( {
+	path,
+	className,
+	title,
+	sidebar,
+	isScreenLocked,
+	footerContent,
+	footerActions,
+	...props
+}: ScreenProps ) {
+	const hasFooter = Boolean( footerContent || ( footerActions && footerActions.length ) );
+
+	return (
+		<Navigator.Screen path={ path } className={ clsx( styles.screen, className ) }>
+			<Flex direction="column" gap={ 0 }>
+				<Header title={ title } isScreenLocked={ isScreenLocked } />
+
+				<div className={ styles.body }>
+					<Flex gap={ 0 } align="start">
+						{ sidebar ? <div className={ styles.sidebar }>{ sidebar }</div> : null }
+						<div className={ styles.content }>
+							{ ( 'children' in props && props.children ) ||
+								( 'content' in props && props.content ) }
+						</div>
+					</Flex>
+				</div>
+				{ hasFooter ? (
+					<Footer actions={ footerActions } isScreenLocked={ isScreenLocked }>
+						{ footerContent }
+					</Footer>
+				) : null }
+			</Flex>
+		</Navigator.Screen>
+	);
+}

package/components/navigator-modal/styles.module.scss

@@ -0,0 +1,77 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.modal {
+	width: 80rem;
+	height: 40rem;
+	max-height: 90%;
+
+	:global(.components-modal__content) {
+		padding: 0;
+
+		> div {
+			height: 100%;
+		}
+	}
+}
+
+.navigator {
+	height: 100%;
+}
+
+.screen {
+	height: 100%;
+
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1.5rem;
+		height: 4.5rem;
+		border-bottom: 1px solid gb.$gray-200;
+		flex-shrink: 0;
+
+		.title-wrap {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+		}
+
+		h1 {
+			margin: 0;
+			font-size: 15px;
+			font-weight: 500;
+			line-height: 24px;
+			color: gb.$gray-900;
+		}
+	}
+
+	.body {
+		display: flex;
+		height: 100%;
+		overflow: auto;
+	}
+
+	.sidebar {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		max-width: 22rem;
+		flex-shrink: 0;
+		border-inline-end: 1px solid gb.$gray-300;
+	}
+
+	.content {
+		height: 100%;
+		flex: 1;
+		overflow: auto;
+	}
+
+	.footer {
+		padding: 1rem 1.5rem;
+		border-top: 1px solid gb.$gray-300;
+		height: 4.5rem;
+		flex-shrink: 0;
+	}
+
+}

package/components/navigator-modal/types.ts

@@ -0,0 +1,27 @@
+export type TNavigatorModalContext = {
+	/**
+	 * Whether the modal is dismissible.
+	 */
+	isDismissible?: boolean;
+	/**
+	 * The initial active path.
+	 */
+	initialPath?: string;
+
+	/**
+	 * Callback fired when the close button is clicked.
+	 */
+	onClose?: VoidFunction;
+};
+
+export type SharedProps = {
+	/**
+	 * The content of the component.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * className to be applied to the modal.
+	 */
+	className?: string;
+};

package/index.ts

@@ -85,3 +85,4 @@ export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
 export { default as DetailsViewer } from './components/details-viewer/index.tsx';
 export * from './components/global-notices/index.ts';
+export * from './components/navigator-modal/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.3.11",
+	"version": "1.3.13",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -41,20 +41,20 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.11",
-		"@automattic/jetpack-boost-score-api": "^1.0.18",
+		"@automattic/jetpack-api": "^1.0.12",
+		"@automattic/jetpack-boost-score-api": "^1.0.19",
 		"@automattic/jetpack-script-data": "^0.5.4",
 		"@automattic/number-formatters": "^1.0.15",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.35.0",
-		"@wordpress/components": "30.8.0",
-		"@wordpress/compose": "7.35.0",
-		"@wordpress/data": "10.35.0",
-		"@wordpress/date": "5.35.0",
-		"@wordpress/element": "6.35.0",
-		"@wordpress/i18n": "6.8.0",
-		"@wordpress/icons": "11.2.0",
-		"@wordpress/notices": "5.35.0",
+		"@wordpress/browserslist-config": "6.36.0",
+		"@wordpress/components": "30.9.0",
+		"@wordpress/compose": "7.36.0",
+		"@wordpress/data": "10.36.0",
+		"@wordpress/date": "5.36.0",
+		"@wordpress/element": "6.36.0",
+		"@wordpress/i18n": "6.9.0",
+		"@wordpress/icons": "11.3.0",
+		"@wordpress/notices": "5.36.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
@@ -64,12 +64,12 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.11",
+		"@automattic/jetpack-base-styles": "^1.0.12",
 		"@babel/core": "7.28.4",
 		"@babel/preset-react": "7.27.1",
 		"@jest/globals": "30.2.0",
-		"@storybook/addon-docs": "9.0.15",
-		"@storybook/react": "9.0.15",
+		"@storybook/addon-docs": "10.0.8",
+		"@storybook/react": "10.0.8",
 		"@testing-library/dom": "10.4.1",
 		"@testing-library/react": "16.3.0",
 		"@testing-library/user-event": "14.6.1",
@@ -82,7 +82,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",
-		"storybook": "9.0.15",
+		"storybook": "10.0.8",
 		"ts-dedent": "2.2.0",
 		"typescript": "5.9.3",
 		"webpack": "5.101.3",