@elementor/editor-editing-panel 1.40.0 → 1.41.0

package/src/styles-inheritance/components/breakpoint-icon.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { type BreakpointId, useBreakpoints } from '@elementor/editor-responsive';
+import {
+	DesktopIcon,
+	LaptopIcon,
+	MobileLandscapeIcon,
+	MobilePortraitIcon,
+	TabletLandscapeIcon,
+	TabletPortraitIcon,
+	WidescreenIcon,
+} from '@elementor/icons';
+import { Tooltip } from '@elementor/ui';
+
+type Props = {
+	breakpoint?: BreakpointId | null;
+};
+
+const SIZE = 'tiny';
+const DEFAULT_BREAKPOINT = 'desktop';
+
+const breakpointIconMap: Record< string, React.ElementType > = {
+	widescreen: WidescreenIcon,
+	desktop: DesktopIcon,
+	laptop: LaptopIcon,
+	tablet_extra: TabletLandscapeIcon,
+	tablet: TabletPortraitIcon,
+	mobile_extra: MobileLandscapeIcon,
+	mobile: MobilePortraitIcon,
+};
+
+export const BreakpointIcon = ( { breakpoint }: Props ) => {
+	const breakpoints = useBreakpoints();
+	const currentBreakpoint = breakpoint || DEFAULT_BREAKPOINT;
+	const IconComponent = breakpointIconMap[ currentBreakpoint ];
+
+	if ( ! IconComponent ) {
+		return null;
+	}
+
+	const breakpointLabel = breakpoints.find( ( breakpointItem ) => breakpointItem.id === currentBreakpoint )?.label;
+
+	return (
+		<Tooltip title={ breakpointLabel } placement="top">
+			<IconComponent fontSize={ SIZE } sx={ { mt: '2px' } } />
+		</Tooltip>
+	);
+};

package/src/styles-inheritance/components/index.ts

@@ -0,0 +1,4 @@
+export { BreakpointIcon } from './breakpoint-icon';
+export { LabelChip } from './label-chip';
+export { ValueComponent } from './value-component';
+export { ActionIcons } from './action-icons';

package/src/styles-inheritance/components/label-chip.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
+import { InfoCircleIcon } from '@elementor/icons';
+import { Chip, type Theme, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	displayLabel: string;
+	provider?: string;
+};
+
+const SIZE = 'tiny';
+
+export const LabelChip = ( { displayLabel, provider }: Props ) => {
+	return (
+		<Chip
+			label={ displayLabel }
+			size={ SIZE }
+			color="global"
+			variant="standard"
+			state="enabled"
+			icon={
+				provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ? (
+					<Tooltip title={ __( 'Inherited from base styles', 'elementor' ) } placement="top">
+						<InfoCircleIcon fontSize={ SIZE } />
+					</Tooltip>
+				) : undefined
+			}
+			sx={ ( theme: Theme ) => ( {
+				lineHeight: 1,
+				flexWrap: 'nowrap',
+				alignItems: 'center',
+				borderRadius: `${ theme.shape.borderRadius * 0.75 }px`,
+				flexDirection: 'row-reverse',
+				'.MuiChip-label': {
+					overflow: 'hidden',
+					textOverflow: 'ellipsis',
+					whiteSpace: 'nowrap',
+				},
+			} ) }
+		/>
+	);
+};

package/src/styles-inheritance/components/value-component.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Typography } from '@elementor/ui';
+
+type Props = {
+	index: number;
+	value: React.ReactNode;
+};
+
+export const ValueComponent = ( { index, value }: Props ) => {
+	return (
+		<Typography
+			variant="caption"
+			color="text.tertiary"
+			sx={ {
+				mt: '1px',
+				textDecoration: index === 0 ? 'none' : 'line-through',
+				overflow: 'hidden',
+				textOverflow: 'ellipsis',
+				whiteSpace: 'nowrap',
+			} }
+		>
+			{ value }
+		</Typography>
+	);
+};

package/src/styles-inheritance/consts.ts

