Update naming

packages/components/src/box-control/all-input-control.tsx

@@ -6,7 +6,10 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import type { UnitControlProps } from '../unit-control/types';
-import { FlexedRangeControl, UnitControl } from './styles/box-control-styles';
+import {
+	FlexedRangeControl,
+	StyledUnitControl,
+} from './styles/box-control-styles';
 import { HStack } from '../h-stack';
 import type { BoxControlInputControlProps } from './types';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control';
@@ -69,7 +72,7 @@ export default function AllInputControl( {
 
 	return (
 		<HStack>
-			<UnitControl
+			<StyledUnitControl
 				{ ...props }
 				className="component-box-control__unit-control"
 				disableUnits={ isMixed }

packages/components/src/box-control/axial-input-controls.tsx

@@ -12,7 +12,7 @@ import {
 	FlexedBoxControlIcon,
 	FlexedRangeControl,
 	InputWrapper,
-	UnitControl,
+	StyledUnitControl,
 } from './styles/box-control-styles';
 import type { BoxControlInputControlProps } from './types';
 
@@ -103,7 +103,7 @@ export default function AxialInputControls( {
 					<InputWrapper key={ side }>
 						<FlexedBoxControlIcon side={ side } sides={ sides } />
 						<Tooltip placement="top-end" text={ LABELS[ side ] }>
-							<UnitControl
+							<StyledUnitControl
 								{ ...props }
 								className="component-box-control__unit-control"
 								id={ inputId }

packages/components/src/box-control/input-controls.tsx

@@ -12,7 +12,7 @@ import {
 	FlexedBoxControlIcon,
 	FlexedRangeControl,
 	InputWrapper,
-	UnitControl,
+	StyledUnitControl,
 } from './styles/box-control-styles';
 import type { BoxControlInputControlProps, BoxControlValue } from './types';
 
@@ -105,7 +105,7 @@ export default function BoxInputControls( {
 					<InputWrapper key={ `box-control-${ side }` } expanded>
 						<FlexedBoxControlIcon side={ side } sides={ sides } />
 						<Tooltip placement="top-end" text={ LABELS[ side ] }>
-							<UnitControl
+							<StyledUnitControl
 								{ ...props }
 								className="component-box-control__unit-control"
 								id={ inputId }

packages/components/src/box-control/styles/box-control-styles.ts

@@ -9,10 +9,10 @@ import BoxControlIcon from '../icon';
 import Button from '../../button';
 import { HStack } from '../../h-stack';
 import RangeControl from '../../range-control';
-import BaseUnitControl from '../../unit-control';
+import UnitControl from '../../unit-control';
 import { space } from '../../utils/space';
 
-export const UnitControl = styled( BaseUnitControl )`
+export const StyledUnitControl = styled( UnitControl )`
 	max-width: 90px;
 `;