@elementor/editor-editing-panel 3.33.0-222 → 3.33.0-223

package/dist/index.js

@@ -4838,22 +4838,22 @@ var import_editor_panels3 = require("@elementor/editor-panels");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-open-editor-panel.ts
-var import_react40 = require("react");
+var import_react44 = require("react");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 
 // src/panel.ts
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/editing-panel.tsx
-var React94 = __toESM(require("react"));
+var React102 = __toESM(require("react"));
 var import_editor_controls53 = require("@elementor/editor-controls");
 var import_editor_elements15 = require("@elementor/editor-elements");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons26 = require("@elementor/icons");
+var import_editor_ui9 = require("@elementor/editor-ui");
+var import_icons28 = require("@elementor/icons");
 var import_session9 = require("@elementor/session");
-var import_ui47 = require("@elementor/ui");
-var import_i18n64 = require("@wordpress/i18n");
+var import_ui54 = require("@elementor/ui");
+var import_i18n70 = require("@wordpress/i18n");
 
 // src/components/editing-panel-error-fallback.tsx
 var React84 = __toESM(require("react"));
@@ -4863,28 +4863,45 @@ function EditorPanelErrorFallback() {
 }
 
 // src/components/editing-panel-tabs.tsx
-var import_react39 = require("react");
-var React93 = __toESM(require("react"));
+var import_react43 = require("react");
+var React101 = __toESM(require("react"));
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_ui46 = require("@elementor/ui");
-var import_i18n63 = require("@wordpress/i18n");
+var import_ui53 = require("@elementor/ui");
+var import_i18n69 = require("@wordpress/i18n");
+
+// src/contexts/popup-state-contex.tsx
+var React85 = __toESM(require("react"));
+var import_react37 = require("react");
+var PopupStateContext = (0, import_react37.createContext)(void 0);
+var PopupStateProvider = ({ children }) => {
+  const [openByDefault, setOpenByDefault] = (0, import_react37.useState)(false);
+  const triggerDefaultOpen = (0, import_react37.useCallback)(() => {
+    setOpenByDefault(true);
+  }, []);
+  const resetDefaultOpen = (0, import_react37.useCallback)(() => {
+    setOpenByDefault(false);
+  }, []);
+  return /* @__PURE__ */ React85.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
+};
+var usePopupStateContext = () => {
+  const context = (0, import_react37.useContext)(PopupStateContext);
+  if (!context) {
+    throw new Error("usePopupStateContext must be used within PopupStateProvider");
+  }
+  return context;
+};
 
 // src/components/interactions-tab.tsx
-var React88 = __toESM(require("react"));
+var React96 = __toESM(require("react"));
+var import_react41 = require("react");
 var import_editor_elements13 = require("@elementor/editor-elements");
-var import_icons25 = require("@elementor/icons");
 var import_session6 = require("@elementor/session");
-var import_ui43 = require("@elementor/ui");
-var import_i18n61 = require("@wordpress/i18n");
-
-// src/components/interactions-sections/interactions-section.tsx
-var React87 = __toESM(require("react"));
 
 // src/contexts/interaction-context.tsx
-var React85 = __toESM(require("react"));
-var import_react37 = require("react");
+var React86 = __toESM(require("react"));
+var import_react38 = require("react");
 var import_editor_elements12 = require("@elementor/editor-elements");
-var InteractionsContext = (0, import_react37.createContext)(null);
+var InteractionsContext = (0, import_react38.createContext)(null);
 var InteractionsProvider = ({ children }) => {
   const { element } = useElement();
   const interactions = (0, import_editor_elements12.useElementInteractions)(element.id);
@@ -4898,262 +4915,422 @@ var InteractionsProvider = ({ children }) => {
     interactions: interactions || "",
     setInteractions
   };
-  return /* @__PURE__ */ React85.createElement(InteractionsContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React86.createElement(InteractionsContext.Provider, { value: contextValue }, children);
 };
 var useInteractionsContext = () => {
-  const context = (0, import_react37.useContext)(InteractionsContext);
+  const context = (0, import_react38.useContext)(InteractionsContext);
   if (!context) {
     throw new Error("useInteractionsContext must be used within InteractionsProvider");
   }
   return context;
 };
 
-// src/components/interactions-sections/interactions-input.tsx
-var React86 = __toESM(require("react"));
+// src/interactions/components/empty-state.tsx
+var React87 = __toESM(require("react"));
 var import_icons24 = require("@elementor/icons");
 var import_ui42 = require("@elementor/ui");
 var import_i18n60 = require("@wordpress/i18n");
-var getAnimationOptions = () => {
-  const extendedWindow = window;
-  return extendedWindow.ElementorInteractionsConfig?.animationOptions;
+var EmptyState2 = ({ onCreateInteraction }) => {
+  return /* @__PURE__ */ React87.createElement(
+    import_ui42.Stack,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pt: 8, pb: 5.5 },
+      gap: 1.5
+    },
+    /* @__PURE__ */ React87.createElement(import_icons24.SwipeIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React87.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Animate elements with Interactions", "elementor")),
+    /* @__PURE__ */ React87.createElement(import_ui42.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n60.__)(
+      "Add entrance animations and effects triggered by user interactions such as click, hover, or scroll.",
+      "elementor"
+    )),
+    /* @__PURE__ */ React87.createElement(import_ui42.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onCreateInteraction }, (0, import_i18n60.__)("Create an interaction", "elementor"))
+  );
 };