@@ -0,0 +1,17 @@
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+
+// the following prop types' style transformers would be ignored to provide alternative transformers for the styles inheritance popover
+export const excludePropTypeTransformers = new Set( [
+	'background-color-overlay',
+	'background-image-overlay',
+	'background-gradient-overlay',
+	'gradient-color-stop',
+	'color-stop',
+	'background-image-position-offset',
+	'background-image-size-scale',
+	'image-src',
+	'image',
+	'background-overlay',
+] );
+
+export const isUsingIndicatorPopover = () => isExperimentActive( 'e_indications_popover' );

package/src/styles-inheritance/create-styles-inheritance.ts

@@ -1,17 +1,21 @@
-import { isEmpty, isTransformable, type PropKey, type PropValue } from '@elementor/editor-props';
+import {
+	isEmpty,
+	isTransformable,
+	type PropKey,
+	type PropType,
+	type PropValue,
+	type UnionPropType,
+} from '@elementor/editor-props';
 import { type BreakpointNode } from '@elementor/editor-responsive';
 import { type StyleDefinition } from '@elementor/editor-styles';
 
 import { getProviderByStyleId } from '../contexts/style-context';
 import { createSnapshotsManager } from './create-snapshots-manager';
-import {
-	type BreakpointsStatesStyles,
-	type StyleInheritanceMetaProps,
-	type StylesInheritanceAPI,
-	type StylesInheritanceSnapshot,
-} from './types';
+import { type BreakpointsStatesStyles, type StyleInheritanceMetaProps, type StylesInheritanceAPI } from './types';
 import { getBreakpointKey, getStateKey } from './utils';
 
