@wordpress/components 31.0.1-next.76cff8c98.0 → 32.0.0

package/src/border-control/test/index.js

@@ -37,7 +37,6 @@ function createProps( customProps ) {
 			props.value = newValue;
 		} ),
 		value: defaultBorder,
-		__next40pxDefaultSize: true,
 		...customProps,
 	};
 	return props;
@@ -77,11 +76,15 @@ const getWidthInput = () => {
 	return screen.getByRole( 'spinbutton', { name: 'Border width' } );
 };
 
+function TestBorderControl( restProps ) {
+	return <BorderControl __next40pxDefaultSize { ...restProps } />;
+}
+
 describe( 'BorderControl', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render standard border control', () => {
 			const props = createProps();
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
@@ -102,7 +105,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should hide label', () => {
 			const props = createProps( { hideLabelFromVision: true } );
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 			const label = screen.getByText( props.label );
 
 			// As visually hidden labels are still included in the document
@@ -116,7 +119,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should render with slider', () => {
 			const props = createProps( { withSlider: true } );
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 
 			const slider = getSliderInput();
 			expect( slider ).toBeInTheDocument();
@@ -124,7 +127,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should render placeholder in UnitControl', () => {
 			const props = createProps( { placeholder: 'Mixed' } );
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 
 			const widthInput = getWidthInput();
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
@@ -133,7 +136,7 @@ describe( 'BorderControl', () => {
 		it( 'should render color and style popover', async () => {
 			const user = userEvent.setup();
 			const props = createProps();
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 
 			const customColorPicker = getButton( /Custom color picker/ );
@@ -160,7 +163,7 @@ describe( 'BorderControl', () => {
 		it( 'should not render style options when opted out of', async () => {
 			const user = userEvent.setup();
 			const props = createProps( { enableStyle: false } );
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 
 			const styleLabel = screen.queryByText( 'Style' );
@@ -179,7 +182,7 @@ describe( 'BorderControl', () => {
 		describe( 'with style selection enabled', () => {
 			it( 'should include both color and style in label', () => {
 				const props = createProps( { value: undefined } );
-				render( <BorderControl { ...props } /> );
+				render( <TestBorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText( 'Border color and style picker.' )
@@ -188,7 +191,7 @@ describe( 'BorderControl', () => {
 
 			it( 'should correctly describe named color selection', () => {
 				const props = createProps( { value: { color: '#72aee6' } } );
-				render( <BorderControl { ...props } /> );
+				render( <TestBorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -199,7 +202,7 @@ describe( 'BorderControl', () => {
 
 			it( 'should correctly describe custom color selection', () => {
 				const props = createProps( { value: { color: '#4b1d80' } } );
-				render( <BorderControl { ...props } /> );
+				render( <TestBorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -212,7 +215,7 @@ describe( 'BorderControl', () => {
 				const props = createProps( {
 					value: { color: '#72aee6', style: 'dotted' },
 				} );
-				render( <BorderControl { ...props } /> );
+				render( <TestBorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -225,7 +228,7 @@ describe( 'BorderControl', () => {
 				const props = createProps( {
 					value: { color: '#4b1d80', style: 'dashed' },
 				} );
-				render( <BorderControl { ...props } /> );
+				render( <TestBorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -241,7 +244,7 @@ describe( 'BorderControl', () => {
 					value: undefined,
 					enableStyle: false,
 				} );
-				render( <BorderControl { ...props } /> );
+				render( <TestBorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText( 'Border color picker.' )
@@ -253,7 +256,7 @@ describe( 'BorderControl', () => {
 					value: { color: '#72aee6' },
 					enableStyle: false,
 				} );
-				render( <BorderControl { ...props } /> );
+				render( <TestBorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -267,7 +270,7 @@ describe( 'BorderControl', () => {
 					value: { color: '#4b1d80' },
 					enableStyle: false,
 				} );
-				render( <BorderControl { ...props } /> );
+				render( <TestBorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -281,7 +284,7 @@ describe( 'BorderControl', () => {
 	describe( 'onChange handling', () => {
 		it( 'should update width with slider value', () => {
 			const props = createProps( { withSlider: true } );
-			const { rerender } = render( <BorderControl { ...props } /> );
+			const { rerender } = render( <TestBorderControl { ...props } /> );
 
 			const slider = getSliderInput();
 			// As per [1], it is not currently possible to reasonably
@@ -295,7 +298,7 @@ describe( 'BorderControl', () => {
 				width: '5px',
 			} );
 
-			rerender( <BorderControl { ...props } /> );
+			rerender( <TestBorderControl { ...props } /> );
 			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toEqual( '5' );
@@ -304,7 +307,7 @@ describe( 'BorderControl', () => {
 		it( 'should update color selection', async () => {
 			const user = userEvent.setup();
 			const props = createProps();
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getColorOption( 'Green' ) );
 
@@ -317,7 +320,7 @@ describe( 'BorderControl', () => {
 		it( 'should clear color selection when toggling swatch off', async () => {
 			const user = userEvent.setup();
 			const props = createProps();
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getColorOption( 'Blue' ) );
 
@@ -330,7 +333,7 @@ describe( 'BorderControl', () => {
 		it( 'should update style selection', async () => {
 			const user = userEvent.setup();
 			const props = createProps();
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getButton( 'Dashed' ) );
 
@@ -343,7 +346,7 @@ describe( 'BorderControl', () => {
 		it( 'should take no action when color and style popover is closed', async () => {
 			const user = userEvent.setup();
 			const props = createProps();
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.keyboard( 'Escape' );
 
@@ -353,7 +356,7 @@ describe( 'BorderControl', () => {
 		it( 'should reset color and style only when popover reset button clicked', async () => {
 			const user = userEvent.setup();
 			const props = createProps();
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getButton( 'Reset' ) );
 
@@ -367,9 +370,9 @@ describe( 'BorderControl', () => {
 		it( 'should sanitize border when width and color are undefined', async () => {
 			const user = userEvent.setup();
 			const props = createProps();
-			const { rerender } = render( <BorderControl { ...props } /> );
+			const { rerender } = render( <TestBorderControl { ...props } /> );
 			await user.clear( getWidthInput() );
-			rerender( <BorderControl { ...props } /> );
+			rerender( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getColorOption( 'Blue' ) );
 
@@ -381,9 +384,9 @@ describe( 'BorderControl', () => {
 			const props = createProps( {
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = render( <BorderControl { ...props } /> );
+			const { rerender } = render( <TestBorderControl { ...props } /> );
 			await user.clear( getWidthInput() );
-			rerender( <BorderControl { ...props } /> );
+			rerender( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getColorOption( 'Blue' ) );
 
@@ -397,7 +400,7 @@ describe( 'BorderControl', () => {
 		it( 'should clear color and set style to `none` when setting zero width', async () => {
 			const user = userEvent.setup();
 			const props = createProps();
-			render( <BorderControl { ...props } /> );
+			render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getColorOption( 'Green' ) );
 			await user.click( getButton( 'Dotted' ) );
@@ -416,12 +419,12 @@ describe( 'BorderControl', () => {
 		it( 'should reselect color and style selections when changing to non-zero width', async () => {
 			const user = userEvent.setup();
 			const props = createProps();
-			const { rerender } = render( <BorderControl { ...props } /> );
+			const { rerender } = render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getColorOption( 'Green' ) );
-			rerender( <BorderControl { ...props } /> );
+			rerender( <TestBorderControl { ...props } /> );
 			await user.click( getButton( 'Dotted' ) );
-			rerender( <BorderControl { ...props } /> );
+			rerender( <TestBorderControl { ...props } /> );
 			const widthInput = getWidthInput();
 			await user.type( widthInput, '0', {
 				initialSelectionStart: 0,
@@ -442,7 +445,7 @@ describe( 'BorderControl', () => {
 		it( 'should set a non-zero width when applying color to zero width border', async () => {
 			const user = userEvent.setup();
 			const props = createProps( { value: undefined } );
-			const { rerender } = render( <BorderControl { ...props } /> );
+			const { rerender } = render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getColorOption( 'Yellow' ) );
 
@@ -454,7 +457,7 @@ describe( 'BorderControl', () => {
 
 			await user.type( getWidthInput(), '0' );
 
-			rerender( <BorderControl { ...props } /> );
+			rerender( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getColorOption( 'Green' ) );
 
@@ -471,7 +474,7 @@ describe( 'BorderControl', () => {
 				value: undefined,
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = render( <BorderControl { ...props } /> );
+			const { rerender } = render( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getButton( 'Dashed' ) );
 
@@ -483,7 +486,7 @@ describe( 'BorderControl', () => {
 
 			await user.type( getWidthInput(), '0' );
 
-			rerender( <BorderControl { ...props } /> );
+			rerender( <TestBorderControl { ...props } /> );
 			await openPopover( user );
 			await user.click( getButton( 'Dotted' ) );
 

package/src/box-control/index.tsx

@@ -188,6 +188,8 @@ function BoxControl( {
 			</BaseControl.VisualLabel>
 			{ isLinked && (
 				<InputWrapper>
+					{ /* Disable reason: the parent component is handling the __next40pxDefaultSize prop */ }
+					{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
 					<InputControl side="all" { ...inputControlProps } />
 				</InputWrapper>
 			) }
@@ -203,6 +205,8 @@ function BoxControl( {
 			{ ! isLinked &&
 				splitOnAxis &&
 				[ 'vertical', 'horizontal' ].map( ( axis ) => (
+					// Disable reason: the parent component is handling the __next40pxDefaultSize prop
+					// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 					<InputControl
 						key={ axis }
 						side={ axis as 'horizontal' | 'vertical' }
@@ -212,6 +216,8 @@ function BoxControl( {
 			{ ! isLinked &&
 				! splitOnAxis &&
 				Array.from( sidesToRender ).map( ( axis ) => (
+					// Disable reason: the parent component is handling the __next40pxDefaultSize prop
+					// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 					<InputControl
 						key={ axis }
 						side={ axis }

package/src/box-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -31,7 +31,7 @@ const meta: Meta< typeof BoxControl > = {
 export default meta;
 
 const TemplateUncontrolled: StoryFn< typeof BoxControl > = ( props ) => {
-	return <BoxControl { ...props } />;
+	return <BoxControl __next40pxDefaultSize { ...props } />;
 };
 
 const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
@@ -39,6 +39,7 @@ const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
 
 	return (
 		<BoxControl
+			__next40pxDefaultSize
 			values={ values }
 			{ ...props }
 			onChange={ ( nextValue ) => {

package/src/button/deprecated.tsx

@@ -33,6 +33,8 @@ function UnforwardedIconButton(
 	} );
 
 	return (
+		// Disable reason: the parent component is taking care of the __next40pxDefaultSize prop.
+		// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 		<Button
 			{ ...props }
 			ref={ ref }

package/src/button/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn, Meta } from '@storybook/react-webpack5';
+import type { StoryFn, Meta } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -53,6 +53,7 @@ export const VariantStates: StoryFn< typeof Button > = (
 				{ variants.map( ( variant ) => (
 					<td key={ variant ?? 'undefined' } style={ { padding: 4 } }>
 						<Button
+							__next40pxDefaultSize
 							{ ...props }
 							variant={ variant }
 							{ ...buttonProps }
@@ -149,13 +150,16 @@ Icon.args = {
 export const Dashicons: StoryFn< typeof Button > = ( props ) => {
 	return (
 		<div style={ { display: 'flex', gap: 8 } }>
-			<Button { ...props } />
-			<Button { ...props }>Children</Button>
-			<Button { ...props } iconPosition="right">
+			<Button __next40pxDefaultSize { ...props } />
+			<Button __next40pxDefaultSize { ...props }>
+				Children
+			</Button>
+			<Button __next40pxDefaultSize { ...props } iconPosition="right">
 				Children (icon right)
 			</Button>
-			<Button { ...props } text="Text" />
+			<Button __next40pxDefaultSize { ...props } text="Text" />
 			<Button
+				__next40pxDefaultSize
 				{ ...props }
 				text="Text (icon right)"
 				iconPosition="right"

package/src/button/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import type { ReactNode } from 'react';
 
 /**
@@ -57,7 +57,7 @@ const meta: Meta< typeof Button > = {
 export default meta;
 
 const Template: StoryFn< typeof Button > = ( props ) => {
-	return <Button { ...props }></Button>;
+	return <Button __next40pxDefaultSize { ...props }></Button>;
 };
 
 export const Default = Template.bind( {} );
@@ -126,9 +126,13 @@ export const GroupedIcons = () => {
 
 	return (
 		<GroupContainer>
-			<Button icon={ formatBold } label="Bold" />
-			<Button icon={ formatItalic } label="Italic" />
-			<Button icon={ link } label="Link" />
+			<Button __next40pxDefaultSize icon={ formatBold } label="Bold" />
+			<Button
+				__next40pxDefaultSize
+				icon={ formatItalic }
+				label="Italic"
+			/>
+			<Button __next40pxDefaultSize icon={ link } label="Link" />
 		</GroupContainer>
 	);
 };

package/src/button/test/index.tsx

@@ -234,7 +234,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should add a disabled prop to the button', () => {
-			// eslint-disable-next-line no-restricted-syntax
 			render( <Button disabled /> );
 
 			expect( screen.getByRole( 'button' ) ).toBeDisabled();
@@ -522,7 +521,6 @@ describe( 'Button', () => {
 
 		it( 'should become a button again when disabled is supplied', () => {
 			// @ts-expect-error - a button should not have `href`
-			// eslint-disable-next-line no-restricted-syntax
 			render( <Button href="https://wordpress.org/" disabled /> );
 
 			expect( screen.getByRole( 'button' ) ).toBeVisible();
@@ -618,7 +616,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should not break when the legacy __experimentalIsFocusable prop is passed', () => {
-			// eslint-disable-next-line no-restricted-syntax
 			render( <Button disabled __experimentalIsFocusable /> );
 			const button = screen.getByRole( 'button' );
 
@@ -633,10 +630,8 @@ describe( 'Button', () => {
 			{ /* @ts-expect-error - `target` requires `href` */ }
 			<Button target="foo" />
 
-			{ /* eslint-disable no-restricted-syntax */ }
 			{ /* @ts-expect-error - `disabled` is only for buttons */ }
 			<Button href="foo" disabled />
-			{ /* eslint-enable no-restricted-syntax */ }
 
 			<Button href="foo" type="image/png" />
 			{ /* @ts-expect-error - if button, type must be submit/reset/button */ }

package/src/button-group/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * Internal dependencies
@@ -33,8 +33,10 @@ export const Default: StoryObj< typeof ButtonGroup > = {
 	args: {
 		children: (
 			<>
-				<Button variant="primary">Button 1</Button>
-				<Button>Button 2</Button>
+				<Button __next40pxDefaultSize variant="primary">
+					Button 1
+				</Button>
+				<Button __next40pxDefaultSize>Button 2</Button>
 			</>
 		),
 	},

package/src/calendar/stories/date-calendar.story.tsx

@@ -21,7 +21,7 @@ import {
 	ar,
 	sv,
 } from 'date-fns/locale';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/calendar/stories/date-range-calendar.story.tsx

@@ -21,7 +21,7 @@ import {
 	ar,
 	sv,
 } from 'date-fns/locale';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 /**
  * WordPress dependencies
  */

package/src/card/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * Internal dependencies
@@ -66,7 +66,9 @@ export const Default: StoryObj< typeof Card > = {
 				</CardMedia>
 				<CardFooter>
 					<Text>CardFooter</Text>
-					<Button variant="secondary">Action Button</Button>
+					<Button __next40pxDefaultSize variant="secondary">
+						Action Button
+					</Button>
 				</CardFooter>
 			</>
 		),

package/src/checkbox-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/circular-option-picker/circular-option-picker-option.tsx

@@ -31,6 +31,7 @@ function UnforwardedOptionAsButton(
 	const { isPressed, label, ...additionalProps } = props;
 	return (
 		<Button
+			__next40pxDefaultSize
 			{ ...additionalProps }
 			aria-pressed={ isPressed }
 			ref={ forwardedRef }
@@ -67,6 +68,7 @@ function UnforwardedOptionAsOption(
 		<Composite.Item
 			render={
 				<Button
+					__next40pxDefaultSize
 					{ ...additionalProps }
 					role="option"
 					aria-selected={ !! isSelected }
@@ -97,7 +99,6 @@ export function Option( {
 	const commonProps = {
 		id,
 		className: 'components-circular-option-picker__option',
-		__next40pxDefaultSize: true,
 		...additionalProps,
 	};
 

package/src/circular-option-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 /**
  * WordPress dependencies
  */

package/src/clipboard-button/index.tsx

@@ -65,6 +65,8 @@ export default function ClipboardButton( {
 	};
 
 	return (
+		// Disable reasons: the parent component takes care of the __next40pxDefaultSize prop.
+		// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 		<Button
 			{ ...buttonProps }
 			className={ classes }

package/src/clipboard-button/types.ts

@@ -8,4 +8,5 @@ export interface ClipboardButtonProps {
 	onCopy: () => void;
 	onFinishCopy?: () => void;
 	text: string;
+	__next40pxDefaultSize?: boolean;
 }

package/src/color-indicator/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/color-palette/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/color-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**

package/src/combobox-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -69,6 +69,7 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 	return (
 		<>
 			<ComboboxControl
+				__next40pxDefaultSize
 				{ ...args }
 				value={ value }
 				onChange={ ( ...changeArgs ) => {

package/src/composite/legacy/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/composite/legacy/stories/utils.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryContext } from '@storybook/react';
+import type { StoryContext } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/composite/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies