@wordpress/components 19.13.0 → 19.16.0

package/build-types/v-stack/types.d.ts

@@ -6,8 +6,28 @@ import type { CSSProperties } from 'react';
  * Internal dependencies
  */
 import type { HStackAlignment, Props as HStackProps } from '../h-stack/types';
-export declare type Props = HStackProps & {
+export declare type VStackProps = HStackProps & {
+    /**
+     * Determines how the child elements are aligned.
+     *
+     * -   `top`: Aligns content to the top.
+     * -   `topLeft`: Aligns content to the top/left.
+     * -   `topRight`: Aligns content to the top/right.
+     * -   `left`: Aligns content to the left.
+     * -   `center`: Aligns content to the center.
+     * -   `right`: Aligns content to the right.
+     * -   `bottom`: Aligns content to the bottom.
+     * -   `bottomLeft`: Aligns content to the bottom/left.
+     * -   `bottomRight`: Aligns content to the bottom/right.
+     * -   `edge`: Aligns content to the edges of the container.
+     * -   `stretch`: Stretches content to the edges of the container.
+     */
     alignment?: HStackAlignment | CSSProperties['alignItems'];
+    /**
+     * The amount of space between each child element. Spacing in between each
+     * child can be adjusted by using `spacing`. The value of `spacing` works as
+     * a multiplier to the library's grid system (base of `4px`).
+     */
     spacing?: CSSProperties['width'];
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/v-stack/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/v-stack/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9E,oBAAY,KAAK,GAAG,WAAW,GAAG;IACjC,SAAS,CAAC,EAAE,eAAe,GAAG,aAAa,CAAE,YAAY,CAAE,CAAC;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;CACnC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/v-stack/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9E,oBAAY,WAAW,GAAG,WAAW,GAAG;IACvC;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,eAAe,GAAG,aAAa,CAAE,YAAY,CAAE,CAAC;IAC5D;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;CACnC,CAAC"}

package/build-types/visually-hidden/component.d.ts

@@ -1,22 +1,20 @@
-export default ConnectedVisuallyHidden;
+import type { VisuallyHiddenProps } from './types';
 /**
  * `VisuallyHidden` is a component used to render text intended to be visually
  * hidden, but will show for alternate devices, for example a screen reader.
  *
- * @example
  * ```jsx
  * import { VisuallyHidden } from `@wordpress/components`;
  *
  * function Example() {
- * 	return (
- * 		<VisuallyHidden>
- * 			<label>Code is Poetry</label>
- * 		</VisuallyHidden>
- * 	);
+ *   return (
+ *     <VisuallyHidden>
+ *       <label>Code is Poetry</label>
+ *     </VisuallyHidden>
+ *   );
  * }
  * ```
  */
-declare const ConnectedVisuallyHidden: import("../ui/context").WordPressComponent<"div", {
-    children: import('react').ReactNode;
-}, true>;
+export declare const VisuallyHidden: import("../ui/context").WordPressComponent<"div", VisuallyHiddenProps, true>;
+export default VisuallyHidden;
 //# sourceMappingURL=component.d.ts.map

package/build-types/visually-hidden/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.js"],"names":[],"mappings":";AAyBA;;;;;;;;;;;;;;;;GAgBG;AACH;cAlCuE,OAAO,OAAO,EAAE,SAAS;SAqC9F"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmBnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,8EAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,2 +1,2 @@
-export { default as VisuallyHidden } from "./component";
+export { default as VisuallyHidden } from './component';
 //# sourceMappingURL=index.d.ts.map

package/build-types/visually-hidden/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,aAAa,CAAC"}

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

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { VisuallyHidden } from '..';
+declare const meta: ComponentMeta<typeof VisuallyHidden>;
+export default meta;
+export declare const Default: ComponentStory<typeof VisuallyHidden>;
+export declare const WithForwardedProps: ComponentStory<typeof VisuallyHidden>;
+export declare const WithAdditionalClassNames: ComponentStory<typeof VisuallyHidden>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,cAAc,CAa/C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,cAAc,CAa1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAE,OAAO,cAAc,CAWrE,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,CACpD,OAAO,cAAc,CAUrB,CAAC"}

package/build-types/visually-hidden/styles.d.ts

@@ -1,3 +1,6 @@
-/** @type {import('react').CSSProperties} */
-export const visuallyHidden: import('react').CSSProperties;
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+export declare const visuallyHidden: CSSProperties;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/visually-hidden/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/styles.js"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,6BADW,OAAO,OAAO,EAAE,aAAa,CAatC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,cAAc,EAAE,aAY5B,CAAC"}

package/build-types/visually-hidden/test/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/visually-hidden/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/test/index.tsx"],"names":[],"mappings":""}

package/build-types/visually-hidden/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+export declare type VisuallyHiddenProps = {
+    /**
+     * The children elements.
+     */
+    children: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/visually-hidden/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,mBAAmB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.13.0",
+	"version": "19.16.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,21 +38,21 @@
 		"@emotion/utils": "1.0.0",
 		"@floating-ui/react-dom": "0.6.3",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.11.0",
-		"@wordpress/compose": "^5.9.0",
-		"@wordpress/date": "^4.11.0",
-		"@wordpress/deprecated": "^3.11.0",
-		"@wordpress/dom": "^3.11.0",
-		"@wordpress/element": "^4.9.0",
-		"@wordpress/escape-html": "^2.11.0",
-		"@wordpress/hooks": "^3.11.0",
-		"@wordpress/i18n": "^4.11.0",
-		"@wordpress/icons": "^9.2.0",
-		"@wordpress/is-shallow-equal": "^4.11.0",
-		"@wordpress/keycodes": "^3.11.0",
-		"@wordpress/primitives": "^3.9.0",
-		"@wordpress/rich-text": "^5.9.0",
-		"@wordpress/warning": "^2.11.0",
+		"@wordpress/a11y": "^3.14.0",
+		"@wordpress/compose": "^5.12.0",
+		"@wordpress/date": "^4.14.0",
+		"@wordpress/deprecated": "^3.14.0",
+		"@wordpress/dom": "^3.14.0",
+		"@wordpress/element": "^4.12.0",
+		"@wordpress/escape-html": "^2.14.0",
+		"@wordpress/hooks": "^3.14.0",
+		"@wordpress/i18n": "^4.14.0",
+		"@wordpress/icons": "^9.5.0",
+		"@wordpress/is-shallow-equal": "^4.14.0",
+		"@wordpress/keycodes": "^3.14.0",
+		"@wordpress/primitives": "^3.12.0",
+		"@wordpress/rich-text": "^5.12.0",
+		"@wordpress/warning": "^2.14.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -67,6 +67,7 @@
 		"react-colorful": "^5.3.1",
 		"react-dates": "^21.8.0",
 		"reakit": "^1.3.8",
+		"remove-accents": "^0.4.2",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
@@ -76,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "0315dbc240cb2aa146d7c1bafd251f004b88300e"
 }

package/src/alignment-matrix-control/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { flattenDeep } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -28,7 +23,7 @@ export const ALIGNMENT_LABEL = {
 };
 
 // Transforms GRID into a flat Array of values.
-export const ALIGNMENTS = flattenDeep( GRID );
+export const ALIGNMENTS = GRID.flat();
 
 /**
  * Parses and transforms an incoming value to better match the alignment values

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

@@ -34,7 +34,7 @@ export default function AnglePickerControl( {
 	const classes = classnames( 'components-angle-picker-control', className );
 
 	return (
-		<Root className={ classes }>
+		<Root className={ classes } gap={ 4 }>
 			<FlexBlock>
 				<NumberControl
 					label={ label }
@@ -62,7 +62,6 @@ export default function AnglePickerControl( {
 			</FlexBlock>
 			<FlexItem
 				style={ {
-					marginLeft: space( 4 ),
 					marginBottom: space( 1 ),
 					marginTop: 'auto',
 				} }

package/src/autocomplete/autocompleter-ui.js

@@ -39,7 +39,10 @@ export function getAutoCompleterUI( autocompleter ) {
 
 		useLayoutEffect( () => {
 			onChangeOptions( items );
-		}, [ onChangeOptions, items ] );
+			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// See https://github.com/WordPress/gutenberg/pull/41820
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ items ] );
 
 		if ( ! items.length > 0 ) {
 			return null;

package/src/autocomplete/autocompleter-ui.native.js

@@ -71,7 +71,10 @@ export function getAutoCompleterUI( autocompleter ) {
 			} else if ( isVisible && text.length === 0 ) {
 				startAnimation( false );
 			}
-		}, [ onChangeOptions, items, isVisible, text, startAnimation ] );
+			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// See https://github.com/WordPress/gutenberg/pull/41820
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ items, isVisible, text ] );
 
 		const activeItemStyles = usePreferredColorSchemeStyle(
 			styles[ 'components-autocomplete__item-active' ],
@@ -111,7 +114,10 @@ export function getAutoCompleterUI( autocompleter ) {
 					}
 				} );
 			},
-			[ animationValue, isVisible, reset ]
+			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// See https://github.com/WordPress/gutenberg/pull/41820
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+			[ isVisible ]
 		);
 
 		const contentStyles = {

package/src/autocomplete/get-default-use-items.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { debounce, deburr, escapeRegExp } from 'lodash';
+import { debounce, escapeRegExp } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -20,7 +21,7 @@ function filterOptions( search, options = [], maxResults = 10 ) {
 		}
 
 		const isMatch = keywords.some( ( keyword ) =>
-			search.test( deburr( keyword ) )
+			search.test( removeAccents( keyword ) )
 		);
 		if ( ! isMatch ) {
 			continue;

package/src/autocomplete/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { escapeRegExp, find, deburr } from 'lodash';
+import { escapeRegExp, find } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -284,7 +285,7 @@ function useAutocomplete( {
 			return;
 		}
 
-		const text = deburr( textContent );
+		const text = removeAccents( textContent );
 		const textAfterSelection = getTextContent(
 			slice( record, undefined, getTextContent( record ).length )
 		);
@@ -375,14 +376,10 @@ function useAutocomplete( {
 				: AutocompleterUI
 		);
 		setFilterValue( query );
-	}, [
-		textContent,
-		AutocompleterUI,
-		autocompleter,
-		completers,
-		record,
-		filteredOptions.length,
-	] );
+		// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+		// See https://github.com/WordPress/gutenberg/pull/41820
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ textContent ] );
 
 	const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};
 	const { className } = autocompleter || {};

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

@@ -39,6 +39,11 @@ const labelStyles = css`
 
 export const StyledLabel = styled.label`
 	${ labelStyles }
+	/**
+	 * Removes Chrome/Safari/Firefox user agent stylesheet padding from
+	 * StyledLabel when it is rendered as a legend.
+	 */
+	padding: 0;
 `;
 
 const deprecatedMarginHelp = ( { __nextHasNoMarginBottom = false } ) => {

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

@@ -69,6 +69,7 @@ const BorderBoxControl = (
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
+				__unstableShift: true,
 		  }
 		: undefined;
 

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

@@ -43,6 +43,7 @@ const BorderBoxControlSplitControls = (
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
+				__unstableShift: true,
 		  }
 		: undefined;
 

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

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -21,14 +26,14 @@ const BorderLabel = ( props: LabelProps ) => {
 	}
 
 	return hideLabelFromVision ? (
-		<VisuallyHidden as="label">{ label }</VisuallyHidden>
+		<VisuallyHidden as="legend">{ label }</VisuallyHidden>
 	) : (
-		<StyledLabel>{ label }</StyledLabel>
+		<StyledLabel as="legend">{ label }</StyledLabel>
 	);
 };
 
-const BorderControl = (
-	props: WordPressComponentProps< BorderControlProps, 'div' >,
+const UnconnectedBorderControl = (
+	props: WordPressComponentProps< BorderControlProps, 'div', false >,
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
@@ -38,6 +43,7 @@ const BorderControl = (
 		enableStyle = true,
 		hideLabelFromVision,
 		innerWrapperClassName,
+		inputWidth,
 		label,
 		onBorderChange,
 		onSliderChange,
@@ -48,7 +54,6 @@ const BorderControl = (
 		showDropdownHeader,
 		sliderClassName,
 		value: border,
-		widthControlClassName,
 		widthUnit,
 		widthValue,
 		withSlider,
@@ -59,41 +64,45 @@ const BorderControl = (
 	} = useBorderControl( props );
 
 	return (
-		<View { ...otherProps } ref={ forwardedRef }>
+		<View as="fieldset" { ...otherProps } ref={ forwardedRef }>
 			<BorderLabel
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
-			<HStack spacing={ 3 }>
-				<HStack className={ innerWrapperClassName } alignment="stretch">
-					<BorderControlDropdown
-						border={ border }
-						colors={ colors }
-						__unstablePopoverProps={ __unstablePopoverProps }
-						disableCustomColors={ disableCustomColors }
-						enableAlpha={ enableAlpha }
-						enableStyle={ enableStyle }
-						onChange={ onBorderChange }
-						previousStyleSelection={ previousStyleSelection }
-						showDropdownHeader={ showDropdownHeader }
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						__next36pxDefaultSize={ __next36pxDefaultSize }
-					/>
-					<UnitControl
-						className={ widthControlClassName }
-						min={ 0 }
-						onChange={ onWidthChange }
-						value={ border?.width || '' }
-						placeholder={ placeholder }
-					/>
-				</HStack>
+			<HStack spacing={ 3 } className={ innerWrapperClassName }>
+				<UnitControl
+					prefix={
+						<BorderControlDropdown
+							border={ border }
+							colors={ colors }
+							__unstablePopoverProps={ __unstablePopoverProps }
+							disableCustomColors={ disableCustomColors }
+							enableAlpha={ enableAlpha }
+							enableStyle={ enableStyle }
+							onChange={ onBorderChange }
+							previousStyleSelection={ previousStyleSelection }
+							showDropdownHeader={ showDropdownHeader }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							__next36pxDefaultSize={ __next36pxDefaultSize }
+						/>
+					}
+					label={ __( 'Border width' ) }
+					hideLabelFromVision
+					min={ 0 }
+					onChange={ onWidthChange }
+					value={ border?.width || '' }
+					placeholder={ placeholder }
+					__unstableInputWidth={ inputWidth }
+				/>
 				{ withSlider && (
 					<RangeControl
+						label={ __( 'Border width' ) }
+						hideLabelFromVision
 						className={ sliderClassName }
 						initialPosition={ 0 }
 						max={ 100 }
@@ -109,6 +118,43 @@ const BorderControl = (
 	);
 };
 
-const ConnectedBorderControl = contextConnect( BorderControl, 'BorderControl' );
+/**
+ * The `BorderControl` brings together internal sub-components which allow users to
+ * set the various properties of a border. The first sub-component, a
+ * `BorderDropdown` contains options representing border color and style. The
+ * border width is controlled via a `UnitControl` and an optional `RangeControl`.
+ *
+ * Border radius is not covered by this control as it may be desired separate to
+ * color, style, and width. For example, the border radius may be absorbed under
+ * a "shape" abstraction.
+ *
+ * ```jsx
+ * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const colors = [
+ * 	{ name: 'Blue 20', color: '#72aee6' },
+ * 	// ...
+ * ];
+ *
+ * const MyBorderControl = () => {
+ * 	const [ border, setBorder ] = useState();
+ * 	const onChange = ( newBorder ) => setBorder( newBorder );
+ *
+ * 	return (
+ * 		<BorderControl
+ * 			colors={ colors }
+ * 			label={ __( 'Border' ) }
+ * 			onChange={ onChange }
+ * 			value={ border }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export const BorderControl = contextConnect(
+	UnconnectedBorderControl,
+	'BorderControl'
+);
 
-export default ConnectedBorderControl;
+export default BorderControl;

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

@@ -106,7 +106,7 @@ export function useBorderControl(
 	);
 
 	const onSliderChange = useCallback(
-		( value: string ) => {
+		( value?: number ) => {
 			onWidthChange( `${ value }${ widthUnit }` );
 		},
 		[ onWidthChange, widthUnit ]
@@ -118,18 +118,13 @@ export function useBorderControl(
 		return cx( styles.borderControl, className );
 	}, [ className, cx ] );
 
+	const wrapperWidth = isCompact ? '90px' : width;
 	const innerWrapperClassName = useMemo( () => {
-		const wrapperWidth = isCompact ? '90px' : width;
-		const widthStyle =
-			!! wrapperWidth && styles.wrapperWidth( wrapperWidth );
+		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
 		const heightStyle = styles.wrapperHeight( __next36pxDefaultSize );
 
 		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ isCompact, width, cx, __next36pxDefaultSize ] );
-
-	const widthControlClassName = useMemo( () => {
-		return cx( styles.borderWidthControl() );
-	}, [ cx ] );
+	}, [ wrapperWidth, cx, __next36pxDefaultSize ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -139,13 +134,13 @@ export function useBorderControl(
 		...otherProps,
 		className: classes,
 		innerWrapperClassName,
+		inputWidth: wrapperWidth,
 		onBorderChange,
 		onSliderChange,
 		onWidthChange,
 		previousStyleSelection: styleSelection,
 		sliderClassName,
 		value: border,
-		widthControlClassName,
 		widthUnit,
 		widthValue,
 		__next36pxDefaultSize,