@elementor/editor-editing-panel 1.0.0 → 1.2.0

package/src/components/settings-tab.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
-import { Stack } from '@elementor/ui';
+import { ControlLabel } from '@elementor/editor-controls';
 import { type Control } from '@elementor/editor-elements';
-import { SettingsField } from '../controls-registry/settings-field';
-import { AccordionSection } from './accordion-section';
+
+import { useElement } from '../contexts/element-context';
 import { Control as BaseControl } from '../controls-registry/control';
-import { ControlType, getControlByType } from '../controls-registry/controls-registry';
 import { ControlTypeContainer } from '../controls-registry/control-type-container';
-import { ControlLabel } from './control-label';
-import { useElement } from '../contexts/element-context';
+import { type ControlType, getControlByType } from '../controls-registry/controls-registry';
+import { SettingsField } from '../controls-registry/settings-field';
+import { Section } from './section';
+import { SectionsList } from './sections-list';
 
 export const SettingsTab = () => {
 	const { elementType } = useElement();
 
 	return (
-		<Stack>
+		<SectionsList>
 			{ elementType.controls.map( ( { type, value }, index ) => {
 				if ( type === 'control' ) {
 					return <Control key={ value.bind } control={ value } />;
@@ -21,7 +22,7 @@ export const SettingsTab = () => {
 
 				if ( type === 'section' ) {
 					return (
-						<AccordionSection key={ type + '.' + index } title={ value.label } defaultExpanded>
+						<Section title={ value.label } key={ type + '.' + index } defaultExpanded={ true }>
 							{ value.items?.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;
@@ -30,17 +31,16 @@ export const SettingsTab = () => {
 								// TODO: Handle 2nd level sections
 								return null;
 							} ) }
-						</AccordionSection>
+						</Section>
 					);
 				}
 
 				return null;
 			} ) }
-		</Stack>
+		</SectionsList>
 	);
 };
 
-// TODO: Create control wrapper by type for different layouts.
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 	if ( ! getControlByType( control.type as ControlType ) ) {
 		return null;

package/src/components/style-sections/background-section/background-color-field.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ColorControl, ControlLabel } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
-import { ColorControl } from '../../../controls';
 
 export const BackgroundColorField = () => {
 	return (
 		<StylesField bind="background-color">
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
 				</Grid>

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { BackgroundOverlayRepeaterControl } from '@elementor/editor-controls';
 import { Stack } from '@elementor/ui';
-import { AccordionSection } from '../../accordion-section';
+
+import { StylesField } from '../../../controls-registry/styles-field';
 import { BackgroundColorField } from './background-color-field';
 
 export const BackgroundSection = () => {
 	return (
-		<AccordionSection title={ __( 'Background', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<BackgroundColorField />
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<StylesField bind="background-image">
+				<BackgroundOverlayRepeaterControl />
+			</StylesField>
+			<BackgroundColorField />
+		</Stack>
 	);
 };

package/src/components/style-sections/border-section/border-color-field.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ColorControl, ControlLabel } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
-import { ColorControl } from '../../../controls';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
 
 export const BorderColorField = () => {
 	return (
 		<StylesField bind={ 'border-color' }>
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Border Color', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-sections/border-section/border-field.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
-import { BorderWidthField } from './border-width-field';
+
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { AddOrRemoveContent } from '../../add-or-remove-content';
 import { BorderColorField } from './border-color-field';
 import { BorderStyleField } from './border-style-field';
-import { AddOrRemoveContent } from '../../add-or-remove-content';
-import { useStylesField } from '../../../hooks/use-styles-field';
+import { BorderWidthField } from './border-width-field';
 
 const initialSize = { $$type: 'size', value: { size: 1, unit: 'px' } };
 const initialBorderWidth = {

package/src/components/style-sections/border-section/border-radius-field.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
+import type { BorderRadiusPropValue } from '@elementor/editor-props';
 import {
 	BorderCornersIcon,
 	RadiusBottomLeftIcon,
@@ -7,8 +8,8 @@ import {
 	RadiusTopLeftIcon,
 	RadiusTopRightIcon,
 } from '@elementor/icons';
-import type { BorderRadiusPropValue } from '@elementor/editor-props';
-import { EqualUnequalItems, EqualUnequalSizesControl } from '../../../controls/controls/equal-unequal-sizes-control';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
 
 const corners: EqualUnequalItems< BorderRadiusPropValue[ '$$type' ], BorderRadiusPropValue > = [

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

@@ -1,16 +1,13 @@
 import * as React from 'react';
-import { AccordionSection } from '../../accordion-section';
 import { Divider, Stack } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-import { BorderRadiusField } from './border-radius-field';
+
 import { BorderField } from './border-field';
+import { BorderRadiusField } from './border-radius-field';
 
 export const BorderSection = () => (
-	<AccordionSection title={ __( 'Border', 'elementor' ) }>
-		<Stack gap={ 1.5 }>
-			<BorderRadiusField />
-			<Divider />
-			<BorderField />
-		</Stack>
-	</AccordionSection>
+	<Stack gap={ 1.5 }>
+		<BorderRadiusField />
+		<Divider />
+		<BorderField />
+	</Stack>
 );

package/src/components/style-sections/border-section/border-style-field.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { SelectControl } from '../../../controls';
+import { ControlLabel, SelectControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
 
 const borderStyles = [
 	{ value: 'none', label: __( 'None', 'elementor' ) },
@@ -19,7 +19,7 @@ const borderStyles = [
 export const BorderStyleField = () => {
 	return (
 		<StylesField bind={ 'border-style' }>
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Border Type', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-sections/border-section/border-width-field.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon, SideAllIcon } from '@elementor/icons';
+import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
+import { type BorderWidthPropValue } from '@elementor/editor-props';
+import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
-import { BorderWidthPropValue } from '@elementor/editor-props';
-import { EqualUnequalItems, EqualUnequalSizesControl } from '../../../controls/controls/equal-unequal-sizes-control';
+
 import { StylesField } from '../../../controls-registry/styles-field';
 
 const edges: EqualUnequalItems< BorderWidthPropValue[ '$$type' ], BorderWidthPropValue > = [

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

@@ -1,18 +1,15 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { BoxShadowRepeaterControl } from '@elementor/editor-controls';
 import { Stack } from '@elementor/ui';
-import { AccordionSection } from '../../accordion-section';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { BoxShadowRepeaterControl } from '../../../controls';
 
 export const EffectsSection = () => {
 	return (
-		<AccordionSection title={ __( 'Effects', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<StylesField bind="box-shadow">
-					<BoxShadowRepeaterControl />
-				</StylesField>
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<StylesField bind="box-shadow">
+				<BoxShadowRepeaterControl />
+			</StylesField>
+		</Stack>
 	);
 };

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

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { JSX } from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	LayoutAlignCenterIcon as CenterIcon,
+	LayoutAlignLeftIcon,
+	LayoutAlignRightIcon,
+	LayoutDistributeVerticalIcon as JustifyIcon,
+} from '@elementor/icons';
+import { DirectionProvider, Grid, ThemeProvider, type ToggleButtonProps, useTheme, 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 { type FlexDirection } from './flex-direction-field';
+
+type AlignItems = 'start' | 'center' | 'end' | 'justify';
+
+export const AlignItemsField = () => {
+	const options = useOptions(),
+		{ isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind="align-items">
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Align Items', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ToggleControl options={ options } />
+						</Grid>
+					</Grid>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};
+
+const useOptions = (): ToggleButtonGroupItem< AlignItems >[] => {
+	const StartIcon = withDirection( LayoutAlignLeftIcon ),
+		EndIcon = withDirection( LayoutAlignRightIcon );
+
+	return [
+		{
+			value: 'start',
+			label: __( 'Start', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'center',
+			label: __( 'Center', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'end',
+			label: __( 'End', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'justify',
+			label: __( 'Justify', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ JustifyIcon } size={ size } />,
+			showTooltip: true,
+		},
+	];
+};
+
+const RotatedIcon = ( { icon: Icon, size }: { icon: JSX.ElementType; size: ToggleButtonProps[ 'size' ] } ) => {
+	const [ direction ] = useStylesField< FlexDirection >( 'flex-direction' ),
+		isRtl = 'rtl' === useTheme().direction,
+		rotationMultiplier = isRtl ? -1 : 1;
+
+	const rotationAngelMap: Record< FlexDirection, number > = {
+		row: 90,
+		column: 0,
+		'row-reverse': -90,
+		'column-reverse': -180,
+	};
+
+	return (
+		<Icon
+			fontSize={ size }
+			sx={ { transition: '.3s', rotate: `${ rotationAngelMap[ direction || 'row' ] * rotationMultiplier }deg` } }
+		/>
+	);
+};

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+type Displays = 'block' | 'flex';
+
+export const DisplayField = () => {
+	const options: ToggleButtonGroupItem< Displays >[] = [
+		{
+			value: 'block',
+			renderContent: () => __( 'Block', 'elementor' ),
+			label: __( 'Block', 'elementor' ),
+		},
+		{
+			value: 'flex',
+			renderContent: () => __( 'Flex', 'elementor' ),
+			label: __( 'Flex', 'elementor' ),
+		},
+	];
+
+	return (
+		<StylesField bind="display">
+			<Stack gap={ 1 }>
+				<ControlLabel>{ __( 'Display', 'elementor' ) }</ControlLabel>
+				<ToggleControl options={ options } fullWidth={ true } />
+			</Stack>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';
+import { DirectionProvider, Grid, ThemeProvider, withDirection } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+
+const options: ToggleButtonGroupItem< FlexDirection >[] = [
+	{
+		value: 'row',
+		label: __( 'Row', 'elementor' ),
+		renderContent: ( { size } ) => {
+			const StartIcon = withDirection( ArrowRightIcon );
+			return <StartIcon fontSize={ size } />;
+		},
+		showTooltip: true,
+	},
+	{
+		value: 'column',
+		label: __( 'Column', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowDownSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'row-reverse',
+		label: __( 'Row reverse', 'elementor' ),
+		renderContent: ( { size } ) => {
+			const EndIcon = withDirection( ArrowLeftIcon );
+			return <EndIcon fontSize={ size } />;
+		},
+		showTooltip: true,
+	},
+	{
+		value: 'column-reverse',
+		label: __( 'Column reverse', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowUpSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const FlexDirectionField = () => {
+	const { isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind="flex-direction">
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ToggleControl options={ options } />
+						</Grid>
+					</Grid>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};

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

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { useState } from 'react';
+import {
+	ControlLabel,
+	ControlToggleButtonGroup,
+	NumberControl,
+	type ToggleButtonGroupItem,
+} from '@elementor/editor-controls';
+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 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< number | null >( 'order' );
+
+	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order ) );
+
+	const handleToggleButtonChange = ( group: GroupControlItemOption | null ) => {
+		setGroupControlValue( group );
+
+		const orderValueMap = {
+			[ FIRST ]: FIRST_DEFAULT_VALUE,
+			[ LAST ]: LAST_DEFAULT_VALUE,
+			[ CUSTOM ]: null,
+		};
+
+		setOrder( group ? orderValueMap[ group ] : null );
+	};
+
+	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/justify-content-field.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { type JSX } from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	JustifyBottomIcon,
+	JustifyCenterIcon as CenterIcon,
+	JustifyDistributeVerticalIcon as EvenlyIcon,
+	JustifySpaceAroundVerticalIcon as AroundIcon,
+	JustifySpaceBetweenVerticalIcon as BetweenIcon,
+	JustifyTopIcon,
+} from '@elementor/icons';
+import {
+	DirectionProvider,
+	Stack,
+	ThemeProvider,
+	type ToggleButtonProps,
+	useTheme,
+	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 { type FlexDirection } from './flex-direction-field';
+
+type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+
+export const JustifyContentField = () => {
+	const options = useOptions(),
+		{ isSiteRtl } = useDirection();
+
+	return (
+		<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>
+	);
+};
+
+const useOptions = (): ToggleButtonGroupItem< JustifyContent >[] => {
+	const StartIcon = withDirection( JustifyTopIcon ),
+		EndIcon = withDirection( JustifyBottomIcon );
+
+	return [
+		{
+			value: 'start',
+			label: __( 'Start', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'center',
+			label: __( 'Center', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'end',
+			label: __( 'End', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'space-between',
+			label: __( 'Space between', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ BetweenIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'space-around',
+			label: __( 'Space around', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ AroundIcon } size={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: 'space-evenly',
+			label: __( 'Space evenly', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ EvenlyIcon } size={ size } />,
+			showTooltip: true,
+		},
+	];
+};
+
+const RotatedIcon = ( { icon: Icon, size }: { icon: JSX.ElementType; size: ToggleButtonProps[ 'size' ] } ) => {
+	const [ direction ] = useStylesField< FlexDirection >( 'flex-direction' ),
+		isRtl = 'rtl' === useTheme().direction,
+		rotationMultiplier = isRtl ? -1 : 1;
+
+	const rotationAngelMap: Record< FlexDirection, number > = {
+		row: -90,
+		column: 0,
+		'row-reverse': 90,
+		'column-reverse': 180,
+	};
+
+	return (
+		<Icon
+			fontSize={ size }
+			sx={ { transition: '.3s', rotate: `${ rotationAngelMap[ direction || 'row' ] * rotationMultiplier }deg` } }
+		/>
+	);
+};