@elementor/editor-interactions 4.1.0-742 → 4.1.0-744

package/dist/index.mjs

@@ -32,11 +32,15 @@ import { Stack as Stack3 } from "@elementor/ui";
 
 // src/contexts/interactions-context.tsx
 import * as React2 from "react";
-import { createContext, useContext, useEffect } from "react";
+import { createContext, useContext, useEffect, useMemo } from "react";
 import {
+  getElementInteractions as getElementInteractions2,
+  getElementLabel,
   playElementInteractions,
   updateElementInteractions
 } from "@elementor/editor-elements";
+import { undoable } from "@elementor/editor-v1-adapters";
+import { __ as __2 } from "@wordpress/i18n";
 
 // src/hooks/use-element-interactions.ts
 import { useState } from "react";
@@ -487,12 +491,39 @@ var InteractionsProvider = ({ children, elementId }) => {
     window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"));
   }, []);
   const interactions = rawInteractions ?? DEFAULT_INTERACTIONS;
+  const undoableSetInteractions = useMemo(
+    () => undoable(
+      {
+        do: ({ interactions: newInteractions }) => {
+          const previous = getElementInteractions2(elementId);
+          updateElementInteractions({ elementId, interactions: newInteractions });
+          return previous;
+        },
+        undo: (_, previous) => {
+          updateElementInteractions({
+            elementId,
+            interactions: previous?.items?.length ? previous : void 0
+          });
+        }
+      },
+      {
+        title: getElementLabel(elementId),
+        subtitle: ({ operationType }) => operationType === "apply" ? __2("Interaction Applied", "elementor") : __2("Interaction Deleted", "elementor")
+      }
+    ),
+    [elementId]
+  );
   const setInteractions = (value) => {
     const normalizedValue = value && value.items?.length === 0 ? void 0 : value;
-    updateElementInteractions({
-      elementId,
-      interactions: normalizedValue
-    });
+    const prevItemCount = interactions.items?.length ?? 0;
+    const newItemCount = normalizedValue?.items?.length ?? 0;
+    if (newItemCount > prevItemCount) {
+      undoableSetInteractions({ interactions: normalizedValue, operationType: "apply" });
+    } else if (newItemCount < prevItemCount) {
+      undoableSetInteractions({ interactions: normalizedValue, operationType: "delete" });
+    } else {
+      updateElementInteractions({ elementId, interactions: normalizedValue });
+    }
   };
   const playInteractions = (interactionId) => {
     playElementInteractions(elementId, interactionId);
@@ -529,7 +560,7 @@ var PopupStateProvider = ({ children }) => {
 };
 
 // src/utils/tracking.ts
-import { getElementLabel } from "@elementor/editor-elements";
+import { getElementLabel as getElementLabel2 } from "@elementor/editor-elements";
 import { getMixpanel } from "@elementor/events";
 var TRIGGER_LABELS2 = {
   load: "On page load",
@@ -552,10 +583,10 @@ var trackInteractionCreated = (elementId, item) => {
     app_type: config?.appTypes?.editor,
     window_name: config?.appTypes?.editor,
     interaction_type: config?.triggers?.click,
-    target_name: getElementLabel(elementId),
+    target_name: getElementLabel2(elementId),
     interaction_result: "interaction_created",
     target_location: config?.locations?.widgetPanel,
-    location_l1: getElementLabel(elementId),
+    location_l1: getElementLabel2(elementId),
     location_l2: "interactions",
     interaction_description: "interaction_created",
     interaction_trigger: TRIGGER_LABELS2[trigger] ?? capitalize2(trigger),
@@ -565,11 +596,11 @@ var trackInteractionCreated = (elementId, item) => {
 
 // src/components/interactions-list.tsx
 import * as React10 from "react";
-import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2 } from "react";
 import { Repeater } from "@elementor/editor-controls";
 import { InfoCircleFilledIcon, PlayerPlayIcon } from "@elementor/icons";
 import { Alert, AlertTitle, Box, IconButton, Tooltip } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/contexts/interactions-item-context.tsx
 import * as React4 from "react";
@@ -612,10 +643,10 @@ function syncGridOverlay(trigger, start, end, relativeTo) {
 
 // src/components/interaction-details.tsx
 import * as React7 from "react";
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 import { PopoverContent } from "@elementor/editor-controls";
 import { Divider, Grid as Grid2 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/utils/resolve-direction.ts
 var resolveDirection = (hasDirection, newEffect, newDirection, currentDirection, currentEffect) => {
@@ -742,7 +773,7 @@ function normalizeTimesValue(value, fallback) {
   return Math.max(1, Math.floor(numericValue));
 }
 function useControlComponent(controlName, isVisible = true) {
-  return useMemo(() => {
+  return useMemo2(() => {
     if (!isVisible) {
       return null;
     }
@@ -848,27 +879,27 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React7.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
       disabled: true
     }
-  ))), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Effect", "elementor") }, /* @__PURE__ */ React7.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), CustomEffectControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Custom Effect", "elementor") }, /* @__PURE__ */ React7.createElement(
+  ))), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("Effect", "elementor") }, /* @__PURE__ */ React7.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), CustomEffectControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("Custom Effect", "elementor") }, /* @__PURE__ */ React7.createElement(
     CustomEffectControl,
     {
       value: customEffects,
       onChange: (v) => updateInteraction({ customEffects: v })
     }
-  )), EffectTypeControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Type", "elementor") }, /* @__PURE__ */ React7.createElement(EffectTypeControl, { value: type, onChange: (v) => updateInteraction({ type: v }) })), DirectionControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Direction", "elementor") }, /* @__PURE__ */ React7.createElement(
+  )), EffectTypeControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("Type", "elementor") }, /* @__PURE__ */ React7.createElement(EffectTypeControl, { value: type, onChange: (v) => updateInteraction({ type: v }) })), DirectionControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("Direction", "elementor") }, /* @__PURE__ */ React7.createElement(
     DirectionControl,
     {
       value: direction,
       onChange: (v) => updateInteraction({ direction: v }),
       interactionType: type
     }
-  )), RepeatControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Repeat", "elementor") }, /* @__PURE__ */ React7.createElement(RepeatControl, { value: repeat, onChange: (v) => updateInteraction({ repeat: v }) })), TimesControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Times", "elementor") }, /* @__PURE__ */ React7.createElement(
+  )), RepeatControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("Repeat", "elementor") }, /* @__PURE__ */ React7.createElement(RepeatControl, { value: repeat, onChange: (v) => updateInteraction({ repeat: v }) })), TimesControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("Times", "elementor") }, /* @__PURE__ */ React7.createElement(
     TimesControl,
     {
       value: times,
@@ -876,39 +907,39 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         times: normalizeTimesValue(v, DEFAULT_VALUES.times)
       })
     }
