@elementor/editor-controls 0.30.1 → 0.32.0

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AspectRatioControl: () => AspectRatioControl,
   BackgroundControl: () => BackgroundControl,
   BoxShadowRepeaterControl: () => BoxShadowRepeaterControl,
   ColorControl: () => ColorControl,
@@ -52,6 +53,7 @@ __export(index_exports, {
   SizeControl: () => SizeControl,
   StrokeControl: () => StrokeControl,
   SvgMediaControl: () => SvgMediaControl,
+  SwitchControl: () => SwitchControl2,
   TextAreaControl: () => TextAreaControl,
   TextControl: () => TextControl,
   ToggleControl: () => ToggleControl,
@@ -500,6 +502,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
 
 // src/controls/size-control.tsx
 var React14 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_editor_props6 = require("@elementor/editor-props");
 var import_ui10 = require("@elementor/ui");
 
@@ -516,6 +519,7 @@ var TextFieldInnerSelection = (0, import_react6.forwardRef)(
     onChange,
     onBlur,
     onKeyDown,
+    onKeyUp,
     endAdornment,
     startAdornment
   }, ref) => {
@@ -529,6 +533,7 @@ var TextFieldInnerSelection = (0, import_react6.forwardRef)(
         value,
         onChange,
         onKeyDown,
+        onKeyUp,
         onBlur,
         placeholder,
         InputProps: {
@@ -672,6 +677,21 @@ var SizeInput = ({
   size,
   unit
 }) => {
+  const unitInputBufferRef = (0, import_react8.useRef)("");
+  const handleKeyUp = (event) => {
+    const { key } = event;
+    if (!/^[a-zA-Z%]$/.test(key)) {
+      return;
+    }
+    event.preventDefault();
+    const newChar = key.toLowerCase();
+    const updatedBuffer = (unitInputBufferRef.current + newChar).slice(-3);
+    unitInputBufferRef.current = updatedBuffer;
+    const matchedUnit = units2.find((u) => u.includes(updatedBuffer)) || units2.find((u) => u.startsWith(newChar)) || units2.find((u) => u.includes(newChar));
+    if (matchedUnit) {
+      handleUnitChange(matchedUnit);
+    }
+  };
   return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
     TextFieldInnerSelection,
     {
@@ -688,12 +708,16 @@ var SizeInput = ({
       type: "number",
       value: Number.isNaN(size) ? "" : size,
       onChange: handleSizeChange,
-      onBlur,
+      onBlur: (event) => {
+        unitInputBufferRef.current = "";
+        onBlur?.(event);
+      },
       onKeyDown: (event) => {
         if (RESTRICTED_INPUT_KEYS.includes(event.key)) {
           event.preventDefault();
         }
-      }
+      },
+      onKeyUp: handleKeyUp
     }
   ));
 };
@@ -713,13 +737,38 @@ var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React15.crea
 var React16 = __toESM(require("react"));
 var import_editor_props7 = require("@elementor/editor-props");
 var import_ui12 = require("@elementor/ui");
-var ColorControl = createControl(({ propTypeUtil = import_editor_props7.colorPropTypeUtil, ...props }) => {
-  const { value, setValue } = useBoundProp(propTypeUtil);
-  const handleChange = (selectedColor) => {
-    setValue(selectedColor || null);
-  };
-  return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(import_ui12.UnstableColorField, { size: "tiny", ...props, value: value ?? "", onChange: handleChange, fullWidth: true }));
-});
+var ColorControl = createControl(
+  ({ propTypeUtil = import_editor_props7.colorPropTypeUtil, anchorEl, slotProps = {}, ...props }) => {
+    const { value, setValue } = useBoundProp(propTypeUtil);
+    const handleChange = (selectedColor) => {
+      setValue(selectedColor || null);
+    };
+    return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(
+      import_ui12.UnstableColorField,
+      {
+        size: "tiny",
+        fullWidth: true,
+        value: value ?? "",
+        onChange: handleChange,
+        ...props,
+        slotProps: {
+          ...slotProps,
+          colorPicker: {
+            anchorEl,
+            anchorOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: -10
+            }
+          }
+        }
+      }
+    ));
+  }
+);
 
 // src/controls/stroke-control.tsx
 var units = ["px", "em", "rem"];
