@elementor/editor-editing-panel 1.22.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,16 +39,16 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.4",
-    "@elementor/editor-controls": "0.19.1",
+    "@elementor/editor": "0.18.5",
+    "@elementor/editor-controls": "0.21.0",
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.6.6",
-    "@elementor/editor-panels": "0.13.1",
+    "@elementor/editor-elements": "0.7.0",
+    "@elementor/editor-panels": "0.14.0",
     "@elementor/editor-props": "0.11.1",
     "@elementor/editor-responsive": "0.13.3",
     "@elementor/editor-styles": "0.6.4",
-    "@elementor/editor-styles-repository": "0.8.0",
-    "@elementor/editor-ui": "0.4.3",
+    "@elementor/editor-styles-repository": "0.8.1",
+    "@elementor/editor-ui": "0.5.1",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.37.0",
     "@elementor/locations": "0.7.7",

package/src/components/add-or-remove-content.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { type PropsWithChildren } from 'react';
-import { ControlLabel } from '@elementor/editor-controls';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { Collapse, IconButton, Stack } from '@elementor/ui';
 
+import { ControlLabel } from './control-label';
 import { SectionContent } from './section-content';
 
 const SIZE = 'tiny';

package/src/components/{control-label-with-adornments.tsx → control-label.tsx}

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { type PropsWithChildren } from 'react';
-import { ControlAdornments, ControlLabel } from '@elementor/editor-controls';
+import { ControlAdornments, ControlFormLabel } from '@elementor/editor-controls';
 import { Stack } from '@elementor/ui';
 