-  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React7.createElement(Field, { label: __2("Duration", "elementor") }, /* @__PURE__ */ React7.createElement(
+  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React7.createElement(Field, { label: __3("Duration", "elementor") }, /* @__PURE__ */ React7.createElement(
     TimeFrameIndicator,
     {
       value: String(duration),
       onChange: (v) => updateInteraction({ duration: v }),
       defaultValue: DEFAULT_VALUES.duration
     }
-  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React7.createElement(Field, { label: __2("Delay", "elementor") }, /* @__PURE__ */ React7.createElement(
+  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React7.createElement(Field, { label: __3("Delay", "elementor") }, /* @__PURE__ */ React7.createElement(
     TimeFrameIndicator,
     {
       value: String(delay),
       onChange: (v) => updateInteraction({ delay: v }),
       defaultValue: DEFAULT_VALUES.delay
     }
-  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, StartControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Start", "elementor") }, /* @__PURE__ */ React7.createElement(
+  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, StartControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("Start", "elementor") }, /* @__PURE__ */ React7.createElement(
     StartControl,
     {
       value: parseSizeValue(start, ["%"]).size?.toString() ?? "",
       onChange: (v) => updateInteraction({ start: v })
     }
-  )), EndControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("End", "elementor") }, /* @__PURE__ */ React7.createElement(
+  )), EndControl && /* @__PURE__ */ React7.createElement(Field, { label: __3("End", "elementor") }, /* @__PURE__ */ React7.createElement(
     EndControl,
     {
       value: parseSizeValue(end, ["%"]).size?.toString() ?? "",
       onChange: (v) => updateInteraction({ end: v })
     }
-  )), /* @__PURE__ */ React7.createElement(Field, { label: __2("Relative To", "elementor") }, /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React7.createElement(Field, { label: __3("Relative To", "elementor") }, /* @__PURE__ */ React7.createElement(
     RelativeToControl,
     {
       value: relativeTo,
       onChange: (v) => updateInteraction({ relativeTo: v })
     }
-  ))), /* @__PURE__ */ React7.createElement(Divider, null)), EasingControl && /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: __2("Easing", "elementor") }, /* @__PURE__ */ React7.createElement(
+  ))), /* @__PURE__ */ React7.createElement(Divider, null)), EasingControl && /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: __3("Easing", "elementor") }, /* @__PURE__ */ React7.createElement(
     EasingControl,
     {
       value: easing,
@@ -923,19 +954,19 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
 import * as React9 from "react";
 import { useCallback as useCallback4 } from "react";
 import { Divider as Divider2, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/components/interaction-settings.tsx
 import * as React8 from "react";
-import { useCallback as useCallback3, useMemo as useMemo2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo3, useState as useState3 } from "react";
 import { ControlFormLabel as ControlFormLabel2, PopoverContent as PopoverContent2 } from "@elementor/editor-controls";
 import { useBreakpoints } from "@elementor/editor-responsive";
 import { Autocomplete, Chip, Grid as Grid3, Stack as Stack2, TextField } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 var SIZE = "tiny";
 var InteractionSettings = ({ interaction, onChange }) => {
   const breakpoints = useBreakpoints();
-  const availableBreakpoints = useMemo2(
+  const availableBreakpoints = useMemo3(
     () => breakpoints.map((breakpoint) => ({ label: breakpoint.label, value: String(breakpoint.id) })),
     [breakpoints]
   );
@@ -965,7 +996,7 @@ var InteractionSettings = ({ interaction, onChange }) => {
     },
     [interaction, availableBreakpoints, onChange]
   );
-  return /* @__PURE__ */ React8.createElement(PopoverContent2, { p: 1.5 }, /* @__PURE__ */ React8.createElement(Grid3, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(Stack2, { direction: "column", gap: 1 }, /* @__PURE__ */ React8.createElement(ControlFormLabel2, { sx: { width: "100%" } }, __3("Trigger on", "elementor")), /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React8.createElement(PopoverContent2, { p: 1.5 }, /* @__PURE__ */ React8.createElement(Grid3, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(Stack2, { direction: "column", gap: 1 }, /* @__PURE__ */ React8.createElement(ControlFormLabel2, { sx: { width: "100%" } }, __4("Trigger on", "elementor")), /* @__PURE__ */ React8.createElement(
     Autocomplete,
     {
       fullWidth: true,
@@ -1009,11 +1040,11 @@ var InteractionsListItem = ({
     {
       size: "small",
       variant: "fullWidth",
-      "aria-label": __4("Interaction", "elementor"),
+      "aria-label": __5("Interaction", "elementor"),
       ...getTabsProps()
     },
-    /* @__PURE__ */ React9.createElement(Tab, { label: __4("Details", "elementor"), ...getTabProps("details") }),
-    /* @__PURE__ */ React9.createElement(Tab, { label: __4("Settings", "elementor"), ...getTabProps("settings") })
+    /* @__PURE__ */ React9.createElement(Tab, { label: __5("Details", "elementor"), ...getTabProps("details") }),
+    /* @__PURE__ */ React9.createElement(Tab, { label: __5("Settings", "elementor"), ...getTabProps("settings") })
   ), /* @__PURE__ */ React9.createElement(Divider2, null), /* @__PURE__ */ React9.createElement(TabPanel, { sx: { p: 0 }, ...getTabPanelProps("details") }, /* @__PURE__ */ React9.createElement(
     InteractionDetails,
     {
@@ -1054,10 +1085,10 @@ function InteractionsList(props) {
       handleUpdateInteractions(newState);
     }
   }, [triggerCreateOnShowEmpty, interactions.items, handleUpdateInteractions]);
-  const isMaxNumberOfInteractionsReached = useMemo3(() => {
+  const isMaxNumberOfInteractionsReached = useMemo4(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(AlertTitle, null, __5("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(Box, { component: "span" }, __5(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(AlertTitle, null, __6("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(Box, { component: "span" }, __6(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
@@ -1090,7 +1121,7 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const contextValue = useMemo3(
+  const contextValue = useMemo4(
     () => ({
       onInteractionChange: handleInteractionChange,
       onPlayInteraction
@@ -1102,7 +1133,7 @@ function InteractionsList(props) {
     {
       openOnAdd: true,
       openItem: triggerCreateOnShowEmpty ? 0 : void 0,
-      label: __5("Interactions", "elementor"),
+      label: __6("Interactions", "elementor"),
       values: interactions.items,
       setValues: handleRepeaterChange,
       showDuplicate: false,
@@ -1123,10 +1154,10 @@ function InteractionsList(props) {
           syncGridOverlay(trigger, start, end, relativeTo);
         },
         onPopoverClose: () => dispatchScrollInteraction(null),
-        actions: (value) => /* @__PURE__ */ React10.createElement(Tooltip, { key: "preview", placement: "top", title: __5("Preview", "elementor") }, /* @__PURE__ */ React10.createElement(
+        actions: (value) => /* @__PURE__ */ React10.createElement(Tooltip, { key: "preview", placement: "top", title: __6("Preview", "elementor") }, /* @__PURE__ */ React10.createElement(
           IconButton,
           {
-            "aria-label": __5("Play interaction", "elementor"),
+            "aria-label": __6("Play interaction", "elementor"),
             size: "tiny",
             onClick: () => onPlayInteraction(extractString(value.value.interaction_id))
           },
@@ -1241,7 +1272,7 @@ function createInteractionsProvider({
 }
 
 // src/providers/document-elements-interactions-provider.ts
-import { getCurrentDocumentId, getElementInteractions as getElementInteractions2, getElements } from "@elementor/editor-elements";
+import { getCurrentDocumentId, getElementInteractions as getElementInteractions3, getElements } from "@elementor/editor-elements";
 import { __privateListenTo as listenTo, windowEvent as windowEvent2 } from "@elementor/editor-v1-adapters";
 var ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-interactions-";
 var documentElementsInteractionsProvider = createInteractionsProvider({
@@ -1262,14 +1293,14 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
     all: () => {
       const elements = getElements();
       const filtered = elements.filter((element) => {
-        const interactions = getElementInteractions2(element.id);
+        const interactions = getElementInteractions3(element.id);
         if (!interactions) {
           return false;
         }
         return interactions?.items?.length > 0;
       });
       return filtered.map((element) => {
-        const interactions = getElementInteractions2(element.id);
+        const interactions = getElementInteractions3(element.id);
         return {
           elementId: element.id,
           dataId: element.id,
@@ -1286,17 +1317,17 @@ import { getMCPByDomain } from "@elementor/editor-mcp";
 // src/commands/paste-interactions.ts
 import {
   getContainer,
-  getElementInteractions as getElementInteractions3,
-  getElementLabel as getElementLabel2,
+  getElementInteractions as getElementInteractions4,
+  getElementLabel as getElementLabel3,
   getWidgetsCache,
   updateElementInteractions as updateElementInteractions2
 } from "@elementor/editor-elements";
 import {
   __privateListenTo as listenTo2,
   commandStartEvent,
-  undoable
+  undoable as undoable2
 } from "@elementor/editor-v1-adapters";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/commands/get-clipboard-elements.ts
 function getClipboardElements(storageKey = "clipboard") {
@@ -1316,7 +1347,7 @@ function isAtomicContainer(container) {
   return Boolean(elementConfig?.atomic_props_schema);
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? __6("Elements", "elementor") : getElementLabel2(containers[0].id);
+  return containers.length > 1 ? __7("Elements", "elementor") : getElementLabel3(containers[0].id);
 }
 function normalizeClipboardInteractions(raw) {
   if (!raw) {
@@ -1342,13 +1373,13 @@ function regenerateInteractionIds(interactions) {
   return cloned;
 }
 function initPasteInteractionsCommand() {
-  const undoablePasteInteractions = undoable(
+  const undoablePasteInteractions = undoable2(
     {
       do: ({ containers, newInteractions }) => {
         const pasted = regenerateInteractionIds(newInteractions);
         return containers.map((container) => {
           const elementId = container.id;
-          const previous = getElementInteractions3(elementId);
+          const previous = getElementInteractions4(elementId);
           updateElementInteractions2({
             elementId,
             interactions: pasted
@@ -1367,7 +1398,7 @@ function initPasteInteractionsCommand() {
     },
     {
       title: ({ containers }) => getTitleForContainers(containers),
-      subtitle: __6("Interactions Pasted", "elementor")
+      subtitle: __7("Interactions Pasted", "elementor")
     }
   );
   listenTo2(commandStartEvent("document/elements/paste-interactions"), (e) => {
@@ -1397,11 +1428,11 @@ function initPasteInteractionsCommand() {
 
 // src/components/controls/direction.tsx
 import * as React12 from "react";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { StyledToggleButton, StyledToggleButtonGroup } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
 import { Tooltip as Tooltip2 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 var AXIS = {
   top: "vertical",
   bottom: "vertical",
@@ -1428,32 +1459,32 @@ function toggleDirection(current, clicked) {
 }
 function Direction({ value, onChange, interactionType }) {
   const isIn = interactionType === "in";
-  const options = useMemo4(
+  const options = useMemo5(
     () => [
       {
         dir: "top",
-        label: isIn ? __7("From top", "elementor") : __7("To top", "elementor"),
+        label: isIn ? __8("From top", "elementor") : __8("To top", "elementor"),
         Icon: isIn ? ArrowDownSmallIcon : ArrowUpSmallIcon
       },
       {
         dir: "bottom",
-        label: isIn ? __7("From bottom", "elementor") : __7("To bottom", "elementor"),
+        label: isIn ? __8("From bottom", "elementor") : __8("To bottom", "elementor"),
         Icon: isIn ? ArrowUpSmallIcon : ArrowDownSmallIcon
       },
       {
         dir: "left",
-        label: isIn ? __7("From left", "elementor") : __7("To left", "elementor"),
+        label: isIn ? __8("From left", "elementor") : __8("To left", "elementor"),
         Icon: isIn ? ArrowRightIcon : ArrowLeftIcon
       },
       {
         dir: "right",
-        label: isIn ? __7("From right", "elementor") : __7("To right", "elementor"),
+        label: isIn ? __8("From right", "elementor") : __8("To right", "elementor"),
         Icon: isIn ? ArrowLeftIcon : ArrowRightIcon
       }
     ],
     [isIn]
   );
-  const selectedDirections = useMemo4(() => parseValue(value), [value]);
+  const selectedDirections = useMemo5(() => parseValue(value), [value]);
   return /* @__PURE__ */ React12.createElement(
     StyledToggleButtonGroup,
     {
@@ -1485,14 +1516,14 @@ function Direction({ value, onChange, interactionType }) {
 
 // src/components/controls/easing.tsx
 import * as React15 from "react";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 
 // src/ui/promotion-select.tsx
 import * as React14 from "react";
 import { useRef as useRef3 } from "react";
 import { MenuListItem } from "@elementor/editor-ui";
 import { MenuSubheader, Select } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/ui/interactions-promotion-chip.tsx
 import * as React13 from "react";
@@ -1500,7 +1531,7 @@ import { forwardRef, useCallback as useCallback7, useImperativeHandle, useState
 import { trackUpgradePromotionClick, trackViewPromotion } from "@elementor/editor-controls";
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
 import { Box as Box2 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 var InteractionsPromotionChip = forwardRef(
   ({ content, upgradeUrl, anchorRef, trackingData }, ref) => {
     const [isOpen, setIsOpen] = useState5(false);
@@ -1522,9 +1553,9 @@ var InteractionsPromotionChip = forwardRef(
       PromotionPopover,
       {
         open: isOpen,
-        title: __8("Interactions", "elementor"),
+        title: __9("Interactions", "elementor"),
         content,
-        ctaText: __8("Upgrade now", "elementor"),
+        ctaText: __9("Upgrade now", "elementor"),
         ctaUrl: upgradeUrl,
         anchorRef,
         placement: anchorRef ? "right-start" : void 0,
@@ -1587,7 +1618,7 @@ function PromotionSelect({
           promotionRef.current?.toggle();
         }
       },
-      promotionLabel ?? __9("PRO features", "elementor"),
+      promotionLabel ?? __10("PRO features", "elementor"),
       /* @__PURE__ */ React14.createElement(
         InteractionsPromotionChip,
         {
@@ -1606,13 +1637,13 @@ function PromotionSelect({
 // src/components/controls/easing.tsx
 var TRACKING_DATA = { target_name: "interactions_easing", location_l2: "interactions" };
 var EASING_OPTIONS = {
-  easeIn: __10("Ease In", "elementor"),
-  easeInOut: __10("Ease In Out", "elementor"),
-  easeOut: __10("Ease Out", "elementor"),
-  backIn: __10("Back In", "elementor"),
-  backInOut: __10("Back In Out", "elementor"),
-  backOut: __10("Back Out", "elementor"),
-  linear: __10("Linear", "elementor")
+  easeIn: __11("Ease In", "elementor"),
+  easeInOut: __11("Ease In Out", "elementor"),
+  easeOut: __11("Ease Out", "elementor"),
+  backIn: __11("Back In", "elementor"),
+  backInOut: __11("Back In Out", "elementor"),
+  backOut: __11("Back Out", "elementor"),
+  linear: __11("Linear", "elementor")
 };
 var BASE_EASINGS = ["easeIn"];
 function Easing({}) {
@@ -1628,7 +1659,7 @@ function Easing({}) {
       value: DEFAULT_VALUES.easing,
       baseOptions,
       disabledOptions,
-      promotionContent: __10("Upgrade to control the smoothness of the interaction.", "elementor"),
+      promotionContent: __11("Upgrade to control the smoothness of the interaction.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/",
       trackingData: TRACKING_DATA
     }
@@ -1637,13 +1668,13 @@ function Easing({}) {
 
 // src/components/controls/effect.tsx
 import * as React16 from "react";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 var TRACKING_DATA2 = { target_name: "interactions_effect", location_l2: "interactions" };
 var EFFECT_OPTIONS = {
-  fade: __11("Fade", "elementor"),
-  slide: __11("Slide", "elementor"),
-  scale: __11("Scale", "elementor"),
-  custom: __11("Custom", "elementor")
+  fade: __12("Fade", "elementor"),
+  slide: __12("Slide", "elementor"),
+  scale: __12("Scale", "elementor"),
+  custom: __12("Custom", "elementor")
 };
 var BASE_EFFECTS = ["fade", "slide", "scale"];
 function Effect({ value, onChange }) {
@@ -1660,8 +1691,8 @@ function Effect({ value, onChange }) {
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: __11("PRO effects", "elementor"),
-      promotionContent: __11(
+      promotionLabel: __12("PRO effects", "elementor"),
+      promotionContent: __12(
         "Upgrade to further customize your animation with opacity, scale, move, rotate and more.",
         "elementor"
       ),
@@ -1674,19 +1705,19 @@ function Effect({ value, onChange }) {
 // src/components/controls/effect-type.tsx
 import * as React17 from "react";
 import { ToggleButtonGroupUi } from "@elementor/editor-controls";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 function EffectType({ value, onChange }) {
   const options = [
     {
       value: "in",
-      label: __12("In", "elementor"),
-      renderContent: () => __12("In", "elementor"),
+      label: __13("In", "elementor"),
+      renderContent: () => __13("In", "elementor"),
       showTooltip: true
     },
     {
       value: "out",
-      label: __12("Out", "elementor"),
-      renderContent: () => __12("Out", "elementor"),
+      label: __13("Out", "elementor"),
+      renderContent: () => __13("Out", "elementor"),
       showTooltip: true
     }
   ];
@@ -1698,7 +1729,7 @@ import * as React19 from "react";
 import { useRef as useRef4 } from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi2 } from "@elementor/editor-controls";
 import { Number123Icon, RepeatIcon } from "@elementor/icons";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 
 // src/ui/promotion-overlay-layout.tsx
 import * as React18 from "react";
@@ -1713,12 +1744,12 @@ var PromotionOverlayLayout = forwardRef2(
 // src/components/controls/repeat.tsx
 var TRACKING_DATA3 = { target_name: "interactions_repeat", location_l2: "interactions" };
 var REPEAT_OPTIONS = {
-  times: __13("times", "elementor"),
-  loop: __13("loop", "elementor")
+  times: __14("times", "elementor"),
+  loop: __14("loop", "elementor")
 };
 var REPEAT_TOOLTIPS = {
-  times: __13("Enable number", "elementor"),
-  loop: __13("Infinite repeat", "elementor")
+  times: __14("Enable number", "elementor"),
+  loop: __14("Infinite repeat", "elementor")
 };
 function Repeat() {
   const repeatContainerRef = useRef4(null);
@@ -1745,7 +1776,7 @@ function Repeat() {
       promotionChip: /* @__PURE__ */ React19.createElement(
         InteractionsPromotionChip,
         {
-          content: __13("Upgrade to control how many times the animation repeats.", "elementor"),
+          content: __14("Upgrade to control how many times the animation repeats.", "elementor"),
           upgradeUrl: "https://go.elementor.com/go-pro-interactions-repeat-modal/",
           anchorRef: repeatContainerRef,
           trackingData: TRACKING_DATA3
@@ -1762,11 +1793,11 @@ import * as React20 from "react";
 import { useRef as useRef5 } from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi3 } from "@elementor/editor-controls";
 import { CheckIcon, MinusIcon } from "@elementor/icons";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 var TRACKING_DATA4 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
-  no: __14("No", "elementor"),
-  yes: __14("Yes", "elementor")
+  no: __15("No", "elementor"),
+  yes: __15("Yes", "elementor")
 };
 var BASE_REPLAY = ["no"];
 function Replay({ onChange }) {
@@ -1794,7 +1825,7 @@ function Replay({ onChange }) {
       promotionChip: /* @__PURE__ */ React20.createElement(
         InteractionsPromotionChip,
         {
-          content: __14("Upgrade to run the animation every time its trigger occurs.", "elementor"),
+          content: __15("Upgrade to run the animation every time its trigger occurs.", "elementor"),
           upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
           anchorRef: replayContainerRef,
           trackingData: TRACKING_DATA4
@@ -1807,14 +1838,14 @@ function Replay({ onChange }) {
 
 // src/components/controls/trigger.tsx
 import * as React21 from "react";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 var TRACKING_DATA5 = { target_name: "interactions_trigger", location_l2: "interactions" };
 var TRIGGER_OPTIONS = {
-  load: __15("Page load", "elementor"),
-  scrollIn: __15("Scroll into view", "elementor"),
-  scrollOn: __15("While scrolling", "elementor"),
-  hover: __15("On hover", "elementor"),
-  click: __15("On click", "elementor")
+  load: __16("Page load", "elementor"),
+  scrollIn: __16("Scroll into view", "elementor"),
+  scrollOn: __16("While scrolling", "elementor"),
+  hover: __16("On hover", "elementor"),
+  click: __16("On click", "elementor")
 };
 var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
@@ -1831,8 +1862,8 @@ function Trigger({ value, onChange }) {
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: __15("PRO triggers", "elementor"),
-      promotionContent: __15("Upgrade to unlock more interactions triggers.", "elementor"),
+      promotionLabel: __16("PRO triggers", "elementor"),
+      promotionContent: __16("Upgrade to unlock more interactions triggers.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/",
       trackingData: TRACKING_DATA5
     }