-var ANIMATION_OPTIONS = getAnimationOptions() || [{ value: "", label: "Select animation..." }];
-var InteractionsInput = () => {
-  const { interactions, setInteractions } = useInteractionsContext();
-  const currentAnimationIds = React86.useMemo(() => {
-    try {
-      const parsed = JSON.parse(interactions || "[]");
-      if (Array.isArray(parsed)) {
-        return parsed.map(
-          (item) => typeof item === "string" ? item : item?.animation?.animation_id || ""
-        );
-      }
-      return [];
-    } catch {
-      return [];
+
+// src/interactions/components/interactions-list.tsx
+var React95 = __toESM(require("react"));
+var import_react40 = require("react");
+var import_icons27 = require("@elementor/icons");
+var import_ui50 = require("@elementor/ui");
+var import_i18n67 = require("@wordpress/i18n");
+
+// src/interactions/utils/get-interactions-config.ts
+var DEFAULT_CONFIG = {
+  constants: {
+    defaultDuration: 300,
+    defaultDelay: 0,
+    slideDistance: 100,
+    scaleStart: 0.5,
+    easing: "linear"
+  },
+  animationOptions: []
+};
+function getInteractionsConfig() {
+  return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
+}
+
+// src/interactions/utils/format-interaction-label.ts
+function formatInteractionLabel(animationId) {
+  if (!animationId) {
+    return "";
+  }
+  const [trigger, effect, type, direction, duration, delay] = animationId.split("-");
+  const baseValue = `${trigger}-${effect}-${type}-${direction || ""}`;
+  const animationOptions = getInteractionsConfig()?.animationOptions;
+  const option = animationOptions.find((opt) => opt.value === baseValue);
+  let label = option?.label || animationId;
+  if (duration || delay) {
+    const constants = getInteractionsConfig()?.constants;
+    const durationValue = duration || String(constants.defaultDuration);
+    const delayValue = delay || String(constants.defaultDelay);
+    label += ` (${durationValue}ms`;
+    if (delayValue !== "0") {
+      label += `, ${delayValue}ms delay`;
     }
-  }, [interactions]);
-  const handleAddInteraction = () => {
-    const newAnimationIds = [...currentAnimationIds, ""];
-    const newInteractions = newAnimationIds.map((animationId) => ({
-      animation: {
-        animation_type: "full-preset",
-        animation_id: animationId
-      }
-    }));
-    setInteractions(JSON.stringify(newInteractions));
-  };
-  const handleRemoveInteraction = (index) => {
-    const newAnimationIds = currentAnimationIds.filter((_, i) => i !== index);
-    const newInteractions = newAnimationIds.map((animationId) => ({
-      animation: {
-        animation_type: "full-preset",
-        animation_id: animationId
-      }
-    }));
-    setInteractions(JSON.stringify(newInteractions));
-  };
-  const handleChangeInteraction = (index, value) => {
-    const newAnimationIds = [...currentAnimationIds];
-    newAnimationIds[index] = value;
-    const newInteractions = newAnimationIds.map((animationId) => ({
-      animation: {
-        animation_type: "full-preset",
-        animation_id: animationId
-      }
-    }));
-    setInteractions(JSON.stringify(newInteractions));
-  };
-  const handleDuplicateInteraction = (index) => {
-    const animationId = currentAnimationIds[index];
-    const newAnimationIds = [...currentAnimationIds];
-    newAnimationIds.splice(index + 1, 0, animationId);
-    const newInteractions = newAnimationIds.map((currentAnimationId) => ({
-      animation: {
-        animation_type: "full-preset",
-        animation_id: currentAnimationId
-      }
-    }));
-    setInteractions(JSON.stringify(newInteractions));
-  };
-  return /* @__PURE__ */ React86.createElement(import_ui42.Stack, { spacing: 1 }, /* @__PURE__ */ React86.createElement(import_ui42.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75, py: 0.25 } }, /* @__PURE__ */ React86.createElement(import_ui42.Box, { display: "flex", alignItems: "center", gap: 1, sx: { flexGrow: 1 } }, /* @__PURE__ */ React86.createElement(import_ui42.Typography, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, (0, import_i18n60.__)("Interactions", "elementor"))), /* @__PURE__ */ React86.createElement(import_ui42.Tooltip, { title: (0, import_i18n60.__)("Add interaction", "elementor"), placement: "top" }, /* @__PURE__ */ React86.createElement(
-    import_ui42.IconButton,
+    label += ")";
+  }
+  return label;
+}
+
+// src/interactions/components/header.tsx
+var React88 = __toESM(require("react"));
+var import_icons25 = require("@elementor/icons");
+var import_ui43 = require("@elementor/ui");
+var Header = ({ label }) => {
+  return /* @__PURE__ */ React88.createElement(
+    import_ui43.Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 1,
+      sx: { marginInlineEnd: -0.75, py: 0.25 }
+    },
+    /* @__PURE__ */ React88.createElement(import_ui43.Typography, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label),
+    /* @__PURE__ */ React88.createElement(import_ui43.IconButton, { size: "tiny", disabled: true }, /* @__PURE__ */ React88.createElement(import_icons25.PlusIcon, { fontSize: "tiny" }))
+  );
+};
+
+// src/interactions/components/interaction-details.tsx
+var React94 = __toESM(require("react"));
+var import_react39 = require("react");
+var import_ui49 = require("@elementor/ui");
+var import_i18n66 = require("@wordpress/i18n");
+
+// src/interactions/components/controls/direction.tsx
+var React89 = __toESM(require("react"));
+var import_icons26 = require("@elementor/icons");
+var import_ui44 = require("@elementor/ui");
+var import_i18n61 = require("@wordpress/i18n");
+function Direction({ value, onChange }) {
+  const availableDirections = [
+    { key: "top", label: (0, import_i18n61.__)("Up", "elementor"), icon: /* @__PURE__ */ React89.createElement(import_icons26.ArrowUpSmallIcon, { fontSize: "tiny" }) },
+    { key: "bottom", label: (0, import_i18n61.__)("Down", "elementor"), icon: /* @__PURE__ */ React89.createElement(import_icons26.ArrowDownSmallIcon, { fontSize: "tiny" }) },
+    { key: "left", label: (0, import_i18n61.__)("Left", "elementor"), icon: /* @__PURE__ */ React89.createElement(import_icons26.ArrowLeftIcon, { fontSize: "tiny" }) },
+    { key: "right", label: (0, import_i18n61.__)("Right", "elementor"), icon: /* @__PURE__ */ React89.createElement(import_icons26.ArrowRightIcon, { fontSize: "tiny" }) }
+  ];
+  return /* @__PURE__ */ React89.createElement(React89.Fragment, null, /* @__PURE__ */ React89.createElement(import_ui44.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React89.createElement(import_ui44.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n61.__)("Direction", "elementor"))), /* @__PURE__ */ React89.createElement(import_ui44.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React89.createElement(
+    import_ui44.ToggleButtonGroup,
     {
       size: "tiny",
-      onClick: handleAddInteraction,
-      "aria-label": (0, import_i18n60.__)("Add interaction", "elementor")
+      exclusive: true,
+      onChange: (event, newValue) => onChange(newValue),
+      value
     },
-    /* @__PURE__ */ React86.createElement(import_icons24.CirclePlusIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React86.createElement(import_ui42.Stack, { spacing: 0.5 }, currentAnimationIds.map((animationId, index) => /* @__PURE__ */ React86.createElement(
-    InteractionItem,
+    availableDirections.map((direction) => {
+      return /* @__PURE__ */ React89.createElement(import_ui44.Tooltip, { key: direction.key, title: direction.label, placement: "top" }, /* @__PURE__ */ React89.createElement(import_ui44.ToggleButton, { key: direction.key, value: direction.key }, direction.icon));
+    })
+  )));
+}
+
+// src/interactions/components/controls/effect.tsx
+var React90 = __toESM(require("react"));
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_ui45 = require("@elementor/ui");
+var import_i18n62 = require("@wordpress/i18n");
+function Effect({ value, onChange }) {
+  const availableEffects = [
+    { key: "fade", label: (0, import_i18n62.__)("Fade", "elementor") },
+    { key: "slide", label: (0, import_i18n62.__)("Slide", "elementor") },
+    { key: "scale", label: (0, import_i18n62.__)("Scale", "elementor") }
+  ];
+  return /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(import_ui45.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React90.createElement(import_ui45.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n62.__)("Effect", "elementor"))), /* @__PURE__ */ React90.createElement(import_ui45.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React90.createElement(
+    import_ui45.Select,
     {
-      key: index,
-      index,
-      animationId,
-      onChange: handleChangeInteraction,
-      onRemove: handleRemoveInteraction,
-      onDuplicate: handleDuplicateInteraction,
-      canRemove: currentAnimationIds.length > 1
+      fullWidth: true,
+      displayEmpty: true,
+      size: "tiny",
+      value,
+      onChange: (event) => onChange(event.target.value)
+    },
+    availableEffects.map((effect) => {
+      return /* @__PURE__ */ React90.createElement(import_editor_ui6.MenuListItem, { key: effect.key, value: effect.key }, effect.label);
+    })
+  )));
+}
+
+// src/interactions/components/controls/effect-type.tsx
+var React91 = __toESM(require("react"));
+var import_ui46 = require("@elementor/ui");
+var import_i18n63 = require("@wordpress/i18n");
+function EffectType({ value, onChange }) {
+  const availableEffectTypes = [
+    { key: "in", label: (0, import_i18n63.__)("In", "elementor") },
+    { key: "out", label: (0, import_i18n63.__)("Out", "elementor") }
+  ];
+  return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(import_ui46.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React91.createElement(import_ui46.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n63.__)("Type", "elementor"))), /* @__PURE__ */ React91.createElement(import_ui46.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React91.createElement(
+    import_ui46.ToggleButtonGroup,
+    {
+      size: "tiny",
+      exclusive: true,
+      onChange: (event, newValue) => onChange(newValue),
+      value
+    },
+    availableEffectTypes.map((effectType) => {
+      return /* @__PURE__ */ React91.createElement(import_ui46.Tooltip, { key: effectType.key, title: effectType.label, placement: "top" }, /* @__PURE__ */ React91.createElement(import_ui46.ToggleButton, { key: effectType.key, value: effectType.key }, effectType.label));
+    })
+  )));
+}
+
+// src/interactions/components/controls/time-frame-indicator.tsx
+var React92 = __toESM(require("react"));
+var import_editor_ui7 = require("@elementor/editor-ui");
+var import_ui47 = require("@elementor/ui");
+var import_i18n64 = require("@wordpress/i18n");
+function TimeFrameIndicator({ value, onChange, label }) {
+  const availableTimeFrames = ["0", "100", "200", "300", "400", "500", "750", "1000", "1250", "1500"].map(
+    (key) => ({
+      key,
+      // translators: %s: time in milliseconds
+      label: (0, import_i18n64.__)("%s MS", "elementor").replace("%s", key)
+    })
+  );
+  return /* @__PURE__ */ React92.createElement(React92.Fragment, null, /* @__PURE__ */ React92.createElement(import_ui47.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React92.createElement(import_ui47.Typography, { variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React92.createElement(import_ui47.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React92.createElement(
+    import_ui47.Select,
+    {
+      fullWidth: true,
+      displayEmpty: true,
+      size: "tiny",
+      value,
+      onChange: (event) => onChange(event.target.value)
+    },
+    availableTimeFrames.map((timeFrame) => {
+      return /* @__PURE__ */ React92.createElement(import_editor_ui7.MenuListItem, { key: timeFrame.key, value: timeFrame.key }, timeFrame.label);
+    })
+  )));
+}
+
+// src/interactions/components/controls/trigger.tsx
+var React93 = __toESM(require("react"));
+var import_editor_ui8 = require("@elementor/editor-ui");
+var import_ui48 = require("@elementor/ui");
+var import_i18n65 = require("@wordpress/i18n");
+function Trigger({ value, onChange }) {
+  const availableTriggers = Object.entries({
+    load: (0, import_i18n65.__)("Page load", "elementor"),
+    scrollIn: (0, import_i18n65.__)("Scroll into view", "elementor"),
+    scrollOut: (0, import_i18n65.__)("Scroll out of view", "elementor")
+  }).map(([key, label]) => ({
+    key,
+    label
+  }));
+  return /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui48.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React93.createElement(import_ui48.Typography, { variant: "caption", color: "text.secondary" }, (0, import_i18n65.__)("Trigger", "elementor"))), /* @__PURE__ */ React93.createElement(import_ui48.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React93.createElement(
+    import_ui48.Select,
+    {
+      fullWidth: true,
+      displayEmpty: true,
+      size: "tiny",
+      onChange: (event) => onChange(event.target.value),
+      value
+    },
+    availableTriggers.map((trigger) => {
+      return /* @__PURE__ */ React93.createElement(import_editor_ui8.MenuListItem, { key: trigger.key, value: trigger.key }, trigger.label);
+    })
+  )));
+}
+
+// src/interactions/components/interaction-details.tsx
+var DELIMITER = "-";
+var InteractionDetails = ({ interaction, onChange }) => {
+  const [interactionDetails, setInteractionDetails] = (0, import_react39.useState)(() => {
+    const [trigger, effect, type, direction, duration, delay] = interaction.split(DELIMITER);
+    return {
+      trigger: trigger || "load",
+      effect: effect || "fade",
+      type: type || "in",
+      direction: direction || "",
+      duration: duration || "300",
+      delay: delay || "0"
+    };
+  });
+  (0, import_react39.useEffect)(() => {
+    const newValue = Object.values(interactionDetails).join(DELIMITER);
+    onChange(newValue);
+  }, [interactionDetails, onChange]);
+  const handleChange = (key, value) => {
+    setInteractionDetails((prev) => ({ ...prev, [key]: value }));
+  };
+  return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(import_ui49.Grid, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__PURE__ */ React94.createElement(Trigger, { value: interactionDetails.trigger, onChange: (v) => handleChange("trigger", v) })), /* @__PURE__ */ React94.createElement(import_ui49.Divider, null), /* @__PURE__ */ React94.createElement(import_ui49.Grid, { container: true, spacing: 2, sx: { width: "300px", p: 1 } }, /* @__PURE__ */ React94.createElement(Effect, { value: interactionDetails.effect, onChange: (v) => handleChange("effect", v) }), /* @__PURE__ */ React94.createElement(EffectType, { value: interactionDetails.type, onChange: (v) => handleChange("type", v) }), /* @__PURE__ */ React94.createElement(
+    Direction,
+    {
+      value: interactionDetails.direction ?? "",
+      onChange: (v) => handleChange("direction", v)
     }
-  ))));
+  ), /* @__PURE__ */ React94.createElement(
+    TimeFrameIndicator,
+    {
+      value: interactionDetails.duration,
+      onChange: (v) => handleChange("duration", v),
+      label: (0, import_i18n66.__)("Duration", "elementor")
+    }
+  ), /* @__PURE__ */ React94.createElement(
+    TimeFrameIndicator,
+    {
+      value: interactionDetails.delay,
+      onChange: (v) => handleChange("delay", v),
+      label: (0, import_i18n66.__)("Delay", "elementor")
+    }
+  )));
 };
