@elementor/editor-interactions 4.0.0-573 → 4.0.0-591

package/dist/index.js

@@ -30,9 +30,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BASE_EASINGS: () => BASE_EASINGS,
+  BASE_REPLAY: () => BASE_REPLAY,
+  BASE_TRIGGERS: () => BASE_TRIGGERS,
+  EASING_OPTIONS: () => EASING_OPTIONS,
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX: () => ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState: () => EmptyState,
   InteractionsTab: () => InteractionsTab,
+  REPLAY_OPTIONS: () => REPLAY_OPTIONS,
+  TRIGGER_OPTIONS: () => TRIGGER_OPTIONS,
   createInteractionsProvider: () => createInteractionsProvider,
   getInteractionsConfig: () => getInteractionsConfig,
   init: () => init,
@@ -68,8 +74,8 @@ var EmptyState = ({ onCreateInteraction }) => {
 };
 
 // src/components/interactions-tab.tsx
-var React13 = __toESM(require("react"));
-var import_react10 = require("react");
+var React11 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_session = require("@elementor/session");
 var import_ui7 = require("@elementor/ui");
@@ -130,12 +136,12 @@ var PopupStateProvider = ({ children }) => {
 };
 
 // src/components/interactions-list.tsx
-var React12 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_controls7 = require("@elementor/editor-controls");
-var import_icons3 = require("@elementor/icons");
+var React10 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_icons2 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/contexts/interactions-item-context.tsx
 var React4 = __toESM(require("react"));
