@wordpress/components 36.1.0 → 37.0.0

package/build-types/view/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEd,CAAC;eAEW,IAAI"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":"AAiCA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;IAlChB;;;;;;OAMG;UACG,OAAO;;;;IAPb;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;CA8BD,CAAC;eAEW,IAAI"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "36.1.0",
+	"version": "37.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -50,7 +50,7 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@ariakit/react": "^0.4.29",
+		"@ariakit/react": "^0.4.32",
 		"@date-fns/utc": "^2.1.1",
 		"@emotion/cache": "^11.14.0",
 		"@emotion/css": "^11.13.5",
@@ -62,26 +62,26 @@
 		"@types/gradient-parser": "^1.1.0",
 		"@types/highlight-words-core": "^1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.50.0",
-		"@wordpress/base-styles": "^10.2.0",
-		"@wordpress/compose": "^8.3.0",
-		"@wordpress/date": "^5.50.0",
-		"@wordpress/deprecated": "^4.50.0",
-		"@wordpress/dom": "^4.50.0",
-		"@wordpress/element": "^8.2.0",
-		"@wordpress/escape-html": "^3.50.0",
-		"@wordpress/hooks": "^4.50.0",
-		"@wordpress/html-entities": "^4.50.0",
-		"@wordpress/i18n": "^6.23.0",
-		"@wordpress/icons": "^15.1.0",
-		"@wordpress/is-shallow-equal": "^5.50.0",
-		"@wordpress/keycodes": "^4.50.0",
-		"@wordpress/primitives": "^4.50.0",
-		"@wordpress/private-apis": "^1.50.0",
-		"@wordpress/rich-text": "^7.50.0",
-		"@wordpress/style-runtime": "^0.6.0",
-		"@wordpress/ui": "^0.17.0",
-		"@wordpress/warning": "^3.50.0",
+		"@wordpress/a11y": "^4.51.0",
+		"@wordpress/base-styles": "^11.0.0",
+		"@wordpress/compose": "^8.4.0",
+		"@wordpress/date": "^5.51.0",
+		"@wordpress/deprecated": "^4.51.0",
+		"@wordpress/dom": "^4.51.0",
+		"@wordpress/element": "^8.3.0",
+		"@wordpress/escape-html": "^3.51.0",
+		"@wordpress/hooks": "^4.51.0",
+		"@wordpress/html-entities": "^4.51.0",
+		"@wordpress/i18n": "^6.24.0",
+		"@wordpress/icons": "^15.2.0",
+		"@wordpress/is-shallow-equal": "^5.51.0",
+		"@wordpress/keycodes": "^4.51.0",
+		"@wordpress/primitives": "^4.51.0",
+		"@wordpress/private-apis": "^1.51.0",
+		"@wordpress/rich-text": "^7.51.0",
+		"@wordpress/style-runtime": "^0.7.0",
+		"@wordpress/ui": "^0.18.0",
+		"@wordpress/warning": "^3.51.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -111,16 +111,16 @@
 		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^29.5.14",
 		"@types/react-dom": "^18.3.1",
-		"@wordpress/jest-console": "^8.50.0",
+		"@wordpress/jest-console": "^8.51.0",
 		"@wordpress/stylelint-tools": "file:../../tools/stylelint",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.4.3",
 		"timezone-mock": "^1.3.6"
 	},
 	"peerDependencies": {
-		"@types/react": "^18.3.27",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"@types/react": "^18 || ^19",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
@@ -130,5 +130,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
+	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
 }

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

