@elementor/editor-editing-panel 3.33.0-216 → 3.33.0-217

package/dist/index.js

@@ -4775,22 +4775,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_react39 = require("react");
+var import_react40 = 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 React91 = __toESM(require("react"));
+var React94 = __toESM(require("react"));
 var import_editor_controls53 = require("@elementor/editor-controls");
-var import_editor_elements13 = require("@elementor/editor-elements");
+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_icons25 = require("@elementor/icons");
-var import_session8 = require("@elementor/session");
-var import_ui46 = require("@elementor/ui");
-var import_i18n63 = require("@wordpress/i18n");
+var import_icons26 = require("@elementor/icons");
+var import_session9 = require("@elementor/session");
+var import_ui47 = require("@elementor/ui");
+var import_i18n64 = require("@wordpress/i18n");
 
 // src/components/editing-panel-error-fallback.tsx
 var React84 = __toESM(require("react"));
@@ -4800,20 +4800,260 @@ function EditorPanelErrorFallback() {
 }
 
 // src/components/editing-panel-tabs.tsx
-var import_react38 = require("react");
-var React90 = __toESM(require("react"));
+var import_react39 = require("react");
+var React93 = __toESM(require("react"));
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_ui45 = require("@elementor/ui");
-var import_i18n62 = require("@wordpress/i18n");
+var import_ui46 = require("@elementor/ui");
+var import_i18n63 = require("@wordpress/i18n");
 
 // src/components/interactions-tab.tsx
+var React88 = __toESM(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 import_editor_elements12 = require("@elementor/editor-elements");
+var InteractionsContext = (0, import_react37.createContext)(null);
+var InteractionsProvider = ({ children }) => {
+  const { element } = useElement();
+  const interactions = (0, import_editor_elements12.useElementInteractions)(element.id);
+  const setInteractions = (value) => {
+    (0, import_editor_elements12.updateElementInteractions)({
+      elementId: element.id,
+      interactions: value
+    });
+  };
+  const contextValue = {
+    interactions: interactions || "",
+    setInteractions
+  };
+  return /* @__PURE__ */ React85.createElement(InteractionsContext.Provider, { value: contextValue }, children);
+};
+var useInteractionsContext = () => {
+  const context = (0, import_react37.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"));
 var import_icons24 = require("@elementor/icons");
 var import_ui42 = require("@elementor/ui");
 var import_i18n60 = require("@wordpress/i18n");
-var InteractionsTab = () => {
-  return /* @__PURE__ */ React85.createElement(
-    import_ui42.Stack,
+var ANIMATION_OPTIONS = [
+  { value: "", label: "Select animation..." },
+  { value: "pageload-fade-in-left-1000-1000", label: "Page Load - Fade In Left" },
+  { value: "scrollintoview-fade-in-left-1000-1000", label: "Scroll Into View - Fade In Left" },
+  { value: "scrolloutofview-fade-out-right-1000-1000", label: "Scroll Out of View - Fade Out Right" },
+  { value: "pageload-slide-in-up-1000-1000", label: "Page Load - Slide In Up" },
+  { value: "scrollintoview-slide-in-up-1000-1000", label: "Scroll Into View - Slide In Up" },
+  { value: "scrolloutofview-slide-out-down-1000-1000", label: "Scroll Out of View - Slide Out Down" },
+  { value: "pageload-scale-in-1000-1000", label: "Page Load - Scale In" },
+  { value: "scrollintoview-scale-in-1000-1000", label: "Scroll Into View - Scale In" },
+  { value: "scrolloutofview-scale-out-1000-1000", label: "Scroll Out of View - Scale Out" }
+];
+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 [];
+    }
+  }, [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,
+    {
+      size: "tiny",
+      onClick: handleAddInteraction,
+      "aria-label": (0, import_i18n60.__)("Add interaction", "elementor")
+    },
+    /* @__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,
+    {
+      key: index,
+      index,
+      animationId,
+      onChange: handleChangeInteraction,
+      onRemove: handleRemoveInteraction,
+      onDuplicate: handleDuplicateInteraction,
+      canRemove: currentAnimationIds.length > 1
+    }
+  ))));
+};
+var InteractionItem = ({
+  index,
+  animationId,
+  onChange,
+  onRemove,
+  onDuplicate,
+  canRemove
+}) => {
+  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,
+    {
+      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" })
+      )))
+    }
+  ), /* @__PURE__ */ React86.createElement(
+    import_ui42.Popover,
+    {
+      disablePortal: true,
+      slotProps: {
+        paper: {
+          sx: {
+            mt: 0.5,
+            minWidth: 200,
+            maxHeight: 300,
+            overflow: "auto"
+          }
+        }
+      },
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      ...(0, import_ui42.bindPopover)(popoverState)
+    },
+    /* @__PURE__ */ React86.createElement(import_ui42.Box, { sx: { p: 1 } }, ANIMATION_OPTIONS.map((option) => /* @__PURE__ */ React86.createElement(
+      import_ui42.MenuItem,
+      {
+        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"
+          }
+        }
+      )
+    )))
+  ));
+};
+
+// 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",
@@ -4822,24 +5062,42 @@ var InteractionsTab = () => {
       sx: { p: 2.5, pt: 8, pb: 5.5 },
       gap: 1.5
     },
-    /* @__PURE__ */ React85.createElement(import_icons24.SwipeIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React85.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Animate elements with Interactions", "elementor")),
-    /* @__PURE__ */ React85.createElement(import_ui42.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n60.__)(
+    /* @__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__ */ React85.createElement(import_ui42.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 } }, (0, import_i18n60.__)("Create an interaction", "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;
+    }
+    try {
+      const parsed = JSON.parse(interactions);
+      return Array.isArray(parsed) && parsed.length > 0;
+    } catch {
+      return false;
+    }
+  })();
+  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) }));
+};
 
 // src/components/settings-tab.tsx
-var React89 = __toESM(require("react"));
+var React92 = __toESM(require("react"));
 var import_editor_controls52 = require("@elementor/editor-controls");
-var import_session7 = require("@elementor/session");
-var import_ui44 = require("@elementor/ui");
+var import_session8 = require("@elementor/session");
+var import_ui45 = require("@elementor/ui");
 
 // src/controls-registry/control.tsx
-var React86 = __toESM(require("react"));
+var React89 = __toESM(require("react"));
 var Control = ({ props, type }) => {
   const ControlByType = controlsRegistry.get(type);
   const { element } = useElement();
@@ -4848,19 +5106,19 @@ var Control = ({ props, type }) => {
       context: { controlType: type }
     });
   }
