@wordpress/components 32.0.1-next.ba3aee3a2.0 → 32.0.2-next.v.0

package/build-types/validated-form-controls/components/stories/toggle-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAMhE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAuB5D,CAAC"}
+{"version":3,"file":"toggle-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAuB5D,CAAC"}

package/build-types/validated-form-controls/components/stories/toggle-group-control.story.d.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryObj, Meta } from '@storybook/react-webpack5';
+import type { StoryObj, Meta } from '@storybook/react-vite';
 import { ValidatedToggleGroupControl } from '../toggle-group-control';
 declare const meta: Meta<typeof ValidatedToggleGroupControl>;
 export default meta;

package/build-types/validated-form-controls/components/stories/toggle-group-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-group-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAMhE,OAAO,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAGtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,2BAA2B,CAUnD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,2BAA2B,CA4BjE,CAAC"}
+{"version":3,"file":"toggle-group-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-group-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAGtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,2BAA2B,CAUnD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,2BAA2B,CA4BjE,CAAC"}

package/build-types/view/stories/index.story.d.ts

@@ -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/build-types/view/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/view/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAY5B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,IAAI,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/view/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAE3D;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAY5B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,IAAI,CAAwB,CAAC"}

package/build-types/visually-hidden/stories/index.story.d.ts

@@ -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/build-types/visually-hidden/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CActC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,cAAc,CAanD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAE,OAAO,cAAc,CAW9D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAE,OAAO,cAAc,CAWpE,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAE3D;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CActC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,cAAc,CAanD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAE,OAAO,cAAc,CAW9D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAE,OAAO,cAAc,CAWpE,CAAC"}

package/build-types/z-stack/stories/index.story.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { ZStack } from '..';
 declare const meta: Meta<typeof ZStack>;
 export default meta;

package/build-types/z-stack/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAO/D,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAc9B,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,MAAM,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAO3D,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAc9B,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,MAAM,CAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.0.1-next.ba3aee3a2.0",
+	"version": "32.0.2-next.v.0+b8934fcf9",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -62,28 +62,30 @@
 		"@floating-ui/react-dom": "2.0.8",
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
+		"@types/react": "^18.3.27",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/base-styles": "^6.13.2-next.ba3aee3a2.0",
-		"@wordpress/compose": "^7.37.1-next.ba3aee3a2.0",
-		"@wordpress/date": "^5.37.2-next.ba3aee3a2.0",
-		"@wordpress/deprecated": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/dom": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/element": "^6.37.1-next.ba3aee3a2.0",
-		"@wordpress/escape-html": "^3.37.1-next.ba3aee3a2.0",
-		"@wordpress/hooks": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/html-entities": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/i18n": "^6.10.1-next.ba3aee3a2.0",
-		"@wordpress/icons": "^11.4.1-next.ba3aee3a2.0",
-		"@wordpress/is-shallow-equal": "^5.37.1-next.ba3aee3a2.0",
-		"@wordpress/keycodes": "^4.38.1-next.ba3aee3a2.0",
-		"@wordpress/primitives": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/private-apis": "^1.37.1-next.ba3aee3a2.0",
-		"@wordpress/rich-text": "^7.37.1-next.ba3aee3a2.0",
-		"@wordpress/warning": "^3.37.1-next.ba3aee3a2.0",
+		"@wordpress/a11y": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/base-styles": "^6.14.1-next.v.0+b8934fcf9",
+		"@wordpress/compose": "^7.38.1-next.v.0+b8934fcf9",
+		"@wordpress/date": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/deprecated": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/dom": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/element": "^6.38.1-next.v.0+b8934fcf9",
+		"@wordpress/escape-html": "^3.38.1-next.v.0+b8934fcf9",
+		"@wordpress/hooks": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/html-entities": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/i18n": "^6.11.1-next.v.0+b8934fcf9",
+		"@wordpress/icons": "^11.5.1-next.v.0+b8934fcf9",
+		"@wordpress/is-shallow-equal": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/keycodes": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/primitives": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/private-apis": "^1.38.1-next.v.0+b8934fcf9",
+		"@wordpress/rich-text": "^7.38.1-next.v.0+b8934fcf9",
+		"@wordpress/warning": "^3.38.1-next.v.0+b8934fcf9",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
+		"csstype": "^3.2.3",
 		"date-fns": "^3.6.0",
 		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