-export const ControlLabelWithAdornments = ( { children }: PropsWithChildren< object > ) => {
+export const ControlLabel = ( { children }: PropsWithChildren< object > ) => {
 	return (
 		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
-			<ControlLabel>{ children }</ControlLabel>
+			<ControlFormLabel>{ children }</ControlFormLabel>
 			<ControlAdornments />
 		</Stack>
 	);

package/src/components/css-classes/css-class-item.tsx

@@ -9,6 +9,7 @@ import {
 	Chip,
 	type ChipOwnProps,
 	Stack,
+	type Theme,
 	Typography,
 	UnstableChipGroup,
 	usePopupState,
@@ -70,7 +71,15 @@ export function CssClassItem( {
 
 	return (
 		<>
-			<UnstableChipGroup ref={ setChipRef } { ...chipGroupProps } aria-label={ `Edit ${ label }` } role="group">
+			<UnstableChipGroup
+				ref={ setChipRef }
+				{ ...chipGroupProps }
+				aria-label={ `Edit ${ label }` }
+				role="group"
+				sx={ ( theme: Theme ) => ( {
+					'&.MuiChipGroup-root.MuiAutocomplete-tag': { margin: theme.spacing( 0.125 ) },
+				} ) }
+			>
 				<Chip
 					size={ CHIP_SIZE }
 					label={
@@ -98,12 +107,13 @@ export function CssClassItem( {
 						onClickActive( id );
 					} }
 					aria-pressed={ isActive }
-					sx={ {
+					sx={ ( theme: Theme ) => ( {
 						cursor: isActive && allowRename && ! isShowingState ? 'text' : 'pointer',
+						borderRadius: `${ theme.shape.borderRadius * 0.75 }px`,
 						'&.Mui-focusVisible': {
 							boxShadow: 'none !important',
 						},
-					} }
+					} ) }
 				/>
 				{ ! isEditing && (
 					<Chip
@@ -122,11 +132,12 @@ export function CssClassItem( {
 						color={ color }
 						{ ...bindTrigger( popupState ) }
 						aria-label={ __( 'Open CSS Class Menu', 'elementor' ) }
-						sx={ {
+						sx={ ( theme: Theme ) => ( {
+							borderRadius: `${ theme.shape.borderRadius * 0.75 }px`,
 							paddingRight: 0,
 							...( ! isShowingState ? { paddingLeft: 0 } : {} ),
 							'.MuiChip-label': isShowingState ? { paddingRight: 0 } : { padding: 0 },
-						} }
+						} ) }
 					/>
 				) }
 			</UnstableChipGroup>

package/src/components/css-classes/css-class-menu.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
-import { bindMenu, Divider, ListSubheader, Menu, MenuItem, type PopupState } from '@elementor/ui';
+import { MenuListItem } from '@elementor/editor-ui';
+import { bindMenu, Divider, Menu, MenuSubheader, type PopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
@@ -39,9 +40,9 @@ export function CssClassMenu( { styleId, provider, popupState, handleRename, anc
 		>
 			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
 			{ getMenuItemsByProvider( { provider, styleId, handleRename, closeMenu: popupState.close } ) }
-			<ListSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
+			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
 				{ __( 'Pseudo classes', 'elementor' ) }
-			</ListSubheader>
+			</MenuSubheader>
 			<StateMenuItem key="normal" state={ null } styleId={ styleId } closeMenu={ popupState.close } />
 			{ STATES.map( ( state ) => {
 				return (
@@ -79,12 +80,12 @@ function getMenuItemsByProvider( {
 
 	if ( actions.length ) {
 		actions.unshift(
-			<ListSubheader
+			<MenuSubheader
 				key="provider-label"
 				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }
 			>
 				{ providerInstance?.labels?.singular }
-			</ListSubheader>
+			</MenuSubheader>
 		);
 		actions.push( <Divider key="provider-actions-divider" /> );
 	}
@@ -106,7 +107,7 @@ function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemPr
 	const isSelected = state === activeState && isActive;
 
 	return (
-		<StyledMenuItem
+		<MenuListItem
 			{ ...props }
 			selected={ isSelected }
 			sx={ { textTransform: 'capitalize' } }
@@ -121,7 +122,7 @@ function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemPr
 			} }
 		>
 			{ state ? state : 'Normal' }
-		</StyledMenuItem>
+		</MenuListItem>
 	);
 }
 
@@ -129,7 +130,7 @@ function UnapplyClassMenuItem( { styleId, closeMenu, ...props }: { styleId: stri
 	const unapplyClass = useUnapplyClass( styleId );
 
 	return (
-		<StyledMenuItem
+		<MenuListItem
 			{ ...props }
 			onClick={ () => {
 				unapplyClass();
@@ -137,7 +138,7 @@ function UnapplyClassMenuItem( { styleId, closeMenu, ...props }: { styleId: stri
 			} }
 		>
 			{ __( 'Remove', 'elementor' ) }
-		</StyledMenuItem>
+		</MenuListItem>
 	);
 }
 
@@ -150,7 +151,7 @@ function RenameClassMenuItem( {
 	closeMenu: () => void;
 } ) {
 	return (
-		<StyledMenuItem
+		<MenuListItem
 			{ ...props }
 			onClick={ () => {
 				closeMenu();
@@ -158,10 +159,6 @@ function RenameClassMenuItem( {
 			} }
 		>
 			{ __( 'Rename', 'elementor' ) }
-		</StyledMenuItem>
+		</MenuListItem>
 	);
 }
-
-const StyledMenuItem = ( { ...props } ) => (
-	<MenuItem { ...props } sx={ { ...( props.sx ?? {} ), typography: 'caption', color: 'text.primary' } } />
-);

package/src/components/css-classes/css-class-selector.tsx

@@ -26,7 +26,7 @@ const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 50;
 
 type StyleDefOption = Option & {
-	color: 'primary' | 'global';
+	color: 'accent' | 'global';
 	icon: ReactElement | null;
 	provider: string;
 };
@@ -35,7 +35,7 @@ const EMPTY_OPTION = {
 	label: __( 'local', 'elementor' ),
 	value: null,
 	fixed: true,
-	color: 'primary',
+	color: 'accent',
 	icon: <MapPinIcon />,
 	provider: ELEMENTS_STYLES_PROVIDER_KEY,
 } satisfies StyleDefOption;
@@ -145,7 +145,7 @@ function useOptions() {
 					label: styleDef.label,
 					value: styleDef.id,
 					fixed: isElements,
-					color: isElements ? 'primary' : 'global',
+					color: isElements ? 'accent' : 'global',
 					icon: isElements ? <MapPinIcon /> : null,
 					provider: provider.key,
 					group: provider.labels?.plural,

package/src/components/editing-panel-tabs.tsx

@@ -19,7 +19,14 @@ export const EditingPanelTabs = () => {
 		// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
 		<Fragment key={ element.id }>
 			<Stack direction="column" sx={ { width: '100%' } }>
-				<Tabs variant="fullWidth" indicatorColor="secondary" textColor="inherit" { ...getTabsProps() }>
+				<Tabs
+					variant="fullWidth"
+					indicatorColor="secondary"
+					textColor="inherit"
+					size="small"
+					sx={ { mt: 0.5 } }
+					{ ...getTabsProps() }
+				>
 					<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
 					<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
 				</Tabs>

package/src/components/editing-panel.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ControlActionsProvider, ControlReplacementProvider } from '@elementor/editor-controls';
 import { useSelectedElement } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
+import { ThemeProvider } from '@elementor/editor-ui';
 import { AtomIcon } from '@elementor/icons';
 import { SessionStorageProvider } from '@elementor/session';
 import { ErrorBoundary } from '@elementor/ui';
@@ -30,21 +31,23 @@ export const EditingPanel = () => {
 	return (
 		<ErrorBoundary fallback={ <EditorPanelErrorFallback /> }>
 			<SessionStorageProvider prefix={ 'elementor' }>
-				<Panel>
-					<PanelHeader>
-						<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
-						<AtomIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
-					</PanelHeader>
-					<PanelBody>
-						<ControlActionsProvider items={ menuItems }>
-							<ControlReplacementProvider { ...controlReplacement }>
-								<ElementProvider element={ element } elementType={ elementType }>
-									<EditingPanelTabs />
-								</ElementProvider>
-							</ControlReplacementProvider>
-						</ControlActionsProvider>
-					</PanelBody>
-				</Panel>
+				<ThemeProvider>
+					<Panel>
+						<PanelHeader>
+							<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
+							<AtomIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
+						</PanelHeader>
+						<PanelBody>
+							<ControlActionsProvider items={ menuItems }>
+								<ControlReplacementProvider { ...controlReplacement }>
+									<ElementProvider element={ element } elementType={ elementType }>
+										<EditingPanelTabs />
+									</ElementProvider>
+								</ControlReplacementProvider>
+							</ControlActionsProvider>
+						</PanelBody>
+					</Panel>
+				</ThemeProvider>
 			</SessionStorageProvider>
 		</ErrorBoundary>
 	);

package/src/components/multi-combobox.tsx

@@ -8,6 +8,7 @@ import {
 	createFilterOptions,
 	styled,
 	TextField,
+	type Theme,
 } from '@elementor/ui';
 
 export type Option = {
@@ -63,7 +64,17 @@ export function MultiCombobox< TOption extends Option >( {
 			value={ selected }
 			options={ options }
 			renderGroup={ ( params ) => <Group { ...params } /> }
-			renderInput={ ( params ) => <TextField { ...params } /> }
+			renderInput={ ( params ) => (
+				<TextField
+					{ ...params }
+					sx={ ( theme: Theme ) => ( {
+						'.MuiAutocomplete-inputRoot.MuiInputBase-adornedStart': {
+							paddingLeft: theme.spacing( 0.25 ),
+							paddingRight: theme.spacing( 0.25 ),
+						},
+					} ) }
+				/>
+			) }
 			onChange={ ( _, selectedOrInputValue, reason ) => {
 				const inputValue = selectedOrInputValue.find( ( option ) => typeof option === 'string' );
 				const optionsAndActions = selectedOrInputValue.filter( ( option ) => typeof option !== 'string' );

package/src/components/section.tsx

@@ -26,7 +26,7 @@ export function Section( { title, children, defaultExpanded = false }: Props ) {
 			>
 				<ListItemText
 					secondary={ title }
-					secondaryTypographyProps={ { sx: { typography: 'caption', fontWeight: 'bold' } } }
+					secondaryTypographyProps={ { color: 'text.primary', variant: 'caption', fontWeight: 'bold' } }
 				/>
 				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>

package/src/components/settings-tab.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel } from '@elementor/editor-controls';
+import { ControlFormLabel } from '@elementor/editor-controls';
 import { type Control } from '@elementor/editor-elements';
 import { SessionStorageProvider } from '@elementor/session';
 
@@ -52,7 +52,7 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 	return (
 		<SettingsField bind={ control.bind }>
 			<ControlTypeContainer controlType={ control.type as ControlType }>
-				{ control.label ? <ControlLabel>{ control.label }</ControlLabel> : null }
+				{ control.label ? <ControlFormLabel>{ control.label }</ControlFormLabel> : null }
 				<BaseControl type={ control.type as ControlType } props={ control.props } />
 			</ControlTypeContainer>
 		</SettingsField>

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ColorControl, ControlLabel } from '@elementor/editor-controls';
+import { ColorControl } 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';
 
 export const BorderColorField = () => {
 	return (

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SelectControl } from '@elementor/editor-controls';
+import { 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' ) },

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import {
 	JustifyBottomIcon,
 	JustifyCenterIcon as CenterIcon,
@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
 type AlignContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import {
 	LayoutAlignCenterIcon as CenterIcon,
 	LayoutAlignLeftIcon,
@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
 type AlignItems = 'start' | 'center' | 'end' | 'stretch';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import {
 	LayoutAlignCenterIcon as CenterIcon,
 	LayoutAlignLeftIcon,
@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
 type AlignItems = 'start' | 'center' | 'end' | 'stretch';

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex';
 

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { 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';
+import { ControlLabel } from '../../control-label';
 
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 

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

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import {
-	ControlLabel,
-	ControlToggleButtonGroup,
-	NumberControl,
-	type ToggleButtonGroupItem,
-} from '@elementor/editor-controls';
+import { 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, ThemeProvider } from '@elementor/ui';
@@ -14,6 +9,7 @@ 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 { ControlLabel } from '../../control-label';
 import { SectionContent } from '../../section-content';
 
 type GroupControlItemOption = 'first' | 'last' | 'custom';
@@ -71,23 +67,23 @@ export const FlexOrderField = () => {
 	return (
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
-				<SectionContent>
-					<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 }
-							/>
+				<StylesField bind={ 'order' }>
+					<SectionContent>
+						<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>
-					</Grid>
 
-					{ CUSTOM === groupControlValue && (
-						<StylesField bind={ 'order' }>
+						{ CUSTOM === groupControlValue && (
 							<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 								<Grid item xs={ 6 }>
 									<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
@@ -100,9 +96,9 @@ export const FlexOrderField = () => {
 									/>
 								</Grid>
 							</Grid>
-						</StylesField>
-					) }
-				</SectionContent>
+						) }
+					</SectionContent>
+				</StylesField>
 			</ThemeProvider>
 		</DirectionProvider>
 	);

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useMemo, useState } from 'react';
 import {
-	ControlLabel,
 	ControlToggleButtonGroup,
 	NumberControl,
 	SizeControl,
@@ -9,12 +8,13 @@ import {
 } from '@elementor/editor-controls';
 import type { NumberPropValue, SizePropValue } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { DirectionProvider, Grid, ThemeProvider, Typography } 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 { ControlLabel } from '../../control-label';
 import { SectionContent } from '../../section-content';
 
 type GroupItem = 'flex-grow' | 'flex-shrink' | 'custom';
@@ -81,9 +81,12 @@ export const FlexSizeField = () => {
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
 				<SectionContent>
+					<Typography fontSize="large">{ activeGroup }</Typography>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+							<StylesField bind={ activeGroup ?? '' }>
+								<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+							</StylesField>
 						</Grid>
 						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
 							<ControlToggleButtonGroup
@@ -94,7 +97,6 @@ export const FlexSizeField = () => {
 							/>
 						</Grid>
 					</Grid>
-
 					{ 'custom' === activeGroup && <FlexCustomField /> }
 				</SectionContent>
 			</ThemeProvider>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import {
 	JustifyBottomIcon,
 	JustifyCenterIcon as CenterIcon,
@@ -13,9 +13,10 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
-type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
 
 const StartIcon = withDirection( JustifyTopIcon );
 const EndIcon = withDirection( JustifyBottomIcon );
@@ -27,7 +28,7 @@ const iconProps = {
 
 const options: ToggleButtonGroupItem< JustifyContent >[] = [
 	{
-		value: 'start',
+		value: 'flex-start',
 		label: __( 'Start', 'elementor' ),
 		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
 		showTooltip: true,
@@ -39,7 +40,7 @@ const options: ToggleButtonGroupItem< JustifyContent >[] = [
 		showTooltip: true,
 	},
 	{
-		value: 'end',
+		value: 'flex-end',
 		label: __( 'End', 'elementor' ),
 		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
 		showTooltip: true,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel } from '@elementor/editor-controls';
+import { ControlFormLabel } from '@elementor/editor-controls';
 import { useParentElement } from '@elementor/editor-elements';
 import { type StringPropValue } from '@elementor/editor-props';
 import { __ } from '@wordpress/i18n';
@@ -54,7 +54,7 @@ const FlexFields = () => {
 const FlexChildFields = () => (
 	<>
 		<PanelDivider />
-		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>
+		<ControlFormLabel>{ __( 'Flex child', 'elementor' ) }</ControlFormLabel>
 		<AlignSelfChild />
 		<FlexOrderField />
 		<FlexSizeField />

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

@@ -36,8 +36,10 @@ export const RotatedIcon = ( {
 	disableRotationForReversed = false,
 }: Props ) => {
 	const rotate = useRef( useGetTargetAngle( isClockwise, offset, disableRotationForReversed ) );
+	// eslint-disable-next-line react-compiler/react-compiler
 	rotate.current = useGetTargetAngle( isClockwise, offset, disableRotationForReversed, rotate );
 
+	// eslint-disable-next-line react-compiler/react-compiler
 	return <Icon fontSize={ size } sx={ { transition: '.3s', rotate: `${ rotate.current }deg` } } />;
 };