-var InteractionItem = ({
-  index,
-  animationId,
-  onChange,
-  onRemove,
-  onDuplicate,
-  canRemove
+
+// src/interactions/components/interactions-list.tsx
+var PredefinedInteractionsList = ({
+  onSelectInteraction,
+  selectedInteraction,
+  onDelete
 }) => {
-  const popoverState = (0, import_ui42.usePopupState)({ variant: "popover" });
-  const selectedOption = ANIMATION_OPTIONS.find((option) => option.value === animationId);
-  const displayLabel = selectedOption?.label || "Select animation...";
-  const isShowingPlaceholder = !animationId;
-  const handleSelect = (value) => {
-    onChange(index, value);
-    popoverState.close();
-  };
-  return /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(
-    import_ui42.UnstableTag,
+  return /* @__PURE__ */ React95.createElement(import_ui50.Stack, { sx: { m: 1, p: 1.5 }, gap: 2 }, /* @__PURE__ */ React95.createElement(Header, { label: (0, import_i18n67.__)("Interactions", "elementor") }), /* @__PURE__ */ React95.createElement(
+    InteractionsList,
+    {
+      onDelete: () => onDelete?.(),
+      selectedInteraction,
+      onSelectInteraction
+    }
+  ));
+};
+function InteractionsList({ onSelectInteraction, selectedInteraction, defaultStateRef }) {
+  const [interactionId, setInteractionId] = (0, import_react40.useState)(selectedInteraction);
+  const anchorEl = (0, import_react40.useRef)(null);
+  const popupId = (0, import_react40.useId)();
+  const popupState = (0, import_ui50.usePopupState)({
+    variant: "popover",
+    popupId: `elementor-interactions-list-${popupId}`
+  });
+  const { openByDefault, resetDefaultOpen } = usePopupStateContext();
+  (0, import_react40.useEffect)(() => {
+    if (interactionId) {
+      onSelectInteraction(interactionId);
+    }
+  }, [interactionId, onSelectInteraction]);
+  (0, import_react40.useEffect)(() => {
+    if (openByDefault && anchorEl.current) {
+      popupState.open();
+      resetDefaultOpen();
+    }
+  }, [defaultStateRef, openByDefault, popupState, resetDefaultOpen]);
+  const displayLabel = (0, import_react40.useMemo)(() => {
+    return formatInteractionLabel(interactionId);
+  }, [interactionId]);
+  return /* @__PURE__ */ React95.createElement(import_ui50.Stack, { gap: 1.5, ref: anchorEl }, /* @__PURE__ */ React95.createElement(
+    import_ui50.UnstableTag,
     {
+      ...(0, import_ui50.bindTrigger)(popupState),
+      fullWidth: true,
       variant: "outlined",
       label: displayLabel,
-      endIcon: /* @__PURE__ */ React86.createElement(import_icons24.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui42.bindTrigger)(popoverState),
-      fullWidth: true,
       showActionsOnHover: true,
-      sx: {
-        minHeight: (theme) => theme.spacing(3.5),
-        ...isShowingPlaceholder && {
-          "& .MuiTag-label": {
-            color: (theme) => theme.palette.text.tertiary
-          }
-        }
-      },
-      actions: /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(import_ui42.Tooltip, { title: (0, import_i18n60.__)("Duplicate", "elementor"), placement: "top" }, /* @__PURE__ */ React86.createElement(
-        import_ui42.IconButton,
-        {
-          size: "tiny",
-          onClick: (e) => {
-            e.stopPropagation();
-            onDuplicate(index);
-          },
-          "aria-label": (0, import_i18n60.__)("Duplicate", "elementor")
-        },
-        /* @__PURE__ */ React86.createElement(import_icons24.CopyIcon, { fontSize: "tiny" })
-      )), canRemove && /* @__PURE__ */ React86.createElement(import_ui42.Tooltip, { title: (0, import_i18n60.__)("Remove", "elementor"), placement: "top" }, /* @__PURE__ */ React86.createElement(
-        import_ui42.IconButton,
-        {
-          size: "tiny",
-          onClick: (e) => {
-            e.stopPropagation();
-            onRemove(index);
-          },
-          "aria-label": (0, import_i18n60.__)("Remove", "elementor"),
-          color: "error"
-        },
-        /* @__PURE__ */ React86.createElement(import_icons24.CircleXIcon, { fontSize: "tiny" })
-      )))
+      actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(import_ui50.IconButton, { size: "tiny", disabled: true }, /* @__PURE__ */ React95.createElement(import_icons27.EyeIcon, { fontSize: "tiny" })), /* @__PURE__ */ React95.createElement(import_ui50.IconButton, { size: "tiny" }, /* @__PURE__ */ React95.createElement(import_icons27.XIcon, { fontSize: "tiny" })))
     }
-  ), /* @__PURE__ */ React86.createElement(
-    import_ui42.Popover,
+  ), /* @__PURE__ */ React95.createElement(
+    import_ui50.Popover,
     {
-      disablePortal: true,
-      slotProps: {
-        paper: {
-          sx: {
-            mt: 0.5,
-            minWidth: 200,
-            maxHeight: 300,
-            overflow: "auto"
-          }
-        }
-      },
+      ...(0, import_ui50.bindPopover)(popupState),
+      disableScrollLock: true,
+      anchorEl: anchorEl.current,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      ...(0, import_ui42.bindPopover)(popoverState)
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      PaperProps: {
+        sx: { my: 1 }
+      },
+      onClose: () => {
+        popupState.close();
+      }
     },
-    /* @__PURE__ */ React86.createElement(import_ui42.Box, { sx: { p: 1 } }, ANIMATION_OPTIONS.map((option) => /* @__PURE__ */ React86.createElement(
-      import_ui42.MenuItem,
+    /* @__PURE__ */ React95.createElement(
+      InteractionDetails,
       {
-        key: option.value,
-        value: option.value,
-        onClick: () => handleSelect(option.value),
-        selected: option.value === animationId,
-        sx: {
-          minHeight: 32,
-          fontSize: "0.75rem",
-          "&.Mui-selected": {
-            backgroundColor: "action.selected"
-          }
-        }
-      },
-      /* @__PURE__ */ React86.createElement(
-        import_ui42.ListItemText,
-        {
-          primary: option.label,
-          primaryTypographyProps: {
-            variant: "caption",
-            color: option.value === animationId ? "primary" : "text.primary"
-          }
+        interaction: selectedInteraction,
+        onChange: (newValue) => {
+          setInteractionId(newValue);
         }
-      )
-    )))
+      }
+    )
   ));
-};
-
-// src/components/interactions-sections/interactions-section.tsx
-var InteractionsSection = () => {
-  return /* @__PURE__ */ React87.createElement(SectionContent, null, /* @__PURE__ */ React87.createElement(InteractionsProvider, null, /* @__PURE__ */ React87.createElement(InteractionsInput, null)));
-};
+}
 
 // src/components/interactions-tab.tsx
-var EmptyState2 = ({ onCreateInteraction }) => {
-  return /* @__PURE__ */ React88.createElement(
-    import_ui43.Stack,
-    {
-      alignItems: "center",
-      justifyContent: "center",
-      height: "100%",
-      color: "text.secondary",
-      sx: { p: 2.5, pt: 8, pb: 5.5 },
-      gap: 1.5
-    },
-    /* @__PURE__ */ React88.createElement(import_icons25.SwipeIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React88.createElement(import_ui43.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n61.__)("Animate elements with Interactions", "elementor")),
-    /* @__PURE__ */ React88.createElement(import_ui43.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n61.__)(
-      "Add entrance animations and effects triggered by user interactions such as click, hover, or scroll.",
-      "elementor"
-    )),
-    /* @__PURE__ */ React88.createElement(import_ui43.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onCreateInteraction }, (0, import_i18n61.__)("Create an interaction", "elementor"))
-  );
-};
 var InteractionsTab = () => {
   const { element } = useElement();
-  const interactions = (0, import_editor_elements13.useElementInteractions)(element.id);
-  const [showInteractions, setShowInteractions] = React88.useState(false);
-  const hasInteractions = (() => {
-    if (!interactions || typeof interactions !== "string") {
-      return false;
+  const existingInteractions = (0, import_editor_elements13.useElementInteractions)(element.id);
+  const { triggerDefaultOpen } = usePopupStateContext();
+  const [showInteractions, setShowInteractions] = (0, import_react41.useState)(() => {
+    return !!JSON.parse(existingInteractions || "[]").length;
+  });
+  return /* @__PURE__ */ React96.createElement(import_session6.SessionStorageProvider, { prefix: element.id }, showInteractions ? /* @__PURE__ */ React96.createElement(SectionsList, null, /* @__PURE__ */ React96.createElement(InteractionsProvider, null, /* @__PURE__ */ React96.createElement(InteractionsContent, null))) : /* @__PURE__ */ React96.createElement(
+    EmptyState2,
+    {
+      onCreateInteraction: () => {
+        setShowInteractions(true);
+        triggerDefaultOpen();
+      }
     }
+  ));
+};
+function InteractionsContent() {
+  const { interactions, setInteractions } = useInteractionsContext();
+  const applyInteraction = (0, import_react41.useCallback)(
+    (interaction) => {
+      const newInteractions = [
+        {
+          animation: {
+            animation_type: "full-preset",
+            animation_id: interaction
+          }
+        }
+      ];
+      setInteractions(JSON.stringify(newInteractions));
+    },
+    [setInteractions]
+  );
+  const selectedInteraction = (0, import_react41.useMemo)(() => {
     try {
-      const parsed = JSON.parse(interactions);
-      return Array.isArray(parsed) && parsed.length > 0;
+      const parsed = JSON.parse(interactions || "[]");
+      return parsed[0]?.animation?.animation_id || "";
     } catch {
-      return false;
+      return "";
     }
-  })();
-  const shouldShowInteractions = hasInteractions || showInteractions;
-  return /* @__PURE__ */ React88.createElement(import_session6.SessionStorageProvider, { prefix: element.id }, shouldShowInteractions ? /* @__PURE__ */ React88.createElement(SectionsList, null, /* @__PURE__ */ React88.createElement(InteractionsSection, null)) : /* @__PURE__ */ React88.createElement(EmptyState2, { onCreateInteraction: () => setShowInteractions(true) }));
-};
+  }, [interactions]);
+  return /* @__PURE__ */ React96.createElement(SectionsList, null, /* @__PURE__ */ React96.createElement(
+    PredefinedInteractionsList,
+    {
+      selectedInteraction,
+      onSelectInteraction: applyInteraction
+    }
+  ));
+}
 
 // src/components/settings-tab.tsx
