@elementor/editor-editing-panel 1.0.0 → 1.1.0

package/src/components/style-sections/typography-section/font-family-field.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ControlLabel, FontFamilyControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { getElementorConfig } from '../../../sync/get-elementor-config';
+
+export const FontFamilyField = () => {
+	const fontFamilies = getFontFamilies();
+
+	if ( ! fontFamilies ) {
+		return null;
+	}
+
+	return (
+		<StylesField bind="font-family">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Font Family', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<FontFamilyControl fontFamilies={ fontFamilies } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};
+
+const getFontFamilies = () => {
+	const { controls } = getElementorConfig();
+
+	const options = controls?.font?.options;
+
+	if ( ! options ) {
+		return null;
+	}
+
+	return options;
+};

package/src/components/style-sections/typography-section/font-size-field.tsx

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

package/src/components/style-sections/typography-section/font-weight-field.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlLabel, SelectControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { SelectControl } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 const fontWeightOptions = [
 	{ label: __( 'Light - 400', 'elementor' ), value: '400' },
@@ -16,7 +16,7 @@ const fontWeightOptions = [
 export const FontWeightField = () => {
 	return (
 		<StylesField bind="font-weight">
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Font Weight', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-sections/typography-section/letter-spacing-field.tsx

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

package/src/components/style-sections/typography-section/text-alignment-field.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
-import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifiedIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ToggleControl, ToggleButtonGroupItem } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 type Alignments = 'left' | 'center' | 'right' | 'justify';
 
@@ -12,29 +12,29 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 	{
 		value: 'left',
 		label: __( 'Left', 'elementor' ),
-		icon: AlignLeftIcon,
+		renderContent: ( { size } ) => <AlignLeftIcon fontSize={ size } />,
 	},
 	{
 		value: 'center',
 		label: __( 'Center', 'elementor' ),
-		icon: AlignCenterIcon,
+		renderContent: ( { size } ) => <AlignCenterIcon fontSize={ size } />,
 	},
 	{
 		value: 'right',
 		label: __( 'Right', 'elementor' ),
-		icon: AlignRightIcon,
+		renderContent: ( { size } ) => <AlignRightIcon fontSize={ size } />,
 	},
 	{
 		value: 'justify',
 		label: __( 'Justify', 'elementor' ),
-		icon: AlignJustifiedIcon,
+		renderContent: ( { size } ) => <AlignJustifiedIcon fontSize={ size } />,
 	},
 ];
 
 export const TextAlignmentField = () => {
 	return (
 		<StylesField bind={ 'text-align' }>
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Alignment', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-sections/typography-section/text-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 { ColorControl } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 export const TextColorField = () => {
 	return (
 		<StylesField bind="color">
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Text Color', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-sections/typography-section/text-direction-field.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { TextDirectionLtrIcon, TextDirectionRtlIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ToggleControl, ToggleButtonGroupItem } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 type Direction = 'ltr' | 'rtl';
 
@@ -12,19 +12,19 @@ const options: ToggleButtonGroupItem< Direction >[] = [
 	{
 		value: 'ltr',
 		label: __( 'Left to Right', 'elementor' ),
-		icon: TextDirectionLtrIcon,
+		renderContent: ( { size } ) => <TextDirectionLtrIcon fontSize={ size } />,
 	},
 	{
 		value: 'rtl',
 		label: __( 'Right to Left', 'elementor' ),
-		icon: TextDirectionRtlIcon,
+		renderContent: ( { size } ) => <TextDirectionRtlIcon fontSize={ size } />,
 	},
 ];
 
 export const TextDirectionField = () => {
 	return (
 		<StylesField bind={ 'direction' }>
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-sections/typography-section/text-stroke-field.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
+import { ControlLabel, StrokeControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
-import { CollapsibleField } from '../../collapsible-field';
-import { ControlLabel } from '../../control-label';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { StrokeControl } from '../../../controls';
+import { CollapsibleField } from '../../collapsible-field';
 
 export const TextStrokeField = () => {
 	return (

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, ToggleButtonProps } from '@elementor/ui';
+import { ControlLabel } from '@elementor/editor-controls';
 import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
-import { ControlLabel } from '../../control-label';
+import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, type ToggleButtonProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { useStylesField } from '../../../hooks/use-styles-field';
 
 const buttonSize = 'tiny';
@@ -14,7 +15,7 @@ export const TextStyleField = () => {
 	const formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];
 
 	return (
-		<Grid container spacing={ 1 } alignItems="center">
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
 			</Grid>

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

@@ -1,20 +1,34 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ToggleControl } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
-const options = [
-	{ value: 'capitalize', label: __( 'Capitalize', 'elementor' ), icon: LetterCaseIcon },
-	{ value: 'uppercase', label: __( 'Uppercase', 'elementor' ), icon: LetterCaseUpperIcon },
-	{ value: 'lowercase', label: __( 'Lowercase', 'elementor' ), icon: LetterCaseLowerIcon },
+type Transforms = 'capitalize' | 'uppercase' | 'lowercase';
+
+const options: ToggleButtonGroupItem< Transforms >[] = [
+	{
+		value: 'capitalize',
+		label: __( 'Capitalize', 'elementor' ),
+		renderContent: ( { size } ) => <LetterCaseIcon fontSize={ size } />,
+	},
+	{
+		value: 'uppercase',
+		label: __( 'Uppercase', 'elementor' ),
+		renderContent: ( { size } ) => <LetterCaseUpperIcon fontSize={ size } />,
+	},
+	{
+		value: 'lowercase',
+		label: __( 'Lowercase', 'elementor' ),
+		renderContent: ( { size } ) => <LetterCaseLowerIcon fontSize={ size } />,
+	},
 ];
 
 export const TransformField = () => (
 	<StylesField bind={ 'text-transform' }>
-		<Grid container spacing={ 1 } alignItems="center">
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Transform', 'elementor' ) }</ControlLabel>
 			</Grid>

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

@@ -1,40 +1,39 @@
 import * as React from 'react';
-import { AccordionSection } from '../../accordion-section';
 import { Divider, Stack } from '@elementor/ui';
-import { TextStyleField } from './text-style-field';
-import { __ } from '@wordpress/i18n';
+
+import { CollapsibleContent } from '../../collapsible-content';
+import { FontFamilyField } from './font-family-field';
 import { FontSizeField } from './font-size-field';
 import { FontWeightField } from './font-weight-field';
-import { TextColorField } from './text-color-field';
 import { LetterSpacingField } from './letter-spacing-field';
-import { WordSpacingField } from './word-spacing-field';
-import { CollapsibleContent } from '../../collapsible-content';
-import { TransformField } from './transform-field';
 import { TextAlignmentField } from './text-alignment-field';
+import { TextColorField } from './text-color-field';
 import { TextDirectionField } from './text-direction-field';
 import { TextStrokeField } from './text-stroke-field';
+import { TextStyleField } from './text-style-field';
+import { TransformField } from './transform-field';
+import { WordSpacingField } from './word-spacing-field';
 
 export const TypographySection = () => {
 	return (
-		<AccordionSection title={ __( 'Typography', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<FontWeightField />
-				<FontSizeField />
-				<Divider />
-				<TextColorField />
-				<CollapsibleContent>
-					<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
-						<LetterSpacingField />
-						<WordSpacingField />
-						<Divider />
-						<TextAlignmentField />
-						<TextStyleField />
-						<TransformField />
-						<TextDirectionField />
-						<TextStrokeField />
-					</Stack>
-				</CollapsibleContent>
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<FontFamilyField />
+			<FontWeightField />
+			<FontSizeField />
+			<Divider />
+			<TextColorField />
+			<CollapsibleContent>
+				<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+					<LetterSpacingField />
+					<WordSpacingField />
+					<Divider />
+					<TextAlignmentField />
+					<TextStyleField />
+					<TransformField />
+					<TextDirectionField />
+					<TextStrokeField />
+				</Stack>
+			</CollapsibleContent>
+		</Stack>
 	);
 };

package/src/components/style-sections/typography-section/word-spacing-field.tsx

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

package/src/components/style-tab.tsx

@@ -1,58 +1,94 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Stack } from '@elementor/ui';
-import { generateId, StyleDefinition } from '@elementor/editor-styles';
+import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
+import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
-import { getElementStyles, getElementSetting } from '@elementor/editor-elements';
+import { generateId, type StyleDefinition } from '@elementor/editor-styles';
+import { Divider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ClassesPropProvider } from '../contexts/classes-prop-context';
+import { useElement } from '../contexts/element-context';
 import { StyleProvider } from '../contexts/style-context';
-import { SizeSection } from './style-sections/size-section/size-section';
-import { TypographySection } from './style-sections/typography-section/typography-section';
-import { PositionSection } from './style-sections/position-section/position-section';
-import { SpacingSection } from './style-sections/spacing-section/spacing-section';
-import { EffectsSection } from './style-sections/effects-section/effects-section';
+import { CssClassSelectorSection } from './css-class-selector-section';
+import { Section } from './section';
+import { SectionsList } from './sections-list';
 import { BackgroundSection } from './style-sections/background-section/background-section';
 import { BorderSection } from './style-sections/border-section/border-section';
-import { useElement } from '../contexts/element-context';
-import { ClassesPropValue, PropKey } from '@elementor/editor-props';
-import { ClassesPropProvider } from '../contexts/classes-prop-context';
+import { EffectsSection } from './style-sections/effects-section/effects-section';
+import { LayoutSection } from './style-sections/layout-section/layout-section';
+import { PositionSection } from './style-sections/position-section/position-section';
+import { SizeSection } from './style-sections/size-section/size-section';
+import { SpacingSection } from './style-sections/spacing-section/spacing-section';
+import { TypographySection } from './style-sections/typography-section/typography-section';
 
 const CLASSES_PROP_KEY = 'classes';
 
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
-	const [ selectedStyleDefId ] = useSelectedStyleDefId( currentClassesProp );
+	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
 	const breakpoint = useActiveBreakpoint();
 
 	return (
 		<ClassesPropProvider prop={ currentClassesProp }>
-			<StyleProvider meta={ { breakpoint, state: null } } id={ selectedStyleDefId }>
-				<Stack>
-					<SpacingSection />
-					<SizeSection />
-					<PositionSection />
-					<TypographySection />
-					<BackgroundSection />
-					<BorderSection />
-					<EffectsSection />
-				</Stack>
+			<StyleProvider meta={ { breakpoint, state: null } } id={ activeStyleDefId } setId={ setActiveStyleDefId }>
+				<CssClassSelectorSection />
+				<Divider />
+				<SectionsList>
+					<Section title={ __( 'Layout', 'elementor' ) }>
+						<LayoutSection />
+					</Section>
+					<Section title={ __( 'Spacing', 'elementor' ) }>
+						<SpacingSection />
+					</Section>
+					<Section title={ __( 'Size', 'elementor' ) }>
+						<SizeSection />
+					</Section>
+					<Section title={ __( 'Position', 'elementor' ) }>
+						<PositionSection />
+					</Section>
+					<Section title={ __( 'Typography', 'elementor' ) }>
+						<TypographySection />
+					</Section>
+					<Section title={ __( 'Background', 'elementor' ) }>
+						<BackgroundSection />
+					</Section>
+					<Section title={ __( 'Border', 'elementor' ) }>
+						<BorderSection />
+					</Section>
+					<Section title={ __( 'Effects', 'elementor' ) }>
+						<EffectsSection />
+					</Section>
+				</SectionsList>
 			</StyleProvider>
 		</ClassesPropProvider>
 	);
 };
 
-function useSelectedStyleDefId( currentClassesProp: PropKey ) {
+function useActiveStyleDefId( currentClassesProp: PropKey ) {
+	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinition[ 'id' ] | null >( null );
+
+	const fallback = useFirstElementStyleDef( currentClassesProp );
+
+	const newId = useGeneratedId();
+
+	return [ activeStyledDefId || fallback?.id || newId, setActiveStyledDefId ] as const;
+}
+
+function useFirstElementStyleDef( currentClassesProp: PropKey ) {
 	const { element } = useElement();
 
-	const [ selectedStyleDefId, setSelectedStyleDefId ] = useState< StyleDefinition[ 'id' ] >( () => {
-		const styleIds = getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value ?? [];
-		const stylesDefs = getElementStyles( element.id ) ?? {};
+	const classesIds = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+	const stylesDefs = useElementStyles( element.id );
 
-		return (
-			styleIds.find( ( id ) => id in stylesDefs ) ?? generateId( `e-${ element.id }-`, Object.keys( stylesDefs ) )
-		);
-	} );
+	return Object.values( stylesDefs ).find( ( styleDef ) => classesIds.includes( styleDef.id ) );
+}
+
+function useGeneratedId() {
+	const { element } = useElement();
+	const stylesDefs = useElementStyles( element.id );
 
-	return [ selectedStyleDefId, setSelectedStyleDefId ] as const;
+	return generateId( `e-${ element.id }-`, Object.keys( stylesDefs ) );
 }
 
 function useCurrentClassesProp(): string {

package/src/contexts/classes-prop-context.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createContext, PropsWithChildren, useContext } from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
 
 type ContextValue = {
 	prop: string;

package/src/contexts/element-context.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { createContext, PropsWithChildren, useContext } from 'react';
-import { ElementType, Element } from '@elementor/editor-elements';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+import { type Element, type ElementType } from '@elementor/editor-elements';
 
 type ContextValue = {
 	element: Element;

package/src/contexts/style-context.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { createContext, PropsWithChildren, useContext } from 'react';
-import { StyleDefinition, StyleVariant } from '@elementor/editor-styles';
+import { createContext, type Dispatch, type PropsWithChildren, useContext } from 'react';
+import { type StyleDefinition, type StyleVariant } from '@elementor/editor-styles';
 
 type ContextValue = {
 	id: StyleDefinition[ 'id' ];
+	setId: Dispatch< StyleDefinition[ 'id' ] >;
 	meta: StyleVariant[ 'meta' ];
 };
 
@@ -11,15 +12,15 @@ const Context = createContext< ContextValue | null >( null );
 
 type Props = PropsWithChildren< ContextValue >;
 
-export function StyleProvider( { children, id, meta }: Props ) {
-	return <Context.Provider value={ { id, meta } }>{ children }</Context.Provider>;
+export function StyleProvider( { children, id, setId, meta }: Props ) {
+	return <Context.Provider value={ { id, setId, meta } }>{ children }</Context.Provider>;
 }
 
 export function useStyle() {
 	const context = useContext( Context );
 
 	if ( ! context ) {
-		throw new Error( 'UseStyleContext must be used within a StyleContextProvider' );
+		throw new Error( 'useStyle must be used within a StyleProvider' );
 	}
 
 	return context;

package/src/control-replacement.tsx

@@ -1,3 +1,3 @@
-import { createControlReplacement } from './controls';
+import { createControlReplacement } from '@elementor/editor-controls';
 
 export const { replaceControl, getControlReplacement } = createControlReplacement();

package/src/controls-actions.ts

@@ -1,7 +1,8 @@
-import { createControlActionsMenu } from './controls';
+import { createMenu } from '@elementor/menus';
+
 import PopoverAction from './popover-action';
 
-export const { useMenuItems, registerPopoverAction } = createControlActionsMenu( {
+export const controlActionsMenu = createMenu( {
 	components: {
 		PopoverAction,
 	},

package/src/controls-registry/control-type-container.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { styled, Box, BoxProps } from '@elementor/ui';
-import { ControlLayout, ControlType, getLayoutByType } from './controls-registry';
+import { Box, type BoxProps, styled } from '@elementor/ui';
+
+import { type ControlLayout, type ControlType, getLayoutByType } from './controls-registry';
 
 export const ControlTypeContainer = ( {
 	controlType,

package/src/controls-registry/control.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
 import { createError } from '@elementor/utils';
-import { ControlType, ControlTypes, getControlByType } from './controls-registry';
+
+import { type ControlType, type ControlTypes, getControlByType } from './controls-registry';
 
 export type ControlTypeErrorContext = {
 	type: string;

package/src/controls-registry/controls-registry.tsx

@@ -1,4 +1,11 @@
-import { ControlComponent, ImageControl, SelectControl, SizeControl, TextAreaControl, TextControl } from '../controls';
+import {
+	type ControlComponent,
+	ImageControl,
+	SelectControl,
+	SizeControl,
+	TextAreaControl,
+	TextControl,
+} from '@elementor/editor-controls';
 
 export type ControlLayout = 'full' | 'two-columns';
 

package/src/controls-registry/settings-field.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { PropKey, PropValue } from '@elementor/editor-props';
-import { useElementSetting, updateSettings } from '@elementor/editor-elements';
+import { BoundPropProvider } from '@elementor/editor-controls';
+import { updateSettings, useElementSetting } from '@elementor/editor-elements';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
+
 import { useElement } from '../contexts/element-context';
-import { BoundPropProvider } from '../controls';
 
 type Props = {
 	bind: PropKey;
@@ -13,7 +14,7 @@ const SettingsField = ( { bind, children }: Props ) => {
 	const { element, elementType } = useElement();
 
 	const defaultValue = elementType.propsSchema[ bind ]?.default;
-	const settingsValue = useElementSetting( { id: element.id, bind } );
+	const settingsValue = useElementSetting( element.id, bind );
 	const value = settingsValue ?? defaultValue ?? null;
 
 	const setValue = ( newValue: PropValue ) => {