@wordpress/components 25.5.0 → 25.6.0

package/src/navigation/stories/{index.tsx → index.story.tsx}

@@ -7,10 +7,6 @@ import type { ComponentMeta } from '@storybook/react';
  * Internal dependencies
  */
 import { Navigation } from '..';
-import { NavigationBackButton } from '../back-button';
-import { NavigationGroup } from '../group';
-import { NavigationItem } from '../item';
-import { NavigationMenu } from '../menu';
 import { DefaultStory } from './utils/default';
 import { GroupStory } from './utils/group';
 import { ControlledStateStory } from './utils/controlled-state';
@@ -22,12 +18,6 @@ import './style.css';
 const meta: ComponentMeta< typeof Navigation > = {
 	title: 'Components (Experimental)/Navigation',
 	component: Navigation,
-	subcomponents: {
-		NavigationBackButton,
-		NavigationGroup,
-		NavigationItem,
-		NavigationMenu,
-	},
 	argTypes: {
 		activeItem: { control: { type: null } },
 		activeMenu: { control: { type: null } },
@@ -46,8 +36,8 @@ const meta: ComponentMeta< typeof Navigation > = {
 export default meta;
 
 export const _default = DefaultStory.bind( {} );
-export const controlledState = ControlledStateStory.bind( {} );
-export const groups = GroupStory.bind( {} );
-export const search = SearchStory.bind( {} );
-export const moreExamples = MoreExamplesStory.bind( {} );
-export const hideIfEmpty = HideIfEmptyStory.bind( {} );
+export const ControlledState = ControlledStateStory.bind( {} );
+export const Groups = GroupStory.bind( {} );
+export const Search = SearchStory.bind( {} );
+export const MoreExamples = MoreExamplesStory.bind( {} );
+export const HideIfEmpty = HideIfEmptyStory.bind( {} );

package/src/navigation/styles/navigation-styles.tsx

@@ -155,7 +155,7 @@ export const ItemBaseUI = styled.li`
 	}
 
 	&.is-active {
-		background-color: ${ COLORS.ui.theme };
+		background-color: ${ COLORS.theme.accent };
 		color: ${ COLORS.white };
 
 		> button,

package/src/navigator/navigator-back-button/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { View } from '../../view';
 import { useNavigatorBackButton } from './hook';
 import type { NavigatorBackButtonProps } from '../types';

package/src/navigator/navigator-back-button/hook.ts

@@ -6,7 +6,8 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorBackButtonHookProps } from '../types';

package/src/navigator/navigator-button/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { View } from '../../view';
 import { useNavigatorButton } from './hook';
 import type { NavigatorButtonProps } from '../types';

package/src/navigator/navigator-button/hook.ts

@@ -7,7 +7,8 @@ import { escapeAttribute } from '@wordpress/escape-html';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useContextSystem } from '../../ui/context';
 import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorButtonProps } from '../types';

package/src/navigator/navigator-provider/component.tsx

@@ -20,11 +20,8 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect, useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';

package/src/navigator/navigator-screen/component.tsx

@@ -3,7 +3,9 @@
  */
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { motion, MotionProps } from 'framer-motion';
+import type { MotionProps } from 'framer-motion';
+// eslint-disable-next-line no-restricted-imports
+import { motion } from 'framer-motion';
 import { css } from '@emotion/react';
 
 /**
@@ -24,11 +26,8 @@ import { escapeAttribute } from '@wordpress/escape-html';
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect, useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';

package/src/navigator/navigator-to-parent-button/component.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../ui/context';
+import { contextConnect } from '../../ui/context';
 import { View } from '../../view';
 import { useNavigatorBackButton } from '../navigator-back-button/hook';
 import type { NavigatorToParentButtonProps } from '../types';

package/src/navigator/stories/{index.tsx → index.story.tsx}

@@ -22,7 +22,6 @@ import {
 const meta: ComponentMeta< typeof NavigatorProvider > = {
 	component: NavigatorProvider,
 	title: 'Components (Experimental)/Navigator',
-	subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },

package/src/notice/stories/{index.tsx → index.story.tsx}

@@ -19,7 +19,6 @@ import type { NoticeListProps } from '../types';
 const meta: ComponentMeta< typeof Notice > = {
 	title: 'Components/Notice',
 	component: Notice,
-	subcomponents: { NoticeList },
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

package/src/number-control/index.tsx

@@ -43,6 +43,7 @@ function UnforwardedNumberControl(
 		required = false,
 		shiftStep = 10,
 		step = 1,
+		spinFactor = 1,
 		type: typeProp = 'number',
 		value: valueProp,
 		size = 'default',
@@ -65,15 +66,17 @@ function UnforwardedNumberControl(
 
 	const isStepAny = step === 'any';
 	const baseStep = isStepAny ? 1 : ensureNumber( step );
+	const baseSpin = ensureNumber( spinFactor ) * baseStep;
 	const baseValue = roundClamp( 0, min, max, baseStep );
 	const constrainValue = (
 		value: number | string,
 		stepOverride?: number
 	) => {
 		// When step is "any" clamp the value, otherwise round and clamp it.
+		// Use '' + to convert to string for use in input value attribute.
 		return isStepAny
-			? Math.min( max, Math.max( min, ensureNumber( value ) ) )
-			: roundClamp( value, min, max, stepOverride ?? baseStep );
+			? '' + Math.min( max, Math.max( min, ensureNumber( value ) ) )
+			: '' + roundClamp( value, min, max, stepOverride ?? baseStep );
 	};
 
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
@@ -88,7 +91,7 @@ function UnforwardedNumberControl(
 	) => {
 		event?.preventDefault();
 		const shift = event?.shiftKey && isShiftStepEnabled;
-		const delta = shift ? ensureNumber( shiftStep ) * baseStep : baseStep;
+		const delta = shift ? ensureNumber( shiftStep ) * baseSpin : baseSpin;
 		let nextValue = isValueEmpty( value ) ? baseValue : value;
 		if ( direction === 'up' ) {
 			nextValue = add( nextValue, delta );
@@ -120,7 +123,6 @@ function UnforwardedNumberControl(
 				type === inputControlActionTypes.PRESS_UP ||
 				type === inputControlActionTypes.PRESS_DOWN
 			) {
-				// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
 				nextState.value = spinValue(
 					currentValue,
 					type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
@@ -135,8 +137,8 @@ function UnforwardedNumberControl(
 				const [ x, y ] = payload.delta;
 				const enableShift = payload.shiftKey && isShiftStepEnabled;
 				const modifier = enableShift
-					? ensureNumber( shiftStep ) * baseStep
-					: baseStep;
+					? ensureNumber( shiftStep ) * baseSpin
+					: baseSpin;
 
 				let directionModifier;
 				let delta;
@@ -167,7 +169,6 @@ function UnforwardedNumberControl(
 					delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
 					const distance = delta * modifier * directionModifier;
 
-					// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
 					nextState.value = constrainValue(
 						// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
 						add( currentValue, distance ),
@@ -186,7 +187,6 @@ function UnforwardedNumberControl(
 				const applyEmptyValue =
 					required === false && currentValue === '';
 
-				// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
 				nextState.value = applyEmptyValue
 					? currentValue
 					: // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined

package/src/number-control/styles/number-control-styles.ts

@@ -36,7 +36,7 @@ export const Input = styled( InputControl )`
 
 export const SpinButton = styled( Button )`
 	&&&&& {
-		color: ${ COLORS.ui.theme };
+		color: ${ COLORS.theme.accent };
 	}
 `;
 

package/src/number-control/test/index.tsx

@@ -97,7 +97,7 @@ describe( 'NumberControl', () => {
 			// Second call: type '1'
 			expect( onChangeSpy ).toHaveBeenNthCalledWith( 2, '1', false );
 			// Third call: clamp value
-			expect( onChangeSpy ).toHaveBeenNthCalledWith( 3, 4, true );
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 3, '4', true );
 		} );
 
 		it( 'should call onChange callback when value is not valid', async () => {
@@ -139,7 +139,7 @@ describe( 'NumberControl', () => {
 			// Third call: invalid, unclamped value
 			expect( onChangeSpy ).toHaveBeenNthCalledWith( 3, '14', false );
 			// Fourth call: valid, clamped value
-			expect( onChangeSpy ).toHaveBeenNthCalledWith( 4, 10, true );
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 4, '10', true );
 		} );
 	} );
 
@@ -292,6 +292,24 @@ describe( 'NumberControl', () => {
 			expect( input ).toHaveValue( 867.5309 );
 		} );
 
+		it( 'should increment by step multiplied by spinFactor when spinFactor is provided', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<StatefulNumberControl
+					step={ 0.01 }
+					spinFactor={ 10 }
+					value={ 1.65 }
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowUp]' );
+
+			expect( input ).toHaveValue( 1.75 );
+		} );
+
 		it( 'should increment by shiftStep on key UP + shift press', async () => {
 			const user = userEvent.setup();
 
@@ -304,6 +322,18 @@ describe( 'NumberControl', () => {
 			expect( input ).toHaveValue( 20 );
 		} );
 
+		it( 'should increment by shiftStep multiplied by spinFactor on key UP + shift press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 5 } spinFactor={ 5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowUp]{/Shift}' );
+
+			expect( input ).toHaveValue( 50 );
+		} );
+
 		it( 'should increment by shiftStep while preserving the decimal value when `step` is “any”', async () => {
 			const user = userEvent.setup();
 
@@ -415,6 +445,24 @@ describe( 'NumberControl', () => {
 			expect( input ).toHaveValue( 867.5309 );
 		} );
 
+		it( 'should decrement by step multiplied by spinFactor when spinFactor is provided', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<StatefulNumberControl
+					step={ 0.01 }
+					spinFactor={ 10 }
+					value={ 1.65 }
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowDown]' );
+
+			expect( input ).toHaveValue( 1.55 );
+		} );
+
 		it( 'should decrement by shiftStep on key DOWN + shift press', async () => {
 			const user = userEvent.setup();
 
@@ -427,6 +475,18 @@ describe( 'NumberControl', () => {
 			expect( input ).toHaveValue( 0 );
 		} );
 
+		it( 'should decrement by shiftStep multiplied by spinFactor on key DOWN + shift press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 100 } spinFactor={ 5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowDown]{/Shift}' );
+
+			expect( input ).toHaveValue( 50 );
+		} );
+
 		it( 'should decrement by shiftStep while preserving the decimal value when `step` is “any”', async () => {
 			const user = userEvent.setup();
 
@@ -511,10 +571,12 @@ describe( 'NumberControl', () => {
 			[ 'up', '2', { value: '1' } ],
 			[ 'up', '12', { value: '10', step: '2' } ],
 			[ 'up', '10', { value: '10', max: 10 } ],
+			[ 'up', '10.1', { value: '10', step: '0.01', spinFactor: 10 } ],
 			[ 'down', '-1', {} ],
 			[ 'down', '1', { value: '2' } ],
 			[ 'down', '10', { value: '12', step: '2' } ],
 			[ 'down', '10', { value: '10', min: 10 } ],
+			[ 'down', '9.9', { value: '10', step: '0.01', spinFactor: 10 } ],
 		] )(
 			'should spin %s to %s when props = %o',
 			async ( direction, expectedValue, props ) => {

package/src/number-control/types.ts

@@ -74,6 +74,13 @@ export type NumberControlProps = Omit<
 	 * @default 1
 	 */
 	step?: InputControlProps[ 'step' ];
+	/**
+	 * Optional multiplication factor in spin changes. i.e. A spin changes
+	 * by `spinFactor * step` (if `step` is "any", 1 is used instead).
+	 *
+	 * @default 1
+	 */
+	spinFactor?: number;
 	/**
 	 * The `type` attribute of the `input` element.
 	 *

package/src/palette-edit/stories/{index.tsx → index.story.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof PaletteEdit > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof PaletteEdit > = ( args ) => {
+const Template: Story< typeof PaletteEdit > = ( args ) => {
 	const { colors, gradients, onChange, ...props } = args;
 	const [ value, setValue ] = useState( gradients || colors );
 

package/src/palette-edit/styles.js

@@ -58,7 +58,7 @@ export const PaletteItem = styled( View )`
 		border-top-color: transparent;
 	}
 	&.is-selected {
-		border-color: ${ COLORS.ui.theme };
+		border-color: ${ COLORS.theme.accent };
 	}
 `;
 
@@ -69,7 +69,7 @@ export const NameContainer = styled.div`
 	white-space: nowrap;
 	overflow: hidden;
 	${ PaletteItem }:hover & {
-		color: ${ COLORS.ui.theme };
+		color: ${ COLORS.theme.accent };
 	}
 `;
 
@@ -103,7 +103,7 @@ export const PaletteEditStyles = styled( View )`
 
 export const DoneButton = styled( Button )`
 	&& {
-		color: ${ COLORS.ui.theme };
+		color: ${ COLORS.theme.accent };
 	}
 `;
 

package/src/panel/stories/{index.tsx → index.story.tsx}

@@ -19,7 +19,6 @@ import { wordpress } from '@wordpress/icons';
 const meta: ComponentMeta< typeof Panel > = {
 	title: 'Components/Panel',
 	component: Panel,
-	subcomponents: { PanelRow, PanelBody },
 	argTypes: {
 		children: { control: { type: null } },
 	},

package/src/popover/index.tsx

@@ -3,6 +3,7 @@
  */
 import type { ForwardedRef, SyntheticEvent, RefCallback } from 'react';
 import classnames from 'classnames';
+import type { Middleware, MiddlewareArguments } from '@floating-ui/react-dom';
 import {
 	useFloating,
 	flip as flipMiddleware,
@@ -11,16 +12,11 @@ import {
 	arrow,
 	offset as offsetMiddleware,
 	size,
-	Middleware,
-	MiddlewareArguments,
 } from '@floating-ui/react-dom';
 // eslint-disable-next-line no-restricted-imports
-import {
-	motion,
-	useReducedMotion,
-	HTMLMotionProps,
-	MotionProps,
-} from 'framer-motion';
+import type { HTMLMotionProps, MotionProps } from 'framer-motion';
+// eslint-disable-next-line no-restricted-imports
+import { motion, useReducedMotion } from 'framer-motion';
 
 /**
  * WordPress dependencies

package/src/popover/overlay-middlewares.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { size, MiddlewareArguments } from '@floating-ui/react-dom';
+import type { MiddlewareArguments } from '@floating-ui/react-dom';
+import { size } from '@floating-ui/react-dom';
 
 export function overlayMiddlewares() {
 	return [

package/src/popover/stories/{index.tsx → index.story.tsx}

@@ -14,8 +14,8 @@ import { __unstableIframe as Iframe } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import Button from '../../button';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 import { Popover } from '..';
+import { PopoverInsideIframeRenderedInExternalSlot } from '../test/utils';
 import type { PopoverProps } from '../types';
 
 const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
@@ -249,51 +249,7 @@ DynamicHeight.args = {
 export const WithSlotOutsideIframe: ComponentStory< typeof Popover > = (
 	args
 ) => {
-	const anchorRef = useRef( null );
-	const slotName = 'popover-with-slot-outside-iframe';
-
-	return (
-		<SlotFillProvider>
-			<div>
-				{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-				<Popover.Slot name={ slotName } />
-				<Iframe
-					style={ {
-						width: '100%',
-						height: '400px',
-						border: '0',
-						outline: '1px solid purple',
-					} }
-				>
-					<div
-						style={ {
-							height: '200vh',
-							paddingTop: '10vh',
-						} }
-					>
-						<p
-							style={ {
-								padding: '8px',
-								background: 'salmon',
-								maxWidth: '200px',
-								marginTop: '100px',
-								marginLeft: 'auto',
-								marginRight: 'auto',
-							} }
-							ref={ anchorRef }
-						>
-							Popover&apos;s anchor
-						</p>
-						<Popover
-							{ ...args }
-							__unstableSlotName={ slotName }
-							anchorRef={ anchorRef }
-						/>
-					</div>
-				</Iframe>
-			</div>
-		</SlotFillProvider>
-	);
+	return <PopoverInsideIframeRenderedInExternalSlot { ...args } />;
 };
 WithSlotOutsideIframe.args = {
 	...Default.args,

package/src/popover/test/index.tsx

@@ -19,6 +19,7 @@ import {
 } from '../utils';
 import Popover from '..';
 import type { PopoverProps } from '../types';
+import { PopoverInsideIframeRenderedInExternalSlot } from './utils';
 
 type PositionToPlacementTuple = [
 	NonNullable< PopoverProps[ 'position' ] >,
@@ -175,6 +176,19 @@ describe( 'Popover', () => {
 		} );
 	} );
 
+	describe( 'Slot outside iframe', () => {
+		it( 'should support cross-document rendering', async () => {
+			render(
+				<PopoverInsideIframeRenderedInExternalSlot>
+					<span>content</span>
+				</PopoverInsideIframeRenderedInExternalSlot>
+			);
+			await waitFor( async () =>
+				expect( screen.getByText( 'content' ) ).toBeVisible()
+			);
+		} );
+	} );
+
 	describe( 'positionToPlacement', () => {
 		it.each( ALL_POSITIONS_TO_EXPECTED_PLACEMENTS )(
 			'converts `%s` to `%s`',

package/src/popover/test/utils/index.tsx

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { createPortal, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Popover from '../..';
+import { Provider as SlotFillProvider } from '../../../slot-fill';
+import type { WordPressComponentProps } from '../../../ui/context';
+
+const GenericIframe = ( {
+	children,
+	...props
+}: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
+	const [ containerNode, setContainerNode ] = useState< HTMLElement >();
+
+	return (
+		<iframe
+			{ ...props }
+			title="My Iframe"
+			srcDoc="<!doctype html><html><body></body></html>"
+			// Waiting for the load event ensures that this works in Firefox.
+			// See https://github.com/facebook/react/issues/22847#issuecomment-991394558
+			onLoad={ ( event ) => {
+				if ( event.currentTarget.contentDocument ) {
+					setContainerNode(
+						event.currentTarget.contentDocument.body
+					);
+				}
+			} }
+		>
+			{ containerNode && createPortal( children, containerNode ) }
+		</iframe>
+	);
+};
+
+export const PopoverInsideIframeRenderedInExternalSlot = (
+	props: React.ComponentProps< typeof Popover >
+) => {
+	const SLOT_NAME = 'my-slot';
+	const [ anchorRef, setAnchorRef ] = useState< HTMLParagraphElement | null >(
+		null
+	);
+
+	return (
+		<SlotFillProvider>
+			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+			<Popover.Slot name={ SLOT_NAME } />
+			<GenericIframe
+				style={ {
+					width: '100%',
+					height: '400px',
+					border: '0',
+					outline: '1px solid purple',
+				} }
+			>
+				<div
+					style={ {
+						height: '200vh',
+						paddingTop: '10vh',
+					} }
+				>
+					<p
+						style={ {
+							padding: '8px',
+							background: 'salmon',
+							maxWidth: '200px',
+							marginTop: '100px',
+							marginLeft: 'auto',
+							marginRight: 'auto',
+						} }
+						ref={ setAnchorRef }
+					>
+						Popover&apos;s anchor
+					</p>
+					<Popover
+						{ ...props }
+						__unstableSlotName={ SLOT_NAME }
+						anchor={ anchorRef }
+					/>
+				</div>
+			</GenericIframe>
+		</SlotFillProvider>
+	);
+};

package/src/private-apis.ts

@@ -23,6 +23,7 @@ import {
 	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
 } from './dropdown-menu-v2';
 import { ComponentsContext } from './ui/context/context-system-provider';
+import Theme from './theme';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -47,4 +48,5 @@ lock( privateApis, {
 	DropdownSubMenuV2,
 	DropdownSubMenuTriggerV2,
 	ProgressBar,
+	Theme,
 } );