-var React92 = __toESM(require("react"));
+var React100 = __toESM(require("react"));
 var import_editor_controls52 = require("@elementor/editor-controls");
 var import_session8 = require("@elementor/session");
-var import_ui45 = require("@elementor/ui");
+var import_ui52 = require("@elementor/ui");
 
 // src/controls-registry/control.tsx
-var React89 = __toESM(require("react"));
+var React97 = __toESM(require("react"));
 var Control = ({ props, type }) => {
   const ControlByType = controlsRegistry.get(type);
   const { element } = useElement();
@@ -5162,19 +5339,19 @@ var Control = ({ props, type }) => {
       context: { controlType: type }
     });
   }
-  return /* @__PURE__ */ React89.createElement(ControlByType, { ...props, context: { elementId: element.id } });
+  return /* @__PURE__ */ React97.createElement(ControlByType, { ...props, context: { elementId: element.id } });
 };
 
 // src/controls-registry/control-type-container.tsx
-var React90 = __toESM(require("react"));
-var import_ui44 = require("@elementor/ui");
+var React98 = __toESM(require("react"));
+var import_ui51 = require("@elementor/ui");
 var ControlTypeContainer = ({ children, layout }) => {
   if (layout === "custom") {
     return children;
   }
-  return /* @__PURE__ */ React90.createElement(StyledContainer, { layout }, children);
+  return /* @__PURE__ */ React98.createElement(StyledContainer, { layout }, children);
 };