@@ -281,11 +287,13 @@ var createAnimationPreset = ({
   easing = "easeIn",
   relativeTo,
   offsetTop,
-  offsetBottom
+  offsetBottom,
+  customEffects
 }) => ({
   $$type: "animation-preset-props",
   value: {
     effect: createString(effect),
+    custom_effect: customEffects,
     type: createString(type),
     direction: createString(direction ?? ""),
     timing_config: createTimingConfig(duration, delay),
@@ -311,7 +319,8 @@ var createInteractionItem = ({
   relativeTo,
   offsetTop,
   offsetBottom,
-  excludedBreakpoints
+  excludedBreakpoints,
+  customEffects
 }) => ({
   $$type: "interaction-item",
   value: {
@@ -327,7 +336,8 @@ var createInteractionItem = ({
       easing,
       relativeTo,
       offsetTop,
-      offsetBottom
+      offsetBottom,
+      customEffects
     }),
     ...excludedBreakpoints && excludedBreakpoints.length > 0 && {
       breakpoints: createInteractionBreakpoints(excludedBreakpoints)
@@ -375,17 +385,17 @@ var buildDisplayLabel = (item) => {
 };
 
 // src/components/interactions-list-item.tsx
-var React11 = __toESM(require("react"));
-var import_react8 = require("react");
+var React9 = __toESM(require("react"));
+var import_react7 = require("react");
 var import_ui5 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/components/interaction-details.tsx
-var React9 = __toESM(require("react"));
-var import_react6 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
+var React7 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_editor_controls3 = require("@elementor/editor-controls");
 var import_ui3 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/interactions-controls-registry.ts
 var controlsRegistry = /* @__PURE__ */ new Map();
@@ -414,71 +424,10 @@ var resolveDirection = (hasDirection, newEffect, newDirection, currentDirection,
   return currentDirection;
 };
 
-// src/components/controls/direction.tsx
+// src/components/controls/time-frame-indicator.tsx
 var React5 = __toESM(require("react"));
 var import_react4 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
-var import_icons2 = require("@elementor/icons");
-var import_i18n2 = require("@wordpress/i18n");
-function Direction({ value, onChange, interactionType }) {
-  const options = (0, import_react4.useMemo)(() => {
-    const isIn = interactionType === "in";
-    return [
-      {
-        value: "top",
-        label: isIn ? (0, import_i18n2.__)("From top", "elementor") : (0, import_i18n2.__)("To top", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(import_icons2.ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(import_icons2.ArrowUpSmallIcon, { fontSize: size }),
-        showTooltip: true
-      },
-      {
-        value: "bottom",
-        label: interactionType === "in" ? (0, import_i18n2.__)("From bottom", "elementor") : (0, import_i18n2.__)("To bottom", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(import_icons2.ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(import_icons2.ArrowDownSmallIcon, { fontSize: size }),
-        showTooltip: true
-      },
-      {
-        value: "left",
-        label: interactionType === "in" ? (0, import_i18n2.__)("From left", "elementor") : (0, import_i18n2.__)("To left", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(import_icons2.ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(import_icons2.ArrowLeftIcon, { fontSize: size }),
-        showTooltip: true
-      },
-      {
-        value: "right",
-        label: interactionType === "in" ? (0, import_i18n2.__)("From right", "elementor") : (0, import_i18n2.__)("To right", "elementor"),
-        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React5.createElement(import_icons2.ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React5.createElement(import_icons2.ArrowRightIcon, { fontSize: size }),
-        showTooltip: true
-      }
-    ];
-  }, [interactionType]);
-  return /* @__PURE__ */ React5.createElement(import_editor_controls.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
-}
-
-// src/components/controls/effect-type.tsx
-var React6 = __toESM(require("react"));
-var import_editor_controls2 = require("@elementor/editor-controls");
-var import_i18n3 = require("@wordpress/i18n");
-function EffectType({ value, onChange }) {
-  const options = [
-    {
-      value: "in",
-      label: (0, import_i18n3.__)("In", "elementor"),
-      renderContent: () => (0, import_i18n3.__)("In", "elementor"),
-      showTooltip: true
-    },
-    {
-      value: "out",
-      label: (0, import_i18n3.__)("Out", "elementor"),
-      renderContent: () => (0, import_i18n3.__)("Out", "elementor"),
-      showTooltip: true
-    }
-  ];
-  return /* @__PURE__ */ React6.createElement(import_editor_controls2.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
-}
-
-// src/components/controls/time-frame-indicator.tsx
-var React7 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
 
 // src/utils/time-conversion.ts
 var UNIT_TO_MS = {
@@ -496,8 +445,8 @@ function TimeFrameIndicator({
   defaultValue
 }) {
   const sizeValue = parseSizeValue(value, TIME_UNITS, defaultValue, DEFAULT_TIME_UNIT);
-  const prevUnitRef = (0, import_react5.useRef)(sizeValue.unit);
-  const setValue = (0, import_react5.useCallback)(
+  const prevUnitRef = (0, import_react4.useRef)(sizeValue.unit);
+  const setValue = (0, import_react4.useCallback)(
     (size) => {
       const unitChanged = prevUnitRef.current !== size.unit;
       if (unitChanged) {
@@ -518,8 +467,8 @@ function TimeFrameIndicator({
       setValue(parseSizeValue(defaultValue, TIME_UNITS, void 0, DEFAULT_TIME_UNIT));
     }
   };
-  return /* @__PURE__ */ React7.createElement(
-    import_editor_controls3.UnstableSizeField,
+  return /* @__PURE__ */ React5.createElement(
+    import_editor_controls.UnstableSizeField,
     {
       units: TIME_UNITS,
       value: sizeValue,
@@ -535,11 +484,11 @@ function TimeFrameIndicator({
 }
 
 // src/components/field.tsx
-var React8 = __toESM(require("react"));
-var import_editor_controls4 = require("@elementor/editor-controls");
+var React6 = __toESM(require("react"));
+var import_editor_controls2 = require("@elementor/editor-controls");
 var import_ui2 = require("@elementor/ui");
 var Field = ({ label, children }) => {
-  return /* @__PURE__ */ React8.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_editor_controls4.PopoverGridContainer, null, /* @__PURE__ */ React8.createElement(import_ui2.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(import_editor_controls4.ControlFormLabel, null, label)), /* @__PURE__ */ React8.createElement(import_ui2.Grid, { item: true, xs: 6 }, children)));
+  return /* @__PURE__ */ React6.createElement(import_ui2.Grid, { item: true, xs: 12, "aria-label": `${label} control` }, /* @__PURE__ */ React6.createElement(import_editor_controls2.PopoverGridContainer, null, /* @__PURE__ */ React6.createElement(import_ui2.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React6.createElement(import_editor_controls2.ControlFormLabel, null, label)), /* @__PURE__ */ React6.createElement(import_ui2.Grid, { item: true, xs: 6 }, children)));
 };
 
 // src/components/interaction-details.tsx
@@ -559,6 +508,9 @@ var DEFAULT_VALUES = {
 var TRIGGERS_WITHOUT_REPLAY = ["load", "scrollOn", "hover", "click"];
 var controlVisibilityConfig = {
   replay: (values) => !TRIGGERS_WITHOUT_REPLAY.includes(values.trigger),
+  custom: (values) => values.effect === "custom",
+  effectType: (values) => values.effect !== "custom",
+  direction: (values) => values.effect !== "custom",
   relativeTo: (values) => values.trigger === "scrollOn",
   offsetTop: (values) => values.trigger === "scrollOn",
   offsetBottom: (values) => values.trigger === "scrollOn",
@@ -572,7 +524,7 @@ var controlVisibilityConfig = {
   }
 };
 function useControlComponent(controlName, isVisible = true) {
-  return (0, import_react6.useMemo)(() => {
+  return (0, import_react5.useMemo)(() => {
     if (!isVisible) {
       return null;
     }
@@ -582,6 +534,7 @@ function useControlComponent(controlName, isVisible = true) {
 var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   const trigger = extractString(interaction.trigger, DEFAULT_VALUES.trigger);
   const effect = extractString(interaction.animation.value.effect, DEFAULT_VALUES.effect);
+  const customEffects = interaction.animation.value.custom_effect;
   const type = extractString(interaction.animation.value.type, DEFAULT_VALUES.type);
   const direction = extractString(interaction.animation.value.direction, DEFAULT_VALUES.direction);
   const duration = extractSize(interaction.animation.value.timing_config.value.duration);
@@ -605,7 +558,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     replay,
     relativeTo,
     offsetTop,
-    offsetBottom
+    offsetBottom,
+    customEffects
   };
   const TriggerControl = useControlComponent("trigger", true);
   const EffectControl = useControlComponent("effect");
@@ -619,8 +573,17 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     "offsetBottom",
     controlVisibilityConfig.offsetBottom(interactionValues)
   );
+  const CustomEffectControl = useControlComponent(
+    "customEffects",
+    controlVisibilityConfig.custom(interactionValues)
+  );
+  const EffectTypeControl = useControlComponent(
+    "effectType",
+    controlVisibilityConfig.effectType(interactionValues)
+  );
+  const DirectionControl = useControlComponent("direction", controlVisibilityConfig.direction(interactionValues));
   const EasingControl = useControlComponent("easing");
-  const containerRef = (0, import_react6.useRef)(null);
+  const containerRef = (0, import_react5.useRef)(null);
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection(
       "direction" in updates,
@@ -643,7 +606,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         easing: updates.easing ?? easing,
         relativeTo: updates.relativeTo ?? relativeTo,
         offsetTop: updates.offsetTop ?? offsetTop,
-        offsetBottom: updates.offsetBottom ?? offsetBottom
+        offsetBottom: updates.offsetBottom ?? offsetBottom,
+        customEffects: updates.customEffects ?? customEffects
       })
     };
     onChange(updatedInteraction);
@@ -652,13 +616,13 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React9.createElement(import_ui3.Box, { ref: containerRef }, /* @__PURE__ */ React9.createElement(import_editor_controls5.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Trigger", "elementor") }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React7.createElement(import_ui3.Box, { ref: containerRef }, /* @__PURE__ */ React7.createElement(import_editor_controls3.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(
     TriggerControl,
     {
       value: trigger,
       onChange: (v) => updateInteraction({ trigger: v })
     }
-  )), ReplayControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Replay", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
     ReplayControl,
     {
       value: replay,
@@ -666,46 +630,52 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       disabled: true,
       anchorRef: containerRef
     }
-  ))), /* @__PURE__ */ React9.createElement(import_ui3.Divider, null), /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Effect", "elementor") }, /* @__PURE__ */ React9.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Type", "elementor") }, /* @__PURE__ */ React9.createElement(EffectType, { value: type, onChange: (v) => updateInteraction({ type: v }) })), /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Direction", "elementor") }, /* @__PURE__ */ React9.createElement(
-    Direction,
+  ))), /* @__PURE__ */ React7.createElement(import_ui3.Divider, null), /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Effect", "elementor") }, /* @__PURE__ */ React7.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), CustomEffectControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Custom Effect", "elementor") }, /* @__PURE__ */ React7.createElement(
+    CustomEffectControl,
+    {
+      value: customEffects,
+      onChange: (v) => updateInteraction({ customEffects: v })
+    }
+  )), EffectTypeControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Type", "elementor") }, /* @__PURE__ */ React7.createElement(EffectTypeControl, { value: type, onChange: (v) => updateInteraction({ type: v }) })), DirectionControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Direction", "elementor") }, /* @__PURE__ */ React7.createElement(
+    DirectionControl,
     {
       value: direction,
       onChange: (v) => updateInteraction({ direction: v }),
       interactionType: type
     }
-  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Duration", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Duration", "elementor") }, /* @__PURE__ */ React7.createElement(
     TimeFrameIndicator,
     {
       value: String(duration),
       onChange: (v) => updateInteraction({ duration: v }),
       defaultValue: DEFAULT_VALUES.duration
     }
-  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Delay", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), controlVisibilityConfig.delay(interactionValues) && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Delay", "elementor") }, /* @__PURE__ */ React7.createElement(
     TimeFrameIndicator,
     {
       value: String(delay),
       onChange: (v) => updateInteraction({ delay: v }),
       defaultValue: DEFAULT_VALUES.delay
     }
-  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui3.Divider, null), /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Relative To", "elementor") }, /* @__PURE__ */ React9.createElement(
+  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui3.Divider, null), /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Relative To", "elementor") }, /* @__PURE__ */ React7.createElement(
     RelativeToControl,
     {
       value: relativeTo,
       onChange: (v) => updateInteraction({ relativeTo: v })
     }
-  )), OffsetTopControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Offset Top", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), OffsetTopControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Offset Top", "elementor") }, /* @__PURE__ */ React7.createElement(
     OffsetTopControl,
     {
       value: String(parseSizeValue(offsetTop, ["%"]).size),
       onChange: (v) => updateInteraction({ offsetTop: v })
     }
-  )), OffsetBottomControl && /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Offset Bottom", "elementor") }, /* @__PURE__ */ React9.createElement(
+  )), OffsetBottomControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Offset Bottom", "elementor") }, /* @__PURE__ */ React7.createElement(
     OffsetBottomControl,
     {
       value: String(parseSizeValue(offsetBottom, ["%"]).size),
       onChange: (v) => updateInteraction({ offsetBottom: v })
     }
-  ))), /* @__PURE__ */ React9.createElement(import_ui3.Divider, null)), EasingControl && /* @__PURE__ */ React9.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React9.createElement(Field, { label: (0, import_i18n4.__)("Easing", "elementor") }, /* @__PURE__ */ React9.createElement(
+  ))), /* @__PURE__ */ React7.createElement(import_ui3.Divider, null)), EasingControl && /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Easing", "elementor") }, /* @__PURE__ */ React7.createElement(
     EasingControl,
     {
       value: easing,
@@ -717,20 +687,20 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
 };
 
 // src/components/interaction-settings.tsx
