@elementor/editor-editing-panel 1.1.0 → 1.3.0

package/src/components/style-sections/layout-section/flex-order-field.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { useState } from 'react';
+import {
+	ControlLabel,
+	ControlToggleButtonGroup,
+	NumberControl,
+	type ToggleButtonGroupItem,
+} from '@elementor/editor-controls';
+import { type NumberPropValue } from '@elementor/editor-props';
+import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
+import { DirectionProvider, Grid, Stack, ThemeProvider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { useStylesField } from '../../../hooks/use-styles-field';
+
+type GroupControlItemOption = 'first' | 'last' | 'custom';
+
+export const FIRST_DEFAULT_VALUE = -99999,
+	LAST_DEFAULT_VALUE = 99999,
+	FIRST = 'first',
+	LAST = 'last',
+	CUSTOM = 'custom';
+
+const orderValueMap = {
+	[ FIRST ]: FIRST_DEFAULT_VALUE,
+	[ LAST ]: LAST_DEFAULT_VALUE,
+};
+
+const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
+	{
+		value: FIRST,
+		label: __( 'First', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowUpSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: LAST,
+		label: __( 'Last', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowDownSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: CUSTOM,
+		label: __( 'Custom', 'elementor' ),
+		renderContent: ( { size } ) => <PencilIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const FlexOrderField = () => {
+	const { isSiteRtl } = useDirection(),
+		[ order, setOrder ] = useStylesField< NumberPropValue | null >( 'order' );
+
+	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order?.value || null ) );
+
+	const handleToggleButtonChange = ( group: GroupControlItemOption | null ) => {
+		setGroupControlValue( group );
+
+		if ( ! group || group === CUSTOM ) {
+			setOrder( null );
+
+			return;
+		}
+
+		setOrder( { $$type: 'number', value: orderValueMap[ group ] } );
+	};
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<Stack gap={ 2 }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Order', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ControlToggleButtonGroup
+								items={ items }
+								value={ groupControlValue }
+								onChange={ handleToggleButtonChange }
+								exclusive={ true }
+							/>
+						</Grid>
+					</Grid>
+
+					{ CUSTOM === groupControlValue && (
+						<StylesField bind={ 'order' }>
+							<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+								<Grid item xs={ 6 }>
+									<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
+								</Grid>
+								<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+									<NumberControl
+										min={ FIRST_DEFAULT_VALUE + 1 }
+										max={ LAST_DEFAULT_VALUE - 1 }
+										shouldForceInt={ true }
+									/>
+								</Grid>
+							</Grid>
+						</StylesField>
+					) }
+				</Stack>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};
+
+const getGroupControlValue = ( order: number | null ): GroupControlItemOption | null => {
+	if ( LAST_DEFAULT_VALUE === order ) {
+		return LAST;
+	}
+
+	if ( FIRST_DEFAULT_VALUE === order ) {
+		return FIRST;
+	}
+
+	return 0 === order || order ? CUSTOM : null;
+};

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import {
+	ControlLabel,
+	ControlToggleButtonGroup,
+	NumberControl,
+	SizeControl,
+	type ToggleButtonGroupItem,
+} from '@elementor/editor-controls';
+import type { NumberPropValue, SizePropValue } from '@elementor/editor-props';
+import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
+import { DirectionProvider, Grid, Stack, ThemeProvider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { useStylesField } from '../../../hooks/use-styles-field';
+
+type GroupItem = 'flex-grow' | 'flex-shrink' | 'custom';
+
+export const DEFAULT = 1;
+
+const items: ToggleButtonGroupItem< GroupItem >[] = [
+	{
+		value: 'flex-grow',
+		label: __( 'Grow', 'elementor' ),
+		renderContent: ( { size } ) => <ExpandIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'flex-shrink',
+		label: __( 'Shrink', 'elementor' ),
+		renderContent: ( { size } ) => <ShrinkIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'custom',
+		label: __( 'Custom', 'elementor' ),
+		renderContent: ( { size } ) => <PencilIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const FlexSizeField = () => {
+	const { isSiteRtl } = useDirection(),
+		[ growField, setGrowField ] = useStylesField< NumberPropValue | null >( 'flex-grow' ),
+		[ shrinkField, setShrinkField ] = useStylesField< NumberPropValue | null >( 'flex-shrink' ),
+		[ basisField, setBasisField ] = useStylesField< SizePropValue | null >( 'flex-basis' );
+
+	const grow = growField?.value || null,
+		shrink = shrinkField?.value || null,
+		basis = basisField?.value || null;
+
+	const currentGroup = React.useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
+		[ activeGroup, setActiveGroup ] = React.useState( currentGroup );
+
+	const onChangeGroup = ( group: GroupItem | null = null ) => {
+		setActiveGroup( group );
+		setBasisField( null );
+
+		if ( ! group || group === 'custom' ) {
+			setGrowField( null );
+			setShrinkField( null );
+
+			return;
+		}
+
+		if ( group === 'flex-grow' ) {
+			setGrowField( { $$type: 'number', value: DEFAULT } );
+			setShrinkField( null );
+
+			return;
+		}
+
+		setGrowField( null );
+		setShrinkField( { $$type: 'number', value: DEFAULT } );
+	};
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<Stack gap={ 2 }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ControlToggleButtonGroup
+								value={ activeGroup }
+								onChange={ onChangeGroup }
+								items={ items }
+								exclusive={ true }
+							/>
+						</Grid>
+					</Grid>
+
+					{ 'custom' === activeGroup && <FlexCustomField /> }
+				</Stack>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};
+
+const FlexCustomField = () => (
+	<>
+		<StylesField bind={ 'flex-grow' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Grow', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+					<NumberControl min={ 0 } shouldForceInt={ true } />
+				</Grid>
+			</Grid>
+		</StylesField>
+		<StylesField bind={ 'flex-shrink' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Shrink', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+					<NumberControl min={ 0 } shouldForceInt={ true } />
+				</Grid>
+			</Grid>
+		</StylesField>
+		<StylesField bind={ 'flex-basis' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Basis', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	</>
+);
+
+const getActiveGroup = ( {
+	grow,
+	shrink,
+	basis,
+}: {
+	grow: NumberPropValue[ 'value' ] | null;
+	shrink: NumberPropValue[ 'value' ] | null;
+	basis: SizePropValue[ 'value' ] | null;
+} ): GroupItem | null => {
+	if ( null === grow && null === shrink && ! basis ) {
+		return null;
+	}
+
+	if ( ( shrink && grow ) || basis ) {
+		return 'custom';
+	}
+
+	if ( grow === DEFAULT ) {
+		return 'flex-grow';
+	}
+
+	if ( shrink === DEFAULT ) {
+		return 'flex-shrink';
+	}
+
+	return 'custom';
+};

package/src/components/style-sections/layout-section/justify-content-field.tsx

@@ -2,81 +2,81 @@ import * as React from 'react';
 import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import {
 	JustifyBottomIcon,
-	JustifyCenterIcon,
-	JustifyDistributeVerticalIcon,
-	JustifySpaceAroundVerticalIcon,
-	JustifySpaceBetweenVerticalIcon,
+	JustifyCenterIcon as CenterIcon,
+	JustifyDistributeVerticalIcon as EvenlyIcon,
+	JustifySpaceAroundVerticalIcon as AroundIcon,
+	JustifySpaceBetweenVerticalIcon as BetweenIcon,
 	JustifyTopIcon,
 } from '@elementor/icons';
-import { Stack } from '@elementor/ui';
+import { DirectionProvider, Stack, ThemeProvider, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
-import { useStylesField } from '../../../hooks/use-styles-field';
-import { rotateFlexIcon } from './utils/rotate-flex-icon';
+import { RotatedIcon } from './utils/rotated-icon';
 
 type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 
-export const JustifyContentField = () => {
-	const [ direction ] = useStylesField( 'flex-direction' );
-
-	const { isUiRtl, isSiteRtl } = useDirection(),
-		sx = { transform: rotateFlexIcon( direction as string, -1 ) } as const,
-		shouldReverseOrder = isSiteRtl !== isUiRtl;
+const StartIcon = withDirection( JustifyTopIcon );
+const EndIcon = withDirection( JustifyBottomIcon );
 
-	const StartIcon = isSiteRtl ? JustifyBottomIcon : JustifyTopIcon,
-		EndIcon = isSiteRtl ? JustifyTopIcon : JustifyBottomIcon;
+const iconProps = {
+	isClockwise: true,
+	offset: -90,
+};
 
-	const options: ToggleButtonGroupItem< JustifyContent >[] = [
-		{
-			value: 'start',
-			label: __( 'Start', 'elementor' ),
-			renderContent: ( { size } ) => <StartIcon fontSize={ size } sx={ sx } />,
-			showTooltip: true,
-		},
-		{
-			value: 'center',
-			label: __( 'Center', 'elementor' ),
-			renderContent: ( { size } ) => <JustifyCenterIcon fontSize={ size } sx={ sx } />,
-			showTooltip: true,
-		},
-		{
-			value: 'end',
-			label: __( 'End', 'elementor' ),
-			renderContent: ( { size } ) => <EndIcon fontSize={ size } sx={ sx } />,
-			showTooltip: true,
-		},
-		{
-			value: 'space-between',
-			label: __( 'Space Between', 'elementor' ),
-			renderContent: ( { size } ) => <JustifySpaceBetweenVerticalIcon fontSize={ size } sx={ sx } />,
-			showTooltip: true,
-		},
-		{
-			value: 'space-around',
-			label: __( 'Space Around', 'elementor' ),
-			renderContent: ( { size } ) => <JustifySpaceAroundVerticalIcon fontSize={ size } sx={ sx } />,
-			showTooltip: true,
-		},
-		{
-			value: 'space-evenly',
-			label: __( 'Space Evenly', 'elementor' ),
-			renderContent: ( { size } ) => <JustifyDistributeVerticalIcon fontSize={ size } sx={ sx } />,
-			showTooltip: true,
-		},
-	];
+const options: ToggleButtonGroupItem< JustifyContent >[] = [
+	{
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'space-between',
+		label: __( 'Space between', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ BetweenIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'space-around',
+		label: __( 'Space around', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ AroundIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'space-evenly',
+		label: __( 'Space evenly', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EvenlyIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+];
 
-	if ( shouldReverseOrder ) {
-		options.reverse();
-	}
+export const JustifyContentField = () => {
+	const { isSiteRtl } = useDirection();
 
 	return (
-		<StylesField bind="justify-content">
-			<Stack gap={ 1 }>
-				<ControlLabel>{ __( 'Justify Content', 'elementor' ) }</ControlLabel>
-				<ToggleControl options={ options } fullWidth={ true } />
-			</Stack>
-		</StylesField>
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind="justify-content">
+					<Stack gap={ 1 }>
+						<ControlLabel>{ __( 'Justify content', 'elementor' ) }</ControlLabel>
+						<ToggleControl options={ options } fullWidth={ true } />
+					</Stack>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
 	);
 };

package/src/components/style-sections/layout-section/layout-section.tsx

@@ -1,17 +1,41 @@
 import * as React from 'react';
-import { Stack } from '@elementor/ui';
+import { ControlLabel } from '@elementor/editor-controls';
+import { type StringPropValue } from '@elementor/editor-props';
+import { Divider, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { AlignItemsField } from './align-items-field';
+import { AlignSelfChild } from './align-self-child-field';
 import { DisplayField } from './display-field';
+import { FlexDirectionField } from './flex-direction-field';
+import { FlexOrderField } from './flex-order-field';
+import { FlexSizeField } from './flex-size-field';
 import { JustifyContentField } from './justify-content-field';
+import { WrapField } from './wrap-field';
 
 export const LayoutSection = () => {
-	const [ display ] = useStylesField( 'display' );
+	const [ display ] = useStylesField< StringPropValue >( 'display' );
 
 	return (
 		<Stack gap={ 2 }>
 			<DisplayField />
-			{ 'flex' === display && <JustifyContentField /> }
+			{ 'flex' === display?.value && <FlexFields /> }
 		</Stack>
 	);
 };
+
+const FlexFields = () => (
+	<>
+		<FlexDirectionField />
+		<JustifyContentField />
+		<AlignItemsField />
+		<Divider />
+		<WrapField />
+		<Divider />
+		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>
+		<AlignSelfChild />
+		<FlexOrderField />
+		<FlexSizeField />
+	</>
+);

package/src/components/style-sections/layout-section/utils/rotated-icon.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { type StringPropValue } from '@elementor/editor-props';
+import { type ToggleButtonProps, useTheme } from '@elementor/ui';
+
+import { useStylesField } from '../../../../hooks/use-styles-field';
+import type { FlexDirection } from '../flex-direction-field';
+
+type Props = {
+	icon: React.JSX.ElementType;
+	size: ToggleButtonProps[ 'size' ];
+	isClockwise?: boolean;
+	offset?: number;
+};
+
+const CLOCKWISE_ANGLES: Record< FlexDirection, number > = {
+	row: 0,
+	column: 90,
+	'row-reverse': 180,
+	'column-reverse': 270,
+};
+
+const COUNTER_CLOCKWISE_ANGLES: Record< FlexDirection, number > = {
+	row: 0,
+	column: -90,
+	'row-reverse': -180,
+	'column-reverse': -270,
+};
+
+export const RotatedIcon = ( { icon: Icon, size, isClockwise = true, offset = 0 }: Props ) => {
+	const rotate = useRef( useGetTargetAngle( isClockwise, offset ) );
+	rotate.current = useGetTargetAngle( isClockwise, offset, rotate );
+
+	return <Icon fontSize={ size } sx={ { transition: '.3s', rotate: `${ rotate.current }deg` } } />;
+};
+
+const useGetTargetAngle = ( isClockwise: boolean, offset: number, existingRef?: React.MutableRefObject< number > ) => {
+	const [ direction ] = useStylesField< StringPropValue >( 'flex-direction' );
+	const isRtl = 'rtl' === useTheme().direction;
+	const rotationMultiplier = isRtl ? -1 : 1;
+	const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
+
+	const currentAngle = existingRef
+		? existingRef.current * rotationMultiplier // Multiply by rotationMultiplier to get the correct angle for RTL, as it will have returned multiplied by this
+		: angleMap[ ( direction?.value as FlexDirection ) || 'row' ] + offset;
+	const targetAngle = angleMap[ ( direction?.value as FlexDirection ) || 'row' ] + offset;
+
+	const diffToTargetAngle = ( targetAngle - currentAngle + 360 ) % 360; // Make sure the diff is between 0, 360;
+	const formattedDiff = ( ( diffToTargetAngle + 180 ) % 360 ) - 180; // Get the angle to rotate as a value between -180, 180
+
+	return ( currentAngle + formattedDiff ) * rotationMultiplier;
+};

package/src/components/style-sections/layout-section/wrap-field.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon } from '@elementor/icons';
+import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+const options: ToggleButtonGroupItem< FlexWrap >[] = [
+	{
+		value: 'nowrap',
+		label: __( 'No wrap', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowRightIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'wrap',
+		label: __( 'Wrap', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowBackIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'wrap-reverse',
+		label: __( 'Reversed wrap', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowForwardIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const WrapField = () => {
+	const { isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind={ 'flex-wrap' }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Wrap', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+							<ToggleControl options={ options } />
+						</Grid>
+					</Grid>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};

package/src/components/style-sections/position-section/position-section.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useCallback } from 'react';
-import type { PropValue } from '@elementor/editor-props';
+import type { PropValue, StringPropValue } from '@elementor/editor-props';
 import { Stack } from '@elementor/ui';
 
 import { useStylePropsHistory } from '../../../hooks/use-style-prop-history';
@@ -12,10 +12,10 @@ import { ZIndexField } from './z-index-field';
 const dimensionsPropKeys = [ 'top', 'bottom', 'left', 'right' ];
 
 export const PositionSection = () => {
-	const [ positionValue ] = useStylesField( 'position' );
+	const [ positionValue ] = useStylesField< StringPropValue >( 'position' );
 	usePositionChangeHandler();
 
-	const isNotStatic = positionValue && positionValue !== 'static';
+	const isNotStatic = positionValue && positionValue?.value !== 'static';
 
 	return (
 		<Stack gap={ 1.5 }>

package/src/components/style-sections/typography-section/line-height-field.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+export const LineHeightField = () => {
+	return (
+		<StylesField bind="line-height">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Line Height', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};