@elementor/editor-editing-panel 3.33.0-271 → 3.33.0-273

package/dist/index.js

@@ -51,7 +51,7 @@ __export(index_exports, {
   registerControlReplacement: () => registerControlReplacement,
   registerStyleProviderToColors: () => registerStyleProviderToColors,
   stylesInheritanceTransformersRegistry: () => stylesInheritanceTransformersRegistry,
-  useBoundProp: () => import_editor_controls62.useBoundProp,
+  useBoundProp: () => import_editor_controls63.useBoundProp,
   useClassesProp: () => useClassesProp,
   useCustomCss: () => useCustomCss,
   useElement: () => useElement,
@@ -63,7 +63,7 @@ __export(index_exports, {
   useStylesRerender: () => useStylesRerender
 });
 module.exports = __toCommonJS(index_exports);
-var import_editor_controls62 = require("@elementor/editor-controls");
+var import_editor_controls63 = require("@elementor/editor-controls");
 
 // src/components/css-classes/css-class-convert-local.tsx
 var React4 = __toESM(require("react"));
@@ -5273,7 +5273,7 @@ var EditingPanelHooks = () => {
 
 // src/controls-registry/element-controls/tabs-control/tabs-control.tsx
 var React91 = __toESM(require("react"));
-var import_editor_controls53 = require("@elementor/editor-controls");
+var import_editor_controls54 = require("@elementor/editor-controls");
 var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_props17 = require("@elementor/editor-props");
 var import_icons25 = require("@elementor/icons");
@@ -5297,128 +5297,181 @@ var getElementByType = (elementId, type) => {
   return element;
 };
 
-// src/controls-registry/element-controls/tabs-control/actions.ts
+// src/controls-registry/element-controls/tabs-control/use-actions.ts
+var import_editor_controls53 = require("@elementor/editor-controls");
 var import_editor_elements16 = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
 var import_i18n62 = require("@wordpress/i18n");
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
-var duplicateItem = ({
-  items: items3,
-  tabContentAreaId
-}) => {
-  items3.forEach(({ item, index }) => {
-    const tabId = item.id;
-    const tabContentAreaContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
-    const tabContentId = tabContentAreaContainer?.children?.[index]?.id;
-    if (!tabContentId) {
-      throw new Error("Original content ID is required for duplication");
-    }
-    (0, import_editor_elements16.duplicateElements)({
-      elementIds: [tabId, tabContentId],
-      title: (0, import_i18n62.__)("Duplicate Tab", "elementor")
-    });
-  });
-};
-var moveItem = ({
-  toIndex,
-  tabsMenuId,
-  tabContentAreaId,
-  movedElementId,
-  movedElementIndex
-}) => {
-  const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
-  const tabContentId = tabContentContainer?.children?.[movedElementIndex]?.id;
-  if (!tabContentId) {
-    throw new Error("Content ID is required");
-  }
-  (0, import_editor_elements16.moveElements)({
-    title: (0, import_i18n62.__)("Reorder Tabs", "elementor"),
-    moves: [
-      {
-        elementId: movedElementId,
-        targetContainerId: tabsMenuId,
-        options: { at: toIndex }
-      },
-      {
-        elementId: tabContentId,
-        targetContainerId: tabContentAreaId,
-        options: { at: toIndex }
-      }
-    ]
-  });
-};
-var removeItem = ({
-  items: items3,
-  tabContentAreaId,
-  tabsContainerId
-}) => {
-  const defaultActiveTab = (0, import_editor_elements16.getElementSetting)(tabsContainerId, "default-active-tab");
-  const isDefault = items3.some(({ index }) => index === defaultActiveTab?.value);
-  (0, import_editor_elements16.removeElements)({
-    title: (0, import_i18n62.__)("Tabs", "elementor"),
-    elementIds: items3.flatMap(({ item, index }) => {
+var useActions = () => {
+  const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls53.useBoundProp)(import_editor_props16.numberPropTypeUtil);
+  const defaultActiveTab = value ?? 0;
+  const duplicateItem = ({
+    items: items3,
+    tabContentAreaId
+  }) => {
+    items3.forEach(({ item, index }) => {
       const tabId = item.id;
-      const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
-      const tabContentId = tabContentContainer?.children?.[index]?.id;
+      const tabContentAreaContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
+      const tabContentId = tabContentAreaContainer?.children?.[index]?.id;
       if (!tabContentId) {
-        throw new Error("Content ID is required");
-      }
-      return [tabId, tabContentId];
-    }),
-    onRemoveElements: () => {
-      if (isDefault) {
-        (0, import_editor_elements16.updateElementSettings)({
-          id: tabsContainerId,
-          props: { "default-active-tab": import_editor_props16.numberPropTypeUtil.create(0) },
-          withHistory: false
-        });
-      }
-    },
-    onRestoreElements: () => {
-      if (isDefault) {
-        (0, import_editor_elements16.updateElementSettings)({
-          id: tabsContainerId,
-          props: { "default-active-tab": defaultActiveTab },
-          withHistory: false
-        });
+        throw new Error("Original content ID is required for duplication");
       }
+      (0, import_editor_elements16.duplicateElements)({
+        elementIds: [tabId, tabContentId],
+        title: (0, import_i18n62.__)("Duplicate Tab", "elementor")
+      });
+    });
+  };
+  const moveItem = ({
+    toIndex,
+    tabsMenuId,
+    tabContentAreaId,
+    movedElementId,
+    movedElementIndex
+  }) => {
+    const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
+    const tabContentId = tabContentContainer?.children?.[movedElementIndex]?.id;
+    if (!tabContentId) {
+      throw new Error("Content ID is required");
     }
-  });
-};
-var addItem = ({
-  tabContentAreaId,
-  tabsMenuId,
-  items: items3
-}) => {
-  items3.forEach(({ index }) => {
-    (0, import_editor_elements16.createElements)({
-      title: (0, import_i18n62.__)("Tabs", "elementor"),
-      elements: [
+    const newDefault = calculateDefaultOnMove({
+      from: movedElementIndex,
+      to: toIndex,
+      defaultActiveTab
+    });
+    (0, import_editor_elements16.moveElements)({
+      title: (0, import_i18n62.__)("Reorder Tabs", "elementor"),
+      moves: [
         {
-          containerId: tabContentAreaId,
-          model: {
-            elType: TAB_CONTENT_ELEMENT_TYPE,
-            editor_settings: { title: `Tab ${index + 1} content` }
-          }
+          elementId: movedElementId,
+          targetContainerId: tabsMenuId,
+          options: { at: toIndex }
         },
         {
-          containerId: tabsMenuId,
-          model: {
-            elType: TAB_ELEMENT_TYPE,
-            editor_settings: { title: `Tab ${index + 1} trigger` }
-          }
+          elementId: tabContentId,
+          targetContainerId: tabContentAreaId,
+          options: { at: toIndex }
         }
-      ]
+      ],
+      onMoveElements: () => {
+        if (newDefault !== defaultActiveTab) {
+          setDefaultActiveTab(newDefault);
+        }
+      },
+      onRestoreElements: () => {
+        if (newDefault !== defaultActiveTab) {
+          setDefaultActiveTab(defaultActiveTab);
+        }
+      }
     });
-  });
+  };
+  const removeItem = ({
+    items: items3,
+    tabContentAreaId
+  }) => {
+    const newDefault = calculateDefaultOnRemove({
+      items: items3,
+      defaultActiveTab
+    });
+    (0, import_editor_elements16.removeElements)({
+      title: (0, import_i18n62.__)("Tabs", "elementor"),
+      elementIds: items3.flatMap(({ item, index }) => {
+        const tabId = item.id;
+        const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
+        const tabContentId = tabContentContainer?.children?.[index]?.id;
+        if (!tabContentId) {
+          throw new Error("Content ID is required");
+        }
+        return [tabId, tabContentId];
+      }),
+      onRemoveElements: () => {
+        if (newDefault !== defaultActiveTab) {
+          setDefaultActiveTab(newDefault);
+        }
+      },
+      onRestoreElements: () => {
+        if (newDefault !== defaultActiveTab) {
+          setDefaultActiveTab(defaultActiveTab);
+        }
+      }
+    });
+  };
+  const addItem = ({
+    tabContentAreaId,
+    tabsMenuId,
+    items: items3
+  }) => {
+    items3.forEach(({ index }) => {
+      (0, import_editor_elements16.createElements)({
+        title: (0, import_i18n62.__)("Tabs", "elementor"),
+        elements: [
+          {
+            containerId: tabContentAreaId,
+            model: {
+              elType: TAB_CONTENT_ELEMENT_TYPE,
+              editor_settings: { title: `Tab ${index + 1} content` }
+            }
+          },
+          {
+            containerId: tabsMenuId,
+            model: {
+              elType: TAB_ELEMENT_TYPE,
+              editor_settings: { title: `Tab ${index + 1} trigger` }
+            }
+          }
+        ]
+      });
+    });
+  };
+  return {
+    duplicateItem,
+    moveItem,
+    removeItem,
+    addItem
+  };
+};
+var calculateDefaultOnMove = ({
+  from,
+  to,
+  defaultActiveTab
+}) => {
+  if (from === defaultActiveTab) {
+    return to;
+  }
+  if (to === defaultActiveTab) {
+    return from;
+  }
+  if (from < defaultActiveTab && to > defaultActiveTab) {
+    return defaultActiveTab - 1;
+  }
+  if (from > defaultActiveTab && to < defaultActiveTab) {
+    return defaultActiveTab + 1;
+  }
+  return defaultActiveTab;
+};
+var calculateDefaultOnRemove = ({
+  items: items3,
+  defaultActiveTab
+}) => {
+  const isDefault = items3.some(({ index }) => index === defaultActiveTab);
+  if (isDefault) {
+    return 0;
+  }
+  const defaultGap = items3.reduce((acc, { index }) => index < defaultActiveTab ? acc + 1 : acc, 0);
+  return defaultActiveTab - defaultGap;
 };
 
 // src/controls-registry/element-controls/tabs-control/tabs-control.tsx
 var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu";
 var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area";
 var TabsControl = ({ label }) => {
+  return /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n63.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(TabsControlContent, { label }));
+};
+var TabsControlContent = ({ label }) => {
   const { element } = useElement();
+  const { addItem, duplicateItem, moveItem, removeItem } = useActions();
   const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements17.useElementChildren)(element.id, [
     TAB_ELEMENT_TYPE,
     TAB_CONTENT_ELEMENT_TYPE
@@ -5442,8 +5495,7 @@ var TabsControl = ({ label }) => {
       const items3 = meta.action.payload;
       return removeItem({
         items: items3,
-        tabContentAreaId: tabContentArea.id,
-        tabsContainerId: element.id
+        tabContentAreaId: tabContentArea.id
       });
     }
     if (meta?.action?.type === "duplicate") {
@@ -5462,7 +5514,7 @@ var TabsControl = ({ label }) => {
     }
   };
   return /* @__PURE__ */ React91.createElement(
-    import_editor_controls53.Repeater,
+    import_editor_controls54.Repeater,
     {
       showToggle: false,
       values: repeaterValues,
@@ -5483,10 +5535,10 @@ var ItemLabel = ({ value, index }) => {
   const id = value.id ?? "";
   const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(id);
   const elementTitle = editorSettings?.title;
-  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React91.createElement("span", null, elementTitle), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n63.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(ItemDefaultTab, { index })));
+  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React91.createElement("span", null, elementTitle), /* @__PURE__ */ React91.createElement(ItemDefaultTab, { index }));
 };
 var ItemDefaultTab = ({ index }) => {
-  const { value: defaultItem } = (0, import_editor_controls53.useBoundProp)(import_editor_props17.numberPropTypeUtil);
+  const { value: defaultItem } = (0, import_editor_controls54.useBoundProp)(import_editor_props17.numberPropTypeUtil);
   const isDefault = defaultItem === index;
   if (!isDefault) {
     return null;
@@ -5500,9 +5552,9 @@ var ItemContent = ({ value, index }) => {
   return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React91.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n63.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(DefaultTabControl, { tabIndex: index })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
-  const { value, setValue } = (0, import_editor_controls53.useBoundProp)(import_editor_props17.numberPropTypeUtil);
+  const { value, setValue } = (0, import_editor_controls54.useBoundProp)(import_editor_props17.numberPropTypeUtil);
   const isDefault = value === tabIndex;
-  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React91.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n63.__)("Set as default tab", "elementor")), /* @__PURE__ */ React91.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React91.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n63.__)("Set as default tab", "elementor")), /* @__PURE__ */ React91.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React91.createElement(
     import_ui46.Switch,
     {
       size: "small",
@@ -5520,7 +5572,7 @@ var DefaultTabControl = ({ tabIndex }) => {
 var TabLabelControl = ({ elementId }) => {
   const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
   const label = editorSettings?.title ?? "";
-  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { gap: 1 }, /* @__PURE__ */ React91.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n63.__)("Tab name", "elementor")), /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { gap: 1 }, /* @__PURE__ */ React91.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n63.__)("Tab name", "elementor")), /* @__PURE__ */ React91.createElement(
     import_ui46.TextField,
     {
       size: "tiny",
@@ -5574,11 +5626,11 @@ var registerElementControls = () => {
 
 // src/dynamics/init.ts
 var import_editor_canvas5 = require("@elementor/editor-canvas");
-var import_editor_controls60 = require("@elementor/editor-controls");
+var import_editor_controls61 = require("@elementor/editor-controls");
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var React92 = __toESM(require("react"));
-var import_editor_controls55 = require("@elementor/editor-controls");
+var import_editor_controls56 = require("@elementor/editor-controls");
 var import_editor_props19 = require("@elementor/editor-props");
 var import_icons26 = require("@elementor/icons");
 
@@ -5587,7 +5639,7 @@ var import_react41 = require("react");
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 var import_react40 = require("react");
-var import_editor_controls54 = require("@elementor/editor-controls");
+var import_editor_controls55 = require("@elementor/editor-controls");
 
 // src/dynamics/sync/get-elementor-config.ts
 var getElementorConfig2 = () => {
@@ -5633,7 +5685,7 @@ var dynamicPropTypeUtil = (0, import_editor_props18.createPropUtils)(
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 var usePropDynamicTags = () => {
   let categories = [];
-  const { propType } = (0, import_editor_controls54.useBoundProp)();
+  const { propType } = (0, import_editor_controls55.useBoundProp)();
   if (propType) {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
@@ -5674,13 +5726,13 @@ var useDynamicTag = (tagName) => {
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React92.createElement(import_icons26.DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
-  const context = (0, import_editor_controls55.useBoundProp)(import_editor_props19.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React92.createElement(import_editor_controls55.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React92.createElement(import_editor_controls55.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React92.createElement(Wrapper, { rawValue: value.value })));
+  const context = (0, import_editor_controls56.useBoundProp)(import_editor_props19.backgroundImageOverlayPropTypeUtil);
+  return /* @__PURE__ */ React92.createElement(import_editor_controls56.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React92.createElement(import_editor_controls56.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React92.createElement(Wrapper, { rawValue: value.value })));
 };
 var Wrapper = ({ rawValue }) => {
-  const { propType } = (0, import_editor_controls55.useBoundProp)();
+  const { propType } = (0, import_editor_controls56.useBoundProp)();
   const imageOverlayPropType = propType.prop_types["background-image-overlay"];
-  return /* @__PURE__ */ React92.createElement(import_editor_controls55.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React92.createElement(import_editor_controls55.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React92.createElement(Content, { rawValue: rawValue.image })));
+  return /* @__PURE__ */ React92.createElement(import_editor_controls56.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React92.createElement(import_editor_controls56.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React92.createElement(Content, { rawValue: rawValue.image })));
 };
 var Content = ({ rawValue }) => {
   const src = rawValue.value.src;
@@ -5690,7 +5742,7 @@ var Content = ({ rawValue }) => {
 
 // src/dynamics/components/dynamic-selection-control.tsx
 var React96 = __toESM(require("react"));
-var import_editor_controls58 = require("@elementor/editor-controls");
+var import_editor_controls59 = require("@elementor/editor-controls");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons28 = require("@elementor/icons");
 var import_ui48 = require("@elementor/ui");
@@ -5706,7 +5758,7 @@ var usePersistDynamicValue = (propKey) => {
 
 // src/dynamics/dynamic-control.tsx
 var React94 = __toESM(require("react"));
-var import_editor_controls56 = require("@elementor/editor-controls");
+var import_editor_controls57 = require("@elementor/editor-controls");
 
 // src/dynamics/components/dynamic-conditional-control.tsx
 var React93 = __toESM(require("react"));
@@ -5758,7 +5810,7 @@ var DynamicConditionalControl = ({
 
 // src/dynamics/dynamic-control.tsx
 var DynamicControl = ({ bind, children }) => {
-  const { value, setValue } = (0, import_editor_controls56.useBoundProp)(dynamicPropTypeUtil);
+  const { value, setValue } = (0, import_editor_controls57.useBoundProp)(dynamicPropTypeUtil);
   const { name = "", settings } = value ?? {};
   const dynamicTag = useDynamicTag(name);
   if (!dynamicTag) {
@@ -5777,7 +5829,7 @@ var DynamicControl = ({ bind, children }) => {
     });
   };
   const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
-  return /* @__PURE__ */ React94.createElement(import_editor_controls56.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React94.createElement(import_editor_controls56.PropKeyProvider, { bind }, /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React94.createElement(import_editor_controls57.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React94.createElement(import_editor_controls57.PropKeyProvider, { bind }, /* @__PURE__ */ React94.createElement(
     DynamicConditionalControl,
     {
       propType: dynamicPropType,
@@ -5791,7 +5843,7 @@ var DynamicControl = ({ bind, children }) => {
 // src/dynamics/components/dynamic-selection.tsx
 var import_react42 = require("react");
 var React95 = __toESM(require("react"));
-var import_editor_controls57 = require("@elementor/editor-controls");
+var import_editor_controls58 = require("@elementor/editor-controls");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons27 = require("@elementor/icons");
 var import_ui47 = require("@elementor/ui");
@@ -5801,8 +5853,8 @@ var DynamicSelection = ({ close: closePopover }) => {
   const [searchValue, setSearchValue] = (0, import_react42.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const theme = (0, import_ui47.useTheme)();
-  const { value: anyValue } = (0, import_editor_controls57.useBoundProp)();
-  const { bind, value: dynamicValue, setValue } = (0, import_editor_controls57.useBoundProp)(dynamicPropTypeUtil);
+  const { value: anyValue } = (0, import_editor_controls58.useBoundProp)();
+  const { bind, value: dynamicValue, setValue } = (0, import_editor_controls58.useBoundProp)(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
   const isCurrentValueDynamic = !!dynamicValue;
   const options12 = useFilteredOptions(searchValue);
@@ -5906,8 +5958,8 @@ var useFilteredOptions = (searchValue) => {
 var SIZE7 = "tiny";
 var tagsWithoutTabs = ["popup"];
 var DynamicSelectionControl = () => {
-  const { setValue: setAnyValue } = (0, import_editor_controls58.useBoundProp)();
-  const { bind, value } = (0, import_editor_controls58.useBoundProp)(dynamicPropTypeUtil);
+  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_ui48.usePopupState)({ variant: "popover" });
   const { name: tagName = "" } = value;
@@ -6055,7 +6107,7 @@ var Control3 = ({ control }) => {
     display: "grid",
     gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
   } : {};
-  return /* @__PURE__ */ React96.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React96.createElement(import_ui48.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React96.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(import_editor_controls58.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React96.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(Control, { type: control.type, props: controlProps }))));
+  return /* @__PURE__ */ React96.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React96.createElement(import_ui48.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React96.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(import_editor_controls59.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React96.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(Control, { type: control.type, props: controlProps }))));
 };
 function ControlsItemsStack({ items: items3 }) {
   return /* @__PURE__ */ React96.createElement(import_ui48.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
@@ -6114,11 +6166,11 @@ function getDynamicValue(name, settings) {
 
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 var React97 = __toESM(require("react"));
-var import_editor_controls59 = require("@elementor/editor-controls");
+var import_editor_controls60 = require("@elementor/editor-controls");
 var import_icons29 = require("@elementor/icons");
 var import_i18n66 = require("@wordpress/i18n");
 var usePropDynamicAction = () => {
-  const { propType } = (0, import_editor_controls59.useBoundProp)();
+  const { propType } = (0, import_editor_controls60.useBoundProp)();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
@@ -6135,12 +6187,12 @@ var init = () => {
     component: DynamicSelectionControl,
     condition: ({ value }) => isDynamicPropValue(value)
   });
-  (0, import_editor_controls60.injectIntoRepeaterItemLabel)({
+  (0, import_editor_controls61.injectIntoRepeaterItemLabel)({
     id: "dynamic-background-image",
     condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
     component: BackgroundControlDynamicTagLabel
   });
-  (0, import_editor_controls60.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls61.injectIntoRepeaterItemIcon)({
     id: "dynamic-background-image",
     condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
     component: BackgroundControlDynamicTagIcon
@@ -6154,7 +6206,7 @@ var init = () => {
 };
 
 // src/reset-style-props.tsx
-var import_editor_controls61 = require("@elementor/editor-controls");
+var import_editor_controls62 = require("@elementor/editor-controls");
 var import_icons30 = require("@elementor/icons");
 var import_i18n67 = require("@wordpress/i18n");
 
@@ -6211,7 +6263,7 @@ function initResetStyleProps() {
 }
 function useResetStyleValueProps() {
   const isStyle = useIsStyle();
-  const { value, resetValue, propType } = (0, import_editor_controls61.useBoundProp)();
+  const { value, resetValue, propType } = (0, import_editor_controls62.useBoundProp)();
   const hasValue = value !== null && value !== void 0;
   const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
   const isRequired = !!propType.settings?.required;