-var React10 = __toESM(require("react"));
-var import_react7 = require("react");
-var import_editor_controls6 = require("@elementor/editor-controls");
+var React8 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_responsive = require("@elementor/editor-responsive");
 var import_ui4 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 var SIZE = "tiny";
 var InteractionSettings = ({ interaction, onChange }) => {
   const breakpoints = (0, import_editor_responsive.useBreakpoints)();
-  const availableBreakpoints = (0, import_react7.useMemo)(
+  const availableBreakpoints = (0, import_react6.useMemo)(
     () => breakpoints.map((breakpoint) => ({ label: breakpoint.label, value: String(breakpoint.id) })),
     [breakpoints]
   );
-  const [selectedBreakpoints, setSelectedBreakpoints] = (0, import_react7.useState)(() => {
+  const [selectedBreakpoints, setSelectedBreakpoints] = (0, import_react6.useState)(() => {
     const excluded = extractExcludedBreakpoints(interaction.breakpoints).filter((excludedBreakpoint) => {
       return availableBreakpoints.some(({ value }) => value === excludedBreakpoint);
     });
@@ -738,7 +708,7 @@ var InteractionSettings = ({ interaction, onChange }) => {
       return !excluded.includes(value);
     });
   });
-  const handleBreakpointChange = (0, import_react7.useCallback)(
+  const handleBreakpointChange = (0, import_react6.useCallback)(
     (_, newValue) => {
       setSelectedBreakpoints(newValue);
       const selectedValues = newValue.map((option) => option.value);
@@ -756,7 +726,7 @@ var InteractionSettings = ({ interaction, onChange }) => {
     },
     [interaction, availableBreakpoints, onChange]
   );
-  return /* @__PURE__ */ React10.createElement(import_editor_controls6.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui4.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui4.Stack, { direction: "column", gap: 1 }, /* @__PURE__ */ React10.createElement(import_editor_controls6.ControlFormLabel, { sx: { width: "100%" } }, (0, import_i18n5.__)("Trigger on", "elementor")), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React8.createElement(import_editor_controls4.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React8.createElement(import_ui4.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React8.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React8.createElement(import_ui4.Stack, { direction: "column", gap: 1 }, /* @__PURE__ */ React8.createElement(import_editor_controls4.ControlFormLabel, { sx: { width: "100%" } }, (0, import_i18n3.__)("Trigger on", "elementor")), /* @__PURE__ */ React8.createElement(
     import_ui4.Autocomplete,
     {
       fullWidth: true,
@@ -766,10 +736,10 @@ var InteractionSettings = ({ interaction, onChange }) => {
       size: SIZE,
       options: availableBreakpoints,
       isOptionEqualToValue: (option, value) => option.value === value.value,
-      renderInput: (params) => /* @__PURE__ */ React10.createElement(import_ui4.TextField, { ...params }),
+      renderInput: (params) => /* @__PURE__ */ React8.createElement(import_ui4.TextField, { ...params }),
       renderTags: (values, getTagProps) => values.map((option, index) => {
         const { key, ...chipProps } = getTagProps({ index });
-        return /* @__PURE__ */ React10.createElement(import_ui4.Chip, { key, size: SIZE, label: option.label, ...chipProps });
+        return /* @__PURE__ */ React8.createElement(import_ui4.Chip, { key, size: SIZE, label: option.label, ...chipProps });
       })
     }
   )))));
@@ -782,30 +752,30 @@ var InteractionsListItem = ({
 }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui5.useTabs)("details");
   const context = useInteractionItemContext();
-  const handleChange = (0, import_react8.useCallback)(
+  const handleChange = (0, import_react7.useCallback)(
     (newInteractionValue) => {
       context?.onInteractionChange(index, newInteractionValue);
     },
     [context, index]
   );
-  const handlePlayInteraction = (0, import_react8.useCallback)(
+  const handlePlayInteraction = (0, import_react7.useCallback)(
     (interactionId2) => {
       context?.onPlayInteraction(interactionId2);
     },
     [context]
   );
   const interactionId = extractString(interaction.value.interaction_id);
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
     import_ui5.Tabs,
     {
       size: "small",
       variant: "fullWidth",
-      "aria-label": (0, import_i18n6.__)("Interaction", "elementor"),
+      "aria-label": (0, import_i18n4.__)("Interaction", "elementor"),
       ...getTabsProps()
     },
-    /* @__PURE__ */ React11.createElement(import_ui5.Tab, { label: (0, import_i18n6.__)("Details", "elementor"), ...getTabProps("details") }),
-    /* @__PURE__ */ React11.createElement(import_ui5.Tab, { label: (0, import_i18n6.__)("Settings", "elementor"), ...getTabProps("settings") })
-  ), /* @__PURE__ */ React11.createElement(import_ui5.Divider, null), /* @__PURE__ */ React11.createElement(import_ui5.TabPanel, { sx: { p: 0 }, ...getTabPanelProps("details") }, /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React9.createElement(import_ui5.Tab, { label: (0, import_i18n4.__)("Details", "elementor"), ...getTabProps("details") }),
+    /* @__PURE__ */ React9.createElement(import_ui5.Tab, { label: (0, import_i18n4.__)("Settings", "elementor"), ...getTabProps("settings") })
+  ), /* @__PURE__ */ React9.createElement(import_ui5.Divider, null), /* @__PURE__ */ React9.createElement(import_ui5.TabPanel, { sx: { p: 0 }, ...getTabPanelProps("details") }, /* @__PURE__ */ React9.createElement(
     InteractionDetails,
     {
       key: interactionId,
@@ -813,7 +783,7 @@ var InteractionsListItem = ({
       onChange: handleChange,
       onPlayInteraction: handlePlayInteraction
     }
-  )), /* @__PURE__ */ React11.createElement(import_ui5.TabPanel, { sx: { p: 0 }, ...getTabPanelProps("settings") }, /* @__PURE__ */ React11.createElement(
+  )), /* @__PURE__ */ React9.createElement(import_ui5.TabPanel, { sx: { p: 0 }, ...getTabPanelProps("settings") }, /* @__PURE__ */ React9.createElement(
     InteractionSettings,
     {
       key: interactionId,
@@ -827,14 +797,14 @@ var InteractionsListItem = ({
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
-  const hasInitializedRef = (0, import_react9.useRef)(false);
-  const handleUpdateInteractions = (0, import_react9.useCallback)(
+  const hasInitializedRef = (0, import_react8.useRef)(false);
+  const handleUpdateInteractions = (0, import_react8.useCallback)(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
     },
     [onSelectInteractions]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (triggerCreateOnShowEmpty && !hasInitializedRef.current && (!interactions.items || interactions.items?.length === 0)) {
       hasInitializedRef.current = true;
       const newState = {
@@ -844,14 +814,14 @@ function InteractionsList(props) {
       handleUpdateInteractions(newState);
     }
   }, [triggerCreateOnShowEmpty, interactions.items, handleUpdateInteractions]);
-  const isMaxNumberOfInteractionsReached = (0, import_react9.useMemo)(() => {
+  const isMaxNumberOfInteractionsReached = (0, import_react8.useMemo)(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React12.createElement(import_ui6.Alert, { color: "secondary", icon: /* @__PURE__ */ React12.createElement(import_icons3.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React12.createElement(import_ui6.AlertTitle, null, (0, import_i18n7.__)("Interactions", "elementor")), /* @__PURE__ */ React12.createElement(import_ui6.Box, { component: "span" }, (0, import_i18n7.__)(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(import_ui6.Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(import_icons2.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(import_ui6.AlertTitle, null, (0, import_i18n5.__)("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(import_ui6.Box, { component: "span" }, (0, import_i18n5.__)(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
-  const handleRepeaterChange = (0, import_react9.useCallback)(
+  const handleRepeaterChange = (0, import_react8.useCallback)(
     (newItems) => {
       handleUpdateInteractions({
         ...interactions,
@@ -860,7 +830,7 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const handleInteractionChange = (0, import_react9.useCallback)(
+  const handleInteractionChange = (0, import_react8.useCallback)(
     (index, newInteractionValue) => {
       const newItems = structuredClone(interactions.items);
       newItems[index] = {
@@ -874,19 +844,19 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const contextValue = (0, import_react9.useMemo)(
+  const contextValue = (0, import_react8.useMemo)(
     () => ({
       onInteractionChange: handleInteractionChange,
       onPlayInteraction
     }),
     [handleInteractionChange, onPlayInteraction]
   );
-  return /* @__PURE__ */ React12.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ React12.createElement(
-    import_editor_controls7.Repeater,
+  return /* @__PURE__ */ React10.createElement(InteractionItemContextProvider, { value: contextValue }, /* @__PURE__ */ React10.createElement(
+    import_editor_controls5.Repeater,
     {
       openOnAdd: true,
       openItem: triggerCreateOnShowEmpty ? 0 : void 0,
-      label: (0, import_i18n7.__)("Interactions", "elementor"),
+      label: (0, import_i18n5.__)("Interactions", "elementor"),
       values: interactions.items,
       setValues: handleRepeaterChange,
       showDuplicate: false,
@@ -899,14 +869,14 @@ function InteractionsList(props) {
         Label: ({ value }) => buildDisplayLabel(value.value),
         Icon: () => null,
         Content: InteractionsListItem,
-        actions: (value) => /* @__PURE__ */ React12.createElement(import_ui6.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n7.__)("Preview", "elementor") }, /* @__PURE__ */ React12.createElement(
+        actions: (value) => /* @__PURE__ */ React10.createElement(import_ui6.Tooltip, { key: "preview", placement: "top", title: (0, import_i18n5.__)("Preview", "elementor") }, /* @__PURE__ */ React10.createElement(
           import_ui6.IconButton,
           {
-            "aria-label": (0, import_i18n7.__)("Play interaction", "elementor"),
+            "aria-label": (0, import_i18n5.__)("Play interaction", "elementor"),
             size: "tiny",
             onClick: () => onPlayInteraction(extractString(value.value.interaction_id))
           },
-          /* @__PURE__ */ React12.createElement(import_icons3.PlayerPlayIcon, { fontSize: "tiny" })
+          /* @__PURE__ */ React10.createElement(import_icons2.PlayerPlayIcon, { fontSize: "tiny" })
         ))
       }
     }
@@ -915,13 +885,13 @@ function InteractionsList(props) {
 
 // src/components/interactions-tab.tsx
 var InteractionsTab = ({ elementId }) => {
-  return /* @__PURE__ */ React13.createElement(PopupStateProvider, null, /* @__PURE__ */ React13.createElement(InteractionsTabContent, { elementId }));
+  return /* @__PURE__ */ React11.createElement(PopupStateProvider, null, /* @__PURE__ */ React11.createElement(InteractionsTabContent, { elementId }));
 };
 function InteractionsTabContent({ elementId }) {
   const existingInteractions = (0, import_editor_elements2.useElementInteractions)(elementId);
-  const firstInteractionState = (0, import_react10.useState)(false);
+  const firstInteractionState = (0, import_react9.useState)(false);
   const hasInteractions = existingInteractions?.items?.length || firstInteractionState[0];
-  return /* @__PURE__ */ React13.createElement(import_session.SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React13.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React13.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React11.createElement(import_session.SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React11.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React11.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React11.createElement(
     EmptyState,
     {
       onCreateInteraction: () => {
@@ -934,7 +904,7 @@ function InteractionsContent({
   firstInteractionState
 }) {
   const { interactions, setInteractions, playInteractions } = useInteractionsContext();
-  const applyInteraction = (0, import_react10.useCallback)(
+  const applyInteraction = (0, import_react9.useCallback)(
     (newInteractions) => {
       firstInteractionState[1](false);
       if (!newInteractions) {
@@ -945,7 +915,7 @@ function InteractionsContent({
     },
     [setInteractions, firstInteractionState]
   );
-  return /* @__PURE__ */ React13.createElement(import_ui7.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React11.createElement(import_ui7.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React11.createElement(
     InteractionsList,
     {
       triggerCreateOnShowEmpty: firstInteractionState[0],
@@ -1116,11 +1086,155 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   }
 });
 
+// src/components/controls/direction.tsx
+var React12 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_editor_controls6 = require("@elementor/editor-controls");
+var import_icons3 = require("@elementor/icons");
+var import_i18n6 = require("@wordpress/i18n");
+function Direction({ value, onChange, interactionType }) {
+  const options = (0, import_react10.useMemo)(() => {
+    const isIn = interactionType === "in";
+    return [
+      {
+        value: "top",
+        label: isIn ? (0, import_i18n6.__)("From top", "elementor") : (0, import_i18n6.__)("To top", "elementor"),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: size }),
+        showTooltip: true
+      },
+      {
+        value: "bottom",
+        label: interactionType === "in" ? (0, import_i18n6.__)("From bottom", "elementor") : (0, import_i18n6.__)("To bottom", "elementor"),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: size }),
+        showTooltip: true
+      },
+      {
+        value: "left",
+        label: interactionType === "in" ? (0, import_i18n6.__)("From left", "elementor") : (0, import_i18n6.__)("To left", "elementor"),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowLeftIcon, { fontSize: size }),
+        showTooltip: true
+      },
+      {
+        value: "right",
+        label: interactionType === "in" ? (0, import_i18n6.__)("From right", "elementor") : (0, import_i18n6.__)("To right", "elementor"),
+        renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowRightIcon, { fontSize: size }),
+        showTooltip: true
+      }
+    ];
+  }, [interactionType]);
+  return /* @__PURE__ */ React12.createElement(import_editor_controls6.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
+}
+
 // src/components/controls/easing.tsx
+var React15 = __toESM(require("react"));
+var import_i18n8 = require("@wordpress/i18n");
+
+// src/ui/promotion-select.tsx
 var React14 = __toESM(require("react"));
+var import_react12 = require("react");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_ui9 = require("@elementor/ui");
+
+// src/ui/interactions-promotion-chip.tsx
+var React13 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui8 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
+var InteractionsPromotionChip = (0, import_react11.forwardRef)(
+  ({ content, upgradeUrl, anchorRef }, ref) => {
+    const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+    (0, import_editor_ui.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
+    const toggle = () => setIsOpen((prev) => !prev);
+    (0, import_react11.useImperativeHandle)(ref, () => ({ toggle }), []);
+    const handleToggle = (e) => {
+      e.stopPropagation();
+      toggle();
+    };
+    return /* @__PURE__ */ React13.createElement(
+      import_editor_ui.PromotionPopover,
+      {
+        open: isOpen,
+        title: (0, import_i18n7.__)("Interactions", "elementor"),
+        content,
+        ctaText: (0, import_i18n7.__)("Upgrade now", "elementor"),
+        ctaUrl: upgradeUrl,
+        anchorRef,
+        placement: anchorRef ? "right-start" : void 0,
+        onClose: (e) => {
+          e.stopPropagation();
+          setIsOpen(false);
+        }
+      },
+      /* @__PURE__ */ React13.createElement(
+        import_ui8.Box,
+        {
+          onMouseDown: (e) => e.stopPropagation(),
+          onClick: handleToggle,
+          sx: { cursor: "pointer", display: "inline-flex", mr: 1 }
+        },
+        /* @__PURE__ */ React13.createElement(import_editor_ui.PromotionChip, null)
+      )
+    );
+  }
+);
+InteractionsPromotionChip.displayName = "InteractionsPromotionChip";
+
+// src/ui/promotion-select.tsx
+function PromotionSelect({
+  value,
+  onChange,
+  baseOptions,
+  disabledOptions,
+  promotionLabel,
+  promotionContent,
+  upgradeUrl
+}) {
+  const promotionRef = (0, import_react12.useRef)(null);
+  const anchorRef = (0, import_react12.useRef)(null);
+  return /* @__PURE__ */ React14.createElement(
+    import_ui9.Select,
+    {
+      value,
+      onChange: (e) => onChange?.(e.target.value),
+      fullWidth: true,
+      displayEmpty: true,
+      size: "tiny",
+      MenuProps: { disablePortal: true }
+    },
+    Object.entries(baseOptions).map(([key, label]) => /* @__PURE__ */ React14.createElement(import_editor_ui2.MenuListItem, { key, value: key }, label)),
+    /* @__PURE__ */ React14.createElement(
+      import_ui9.MenuSubheader,
+      {
+        ref: anchorRef,
+        sx: {
+          cursor: "pointer",
+          color: "text.tertiary",
+          fontWeight: "400",
+          display: "flex",
+          alignItems: "center"
+        },
+        onMouseDown: (e) => {
+          e.stopPropagation();
+          promotionRef.current?.toggle();
+        }
+      },
+      promotionLabel,
+      /* @__PURE__ */ React14.createElement(
+        InteractionsPromotionChip,
+        {
+          content: promotionContent,
+          upgradeUrl,
+          ref: promotionRef,
+          anchorRef
+        }
+      )
+    ),
+    Object.entries(disabledOptions).map(([key, label]) => /* @__PURE__ */ React14.createElement(import_editor_ui2.MenuListItem, { key, value: key, disabled: true, sx: { pl: 3 } }, label))
+  );
+}
+
+// src/components/controls/easing.tsx
 var EASING_OPTIONS = {
   easeIn: (0, import_i18n8.__)("Ease In", "elementor"),
   easeInOut: (0, import_i18n8.__)("Ease In Out", "elementor"),
@@ -1130,82 +1244,88 @@ var EASING_OPTIONS = {
   backOut: (0, import_i18n8.__)("Back Out", "elementor"),
   linear: (0, import_i18n8.__)("Linear", "elementor")
 };
-var DEFAULT_EASING = "easeIn";
+var BASE_EASINGS = ["easeIn"];
 function Easing({}) {
-  const availableOptions = Object.entries(EASING_OPTIONS).map(([key, label]) => ({
-    key,
-    label
-  }));
-  return /* @__PURE__ */ React14.createElement(import_ui8.Select, { value: DEFAULT_EASING, onChange: () => {
-  }, fullWidth: true, displayEmpty: true, size: "tiny" }, availableOptions.map((option) => {
-    const isDisabled = DEFAULT_EASING !== option.key;
-    return /* @__PURE__ */ React14.createElement(import_editor_ui.MenuListItem, { key: option.key, value: option.key, disabled: isDisabled }, option.label);
-  }));
+  const baseOptions = Object.fromEntries(
+    Object.entries(EASING_OPTIONS).filter(([key]) => BASE_EASINGS.includes(key))
+  );
+  const disabledOptions = Object.fromEntries(
+    Object.entries(EASING_OPTIONS).filter(([key]) => !BASE_EASINGS.includes(key))
+  );
+  return /* @__PURE__ */ React15.createElement(
+    PromotionSelect,
+    {
+      value: DEFAULT_VALUES.easing,
+      baseOptions,
+      disabledOptions,
+      promotionLabel: (0, import_i18n8.__)("PRO features", "elementor"),
+      promotionContent: (0, import_i18n8.__)("Upgrade to control the smoothness of the interaction.", "elementor"),
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/"
+    }
+  );
 }
 
 // src/components/controls/effect.tsx
-var React15 = __toESM(require("react"));
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_ui9 = require("@elementor/ui");
+var React16 = __toESM(require("react"));
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_ui10 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 function Effect({ value, onChange }) {
   const availableEffects = [
     { key: "fade", label: (0, import_i18n9.__)("Fade", "elementor") },
     { key: "slide", label: (0, import_i18n9.__)("Slide", "elementor") },
-    { key: "scale", label: (0, import_i18n9.__)("Scale", "elementor") }
+    { key: "scale", label: (0, import_i18n9.__)("Scale", "elementor") },
+    { key: "custom", label: (0, import_i18n9.__)("Custom", "elementor"), disabled: true }
   ];
-  return /* @__PURE__ */ React15.createElement(
-    import_ui9.Select,
+  return /* @__PURE__ */ React16.createElement(
+    import_ui10.Select,
     {
       fullWidth: true,
       displayEmpty: true,
       size: "tiny",
       value,
-      onChange: (event) => onChange(event.target.value)
+      onChange: (event) => onChange(event.target.value),
+      MenuProps: { disablePortal: true }
     },
     availableEffects.map((effect) => {
-      return /* @__PURE__ */ React15.createElement(import_editor_ui2.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
+      return /* @__PURE__ */ React16.createElement(import_editor_ui3.MenuListItem, { key: effect.key, value: effect.key, disabled: effect.disabled }, effect.label);
     })
   );
 }
 
-// src/components/controls/replay.tsx
+// src/components/controls/effect-type.tsx
 var React17 = __toESM(require("react"));
-var import_editor_controls8 = require("@elementor/editor-controls");
-var import_icons4 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
-
-// src/ui/interactions-promotion-chip.tsx
-var React16 = __toESM(require("react"));
-var import_react11 = require("react");
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_ui10 = require("@elementor/ui");
+var import_editor_controls7 = require("@elementor/editor-controls");
 var import_i18n10 = require("@wordpress/i18n");
-function InteractionsPromotionChip({ content, upgradeUrl, anchorRef }) {
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
-  (0, import_editor_ui3.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
-  const handleToggle = (e) => {
-    e.stopPropagation();
-    setIsOpen((prev) => !prev);
-  };
-  return /* @__PURE__ */ React16.createElement(
-    import_editor_ui3.PromotionPopover,
+function EffectType({ value, onChange }) {
+  const options = [
     {
-      open: isOpen,
-      title: (0, import_i18n10.__)("Interactions", "elementor"),
-      content,
-      ctaText: (0, import_i18n10.__)("Upgrade now", "elementor"),
-      ctaUrl: upgradeUrl,
-      anchorRef,
-      placement: anchorRef ? "right-start" : void 0,
-      onClose: handleToggle
+      value: "in",
+      label: (0, import_i18n10.__)("In", "elementor"),
+      renderContent: () => (0, import_i18n10.__)("In", "elementor"),
+      showTooltip: true
     },
-    /* @__PURE__ */ React16.createElement(import_ui10.Box, { onClick: handleToggle, sx: { cursor: "pointer", display: "inline-flex", mr: 1 } }, /* @__PURE__ */ React16.createElement(import_editor_ui3.PromotionChip, null))
-  );
+    {
+      value: "out",
+      label: (0, import_i18n10.__)("Out", "elementor"),
+      renderContent: () => (0, import_i18n10.__)("Out", "elementor"),
+      showTooltip: true
+    }
+  ];
+  return /* @__PURE__ */ React17.createElement(import_editor_controls7.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
 // src/components/controls/replay.tsx
+var React18 = __toESM(require("react"));
+var import_editor_controls8 = require("@elementor/editor-controls");
+var import_icons4 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
+var REPLAY_OPTIONS = {
+  no: (0, import_i18n11.__)("No", "elementor"),
+  yes: (0, import_i18n11.__)("Yes", "elementor")
+};
+var BASE_REPLAY = ["no"];
 var OVERLAY_GRID = "1 / 1";
 var CHIP_OFFSET = "50%";
 function Replay({ onChange, anchorRef }) {
@@ -1213,19 +1333,19 @@ function Replay({ onChange, anchorRef }) {
     {
       value: false,
       disabled: false,
-      label: (0, import_i18n11.__)("No", "elementor"),
-      renderContent: ({ size }) => /* @__PURE__ */ React17.createElement(import_icons4.MinusIcon, { fontSize: size }),
+      label: REPLAY_OPTIONS.no,
+      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(import_icons4.MinusIcon, { fontSize: size }),
       showTooltip: true
     },
     {
       value: true,
       disabled: true,
-      label: (0, import_i18n11.__)("Yes", "elementor"),
-      renderContent: ({ size }) => /* @__PURE__ */ React17.createElement(import_icons4.CheckIcon, { fontSize: size }),
+      label: REPLAY_OPTIONS.yes,
+      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(import_icons4.CheckIcon, { fontSize: size }),
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React17.createElement(import_ui11.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React17.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React17.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React17.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(import_ui11.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
     InteractionsPromotionChip,
     {
       content: (0, import_i18n11.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
@@ -1236,31 +1356,34 @@ function Replay({ onChange, anchorRef }) {
 }
 
 // src/components/controls/trigger.tsx
-var React18 = __toESM(require("react"));
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_ui12 = require("@elementor/ui");
+var React19 = __toESM(require("react"));
 var import_i18n12 = require("@wordpress/i18n");
+var TRIGGER_OPTIONS = {
+  load: (0, import_i18n12.__)("Page load", "elementor"),
+  scrollIn: (0, import_i18n12.__)("Scroll into view", "elementor"),
+  scrollOn: (0, import_i18n12.__)("While scrolling", "elementor"),
+  hover: (0, import_i18n12.__)("On hover", "elementor"),
+  click: (0, import_i18n12.__)("On click", "elementor")
+};
+var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
-  const availableTriggers = Object.entries({
-    load: (0, import_i18n12.__)("Page load", "elementor"),
-    scrollIn: (0, import_i18n12.__)("Scroll into view", "elementor"),
-    scrollOn: (0, import_i18n12.__)("While Scrolling", "elementor")
-  }).map(([key, label]) => ({
-    key,
-    label
-  }));
-  return /* @__PURE__ */ React18.createElement(
-    import_ui12.Select,
+  const baseOptions = Object.fromEntries(
+    Object.entries(TRIGGER_OPTIONS).filter(([key]) => BASE_TRIGGERS.includes(key))
+  );
+  const disabledOptions = Object.fromEntries(
+    Object.entries(TRIGGER_OPTIONS).filter(([key]) => !BASE_TRIGGERS.includes(key))
+  );
+  return /* @__PURE__ */ React19.createElement(
+    PromotionSelect,
     {
-      fullWidth: true,
-      displayEmpty: true,
-      size: "tiny",
-      onChange: (event) => onChange(event.target.value),
-      value
-    },
-    availableTriggers.map((trigger) => {
-      return /* @__PURE__ */ React18.createElement(import_editor_ui4.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
-    })
+      value: value in baseOptions ? value : DEFAULT_VALUES.trigger,
+      onChange,
+      baseOptions,
+      disabledOptions,
+      promotionLabel: (0, import_i18n12.__)("PRO triggers", "elementor"),
+      promotionContent: (0, import_i18n12.__)("Upgrade to unlock more interactions triggers.", "elementor"),
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/"
+    }
   );
 }
 
@@ -1322,6 +1445,16 @@ function init() {
       component: Replay,
       options: ["true", "false"]
     });
+    registerInteractionsControl({
+      type: "effectType",
+      component: EffectType,
+      options: ["in", "out"]
+    });
+    registerInteractionsControl({
+      type: "direction",
+      component: Direction,
+      options: ["top", "bottom", "left", "right"]
+    });
     registerInteractionsControl({
       type: "effect",
       component: Effect,
@@ -1333,9 +1466,15 @@ function init() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BASE_EASINGS,
+  BASE_REPLAY,
+  BASE_TRIGGERS,
+  EASING_OPTIONS,
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState,
   InteractionsTab,
+  REPLAY_OPTIONS,
+  TRIGGER_OPTIONS,
   createInteractionsProvider,
   getInteractionsConfig,
   init,