@@ -59,7 +59,6 @@ function UnforwardedAnglePickerControl(
 		<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>
 			<FlexBlock>
 				<NumberControl
-					__next40pxDefaultSize
 					label={ label }
 					className="components-angle-picker-control__input-field"
 					max={ 360 }

package/src/autocomplete/index.tsx

@@ -8,18 +8,14 @@ import {
 	useReducer,
 	useRef,
 } from '@wordpress/element';
-import {
-	useInstanceId,
-	useMergeRefs,
-	useRefEffect,
-	privateApis as composePrivateApis,
-} from '@wordpress/compose';
+import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
 import {
 	create,
 	slice,
 	insert,
 	isCollapsed,
 	getTextContent,
+	privateApis as richTextPrivateApis,
 } from '@wordpress/rich-text';
 import { speak } from '@wordpress/a11y';
 import { isAppleOS } from '@wordpress/keycodes';
@@ -43,7 +39,7 @@ import type {
 import getNodeText from '../utils/get-node-text';
 import { unlock } from '../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
@@ -409,7 +405,7 @@ export function useAutocompleteProps( options: UseAutocompleteProps ) {
 			// fire at bubble phase and gate on `event.defaultPrevented`,
 			// so firing in capture lets us preventDefault first when the
 			// popover is active.
-			return subscribeDelegatedListener(
+			return subscribeOwnedListener(
 				element,
 				'keydown',
 				_onKeyDown,

package/src/autocomplete/style.scss

@@ -12,6 +12,7 @@
 	min-height: $button-size;
 	text-align: left;
 	width: 100%;
+	font-weight: var(--wpds-typography-font-weight-default);
 
 	&:focus:not(:disabled) {
 		@include block-toolbar-button-style__focus();

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

@@ -17,7 +17,7 @@ const meta: Meta< typeof Badge > = {
 		componentStatus: {
 			status: 'use-with-caution',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `Badge` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`Badge`](?path=/docs/design-system-components-badge--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };

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

@@ -28,7 +28,7 @@ const meta: Meta< typeof BaseControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `Field` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`Field`](?path=/docs/design-system-components-form-primitives-field--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };

package/src/border-box-control/border-box-control/README.md

@@ -47,7 +47,6 @@ const MyBorderBoxControl = () => {
 
 	return (
 		<BorderBoxControl
-			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Borders' ) }
 			onChange={ onChange }
@@ -137,14 +136,6 @@ The space between the popover and the control wrapper.
 
 -   Required: No
 
-### `size`: `string`
-
-Size of the control.
-
--   Required: No
--   Default: `default`
--   Allowed values: `default`, `__unstable-large`
-
 ### `value`: `Object`
 
 An object representing the current border configuration.
@@ -166,10 +157,3 @@ const splitBorders = {
 ```
 
 -   Required: No
-
-### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Required: No
--   Default: `false`

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

@@ -59,7 +59,6 @@ const UnconnectedBorderBoxControl = (
 		onSplitChange,
 		popoverPlacement,
 		popoverOffset,
-		size,
 		splitValue,
 		toggleLinked,
 		wrapperClassName,
@@ -112,14 +111,10 @@ const UnconnectedBorderBoxControl = (
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
 						withSlider
-						width={
-							size === '__unstable-large' ? '116px' : '110px'
-						}
+						width="116px"
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						__shouldNotWarnDeprecated36pxSize
-						size={ size }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -134,13 +129,11 @@ const UnconnectedBorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						size={ size }
 					/>
 				) }
 				<BorderBoxControlLinkedButton
 					onClick={ toggleLinked }
 					isLinked={ isLinked }
-					size={ size }
 				/>
 			</View>
 		</View>
@@ -176,7 +169,6 @@ const UnconnectedBorderBoxControl = (
  *
  * 	return (
  * 		<BorderBoxControl
- * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Borders' ) }
  * 			onChange={ onChange }

package/src/border-box-control/border-box-control/hook.ts

@@ -19,7 +19,6 @@ import {
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
-import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
@@ -33,22 +32,14 @@ export function useBorderBoxControl(
 		onChange,
 		enableAlpha = false,
 		enableStyle = true,
-		size = 'default',
 		value,
 		__experimentalIsRenderedInSidebar = false,
-		__next40pxDefaultSize,
+		// Deprecated props, no longer used.
+		size: _size,
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'BorderBoxControl',
-		__next40pxDefaultSize,
-		size,
-	} );
-
-	const computedSize =
-		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
-
 	const mixedBorders = hasMixedBorders( value );
 	const splitBorders = hasSplitBorders( value );
 
@@ -144,7 +135,6 @@ export function useBorderBoxControl(
 		onSplitChange,
 		toggleLinked,
 		linkedValue,
-		size: computedSize,
 		splitValue,
 		wrapperClassName,
 		__experimentalIsRenderedInSidebar,

package/src/border-box-control/border-box-control-linked-button/hook.ts

@@ -16,17 +16,16 @@ import type { LinkedButtonProps } from '../types';
 export function useBorderBoxControlLinkedButton(
 	props: WordPressComponentProps< LinkedButtonProps, 'button' >
 ) {
-	const {
-		className,
-		size = 'default',
-		...otherProps
-	} = useContextSystem( props, 'BorderBoxControlLinkedButton' );
+	const { className, ...otherProps } = useContextSystem(
+		props,
+		'BorderBoxControlLinkedButton'
+	);
 
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlLinkedButton( size ), className );
-	}, [ className, cx, size ] );
+		return cx( styles.borderBoxControlLinkedButton, className );
+	}, [ className, cx ] );
 
 	return { ...otherProps, className: classes };
 }

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

@@ -32,7 +32,6 @@ const BorderBoxControlSplitControls = (
 		popoverPlacement,
 		popoverOffset,
 		rightAlignedClassName,
-		size = 'default',
 		value,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
@@ -66,18 +65,14 @@ const BorderBoxControlSplitControls = (
 		enableStyle,
 		isCompact: true,
 		__experimentalIsRenderedInSidebar,
-		size,
-		__shouldNotWarnDeprecated36pxSize: true,
 	};
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
 	return (
 		<Grid { ...otherProps } ref={ mergedRef } gap={ 3 }>
-			<BorderBoxControlVisualizer value={ value } size={ size } />
+			<BorderBoxControlVisualizer value={ value } />
 
-			{ /* 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
@@ -87,8 +82,6 @@ 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' ) }
@@ -97,8 +90,6 @@ 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
@@ -108,8 +99,6 @@ 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/border-box-control-split-controls/hook.ts

@@ -21,7 +21,6 @@ export function useBorderBoxControlSplitControls(
 		colors = [],
 		enableAlpha = false,
 		enableStyle = true,
-		size = 'default',
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
@@ -29,8 +28,8 @@ export function useBorderBoxControlSplitControls(
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlSplitControls( size ), className );
-	}, [ cx, className, size ] );
+		return cx( styles.borderBoxControlSplitControls, className );
+	}, [ cx, className ] );
 
 	const centeredClassName = useMemo( () => {
 		return cx( styles.centeredBorderControl, className );
@@ -48,7 +47,6 @@ export function useBorderBoxControlSplitControls(
 		enableAlpha,
 		enableStyle,
 		rightAlignedClassName,
-		size,
 		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-box-control/border-box-control-visualizer/hook.ts

@@ -16,21 +16,16 @@ import type { VisualizerProps } from '../types';
 export function useBorderBoxControlVisualizer(
 	props: WordPressComponentProps< VisualizerProps, 'div' >
 ) {
-	const {
-		className,
-		value,
-		size = 'default',
-		...otherProps
-	} = useContextSystem( props, 'BorderBoxControlVisualizer' );
+	const { className, value, ...otherProps } = useContextSystem(
+		props,
+		'BorderBoxControlVisualizer'
+	);
 
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx(
-			styles.borderBoxControlVisualizer( value, size ),
-			className
-		);
-	}, [ cx, className, value, size ] );
+		return cx( styles.borderBoxControlVisualizer( value ), className );
+	}, [ cx, className, value ] );
 
 	return { ...otherProps, className: classes, value };
 }

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

@@ -57,7 +57,6 @@ const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 	return (
 		<>
 			<BorderBoxControl
-				__next40pxDefaultSize
 				{ ...otherProps }
 				onChange={ onChangeMerged }
 				value={ borders }
@@ -90,5 +89,4 @@ Default.args = {
 	colors,
 	label: 'Borders',
 	enableStyle: true,
-	__next40pxDefaultSize: true,
 };

package/src/border-box-control/styles.ts

@@ -13,25 +13,25 @@ import type { Borders } from './types';
 
 export const borderBoxControl = css``;
 
+// '&&' outranks BorderControl's base 'margin: 0' to keep the 24px unlink
+// button gutter, which View no longer preserves via className (#79443).
 export const linkedBorderControl = () => css`
-	flex: 1;
-	${ rtl( { marginRight: '24px' } )() }
+	&& {
+		flex: 1;
+		${ rtl( { marginRight: '24px' } )() }
+	}
 `;
 
 export const wrapper = css`
 	position: relative;
 `;
 
-export const borderBoxControlLinkedButton = (
-	size?: 'default' | '__unstable-large'
-) => {
-	return css`
-		position: absolute;
-		top: ${ size === '__unstable-large' ? '8px' : '3px' };
-		${ rtl( { right: 0 } )() }
-		line-height: 0;
-	`;
-};
+export const borderBoxControlLinkedButton = css`
+	position: absolute;
+	top: 8px;
+	${ rtl( { right: 0 } )() }
+	line-height: 0;
+`;
 
 const borderBoxStyleWithFallback = ( border?: Border ) => {
 	const {
@@ -48,33 +48,25 @@ const borderBoxStyleWithFallback = ( border?: Border ) => {
 	return `${ color } ${ borderStyle } ${ clampedWidth }`;
 };
 
-export const borderBoxControlVisualizer = (
-	borders?: Borders,
-	size?: 'default' | '__unstable-large'
-) => {
-	return css`
-		position: absolute;
-		top: ${ size === '__unstable-large' ? '20px' : '15px' };
-		right: ${ size === '__unstable-large' ? '39px' : '29px' };
-		bottom: ${ size === '__unstable-large' ? '20px' : '15px' };
-		left: ${ size === '__unstable-large' ? '39px' : '29px' };
-		border-top: ${ borderBoxStyleWithFallback( borders?.top ) };
-		border-bottom: ${ borderBoxStyleWithFallback( borders?.bottom ) };
-		${ rtl( {
-			borderLeft: borderBoxStyleWithFallback( borders?.left ),
-		} )() }
-		${ rtl( {
-			borderRight: borderBoxStyleWithFallback( borders?.right ),
-		} )() }
-	`;
-};
+export const borderBoxControlVisualizer = ( borders?: Borders ) => css`
+	position: absolute;
+	top: 20px;
+	right: 39px;
+	bottom: 20px;
+	left: 39px;
+	border-top: ${ borderBoxStyleWithFallback( borders?.top ) };
+	border-bottom: ${ borderBoxStyleWithFallback( borders?.bottom ) };
+	${ rtl( {
+		borderLeft: borderBoxStyleWithFallback( borders?.left ),
+	} )() }
+	${ rtl( {
+		borderRight: borderBoxStyleWithFallback( borders?.right ),
+	} )() }
+`;
 
-export const borderBoxControlSplitControls = (
-	size?: 'default' | '__unstable-large'
-) => css`
+export const borderBoxControlSplitControls = css`
 	position: relative;
 	flex: 1;
-	width: ${ size === '__unstable-large' ? undefined : '80%' };
 `;
 
 export const centeredBorderControl = css`

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

@@ -53,9 +53,7 @@ const colorPickerRegex = /Border color picker/;
 function TestBorderBoxControl(
 	restProps: ComponentProps< typeof BorderBoxControl >
 ) {
-	return (
-		<BorderBoxControl __next40pxDefaultSize { ...props } { ...restProps } />
-	);
+	return <BorderBoxControl { ...props } { ...restProps } />;
 }
 
 describe( 'BorderBoxControl', () => {

package/src/border-box-control/types.ts

@@ -22,7 +22,7 @@ export type BorderSide = keyof Borders;
 
 export type BorderBoxControlProps = ColorProps &
 	LabelProps &
-	Pick< BorderControlProps, 'enableStyle' | 'size' > & {
+	Pick< BorderControlProps, 'enableStyle' > & {
 		/**
 		 * A callback function invoked when any border value is changed. The value
 		 * received may be a "flat" border object, one that has properties defining
@@ -45,15 +45,23 @@ export type BorderBoxControlProps = ColorProps &
 		 * properties but for each side; `top`, `right`, `bottom`, and `left`.
 		 */
 		value: AnyBorder;
+		/**
+		 * Size of the control.
+		 *
+		 * @deprecated This prop no longer has any effect.
+		 * @ignore
+		 */
+		size?: 'default' | '__unstable-large';
 		/**
 		 * Start opting into the larger default height that will become the default size in a future version.
 		 *
-		 * @default false
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+		 * @ignore
 		 */
 		__next40pxDefaultSize?: boolean;
 	};
 
-export type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {
+export type LinkedButtonProps = {
 	/**
 	 * This prop allows the `LinkedButton` to reflect whether the parent
 	 * `BorderBoxControl` is currently displaying "linked" or "unlinked"
@@ -68,7 +76,7 @@ export type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {
 	onClick: () => void;
 };
 
-export type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {
+export type VisualizerProps = {
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border
@@ -78,7 +86,7 @@ export type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {
 };
 
 export type SplitControlsProps = ColorProps &
-	Pick< BorderBoxControlProps, 'enableStyle' | 'size' > & {
+	Pick< BorderBoxControlProps, 'enableStyle' > & {
 		/**
 		 * A callback that is invoked whenever an individual side's border has
 		 * changed.

package/src/border-control/border-control/README.md

@@ -30,7 +30,6 @@ const MyBorderControl = () => {
 
 	return (
 		<BorderControl
-			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Border' ) }
 			onChange={ setBorder }
@@ -126,13 +125,6 @@ new border value.
 -   Required: No
 -   Default: `true`
 
-### `size`: `string`
-
-Size of the control.
-
--   Required: No
--   Default: `default`
--   Allowed values: `default`, `__unstable-large`
 
 ### `value`: `Object`
 
@@ -164,10 +156,3 @@ Flags whether this `BorderControl` should also render a `RangeControl` for
 additional control over a border's width.
 
 -   Required: No
-
-### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Required: No
--   Default: `false`