@elementor/editor-editing-panel 1.23.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.23.0",
+  "version": "1.27.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,16 +39,17 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.4",
-    "@elementor/editor-controls": "0.20.0",
+    "@elementor/editor": "0.18.5",
+    "@elementor/editor-canvas": "0.17.0",
+    "@elementor/editor-controls": "0.24.0",
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.7.0",
-    "@elementor/editor-panels": "0.13.1",
+    "@elementor/editor-elements": "0.8.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.1",
-    "@elementor/editor-ui": "0.5.0",
+    "@elementor/editor-responsive": "0.13.4",
+    "@elementor/editor-styles": "0.6.5",
+    "@elementor/editor-styles-repository": "0.8.3",
+    "@elementor/editor-ui": "0.7.0",
     "@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>
@@ -143,11 +154,11 @@ export function CssClassItem( {
 
 const validateLabel = ( newLabel: string ) => {
 	if ( ! stylesRepository.isLabelValid( newLabel ) ) {
-		return __( 'Format is not valid', 'elementor' );
+		return __( 'Invalid format', 'elementor' );
 	}
 
 	if ( stylesRepository.isLabelExist( newLabel ) ) {
-		return __( 'Existing name', 'elementor' );
+		return __( 'Name exists', 'elementor' );
 	}
 
 	return null;

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

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
-import { stylesRepository } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_PROVIDER_KEY, stylesRepository } from '@elementor/editor-styles-repository';
 import { MenuListItem } from '@elementor/editor-ui';
-import { bindMenu, Divider, Menu, MenuSubheader, type PopupState } from '@elementor/ui';
+import { bindMenu, Divider, Menu, MenuSubheader, type PopupState, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
 import { useUnapplyClass } from '../../hooks/use-unapply-class';
+import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
+import { StyleIndicator, type StyleIndicatorVariant } from '../style-indicator';
 
 const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
 
@@ -19,13 +21,17 @@ type CssClassMenuProps = {
 };
 
 export function CssClassMenu( { styleId, provider, popupState, handleRename, anchorEl }: CssClassMenuProps ) {
+	const styledStates = useStyledStates( styleId );
+
+	const indicatorVariant = provider === ELEMENTS_STYLES_PROVIDER_KEY ? 'local' : 'global';
+
 	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
 		e.stopPropagation();
 	};
 
 	return (
 		<Menu
-			MenuListProps={ { dense: true } }
+			MenuListProps={ { dense: true, sx: { minWidth: '160px' } } }
 			{ ...bindMenu( popupState ) }
 			anchorEl={ anchorEl }
 			anchorOrigin={ {
@@ -41,18 +47,44 @@ 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 } ) }
 			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
-				{ __( 'Pseudo classes', 'elementor' ) }
+				{ __( 'States', 'elementor' ) }
 			</MenuSubheader>
-			<StateMenuItem key="normal" state={ null } styleId={ styleId } closeMenu={ popupState.close } />
+			<StateMenuItem
+				key="normal"
+				state={ null }
+				styleId={ styleId }
+				closeMenu={ popupState.close }
+				isStyled={ styledStates.normal }
+				indicatorVariant={ indicatorVariant }
+			/>
 			{ STATES.map( ( state ) => {
 				return (
-					<StateMenuItem key={ state } state={ state } styleId={ styleId } closeMenu={ popupState.close } />
+					<StateMenuItem
+						key={ state }
+						state={ state }
+						styleId={ styleId }
+						closeMenu={ popupState.close }
+						isStyled={ styledStates[ state ] }
+						indicatorVariant={ indicatorVariant }
+					/>
 				);
 			} ) }
 		</Menu>
 	);
 }
 
+function useStyledStates( styleId: string | null ): Partial< Record< StyleDefinitionStateWithNormal, true > > {
+	const { meta } = useStyle();
+
+	const styleDef = stylesRepository.all().find( ( style ) => style.id === styleId );
+
+	return Object.fromEntries(
+		styleDef?.variants
+			.filter( ( variant ) => meta.breakpoint === variant.meta.breakpoint )
+			.map( ( variant ) => [ variant.meta.state ?? 'normal', true ] ) ?? []
+	);
+}
+
 function getMenuItemsByProvider( {
 	provider,
 	styleId,
@@ -82,7 +114,7 @@ function getMenuItemsByProvider( {
 		actions.unshift(
 			<MenuSubheader
 				key="provider-label"
-				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }
+				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1, textTransform: 'capitalize' } }
 			>
 				{ providerInstance?.labels?.singular }
 			</MenuSubheader>
@@ -97,9 +129,18 @@ type StateMenuItemProps = {
 	state: StyleDefinitionState;
 	styleId: string | null;
 	closeMenu: () => void;
+	isStyled?: boolean;
+	indicatorVariant: StyleIndicatorVariant;
 };
 
-function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemProps ) {
+function StateMenuItem( {
+	state,
+	styleId,
+	closeMenu,
+	isStyled = false,
+	indicatorVariant,
+	...props
+}: StateMenuItemProps ) {
 	const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
 	const { state: activeState } = meta;
 
@@ -121,7 +162,12 @@ function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemPr
 				closeMenu();
 			} }
 		>
-			{ state ? state : 'Normal' }
+			<Stack gap={ 0.75 } direction="row" alignItems="center">
+				{ isStyled && (
+					<StyleIndicator aria-label={ __( 'Has style', 'elementor' ) } variant={ indicatorVariant } />
+				) }
+				{ state ?? 'normal' }
+			</Stack>
 		</MenuListItem>
 	);
 }

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;
@@ -64,7 +64,7 @@ export function CssClassSelector() {
 		<Stack gap={ 1 } p={ 2 }>
 			<Stack direction="row" gap={ 1 } alignItems="center" justifyContent="space-between">
 				<Typography component="label" variant="caption" htmlFor={ ID }>
-					{ __( 'CSS classes', 'elementor' ) }
+					{ __( 'Classes', 'elementor' ) }
 				</Typography>
 				<Stack direction="row" gap={ 1 }>
 					<ClassSelectorActionsSlot />
@@ -145,10 +145,11 @@ 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,
+					// translators: %s is the plural label of the provider (e.g "Existing classes").
+					group: __( 'Existing %s', 'elementor' ).replace( '%s', provider.labels?.plural ?? '' ),
 				};
 			} );
 		} );