+type ValidPropType = Exclude< PropType, UnionPropType >;
+
 export function createStylesInheritance(
 	styleDefs: StyleDefinition[],
 	breakpointsRoot: BreakpointNode
@@ -23,16 +27,18 @@ export function createStylesInheritance(
 
 	return {
 		getSnapshot: createSnapshotsManager( getStyles, breakpointsRoot ),
-		getInheritanceChain: ( snapshot: StylesInheritanceSnapshot, path: string[] ) => {
+		getInheritanceChain: ( snapshot, path, topLevelPropType ) => {
 			const [ field, ...nextFields ] = path;
 
 			let inheritanceChain = snapshot[ field ] ?? [];
 
 			if ( nextFields.length > 0 ) {
+				const filterPropType = getFilterPropType( topLevelPropType, nextFields );
+
 				inheritanceChain = inheritanceChain
 					.map( ( { value: styleValue, ...rest } ) => ( {
 						...rest,
-						value: getValueByPath( styleValue, nextFields ),
+						value: getValueByPath( styleValue, nextFields, filterPropType ),
 					} ) )
 					.filter( ( { value: styleValue } ) => ! isEmpty( styleValue ) );
 			}
@@ -77,24 +83,56 @@ function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): Breakp
 	return breakpointStateSlots;
 }
 
-function getValueByPath( value: PropValue, path: PropKey[] ): PropValue {
+function getValueByPath( value: PropValue, path: PropKey[], filterPropType: ValidPropType | null ): PropValue {
 	if ( ! value || typeof value !== 'object' ) {
 		return null;
 	}
 
+	if ( shouldUseOriginalValue( filterPropType, value ) ) {
+		return value;
+	}
+
 	return path.reduce( ( currentScope: PropValue, key: PropKey ): PropValue | null => {
 		if ( ! currentScope ) {
 			return null;
 		}
 
 		if ( isTransformable( currentScope ) ) {
-			return currentScope.value?.[ key ];
+			return currentScope.value?.[ key ] ?? null;
 		}
 
 		if ( typeof currentScope === 'object' ) {
-			return currentScope[ key as keyof typeof currentScope ];
+			return currentScope[ key as keyof typeof currentScope ] ?? null;
 		}
 
 		return null;
 	}, value );
 }
+
+function shouldUseOriginalValue( filterPropType: ValidPropType | null, value: PropValue ): boolean {
+	return !! filterPropType && isTransformable( value ) && filterPropType.key !== value.$$type;
+}
+
+const getFilterPropType = ( propType: PropType, path: string[] ): ValidPropType | null => {
+	if ( ! propType || propType.kind !== 'union' ) {
+		return null;
+	}
+
+	return (
+		Object.values( propType.prop_types ).find( ( type: PropType ) => {
+			return !! path.reduce( ( currentScope: PropType | null, key: string ) => {
+				if ( currentScope?.kind !== 'object' ) {
+					return null;
+				}
+
+				const { shape } = currentScope;
+
+				if ( shape[ key ] ) {
+					return shape[ key ];
+				}
+
+				return null;
+			}, type );
+		} ) ?? null
+	);
+};

package/src/{hooks → styles-inheritance/hooks}/use-normalized-inheritance-chain-items.tsx

@@ -1,14 +1,17 @@
-import { type ReactNode, useEffect, useState } from 'react';
+import { isValidElement, type ReactNode, useEffect, useState } from 'react';
 import { type PropsResolver } from '@elementor/editor-canvas';
 import { type PropKey } from '@elementor/editor-props';
 import { type StyleDefinitionVariant } from '@elementor/editor-styles';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
+import { __ } from '@wordpress/i18n';
 
-import { type SnapshotPropValue } from '../styles-inheritance/types';
+import { type SnapshotPropValue } from '../types';
 
 const MAXIMUM_ITEMS = 2;
 
 type NormalizedItem = {
 	id: string | number;
+	provider: string;
 	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
 	displayLabel: string;
 	value: ReactNode | string;
@@ -25,11 +28,20 @@ export const useNormalizedInheritanceChainItems = (
 		( async () => {
 			const normalizedItems = await Promise.all(
 				inheritanceChain
-					.filter( ( item ) => item.style?.label )
+					.filter( ( { style } ) => style )
 					.map( ( item, index ) => normalizeInheritanceItem( item, index, bind, resolve ) )
 			);
 
-			const validItems = normalizedItems.filter( ( item ) => item.value !== '' ).slice( 0, MAXIMUM_ITEMS );
+			const validItems = normalizedItems
+				.map( ( item ) => ( {
+					...item,
+					displayLabel:
+						ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider
+							? item.displayLabel
+							: __( 'Base', 'elementor' ),
+				} ) )
+				.filter( ( item ) => ! item.value || item.displayLabel !== '' )
+				.slice( 0, MAXIMUM_ITEMS );
 
 			setItems( validItems );
 		} )();
@@ -38,19 +50,27 @@ export const useNormalizedInheritanceChainItems = (
 	return items;
 };
 
+const DEFAULT_BREAKPOINT = 'desktop';
+
 export const normalizeInheritanceItem = async (
 	item: SnapshotPropValue,
 	index: number,
 	bind: PropKey,
 	resolve: PropsResolver
 ): Promise< NormalizedItem > => {
-	const state = item.variant?.meta?.state || '';
-	const label = item.style?.label || '';
-	const displayLabel = state ? `${ label }:${ state }` : label;
+	const {
+		variant: {
+			meta: { state, breakpoint },
+		},
+		style: { label, id },
+	} = item;
+
+	const displayLabel = `${ label }${ state ? ':' + state : '' }`;
 
 	return {
-		id: item.style?.id ? item.style?.id + state : index,
-		breakpoint: item.variant?.meta?.breakpoint,
+		id: id ? id + ( state ?? '' ) : index,
+		provider: item.provider || '',
+		breakpoint: breakpoint ?? DEFAULT_BREAKPOINT,
 		displayLabel,
 		value: await getTransformedValue( item, bind, resolve ),
 	};
@@ -60,7 +80,7 @@ const getTransformedValue = async (
 	item: SnapshotPropValue,
 	bind: PropKey,
 	resolve: PropsResolver
-): Promise< string > => {
+): Promise< ReactNode | string > => {
 	try {
 		const result = await resolve( {
 			props: {
@@ -68,7 +88,17 @@ const getTransformedValue = async (
 			},
 		} );
 
-		return Object.values( result ).join( ' ' );
+		const value = result?.[ bind ] ?? result;
+
+		if ( isValidElement( value ) ) {
+			return value;
+		}
+
+		if ( typeof value === 'object' ) {
+			return JSON.stringify( value );
+		}
+
+		return String( value );
 	} catch {
 		return '';
 	}

package/src/styles-inheritance/init-styles-inheritance-transformers.ts

@@ -0,0 +1,38 @@
+import { createTransformer, styleTransformersRegistry } from '@elementor/editor-canvas';
+
+import { excludePropTypeTransformers } from './consts';
+import { stylesInheritanceTransformersRegistry } from './styles-inheritance-transformers-registry';
+import { backgroundColorOverlayTransformer } from './transformers/background-color-overlay-transformer';
+import { backgroundGradientOverlayTransformer } from './transformers/background-gradient-overlay-transformer';
+import { backgroundImageOverlayTransformer } from './transformers/background-image-overlay-transformer';
+import { backgroundOverlayTransformer } from './transformers/background-overlay-transformer';
+
+export function initStylesInheritanceTransformers() {
+	const originalStyleTransformers = styleTransformersRegistry.all();
+
+	Object.entries( originalStyleTransformers ).forEach( ( [ propType, transformer ] ) => {
+		if ( excludePropTypeTransformers.has( propType ) ) {
+			return;
+		}
+
+		stylesInheritanceTransformersRegistry.register( propType, transformer );
+	} );
+
+	stylesInheritanceTransformersRegistry.registerFallback(
+		createTransformer( ( value: unknown ) => {
+			return value;
+		} )
+	);
+
+	registerCustomTransformers();
+}
+
+function registerCustomTransformers() {
+	stylesInheritanceTransformersRegistry.register( 'background-color-overlay', backgroundColorOverlayTransformer );
+	stylesInheritanceTransformersRegistry.register(
+		'background-gradient-overlay',
+		backgroundGradientOverlayTransformer
+	);
+	stylesInheritanceTransformersRegistry.register( 'background-image-overlay', backgroundImageOverlayTransformer );
+	stylesInheritanceTransformersRegistry.register( 'background-overlay', backgroundOverlayTransformer );
+}

package/src/styles-inheritance/init.ts

@@ -0,0 +1,8 @@
+import { isUsingIndicatorPopover } from './consts';
+import { initStylesInheritanceTransformers } from './init-styles-inheritance-transformers';
+
+export const init = () => {
+	if ( isUsingIndicatorPopover() ) {
+		initStylesInheritanceTransformers();
+	}
+};

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -1,24 +1,23 @@
 import * as React from 'react';
-import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { isEmpty } from '@elementor/editor-props';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
-import { IconButton, Infotip } from '@elementor/ui';
+import { Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StyleIndicator } from '../components/style-indicator';
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceChain } from '../contexts/styles-inheritance-context';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
+import { isUsingIndicatorPopover } from './consts';
 import { StyleIndicatorInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
-	const [ open, setOpen ] = useState( false );
-
-	const { value, path, propType } = useBoundProp();
+	const { path, propType } = useBoundProp();
 	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
 
-	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
+	const isUsingNestedProps = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 
 	const finalPath = isUsingNestedProps ? path : path.slice( 0, 1 );
 
@@ -28,44 +27,48 @@ export const StylesInheritanceIndicator = () => {
 		return null;
 	}
 
-	const [ { style, variant, provider } ] = inheritanceChain;
+	const currentItem = inheritanceChain.find(
+		( {
+			style,
+			variant: {
+				meta: { breakpoint, state },
+			},
+		} ) =>
+			style.id === currentStyleId &&
+			breakpoint === currentStyleMeta.breakpoint &&
+			state === currentStyleMeta.state
+	);
 
-	if ( provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
-		return null;
-	}
+	const hasValue = ! isEmpty( currentItem?.value );
 
-	const { breakpoint, state } = variant.meta;
+	const [ actualStyle ] = inheritanceChain;
 
-	const isFinalValue =
-		style.id === currentStyleId && breakpoint === currentStyleMeta.breakpoint && state === currentStyleMeta.state;
+	if ( actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+		return null;
+	}
 
-	const hasValue = ! isEmpty( value );
+	const isFinalValue = currentItem === actualStyle;
 
 	const label = getLabel( { isFinalValue, hasValue } );
 	const variantType = getVariant( { isFinalValue, hasValue, currentStyleProvider } );
 
-	const eIndicationsPopover = isExperimentActive( 'e_indications_popover' );
-
-	if ( ! eIndicationsPopover ) {
-		return <StyleIndicator variant={ variantType } aria-label={ label } />;
+	if ( ! isUsingIndicatorPopover() ) {
+		return (
+			<Tooltip title={ __( 'Style origin', 'elementor' ) } placement="top">
+				<StyleIndicator variant={ variantType } aria-label={ label } />
+			</Tooltip>
+		);
 	}
 
-	const toggleOpen = () => setOpen( ( prev ) => ! prev );
-
 	return (
-		<Infotip
-			placement="top"
-			content={
-				<StyleIndicatorInfotip inheritanceChain={ inheritanceChain } path={ finalPath } propType={ propType } />
-			}
-			open={ open }
-			onClose={ () => setOpen( false ) }
-			trigger="manual"
+		<StyleIndicatorInfotip
+			inheritanceChain={ inheritanceChain }
+			path={ finalPath }
+			propType={ propType }
+			label={ label }
 		>
-			<IconButton onClick={ toggleOpen } aria-label={ label }>
-				<StyleIndicator variant={ variantType } />
-			</IconButton>
-		</Infotip>
+			<StyleIndicator variant={ variantType } />
+		</StyleIndicatorInfotip>
 	);
 };
 

package/src/styles-inheritance/styles-inheritance-infotip.tsx

@@ -1,43 +1,137 @@
 import * as React from 'react';
-import { useMemo } from 'react';
-import { createPropsResolver, type PropsResolver, styleTransformersRegistry } from '@elementor/editor-canvas';
+import { useMemo, useState } from 'react';
+import { createPropsResolver, type PropsResolver } from '@elementor/editor-canvas';
 import { type PropKey, type PropType } from '@elementor/editor-props';
-import { Card, CardContent, List, ListItem, ListItemText } from '@elementor/ui';
+import { Box, Card, CardContent, CloseButton, IconButton, Infotip, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
-import { useNormalizedInheritanceChainItems } from '../hooks/use-normalized-inheritance-chain-items';
+import { useSectionContentRef } from '../components/section-content';
+import { useDirection } from '../hooks/use-direction';
+import { ActionIcons, BreakpointIcon, LabelChip, ValueComponent } from './components';
+import { useNormalizedInheritanceChainItems } from './hooks/use-normalized-inheritance-chain-items';
+import { stylesInheritanceTransformersRegistry } from './styles-inheritance-transformers-registry';
 import { type SnapshotPropValue } from './types';
 
-type StyleIndicatorInfotipProps = {
+type Props = {
 	inheritanceChain: SnapshotPropValue[];
 	propType: PropType;
 	path: PropKey[];
+	label: string;
+	children: React.ReactNode;
 };
 
-export const StyleIndicatorInfotip = ( { inheritanceChain, propType, path }: StyleIndicatorInfotipProps ) => {
+const SIZE = 'tiny';
+
+export const StyleIndicatorInfotip = ( { inheritanceChain, propType, path, label, children }: Props ) => {
+	const [ open, setOpen ] = useState( false );
+	const { isSiteRtl } = useDirection();
 	const key = path.join( '.' );
 
+	const sectionContentRef = useSectionContentRef();
+	const sectionContentWidth = sectionContentRef?.current?.offsetWidth ?? 320;
+
 	const resolve = useMemo< PropsResolver >( () => {
 		return createPropsResolver( {
-			transformers: styleTransformersRegistry,
+			transformers: stylesInheritanceTransformersRegistry,
 			schema: { [ key ]: propType },
 		} );
 	}, [ key, propType ] );
 
 	const items = useNormalizedInheritanceChainItems( inheritanceChain, key, resolve );
 
-	return (
-		<Card elevation={ 0 } sx={ { maxWidth: 320 } }>
-			<CardContent sx={ { p: 1.5, pb: 2.5 } }>
-				<List>
-					{ items.map( ( item ) => (
-						<ListItem key={ item.id }>
-							<ListItemText
-								primary={ `${ item.breakpoint } | ${ item.displayLabel }. ${ item.value }` }
-							/>
-						</ListItem>
-					) ) }
-				</List>
+	const toggleOpen = () => setOpen( ( prev ) => ! prev );
+	const closeInfotip = () => {
+		setOpen( false );
+	};
+
+	const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
+
+	const infotipContent = (
+		<Card
+			elevation={ 0 }
+			sx={ {
+				width: `${ sectionContentWidth }px`,
+				maxWidth: 500,
+				overflowX: 'hidden',
+			} }
+		>
+			<CardContent
+				sx={ {
+					display: 'flex',
+					gap: 0.5,
+					flexDirection: 'column',
+					p: 0,
+					'&:last-child': {
+						pb: 0,
+					},
+				} }
+			>
+				<Stack direction="row" alignItems="center" sx={ { pl: 1.5, pr: 0.5, minHeight: 36, py: 0.5 } }>
+					<Typography variant="subtitle2" color="secondary" sx={ { fontSize: 12, fontWeight: '500' } }>
+						{ __( 'Style origin', 'elementor' ) }
+					</Typography>
+					<CloseButton
+						slotProps={ { icon: { fontSize: SIZE } } }
+						sx={ { ml: 'auto' } }
+						onClick={ closeInfotip }
+					/>
+				</Stack>
+				<Stack gap={ 1.5 } sx={ { pl: 2, pr: 1, pb: 2, overflowX: 'hidden', overflowY: 'auto' } } role="list">
+					{ items.map( ( item, index ) => {
+						return (
+							<Box
+								key={ item.id }
+								display="flex"
+								gap={ 0.5 }
+								role="listitem"
+								/* translators: %s: Label of the inheritance item */
+								aria-label={ __( 'Inheritance item: %s', 'elementor' ).replace(
+									'%s',
+									item.displayLabel
+								) }
+							>
+								<Box display="flex" gap={ 0.5 } sx={ { flexWrap: 'wrap', width: '100%' } }>
+									<BreakpointIcon breakpoint={ item.breakpoint } />
+									<LabelChip displayLabel={ item.displayLabel } provider={ item.provider } />
+									<ValueComponent index={ index } value={ item.value } />
+								</Box>
+								<ActionIcons />
+							</Box>
+						);
+					} ) }
+				</Stack>
 			</CardContent>
 		</Card>
 	);
+
+	return (
+		<Infotip
+			placement="top"
+			content={ infotipContent }
+			open={ open }
+			onClose={ closeInfotip }
+			disableHoverListener={ true }
+			componentsProps={ {
+				tooltip: {
+					sx: {
+						mx: 2,
+					},
+				},
+			} }
+			slotProps={ {
+				popper: {
+					modifiers: [
+						{
+							name: 'offset',
+							options: { offset: [ forceInfotipAlignLeft, 0 ] },
+						},
+					],
+				},
+			} }
+		>
+			<IconButton onClick={ toggleOpen } aria-label={ label } sx={ { my: '-1px' } }>
+				{ children }
+			</IconButton>
+		</Infotip>
+	);
 };

package/src/styles-inheritance/styles-inheritance-transformers-registry.tsx

@@ -0,0 +1,3 @@
+import { createTransformersRegistry } from '@elementor/editor-canvas';
+
+export const stylesInheritanceTransformersRegistry = createTransformersRegistry();