@elementor/editor-interactions 4.0.0-683 → 4.0.0-beta5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.0.0-683",
+  "version": "4.0.0-beta5",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-controls": "4.0.0-683",
-    "@elementor/editor-elements": "4.0.0-683",
-    "@elementor/editor-mcp": "4.0.0-683",
-    "@elementor/editor-props": "4.0.0-683",
-    "@elementor/editor-responsive": "4.0.0-683",
-    "@elementor/editor-ui": "4.0.0-683",
-    "@elementor/editor-v1-adapters": "4.0.0-683",
+    "@elementor/editor-controls": "4.0.0-beta5",
+    "@elementor/editor-elements": "4.0.0-beta5",
+    "@elementor/editor-mcp": "4.0.0-beta5",
+    "@elementor/editor-props": "4.0.0-beta5",
+    "@elementor/editor-responsive": "4.0.0-beta5",
+    "@elementor/editor-ui": "4.0.0-beta5",
+    "@elementor/editor-v1-adapters": "4.0.0-beta5",
     "@elementor/icons": "^1.68.0",
-    "@elementor/schema": "4.0.0-683",
-    "@elementor/session": "4.0.0-683",
+    "@elementor/schema": "4.0.0-beta5",
+    "@elementor/session": "4.0.0-beta5",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-683",
-    "@elementor/events": "4.0.0-683",
+    "@elementor/utils": "4.0.0-beta5",
+    "@elementor/events": "4.0.0-beta5",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/controls/repeat.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';
+import { Number123Icon, RepeatIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { InteractionsPromotionChip } from '../../ui/interactions-promotion-chip';
+import { PromotionOverlayLayout } from '../../ui/promotion-overlay-layout';
+
+const TRACKING_DATA = { target_name: 'interactions_repeat', location_l2: 'interactions' } as const;
+
+export const REPEAT_OPTIONS = {
+	times: __( 'times', 'elementor' ),
+	loop: __( 'loop', 'elementor' ),
+};
+
+export const REPEAT_TOOLTIPS = {
+	times: __( 'Enable number', 'elementor' ),
+	loop: __( 'Infinite repeat', 'elementor' ),
+};
+
+export function Repeat() {
+	const repeatContainerRef = useRef< HTMLDivElement >( null );
+
+	const options: ToggleButtonGroupItem< string >[] = [
+		{
+			value: REPEAT_OPTIONS.times,
+			disabled: true,
+			label: REPEAT_TOOLTIPS.times,
+			renderContent: ( { size } ) => <Number123Icon fontSize={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: REPEAT_OPTIONS.loop,
+			disabled: true,
+			label: REPEAT_TOOLTIPS.loop,
+			renderContent: ( { size } ) => <RepeatIcon fontSize={ size } />,
+			showTooltip: true,
+		},
+	];
+
+	return (
+		<PromotionOverlayLayout
+			ref={ repeatContainerRef }
+			promotionChip={
+				<InteractionsPromotionChip
+					content={ __( 'Upgrade to control how many times the animation repeats.', 'elementor' ) }
+					upgradeUrl={ 'https://go.elementor.com/go-pro-interactions-repeat-modal/' }
+					anchorRef={ repeatContainerRef }
+					trackingData={ TRACKING_DATA }
+				/>
+			}
+		>
+			<ToggleButtonGroupUi items={ options } exclusive onChange={ () => {} } value={ '' } />
+		</PromotionOverlayLayout>
+	);
+}

package/src/components/controls/replay.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';
 import { CheckIcon, MinusIcon } from '@elementor/icons';
-import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type ReplayFieldProps } from '../../types';
 import { InteractionsPromotionChip } from '../../ui/interactions-promotion-chip';
+import { PromotionOverlayLayout } from '../../ui/promotion-overlay-layout';
 
 const TRACKING_DATA = { target_name: 'interactions_replay', location_l2: 'interactions' } as const;
 
@@ -16,10 +17,8 @@ export const REPLAY_OPTIONS = {
 
 export const BASE_REPLAY: string[] = [ 'no' ];
 
-const OVERLAY_GRID = '1 / 1';
-const CHIP_OFFSET = '50%';
-
-export function Replay( { onChange, anchorRef }: ReplayFieldProps ) {
+export function Replay( { onChange }: ReplayFieldProps ) {
+	const replayContainerRef = useRef< HTMLDivElement >( null );
 	const options: ToggleButtonGroupItem< boolean >[] = [
 		{
 			value: false,
@@ -38,18 +37,18 @@ export function Replay( { onChange, anchorRef }: ReplayFieldProps ) {
 	];
 
 	return (
-		<Box sx={ { display: 'grid', alignItems: 'center' } }>
-			<Box sx={ { gridArea: OVERLAY_GRID } }>
-				<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ false } />
-			</Box>
-			<Box sx={ { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: 'end' } }>
+		<PromotionOverlayLayout
+			ref={ replayContainerRef }
+			promotionChip={
 				<InteractionsPromotionChip
 					content={ __( 'Upgrade to run the animation every time its trigger occurs.', 'elementor' ) }
 					upgradeUrl={ 'https://go.elementor.com/go-pro-interactions-replay-modal/' }
-					anchorRef={ anchorRef }
+					anchorRef={ replayContainerRef }
 					trackingData={ TRACKING_DATA }
 				/>
-			</Box>
-		</Box>
+			}
+		>
+			<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ false } />
+		</PromotionOverlayLayout>
 	);
 }

package/src/components/interaction-details.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { type ComponentType, useMemo, useRef } from 'react';
+import { type ComponentType, useMemo } from 'react';
 import { PopoverContent } from '@elementor/editor-controls';
 import { type PropValue } from '@elementor/editor-props';
-import { Box, Divider, Grid } from '@elementor/ui';
+import { Divider, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { getInteractionsControl } from '../interactions-controls-registry';
@@ -182,8 +182,6 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	) as ComponentType< FieldProps< number > >;
 	const EasingControl = useControlComponent( 'easing' );
 
-	const containerRef = useRef< HTMLDivElement >( null );
-
 	const updateInteraction = (
 		updates: Partial< {
 			trigger: string;
@@ -241,150 +239,142 @@ export const InteractionDetails = ( { interaction, onChange, onPlayInteraction }
 	};
 
 	return (
-		<Box ref={ containerRef }>
-			<PopoverContent p={ 1.5 }>
-				<Grid container spacing={ 1.5 }>
-					{ TriggerControl && (
-						<Field label={ __( 'Trigger', 'elementor' ) }>
-							<TriggerControl
-								value={ trigger }
-								onChange={ ( v ) => updateInteraction( { trigger: v } ) }
-							/>
-						</Field>
-					) }
-
-					{ ReplayControl && (
-						<Field label={ __( 'Replay', 'elementor' ) }>
-							<ReplayControl
-								value={ replay }
-								onChange={ ( v ) => updateInteraction( { replay: v } ) }
-								disabled={ true }
-								anchorRef={ containerRef }
-							/>
-						</Field>
-					) }
-				</Grid>
+		<PopoverContent p={ 1.5 }>
+			<Grid container spacing={ 1.5 }>
+				{ TriggerControl && (
+					<Field label={ __( 'Trigger', 'elementor' ) }>
+						<TriggerControl value={ trigger } onChange={ ( v ) => updateInteraction( { trigger: v } ) } />
+					</Field>
+				) }
 
-				<Divider />
+				{ ReplayControl && (
+					<Field label={ __( 'Replay', 'elementor' ) }>
+						<ReplayControl
+							value={ replay }
+							onChange={ ( v ) => updateInteraction( { replay: v } ) }
+							disabled={ true }
+						/>
+					</Field>
+				) }
+			</Grid>
 
-				<Grid container spacing={ 1.5 }>
-					{ EffectControl && (
-						<Field label={ __( 'Effect', 'elementor' ) }>
-							<EffectControl value={ effect } onChange={ ( v ) => updateInteraction( { effect: v } ) } />
-						</Field>
-					) }
+			<Divider />
 
-					{ CustomEffectControl && (
-						<Field label={ __( 'Custom Effect', 'elementor' ) }>
-							<CustomEffectControl
-								value={ customEffects }
-								onChange={ ( v: PropValue ) => updateInteraction( { customEffects: v } ) }
-							/>
-						</Field>
-					) }
+			<Grid container spacing={ 1.5 }>
+				{ EffectControl && (
+					<Field label={ __( 'Effect', 'elementor' ) }>
+						<EffectControl value={ effect } onChange={ ( v ) => updateInteraction( { effect: v } ) } />
+					</Field>
+				) }
 
-					{ EffectTypeControl && (
-						<Field label={ __( 'Type', 'elementor' ) }>
-							<EffectTypeControl value={ type } onChange={ ( v ) => updateInteraction( { type: v } ) } />
-						</Field>
-					) }
-
-					{ DirectionControl && (
-						<Field label={ __( 'Direction', 'elementor' ) }>
-							<DirectionControl
-								value={ direction }
-								onChange={ ( v ) => updateInteraction( { direction: v } ) }
-								interactionType={ type }
-							/>
-						</Field>
-					) }
+				{ CustomEffectControl && (
+					<Field label={ __( 'Custom Effect', 'elementor' ) }>
+						<CustomEffectControl
+							value={ customEffects }
+							onChange={ ( v: PropValue ) => updateInteraction( { customEffects: v } ) }
+						/>
+					</Field>
+				) }
 
-					{ RepeatControl && (
-						<Field label={ __( 'Repeat', 'elementor' ) }>
-							<RepeatControl value={ repeat } onChange={ ( v ) => updateInteraction( { repeat: v } ) } />
-						</Field>
-					) }
-
-					{ TimesControl && (
-						<Field label={ __( 'Times', 'elementor' ) }>
-							<TimesControl
-								value={ times }
-								onChange={ ( v ) =>
-									updateInteraction( {
-										times: normalizeTimesValue( v, DEFAULT_VALUES.times ),
-									} )
-								}
-							/>
-						</Field>
-					) }
-
-					{ controlVisibilityConfig.duration( interactionValues ) && (
-						<Field label={ __( 'Duration', 'elementor' ) }>
-							<TimeFrameIndicator
-								value={ String( duration ) }
-								onChange={ ( v ) => updateInteraction( { duration: v as SizeStringValue } ) }
-								defaultValue={ DEFAULT_VALUES.duration as SizeStringValue }
-							/>
-						</Field>
-					) }
-
-					{ controlVisibilityConfig.delay( interactionValues ) && (
-						<Field label={ __( 'Delay', 'elementor' ) }>
-							<TimeFrameIndicator
-								value={ String( delay ) }
-								onChange={ ( v ) => updateInteraction( { delay: v as SizeStringValue } ) }
-								defaultValue={ DEFAULT_VALUES.delay as SizeStringValue }
-							/>
-						</Field>
-					) }
-				</Grid>
+				{ EffectTypeControl && (
+					<Field label={ __( 'Type', 'elementor' ) }>
+						<EffectTypeControl value={ type } onChange={ ( v ) => updateInteraction( { type: v } ) } />
+					</Field>
+				) }
 
-				{ controlVisibilityConfig.relativeTo( interactionValues ) && RelativeToControl && (
-					<>
-						<Divider />
-						<Grid container spacing={ 1.5 }>
-							{ StartControl && (
-								<Field label={ __( 'Start', 'elementor' ) }>
-									<StartControl
-										value={ parseSizeValue( start, [ '%' ] ).size?.toString() ?? '' }
-										onChange={ ( v: string ) =>
-											updateInteraction( { start: v as SizeStringValue } )
-										}
-									/>
-								</Field>
-							) }
-							{ EndControl && (
-								<Field label={ __( 'End', 'elementor' ) }>
-									<EndControl
-										value={ parseSizeValue( end, [ '%' ] ).size?.toString() ?? '' }
-										onChange={ ( v: string ) => updateInteraction( { end: v as SizeStringValue } ) }
-									/>
-								</Field>
-							) }
-							<Field label={ __( 'Relative To', 'elementor' ) }>
-								<RelativeToControl
-									value={ relativeTo }
-									onChange={ ( v ) => updateInteraction( { relativeTo: v } ) }
-								/>
-							</Field>
-						</Grid>
-						<Divider />
-					</>
+				{ DirectionControl && (
+					<Field label={ __( 'Direction', 'elementor' ) }>
+						<DirectionControl
+							value={ direction }
+							onChange={ ( v ) => updateInteraction( { direction: v } ) }
+							interactionType={ type }
+						/>
+					</Field>
+				) }
+
+				{ RepeatControl && (
+					<Field label={ __( 'Repeat', 'elementor' ) }>
+						<RepeatControl value={ repeat } onChange={ ( v ) => updateInteraction( { repeat: v } ) } />
+					</Field>
+				) }
+
+				{ TimesControl && (
+					<Field label={ __( 'Times', 'elementor' ) }>
+						<TimesControl
+							value={ times }
+							onChange={ ( v ) =>
+								updateInteraction( {
+									times: normalizeTimesValue( v, DEFAULT_VALUES.times ),
+								} )
+							}
+						/>
+					</Field>
+				) }
+
+				{ controlVisibilityConfig.duration( interactionValues ) && (
+					<Field label={ __( 'Duration', 'elementor' ) }>
+						<TimeFrameIndicator
+							value={ String( duration ) }
+							onChange={ ( v ) => updateInteraction( { duration: v as SizeStringValue } ) }
+							defaultValue={ DEFAULT_VALUES.duration as SizeStringValue }
+						/>
+					</Field>
+				) }
+
+				{ controlVisibilityConfig.delay( interactionValues ) && (
+					<Field label={ __( 'Delay', 'elementor' ) }>
+						<TimeFrameIndicator
+							value={ String( delay ) }
+							onChange={ ( v ) => updateInteraction( { delay: v as SizeStringValue } ) }
+							defaultValue={ DEFAULT_VALUES.delay as SizeStringValue }
+						/>
+					</Field>
 				) }
+			</Grid>
 
-				{ EasingControl && (
+			{ controlVisibilityConfig.relativeTo( interactionValues ) && RelativeToControl && (
+				<>
+					<Divider />
 					<Grid container spacing={ 1.5 }>
-						<Field label={ __( 'Easing', 'elementor' ) }>
-							<EasingControl
-								value={ easing }
-								onChange={ ( v ) => {
-									updateInteraction( { easing: v } );
-								} }
+						{ StartControl && (
+							<Field label={ __( 'Start', 'elementor' ) }>
+								<StartControl
+									value={ parseSizeValue( start, [ '%' ] ).size?.toString() ?? '' }
+									onChange={ ( v: string ) => updateInteraction( { start: v as SizeStringValue } ) }
+								/>
+							</Field>
+						) }
+						{ EndControl && (
+							<Field label={ __( 'End', 'elementor' ) }>
+								<EndControl
+									value={ parseSizeValue( end, [ '%' ] ).size?.toString() ?? '' }
+									onChange={ ( v: string ) => updateInteraction( { end: v as SizeStringValue } ) }
+								/>
+							</Field>
+						) }
+						<Field label={ __( 'Relative To', 'elementor' ) }>
+							<RelativeToControl
+								value={ relativeTo }
+								onChange={ ( v ) => updateInteraction( { relativeTo: v } ) }
 							/>
 						</Field>
 					</Grid>
-				) }
-			</PopoverContent>
-		</Box>
+					<Divider />
+				</>
+			) }
+
+			{ EasingControl && (
+				<Grid container spacing={ 1.5 }>
+					<Field label={ __( 'Easing', 'elementor' ) }>
+						<EasingControl
+							value={ easing }
+							onChange={ ( v ) => {
+								updateInteraction( { easing: v } );
+							} }
+						/>
+					</Field>
+				</Grid>
+			) }
+		</PopoverContent>
 	);
 };

package/src/index.ts

@@ -16,6 +16,7 @@ export { TRIGGER_OPTIONS, BASE_TRIGGERS } from './components/controls/trigger';
 export { EASING_OPTIONS, BASE_EASINGS } from './components/controls/easing';
 export { REPLAY_OPTIONS, BASE_REPLAY } from './components/controls/replay';
 export { EFFECT_OPTIONS, BASE_EFFECTS } from './components/controls/effect';
+export { REPEAT_OPTIONS, REPEAT_TOOLTIPS } from './components/controls/repeat';
 
 export {
 	createString,

package/src/init.ts

@@ -1,14 +1,17 @@
+import { getMCPByDomain } from '@elementor/editor-mcp';
+
 import { initPasteInteractionsCommand } from './commands/paste-interactions';
 import { Direction } from './components/controls/direction';
 import { Easing } from './components/controls/easing';
 import { Effect } from './components/controls/effect';
 import { EffectType } from './components/controls/effect-type';
+import { Repeat } from './components/controls/repeat';
 import { Replay } from './components/controls/replay';
 import { Trigger } from './components/controls/trigger';
 import { initCleanInteractionIdsOnDuplicate } from './hooks/on-duplicate';
 import { registerInteractionsControl } from './interactions-controls-registry';
 import { interactionsRepository } from './interactions-repository';
-import { initMcpInteractions } from './mcp';
+import { EDITOR_INTERACTIONS_MCP_INSTRUCTIONS, initMcpInteractions } from './mcp';
 import { documentElementsInteractionsProvider } from './providers/document-elements-interactions-provider';
 
 export function init() {
@@ -54,7 +57,12 @@ export function init() {
 			options: [ 'fade', 'slide', 'scale' ],
 		} );
 
-		initMcpInteractions();
+		registerInteractionsControl( {
+			type: 'repeat',
+			component: Repeat,
+		} );
+
+		initMcpInteractions( getMCPByDomain( 'interactions', { instructions: EDITOR_INTERACTIONS_MCP_INSTRUCTIONS } ) );
 	} catch ( error ) {
 		throw error;
 	}

package/src/mcp/constants.ts

@@ -1 +1,59 @@
 export const MAX_INTERACTIONS_PER_ELEMENT = 5;
+export const EDITOR_INTERACTIONS_MCP_INSTRUCTIONS = `MCP server for managing element interactions and animations. Use this to add, modify, or remove animations and motion effects triggered by user events such as page load or scroll-into-view.
+		** IMPORTANT **
+		Use the "interactions-schema" resource to get the schema of the interactions.
+		Actions:
+		- get: Read the current interactions on the element.
+		- add: Add a new interaction (max ${ MAX_INTERACTIONS_PER_ELEMENT } per element).
+		- update: Update an existing interaction by its interactionId.
+		- delete: Remove a specific interaction by its interactionId.
+		- clear: Remove all interactions from the element.
+		
+		For add/update, provide: trigger, effect, effectType, direction (required for slide effect), duration, delay, easing.
+		Use excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]).
+		Example Get Request:
+		{
+			"elementId": "123",
+			"action": "get",
+			"interactionId": "123",
+			"animationData": {
+				"trigger": "click",
+				"effect": "fade",
+			}
+		}
+		Example Add Request:
+		{
+			"elementId": "123",
+			"action": "add",
+			"animationData": {
+				"effectType": "in",
+				"direction": "top",
+				"trigger": "click",
+				"effect": "fade",
+				"duration": 1000,
+				"delay": 0,
+				"easing": "easeIn",
+				"excludedBreakpoints": ["mobile", "tablet"],
+			}
+		}
+		Example Update Request:
+		{
+			"elementId": "123",
+			"action": "update",
+			"interactionId": "123",
+			"animationData": {
+				"trigger": "click",
+				"effect": "fade",
+			}
+		}
+		Example Delete Request:
+		{
+			"elementId": "123",
+			"action": "delete",
+			"interactionId": "123",
+		}
+		Example Clear Request:
+		{
+			"elementId": "123",
+			"action": "clear",
+		}`;

package/src/mcp/index.ts

@@ -1,74 +1,20 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
-import { MAX_INTERACTIONS_PER_ELEMENT } from './constants';
 import { initInteractionsSchemaResource } from './resources/interactions-schema-resource';
 import { initManageElementInteractionTool } from './tools/manage-element-interaction-tool';
 
-export const initMcpInteractions = () => {
-	const reg = getMCPByDomain( 'interactions', {
-		instructions: `
-		MCP server for managing element interactions and animations. Use this to add, modify, or remove animations and motion effects triggered by user events such as page load or scroll-into-view.
-		** IMPORTANT **
-		Use the "interactions-schema" resource to get the schema of the interactions.
-		Actions:
-		- get: Read the current interactions on the element.
-		- add: Add a new interaction (max ${ MAX_INTERACTIONS_PER_ELEMENT } per element).
-		- update: Update an existing interaction by its interactionId.
-		- delete: Remove a specific interaction by its interactionId.
-		- clear: Remove all interactions from the element.
-		
-		For add/update, provide: trigger, effect, effectType, direction (required for slide effect), duration, delay, easing.
-		Use excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]).
-		Example Get Request:
-		{
-			"elementId": "123",
-			"action": "get",
-			"interactionId": "123",
-			"animationData": {
-				"trigger": "click",
-				"effect": "fade",
-			}
-		}
-		Example Add Request:
-		{
-			"elementId": "123",
-			"action": "add",
-			"animationData": {
-				"effectType": "in",
-				"direction": "top",
-				"trigger": "click",
-				"effect": "fade",
-				"duration": 1000,
-				"delay": 0,
-				"easing": "easeIn",
-				"excludedBreakpoints": ["mobile", "tablet"],
-			}
-		}
-		Example Update Request:
-		{
-			"elementId": "123",
-			"action": "update",
-			"interactionId": "123",
-			"animationData": {
-				"trigger": "click",
-				"effect": "fade",
-			}
-		}
-		Example Delete Request:
-		{
-			"elementId": "123",
-			"action": "delete",
-			"interactionId": "123",
-		}
-		Example Clear Request:
-		{
-			"elementId": "123",
-			"action": "clear",
-		}
-		`,
-	} );
-	reg.waitForReady().then( () => {
-		initInteractionsSchemaResource( reg );
-		initManageElementInteractionTool( reg );
-	} );
+export * from './constants';
+
+export const initMcpInteractions = ( reg: MCPRegistryEntry ) => {
+	const { setMCPDescription } = reg;
+	setMCPDescription(
+		`Everything related to V4 ( Atomic ) interactions.
+# Interactions
+- Create/update/delete interactions
+- Get list of interactions
+- Get details of an interaction
+`
+	);
+	initInteractionsSchemaResource( reg );
+	initManageElementInteractionTool( reg );
 };

package/src/mcp/tools/schema.ts

@@ -25,7 +25,7 @@ export const proSchema = {
 		.optional()
 		.describe( 'Event that triggers the animation' ),
 	effect: z.enum( [ 'fade', 'slide', 'scale', 'custom' ] ).optional().describe( 'Animation effect type' ),
-	customEffect: z
+	customEffects: z
 		.object( {
 			keyframes: z
 				.array(

package/src/ui/interactions-promotion-chip.tsx

@@ -64,5 +64,3 @@ export const InteractionsPromotionChip = forwardRef< InteractionsPromotionChipRe
 		);
 	}
 );
-
-InteractionsPromotionChip.displayName = 'InteractionsPromotionChip';