@@ -164,9 +165,9 @@ function useCreateActions( {
 	return useCreateActionsByProvider().map( ( [ provider, create ] ): Action< StyleDefOption > => {
 		return {
 			// translators: %s is the label of the new class.
-			label: ( value ) => __( 'Create new "%s"', 'elementor' ).replace( '%s', value ),
-			// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
-			group: __( 'Create New %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
+			label: ( value ) => __( 'Create "%s"', 'elementor' ).replace( '%s', value ),
+			// translators: %s is the singular label of css class provider (e.g "CSS Class").
+			group: __( 'Create a new %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
 			condition: ( _, inputValue ) => isLabelValid( inputValue ) && ! hasReachedLimit( provider ),
 			apply: ( label ) => {
 				const createdId = create( label );

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

@@ -19,7 +19,7 @@ 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" 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/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-indicator.tsx

@@ -0,0 +1,23 @@
+import { styled } from '@elementor/ui';
+
+export type StyleIndicatorVariant = 'overridden' | 'local' | 'global';
+
+export const StyleIndicator = styled( 'div', {
+	shouldForwardProp: ( prop ) => prop !== 'variant',
+} )< { variant?: StyleIndicatorVariant } >`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background-color: ${ ( { theme, variant } ) => {
+		switch ( variant ) {
+			case 'overridden':
+				return theme.palette.warning.light;
+			case 'global':
+				return theme.palette.global.dark;
+			case 'local':
+				return theme.palette.accent.main;
+			default:
+				return theme.palette.text.disabled;
+		}
+	} };
+`;

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-radius-field.tsx

@@ -13,7 +13,6 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
-import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 const StartStartIcon = withDirection( RadiusTopLeftIcon );
 const StartEndIcon = withDirection( RadiusTopRightIcon );
@@ -32,22 +31,22 @@ const getEndEndLabel = ( isSiteRtl: boolean ) =>
 const getCorners = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	{
 		label: getStartStartLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ StartStartIcon } size="tiny" />,
+		icon: <StartStartIcon fontSize={ 'tiny' } />,
 		bind: 'start-start',
 	},
 	{
 		label: getStartEndLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ StartEndIcon } size="tiny" />,
+		icon: <StartEndIcon fontSize={ 'tiny' } />,
 		bind: 'start-end',
 	},
 	{
 		label: getEndStartLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ EndStartIcon } size="tiny" />,
+		icon: <EndStartIcon fontSize={ 'tiny' } />,
 		bind: 'end-start',
 	},
 	{
 		label: getEndEndLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ EndEndIcon } size="tiny" />,
+		icon: <EndEndIcon fontSize={ 'tiny' } />,
 		bind: 'end-end',
 	},
 ];

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/border-section/border-width-field.tsx

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
-import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 const InlineStartIcon = withDirection( SideRightIcon );
 const InlineEndIcon = withDirection( SideLeftIcon );
@@ -20,7 +19,7 @@ const getEdges = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	},
 	{
 		label: isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ),
-		icon: <RotatedIcon icon={ InlineStartIcon } size="tiny" />,
+		icon: <InlineStartIcon fontSize={ 'tiny' } />,
 		bind: 'inline-end',
 	},
 	{
@@ -30,7 +29,7 @@ const getEdges = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	},
 	{
 		label: isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ),
-		icon: <RotatedIcon icon={ InlineEndIcon } size="tiny" />,
+		icon: <InlineEndIcon fontSize={ 'tiny' } />,
 		bind: 'inline-start',
 	},
 ];

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';