@wordpress/components 19.15.0 → 20.0.1-next.d6164808d3.0

package/src/guide/test/index.js

@@ -1,23 +1,22 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Guide from '../';
-import PageControl from '../page-control';
-import Modal from '../../modal';
 
 describe( 'Guide', () => {
 	it( 'renders nothing when there are no pages', () => {
-		const wrapper = shallow( <Guide /> );
-		expect( wrapper.isEmptyRender() ).toBe( true );
+		render( <Guide pages={ [] } /> );
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders one page at a time', () => {
-		const wrapper = shallow(
+		render(
 			<Guide
 				pages={ [
 					{ content: <p>Page 1</p> },
@@ -25,11 +24,14 @@ describe( 'Guide', () => {
 				] }
 			/>
 		);
-		expect( wrapper.find( 'p' ) ).toHaveLength( 1 );
+
+		expect( screen.queryByRole( 'dialog' ) ).toBeVisible();
+		expect( screen.queryByText( 'Page 1' ) ).toBeVisible();
+		expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'hides back button and shows forward button on the first page', () => {
-		const wrapper = shallow(
+		render(
 			<Guide
 				pages={ [
 					{ content: <p>Page 1</p> },
@@ -37,20 +39,23 @@ describe( 'Guide', () => {
 				] }
 			/>
 		);
-		expect( wrapper.find( PageControl ).prop( 'currentPage' ) ).toBe( 0 );
-		expect( wrapper.find( '.components-guide__back-button' ) ).toHaveLength(
-			0
-		);
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Previous' } )
+		).not.toBeInTheDocument();
 		expect(
-			wrapper.find( '.components-guide__forward-button' )
-		).toHaveLength( 1 );
+			screen.queryByRole( 'button', { name: 'Next' } )
+		).toBeVisible();
 		expect(
-			wrapper.find( '.components-guide__finish-button' )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'button', { name: 'Finish' } )
+		).not.toBeInTheDocument();
 	} );
 
-	it( 'shows back button and shows finish button on the last page', () => {
-		const wrapper = shallow(
+	it( 'shows back button and shows finish button on the last page', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render(
 			<Guide
 				pages={ [
 					{ content: <p>Page 1</p> },
@@ -58,47 +63,59 @@ describe( 'Guide', () => {
 				] }
 			/>
 		);
-		wrapper.find( '.components-guide__forward-button' ).simulate( 'click' );
-		expect( wrapper.find( PageControl ).prop( 'currentPage' ) ).toBe( 1 );
-		expect( wrapper.find( '.components-guide__back-button' ) ).toHaveLength(
-			1
-		);
+		await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+
+		expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'Page 2' ) ).toBeVisible();
+
 		expect(
-			wrapper.find( '.components-guide__forward-button' )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'button', { name: 'Previous' } )
+		).toBeVisible();
 		expect(
-			wrapper.find( '.components-guide__finish-button' )
-		).toHaveLength( 1 );
+			screen.queryByRole( 'button', { name: 'Next' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', { name: 'Finish' } )
+		).toBeVisible();
 	} );
 
 	it( "doesn't display the page control if there is only one page", () => {
-		const wrapper = shallow(
-			<Guide pages={ [ { content: <p>Page 1</p> } ] } />
-		);
-		expect( wrapper.find( PageControl ).exists() ).toBeFalsy();
+		render( <Guide pages={ [ { content: <p>Page 1</p> } ] } /> );
+		expect(
+			screen.queryByRole( 'list', { name: 'Guide controls' } )
+		).not.toBeInTheDocument();
 	} );
 
-	it( 'calls onFinish when the finish button is clicked', () => {
+	it( 'calls onFinish when the finish button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onFinish = jest.fn();
-		const wrapper = shallow(
+		render(
 			<Guide
 				onFinish={ onFinish }
 				pages={ [ { content: <p>Page 1</p> } ] }
 			/>
 		);
-		wrapper.find( '.components-guide__finish-button' ).simulate( 'click' );
+		await user.click( screen.getByRole( 'button', { name: 'Finish' } ) );
+
 		expect( onFinish ).toHaveBeenCalled();
 	} );
 
-	it( 'calls onFinish when the modal is closed', () => {
+	it( 'calls onFinish when the modal is closed', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onFinish = jest.fn();
-		const wrapper = shallow(
+		render(
 			<Guide
 				onFinish={ onFinish }
 				pages={ [ { content: <p>Page 1</p> } ] }
 			/>
 		);
-		wrapper.find( Modal ).prop( 'onRequestClose' )();
+
+		await user.keyboard( '[Escape]' );
+
 		expect( onFinish ).toHaveBeenCalled();
 	} );
 } );

package/src/guide/test/page-control.js

@@ -1,12 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -15,29 +11,30 @@ import PageControl from '../page-control';
 
 describe( 'PageControl', () => {
 	it( 'renders an empty list when there are no pages', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 0 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 0 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 0 } /> );
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders a button for each page', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 5 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 5 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 5 } /> );
+		expect( screen.getAllByRole( 'button' ) ).toHaveLength( 5 );
 	} );
 
-	it( 'sets the current page when a button is clicked', () => {
+	it( 'sets the current page when a button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const setCurrentPage = jest.fn();
-		const wrapper = shallow(
+		render(
 			<PageControl
 				currentPage={ 0 }
 				numberOfPages={ 2 }
 				setCurrentPage={ setCurrentPage }
 			/>
 		);
-		wrapper.find( Button ).at( 1 ).simulate( 'click' );
+
+		await user.click( screen.getAllByRole( 'button' )[ 1 ] );
+
 		expect( setCurrentPage ).toHaveBeenCalledWith( 1 );
 	} );
 } );

package/src/higher-order/with-notices/test/index.js

@@ -5,6 +5,7 @@ import {
 	act,
 	render,
 	fireEvent,
+	screen,
 	waitForElementToBeRemoved,
 	within,
 } from '@testing-library/react';
@@ -145,10 +146,11 @@ describe( 'withNotices rendering', () => {
 	it( 'should display notices with functioning dismissal triggers', async () => {
 		const messages = [ 'Aló!', 'hu dis?', 'Otis' ];
 		const notices = noticesFrom( messages );
-		const { container, getAllByLabelText } = render(
+		const { container } = render(
 			<TestComponent notifications={ notices } />
 		);
-		const [ buttonRemoveFirst ] = getAllByLabelText( stockDismissText );
+		const [ buttonRemoveFirst ] =
+			screen.getAllByLabelText( stockDismissText );
 		const getRemovalTarget = () =>
 			within( container ).getByText(
 				// The last item corresponds to the first notice in the DOM.

package/src/higher-order/with-spoken-messages/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies

package/src/index.js

@@ -30,7 +30,10 @@ export {
 	isEmptyBorder as __experimentalIsEmptyBorder,
 } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
-export { default as __experimentalBoxControl } from './box-control';
+export {
+	default as __experimentalBoxControl,
+	applyValueToSides as __experimentalApplyValueToSides,
+} from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
 export {
@@ -66,6 +69,7 @@ export { default as Draggable } from './draggable';
 export { default as DropZone } from './drop-zone';
 export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
+export { default as __experimentalDropdownContentWrapper } from './dropdown/dropdown-content-wrapper';
 export { default as DropdownMenu } from './dropdown-menu';
 export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
 export { Elevation as __experimentalElevation } from './elevation';
@@ -91,6 +95,8 @@ export {
 	Item as __experimentalItem,
 } from './item-group';
 export { default as __experimentalInputControl } from './input-control';
+export { default as __experimentalInputControlPrefixWrapper } from './input-control/input-prefix-wrapper';
+export { default as __experimentalInputControlSuffixWrapper } from './input-control/input-suffix-wrapper';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MenuGroup } from './menu-group';
 export { default as MenuItem } from './menu-item';

package/src/input-control/index.tsx

@@ -16,6 +16,7 @@ import { useState, forwardRef } from '@wordpress/element';
 import InputBase from './input-base';
 import InputField from './input-field';
 import type { InputControlProps } from './types';
+import { space } from '../ui/utils/space';
 import { useDraft } from './utils';
 
 const noop = () => {};
@@ -29,6 +30,7 @@ function useUniqueId( idProp?: string ) {
 
 export function UnforwardedInputControl(
 	{
+		__next36pxDefaultSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
@@ -62,6 +64,7 @@ export function UnforwardedInputControl(
 
 	return (
 		<InputBase
+			__next36pxDefaultSize={ __next36pxDefaultSize }
 			__unstableInputWidth={ __unstableInputWidth }
 			className={ classes }
 			disabled={ disabled }
@@ -78,6 +81,7 @@ export function UnforwardedInputControl(
 		>
 			<InputField
 				{ ...props }
+				__next36pxDefaultSize={ __next36pxDefaultSize }
 				className="components-input-control__input"
 				disabled={ disabled }
 				id={ id }
@@ -85,6 +89,8 @@ export function UnforwardedInputControl(
 				isPressEnterToChange={ isPressEnterToChange }
 				onKeyDown={ onKeyDown }
 				onValidate={ onValidate }
+				paddingInlineStart={ prefix ? space( 2 ) : undefined }
+				paddingInlineEnd={ suffix ? space( 2 ) : undefined }
 				ref={ ref }
 				setIsFocused={ setIsFocused }
 				size={ size }

package/src/input-control/input-base.tsx

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,8 +20,10 @@ import {
 	Prefix,
 	Suffix,
 	LabelWrapper,
+	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
+import { ContextSystemProvider } from '../ui/context';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -52,6 +54,7 @@ function getUIFlexProps( labelPosition?: LabelPosition ) {
 
 export function InputBase(
 	{
+		__next36pxDefaultSize,
 		__unstableInputWidth,
 		children,
 		className,
@@ -71,6 +74,17 @@ export function InputBase(
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
+	const { paddingLeft, paddingRight } = getSizeConfig( {
+		inputSize: size,
+		__next36pxDefaultSize,
+	} );
+	const prefixSuffixContextValue = useMemo( () => {
+		return {
+			InputControlPrefixWrapper: { paddingLeft },
+			InputControlSuffixWrapper: { paddingRight },
+		};
+	}, [ paddingLeft, paddingRight ] );
+
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
@@ -87,7 +101,6 @@ export function InputBase(
 					hideLabelFromVision={ hideLabelFromVision }
 					labelPosition={ labelPosition }
 					htmlFor={ id }
-					size={ size }
 				>
 					{ label }
 				</Label>
@@ -99,17 +112,19 @@ export function InputBase(
 				hideLabel={ hideLabel }
 				labelPosition={ labelPosition }
 			>
-				{ prefix && (
-					<Prefix className="components-input-control__prefix">
-						{ prefix }
-					</Prefix>
-				) }
-				{ children }
-				{ suffix && (
-					<Suffix className="components-input-control__suffix">
-						{ suffix }
-					</Suffix>
-				) }
+				<ContextSystemProvider value={ prefixSuffixContextValue }>
+					{ prefix && (
+						<Prefix className="components-input-control__prefix">
+							{ prefix }
+						</Prefix>
+					) }
+					{ children }
+					{ suffix && (
+						<Suffix className="components-input-control__suffix">
+							{ suffix }
+						</Suffix>
+					) }
+				</ContextSystemProvider>
 				<Backdrop disabled={ disabled } isFocused={ isFocused } />
 			</Container>
 		</Root>

package/src/input-control/input-prefix-wrapper.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '../spacer';
+import {
+	WordPressComponentProps,
+	contextConnect,
+	useContextSystem,
+} from '../ui/context';
+import type { InputControlPrefixWrapperProps } from './types';
+
+function UnconnectedInputControlPrefixWrapper(
+	props: WordPressComponentProps< InputControlPrefixWrapperProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const derivedProps = useContextSystem( props, 'InputControlPrefixWrapper' );
+
+	return (
+		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
+	);
+}
+
+/**
+ * A convenience wrapper for the `prefix` when you want to apply
+ * standard padding in accordance with the size variant.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalInputControl as InputControl,
+ *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+ * } from '@wordpress/components';
+ *
+ * <InputControl
+ *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+ * />
+ * ```
+ */
+export const InputControlPrefixWrapper = contextConnect(
+	UnconnectedInputControlPrefixWrapper,
+	'InputControlPrefixWrapper'
+);
+
+export default InputControlPrefixWrapper;

package/src/input-control/input-suffix-wrapper.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '../spacer';
+import {
+	WordPressComponentProps,
+	contextConnect,
+	useContextSystem,
+} from '../ui/context';
+import type { InputControlSuffixWrapperProps } from './types';
+
+function UnconnectedInputControlSuffixWrapper(
+	props: WordPressComponentProps< InputControlSuffixWrapperProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const derivedProps = useContextSystem( props, 'InputControlSuffixWrapper' );
+
+	return (
+		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
+	);
+}
+
+/**
+ * A convenience wrapper for the `suffix` when you want to apply
+ * standard padding in accordance with the size variant.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalInputControl as InputControl,
+ *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+ * } from '@wordpress/components';
+ *
+ * <InputControl
+ *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
+ * />
+ * ```
+ */
+export const InputControlSuffixWrapper = contextConnect(
+	UnconnectedInputControlSuffixWrapper,
+	'InputControlSuffixWrapper'
+);
+
+export default InputControlSuffixWrapper;

package/src/input-control/reducer/actions.ts

@@ -10,6 +10,7 @@ import type { DragProps } from '../types';
 
 export const CHANGE = 'CHANGE';
 export const COMMIT = 'COMMIT';
+export const CONTROL = 'CONTROL';
 export const DRAG_END = 'DRAG_END';
 export const DRAG_START = 'DRAG_START';
 export const DRAG = 'DRAG';
@@ -23,7 +24,7 @@ interface EventPayload {
 	event?: SyntheticEvent;
 }
 
-interface Action< Type, ExtraPayload = {} > {
+export interface Action< Type = string, ExtraPayload = {} > {
 	type: Type;
 	payload: EventPayload & ExtraPayload;
 }
@@ -34,6 +35,7 @@ interface ValuePayload {
 
 export type ChangeAction = Action< typeof CHANGE, ValuePayload >;
 export type CommitAction = Action< typeof COMMIT, ValuePayload >;
+export type ControlAction = Action< typeof CONTROL, ValuePayload >;
 export type PressUpAction = Action< typeof PRESS_UP >;
 export type PressDownAction = Action< typeof PRESS_DOWN >;
 export type PressEnterAction = Action< typeof PRESS_ENTER >;

package/src/input-control/reducer/reducer.ts

@@ -39,22 +39,32 @@ function mergeInitialState(
 }
 
 /**
- * Creates a reducer that opens the channel for external state subscription
- * and modification.
+ * Creates the base reducer which may be coupled to a specializing reducer.
+ * As its final step, for all actions other than CONTROL, the base reducer
+ * passes the state and action on through the specializing reducer. The
+ * exception for CONTROL actions is because they represent controlled updates
+ * from props and no case has yet presented for their specialization.
  *
- * This technique uses the "stateReducer" design pattern:
- * https://kentcdodds.com/blog/the-state-reducer-pattern/
- *
- * @param  composedStateReducers A custom reducer that can subscribe and modify state.
+ * @param  composedStateReducers A reducer to specialize state changes.
  * @return The reducer.
  */
 function inputControlStateReducer(
 	composedStateReducers: StateReducer
-): StateReducer {
+): StateReducer< actions.ControlAction > {
 	return ( state, action ) => {
 		const nextState = { ...state };
 
 		switch ( action.type ) {
+			/*
+			 * Controlled updates
+			 */
+			case actions.CONTROL:
+				nextState.value = action.payload.value;
+				nextState.isDirty = false;
+				nextState._event = undefined;
+				// Returns immediately to avoid invoking additional reducers.
+				return nextState;
+
 			/**
 			 * Keyboard events
 			 */
@@ -140,7 +150,7 @@ export function useInputControlStateReducer(
 	initialState: Partial< InputState > = initialInputControlState,
 	onChangeHandler: InputChangeCallback
 ) {
-	const [ state, dispatch ] = useReducer< StateReducer >(
+	const [ state, dispatch ] = useReducer(
 		inputControlStateReducer( stateReducer ),
 		mergeInitialState( initialState )
 	);
@@ -188,10 +198,15 @@ export function useInputControlStateReducer(
 
 	const currentState = useRef( state );
 	const refProps = useRef( { value: initialState.value, onChangeHandler } );
+
+	// Freshens refs to props and state so that subsequent effects have access
+	// to their latest values without their changes causing effect runs.
 	useLayoutEffect( () => {
 		currentState.current = state;
 		refProps.current = { value: initialState.value, onChangeHandler };
 	} );
+
+	// Propagates the latest state through onChange.
 	useLayoutEffect( () => {
 		if (
 			currentState.current._event !== undefined &&
@@ -205,14 +220,16 @@ export function useInputControlStateReducer(
 			} );
 		}
 	}, [ state.value, state.isDirty ] );
+
+	// Updates the state from props.
 	useLayoutEffect( () => {
 		if (
 			initialState.value !== currentState.current.value &&
 			! currentState.current.isDirty
 		) {
 			dispatch( {
-				type: actions.RESET,
-				payload: { value: initialState.value },
+				type: actions.CONTROL,
+				payload: { value: initialState.value ?? '' },
 			} );
 		}
 	}, [ initialState.value ] );

package/src/input-control/reducer/state.ts

@@ -6,7 +6,7 @@ import type { Reducer, SyntheticEvent } from 'react';
 /**
  * Internal dependencies
  */
-import type { InputAction } from './actions';
+import type { Action, InputAction } from './actions';
 
 export interface InputState {
 	_event?: SyntheticEvent;
@@ -19,7 +19,12 @@ export interface InputState {
 	value?: string;
 }
 
-export type StateReducer = Reducer< InputState, InputAction >;
+export type StateReducer< SpecializedAction = {} > = Reducer<
+	InputState,
+	SpecializedAction extends Action
+		? InputAction | SpecializedAction
+		: InputAction
+>;
 
 export const initialStateReducer: StateReducer = ( state: InputState ) => state;
 

package/src/input-control/stories/index.tsx

@@ -7,10 +7,13 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
  * Internal dependencies
  */
 import InputControl from '..';
+import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
+import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 
 const meta: ComponentMeta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
+	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: { type: null } },
@@ -37,16 +40,26 @@ Default.args = {
 	placeholder: 'Placeholder',
 };
 
+/**
+ * A `prefix` can be inserted before the input. By default, the prefix is aligned with the edge of the input border,
+ * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
+ * `<InputControlPrefixWrapper>` convenience wrapper.
+ */
 export const WithPrefix = Template.bind( {} );
 WithPrefix.args = {
 	...Default.args,
-	prefix: <span style={ { paddingLeft: 8 } }>@</span>,
+	prefix: <InputControlPrefixWrapper>@</InputControlPrefixWrapper>,
 };
 
+/**
+ * A `suffix` can be inserted after the input. By default, the suffix is aligned with the edge of the input border,
+ * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
+ * `<InputControlSuffixWrapper>` convenience wrapper.
+ */
 export const WithSuffix = Template.bind( {} );
 WithSuffix.args = {
 	...Default.args,
-	suffix: <button style={ { marginRight: 4 } }>Send</button>,
+	suffix: <InputControlSuffixWrapper>%</InputControlSuffixWrapper>,
 };
 
 export const WithSideLabel = Template.bind( {} );