@elementor/editor-controls 1.2.0 → 1.5.0

package/src/controls/filter-repeater-control.tsx

@@ -3,12 +3,20 @@ import { useRef } from 'react';
 import {
 	blurFilterPropTypeUtil,
 	brightnessFilterPropTypeUtil,
+	contrastFilterPropTypeUtil,
+	dropShadowFilterPropTypeUtil,
 	type FilterItemPropValue,
 	filterPropTypeUtil,
+	grayscaleFilterPropTypeUtil,
+	hueRotateFilterPropTypeUtil,
+	invertFilterPropTypeUtil,
 	type PropKey,
 	type PropTypeUtil,
+	saturateFilterPropTypeUtil,
+	sepiaFilterPropTypeUtil,
 	type SizePropValue,
 } from '@elementor/editor-props';
+import { backdropFilterPropTypeUtil } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
 import { Box, Grid, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -17,9 +25,11 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 import { ControlLabel } from '../components/control-label';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
-import { Repeater } from '../components/repeater';
+import { type CollectionPropUtil, Repeater } from '../components/repeater';
 import { createControl } from '../create-control';
-import { defaultUnits } from '../utils/size-control';
+import { defaultUnits, type Unit } from '../utils/size-control';
+import { DropShadowItemContent } from './filter-control/drop-shadow-item-content';
+import { DropShadowItemLabel } from './filter-control/drop-shadow-item-label';
 import { SizeControl } from './size-control';
 
 type FilterType = FilterItemPropValue[ '$$type' ];
@@ -43,6 +53,21 @@ const filterConfig: Record< FilterType, FilterItemConfig > = {
 		propType: blurFilterPropTypeUtil,
 		units: defaultUnits.filter( ( unit ) => unit !== '%' ),
 	},
+	'drop-shadow': {
+		defaultValue: {
+			$$type: 'drop-shadow',
+			value: {
+				xAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
+				yAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
+				blur: { $$type: 'size', value: { size: 10, unit: 'px' } },
+				color: { $$type: 'color', value: 'rgba(0, 0, 0, 1)' },
+			},
+		},
+		name: __( 'Drop shadow', 'elementor' ),
+		valueName: __( 'Drop-shadow', 'elementor' ),
+		propType: dropShadowFilterPropTypeUtil,
+		units: defaultUnits.filter( ( unit ) => unit !== '%' ),
+	},
 	brightness: {
 		defaultValue: { $$type: 'amount', amount: { $$type: 'size', value: { size: 100, unit: '%' } } },
 		name: __( 'Brightness', 'elementor' ),
@@ -50,18 +75,62 @@ const filterConfig: Record< FilterType, FilterItemConfig > = {
 		propType: brightnessFilterPropTypeUtil,
 		units: [ '%' ],
 	},
+	contrast: {
+		defaultValue: { $$type: 'contrast', contrast: { $$type: 'size', value: { size: 100, unit: '%' } } },
+		name: __( 'Contrast', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: contrastFilterPropTypeUtil,
+		units: [ '%' ],
+	},
+	'hue-rotate': {
+		defaultValue: { $$type: 'hue-rotate', 'hue-rotate': { $$type: 'size', value: { size: 0, unit: 'deg' } } },
+		name: __( 'Hue Rotate', 'elementor' ),
+		valueName: __( 'Angle', 'elementor' ),
+		propType: hueRotateFilterPropTypeUtil,
+		units: [ 'deg', 'rad', 'grad', 'turn' ],
+	},
+	saturate: {
+		defaultValue: { $$type: 'saturate', saturate: { $$type: 'size', value: { size: 100, unit: '%' } } },
+		name: __( 'Saturate', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: saturateFilterPropTypeUtil,
+		units: [ '%' ],
+	},
+	grayscale: {
+		defaultValue: { $$type: 'grayscale', grayscale: { $$type: 'size', value: { size: 0, unit: '%' } } },
+		name: __( 'Grayscale', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: grayscaleFilterPropTypeUtil,
+		units: [ '%' ],
+	},
+	invert: {
+		defaultValue: { $$type: 'invert', invert: { $$type: 'size', value: { size: 0, unit: '%' } } },
+		name: __( 'Invert', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: invertFilterPropTypeUtil,
+		units: [ '%' ],
+	},
+	sepia: {
+		defaultValue: { $$type: 'sepia', sepia: { $$type: 'size', value: { size: 0, unit: '%' } } },
+		name: __( 'Sepia', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: sepiaFilterPropTypeUtil,
+		units: [ '%' ],
+	},
 };
 
 const filterKeys = Object.keys( filterConfig ) as FilterType[];
 
-const singleSizeFilterNames = filterKeys.filter( ( name ) => {
-	const filter = filterConfig[ name as FilterType ].defaultValue;
-
-	return filter[ filter.$$type ].$$type === 'size';
-} ) as FilterType[];
+const isSingleSize = ( key: FilterType ): boolean => {
+	return ! [ 'drop-shadow' ].includes( key );
+};
 
-export const FilterRepeaterControl = createControl( () => {
-	const { propType, value: filterValues, setValue, disabled } = useBoundProp( filterPropTypeUtil );
+export const FilterRepeaterControl = createControl( ( { filterPropName = 'filter' }: { filterPropName?: string } ) => {
+	const [ propUtil, label ] =
+		filterPropName === 'backdrop-filter'
+			? [ backdropFilterPropTypeUtil, __( 'Backdrop Filters', 'elementor' ) ]
+			: [ filterPropTypeUtil, __( 'Filters', 'elementor' ) ];
+	const { propType, value: filterValues, setValue, disabled } = useBoundProp( propUtil );
 
 	return (
 		<PropProvider propType={ propType } value={ filterValues } setValue={ setValue }>
@@ -70,7 +139,8 @@ export const FilterRepeaterControl = createControl( () => {
 				disabled={ disabled }
 				values={ filterValues ?? [] }
 				setValues={ setValue }
-				label={ __( 'Filter', 'elementor' ) }
+				label={ label }
+				collectionPropUtil={ propUtil }
 				itemSettings={ {
 					Icon: ItemIcon,
 					Label: ItemLabel,
@@ -87,10 +157,12 @@ export const FilterRepeaterControl = createControl( () => {
 
 const ItemIcon = () => <></>;
 
-const ItemLabel = ( props: { value: FilterItemPropValue } ) => {
-	const { $$type } = props.value;
-
-	return singleSizeFilterNames.includes( $$type ) && <SingleSizeItemLabel value={ props.value } />;
+const ItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	return isSingleSize( value.$$type ) ? (
+		<SingleSizeItemLabel value={ value } />
+	) : (
+		<DropShadowItemLabel value={ value } />
+	);
 };
 
 const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
@@ -113,8 +185,16 @@ const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
 	);
 };
 
-const ItemContent = ( { bind }: { bind: PropKey } ) => {
-	const { value: filterValues, setValue } = useBoundProp( filterPropTypeUtil );
+const ItemContent = ( {
+	bind,
+	collectionPropUtil,
+	anchorEl,
+}: {
+	bind: PropKey;
+	collectionPropUtil?: CollectionPropUtil< FilterItemPropValue >;
+	anchorEl?: HTMLElement | null;
+} ) => {
+	const { value: filterValues, setValue } = useBoundProp( collectionPropUtil ?? filterPropTypeUtil );
 	const itemIndex = parseInt( bind, 10 );
 	const item = filterValues?.[ itemIndex ];
 
@@ -124,7 +204,7 @@ const ItemContent = ( { bind }: { bind: PropKey } ) => {
 
 		newFilterValues[ itemIndex ] = {
 			$$type: filterType,
-			value: filterConfig[ filterType ].defaultValue,
+			value: { ...filterConfig[ filterType ].defaultValue },
 		} as FilterItemPropValue;
 
 		setValue( newFilterValues );
@@ -153,14 +233,20 @@ const ItemContent = ( { bind }: { bind: PropKey } ) => {
 						</Select>
 					</Grid>
 				</PopoverGridContainer>
-				<Content filterType={ item?.$$type } />
+				<Content filterType={ item?.$$type } anchorEl={ anchorEl } />
 			</PopoverContent>
 		</PropKeyProvider>
 	);
 };
 
-const Content = ( { filterType }: { filterType: FilterType } ) => {
-	return singleSizeFilterNames.includes( filterType ) && <SingleSizeItemContent filterType={ filterType } />;
+const Content = ( { filterType, anchorEl }: { filterType: FilterType; anchorEl?: HTMLElement | null } ) => {
+	const { propType, units = [] } = filterConfig[ filterType ];
+
+	return isSingleSize( filterType ) ? (
+		<SingleSizeItemContent filterType={ filterType } />
+	) : (
+		<DropShadowItemContent propType={ propType } units={ units as Unit[] } anchorEl={ anchorEl } />
+	);
 };
 
 const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) => {
@@ -168,6 +254,7 @@ const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) =>
 	const { $$type } = defaultValue;
 	const context = useBoundProp( propType );
 	const rowRef = useRef< HTMLDivElement >( null );
+	const defaultUnit = defaultValue[ $$type ].value.unit;
 
 	return (
 		<PropProvider { ...context }>
@@ -177,7 +264,7 @@ const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) =>
 						<ControlLabel>{ valueName }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 6 }>
-						<SizeControl anchorRef={ rowRef } units={ units } />
+						<SizeControl anchorRef={ rowRef } units={ units } defaultUnit={ defaultUnit } />
 					</Grid>
 				</PopoverGridContainer>
 			</PropKeyProvider>

package/src/controls/font-family-control/font-family-control.tsx

@@ -21,20 +21,32 @@ type FontFamilyControlProps = {
 const SIZE = 'tiny';
 
 export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }: FontFamilyControlProps ) => {
-	const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp( stringPropTypeUtil );
+	const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
 
+	const isShowingPlaceholder = ! fontFamily && placeholder;
+
 	return (
 		<>
 			<ControlActions>
 				<UnstableTag
 					variant="outlined"
-					label={ fontFamily }
+					label={ fontFamily || placeholder }
 					endIcon={ <ChevronDownIcon fontSize={ SIZE } /> }
 					{ ...bindTrigger( popoverState ) }
 					fullWidth
 					disabled={ disabled }
+					sx={
+						isShowingPlaceholder
+							? {
+									'& .MuiTag-label': {
+										color: ( theme ) => theme.palette.text.tertiary,
+									},
+									textTransform: 'capitalize',
+							  }
+							: undefined
+					}
 				/>
 			</ControlActions>
 			<Popover

package/src/controls/image-control.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { imagePropTypeUtil } from '@elementor/editor-props';
-import { Stack } from '@elementor/ui';
+import { Grid, Stack } from '@elementor/ui';
 import { type MediaType } from '@elementor/wp-media';
+import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
 import { createControl } from '../create-control';
 import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 import { ImageMediaControl } from './image-media-control';
@@ -17,23 +19,50 @@ type ImageControlProps = {
 export const ImageControl = createControl( ( { sizes, showMode = 'all' }: ImageControlProps ) => {
 	const propContext = useBoundProp( imagePropTypeUtil );
 
+	let componentToRender;
+	switch ( showMode ) {
+		case 'media':
+			componentToRender = <ImageSrcControl />;
+			break;
+		case 'sizes':
+			componentToRender = <ImageSizeControl sizes={ sizes } />;
+			break;
+		case 'all':
+		default:
+			componentToRender = (
+				<Stack gap={ 1.5 }>
+					<ControlFormLabel>{ __( 'Image', 'elementor' ) }</ControlFormLabel>
+					<ImageSrcControl />
+					<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlFormLabel>{ __( 'Resolution', 'elementor' ) }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+							<ImageSizeControl sizes={ sizes } />
+						</Grid>
+					</Grid>
+				</Stack>
+			);
+	}
+
+	return <PropProvider { ...propContext }>{ componentToRender }</PropProvider>;
+} );
+
+const ImageSrcControl = () => {
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
 	const mediaTypes: MediaType[] = allowSvgUpload ? [ 'image', 'svg' ] : [ 'image' ];
 
 	return (
-		<PropProvider { ...propContext }>
-			<Stack gap={ 1.5 }>
-				{ [ 'all', 'media' ].includes( showMode ) ? (
-					<PropKeyProvider bind={ 'src' }>
-						<ImageMediaControl mediaTypes={ mediaTypes } />
-					</PropKeyProvider>
-				) : null }
-				{ [ 'all', 'sizes' ].includes( showMode ) ? (
-					<PropKeyProvider bind={ 'size' }>
-						<SelectControl options={ sizes } />
-					</PropKeyProvider>
-				) : null }
-			</Stack>
-		</PropProvider>
+		<PropKeyProvider bind={ 'src' }>
+			<ImageMediaControl mediaTypes={ mediaTypes } />
+		</PropKeyProvider>
 	);
-} );
+};
+
+const ImageSizeControl = ( { sizes }: { sizes: ImageControlProps[ 'sizes' ] } ) => {
+	return (
+		<PropKeyProvider bind={ 'size' }>
+			<SelectControl options={ sizes } />
+		</PropKeyProvider>
+	);
+};

package/src/controls/key-value-control.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
-import { type ChangeEvent, useMemo, useState } from 'react';
-import { keyValuePropTypeUtil } from '@elementor/editor-props';
-import { FormHelperText, FormLabel, Grid, TextField } from '@elementor/ui';
+import { useMemo, useState } from 'react';
+import {
+	type CreateOptions,
+	isTransformable,
+	keyValuePropTypeUtil,
+	type PropKey,
+	type Props,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
+import { FormHelperText, FormLabel, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useBoundProp } from '../bound-prop-context';
-import ControlActions from '../control-actions/control-actions';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { createControl } from '../create-control';
-
-type FieldType = 'key' | 'value';
+import { TextControl } from './text-control';
 
 type KeyValueControlProps = {
 	keyName?: string;
@@ -19,9 +24,9 @@ type KeyValueControlProps = {
 };
 
 export const KeyValueControl = createControl( ( props: KeyValueControlProps = {} ) => {
-	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
-	const [ keyError, setKeyError ] = useState< string | null >( null );
-	const [ valueError, setValueError ] = useState< string | null >( null );
+	const { value, setValue, ...propContext } = useBoundProp( keyValuePropTypeUtil );
+	const [ keyError, setKeyError ] = useState< string >( '' );
+	const [ valueError, setValueError ] = useState< string >( '' );
 
 	const [ sessionState, setSessionState ] = useState( {
 		key: value?.key?.value || '',
@@ -43,31 +48,48 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 	const validate = ( newValue: string, fieldType: string ): boolean => {
 		if ( fieldType === 'key' && keyRegex ) {
 			const isValid = keyRegex.test( newValue );
-			setKeyError( isValid ? null : errMsg );
+			setKeyError( isValid ? '' : errMsg );
+
 			return isValid;
 		} else if ( fieldType === 'value' && valueRegex ) {
 			const isValid = valueRegex.test( newValue );
-			setValueError( isValid ? null : errMsg );
+			setValueError( isValid ? '' : errMsg );
+
 			return isValid;
 		}
+
 		return true;
 	};
 
-	const handleChange = ( event: ChangeEvent< HTMLInputElement >, fieldType: FieldType ) => {
-		const newValue = event.target.value;
+	const handleChange = ( newValue: Props, options?: CreateOptions, meta?: { bind?: PropKey } ) => {
+		const fieldType = meta?.bind;
+
+		if ( ! fieldType ) {
+			return;
+		}
+
+		const newChangedValue = newValue[ fieldType ];
+
+		if ( isTransformable( newChangedValue ) && newChangedValue.$$type === 'dynamic' ) {
+			setValue( {
+				...value,
+				[ fieldType ]: newChangedValue,
+			} );
+
+			return;
+		}
+
+		const extractedValue = stringPropTypeUtil.extract( newChangedValue );
 
 		setSessionState( ( prev ) => ( {
 			...prev,
-			[ fieldType ]: newValue,
+			[ fieldType ]: extractedValue,
 		} ) );
 
-		if ( validate( newValue, fieldType ) ) {
+		if ( extractedValue && validate( extractedValue, fieldType ) ) {
 			setValue( {
 				...value,
-				[ fieldType ]: {
-					value: newValue,
-					$$type: 'string',
-				},
+				[ fieldType ]: newChangedValue,
 			} );
 		} else {
 			setValue( {
@@ -80,40 +102,29 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 		}
 	};
 
-	const isKeyInvalid = keyError !== null;
-	const isValueInvalid = valueError !== null;
-
 	return (
-		<ControlActions>
+		<PropProvider { ...propContext } value={ value } setValue={ handleChange }>
 			<Grid container gap={ 1.5 }>
 				<Grid item xs={ 12 }>
 					<FormLabel size="tiny">{ keyLabel }</FormLabel>
-					<TextField
-						// eslint-disable-next-line jsx-a11y/no-autofocus
-						autoFocus
-						sx={ { pt: 1 } }
-						size="tiny"
-						fullWidth
-						value={ sessionState.key }
-						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'key' ) }
-						error={ isKeyInvalid }
-					/>
-					{ isKeyInvalid && <FormHelperText error>{ keyError }</FormHelperText> }
+					<PropKeyProvider bind={ 'key' }>
+						<TextControl inputValue={ sessionState.key } error={ !! keyError } sx={ { pt: 1 } } />
+					</PropKeyProvider>
+					{ !! keyError && <FormHelperText error>{ keyError }</FormHelperText> }
 				</Grid>
 				<Grid item xs={ 12 }>
 					<FormLabel size="tiny">{ valueLabel }</FormLabel>
-					<TextField
-						sx={ { pt: 1 } }
-						size="tiny"
-						fullWidth
-						value={ sessionState.value }
-						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'value' ) }
-						disabled={ isKeyInvalid }
-						error={ isValueInvalid }
-					/>
-					{ isValueInvalid && <FormHelperText error>{ valueError }</FormHelperText> }
+					<PropKeyProvider bind={ 'value' }>
+						<TextControl
+							inputValue={ sessionState.value }
+							error={ !! valueError }
+							inputDisabled={ !! keyError }
+							sx={ { pt: 1 } }
+						/>
+					</PropKeyProvider>
+					{ !! valueError && <FormHelperText error>{ valueError }</FormHelperText> }
 				</Grid>
 			</Grid>
-		</ControlActions>
+		</PropProvider>
 	);
 } );

package/src/controls/link-control.tsx

@@ -10,6 +10,7 @@ import {
 	urlPropTypeUtil,
 } from '@elementor/editor-props';
 import { InfoTipCard } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 import { AlertTriangleIcon, MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
@@ -29,6 +30,7 @@ import { ControlFormLabel } from '../components/control-form-label';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { type ControlProps } from '../utils/types';
+import { SwitchControl } from './switch-control';
 
 type Props = ControlProps< {
 	queryOptions: {
@@ -191,7 +193,14 @@ export const LinkControl = createControl( ( props: Props ) => {
 							</ControlActions>
 						</PropKeyProvider>
 						<PropKeyProvider bind={ 'isTargetBlank' }>
-							<SwitchControl disabled={ propContext.disabled || ! value } />
+							<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
+								<Grid item>
+									<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
+								</Grid>
+								<Grid item sx={ { marginInlineEnd: -1 } }>
+									<SwitchControlComponent disabled={ propContext.disabled || ! value } />
+								</Grid>
+							</Grid>
 						</PropKeyProvider>
 					</Stack>
 				</Collapse>
@@ -215,31 +224,27 @@ const ToggleIconControl = ( { disabled, active, onIconClick, label }: ToggleIcon
 	);
 };
 
-// @TODO Should be refactored in ED-16323
-const SwitchControl = ( { disabled }: { disabled: boolean } ) => {
-	const { value = false, setValue } = useBoundProp( booleanPropTypeUtil );
+const SwitchControlComponent = ( { disabled }: { disabled: boolean } ) => {
+	const { value, setValue } = useBoundProp( booleanPropTypeUtil );
+	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
+
+	if ( isVersion331Active ) {
+		return <SwitchControl />;
+	}
 
 	const onClick = () => {
 		setValue( ! value );
 	};
 
-	const inputProps = disabled
-		? {
-				style: {
-					opacity: 0,
-				},
-		  }
-		: {};
-
 	return (
-		<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
-			<Grid item>
-				<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
-			</Grid>
-			<Grid item sx={ { marginInlineEnd: -1 } }>
-				<Switch checked={ value } onClick={ onClick } disabled={ disabled } inputProps={ inputProps } />
-			</Grid>
-		</Grid>
+		<Switch
+			checked={ value ?? false }
+			onClick={ onClick }
+			disabled={ disabled }
+			inputProps={ {
+				...( disabled ? { style: { opacity: 0 } } : {} ),
+			} }
+		/>
 	);
 };
 

package/src/controls/linked-dimensions-control.tsx

@@ -68,7 +68,7 @@ export const LinkedDimensionsControl = createControl(
 				propType={ propType }
 				value={ dimensionsValue }
 				setValue={ setDimensionsValue }
-				disabled={ disabled }
+				isDisabled={ () => disabled }
 			>
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					{ isUsingNestedProps ? (