-  return /* @__PURE__ */ React86.createElement(ControlByType, { ...props, context: { elementId: element.id } });
+  return /* @__PURE__ */ React89.createElement(ControlByType, { ...props, context: { elementId: element.id } });
 };
 
 // src/controls-registry/control-type-container.tsx
-var React87 = __toESM(require("react"));
-var import_ui43 = require("@elementor/ui");
+var React90 = __toESM(require("react"));
+var import_ui44 = require("@elementor/ui");
 var ControlTypeContainer = ({ children, layout }) => {
   if (layout === "custom") {
     return children;
   }
-  return /* @__PURE__ */ React87.createElement(StyledContainer, { layout }, children);
+  return /* @__PURE__ */ React90.createElement(StyledContainer, { layout }, children);
 };
-var StyledContainer = (0, import_ui43.styled)(import_ui43.Box, {
+var StyledContainer = (0, import_ui44.styled)(import_ui44.Box, {
   shouldForwardProp: (prop) => !["layout"].includes(prop)
 })(({ layout, theme }) => ({
   display: "grid",
@@ -4886,18 +5144,18 @@ var getStyleByLayout = (layout) => {
 };
 
 // src/controls-registry/settings-field.tsx
-var React88 = __toESM(require("react"));
-var import_react37 = require("react");
+var React91 = __toESM(require("react"));
+var import_react38 = require("react");
 var import_editor_controls51 = require("@elementor/editor-controls");
 var import_editor_documents2 = require("@elementor/editor-documents");
-var import_editor_elements12 = require("@elementor/editor-elements");
+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_i18n61 = require("@wordpress/i18n");
+var import_i18n62 = require("@wordpress/i18n");
 
 // src/utils/prop-dependency-utils.ts
 var import_editor_props14 = require("@elementor/editor-props");
-var import_session6 = require("@elementor/session");
+var import_session7 = require("@elementor/session");
 function extractOrderedDependencies(bind, propsSchema, elementValues, dependenciesPerTargetMapping) {
   const prop = getPropType(propsSchema, elementValues, bind.split("."));
   if (!prop) {
@@ -5043,17 +5301,17 @@ function savePreviousValueToStorage({ path, elementId, value }) {
     return;
   }
   const key = `${prefix}:${path}`;
-  (0, import_session6.setSessionStorageItem)(key, value);
+  (0, import_session7.setSessionStorageItem)(key, value);
 }
 function retrievePreviousValueFromStorage({ path, elementId }) {
   const prefix = `elementor/${elementId}`;
   const key = `${prefix}:${path}`;
-  return (0, import_session6.getSessionStorageItem)(key) ?? null;
+  return (0, import_session7.getSessionStorageItem)(key) ?? null;
 }
 function removePreviousValueFromStorage({ path, elementId }) {
   const prefix = `elementor/${elementId}`;
   const key = `${prefix}:${path}`;
-  (0, import_session6.removeSessionStorageItem)(key);
+  (0, import_session7.removeSessionStorageItem)(key);
 }
 
 // src/controls-registry/settings-field.tsx
@@ -5063,7 +5321,7 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
     element: { id: elementId },
     elementType: { propsSchema, dependenciesPerTargetMapping = {} }
   } = useElement();
-  const elementSettingValues = (0, import_editor_elements12.useElementSettings)(elementId, Object.keys(propsSchema));
+  const elementSettingValues = (0, import_editor_elements14.useElementSettings)(elementId, Object.keys(propsSchema));
   const value = { [bind]: elementSettingValues?.[bind] ?? null };
   const propType = createTopLevelObjectType({ schema: propsSchema });
   const undoableUpdateElementProp = useUndoableUpdateElementProp({
@@ -5081,29 +5339,29 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
     undoableUpdateElementProp(settings);
   };
   const isDisabled = (prop) => !(0, import_editor_props15.isDependencyMet)(prop?.dependencies, elementSettingValues).isMet;
-  return /* @__PURE__ */ React88.createElement(import_editor_controls51.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React88.createElement(import_editor_controls51.PropKeyProvider, { bind }, children));
+  return /* @__PURE__ */ React91.createElement(import_editor_controls51.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React91.createElement(import_editor_controls51.PropKeyProvider, { bind }, children));
 };
 function useUndoableUpdateElementProp({
   elementId,
   propDisplayName
 }) {
-  return (0, import_react37.useMemo)(() => {
+  return (0, import_react38.useMemo)(() => {
     return (0, import_editor_v1_adapters5.undoable)(
       {
         do: (newSettings) => {
-          const prevPropValue = (0, import_editor_elements12.getElementSettings)(elementId, Object.keys(newSettings));
-          (0, import_editor_elements12.updateElementSettings)({ id: elementId, props: newSettings, withHistory: false });
+          const prevPropValue = (0, import_editor_elements14.getElementSettings)(elementId, Object.keys(newSettings));
+          (0, import_editor_elements14.updateElementSettings)({ id: elementId, props: newSettings, withHistory: false });
           (0, import_editor_documents2.setDocumentModifiedStatus)(true);
           return prevPropValue;
         },
         undo: ({}, prevProps) => {
-          (0, import_editor_elements12.updateElementSettings)({ id: elementId, props: prevProps, withHistory: false });
+          (0, import_editor_elements14.updateElementSettings)({ id: elementId, props: prevProps, withHistory: false });
         }
       },
       {
-        title: (0, import_editor_elements12.getElementLabel)(elementId),
+        title: (0, import_editor_elements14.getElementLabel)(elementId),
         // translators: %s is the name of the property that was edited.
-        subtitle: (0, import_i18n61.__)("%s edited", "elementor").replace("%s", propDisplayName),
+        subtitle: (0, import_i18n62.__)("%s edited", "elementor").replace("%s", propDisplayName),
         debounce: { wait: HISTORY_DEBOUNCE_WAIT2 }
       }
     );
@@ -5115,13 +5373,13 @@ var SettingsTab = () => {
   const { elementType, element } = useElement();
   const settingsDefault = useDefaultPanelSettings();
   const isDefaultExpanded = (sectionId) => settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId);
-  return /* @__PURE__ */ React89.createElement(import_session7.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React89.createElement(SectionsList, null, elementType.controls.map((control, index) => {
+  return /* @__PURE__ */ React92.createElement(import_session8.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React92.createElement(SectionsList, null, elementType.controls.map((control, index) => {
     if (isControl(control)) {
-      return /* @__PURE__ */ React89.createElement(Control2, { key: getKey(control, element), control });
+      return /* @__PURE__ */ React92.createElement(Control2, { key: getKey(control, element), control });
     }
     const { type, value } = control;
     if (type === "section") {
-      return /* @__PURE__ */ React89.createElement(
+      return /* @__PURE__ */ React92.createElement(
         Section,
         {
           title: value.label,
@@ -5130,7 +5388,7 @@ var SettingsTab = () => {
         },
         value.items?.map((item) => {
           if (isControl(item)) {
-            return /* @__PURE__ */ React89.createElement(Control2, { key: getKey(item, element), control: item });
+            return /* @__PURE__ */ React92.createElement(Control2, { key: getKey(item, element), control: item });
           }
           return null;
         })
@@ -5149,16 +5407,16 @@ var Control2 = ({ control: { value, type } }) => {
     controlProps.label = value.label;
   }
   if (type === "element-control") {
-    return /* @__PURE__ */ React89.createElement(ControlLayout, { control: value, layout, controlProps });
+    return /* @__PURE__ */ React92.createElement(ControlLayout, { control: value, layout, controlProps });
   }
-  return /* @__PURE__ */ React89.createElement(SettingsField, { bind: value.bind, propDisplayName: value.label || value.bind }, /* @__PURE__ */ React89.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 }));
 };
 var ControlLayout = ({
   control,
   layout,
   controlProps
 }) => {
-  return /* @__PURE__ */ React89.createElement(React89.Fragment, null, control.meta?.topDivider && /* @__PURE__ */ React89.createElement(import_ui44.Divider, null), /* @__PURE__ */ React89.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ React89.createElement(import_editor_controls52.ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React89.createElement(Control, { type: control.type, props: 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 })));
 };
 function populateChildControlProps(props) {
   if (props.childControlType) {
@@ -5191,7 +5449,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__ */ React90.createElement(import_react38.Fragment, { key: element.id }, /* @__PURE__ */ React90.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React93.createElement(import_react39.Fragment, { key: element.id }, /* @__PURE__ */ React93.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
@@ -5199,9 +5457,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_ui45.useTabs)(currentTab);
-  return /* @__PURE__ */ React90.createElement(ScrollProvider, null, /* @__PURE__ */ React90.createElement(import_ui45.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React90.createElement(import_ui45.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React90.createElement(
-    import_ui45.Tabs,
+  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,
     {
       variant: "fullWidth",
       size: "small",
@@ -5212,23 +5470,23 @@ var PanelTabContent = () => {
         setCurrentTab(newValue);
       }
     },
-    /* @__PURE__ */ React90.createElement(import_ui45.Tab, { label: (0, import_i18n62.__)("General", "elementor"), ...getTabProps("settings") }),
-    /* @__PURE__ */ React90.createElement(import_ui45.Tab, { label: (0, import_i18n62.__)("Style", "elementor"), ...getTabProps("style") }),
-    isInteractionsActive && /* @__PURE__ */ React90.createElement(import_ui45.Tab, { label: (0, import_i18n62.__)("Interactions", "elementor"), ...getTabProps("interactions") })
-  ), /* @__PURE__ */ React90.createElement(import_ui45.Divider, null)), /* @__PURE__ */ React90.createElement(import_ui45.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React90.createElement(SettingsTab, null)), /* @__PURE__ */ React90.createElement(import_ui45.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React90.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React90.createElement(import_ui45.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React90.createElement(InteractionsTab, null))));
+    /* @__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))));
 };
 
 // src/components/editing-panel.tsx
 var { useMenuItems } = controlActionsMenu;
 var EditingPanel = () => {
-  const { element, elementType } = (0, import_editor_elements13.useSelectedElement)();
+  const { element, elementType } = (0, import_editor_elements15.useSelectedElement)();
   const controlReplacements = getControlReplacements();
   const menuItems = useMenuItems().default;
   if (!element || !elementType) {
     return null;
   }
-  const panelTitle = (0, import_i18n63.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React91.createElement(import_ui46.ErrorBoundary, { fallback: /* @__PURE__ */ React91.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React91.createElement(import_session8.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React91.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React91.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React91.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React91.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React91.createElement(import_icons25.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React91.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React91.createElement(import_editor_controls53.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React91.createElement(import_editor_controls53.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React91.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React91.createElement(EditingPanelTabs, 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)))))))));
 };
 
 // src/panel.ts
@@ -5238,10 +5496,10 @@ var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__cre
 });
 
 // src/sync/is-atomic-widget-selected.ts
-var import_editor_elements14 = require("@elementor/editor-elements");
+var import_editor_elements16 = require("@elementor/editor-elements");
 var isAtomicWidgetSelected = () => {
-  const selectedElements = (0, import_editor_elements14.getSelectedElements)();
-  const widgetCache = (0, import_editor_elements14.getWidgetsCache)();
+  const selectedElements = (0, import_editor_elements16.getSelectedElements)();
+  const widgetCache = (0, import_editor_elements16.getWidgetsCache)();
   if (selectedElements.length !== 1) {
     return false;
   }
@@ -5251,7 +5509,7 @@ var isAtomicWidgetSelected = () => {
 // src/hooks/use-open-editor-panel.ts
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandStartEvent)("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
@@ -5267,18 +5525,18 @@ var EditingPanelHooks = () => {
 };
 
 // src/controls-registry/element-controls/tabs-control/tabs-control.tsx
-var React92 = __toESM(require("react"));
+var React95 = __toESM(require("react"));
 var import_editor_controls54 = require("@elementor/editor-controls");
-var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_props17 = require("@elementor/editor-props");
-var import_icons26 = require("@elementor/icons");
-var import_ui47 = require("@elementor/ui");
-var import_i18n65 = require("@wordpress/i18n");
+var import_icons27 = require("@elementor/icons");
+var import_ui48 = require("@elementor/ui");
+var import_i18n66 = require("@wordpress/i18n");
 
 // src/controls-registry/element-controls/get-element-by-type.ts
-var import_editor_elements15 = require("@elementor/editor-elements");
+var import_editor_elements17 = require("@elementor/editor-elements");
 var getElementByType = (elementId, type) => {
-  const currentElement = (0, import_editor_elements15.getContainer)(elementId);
+  const currentElement = (0, import_editor_elements17.getContainer)(elementId);
   if (!currentElement) {
     throw new Error(`Current element not found, elementId: ${elementId}`);
   }
@@ -5293,33 +5551,33 @@ var getElementByType = (elementId, type) => {
 };
 
 // src/controls-registry/element-controls/tabs-control/actions.ts
-var import_editor_elements16 = require("@elementor/editor-elements");
+var import_editor_elements18 = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
-var import_i18n64 = require("@wordpress/i18n");
+var import_i18n65 = require("@wordpress/i18n");
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
 var duplicateItem = ({ items: items3 }) => {
   items3.forEach(({ item }) => {
     const tabId = item.id;
-    const { value: tabContentId } = (0, import_editor_elements16.getElementSetting)(tabId, "tab-content-id") ?? {};
+    const { value: tabContentId } = (0, import_editor_elements18.getElementSetting)(tabId, "tab-content-id") ?? {};
     if (!tabContentId) {
       throw new Error("Original content ID is required for duplication");
     }
-    (0, import_editor_elements16.duplicateElements)({
+    (0, import_editor_elements18.duplicateElements)({
       elementIds: [tabId, tabContentId],
-      title: (0, import_i18n64.__)("Duplicate Tab", "elementor"),
+      title: (0, import_i18n65.__)("Duplicate Tab", "elementor"),
       onCreate: (duplicatedElements) => {
         const tab = duplicatedElements.find((element) => element.originalElementId === tabId);
         const tabContent = duplicatedElements.find((element) => element.originalElementId === tabContentId);
         if (tabContent && tab) {
-          (0, import_editor_elements16.updateElementSettings)({
+          (0, import_editor_elements18.updateElementSettings)({
             withHistory: false,
             id: tab.id,
             props: {
               "tab-content-id": import_editor_props16.stringPropTypeUtil.create(tabContent.id)
             }
           });
-          (0, import_editor_elements16.updateElementSettings)({
+          (0, import_editor_elements18.updateElementSettings)({
             withHistory: false,
             id: tabContent.id,
             props: {
@@ -5337,12 +5595,12 @@ var moveItem = ({
   tabContentAreaId,
   movedElementId
 }) => {
-  const { value: tabContentId } = (0, import_editor_elements16.getElementSetting)(movedElementId, "tab-content-id") ?? {};
+  const { value: tabContentId } = (0, import_editor_elements18.getElementSetting)(movedElementId, "tab-content-id") ?? {};
   if (!tabContentId) {
     throw new Error("Required tab elements not found for reordering");
   }
-  (0, import_editor_elements16.moveElements)({
-    title: (0, import_i18n64.__)("Reorder Tabs", "elementor"),
+  (0, import_editor_elements18.moveElements)({
+    title: (0, import_i18n65.__)("Reorder Tabs", "elementor"),
     moves: [
       {
         elementId: movedElementId,
@@ -5358,11 +5616,11 @@ var moveItem = ({
   });
 };
 var removeItem = ({ items: items3 }) => {
-  (0, import_editor_elements16.removeElements)({
-    title: (0, import_i18n64.__)("Tabs", "elementor"),
+  (0, import_editor_elements18.removeElements)({
+    title: (0, import_i18n65.__)("Tabs", "elementor"),
     elementIds: items3.flatMap(({ item }) => {
       const tabId = item.id;
-      const { value: tabContentId } = (0, import_editor_elements16.getElementSetting)(tabId, "tab-content-id") ?? {};
+      const { value: tabContentId } = (0, import_editor_elements18.getElementSetting)(tabId, "tab-content-id") ?? {};
       if (!tabContentId) {
         throw new Error("Content ID is required");
       }
@@ -5376,10 +5634,10 @@ var addItem = ({
   items: items3
 }) => {
   items3.forEach(({ item, index }) => {
-    const newTabContentId = (0, import_editor_elements16.generateElementId)();
-    const newTabId = (0, import_editor_elements16.generateElementId)();
-    (0, import_editor_elements16.createElements)({
-      title: (0, import_i18n64.__)("Tabs", "elementor"),
+    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"),
       elements: [
         {
           containerId: tabContentAreaId,
@@ -5414,14 +5672,14 @@ var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu";
 var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area";
 var TabsControl = ({ label }) => {
   const { element } = useElement();
-  const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements17.useElementChildren)(element.id, [
+  const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements19.useElementChildren)(element.id, [
     TAB_ELEMENT_TYPE,
     TAB_CONTENT_ELEMENT_TYPE
   ]);
   const tabList = getElementByType(element.id, TAB_MENU_ELEMENT_TYPE);
   const tabContentArea = getElementByType(element.id, TAB_CONTENT_AREA_ELEMENT_TYPE);
   const repeaterValues = tabLinks.map((tabLink) => {
-    const { title: titleSetting } = (0, import_editor_elements17.getElementEditorSettings)(tabLink.id) ?? {};
+    const { title: titleSetting } = (0, import_editor_elements19.getElementEditorSettings)(tabLink.id) ?? {};
     return {
       id: tabLink.id,
       title: titleSetting
@@ -5450,7 +5708,7 @@ var TabsControl = ({ label }) => {
       });
     }
   };
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React95.createElement(
     import_editor_controls54.Repeater,
     {
       addToBottom: true,
@@ -5470,9 +5728,9 @@ var TabsControl = ({ label }) => {
 };
 var ItemLabel = ({ value }) => {
   const id = value.id ?? "";
-  const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(id);
+  const editorSettings = (0, import_editor_elements19.useElementEditorSettings)(id);
   const elementTitle = editorSettings?.title;
-  return /* @__PURE__ */ React92.createElement(import_ui47.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React92.createElement("span", null, elementTitle), /* @__PURE__ */ React92.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n65.__)("Tabs", "elementor") }, /* @__PURE__ */ React92.createElement(ItemDefaultTab, { value })));
+  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 })));
 };
 var ItemDefaultTab = ({ value }) => {
   const id = value.id ?? "";
@@ -5481,19 +5739,19 @@ var ItemDefaultTab = ({ value }) => {
   if (!isDefault) {
     return null;
   }
-  return /* @__PURE__ */ React92.createElement(import_ui47.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n65.__)("Default", "elementor") });
+  return /* @__PURE__ */ React95.createElement(import_ui48.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n66.__)("Default", "elementor") });
 };
 var ItemContent = ({ value }) => {
   if (!value.id) {
     return null;
   }
-  return /* @__PURE__ */ React92.createElement(import_ui47.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React92.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React92.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n65.__)("Tabs", "elementor") }, /* @__PURE__ */ React92.createElement(DefaultTabControl, { elementId: value.id })));
+  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 })));
 };
 var DefaultTabControl = ({ elementId }) => {
   const { value, setValue } = (0, import_editor_controls54.useBoundProp)(import_editor_props17.stringPropTypeUtil);
   const isDefault = value === elementId;
-  return /* @__PURE__ */ React92.createElement(import_ui47.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React92.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n65.__)("Set as default tab", "elementor")), /* @__PURE__ */ React92.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React92.createElement(
-    import_ui47.Switch,
+  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,
     {
       size: "small",
       checked: isDefault,
@@ -5508,15 +5766,15 @@ var DefaultTabControl = ({ elementId }) => {
   )));
 };
 var TabLabelControl = ({ elementId }) => {
-  const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
+  const editorSettings = (0, import_editor_elements19.useElementEditorSettings)(elementId);
   const label = editorSettings?.title ?? "";
-  return /* @__PURE__ */ React92.createElement(import_ui47.Stack, { gap: 1 }, /* @__PURE__ */ React92.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n65.__)("Tab name", "elementor")), /* @__PURE__ */ React92.createElement(
-    import_ui47.TextField,
+  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,
     {
       size: "tiny",
       value: label,
       onChange: ({ target }) => {
-        (0, import_editor_elements17.updateElementEditorSettings)({
+        (0, import_editor_elements19.updateElementEditorSettings)({
           elementId,
           settings: { title: target.value }
         });
@@ -5531,22 +5789,22 @@ var ConditionalTooltip = ({
   if (!showTooltip) {
     return children;
   }
-  return /* @__PURE__ */ React92.createElement(
-    import_ui47.Infotip,
+  return /* @__PURE__ */ React95.createElement(
+    import_ui48.Infotip,
     {
       arrow: false,
-      content: /* @__PURE__ */ React92.createElement(
-        import_ui47.Alert,
+      content: /* @__PURE__ */ React95.createElement(
+        import_ui48.Alert,
         {
           color: "secondary",
-          icon: /* @__PURE__ */ React92.createElement(import_icons26.InfoCircleFilledIcon, { fontSize: "tiny" }),
+          icon: /* @__PURE__ */ React95.createElement(import_icons27.InfoCircleFilledIcon, { fontSize: "tiny" }),
           size: "small",
           sx: { width: 288 }
         },
-        /* @__PURE__ */ React92.createElement(import_ui47.Typography, { variant: "body2" }, (0, import_i18n65.__)("To change the default tab, simply set another tab as default.", "elementor"))
+        /* @__PURE__ */ React95.createElement(import_ui48.Typography, { variant: "body2" }, (0, import_i18n66.__)("To change the default tab, simply set another tab as default.", "elementor"))
       )
     },
-    /* @__PURE__ */ React92.createElement("span", null, children)
+    /* @__PURE__ */ React95.createElement("span", null, children)
   );
 };
 
@@ -5567,16 +5825,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 React93 = __toESM(require("react"));
+var React96 = __toESM(require("react"));
 var import_editor_controls56 = require("@elementor/editor-controls");
 var import_editor_props19 = require("@elementor/editor-props");
-var import_icons27 = require("@elementor/icons");
+var import_icons28 = require("@elementor/icons");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_editor_controls55 = require("@elementor/editor-controls");
 
 // src/dynamics/sync/get-elementor-config.ts
@@ -5628,7 +5886,7 @@ var usePropDynamicTags = () => {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
   }
-  return (0, import_react40.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
+  return (0, import_react41.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
 };
 var getDynamicTagsByCategories = (categories) => {
   const { tags, groups } = getAtomicDynamicTags() || {};
@@ -5658,48 +5916,48 @@ var getDynamicTagsByCategories = (categories) => {
 // src/dynamics/hooks/use-dynamic-tag.ts
 var useDynamicTag = (tagName) => {
   const dynamicTags = usePropDynamicTags();
-  return (0, import_react41.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
+  return (0, import_react42.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
-var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React93.createElement(import_icons27.DatabaseIcon, { fontSize: "tiny" });
+var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React96.createElement(import_icons28.DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
   const context = (0, import_editor_controls56.useBoundProp)(import_editor_props19.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React93.createElement(import_editor_controls56.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React93.createElement(import_editor_controls56.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React93.createElement(Wrapper, { rawValue: value.value })));
+  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 })));
 };
 var Wrapper = ({ rawValue }) => {
   const { propType } = (0, import_editor_controls56.useBoundProp)();
   const imageOverlayPropType = propType.prop_types["background-image-overlay"];
-  return /* @__PURE__ */ React93.createElement(import_editor_controls56.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React93.createElement(import_editor_controls56.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React93.createElement(Content, { rawValue: rawValue.image })));
+  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 })));
 };
 var Content = ({ rawValue }) => {
   const src = rawValue.value.src;
   const dynamicTag = useDynamicTag(src.value.name || "");
-  return /* @__PURE__ */ React93.createElement(React93.Fragment, null, dynamicTag?.label);
+  return /* @__PURE__ */ React96.createElement(React96.Fragment, null, dynamicTag?.label);
 };
 
 // src/dynamics/components/dynamic-selection-control.tsx
-var React97 = __toESM(require("react"));
+var React100 = __toESM(require("react"));
 var import_editor_controls59 = require("@elementor/editor-controls");
 var import_editor_ui8 = require("@elementor/editor-ui");
-var import_icons29 = require("@elementor/icons");
-var import_ui49 = require("@elementor/ui");
-var import_i18n67 = require("@wordpress/i18n");
+var import_icons30 = require("@elementor/icons");
+var import_ui50 = require("@elementor/ui");
+var import_i18n68 = require("@wordpress/i18n");
 
 // src/hooks/use-persist-dynamic-value.ts
-var import_session9 = require("@elementor/session");
+var import_session10 = require("@elementor/session");
 var usePersistDynamicValue = (propKey) => {
   const { element } = useElement();
   const prefixedKey = `dynamic/non-dynamic-values-history/${element.id}/${propKey}`;
-  return (0, import_session9.useSessionStorage)(prefixedKey);
+  return (0, import_session10.useSessionStorage)(prefixedKey);
 };
 
 // src/dynamics/dynamic-control.tsx
-var React95 = __toESM(require("react"));
+var React98 = __toESM(require("react"));
 var import_editor_controls57 = require("@elementor/editor-controls");
 
 // src/dynamics/components/dynamic-conditional-control.tsx
-var React94 = __toESM(require("react"));
+var React97 = __toESM(require("react"));
 var import_editor_props20 = require("@elementor/editor-props");
 var DynamicConditionalControl = ({
   children,
@@ -5707,7 +5965,7 @@ var DynamicConditionalControl = ({
   propsSchema,
   dynamicSettings
 }) => {
-  const defaults = React94.useMemo(() => {
+  const defaults = React97.useMemo(() => {
     if (!propsSchema) {
       return {};
     }
@@ -5717,7 +5975,7 @@ var DynamicConditionalControl = ({
       return result;
     }, {});
   }, [propsSchema]);
-  const convertedSettings = React94.useMemo(() => {
+  const convertedSettings = React97.useMemo(() => {
     if (!dynamicSettings) {
       return {};
     }
@@ -5736,14 +5994,14 @@ var DynamicConditionalControl = ({
       {}
     );
   }, [dynamicSettings]);
-  const effectiveSettings = React94.useMemo(() => {
+  const effectiveSettings = React97.useMemo(() => {
     return { ...defaults, ...convertedSettings };
   }, [defaults, convertedSettings]);
   if (!propType?.dependencies?.terms.length) {
-    return /* @__PURE__ */ React94.createElement(React94.Fragment, null, children);
+    return /* @__PURE__ */ React97.createElement(React97.Fragment, null, children);
   }
   const isHidden = !(0, import_editor_props20.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
-  return isHidden ? null : /* @__PURE__ */ React94.createElement(React94.Fragment, null, children);
+  return isHidden ? null : /* @__PURE__ */ React97.createElement(React97.Fragment, null, children);
 };
 
 // src/dynamics/dynamic-control.tsx
@@ -5767,7 +6025,7 @@ var DynamicControl = ({ bind, children }) => {
     });
   };
   const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
-  return /* @__PURE__ */ React95.createElement(import_editor_controls57.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React95.createElement(import_editor_controls57.PropKeyProvider, { bind }, /* @__PURE__ */ React95.createElement(
+  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(
     DynamicConditionalControl,
     {
       propType: dynamicPropType,
@@ -5779,18 +6037,18 @@ var DynamicControl = ({ bind, children }) => {
 };
 
 // src/dynamics/components/dynamic-selection.tsx
-var import_react42 = require("react");
-var React96 = __toESM(require("react"));
+var import_react43 = require("react");
+var React99 = __toESM(require("react"));
 var import_editor_controls58 = require("@elementor/editor-controls");
 var import_editor_ui7 = require("@elementor/editor-ui");
-var import_icons28 = require("@elementor/icons");
-var import_ui48 = require("@elementor/ui");
-var import_i18n66 = require("@wordpress/i18n");
+var import_icons29 = require("@elementor/icons");
+var import_ui49 = require("@elementor/ui");
+var import_i18n67 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
 var DynamicSelection = ({ close: closePopover }) => {
-  const [searchValue, setSearchValue] = (0, import_react42.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react43.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-  const theme = (0, import_ui48.useTheme)();
+  const theme = (0, import_ui49.useTheme)();
   const { value: anyValue } = (0, import_editor_controls58.useBoundProp)();
   const { bind, value: dynamicValue, setValue } = (0, import_editor_controls58.useBoundProp)(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
@@ -5820,21 +6078,21 @@ var DynamicSelection = ({ close: closePopover }) => {
       label: item.label
     }))
   ]);
-  return /* @__PURE__ */ React96.createElement(PopoverBody, { "aria-label": (0, import_i18n66.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React99.createElement(PopoverBody, { "aria-label": (0, import_i18n67.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React99.createElement(
     import_editor_ui7.PopoverHeader,
     {
-      title: (0, import_i18n66.__)("Dynamic tags", "elementor"),
+      title: (0, import_i18n67.__)("Dynamic tags", "elementor"),
       onClose: closePopover,
-      icon: /* @__PURE__ */ React96.createElement(import_icons28.DatabaseIcon, { fontSize: SIZE6 })
+      icon: /* @__PURE__ */ React99.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE6 })
     }
-  ), hasNoDynamicTags ? /* @__PURE__ */ React96.createElement(NoDynamicTags, null) : /* @__PURE__ */ React96.createElement(import_react42.Fragment, null, /* @__PURE__ */ React96.createElement(
+  ), hasNoDynamicTags ? /* @__PURE__ */ React99.createElement(NoDynamicTags, null) : /* @__PURE__ */ React99.createElement(import_react43.Fragment, null, /* @__PURE__ */ React99.createElement(
     import_editor_ui7.SearchField,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n66.__)("Search dynamic tags\u2026", "elementor")
+      placeholder: (0, import_i18n67.__)("Search dynamic tags\u2026", "elementor")
     }
-  ), /* @__PURE__ */ React96.createElement(import_ui48.Divider, null), /* @__PURE__ */ React96.createElement(
+  ), /* @__PURE__ */ React99.createElement(import_ui49.Divider, null), /* @__PURE__ */ React99.createElement(
     import_editor_ui7.PopoverMenuList,
     {
       items: virtualizedItems,
@@ -5842,12 +6100,12 @@ var DynamicSelection = ({ close: closePopover }) => {
       onClose: closePopover,
       selectedValue: dynamicValue?.name,
       itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
-      noResultsComponent: /* @__PURE__ */ React96.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
+      noResultsComponent: /* @__PURE__ */ React99.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
     }
   )));
 };
-var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React96.createElement(
-  import_ui48.Stack,
+var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React99.createElement(
+  import_ui49.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -5857,12 +6115,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React96.createElem
     color: "text.secondary",
     sx: { pb: 3.5 }
   },
-  /* @__PURE__ */ React96.createElement(import_icons28.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React96.createElement(import_ui48.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n66.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React96.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React96.createElement(import_ui48.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n66.__)("Try something else.", "elementor"), /* @__PURE__ */ React96.createElement(import_ui48.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n66.__)("Clear & try again", "elementor")))
+  /* @__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")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(import_ui48.Divider, null), /* @__PURE__ */ React96.createElement(
-  import_ui48.Stack,
+var NoDynamicTags = () => /* @__PURE__ */ React99.createElement(React99.Fragment, null, /* @__PURE__ */ React99.createElement(import_ui49.Divider, null), /* @__PURE__ */ React99.createElement(
+  import_ui49.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -5872,9 +6130,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React96.createElement(React96.Fragment
     color: "text.secondary",
     sx: { pb: 3.5 }
   },
-  /* @__PURE__ */ React96.createElement(import_icons28.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React96.createElement(import_ui48.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n66.__)("Streamline your workflow with dynamic tags", "elementor")),
-  /* @__PURE__ */ React96.createElement(import_ui48.Typography, { align: "center", variant: "caption" }, (0, import_i18n66.__)("You'll need Elementor Pro to use this feature.", "elementor"))
+  /* @__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"))
 ));
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
@@ -5899,7 +6157,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_ui49.usePopupState)({ variant: "popover" });
+  const selectionPopoverState = (0, import_ui50.usePopupState)({ variant: "popover" });
   const { name: tagName = "" } = value;
   const dynamicTag = useDynamicTag(tagName);
   const removeDynamicTag = () => {
@@ -5908,26 +6166,26 @@ var DynamicSelectionControl = () => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React97.createElement(import_ui49.Box, null, /* @__PURE__ */ React97.createElement(
-    import_ui49.UnstableTag,
+  return /* @__PURE__ */ React100.createElement(import_ui50.Box, null, /* @__PURE__ */ React100.createElement(
+    import_ui50.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
       label: dynamicTag.label,
-      startIcon: /* @__PURE__ */ React97.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE7 }),
-      ...(0, import_ui49.bindTrigger)(selectionPopoverState),
-      actions: /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React97.createElement(
-        import_ui49.IconButton,
+      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,
         {
           size: SIZE7,
           onClick: removeDynamicTag,
-          "aria-label": (0, import_i18n67.__)("Remove dynamic value", "elementor")
+          "aria-label": (0, import_i18n68.__)("Remove dynamic value", "elementor")
         },
-        /* @__PURE__ */ React97.createElement(import_icons29.XIcon, { fontSize: SIZE7 })
+        /* @__PURE__ */ React100.createElement(import_icons30.XIcon, { fontSize: SIZE7 })
       ))
     }
-  ), /* @__PURE__ */ React97.createElement(
-    import_ui49.Popover,
+  ), /* @__PURE__ */ React100.createElement(
+    import_ui50.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -5936,27 +6194,27 @@ var DynamicSelectionControl = () => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui49.bindPopover)(selectionPopoverState)
+      ...(0, import_ui50.bindPopover)(selectionPopoverState)
     },
-    /* @__PURE__ */ React97.createElement(PopoverBody, { "aria-label": (0, import_i18n67.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React97.createElement(DynamicSelection, { close: selectionPopoverState.close }))
+    /* @__PURE__ */ React100.createElement(PopoverBody, { "aria-label": (0, import_i18n68.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React100.createElement(DynamicSelection, { close: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
-  const popupState = (0, import_ui49.usePopupState)({ variant: "popover" });
+  const popupState = (0, import_ui50.usePopupState)({ variant: "popover" });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {
     return null;
   }
-  return /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
-    import_ui49.IconButton,
+  return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
+    import_ui50.IconButton,
     {
       size: SIZE7,
-      ...(0, import_ui49.bindTrigger)(popupState),
-      "aria-label": (0, import_i18n67.__)("Dynamic settings", "elementor")
+      ...(0, import_ui50.bindTrigger)(popupState),
+      "aria-label": (0, import_i18n68.__)("Dynamic settings", "elementor")
     },
-    /* @__PURE__ */ React97.createElement(import_icons29.SettingsIcon, { fontSize: SIZE7 })
-  ), /* @__PURE__ */ React97.createElement(
-    import_ui49.Popover,
+    /* @__PURE__ */ React100.createElement(import_icons30.SettingsIcon, { fontSize: SIZE7 })
+  ), /* @__PURE__ */ React100.createElement(
+    import_ui50.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -5965,45 +6223,45 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui49.bindPopover)(popupState)
+      ...(0, import_ui50.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React97.createElement(PopoverBody, { "aria-label": (0, import_i18n67.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React100.createElement(PopoverBody, { "aria-label": (0, import_i18n68.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React100.createElement(
       import_editor_ui8.PopoverHeader,
       {
         title: dynamicTag.label,
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React97.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE7 })
+        icon: /* @__PURE__ */ React100.createElement(import_icons30.DatabaseIcon, { fontSize: SIZE7 })
       }
-    ), /* @__PURE__ */ React97.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
+    ), /* @__PURE__ */ React100.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_ui49.useTabs)(0);
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui50.useTabs)(0);
   if (!tabs.length) {
     return null;
   }
   if (tagsWithoutTabs.includes(tagName)) {
     const singleTab = tabs[0];
-    return /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(import_ui49.Divider, null), /* @__PURE__ */ React97.createElement(ControlsItemsStack, { items: singleTab.value.items }));
+    return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(import_ui50.Divider, null), /* @__PURE__ */ React100.createElement(ControlsItemsStack, { items: singleTab.value.items }));
   }
-  return /* @__PURE__ */ React97.createElement(React97.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React97.createElement(import_ui49.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React97.createElement(
-    import_ui49.Tab,
+  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,
     {
       key: index,
       label: value.label,
       sx: { px: 1, py: 0.5 },
       ...getTabProps(index)
     }
-  ))), /* @__PURE__ */ React97.createElement(import_ui49.Divider, null), tabs.map(({ value }, index) => {
-    return /* @__PURE__ */ React97.createElement(
-      import_ui49.TabPanel,
+  ))), /* @__PURE__ */ React100.createElement(import_ui50.Divider, null), tabs.map(({ value }, index) => {
+    return /* @__PURE__ */ React100.createElement(
+      import_ui50.TabPanel,
       {
         key: index,
         sx: { flexGrow: 1, py: 0, overflowY: "auto" },
         ...getTabPanelProps(index)
       },
-      /* @__PURE__ */ React97.createElement(ControlsItemsStack, { items: value.items })
+      /* @__PURE__ */ React100.createElement(ControlsItemsStack, { items: value.items })
     );
   }));
 };
@@ -6045,11 +6303,11 @@ var Control3 = ({ control }) => {
     display: "grid",
     gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
   } : {};
-  return /* @__PURE__ */ React97.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React97.createElement(import_ui49.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React97.createElement(import_ui49.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(import_editor_controls59.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React97.createElement(import_ui49.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(Control, { type: control.type, props: controlProps }))));
+  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 }))));
 };
 function ControlsItemsStack({ items: items3 }) {
-  return /* @__PURE__ */ React97.createElement(import_ui49.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
-    (item) => item.type === "control" ? /* @__PURE__ */ React97.createElement(Control3, { key: item.value.bind, control: item.value }) : null
+  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
   ));
 }
 
@@ -6103,18 +6361,18 @@ function getDynamicValue(name, settings) {
 }
 
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
-var React98 = __toESM(require("react"));
+var React101 = __toESM(require("react"));
 var import_editor_controls60 = require("@elementor/editor-controls");
-var import_icons30 = require("@elementor/icons");
-var import_i18n68 = require("@wordpress/i18n");
+var import_icons31 = require("@elementor/icons");
+var import_i18n69 = require("@wordpress/i18n");
 var usePropDynamicAction = () => {
   const { propType } = (0, import_editor_controls60.useBoundProp)();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
-    icon: import_icons30.DatabaseIcon,
-    title: (0, import_i18n68.__)("Dynamic tags", "elementor"),
-    content: ({ close }) => /* @__PURE__ */ React98.createElement(DynamicSelection, { close })
+    icon: import_icons31.DatabaseIcon,
+    title: (0, import_i18n69.__)("Dynamic tags", "elementor"),
+    content: ({ close }) => /* @__PURE__ */ React101.createElement(DynamicSelection, { close })
   };
 };
 
@@ -6145,8 +6403,8 @@ var init = () => {
 
 // src/reset-style-props.tsx
 var import_editor_controls62 = require("@elementor/editor-controls");
-var import_icons31 = require("@elementor/icons");
-var import_i18n69 = require("@wordpress/i18n");
+var import_icons32 = require("@elementor/icons");
+var import_i18n70 = require("@wordpress/i18n");
 var { registerAction } = controlActionsMenu;
 var REPEATERS_SUPPORTED_FOR_RESET = ["background"];
 function initResetStyleProps() {
@@ -6164,8 +6422,8 @@ function useResetStyleValueProps() {
   const shouldShowResetForRepeater = !isRequired && (!isInRepeater || isRepeaterTypeSupported);
   return {
     visible: isStyle && value !== null && value !== void 0 && shouldShowResetForRepeater,
-    title: (0, import_i18n69.__)("Clear", "elementor"),
-    icon: import_icons31.BrushBigIcon,
+    title: (0, import_i18n70.__)("Clear", "elementor"),
+    icon: import_icons32.BrushBigIcon,
     onClick: () => resetValue()
   };
 }
@@ -6188,25 +6446,25 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
 ]);
 
 // src/styles-inheritance/transformers/array-transformer.tsx
-var React99 = __toESM(require("react"));
+var React102 = __toESM(require("react"));
 var import_editor_canvas6 = require("@elementor/editor-canvas");
-var import_ui50 = require("@elementor/ui");
+var import_ui51 = require("@elementor/ui");
 var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) => {
   if (!values || values.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React99.createElement(import_ui50.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React99.createElement(import_ui50.Stack, { key: index }, item)));
+  return /* @__PURE__ */ React102.createElement(import_ui51.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React102.createElement(import_ui51.Stack, { key: index }, item)));
 });
 
 // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
-var React100 = __toESM(require("react"));
+var React103 = __toESM(require("react"));
 var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_ui51 = require("@elementor/ui");
-var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React100.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React100.createElement(ItemLabelColor, { value })));
+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 ItemLabelColor = ({ value: { color } }) => {
-  return /* @__PURE__ */ React100.createElement("span", null, color);
+  return /* @__PURE__ */ React103.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = (0, import_ui51.styled)(import_ui51.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui52.styled)(import_ui52.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6215,20 +6473,20 @@ var StyledUnstableColorIndicator = (0, import_ui51.styled)(import_ui51.UnstableC
 }));
 
 // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
-var React101 = __toESM(require("react"));
+var React104 = __toESM(require("react"));
 var import_editor_canvas8 = require("@elementor/editor-canvas");
-var import_ui52 = require("@elementor/ui");
-var import_i18n70 = require("@wordpress/i18n");
-var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React101.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React101.createElement(ItemLabelGradient, { value })));
+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 ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React101.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React104.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.type === "linear") {
-    return /* @__PURE__ */ React101.createElement("span", null, (0, import_i18n70.__)("Linear gradient", "elementor"));
+    return /* @__PURE__ */ React104.createElement("span", null, (0, import_i18n71.__)("Linear gradient", "elementor"));
   }
-  return /* @__PURE__ */ React101.createElement("span", null, (0, import_i18n70.__)("Radial gradient", "elementor"));
+  return /* @__PURE__ */ React104.createElement("span", null, (0, import_i18n71.__)("Radial gradient", "elementor"));
 };
 var getGradientValue = (gradient) => {
   const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
@@ -6239,16 +6497,16 @@ var getGradientValue = (gradient) => {
 };
 
 // src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
-var React102 = __toESM(require("react"));
+var React105 = __toESM(require("react"));
 var import_editor_canvas9 = require("@elementor/editor-canvas");
 var import_editor_ui9 = require("@elementor/editor-ui");
-var import_ui53 = require("@elementor/ui");
+var import_ui54 = require("@elementor/ui");
 var import_wp_media = require("@elementor/wp-media");
-var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React102.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React102.createElement(ItemIconImage, { value }), /* @__PURE__ */ React102.createElement(ItemLabelImage, { value })));
+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 ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React102.createElement(
-    import_ui53.CardMedia,
+  return /* @__PURE__ */ React105.createElement(
+    import_ui54.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -6263,7 +6521,7 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React102.createElement(import_editor_ui9.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React102.createElement("span", null, imageTitle));
+  return /* @__PURE__ */ React105.createElement(import_editor_ui9.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React105.createElement("span", null, imageTitle));
 };
 var useImage = (image) => {
   let imageTitle, imageUrl = null;
@@ -6288,9 +6546,9 @@ var getFileExtensionFromFilename = (filename) => {
 };
 
 // src/styles-inheritance/transformers/box-shadow-transformer.tsx
-var React103 = __toESM(require("react"));
+var React106 = __toESM(require("react"));
 var import_editor_canvas10 = require("@elementor/editor-canvas");
-var import_ui54 = require("@elementor/ui");
+var import_ui55 = require("@elementor/ui");
 var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
   if (!value) {
     return null;
@@ -6299,20 +6557,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__ */ React103.createElement(import_ui54.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React103.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
+  return /* @__PURE__ */ React106.createElement(import_ui55.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React106.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
 });
 
 // src/styles-inheritance/transformers/color-transformer.tsx
-var React104 = __toESM(require("react"));
+var React107 = __toESM(require("react"));
 var import_editor_canvas11 = require("@elementor/editor-canvas");
-var import_ui55 = require("@elementor/ui");
+var import_ui56 = require("@elementor/ui");
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
   }
   return CSS.supports("color", value.trim());
 }
-var StyledColorIndicator = (0, import_ui55.styled)(import_ui55.UnstableColorIndicator)(({ theme }) => ({
+var StyledColorIndicator = (0, import_ui56.styled)(import_ui56.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6323,13 +6581,13 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
   if (!isValidCSSColor(value)) {
     return value;
   }
-  return /* @__PURE__ */ React104.createElement(import_ui55.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React104.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React104.createElement("span", null, 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));
 });
 
 // src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
-var React105 = __toESM(require("react"));
+var React108 = __toESM(require("react"));
 var import_editor_canvas12 = require("@elementor/editor-canvas");
-var import_ui56 = require("@elementor/ui");
+var import_ui57 = require("@elementor/ui");
 var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") => {
   return (0, import_editor_canvas12.createTransformer)((value, options12) => {
     const stringResult = originalTransformer(value, options12);
@@ -6340,7 +6598,7 @@ var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") =>
     if (parts.length <= 1) {
       return stringResult;
     }
-    return /* @__PURE__ */ React105.createElement(import_ui56.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React105.createElement(import_ui56.Stack, { key: index }, part.trim())));
+    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())));
   });
 };