@@ -94,20 +96,20 @@
 		"memize": "^2.1.0",
 		"path-to-regexp": "^6.2.1",
 		"re-resizable": "^6.4.0",
-		"react-colorful": "^5.3.1",
+		"react-colorful": "^5.6.1",
 		"react-day-picker": "^9.7.0",
 		"remove-accents": "^0.5.0",
 		"uuid": "^9.0.1"
 	},
 	"devDependencies": {
 		"@ariakit/test": "^0.4.7",
-		"@storybook/addon-docs": "^9.1.17",
+		"@storybook/addon-docs": "^10.1.11",
+		"@storybook/react-vite": "^10.1.11",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.37.1-next.ba3aee3a2.0",
-		"csstype": "^3.2.3",
+		"@wordpress/jest-console": "^8.38.1-next.v.0+b8934fcf9",
 		"snapshot-diff": "^0.10.0",
-		"storybook": "^9.1.17",
+		"storybook": "^10.1.11",
 		"timezone-mock": "^1.3.6"
 	},
 	"peerDependencies": {
@@ -117,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "67d2e486fcd40c753591cf911ca0659132f519ca"
+	"gitHead": "17529010285784fd2e735348a28391c79de87c88"
 }

package/src/alignment-matrix-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';
 
 /**

package/src/angle-picker-control/index.tsx

@@ -104,5 +104,6 @@ function UnforwardedAnglePickerControl(
  * ```
  */
 export const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );
+AnglePickerControl.displayName = 'AnglePickerControl';
 
 export default AnglePickerControl;

