@wordpress/components 28.13.1-next.082ed6819.0 → 29.0.0

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

@@ -21,7 +21,7 @@ const meta: Meta< typeof TextControl > = {
 		help: { control: { type: 'text' } },
 		label: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: {

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

@@ -21,7 +21,7 @@ const meta: Meta< typeof TextareaControl > = {
 		onChange: { action: 'onChange' },
 		label: { control: { type: 'text' } },
 		help: { control: { type: 'text' } },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: {

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

@@ -37,7 +37,7 @@ export const Default = Template.bind( {} );
 Default.args = {};
 
 export const Nested: StoryFn< typeof Theme > = ( args ) => (
-	<Theme accent="tomato">
+	<Theme accent="crimson">
 		<Button variant="primary">Outer theme (hardcoded)</Button>
 
 		<Theme { ...args }>

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

@@ -18,7 +18,7 @@ const meta: Meta< typeof ToggleControl > = {
 	id: 'components-togglecontrol',
 	component: ToggleControl,
 	argTypes: {
-		checked: { control: { type: null } },
+		checked: { control: false },
 		help: { control: { type: 'text' } },
 		label: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },

package/src/toggle-group-control/stories/index.story.tsx

@@ -32,7 +32,7 @@ const meta: Meta< typeof ToggleGroupControl > = {
 	argTypes: {
 		help: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -72,7 +72,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -134,7 +134,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -158,12 +158,12 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -183,7 +183,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-12:active {
@@ -211,7 +211,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -235,7 +235,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -259,7 +259,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-17:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 <div>
@@ -437,7 +437,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -499,7 +499,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -542,7 +542,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-13 {
@@ -706,7 +706,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -768,7 +768,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -792,12 +792,12 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
 }
 
 @media not ( prefers-reduced-motion ) {
@@ -817,7 +817,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-12:active {
@@ -845,7 +845,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -869,7 +869,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 32px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -893,7 +893,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-17:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 <div>
@@ -1065,7 +1065,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   content: '';
   position: absolute;
   pointer-events: none;
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   outline: 2px solid transparent;
   outline-offset: -3px;
   --antialiasing-factor: 100;
@@ -1127,7 +1127,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: #757575;
+  color: var(--wp-components-color-gray-700, #757575);
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -1170,7 +1170,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-12:active {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
 }
 
 .emotion-13 {

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -39,7 +39,7 @@ export const toggleGroupControl = ( {
 		content: '';
 		position: absolute;
 		pointer-events: none;
-		background: ${ COLORS.gray[ 900 ] };
+		background: ${ COLORS.theme.foreground };
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -38,7 +38,7 @@ export const buttonView = ( {
 	background: transparent;
 	border: none;
 	border-radius: ${ CONFIG.radiusXSmall };
-	color: ${ COLORS.gray[ 700 ] };
+	color: ${ COLORS.theme.gray[ 700 ] };
 	fill: currentColor;
 	cursor: pointer;
 	display: flex;
@@ -70,7 +70,7 @@ export const buttonView = ( {
 	}
 
 	&:active {
-		background: ${ CONFIG.controlBackgroundColor };
+		background: ${ COLORS.ui.background };
 	}
 
 	${ isDeselectable && deselectable }
@@ -79,7 +79,7 @@ export const buttonView = ( {
 `;
 
 const pressed = css`
-	color: ${ COLORS.white };
+	color: ${ COLORS.theme.foregroundInverted };
 
 	&:active {
 		background: transparent;
@@ -87,11 +87,11 @@ const pressed = css`
 `;
 
 const deselectable = css`
-	color: ${ COLORS.gray[ 900 ] };
+	color: ${ COLORS.theme.foreground };
 
 	&:focus {
 		box-shadow:
-			inset 0 0 0 1px ${ COLORS.white },
+			inset 0 0 0 1px ${ COLORS.ui.background },
 			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.theme.accent };
 		outline: 2px solid transparent;
 	}
@@ -112,7 +112,7 @@ const isIconStyles = ( {
 	};
 
 	return css`
-		color: ${ COLORS.gray[ 900 ] };
+		color: ${ COLORS.theme.foreground };
 		height: ${ iconButtonSizes[ size ] };
 		aspect-ratio: 1;
 		padding-left: 0;

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

@@ -51,7 +51,7 @@ const meta: Meta< typeof Toolbar > = {
 		ToolbarDropdownMenu,
 	},
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		variant: {
 			options: [ undefined, 'unstyled' ],
 			control: { type: 'radio' },

package/src/toolbar/toolbar-button/index.tsx

@@ -54,6 +54,7 @@ function UnforwardedToolbarButton(
 				<Button
 					ref={ ref }
 					icon={ restProps.icon }
+					size="compact"
 					label={ title }
 					shortcut={ restProps.shortcut }
 					data-subscript={ restProps.subscript }
@@ -97,6 +98,7 @@ function UnforwardedToolbarButton(
 		>
 			{ ( toolbarItemProps ) => (
 				<Button
+					size="compact"
 					label={ title }
 					isPressed={ isActive }
 					{ ...toolbarItemProps }

package/src/tools-panel/stories/index.story.tsx

@@ -31,9 +31,9 @@ const meta: Meta< typeof ToolsPanel > = {
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { ToolsPanelItem },
 	argTypes: {
-		as: { control: { type: null } },
-		children: { control: { type: null } },
-		panelId: { control: { type: null } },
+		as: { control: false },
+		children: { control: false },
+		panelId: { control: false },
 		resetAll: { action: 'resetAll' },
 	},
 	parameters: {
@@ -74,6 +74,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Width"
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
@@ -86,6 +87,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Height"
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
@@ -98,6 +100,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Minimum height"
 							value={ minHeight }
 							onChange={ ( next ) => setMinHeight( next ) }
@@ -167,6 +170,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Width"
 							value={ width }
 							onChange={ ( next ) => setWidth( next ) }
@@ -179,6 +183,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						isShownByDefault
 					>
 						<UnitControl
+							__next40pxDefaultSize
 							label="Height"
 							value={ height }
 							onChange={ ( next ) => setHeight( next ) }
@@ -237,6 +242,7 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
 							}
 						>
 							<UnitControl
+								__next40pxDefaultSize
 								label="Minimum width"
 								value={ minWidth }
 								onChange={ ( next ) => setMinWidth( next ) }
@@ -249,6 +255,7 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
 							isShownByDefault={ false }
 						>
 							<UnitControl
+								__next40pxDefaultSize
 								label="Width"
 								value={ width }
 								onChange={ ( next ) => setWidth( next ) }
@@ -261,6 +268,7 @@ export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
 							isShownByDefault={ false }
 						>
 							<UnitControl
+								__next40pxDefaultSize
 								label="Height"
 								value={ height }
 								onChange={ ( next ) => setHeight( next ) }
@@ -341,6 +349,7 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 					panelId={ panelId }
 				>
 					<UnitControl
+						__next40pxDefaultSize
 						label="Injected Width"
 						value={ width }
 						onChange={ ( next ) =>
@@ -356,6 +365,7 @@ export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 					panelId={ panelId }
 				>
 					<UnitControl
+						__next40pxDefaultSize
 						label="Injected Height"
 						value={ height }
 						onChange={ ( next ) =>
@@ -441,6 +451,7 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
 					isShownByDefault
 				>
 					<UnitControl
+						__next40pxDefaultSize
 						label="Injected Height"
 						value={ height }
 						onChange={ ( next ) =>
@@ -541,6 +552,7 @@ export const WithConditionallyRenderedControl: StoryFn<
 					isShownByDefault
 				>
 					<UnitControl
+						__next40pxDefaultSize
 						label="Injected Height"
 						value={ height }
 						onChange={ ( next ) =>

package/src/tools-panel/test/index.tsx

@@ -154,7 +154,6 @@ const renderWrappedItemInPanel = () => {
 const renderPanel = () => {
 	return render(
 		<ToolsPanel { ...defaultProps }>
-			{ false && <div>Hidden</div> }
 			<ToolsPanelItem { ...controlProps }>
 				<div>Example control</div>
 			</ToolsPanelItem>
@@ -236,22 +235,6 @@ describe( 'ToolsPanel', () => {
 		it( 'should not render panel menu when there are no panel items', () => {
 			render(
 				<ToolsPanel { ...defaultProps }>
-					{ false && (
-						<ToolsPanelItem
-							label="Not rendered 1"
-							hasValue={ () => false }
-						>
-							Should not show
-						</ToolsPanelItem>
-					) }
-					{ false && (
-						<ToolsPanelItem
-							label="Not rendered 2"
-							hasValue={ () => false }
-						>
-							Not shown either
-						</ToolsPanelItem>
-					) }
 					<span>Visible but insignificant</span>
 				</ToolsPanel>
 			);

package/src/tools-panel/tools-panel/README.md

@@ -101,6 +101,7 @@ export function DimensionPanel() {
 				isShownByDefault
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Height' ) }
 					onChange={ setHeight }
 					value={ height }
@@ -113,6 +114,7 @@ export function DimensionPanel() {
 				isShownByDefault
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Width' ) }
 					onChange={ setWidth }
 					value={ width }
@@ -124,6 +126,7 @@ export function DimensionPanel() {
 				onDeselect={ () => setPadding( undefined ) }
 			>
 				<BoxControl
+					__next40pxDefaultSize
 					label={ __( 'Padding' ) }
 					onChange={ setPadding }
 					values={ padding }
@@ -136,6 +139,7 @@ export function DimensionPanel() {
 				onDeselect={ () => setMargin( undefined ) }
 			>
 				<BoxControl
+					__next40pxDefaultSize
 					label={ __( 'Margin' ) }
 					onChange={ setMargin }
 					values={ margin }

package/src/tools-panel/tools-panel/component.tsx

@@ -75,6 +75,7 @@ const UnconnectedToolsPanel = (
  *         onDeselect={ () => setHeight() }
  *       >
  *         <UnitControl
+ *           __next40pxDefaultSize
  *           label={ __( 'Height' ) }
  *           onChange={ setHeight }
  *           value={ height }
@@ -86,6 +87,7 @@ const UnconnectedToolsPanel = (
  *         onDeselect={ () => setWidth() }
  *       >
  *         <UnitControl
+ *           __next40pxDefaultSize
  *           label={ __( 'Width' ) }
  *           onChange={ setWidth }
  *           value={ width }

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

@@ -19,7 +19,7 @@ const meta: Meta< typeof Tooltip > = {
 	id: 'components-tooltip',
 	component: Tooltip,
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		position: {
 			control: { type: 'select' },
 			options: [

package/src/tree-grid/cell.tsx

@@ -21,7 +21,11 @@ function UnforwardedTreeGridCell(
 	return (
 		<td { ...props } role="gridcell">
 			{ withoutGridItem ? (
-				<>{ children }</>
+				<>
+					{ typeof children === 'function'
+						? children( { ...props, ref } )
+						: children }
+				</>
 			) : (
 				<TreeGridItem ref={ ref }>{ children }</TreeGridItem>
 			) }

package/src/tree-grid/stories/index.story.tsx

@@ -22,7 +22,7 @@ const meta: Meta< typeof TreeGrid > = {
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { TreeGridRow, TreeGridCell },
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/tree-grid/types.ts

@@ -36,7 +36,7 @@ export type TreeGridRowProps = {
 type RovingTabIndexItemPassThruProps = {
 	ref: React.ForwardedRef< any >;
 	tabIndex?: number;
-	onFocus: React.FocusEventHandler< any >;
+	onFocus?: React.FocusEventHandler< any >;
 	[ key: string ]: any;
 };
 

package/src/tree-select/stories/index.story.tsx

@@ -22,7 +22,7 @@ const meta: Meta< typeof TreeSelect > = {
 		label: { control: { type: 'text' } },
 		prefix: { control: { type: 'text' } },
 		suffix: { control: { type: 'text' } },
-		selectedId: { control: { type: null } },
+		selectedId: { control: false },
 	},
 	parameters: {
 		controls: {

package/src/unit-control/README.md

@@ -15,7 +15,7 @@ import { __experimentalUnitControl as UnitControl } from '@wordpress/components'
 const Example = () => {
 	const [ value, setValue ] = useState( '10px' );
 
-	return <UnitControl onChange={ setValue } value={ value } />;
+	return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
 };
 ```
 
@@ -128,7 +128,7 @@ const Example = () => {
 	];
 
 	return (
-		<UnitControl onChange={ setValue } value={ value } units={ units } />
+		<UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } units={ units } />
 	);
 };
 ```
@@ -143,7 +143,7 @@ For example, a `value` of `50%` will set the current unit to `%`.
 Example:
 
 ```jsx
-<UnitControl value="50%" />
+<UnitControl __next40pxDefaultSize value="50%" />
 ```
 
 -   Required: No

package/src/unit-control/index.tsx

@@ -27,6 +27,7 @@ import { useControlledState } from '../utils/hooks';
 import { escapeRegExp } from '../utils/strings';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedUnitControl(
 	unitControlProps: WordPressComponentProps<
@@ -55,9 +56,17 @@ function UnforwardedUnitControl(
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
 		onFocus: onFocusProp,
+		__shouldNotWarnDeprecated36pxSize,
 		...props
 	} = useDeprecated36pxDefaultSizeProp( unitControlProps );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'UnitControl',
+		__next40pxDefaultSize: props.__next40pxDefaultSize,
+		size,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	if ( 'unit' in unitControlProps ) {
 		deprecated( 'UnitControl unit prop', {
 			since: '5.6',
@@ -215,6 +224,7 @@ function UnforwardedUnitControl(
 	return (
 		<ValueInput
 			{ ...props }
+			__shouldNotWarnDeprecated36pxSize
 			autoComplete={ autoComplete }
 			className={ classes }
 			disabled={ disabled }
@@ -246,7 +256,7 @@ function UnforwardedUnitControl(
  * const Example = () => {
  *   const [ value, setValue ] = useState( '10px' );
  *
- *   return <UnitControl onChange={ setValue } value={ value } />;
+ *   return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
  * };
  * ```
  */

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

@@ -20,11 +20,11 @@ const meta: Meta< typeof UnitControl > = {
 	id: 'components-experimental-unitcontrol',
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
-		__unstableStateReducer: { control: { type: null } },
-		onChange: { control: { type: null } },
-		onUnitChange: { control: { type: null } },
+		__unstableStateReducer: { control: false },
+		onChange: { control: false },
+		onUnitChange: { control: false },
 		prefix: { control: { type: 'text' } },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
@@ -59,6 +59,7 @@ export const Default: StoryFn< typeof UnitControl > = DefaultTemplate.bind(
 );
 Default.args = {
 	label: 'Label',
+	__next40pxDefaultSize: true,
 };
 
 /**

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

@@ -12,9 +12,13 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import UnitControl from '..';
+import _UnitControl from '..';
 import { CSS_UNITS, parseQuantityAndUnitFromRawValue } from '../utils';
 
+const UnitControl = ( props: React.ComponentProps< typeof _UnitControl > ) => (
+	<_UnitControl __next40pxDefaultSize { ...props } />
+);
+
 const getInput = ( {
 	isInputTypeText = false,
 }: {