@@ -752,7 +801,7 @@ var PopoverGridContainer = ({
 
 // src/components/repeater.tsx
 var React23 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_icons3 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
@@ -762,11 +811,11 @@ var React21 = __toESM(require("react"));
 
 // src/control-adornments/control-adornments-context.tsx
 var React20 = __toESM(require("react"));
-var import_react8 = require("react");
-var Context2 = (0, import_react8.createContext)(null);
+var import_react9 = require("react");
+var Context2 = (0, import_react9.createContext)(null);
 var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React20.createElement(Context2.Provider, { value: { items } }, children);
 var useControlAdornments = () => {
-  const context = (0, import_react8.useContext)(Context2);
+  const context = (0, import_react9.useContext)(Context2);
   return context?.items ?? [];
 };
 
@@ -867,14 +916,14 @@ var Repeater = ({
   values: repeaterValues = [],
   setValues: setRepeaterValues
 }) => {
-  const [openItem, setOpenItem] = (0, import_react9.useState)(EMPTY_OPEN_ITEM);
+  const [openItem, setOpenItem] = (0, import_react10.useState)(EMPTY_OPEN_ITEM);
   const [items, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = (0, import_react9.useState)(items.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = (0, import_react10.useState)(items.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -984,7 +1033,7 @@ var RepeaterItem = ({
   openOnMount,
   onOpen
 }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react9.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react10.useState)(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = (0, import_i18n4.__)("Duplicate", "elementor");
   const toggleLabel = disabled ? (0, import_i18n4.__)("Show", "elementor") : (0, import_i18n4.__)("Hide", "elementor");
@@ -1020,10 +1069,10 @@ var RepeaterItem = ({
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react9.useState)(null);
+  const [ref, setRef] = (0, import_react10.useState)(null);
   const popoverState = (0, import_ui17.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui17.bindPopover)(popoverState);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -1062,24 +1111,7 @@ var ItemContent = ({ anchorEl, bind }) => {
 };
 var Content = ({ anchorEl }) => {
   const { propType, value, setValue } = useBoundProp(import_editor_props9.shadowPropTypeUtil);
-  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React24.createElement(
-    ColorControl,
-    {
-      slotProps: {
-        colorPicker: {
-          anchorEl,
-          anchorOrigin: {
-            vertical: "top",
-            horizontal: "right"
-          },
-          transformOrigin: {
-            vertical: "top",
-            horizontal: -10
-          }
-        }
-      }
-    }
-  )), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
     SelectControl,
     {
       options: [
@@ -1143,7 +1175,7 @@ var import_editor_props10 = require("@elementor/editor-props");
 
 // src/components/control-toggle-button-group.tsx
 var React26 = __toESM(require("react"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_icons4 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 
@@ -1191,7 +1223,7 @@ var ControlToggleButtonGroup = ({
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  const getGridTemplateColumns = (0, import_react10.useMemo)(() => {
+  const getGridTemplateColumns = (0, import_react11.useMemo)(() => {
     const isOffLimits = menuItems?.length;
     const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
@@ -1240,8 +1272,8 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items, value);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react10.useState)(false);
-  const menuButtonRef = (0, import_react10.useRef)(null);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react11.useState)(false);
+  const menuButtonRef = (0, import_react11.useRef)(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -1310,10 +1342,10 @@ var SplitButtonGroup = ({
   ));
 };
 var usePreviewButton = (items, value) => {
-  const [previewButton, setPreviewButton] = (0, import_react10.useState)(
+  const [previewButton, setPreviewButton] = (0, import_react11.useState)(
     items.find((item) => item.value === value) ?? items[0]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const selectedButton = items.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -1411,7 +1443,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 var React30 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_editor_props12 = require("@elementor/editor-props");
 var import_ui23 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
@@ -1441,8 +1473,8 @@ function EqualUnequalSizesControl({
   items,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react11.useId)();
-  const controlRef = (0, import_react11.useRef)(null);
+  const popupId = (0, import_react12.useId)();
+  const controlRef = (0, import_react12.useRef)(null);
   const popupState = (0, import_ui23.usePopupState)({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
@@ -1607,7 +1639,7 @@ var Control3 = ({
 
 // src/controls/font-family-control/font-family-control.tsx
 var React32 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_props14 = require("@elementor/editor-props");
 var import_icons6 = require("@elementor/icons");
 var import_ui25 = require("@elementor/ui");
@@ -1640,7 +1672,7 @@ var enqueueFont = (fontFamily, context = "editor") => {
 // src/controls/font-family-control/font-family-control.tsx
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
-  const [searchValue, setSearchValue] = (0, import_react12.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react13.useState)("");
   const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props14.stringPropTypeUtil);
   const popoverState = (0, import_ui25.usePopupState)({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
@@ -1725,7 +1757,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
 var LIST_ITEM_HEIGHT = 36;
 var LIST_ITEMS_BUFFER = 6;
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
-  const containerRef = (0, import_react12.useRef)(null);
+  const containerRef = (0, import_react13.useRef)(null);
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
   const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
     getVirtualIndexes().forEach((index) => {
@@ -1742,7 +1774,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
     overscan: LIST_ITEMS_BUFFER,
     onChange: debouncedVirtualizeChange
   });
-  (0, import_react12.useEffect)(
+  (0, import_react13.useEffect)(
     () => {
       virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
     },
@@ -1850,8 +1882,8 @@ var StyledMenuList = (0, import_ui25.styled)(import_ui25.MenuList)(({ theme }) =
   position: "relative"
 }));
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react12.useState)(() => (0, import_utils2.debounce)(fn, delay));
-  (0, import_react12.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react13.useState)(() => (0, import_utils2.debounce)(fn, delay));
+  (0, import_react13.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -1876,7 +1908,7 @@ var UrlControl = createControl(({ placeholder }) => {
 
 // src/controls/link-control.tsx
 var React35 = __toESM(require("react"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
 var import_editor_ui3 = require("@elementor/editor-ui");
@@ -1889,10 +1921,10 @@ var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
 var React34 = __toESM(require("react"));
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui27 = require("@elementor/ui");
-var Autocomplete = (0, import_react13.forwardRef)((props, ref) => {
+var Autocomplete = (0, import_react14.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -2002,7 +2034,7 @@ var learnMoreButton = {
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props16.linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isActive, setIsActive] = (0, import_react14.useState)(!!value);
+  const [isActive, setIsActive] = (0, import_react15.useState)(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
@@ -2010,8 +2042,8 @@ var LinkControl = createControl((props) => {
     minInputLength = 2,
     context: { elementId }
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react14.useState)((0, import_editor_elements.getLinkInLinkRestriction)(elementId));
-  const [options, setOptions] = (0, import_react14.useState)(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react15.useState)((0, import_editor_elements.getLinkInLinkRestriction)(elementId));
+  const [options, setOptions] = (0, import_react15.useState)(
     generateFirstLoadedOption(value)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
@@ -2029,7 +2061,7 @@ var LinkControl = createControl((props) => {
       setValue(linkSessionValue.value);
     }
     setLinkSessionValue({
-      value: newState ? value : linkSessionValue?.value,
+      value: linkSessionValue?.value,
       meta: { isEnabled: newState }
     });
   };
@@ -2062,7 +2094,7 @@ var LinkControl = createControl((props) => {
     }
     debounceFetch({ ...requestParams, term: newValue });
   };
-  const debounceFetch = (0, import_react14.useMemo)(
+  const debounceFetch = (0, import_react15.useMemo)(
     () => (0, import_utils3.debounce)(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -2228,33 +2260,121 @@ var Control4 = ({ bind, isLinked }) => {
   return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React36.createElement(SizeControl, null));
 };
 
-// src/controls/svg-media-control.tsx
-var React38 = __toESM(require("react"));
+// src/controls/aspect-ratio-control.tsx
+var React37 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_props18 = require("@elementor/editor-props");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_ui30 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
+var RATIO_OPTIONS = [
+  { label: (0, import_i18n11.__)("Auto", "elementor"), value: "auto" },
+  { label: "1/1", value: "1/1" },
+  { label: "4/3", value: "4/3" },
+  { label: "3/4", value: "3/4" },
+  { label: "16/9", value: "16/9" },
+  { label: "9/16", value: "9/16" },
+  { label: "3/2", value: "3/2" },
+  { label: "2/3", value: "2/3" }
+];
+var CUSTOM_RATIO = "custom";
+var AspectRatioControl = createControl(({ label }) => {
+  const { value: aspectRatioValue, setValue: setAspectRatioValue } = useBoundProp(import_editor_props18.stringPropTypeUtil);
+  const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
+  const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
+  const [isCustom, setIsCustom] = (0, import_react16.useState)(isCustomSelected);
+  const [customWidth, setCustomWidth] = (0, import_react16.useState)(initialWidth);
+  const [customHeight, setCustomHeight] = (0, import_react16.useState)(initialHeight);
+  const [selectedValue, setSelectedValue] = (0, import_react16.useState)(
+    isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
+  );
+  const handleSelectChange = (event) => {
+    const newValue = event.target.value;
+    const isCustomRatio = newValue === CUSTOM_RATIO;
+    setIsCustom(isCustomRatio);
+    setSelectedValue(newValue);
+    if (isCustomRatio) {
+      return;
+    }
+    setAspectRatioValue(newValue);
+  };
+  const handleCustomWidthChange = (event) => {
+    const newWidth = event.target.value;
+    setCustomWidth(newWidth);
+    if (newWidth && customHeight) {
+      setAspectRatioValue(`${newWidth}/${customHeight}`);
+    }
+  };
+  const handleCustomHeightChange = (event) => {
+    const newHeight = event.target.value;
+    setCustomHeight(newHeight);
+    if (customWidth && newHeight) {
+      setAspectRatioValue(`${customWidth}/${newHeight}`);
+    }
+  };
+  return /* @__PURE__ */ React37.createElement(import_ui30.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
+    import_ui30.Select,
+    {
+      sx: { overflow: "hidden" },
+      displayEmpty: true,
+      size: "tiny",
+      value: selectedValue,
+      onChange: handleSelectChange,
+      fullWidth: true
+    },
+    [...RATIO_OPTIONS, { label: (0, import_i18n11.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React37.createElement(import_editor_ui4.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+    )
+  ))), isCustom && /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
+    import_ui30.TextField,
+    {
+      size: "tiny",
+      type: "number",
+      fullWidth: true,
+      value: customWidth,
+      onChange: handleCustomWidthChange,
+      placeholder: (0, import_i18n11.__)("Width", "elementor")
+    }
+  )), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
+    import_ui30.TextField,
+    {
+      size: "tiny",
+      type: "number",
+      fullWidth: true,
+      value: customHeight,
+      onChange: handleCustomHeightChange,
+      placeholder: (0, import_i18n11.__)("Height", "elementor")
+    }
+  ))));
+});
+
+// src/controls/svg-media-control.tsx
+var React39 = __toESM(require("react"));
+var import_react18 = require("react");
+var import_editor_props19 = require("@elementor/editor-props");
 var import_icons10 = require("@elementor/icons");
-var import_ui31 = require("@elementor/ui");
+var import_ui32 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
-var React37 = __toESM(require("react"));
-var import_react15 = require("react");
+var React38 = __toESM(require("react"));
+var import_react17 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
-var import_ui30 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
-var ADMIN_TITLE_TEXT = (0, import_i18n11.__)("Enable Unfiltered Uploads", "elementor");
-var ADMIN_CONTENT_TEXT = (0, import_i18n11.__)(
+var import_ui31 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
+var ADMIN_TITLE_TEXT = (0, import_i18n12.__)("Enable Unfiltered Uploads", "elementor");
+var ADMIN_CONTENT_TEXT = (0, import_i18n12.__)(
   "Before you enable unfiltered files upload, note that such files include a security risk. Elementor does run a process to remove possible malicious code, but there is still risk involved when using such files.",
   "elementor"
 );
-var NON_ADMIN_TITLE_TEXT = (0, import_i18n11.__)("Sorry, you can't upload that file yet", "elementor");
-var NON_ADMIN_CONTENT_TEXT = (0, import_i18n11.__)(
+var NON_ADMIN_TITLE_TEXT = (0, import_i18n12.__)("Sorry, you can't upload that file yet", "elementor");
+var NON_ADMIN_CONTENT_TEXT = (0, import_i18n12.__)(
   "This is because this file type may pose a security risk. To upload them anyway, ask the site administrator to enable unfiltered file uploads.",
   "elementor"
 );
-var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0, import_i18n11.__)("Failed to enable unfiltered files upload.", "elementor");
-var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n11.__)(
+var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0, import_i18n12.__)("Failed to enable unfiltered files upload.", "elementor");
+var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n12.__)(
   "You can try again, if the problem persists, please contact support.",
   "elementor"
 );
@@ -2262,7 +2382,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
   const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
-  const [isError, setIsError] = (0, import_react15.useState)(false);
+  const [isError, setIsError] = (0, import_react17.useState)(false);
   const canManageOptions = canUser("manage_options");
   const onClose = (enabled) => {
     props.onClose(enabled);
@@ -2281,10 +2401,10 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return canManageOptions ? /* @__PURE__ */ React37.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React37.createElement(NonAdminDialog, { ...dialogProps });
+  return canManageOptions ? /* @__PURE__ */ React38.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React38.createElement(NonAdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React37.createElement(import_ui30.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React37.createElement(import_ui30.DialogHeader, { logo: false }, /* @__PURE__ */ React37.createElement(import_ui30.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React37.createElement(import_ui30.Divider, null), /* @__PURE__ */ React37.createElement(import_ui30.DialogContent, null, /* @__PURE__ */ React37.createElement(import_ui30.DialogContentText, null, isError ? /* @__PURE__ */ React37.createElement(React37.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React37.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React37.createElement(import_ui30.DialogActions, null, /* @__PURE__ */ React37.createElement(import_ui30.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n11.__)("Cancel", "elementor")), /* @__PURE__ */ React37.createElement(
-  import_ui30.Button,
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React38.createElement(import_ui31.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React38.createElement(import_ui31.DialogHeader, { logo: false }, /* @__PURE__ */ React38.createElement(import_ui31.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React38.createElement(import_ui31.Divider, null), /* @__PURE__ */ React38.createElement(import_ui31.DialogContent, null, /* @__PURE__ */ React38.createElement(import_ui31.DialogContentText, null, isError ? /* @__PURE__ */ React38.createElement(React38.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React38.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React38.createElement(import_ui31.DialogActions, null, /* @__PURE__ */ React38.createElement(import_ui31.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n12.__)("Cancel", "elementor")), /* @__PURE__ */ React38.createElement(
+  import_ui31.Button,
   {
     size: "medium",
     onClick: () => handleEnable(),
@@ -2292,16 +2412,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React37.createElement(import_ui30.CircularProgress, { size: 24 }) : (0, import_i18n11.__)("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React38.createElement(import_ui31.CircularProgress, { size: 24 }) : (0, import_i18n12.__)("Enable", "elementor")
 )));
-var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React37.createElement(import_ui30.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React37.createElement(import_ui30.DialogHeader, { logo: false }, /* @__PURE__ */ React37.createElement(import_ui30.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React37.createElement(import_ui30.Divider, null), /* @__PURE__ */ React37.createElement(import_ui30.DialogContent, null, /* @__PURE__ */ React37.createElement(import_ui30.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React37.createElement(import_ui30.DialogActions, null, /* @__PURE__ */ React37.createElement(import_ui30.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n11.__)("Got it", "elementor"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React38.createElement(import_ui31.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React38.createElement(import_ui31.DialogHeader, { logo: false }, /* @__PURE__ */ React38.createElement(import_ui31.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React38.createElement(import_ui31.Divider, null), /* @__PURE__ */ React38.createElement(import_ui31.DialogContent, null, /* @__PURE__ */ React38.createElement(import_ui31.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React38.createElement(import_ui31.DialogActions, null, /* @__PURE__ */ React38.createElement(import_ui31.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n12.__)("Got it", "elementor"))));
 
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
-var StyledCard = (0, import_ui31.styled)(import_ui31.Card)`
+var StyledCard = (0, import_ui32.styled)(import_ui32.Card)`
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -2310,7 +2430,7 @@ var StyledCard = (0, import_ui31.styled)(import_ui31.Card)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = (0, import_ui31.styled)(import_ui31.Stack)`
+var StyledCardMediaContainer = (0, import_ui32.styled)(import_ui32.Stack)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -2322,12 +2442,12 @@ var StyledCardMediaContainer = (0, import_ui31.styled)(import_ui31.Stack)`
 var MODE_BROWSE = { mode: "browse" };
 var MODE_UPLOAD = { mode: "upload" };
 var SvgMediaControl = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props18.imageSrcPropTypeUtil);
+  const { value, setValue } = useBoundProp(import_editor_props19.imageSrcPropTypeUtil);
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react16.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react18.useState)(false);
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
     multiple: false,
@@ -2355,16 +2475,16 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
-  return /* @__PURE__ */ React38.createElement(import_ui31.Stack, { gap: 1 }, /* @__PURE__ */ React38.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React38.createElement(ControlFormLabel, null, " ", (0, import_i18n12.__)("SVG", "elementor"), " "), /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React38.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React38.createElement(import_ui31.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React38.createElement(
-    import_ui31.CardMedia,
+  return /* @__PURE__ */ React39.createElement(import_ui32.Stack, { gap: 1 }, /* @__PURE__ */ React39.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React39.createElement(ControlFormLabel, null, " ", (0, import_i18n13.__)("SVG", "elementor"), " "), /* @__PURE__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React39.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React39.createElement(import_ui32.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React39.createElement(
+    import_ui32.CardMedia,
     {
       component: "img",
       image: src,
-      alt: (0, import_i18n12.__)("Preview SVG", "elementor"),
+      alt: (0, import_i18n13.__)("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React38.createElement(
-    import_ui31.CardOverlay,
+  )), /* @__PURE__ */ React39.createElement(
+    import_ui32.CardOverlay,
     {
       sx: {
         "&:hover": {
@@ -2372,68 +2492,69 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React38.createElement(import_ui31.Stack, { gap: 1 }, /* @__PURE__ */ React38.createElement(
-      import_ui31.Button,
+    /* @__PURE__ */ React39.createElement(import_ui32.Stack, { gap: 1 }, /* @__PURE__ */ React39.createElement(
+      import_ui32.Button,
       {
         size: "tiny",
         color: "inherit",
         variant: "outlined",
         onClick: () => handleClick(MODE_BROWSE)
       },
-      (0, import_i18n12.__)("Select SVG", "elementor")
-    ), /* @__PURE__ */ React38.createElement(
-      import_ui31.Button,
+      (0, import_i18n13.__)("Select SVG", "elementor")
+    ), /* @__PURE__ */ React39.createElement(
+      import_ui32.Button,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React38.createElement(import_icons10.UploadIcon, null),
+        startIcon: /* @__PURE__ */ React39.createElement(import_icons10.UploadIcon, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
-      (0, import_i18n12.__)("Upload", "elementor")
+      (0, import_i18n13.__)("Upload", "elementor")
     ))
   ))));
 });
 
 // src/controls/background-control/background-control.tsx
+var React46 = __toESM(require("react"));
+var import_editor_props25 = require("@elementor/editor-props");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_ui40 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
+
+// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 var React45 = __toESM(require("react"));
 var import_editor_props24 = require("@elementor/editor-props");
 var import_ui39 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
-
-// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-var React44 = __toESM(require("react"));
-var import_editor_props23 = require("@elementor/editor-props");
-var import_ui38 = require("@elementor/ui");
 var import_wp_media3 = require("@elementor/wp-media");
-var import_i18n17 = require("@wordpress/i18n");
+var import_i18n18 = require("@wordpress/i18n");
 
 // src/env.ts
 var import_env = require("@elementor/env");
 var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-var React39 = __toESM(require("react"));
-var import_editor_props19 = require("@elementor/editor-props");
-var import_ui32 = require("@elementor/ui");
+var React40 = __toESM(require("react"));
+var import_editor_props20 = require("@elementor/editor-props");
+var import_ui33 = require("@elementor/ui");
 var BackgroundGradientColorControl = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props19.backgroundGradientOverlayPropTypeUtil);
+  const { value, setValue } = useBoundProp(import_editor_props20.backgroundGradientOverlayPropTypeUtil);
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = import_editor_props19.stringPropTypeUtil.create(newValue.positions.join(" "));
+      transformedValue.positions = import_editor_props20.stringPropTypeUtil.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: import_editor_props19.stringPropTypeUtil.create(newValue.type),
-    angle: import_editor_props19.numberPropTypeUtil.create(newValue.angle),
-    stops: import_editor_props19.gradientColorStopPropTypeUtil.create(
+    type: import_editor_props20.stringPropTypeUtil.create(newValue.type),
+    angle: import_editor_props20.numberPropTypeUtil.create(newValue.angle),
+    stops: import_editor_props20.gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
-        ({ color, offset }) => import_editor_props19.colorStopPropTypeUtil.create({
-          color: import_editor_props19.colorPropTypeUtil.create(color),
-          offset: import_editor_props19.numberPropTypeUtil.create(offset)
+        ({ color, offset }) => import_editor_props20.colorStopPropTypeUtil.create({
+          color: import_editor_props20.colorPropTypeUtil.create(color),
+          offset: import_editor_props20.numberPropTypeUtil.create(offset)
         })
       )
     )
@@ -2453,8 +2574,8 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(
-    import_ui32.UnstableGradientBox,
+  return /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(
+    import_ui33.UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
       value: normalizeValue(),
@@ -2462,66 +2583,66 @@ var BackgroundGradientColorControl = createControl(() => {
     }
   ));
 });
-var initialBackgroundGradientOverlay = import_editor_props19.backgroundGradientOverlayPropTypeUtil.create({
-  type: import_editor_props19.stringPropTypeUtil.create("linear"),
-  angle: import_editor_props19.numberPropTypeUtil.create(180),
-  stops: import_editor_props19.gradientColorStopPropTypeUtil.create([
-    import_editor_props19.colorStopPropTypeUtil.create({
-      color: import_editor_props19.colorPropTypeUtil.create("rgb(0,0,0)"),
-      offset: import_editor_props19.numberPropTypeUtil.create(0)
+var initialBackgroundGradientOverlay = import_editor_props20.backgroundGradientOverlayPropTypeUtil.create({
+  type: import_editor_props20.stringPropTypeUtil.create("linear"),
+  angle: import_editor_props20.numberPropTypeUtil.create(180),
+  stops: import_editor_props20.gradientColorStopPropTypeUtil.create([
+    import_editor_props20.colorStopPropTypeUtil.create({
+      color: import_editor_props20.colorPropTypeUtil.create("rgb(0,0,0)"),
+      offset: import_editor_props20.numberPropTypeUtil.create(0)
     }),
-    import_editor_props19.colorStopPropTypeUtil.create({
-      color: import_editor_props19.colorPropTypeUtil.create("rgb(255,255,255)"),
-      offset: import_editor_props19.numberPropTypeUtil.create(100)
+    import_editor_props20.colorStopPropTypeUtil.create({
+      color: import_editor_props20.colorPropTypeUtil.create("rgb(255,255,255)"),
+      offset: import_editor_props20.numberPropTypeUtil.create(100)
     })
   ])
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-var React40 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 var import_icons11 = require("@elementor/icons");
-var import_ui33 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_ui34 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: (0, import_i18n13.__)("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React40.createElement(import_icons11.PinIcon, { fontSize: size }),
+    label: (0, import_i18n14.__)("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons11.PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: (0, import_i18n13.__)("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React40.createElement(import_icons11.PinnedOffIcon, { fontSize: size }),
+    label: (0, import_i18n14.__)("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons11.PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React40.createElement(PopoverGridContainer, null, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlFormLabel, null, (0, import_i18n13.__)("Attachment", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React41.createElement(PopoverGridContainer, null, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, (0, import_i18n14.__)("Attachment", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React41.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-var React41 = __toESM(require("react"));
-var import_editor_props20 = require("@elementor/editor-props");
-var import_editor_ui4 = require("@elementor/editor-ui");
+var React42 = __toESM(require("react"));
+var import_editor_props21 = require("@elementor/editor-props");
+var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons12 = require("@elementor/icons");
-var import_ui34 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_ui35 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
 var backgroundPositionOptions = [
-  { label: (0, import_i18n14.__)("Center center", "elementor"), value: "center center" },
-  { label: (0, import_i18n14.__)("Center left", "elementor"), value: "center left" },
-  { label: (0, import_i18n14.__)("Center right", "elementor"), value: "center right" },
-  { label: (0, import_i18n14.__)("Top center", "elementor"), value: "top center" },
-  { label: (0, import_i18n14.__)("Top left", "elementor"), value: "top left" },
-  { label: (0, import_i18n14.__)("Top right", "elementor"), value: "top right" },
-  { label: (0, import_i18n14.__)("Bottom center", "elementor"), value: "bottom center" },
-  { label: (0, import_i18n14.__)("Bottom left", "elementor"), value: "bottom left" },
-  { label: (0, import_i18n14.__)("Bottom right", "elementor"), value: "bottom right" },
-  { label: (0, import_i18n14.__)("Custom", "elementor"), value: "custom" }
+  { label: (0, import_i18n15.__)("Center center", "elementor"), value: "center center" },
+  { label: (0, import_i18n15.__)("Center left", "elementor"), value: "center left" },
+  { label: (0, import_i18n15.__)("Center right", "elementor"), value: "center right" },
+  { label: (0, import_i18n15.__)("Top center", "elementor"), value: "top center" },
+  { label: (0, import_i18n15.__)("Top left", "elementor"), value: "top left" },
+  { label: (0, import_i18n15.__)("Top right", "elementor"), value: "top right" },
+  { label: (0, import_i18n15.__)("Bottom center", "elementor"), value: "bottom center" },
+  { label: (0, import_i18n15.__)("Bottom left", "elementor"), value: "bottom left" },
+  { label: (0, import_i18n15.__)("Bottom right", "elementor"), value: "bottom right" },
+  { label: (0, import_i18n15.__)("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
-  const backgroundImageOffsetContext = useBoundProp(import_editor_props20.backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(import_editor_props20.stringPropTypeUtil);
+  const backgroundImageOffsetContext = useBoundProp(import_editor_props21.backgroundImagePositionOffsetPropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props21.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
@@ -2531,88 +2652,88 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React41.createElement(import_ui34.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React41.createElement(PopoverGridContainer, null, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, (0, import_i18n14.__)("Position", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React41.createElement(
-    import_ui34.Select,
+  return /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Position", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React42.createElement(
+    import_ui35.Select,
     {
       size: "tiny",
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
       onChange: handlePositionChange,
       fullWidth: true
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React41.createElement(import_editor_ui4.MenuListItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React41.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React41.createElement(SizeControl, { startIcon: /* @__PURE__ */ React41.createElement(import_icons12.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React41.createElement(SizeControl, { startIcon: /* @__PURE__ */ React41.createElement(import_icons12.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React42.createElement(import_editor_ui5.MenuListItem, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React42.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(import_icons12.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(import_icons12.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-var React42 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
-var import_ui35 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_ui36 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: (0, import_i18n15.__)("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.GridDotsIcon, { fontSize: size }),
+    label: (0, import_i18n16.__)("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: (0, import_i18n15.__)("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.DotsHorizontalIcon, { fontSize: size }),
+    label: (0, import_i18n16.__)("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: (0, import_i18n15.__)("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.DotsVerticalIcon, { fontSize: size }),
+    label: (0, import_i18n16.__)("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: (0, import_i18n15.__)("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.XIcon, { fontSize: size }),
+    label: (0, import_i18n16.__)("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.XIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Repeat", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React42.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, (0, import_i18n16.__)("Repeat", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-var React43 = __toESM(require("react"));
-var import_editor_props21 = require("@elementor/editor-props");
+var React44 = __toESM(require("react"));
+var import_editor_props22 = require("@elementor/editor-props");
 var import_icons14 = require("@elementor/icons");
-var import_ui36 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var import_ui37 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 var sizeControlOptions = [
   {
     value: "auto",
-    label: (0, import_i18n16.__)("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons14.LetterAIcon, { fontSize: size }),
+    label: (0, import_i18n17.__)("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: (0, import_i18n16.__)("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons14.ArrowsMaximizeIcon, { fontSize: size }),
+    label: (0, import_i18n17.__)("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: (0, import_i18n16.__)("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons14.ArrowBarBothIcon, { fontSize: size }),
+    label: (0, import_i18n17.__)("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: (0, import_i18n16.__)("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons14.PencilIcon, { fontSize: size }),
+    label: (0, import_i18n17.__)("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlaySize = () => {
-  const backgroundImageScaleContext = useBoundProp(import_editor_props21.backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(import_editor_props21.stringPropTypeUtil);
+  const backgroundImageScaleContext = useBoundProp(import_editor_props22.backgroundImageSizeScalePropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props22.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
   const handleSizeChange = (size) => {
     if (size === "custom") {
@@ -2621,7 +2742,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, (0, import_i18n16.__)("Size", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(import_ui37.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, (0, import_i18n17.__)("Size", "elementor"))), /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React44.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -2629,33 +2750,33 @@ var BackgroundImageOverlaySize = () => {
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
       onChange: handleSizeChange
     }
-  )))), isCustom ? /* @__PURE__ */ React43.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React43.createElement(
+  )))), isCustom ? /* @__PURE__ */ React44.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React44.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React43.createElement(import_icons14.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React44.createElement(import_icons14.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
-  ))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React43.createElement(
+  ))), /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React44.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React43.createElement(import_icons14.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React44.createElement(import_icons14.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
   )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react17 = require("react");
-var import_editor_props22 = require("@elementor/editor-props");
-var import_ui37 = require("@elementor/ui");
+var import_react19 = require("react");
+var import_editor_props23 = require("@elementor/editor-props");
+var import_ui38 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
   color: initialBackgroundColorOverlay2,
   image: initialBackgroundImageOverlay,
   gradient: initialBackgroundGradientOverlay2
 }) => {
-  const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props22.backgroundImageOverlayPropTypeUtil);
-  const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props22.backgroundColorOverlayPropTypeUtil);
-  const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props22.backgroundGradientOverlayPropTypeUtil);
+  const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props23.backgroundImageOverlayPropTypeUtil);
+  const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props23.backgroundColorOverlayPropTypeUtil);
+  const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props23.backgroundGradientOverlayPropTypeUtil);
   const getCurrentOverlayType = () => {
     if (colorValue) {
       return "color";
@@ -2665,8 +2786,8 @@ var useBackgroundTabsHistory = ({
     }
     return "image";
   };
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui37.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react17.useRef)({
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui38.useTabs)(getCurrentOverlayType());
+  const valuesHistory = (0, import_react19.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -2704,9 +2825,9 @@ var useBackgroundTabsHistory = ({
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 var DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = "#00000033";
-var initialBackgroundColorOverlay = import_editor_props23.backgroundColorOverlayPropTypeUtil.create(
+var initialBackgroundColorOverlay = import_editor_props24.backgroundColorOverlayPropTypeUtil.create(
   {
-    color: import_editor_props23.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
+    color: import_editor_props24.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
   }
 );
 var getInitialBackgroundOverlay = () => ({
@@ -2734,20 +2855,20 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: (0, import_i18n17.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: (0, import_i18n17.__)("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: (0, import_i18n17.__)("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: (0, import_i18n17.__)("Full", "elementor"), value: "full" }
+  { label: (0, import_i18n18.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: (0, import_i18n18.__)("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: (0, import_i18n18.__)("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: (0, import_i18n18.__)("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props23.backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React44.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React44.createElement(
+  const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props24.backgroundOverlayPropTypeUtil);
+  return /* @__PURE__ */ React45.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React45.createElement(
     Repeater,
     {
       openOnAdd: true,
       values: overlayValues ?? [],
       setValues: setValue,
-      label: (0, import_i18n17.__)("Overlay", "elementor"),
+      label: (0, import_i18n18.__)("Overlay", "elementor"),
       itemSettings: {
         Icon: ItemIcon2,
         Label: ItemLabel2,
@@ -2757,36 +2878,36 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemContent2 = ({ bind }) => {
-  return /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React44.createElement(Content2, null));
+var ItemContent2 = ({ anchorEl = null, bind }) => {
+  return /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React45.createElement(Content2, { anchorEl }));
 };
-var Content2 = () => {
+var Content2 = ({ anchorEl }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
     image: getInitialBackgroundOverlay().value,
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React44.createElement(import_ui38.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React44.createElement(import_ui38.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React44.createElement(
-    import_ui38.Tabs,
+  return /* @__PURE__ */ React45.createElement(import_ui39.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React45.createElement(import_ui39.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React45.createElement(
+    import_ui39.Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": (0, import_i18n17.__)("Background Overlay", "elementor")
+      "aria-label": (0, import_i18n18.__)("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React44.createElement(import_ui38.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React44.createElement(import_ui38.Tab, { label: (0, import_i18n17.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React44.createElement(import_ui38.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React44.createElement(import_ui38.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React44.createElement(import_ui38.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React44.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React44.createElement(import_ui38.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React44.createElement(PopoverContent, null, /* @__PURE__ */ React44.createElement(ColorOverlayContent, null))));
+    /* @__PURE__ */ React45.createElement(import_ui39.Tab, { label: (0, import_i18n18.__)("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React45.createElement(import_ui39.Tab, { label: (0, import_i18n18.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React45.createElement(import_ui39.Tab, { label: (0, import_i18n18.__)("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React45.createElement(import_ui39.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React45.createElement(PopoverContent, null, /* @__PURE__ */ React45.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React45.createElement(import_ui39.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React45.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React45.createElement(import_ui39.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React45.createElement(PopoverContent, null, /* @__PURE__ */ React45.createElement(ColorOverlayContent, { anchorEl }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React44.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React45.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React44.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React45.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React44.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React45.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -2799,12 +2920,12 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React44.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React45.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React44.createElement(
-    import_ui38.CardMedia,
+  return /* @__PURE__ */ React45.createElement(
+    import_ui39.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -2818,49 +2939,49 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React44.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React45.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React44.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React45.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React44.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React45.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React44.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React45.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React44.createElement("span", null, color);
+  return /* @__PURE__ */ React45.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React44.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React45.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React44.createElement("span", null, (0, import_i18n17.__)("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React45.createElement("span", null, (0, import_i18n18.__)("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React44.createElement("span", null, (0, import_i18n17.__)("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React45.createElement("span", null, (0, import_i18n18.__)("Radial Gradient", "elementor"));
 };
-var ColorOverlayContent = () => {
-  const propContext = useBoundProp(import_editor_props23.backgroundColorOverlayPropTypeUtil);
-  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React44.createElement(ColorControl, null)));
+var ColorOverlayContent = ({ anchorEl }) => {
+  const propContext = useBoundProp(import_editor_props24.backgroundColorOverlayPropTypeUtil);
+  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React45.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
-  const propContext = useBoundProp(import_editor_props23.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React44.createElement(import_ui38.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React44.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(
+  const propContext = useBoundProp(import_editor_props24.backgroundImageOverlayPropTypeUtil);
+  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(
     ImageControl,
     {
-      resolutionLabel: (0, import_i18n17.__)("Resolution", "elementor"),
+      resolutionLabel: (0, import_i18n18.__)("Resolution", "elementor"),
       sizes: backgroundResolutionOptions
     }
-  )))), /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React44.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React44.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React44.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React44.createElement(BackgroundImageOverlayAttachment, null)));
+  )))), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator = (0, import_ui38.styled)(import_ui38.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui39.styled)(import_ui39.UnstableColorIndicator)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
 }));
 var useImage = (image) => {
@@ -2895,11 +3016,26 @@ var getGradientValue = (value) => {
 
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
-  const propContext = useBoundProp(import_editor_props24.backgroundPropTypeUtil);
-  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React45.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React45.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ColorControl, null))))));
+  const propContext = useBoundProp(import_editor_props25.backgroundPropTypeUtil);
+  const isUsingNestedProps = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
+  const colorLabel = (0, import_i18n19.__)("Color", "elementor");
+  return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(SectionContent, null, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React46.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React46.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React46.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ColorControl, null))))));
+});
+
+// src/controls/switch-control.tsx
+var React47 = __toESM(require("react"));
+var import_editor_props26 = require("@elementor/editor-props");
+var import_ui41 = require("@elementor/ui");
+var SwitchControl2 = createControl(() => {
+  const { value, setValue } = useBoundProp(import_editor_props26.booleanPropTypeUtil);
+  const handleChange = (event) => {
+    setValue(event.target.checked);
+  };
+  return /* @__PURE__ */ React47.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(import_ui41.Switch, { checked: !!value, onChange: handleChange, size: "small" }));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AspectRatioControl,
   BackgroundControl,
   BoxShadowRepeaterControl,
   ColorControl,
@@ -2922,6 +3058,7 @@ var BackgroundControl = createControl(() => {
   SizeControl,
   StrokeControl,
   SvgMediaControl,
+  SwitchControl,
   TextAreaControl,
   TextControl,
   ToggleControl,