package/src/angle-picker-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';
 
 /**

package/src/animate/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/badge/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

package/src/base-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';
 
 /**
  * Internal dependencies
@@ -64,7 +64,9 @@ export const WithVisualLabel: StoryFn< typeof BaseControl > = ( props ) => {
 		<BaseControl { ...props }>
 			<BaseControl.VisualLabel>Visual label</BaseControl.VisualLabel>
 			<div>
-				<Button variant="secondary">Select an author</Button>
+				<Button __next40pxDefaultSize variant="secondary">
+					Select an author
+				</Button>
 			</div>
 		</BaseControl>
 	);

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -75,6 +75,9 @@ const BorderBoxControlSplitControls = (
 	return (
 		<Grid { ...otherProps } ref={ mergedRef } gap={ 3 }>
 			<BorderBoxControlVisualizer value={ value } size={ size } />
+
+			{ /* Disable reason: BorderControl's size is being controlled via the `size` prop by the parent component  */ }
+			{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
 			<BorderControl
 				className={ centeredClassName }
 				hideLabelFromVision
@@ -84,6 +87,8 @@ const BorderBoxControlSplitControls = (
 				value={ value?.top }
 				{ ...sharedBorderControlProps }
 			/>
+			{ /* Disable reason: BorderControl's size is being controlled via the `size` prop by the parent component  */ }
+			{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
 			<BorderControl
 				hideLabelFromVision
 				label={ __( 'Left border' ) }
@@ -92,6 +97,8 @@ const BorderBoxControlSplitControls = (
 				value={ value?.left }
 				{ ...sharedBorderControlProps }
 			/>
+			{ /* Disable reason: BorderControl's size is being controlled via the `size` prop by the parent component  */ }
+			{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
 			<BorderControl
 				className={ rightAlignedClassName }
 				hideLabelFromVision
@@ -101,6 +108,8 @@ const BorderBoxControlSplitControls = (
 				value={ value?.right }
 				{ ...sharedBorderControlProps }
 			/>
+			{ /* Disable reason: BorderControl's size is being controlled via the `size` prop by the parent component  */ }
+			{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
 			<BorderControl
 				className={ centeredClassName }
 				hideLabelFromVision

package/src/border-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 type { ComponentProps } from 'react';
 
 /**
@@ -53,6 +53,7 @@ const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 	return (
 		<>
 			<BorderBoxControl
+				__next40pxDefaultSize
 				{ ...otherProps }
 				onChange={ onChangeMerged }
 				value={ borders }
@@ -71,6 +72,7 @@ const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 				convenience.
 			</p>
 			<Button
+				__next40pxDefaultSize
 				variant="primary"
 				onClick={ () => onChangeMerged( undefined ) }
 			>

package/src/border-box-control/test/index.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import type { ComponentProps } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -44,16 +45,23 @@ const props = {
 		props.value = newValue;
 	} ),
 	value: undefined,
-	__next40pxDefaultSize: true,
 };
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 const colorPickerRegex = /Border color picker/;
 
+function TestBorderBoxControl(
+	restProps: ComponentProps< typeof BorderBoxControl >
+) {
+	return (
+		<BorderBoxControl __next40pxDefaultSize { ...props } { ...restProps } />
+	);
+}
+
 describe( 'BorderBoxControl', () => {
 	describe( 'Linked view rendering', () => {
 		it( 'should render correctly when no value provided', () => {
-			render( <BorderBoxControl { ...props } /> );
+			render( <TestBorderBoxControl { ...props } /> );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
@@ -78,7 +86,7 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should hide label', () => {
-			render( <BorderBoxControl { ...props } hideLabelFromVision /> );
+			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
 
 			const label = screen.getByText( props.label );
 
@@ -92,7 +100,9 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should show correct width value when flat border value provided', () => {
-			render( <BorderBoxControl { ...props } value={ defaultBorder } /> );
+			render(
+				<TestBorderBoxControl { ...props } value={ defaultBorder } />
+			);
 
 			const widthInput = screen.getByRole( 'spinbutton', {
 				name: 'Border width',
@@ -103,7 +113,7 @@ describe( 'BorderBoxControl', () => {
 
 		it( 'should show correct width value when consistent split borders provided', () => {
 			render(
-				<BorderBoxControl { ...props } value={ defaultBorders } />
+				<TestBorderBoxControl { ...props } value={ defaultBorders } />
 			);
 
 			const widthInput = screen.getByRole( 'spinbutton', {
@@ -116,7 +126,9 @@ describe( 'BorderBoxControl', () => {
 		it( 'should render placeholder and omit unit select when border values are mixed', async () => {
 			const user = userEvent.setup();
 
-			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
+			render(
+				<TestBorderBoxControl { ...props } value={ mixedBorders } />
+			);
 
 			// There are 4 inputs when in unlinked mode (top/right/bottom/left)
 			expect(
@@ -155,7 +167,7 @@ describe( 'BorderBoxControl', () => {
 
 			// Render control with mixed border values but consistent widths.
 			render(
-				<BorderBoxControl
+				<TestBorderBoxControl
 					{ ...props }
 					value={ {
 						top: { color: 'red', width: '5px', style: 'solid' },
@@ -193,7 +205,9 @@ describe( 'BorderBoxControl', () => {
 		it( 'should omit style options when requested', async () => {
 			const user = userEvent.setup();
 
-			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
+			render(
+				<TestBorderBoxControl { ...props } enableStyle={ false } />
+			);
 
 			const colorButton = screen.getByLabelText( colorPickerRegex );
 			await user.click( colorButton );
@@ -220,7 +234,9 @@ describe( 'BorderBoxControl', () => {
 
 	describe( 'Split view rendering', () => {
 		it( 'should render split view by default when mixed values provided', () => {
-			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
+			render(
+				<TestBorderBoxControl { ...props } value={ mixedBorders } />
+			);
 
 			const colorButtons = screen.getAllByLabelText( toggleLabelRegex );
 			const widthInputs = screen.getAllByRole( 'spinbutton', {
@@ -242,7 +258,9 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should render correct width values in appropriate inputs', () => {
-			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
+			render(
+				<TestBorderBoxControl { ...props } value={ mixedBorders } />
+			);
 
 			const widthInputs = screen.getAllByRole( 'spinbutton', {
 				name: 'Border width',
@@ -258,7 +276,7 @@ describe( 'BorderBoxControl', () => {
 			const user = userEvent.setup();
 
 			render(
-				<BorderBoxControl { ...props } value={ defaultBorders } />
+				<TestBorderBoxControl { ...props } value={ defaultBorders } />
 			);
 
 			await user.click(
@@ -283,7 +301,7 @@ describe( 'BorderBoxControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<BorderBoxControl { ...props } enableStyle={ false } />
+					<TestBorderBoxControl { ...props } enableStyle={ false } />
 				);
 
 				await user.click(
@@ -318,7 +336,10 @@ describe( 'BorderBoxControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<BorderBoxControl { ...props } value={ { width: '1px' } } />
+					<TestBorderBoxControl
+						{ ...props }
+						value={ { width: '1px' } }
+					/>
 				);
 
 				await user.clear(
@@ -332,7 +353,10 @@ describe( 'BorderBoxControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<BorderBoxControl { ...props } value={ defaultBorder } />
+					<TestBorderBoxControl
+						{ ...props }
+						value={ defaultBorder }
+					/>
 				);
 
 				const widthInput = screen.getByRole( 'spinbutton', {
@@ -351,7 +375,7 @@ describe( 'BorderBoxControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<BorderBoxControl
+					<TestBorderBoxControl
 						{ ...props }
 						value={ {
 							top: { color: '#72aee6' },
@@ -384,7 +408,10 @@ describe( 'BorderBoxControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<BorderBoxControl { ...props } value={ defaultBorders } />
+					<TestBorderBoxControl
+						{ ...props }
+						value={ defaultBorders }
+					/>
 				);
 
 				const widthInput = screen.getByRole( 'spinbutton', {
@@ -403,7 +430,7 @@ describe( 'BorderBoxControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<BorderBoxControl
+					<TestBorderBoxControl
 						{ ...props }
 						value={ {
 							top: { width: '1px' },
@@ -425,7 +452,7 @@ describe( 'BorderBoxControl', () => {
 				const user = userEvent.setup();
 
 				render(
-					<BorderBoxControl
+					<TestBorderBoxControl
 						{ ...props }
 						value={ {
 							top: { ...defaultBorder, width: '1px' },
@@ -464,7 +491,9 @@ describe( 'BorderBoxControl', () => {
 					left: { ...defaultBorder, width: '4px' },
 				};
 
-				render( <BorderBoxControl { ...props } value={ borders } /> );
+				render(
+					<TestBorderBoxControl { ...props } value={ borders } />
+				);
 
 				const widthInput = screen.getAllByRole( 'spinbutton', {
 					name: 'Border width',
@@ -488,7 +517,9 @@ describe( 'BorderBoxControl', () => {
 					left: { ...defaultBorder, width: '1px' },
 				};
 
-				render( <BorderBoxControl { ...props } value={ borders } /> );
+				render(
+					<TestBorderBoxControl { ...props } value={ borders } />
+				);
 
 				const widthInput = screen.getAllByRole( 'spinbutton', {
 					name: 'Border width',

package/src/border-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 type { ComponentProps } from 'react';
 
 /**
@@ -82,6 +82,7 @@ const Template: StoryFn< typeof BorderControl > = ( {
 
 	return (
 		<BorderControl
+			__next40pxDefaultSize
 			onChange={ onChangeMerged }
 			value={ border }
 			{ ...props }