-var StyledContainer = (0, import_ui44.styled)(import_ui44.Box, {
+var StyledContainer = (0, import_ui51.styled)(import_ui51.Box, {
   shouldForwardProp: (prop) => !["layout"].includes(prop)
 })(({ layout, theme }) => ({
   display: "grid",
@@ -5200,14 +5377,14 @@ var getStyleByLayout = (layout) => {
 };
 
 // src/controls-registry/settings-field.tsx
-var React91 = __toESM(require("react"));
-var import_react38 = require("react");
+var React99 = __toESM(require("react"));
+var import_react42 = require("react");
 var import_editor_controls51 = require("@elementor/editor-controls");
 var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_elements14 = require("@elementor/editor-elements");
 var import_editor_props15 = require("@elementor/editor-props");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_i18n62 = require("@wordpress/i18n");
+var import_i18n68 = require("@wordpress/i18n");
 
 // src/utils/prop-dependency-utils.ts
 var import_editor_props14 = require("@elementor/editor-props");
@@ -5395,13 +5572,13 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
     undoableUpdateElementProp(settings);
   };
   const isDisabled = (prop) => !(0, import_editor_props15.isDependencyMet)(prop?.dependencies, elementSettingValues).isMet;
-  return /* @__PURE__ */ React91.createElement(import_editor_controls51.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React91.createElement(import_editor_controls51.PropKeyProvider, { bind }, children));
+  return /* @__PURE__ */ React99.createElement(import_editor_controls51.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React99.createElement(import_editor_controls51.PropKeyProvider, { bind }, children));
 };
 function useUndoableUpdateElementProp({
   elementId,
   propDisplayName
 }) {
-  return (0, import_react38.useMemo)(() => {
+  return (0, import_react42.useMemo)(() => {
     return (0, import_editor_v1_adapters5.undoable)(
       {
         do: (newSettings) => {
@@ -5417,7 +5594,7 @@ function useUndoableUpdateElementProp({
       {
         title: (0, import_editor_elements14.getElementLabel)(elementId),
         // translators: %s is the name of the property that was edited.
-        subtitle: (0, import_i18n62.__)("%s edited", "elementor").replace("%s", propDisplayName),
+        subtitle: (0, import_i18n68.__)("%s edited", "elementor").replace("%s", propDisplayName),
         debounce: { wait: HISTORY_DEBOUNCE_WAIT2 }
       }
     );
@@ -5429,13 +5606,13 @@ var SettingsTab = () => {
   const { elementType, element } = useElement();
   const settingsDefault = useDefaultPanelSettings();
   const isDefaultExpanded = (sectionId) => settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId);
-  return /* @__PURE__ */ React92.createElement(import_session8.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React92.createElement(SectionsList, null, elementType.controls.map((control, index) => {
+  return /* @__PURE__ */ React100.createElement(import_session8.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React100.createElement(SectionsList, null, elementType.controls.map((control, index) => {
     if (isControl(control)) {
-      return /* @__PURE__ */ React92.createElement(Control2, { key: getKey(control, element), control });
+      return /* @__PURE__ */ React100.createElement(Control2, { key: getKey(control, element), control });
     }
     const { type, value } = control;
     if (type === "section") {
-      return /* @__PURE__ */ React92.createElement(
+      return /* @__PURE__ */ React100.createElement(
         Section,
         {
           title: value.label,
@@ -5444,7 +5621,7 @@ var SettingsTab = () => {
         },
         value.items?.map((item) => {
           if (isControl(item)) {
-            return /* @__PURE__ */ React92.createElement(Control2, { key: getKey(item, element), control: item });
+            return /* @__PURE__ */ React100.createElement(Control2, { key: getKey(item, element), control: item });
           }
           return null;
         })
@@ -5463,16 +5640,16 @@ var Control2 = ({ control: { value, type } }) => {
     controlProps.label = value.label;
   }
   if (type === "element-control") {
-    return /* @__PURE__ */ React92.createElement(ControlLayout, { control: value, layout, controlProps });
+    return /* @__PURE__ */ React100.createElement(ControlLayout, { control: value, layout, controlProps });
   }
-  return /* @__PURE__ */ React92.createElement(SettingsField, { bind: value.bind, propDisplayName: value.label || value.bind }, /* @__PURE__ */ React92.createElement(ControlLayout, { control: value, layout, controlProps }));
+  return /* @__PURE__ */ React100.createElement(SettingsField, { bind: value.bind, propDisplayName: value.label || value.bind }, /* @__PURE__ */ React100.createElement(ControlLayout, { control: value, layout, controlProps }));
 };
 var ControlLayout = ({
   control,
   layout,
   controlProps
 }) => {
-  return /* @__PURE__ */ React92.createElement(React92.Fragment, null, control.meta?.topDivider && /* @__PURE__ */ React92.createElement(import_ui45.Divider, null), /* @__PURE__ */ React92.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ React92.createElement(import_editor_controls52.ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React92.createElement(Control, { type: control.type, props: controlProps })));
+  return /* @__PURE__ */ React100.createElement(React100.Fragment, null, control.meta?.topDivider && /* @__PURE__ */ React100.createElement(import_ui52.Divider, null), /* @__PURE__ */ React100.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ React100.createElement(import_editor_controls52.ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React100.createElement(Control, { type: control.type, props: controlProps })));
 };
 function populateChildControlProps(props) {
   if (props.childControlType) {
@@ -5505,7 +5682,7 @@ var EditingPanelTabs = () => {
   return (
     // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
     // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
-    /* @__PURE__ */ React93.createElement(import_react39.Fragment, { key: element.id }, /* @__PURE__ */ React93.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React101.createElement(import_react43.Fragment, { key: element.id }, /* @__PURE__ */ React101.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
@@ -5513,9 +5690,9 @@ var PanelTabContent = () => {
   const defaultComponentTab = editorDefaults.defaultTab;
   const isInteractionsActive = (0, import_editor_v1_adapters6.isExperimentActive)("e_interactions");
   const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
-  const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui46.useTabs)(currentTab);
-  return /* @__PURE__ */ React93.createElement(ScrollProvider, null, /* @__PURE__ */ React93.createElement(import_ui46.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React93.createElement(import_ui46.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React93.createElement(
-    import_ui46.Tabs,
+  const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui53.useTabs)(currentTab);
+  return /* @__PURE__ */ React101.createElement(ScrollProvider, null, /* @__PURE__ */ React101.createElement(import_ui53.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React101.createElement(import_ui53.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React101.createElement(
+    import_ui53.Tabs,
     {
       variant: "fullWidth",
       size: "small",
@@ -5526,10 +5703,10 @@ var PanelTabContent = () => {
         setCurrentTab(newValue);
       }
     },
-    /* @__PURE__ */ React93.createElement(import_ui46.Tab, { label: (0, import_i18n63.__)("General", "elementor"), ...getTabProps("settings") }),
-    /* @__PURE__ */ React93.createElement(import_ui46.Tab, { label: (0, import_i18n63.__)("Style", "elementor"), ...getTabProps("style") }),
-    isInteractionsActive && /* @__PURE__ */ React93.createElement(import_ui46.Tab, { label: (0, import_i18n63.__)("Interactions", "elementor"), ...getTabProps("interactions") })
-  ), /* @__PURE__ */ React93.createElement(import_ui46.Divider, null)), /* @__PURE__ */ React93.createElement(import_ui46.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React93.createElement(SettingsTab, null)), /* @__PURE__ */ React93.createElement(import_ui46.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React93.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React93.createElement(import_ui46.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React93.createElement(InteractionsTab, null))));
+    /* @__PURE__ */ React101.createElement(import_ui53.Tab, { label: (0, import_i18n69.__)("General", "elementor"), ...getTabProps("settings") }),
+    /* @__PURE__ */ React101.createElement(import_ui53.Tab, { label: (0, import_i18n69.__)("Style", "elementor"), ...getTabProps("style") }),
+    isInteractionsActive && /* @__PURE__ */ React101.createElement(import_ui53.Tab, { label: (0, import_i18n69.__)("Interactions", "elementor"), ...getTabProps("interactions") })
+  ), /* @__PURE__ */ React101.createElement(import_ui53.Divider, null)), /* @__PURE__ */ React101.createElement(import_ui53.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React101.createElement(SettingsTab, null)), /* @__PURE__ */ React101.createElement(import_ui53.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React101.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React101.createElement(import_ui53.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React101.createElement(PopupStateProvider, null, /* @__PURE__ */ React101.createElement(InteractionsTab, null)))));
 };
 
 // src/components/editing-panel.tsx
@@ -5541,8 +5718,8 @@ var EditingPanel = () => {
   if (!element || !elementType) {
     return null;
   }
-  const panelTitle = (0, import_i18n64.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React94.createElement(import_ui47.ErrorBoundary, { fallback: /* @__PURE__ */ React94.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React94.createElement(import_session9.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React94.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React94.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React94.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React94.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React94.createElement(import_icons26.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React94.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React94.createElement(import_editor_controls53.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React94.createElement(import_editor_controls53.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React94.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React94.createElement(EditingPanelTabs, null)))))))));
+  const panelTitle = (0, import_i18n70.__)("Edit %s", "elementor").replace("%s", elementType.title);
+  return /* @__PURE__ */ React102.createElement(import_ui54.ErrorBoundary, { fallback: /* @__PURE__ */ React102.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React102.createElement(import_session9.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React102.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React102.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React102.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React102.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React102.createElement(import_icons28.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React102.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React102.createElement(import_editor_controls53.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React102.createElement(import_editor_controls53.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React102.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React102.createElement(EditingPanelTabs, null)))))))));
 };
 
 // src/panel.ts
@@ -5565,7 +5742,7 @@ var isAtomicWidgetSelected = () => {
 // src/hooks/use-open-editor-panel.ts
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandStartEvent)("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
@@ -5581,13 +5758,13 @@ var EditingPanelHooks = () => {
 };
 
 // src/controls-registry/element-controls/tabs-control/tabs-control.tsx
-var React95 = __toESM(require("react"));
+var React103 = __toESM(require("react"));
 var import_editor_controls54 = require("@elementor/editor-controls");
 var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_props17 = require("@elementor/editor-props");
-var import_icons27 = require("@elementor/icons");
-var import_ui48 = require("@elementor/ui");
-var import_i18n66 = require("@wordpress/i18n");
+var import_icons29 = require("@elementor/icons");
+var import_ui55 = require("@elementor/ui");
+var import_i18n72 = require("@wordpress/i18n");
 
 // src/controls-registry/element-controls/get-element-by-type.ts
 var import_editor_elements17 = require("@elementor/editor-elements");
@@ -5609,7 +5786,7 @@ var getElementByType = (elementId, type) => {
 // src/controls-registry/element-controls/tabs-control/actions.ts
 var import_editor_elements18 = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
-var import_i18n65 = require("@wordpress/i18n");
+var import_i18n71 = require("@wordpress/i18n");
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
 var duplicateItem = ({ items: items3 }) => {
@@ -5621,7 +5798,7 @@ var duplicateItem = ({ items: items3 }) => {
     }
     (0, import_editor_elements18.duplicateElements)({
       elementIds: [tabId, tabContentId],
-      title: (0, import_i18n65.__)("Duplicate Tab", "elementor"),
+      title: (0, import_i18n71.__)("Duplicate Tab", "elementor"),
       onCreate: (duplicatedElements) => {
         const tab = duplicatedElements.find((element) => element.originalElementId === tabId);
         const tabContent = duplicatedElements.find((element) => element.originalElementId === tabContentId);
@@ -5656,7 +5833,7 @@ var moveItem = ({
     throw new Error("Required tab elements not found for reordering");
   }
   (0, import_editor_elements18.moveElements)({
-    title: (0, import_i18n65.__)("Reorder Tabs", "elementor"),
+    title: (0, import_i18n71.__)("Reorder Tabs", "elementor"),
     moves: [
       {
         elementId: movedElementId,
@@ -5673,7 +5850,7 @@ var moveItem = ({
 };
 var removeItem = ({ items: items3 }) => {
   (0, import_editor_elements18.removeElements)({
-    title: (0, import_i18n65.__)("Tabs", "elementor"),
+    title: (0, import_i18n71.__)("Tabs", "elementor"),
     elementIds: items3.flatMap(({ item }) => {
       const tabId = item.id;
       const { value: tabContentId } = (0, import_editor_elements18.getElementSetting)(tabId, "tab-content-id") ?? {};
@@ -5693,7 +5870,7 @@ var addItem = ({
     const newTabContentId = (0, import_editor_elements18.generateElementId)();
     const newTabId = (0, import_editor_elements18.generateElementId)();
     (0, import_editor_elements18.createElements)({
-      title: (0, import_i18n65.__)("Tabs", "elementor"),
+      title: (0, import_i18n71.__)("Tabs", "elementor"),
       elements: [
         {
           containerId: tabContentAreaId,
@@ -5764,7 +5941,7 @@ var TabsControl = ({ label }) => {
       });
     }
   };
-  return /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React103.createElement(
     import_editor_controls54.Repeater,
     {
       addToBottom: true,
@@ -5786,7 +5963,7 @@ var ItemLabel = ({ value }) => {
   const id = value.id ?? "";
   const editorSettings = (0, import_editor_elements19.useElementEditorSettings)(id);
   const elementTitle = editorSettings?.title;
-  return /* @__PURE__ */ React95.createElement(import_ui48.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React95.createElement("span", null, elementTitle), /* @__PURE__ */ React95.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n66.__)("Tabs", "elementor") }, /* @__PURE__ */ React95.createElement(ItemDefaultTab, { value })));
+  return /* @__PURE__ */ React103.createElement(import_ui55.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React103.createElement("span", null, elementTitle), /* @__PURE__ */ React103.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n72.__)("Tabs", "elementor") }, /* @__PURE__ */ React103.createElement(ItemDefaultTab, { value })));
 };
 var ItemDefaultTab = ({ value }) => {
   const id = value.id ?? "";
@@ -5795,19 +5972,19 @@ var ItemDefaultTab = ({ value }) => {
   if (!isDefault) {
     return null;
   }
-  return /* @__PURE__ */ React95.createElement(import_ui48.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n66.__)("Default", "elementor") });
+  return /* @__PURE__ */ React103.createElement(import_ui55.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n72.__)("Default", "elementor") });
 };
 var ItemContent = ({ value }) => {
   if (!value.id) {
     return null;
   }
-  return /* @__PURE__ */ React95.createElement(import_ui48.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React95.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React95.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n66.__)("Tabs", "elementor") }, /* @__PURE__ */ React95.createElement(DefaultTabControl, { elementId: value.id })));
+  return /* @__PURE__ */ React103.createElement(import_ui55.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React103.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React103.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n72.__)("Tabs", "elementor") }, /* @__PURE__ */ React103.createElement(DefaultTabControl, { elementId: value.id })));
 };
 var DefaultTabControl = ({ elementId }) => {
   const { value, setValue } = (0, import_editor_controls54.useBoundProp)(import_editor_props17.stringPropTypeUtil);
   const isDefault = value === elementId;
-  return /* @__PURE__ */ React95.createElement(import_ui48.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React95.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n66.__)("Set as default tab", "elementor")), /* @__PURE__ */ React95.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React95.createElement(
-    import_ui48.Switch,
+  return /* @__PURE__ */ React103.createElement(import_ui55.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React103.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n72.__)("Set as default tab", "elementor")), /* @__PURE__ */ React103.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React103.createElement(
+    import_ui55.Switch,
     {
       size: "small",
       checked: isDefault,
@@ -5824,8 +6001,8 @@ var DefaultTabControl = ({ elementId }) => {
 var TabLabelControl = ({ elementId }) => {
   const editorSettings = (0, import_editor_elements19.useElementEditorSettings)(elementId);
   const label = editorSettings?.title ?? "";
-  return /* @__PURE__ */ React95.createElement(import_ui48.Stack, { gap: 1 }, /* @__PURE__ */ React95.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n66.__)("Tab name", "elementor")), /* @__PURE__ */ React95.createElement(
-    import_ui48.TextField,
+  return /* @__PURE__ */ React103.createElement(import_ui55.Stack, { gap: 1 }, /* @__PURE__ */ React103.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n72.__)("Tab name", "elementor")), /* @__PURE__ */ React103.createElement(
+    import_ui55.TextField,
     {
       size: "tiny",
       value: label,
@@ -5845,22 +6022,22 @@ var ConditionalTooltip = ({
   if (!showTooltip) {
     return children;
   }
-  return /* @__PURE__ */ React95.createElement(
-    import_ui48.Infotip,
+  return /* @__PURE__ */ React103.createElement(
+    import_ui55.Infotip,
     {
       arrow: false,
-      content: /* @__PURE__ */ React95.createElement(
-        import_ui48.Alert,
+      content: /* @__PURE__ */ React103.createElement(
+        import_ui55.Alert,
         {
           color: "secondary",
-          icon: /* @__PURE__ */ React95.createElement(import_icons27.InfoCircleFilledIcon, { fontSize: "tiny" }),
+          icon: /* @__PURE__ */ React103.createElement(import_icons29.InfoCircleFilledIcon, { fontSize: "tiny" }),
           size: "small",
           sx: { width: 288 }
         },
-        /* @__PURE__ */ React95.createElement(import_ui48.Typography, { variant: "body2" }, (0, import_i18n66.__)("To change the default tab, simply set another tab as default.", "elementor"))
+        /* @__PURE__ */ React103.createElement(import_ui55.Typography, { variant: "body2" }, (0, import_i18n72.__)("To change the default tab, simply set another tab as default.", "elementor"))
       )
     },
-    /* @__PURE__ */ React95.createElement("span", null, children)
+    /* @__PURE__ */ React103.createElement("span", null, children)
   );
 };
 
@@ -5881,16 +6058,16 @@ var import_editor_canvas5 = require("@elementor/editor-canvas");
 var import_editor_controls61 = require("@elementor/editor-controls");
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
-var React96 = __toESM(require("react"));
+var React104 = __toESM(require("react"));
 var import_editor_controls56 = require("@elementor/editor-controls");
 var import_editor_props19 = require("@elementor/editor-props");
-var import_icons28 = require("@elementor/icons");
+var import_icons30 = require("@elementor/icons");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-var import_react42 = require("react");
+var import_react46 = require("react");
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-var import_react41 = require("react");
+var import_react45 = require("react");
 var import_editor_controls55 = require("@elementor/editor-controls");
 
 // src/dynamics/sync/get-elementor-config.ts
@@ -5942,7 +6119,7 @@ var usePropDynamicTags = () => {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
   }
-  return (0, import_react41.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
+  return (0, import_react45.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
 };
 var getDynamicTagsByCategories = (categories) => {
   const { tags, groups } = getAtomicDynamicTags() || {};
@@ -5972,33 +6149,33 @@ var getDynamicTagsByCategories = (categories) => {
 // src/dynamics/hooks/use-dynamic-tag.ts
 var useDynamicTag = (tagName) => {
   const dynamicTags = usePropDynamicTags();
-  return (0, import_react42.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
+  return (0, import_react46.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
-var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React96.createElement(import_icons28.DatabaseIcon, { fontSize: "tiny" });
+var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React104.createElement(import_icons30.DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
   const context = (0, import_editor_controls56.useBoundProp)(import_editor_props19.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React96.createElement(import_editor_controls56.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React96.createElement(import_editor_controls56.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React96.createElement(Wrapper, { rawValue: value.value })));
+  return /* @__PURE__ */ React104.createElement(import_editor_controls56.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React104.createElement(import_editor_controls56.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React104.createElement(Wrapper, { rawValue: value.value })));
 };
 var Wrapper = ({ rawValue }) => {
   const { propType } = (0, import_editor_controls56.useBoundProp)();
   const imageOverlayPropType = propType.prop_types["background-image-overlay"];
-  return /* @__PURE__ */ React96.createElement(import_editor_controls56.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React96.createElement(import_editor_controls56.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React96.createElement(Content, { rawValue: rawValue.image })));
+  return /* @__PURE__ */ React104.createElement(import_editor_controls56.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React104.createElement(import_editor_controls56.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React104.createElement(Content, { rawValue: rawValue.image })));
 };
 var Content = ({ rawValue }) => {
   const src = rawValue.value.src;
   const dynamicTag = useDynamicTag(src.value.name || "");
-  return /* @__PURE__ */ React96.createElement(React96.Fragment, null, dynamicTag?.label);
+  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, dynamicTag?.label);
 };
 
 // src/dynamics/components/dynamic-selection-control.tsx
-var React100 = __toESM(require("react"));
+var React108 = __toESM(require("react"));
 var import_editor_controls59 = require("@elementor/editor-controls");
-var import_editor_ui8 = require("@elementor/editor-ui");
-var import_icons30 = require("@elementor/icons");
-var import_ui50 = require("@elementor/ui");
-var import_i18n68 = require("@wordpress/i18n");
+var import_editor_ui11 = require("@elementor/editor-ui");
+var import_icons32 = require("@elementor/icons");
+var import_ui57 = require("@elementor/ui");
+var import_i18n74 = require("@wordpress/i18n");
 
 // src/hooks/use-persist-dynamic-value.ts
 var import_session10 = require("@elementor/session");
@@ -6009,11 +6186,11 @@ var usePersistDynamicValue = (propKey) => {
 };
 
 // src/dynamics/dynamic-control.tsx
-var React98 = __toESM(require("react"));
+var React106 = __toESM(require("react"));
 var import_editor_controls57 = require("@elementor/editor-controls");
 
 // src/dynamics/components/dynamic-conditional-control.tsx
-var React97 = __toESM(require("react"));
+var React105 = __toESM(require("react"));
 var import_editor_props20 = require("@elementor/editor-props");
 var DynamicConditionalControl = ({
   children,
@@ -6021,7 +6198,7 @@ var DynamicConditionalControl = ({
   propsSchema,
   dynamicSettings
 }) => {
-  const defaults = React97.useMemo(() => {
+  const defaults = React105.useMemo(() => {
     if (!propsSchema) {
       return {};
     }
@@ -6031,7 +6208,7 @@ var DynamicConditionalControl = ({
       return result;
     }, {});
   }, [propsSchema]);
-  const convertedSettings = React97.useMemo(() => {
+  const convertedSettings = React105.useMemo(() => {
     if (!dynamicSettings) {
       return {};
     }
@@ -6050,14 +6227,14 @@ var DynamicConditionalControl = ({
       {}
     );
   }, [dynamicSettings]);
-  const effectiveSettings = React97.useMemo(() => {
+  const effectiveSettings = React105.useMemo(() => {
     return { ...defaults, ...convertedSettings };
   }, [defaults, convertedSettings]);
   if (!propType?.dependencies?.terms.length) {
-    return /* @__PURE__ */ React97.createElement(React97.Fragment, null, children);
+    return /* @__PURE__ */ React105.createElement(React105.Fragment, null, children);
   }
   const isHidden = !(0, import_editor_props20.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
-  return isHidden ? null : /* @__PURE__ */ React97.createElement(React97.Fragment, null, children);
+  return isHidden ? null : /* @__PURE__ */ React105.createElement(React105.Fragment, null, children);
 };
 
 // src/dynamics/dynamic-control.tsx
@@ -6081,7 +6258,7 @@ var DynamicControl = ({ bind, children }) => {
     });
   };
   const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
-  return /* @__PURE__ */ React98.createElement(import_editor_controls57.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React98.createElement(import_editor_controls57.PropKeyProvider, { bind }, /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React106.createElement(import_editor_controls57.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React106.createElement(import_editor_controls57.PropKeyProvider, { bind }, /* @__PURE__ */ React106.createElement(
     DynamicConditionalControl,
     {
       propType: dynamicPropType,
@@ -6093,18 +6270,18 @@ var DynamicControl = ({ bind, children }) => {
 };
 
 // src/dynamics/components/dynamic-selection.tsx
-var import_react43 = require("react");
-var React99 = __toESM(require("react"));
+var import_react47 = require("react");
+var React107 = __toESM(require("react"));
 var import_editor_controls58 = require("@elementor/editor-controls");
-var import_editor_ui7 = require("@elementor/editor-ui");
-var import_icons29 = require("@elementor/icons");
-var import_ui49 = require("@elementor/ui");
-var import_i18n67 = require("@wordpress/i18n");
+var import_editor_ui10 = require("@elementor/editor-ui");
+var import_icons31 = require("@elementor/icons");
+var import_ui56 = require("@elementor/ui");
+var import_i18n73 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
 var DynamicSelection = ({ close: closePopover }) => {
-  const [searchValue, setSearchValue] = (0, import_react43.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react47.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-  const theme = (0, import_ui49.useTheme)();
+  const theme = (0, import_ui56.useTheme)();
   const { value: anyValue } = (0, import_editor_controls58.useBoundProp)();
   const { bind, value: dynamicValue, setValue } = (0, import_editor_controls58.useBoundProp)(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
@@ -6134,34 +6311,34 @@ var DynamicSelection = ({ close: closePopover }) => {
       label: item.label
     }))
   ]);
-  return /* @__PURE__ */ React99.createElement(PopoverBody, { "aria-label": (0, import_i18n67.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React99.createElement(
-    import_editor_ui7.PopoverHeader,
+  return /* @__PURE__ */ React107.createElement(PopoverBody, { "aria-label": (0, import_i18n73.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React107.createElement(
+    import_editor_ui10.PopoverHeader,
     {
-      title: (0, import_i18n67.__)("Dynamic tags", "elementor"),
+      title: (0, import_i18n73.__)("Dynamic tags", "elementor"),
       onClose: closePopover,
-      icon: /* @__PURE__ */ React99.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE6 })
+      icon: /* @__PURE__ */ React107.createElement(import_icons31.DatabaseIcon, { fontSize: SIZE6 })
     }
-  ), hasNoDynamicTags ? /* @__PURE__ */ React99.createElement(NoDynamicTags, null) : /* @__PURE__ */ React99.createElement(import_react43.Fragment, null, /* @__PURE__ */ React99.createElement(
-    import_editor_ui7.SearchField,
+  ), hasNoDynamicTags ? /* @__PURE__ */ React107.createElement(NoDynamicTags, null) : /* @__PURE__ */ React107.createElement(import_react47.Fragment, null, /* @__PURE__ */ React107.createElement(
+    import_editor_ui10.SearchField,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n67.__)("Search dynamic tags\u2026", "elementor")
+      placeholder: (0, import_i18n73.__)("Search dynamic tags\u2026", "elementor")
     }
-  ), /* @__PURE__ */ React99.createElement(import_ui49.Divider, null), /* @__PURE__ */ React99.createElement(
-    import_editor_ui7.PopoverMenuList,
+  ), /* @__PURE__ */ React107.createElement(import_ui56.Divider, null), /* @__PURE__ */ React107.createElement(
+    import_editor_ui10.PopoverMenuList,
     {
       items: virtualizedItems,
       onSelect: handleSetDynamicTag,
       onClose: closePopover,
       selectedValue: dynamicValue?.name,
       itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
-      noResultsComponent: /* @__PURE__ */ React99.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
+      noResultsComponent: /* @__PURE__ */ React107.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
     }
   )));
 };
-var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React99.createElement(
-  import_ui49.Stack,
+var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React107.createElement(
+  import_ui56.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -6171,12 +6348,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React99.createElem
     color: "text.secondary",
     sx: { pb: 3.5 }
   },
-  /* @__PURE__ */ React99.createElement(import_icons29.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React99.createElement(import_ui49.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n67.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React99.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React99.createElement(import_ui49.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n67.__)("Try something else.", "elementor"), /* @__PURE__ */ React99.createElement(import_ui49.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n67.__)("Clear & try again", "elementor")))
+  /* @__PURE__ */ React107.createElement(import_icons31.DatabaseIcon, { fontSize: "large" }),
+  /* @__PURE__ */ React107.createElement(import_ui56.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n73.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React107.createElement("br", null), "\u201C", searchValue, "\u201D."),
+  /* @__PURE__ */ React107.createElement(import_ui56.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n73.__)("Try something else.", "elementor"), /* @__PURE__ */ React107.createElement(import_ui56.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n73.__)("Clear & try again", "elementor")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React99.createElement(React99.Fragment, null, /* @__PURE__ */ React99.createElement(import_ui49.Divider, null), /* @__PURE__ */ React99.createElement(
-  import_ui49.Stack,
+var NoDynamicTags = () => /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(import_ui56.Divider, null), /* @__PURE__ */ React107.createElement(
+  import_ui56.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -6186,9 +6363,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React99.createElement(React99.Fragment
     color: "text.secondary",
     sx: { pb: 3.5 }
   },
-  /* @__PURE__ */ React99.createElement(import_icons29.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React99.createElement(import_ui49.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n67.__)("Streamline your workflow with dynamic tags", "elementor")),
-  /* @__PURE__ */ React99.createElement(import_ui49.Typography, { align: "center", variant: "caption" }, (0, import_i18n67.__)("You'll need Elementor Pro to use this feature.", "elementor"))
+  /* @__PURE__ */ React107.createElement(import_icons31.DatabaseIcon, { fontSize: "large" }),
+  /* @__PURE__ */ React107.createElement(import_ui56.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n73.__)("Streamline your workflow with dynamic tags", "elementor")),
+  /* @__PURE__ */ React107.createElement(import_ui56.Typography, { align: "center", variant: "caption" }, (0, import_i18n73.__)("You'll need Elementor Pro to use this feature.", "elementor"))
 ));
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
@@ -6213,7 +6390,7 @@ var DynamicSelectionControl = () => {
   const { setValue: setAnyValue } = (0, import_editor_controls59.useBoundProp)();
   const { bind, value } = (0, import_editor_controls59.useBoundProp)(dynamicPropTypeUtil);
   const [propValueFromHistory] = usePersistDynamicValue(bind);
-  const selectionPopoverState = (0, import_ui50.usePopupState)({ variant: "popover" });
+  const selectionPopoverState = (0, import_ui57.usePopupState)({ variant: "popover" });
   const { name: tagName = "" } = value;
   const dynamicTag = useDynamicTag(tagName);
   const removeDynamicTag = () => {
@@ -6222,26 +6399,26 @@ var DynamicSelectionControl = () => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React100.createElement(import_ui50.Box, null, /* @__PURE__ */ React100.createElement(
-    import_ui50.UnstableTag,
+  return /* @__PURE__ */ React108.createElement(import_ui57.Box, null, /* @__PURE__ */ React108.createElement(
+    import_ui57.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
       label: dynamicTag.label,
-      startIcon: /* @__PURE__ */ React100.createElement(import_icons30.DatabaseIcon, { fontSize: SIZE7 }),
-      ...(0, import_ui50.bindTrigger)(selectionPopoverState),
-      actions: /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React100.createElement(
-        import_ui50.IconButton,
+      startIcon: /* @__PURE__ */ React108.createElement(import_icons32.DatabaseIcon, { fontSize: SIZE7 }),
+      ...(0, import_ui57.bindTrigger)(selectionPopoverState),
+      actions: /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React108.createElement(
+        import_ui57.IconButton,
         {
           size: SIZE7,
           onClick: removeDynamicTag,
-          "aria-label": (0, import_i18n68.__)("Remove dynamic value", "elementor")
+          "aria-label": (0, import_i18n74.__)("Remove dynamic value", "elementor")
         },
-        /* @__PURE__ */ React100.createElement(import_icons30.XIcon, { fontSize: SIZE7 })
+        /* @__PURE__ */ React108.createElement(import_icons32.XIcon, { fontSize: SIZE7 })
       ))
     }
-  ), /* @__PURE__ */ React100.createElement(
-    import_ui50.Popover,
+  ), /* @__PURE__ */ React108.createElement(
+    import_ui57.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -6250,27 +6427,27 @@ var DynamicSelectionControl = () => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui50.bindPopover)(selectionPopoverState)
+      ...(0, import_ui57.bindPopover)(selectionPopoverState)
     },
-    /* @__PURE__ */ React100.createElement(PopoverBody, { "aria-label": (0, import_i18n68.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React100.createElement(DynamicSelection, { close: selectionPopoverState.close }))
+    /* @__PURE__ */ React108.createElement(PopoverBody, { "aria-label": (0, import_i18n74.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React108.createElement(DynamicSelection, { close: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
-  const popupState = (0, import_ui50.usePopupState)({ variant: "popover" });
+  const popupState = (0, import_ui57.usePopupState)({ variant: "popover" });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {
     return null;
   }
-  return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
-    import_ui50.IconButton,
+  return /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(
+    import_ui57.IconButton,
     {
       size: SIZE7,
-      ...(0, import_ui50.bindTrigger)(popupState),
-      "aria-label": (0, import_i18n68.__)("Dynamic settings", "elementor")
+      ...(0, import_ui57.bindTrigger)(popupState),
+      "aria-label": (0, import_i18n74.__)("Dynamic settings", "elementor")
     },
-    /* @__PURE__ */ React100.createElement(import_icons30.SettingsIcon, { fontSize: SIZE7 })
-  ), /* @__PURE__ */ React100.createElement(
-    import_ui50.Popover,
+    /* @__PURE__ */ React108.createElement(import_icons32.SettingsIcon, { fontSize: SIZE7 })
+  ), /* @__PURE__ */ React108.createElement(
+    import_ui57.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -6279,45 +6456,45 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui50.bindPopover)(popupState)
+      ...(0, import_ui57.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React100.createElement(PopoverBody, { "aria-label": (0, import_i18n68.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React100.createElement(
-      import_editor_ui8.PopoverHeader,
+    /* @__PURE__ */ React108.createElement(PopoverBody, { "aria-label": (0, import_i18n74.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React108.createElement(
+      import_editor_ui11.PopoverHeader,
       {
         title: dynamicTag.label,
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React100.createElement(import_icons30.DatabaseIcon, { fontSize: SIZE7 })
+        icon: /* @__PURE__ */ React108.createElement(import_icons32.DatabaseIcon, { fontSize: SIZE7 })
       }
-    ), /* @__PURE__ */ React100.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
+    ), /* @__PURE__ */ React108.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
   ));
 };
 var DynamicSettings = ({ controls, tagName }) => {
   const tabs = controls.filter(({ type }) => type === "section");
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui50.useTabs)(0);
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui57.useTabs)(0);
   if (!tabs.length) {
     return null;
   }
   if (tagsWithoutTabs.includes(tagName)) {
     const singleTab = tabs[0];
-    return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(import_ui50.Divider, null), /* @__PURE__ */ React100.createElement(ControlsItemsStack, { items: singleTab.value.items }));
+    return /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(import_ui57.Divider, null), /* @__PURE__ */ React108.createElement(ControlsItemsStack, { items: singleTab.value.items }));
   }
-  return /* @__PURE__ */ React100.createElement(React100.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React100.createElement(import_ui50.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React100.createElement(
-    import_ui50.Tab,
+  return /* @__PURE__ */ React108.createElement(React108.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React108.createElement(import_ui57.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React108.createElement(
+    import_ui57.Tab,
     {
       key: index,
       label: value.label,
       sx: { px: 1, py: 0.5 },
       ...getTabProps(index)
     }
-  ))), /* @__PURE__ */ React100.createElement(import_ui50.Divider, null), tabs.map(({ value }, index) => {
-    return /* @__PURE__ */ React100.createElement(
-      import_ui50.TabPanel,
+  ))), /* @__PURE__ */ React108.createElement(import_ui57.Divider, null), tabs.map(({ value }, index) => {
+    return /* @__PURE__ */ React108.createElement(
+      import_ui57.TabPanel,
       {
         key: index,
         sx: { flexGrow: 1, py: 0, overflowY: "auto" },
         ...getTabPanelProps(index)
       },
-      /* @__PURE__ */ React100.createElement(ControlsItemsStack, { items: value.items })
+      /* @__PURE__ */ React108.createElement(ControlsItemsStack, { items: value.items })
     );
   }));
 };
@@ -6359,11 +6536,11 @@ var Control3 = ({ control }) => {
     display: "grid",
     gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
   } : {};
-  return /* @__PURE__ */ React100.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React100.createElement(import_ui50.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React100.createElement(import_ui50.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(import_editor_controls59.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React100.createElement(import_ui50.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(Control, { type: control.type, props: controlProps }))));
+  return /* @__PURE__ */ React108.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React108.createElement(import_ui57.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React108.createElement(import_ui57.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(import_editor_controls59.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React108.createElement(import_ui57.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(Control, { type: control.type, props: controlProps }))));
 };
 function ControlsItemsStack({ items: items3 }) {
-  return /* @__PURE__ */ React100.createElement(import_ui50.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
-    (item) => item.type === "control" ? /* @__PURE__ */ React100.createElement(Control3, { key: item.value.bind, control: item.value }) : null
+  return /* @__PURE__ */ React108.createElement(import_ui57.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
+    (item) => item.type === "control" ? /* @__PURE__ */ React108.createElement(Control3, { key: item.value.bind, control: item.value }) : null
   ));
 }
 
@@ -6417,18 +6594,18 @@ function getDynamicValue(name, settings) {
 }
 
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
-var React101 = __toESM(require("react"));
+var React109 = __toESM(require("react"));
 var import_editor_controls60 = require("@elementor/editor-controls");
-var import_icons31 = require("@elementor/icons");
-var import_i18n69 = require("@wordpress/i18n");
+var import_icons33 = require("@elementor/icons");
+var import_i18n75 = require("@wordpress/i18n");
 var usePropDynamicAction = () => {
   const { propType } = (0, import_editor_controls60.useBoundProp)();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
-    icon: import_icons31.DatabaseIcon,
-    title: (0, import_i18n69.__)("Dynamic tags", "elementor"),
-    content: ({ close }) => /* @__PURE__ */ React101.createElement(DynamicSelection, { close })
+    icon: import_icons33.DatabaseIcon,
+    title: (0, import_i18n75.__)("Dynamic tags", "elementor"),
+    content: ({ close }) => /* @__PURE__ */ React109.createElement(DynamicSelection, { close })
   };
 };
 
@@ -6459,8 +6636,8 @@ var init = () => {
 
 // src/reset-style-props.tsx
 var import_editor_controls62 = require("@elementor/editor-controls");
-var import_icons32 = require("@elementor/icons");
-var import_i18n70 = require("@wordpress/i18n");
+var import_icons34 = require("@elementor/icons");
+var import_i18n76 = require("@wordpress/i18n");
 var { registerAction } = controlActionsMenu;
 var REPEATERS_SUPPORTED_FOR_RESET = ["background"];
 function initResetStyleProps() {
@@ -6478,8 +6655,8 @@ function useResetStyleValueProps() {
   const shouldShowResetForRepeater = !isRequired && (!isInRepeater || isRepeaterTypeSupported);
   return {
     visible: isStyle && value !== null && value !== void 0 && shouldShowResetForRepeater,
-    title: (0, import_i18n70.__)("Clear", "elementor"),
-    icon: import_icons32.BrushBigIcon,
+    title: (0, import_i18n76.__)("Clear", "elementor"),
+    icon: import_icons34.BrushBigIcon,
     onClick: () => resetValue()
   };
 }
@@ -6502,25 +6679,25 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
 ]);
 
 // src/styles-inheritance/transformers/array-transformer.tsx
-var React102 = __toESM(require("react"));
+var React110 = __toESM(require("react"));
 var import_editor_canvas6 = require("@elementor/editor-canvas");
-var import_ui51 = require("@elementor/ui");
+var import_ui58 = require("@elementor/ui");
 var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) => {
   if (!values || values.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React102.createElement(import_ui51.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React102.createElement(import_ui51.Stack, { key: index }, item)));
+  return /* @__PURE__ */ React110.createElement(import_ui58.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React110.createElement(import_ui58.Stack, { key: index }, item)));
 });
 
 // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
-var React103 = __toESM(require("react"));
+var React111 = __toESM(require("react"));
 var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_ui52 = require("@elementor/ui");
-var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React103.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React103.createElement(ItemLabelColor, { value })));
+var import_ui59 = require("@elementor/ui");
+var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React111.createElement(import_ui59.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React111.createElement(ItemLabelColor, { value })));
 var ItemLabelColor = ({ value: { color } }) => {
-  return /* @__PURE__ */ React103.createElement("span", null, color);
+  return /* @__PURE__ */ React111.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = (0, import_ui52.styled)(import_ui52.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui59.styled)(import_ui59.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6529,20 +6706,20 @@ var StyledUnstableColorIndicator = (0, import_ui52.styled)(import_ui52.UnstableC
 }));
 
 // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
-var React104 = __toESM(require("react"));
+var React112 = __toESM(require("react"));
 var import_editor_canvas8 = require("@elementor/editor-canvas");
-var import_ui53 = require("@elementor/ui");
-var import_i18n71 = require("@wordpress/i18n");
-var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React104.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React104.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React104.createElement(ItemLabelGradient, { value })));
+var import_ui60 = require("@elementor/ui");
+var import_i18n77 = require("@wordpress/i18n");
+var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React112.createElement(import_ui60.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React112.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React112.createElement(ItemLabelGradient, { value })));
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React104.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React112.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.type === "linear") {
-    return /* @__PURE__ */ React104.createElement("span", null, (0, import_i18n71.__)("Linear gradient", "elementor"));
+    return /* @__PURE__ */ React112.createElement("span", null, (0, import_i18n77.__)("Linear gradient", "elementor"));
   }
-  return /* @__PURE__ */ React104.createElement("span", null, (0, import_i18n71.__)("Radial gradient", "elementor"));
+  return /* @__PURE__ */ React112.createElement("span", null, (0, import_i18n77.__)("Radial gradient", "elementor"));
 };
 var getGradientValue = (gradient) => {
   const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
@@ -6553,16 +6730,16 @@ var getGradientValue = (gradient) => {
 };
 
 // src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
-var React105 = __toESM(require("react"));
+var React113 = __toESM(require("react"));
 var import_editor_canvas9 = require("@elementor/editor-canvas");
-var import_editor_ui9 = require("@elementor/editor-ui");
-var import_ui54 = require("@elementor/ui");
+var import_editor_ui12 = require("@elementor/editor-ui");
+var import_ui61 = require("@elementor/ui");
 var import_wp_media = require("@elementor/wp-media");
-var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React105.createElement(import_ui54.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React105.createElement(ItemIconImage, { value }), /* @__PURE__ */ React105.createElement(ItemLabelImage, { value })));
+var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React113.createElement(import_ui61.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React113.createElement(ItemIconImage, { value }), /* @__PURE__ */ React113.createElement(ItemLabelImage, { value })));
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React105.createElement(
-    import_ui54.CardMedia,
+  return /* @__PURE__ */ React113.createElement(
+    import_ui61.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -6577,7 +6754,7 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React105.createElement(import_editor_ui9.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React105.createElement("span", null, imageTitle));
+  return /* @__PURE__ */ React113.createElement(import_editor_ui12.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React113.createElement("span", null, imageTitle));
 };
 var useImage = (image) => {
   let imageTitle, imageUrl = null;
@@ -6602,9 +6779,9 @@ var getFileExtensionFromFilename = (filename) => {
 };
 
 // src/styles-inheritance/transformers/box-shadow-transformer.tsx
-var React106 = __toESM(require("react"));
+var React114 = __toESM(require("react"));
 var import_editor_canvas10 = require("@elementor/editor-canvas");
-var import_ui55 = require("@elementor/ui");
+var import_ui62 = require("@elementor/ui");
 var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
   if (!value) {
     return null;
@@ -6613,20 +6790,20 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
   const colorValue = color || "#000000";
   const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
   const positionValue = position || "outset";
-  return /* @__PURE__ */ React106.createElement(import_ui55.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React106.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
+  return /* @__PURE__ */ React114.createElement(import_ui62.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React114.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
 });
 
 // src/styles-inheritance/transformers/color-transformer.tsx
-var React107 = __toESM(require("react"));
+var React115 = __toESM(require("react"));
 var import_editor_canvas11 = require("@elementor/editor-canvas");
-var import_ui56 = require("@elementor/ui");
+var import_ui63 = require("@elementor/ui");
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
   }
   return CSS.supports("color", value.trim());
 }
-var StyledColorIndicator = (0, import_ui56.styled)(import_ui56.UnstableColorIndicator)(({ theme }) => ({
+var StyledColorIndicator = (0, import_ui63.styled)(import_ui63.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6637,13 +6814,13 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
   if (!isValidCSSColor(value)) {
     return value;
   }
-  return /* @__PURE__ */ React107.createElement(import_ui56.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React107.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React107.createElement("span", null, value));
+  return /* @__PURE__ */ React115.createElement(import_ui63.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React115.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React115.createElement("span", null, value));
 });
 
 // src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
-var React108 = __toESM(require("react"));
+var React116 = __toESM(require("react"));
 var import_editor_canvas12 = require("@elementor/editor-canvas");
-var import_ui57 = require("@elementor/ui");
+var import_ui64 = require("@elementor/ui");
 var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") => {
   return (0, import_editor_canvas12.createTransformer)((value, options12) => {
     const stringResult = originalTransformer(value, options12);
@@ -6654,7 +6831,7 @@ var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") =>
     if (parts.length <= 1) {
       return stringResult;
     }
-    return /* @__PURE__ */ React108.createElement(import_ui57.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React108.createElement(import_ui57.Stack, { key: index }, part.trim())));
+    return /* @__PURE__ */ React116.createElement(import_ui64.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React116.createElement(import_ui64.Stack, { key: index }, part.trim())));
   });
 };