@elementor/editor-controls 0.36.0 → 1.0.0

package/dist/index.mjs

@@ -442,16 +442,38 @@ var TextAreaControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/size-control.tsx
+import * as React16 from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { sizePropTypeUtil } from "@elementor/editor-props";
+import { useActiveBreakpoint } from "@elementor/editor-responsive";
+import { usePopupState as usePopupState2 } from "@elementor/ui";
+
+// src/components/size-control/size-input.tsx
 import * as React14 from "react";
 import { useRef } from "react";
-import { sizePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
+import { PencilIcon } from "@elementor/icons";
 import { Box, InputAdornment as InputAdornment2 } from "@elementor/ui";
 
-// src/components/text-field-inner-selection.tsx
+// src/utils/size-control.ts
+var defaultUnits = ["px", "%", "em", "rem", "vw", "vh"];
+var defaultExtendedOptions = ["auto", "custom"];
+function isUnitExtendedOption(unit) {
+  return defaultExtendedOptions.includes(unit);
+}
+
+// src/components/size-control/text-field-inner-selection.tsx
 import * as React13 from "react";
 import { forwardRef, useId } from "react";
 import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
-import { bindMenu, bindTrigger, Button as Button2, InputAdornment, Menu, TextField as TextField3, usePopupState } from "@elementor/ui";
+import {
+  bindMenu,
+  bindTrigger,
+  Button as Button2,
+  InputAdornment,
+  Menu,
+  TextField as TextField3,
+  usePopupState
+} from "@elementor/ui";
 var TextFieldInnerSelection = forwardRef(
   ({
     placeholder,
@@ -461,36 +483,36 @@ var TextFieldInnerSelection = forwardRef(
     onBlur,
     onKeyDown,
     onKeyUp,
-    endAdornment,
-    startAdornment,
+    shouldBlockInput = false,
+    inputProps,
     disabled
   }, ref) => {
     return /* @__PURE__ */ React13.createElement(
       TextField3,
       {
         ref,
+        sx: { input: { cursor: shouldBlockInput ? "default !important" : void 0 } },
         size: "tiny",
         fullWidth: true,
-        type,
+        type: shouldBlockInput ? void 0 : type,
         value,
+        onChange: shouldBlockInput ? void 0 : onChange,
+        onKeyDown: shouldBlockInput ? void 0 : onKeyDown,
+        onKeyUp: shouldBlockInput ? void 0 : onKeyUp,
         disabled,
-        onChange,
-        onKeyDown,
-        onKeyUp,
         onBlur,
         placeholder,
-        InputProps: {
-          endAdornment,
-          startAdornment
-        }
+        InputProps: inputProps
       }
     );
   }
 );
 var SelectionEndAdornment = ({
   options,
+  alternativeOptionLabels = {},
   onClick,
   value,
+  menuItemsAttributes = {},
   disabled
 }) => {
   const popupState = usePopupState({
@@ -510,10 +532,159 @@ var SelectionEndAdornment = ({
       sx: { font: "inherit", minWidth: "initial", textTransform: "uppercase" },
       ...bindTrigger(popupState)
     },
-    value
-  ), /* @__PURE__ */ React13.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React13.createElement(MenuListItem2, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
+    alternativeOptionLabels[value] ?? value
+  ), /* @__PURE__ */ React13.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React13.createElement(
+    MenuListItem2,
+    {
+      key: option,
+      onClick: () => handleMenuItemClick(index),
+      ...menuItemsAttributes?.[option]
+    },
+    alternativeOptionLabels[option] ?? option.toUpperCase()
+  ))));
+};
+
+// src/components/size-control/size-input.tsx
+var RESTRICTED_INPUT_KEYS = ["e", "E", "+", "-"];
+var SizeInput = ({
+  units: units2,
+  handleUnitChange,
+  handleSizeChange,
+  placeholder,
+  startIcon,
+  onBlur,
+  onFocus,
+  onClick,
+  size,
+  unit,
+  popupState,
+  disabled
+}) => {
+  const unitInputBufferRef = useRef("");
+  const inputType = isUnitExtendedOption(unit) ? "text" : "number";
+  const inputValue = !isUnitExtendedOption(unit) && Number.isNaN(size) ? "" : size ?? "";
+  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);
+    }
+  };
+  const popupAttributes = {
+    "aria-controls": popupState.isOpen ? popupState.popupId : void 0,
+    "aria-haspopup": true
+  };
+  const inputProps = {
+    ...popupAttributes,
+    autoComplete: "off",
+    onClick,
+    onFocus,
+    startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
+    endAdornment: /* @__PURE__ */ React14.createElement(
+      SelectionEndAdornment,
+      {
+        disabled,
+        options: units2,
+        onClick: handleUnitChange,
+        value: unit,
+        alternativeOptionLabels: {
+          custom: /* @__PURE__ */ React14.createElement(PencilIcon, { fontSize: "small" })
+        },
+        menuItemsAttributes: units2.includes("custom") ? {
+          custom: popupAttributes
+        } : void 0
+      }
+    )
+  };
+  return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(Box, null, /* @__PURE__ */ React14.createElement(
+    TextFieldInnerSelection,
+    {
+      disabled,
+      placeholder,
+      type: inputType,
+      value: inputValue,
+      onChange: handleSizeChange,
+      onKeyDown: (event) => {
+        if (RESTRICTED_INPUT_KEYS.includes(event.key)) {
+          event.preventDefault();
+        }
+      },
+      onKeyUp: handleKeyUp,
+      onBlur,
+      shouldBlockInput: isUnitExtendedOption(unit),
+      inputProps
+    }
+  )));
 };
 
+// src/components/text-field-popover.tsx
+import * as React15 from "react";
+import { bindPopover, Paper, Popover, TextField as TextField4 } from "@elementor/ui";
+var TextFieldPopover = (props) => {
+  const { popupState, restoreValue, anchorRef, value, onChange } = props;
+  return /* @__PURE__ */ React15.createElement(
+    Popover,
+    {
+      disablePortal: true,
+      ...bindPopover(popupState),
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      transformOrigin: { vertical: "top", horizontal: "center" },
+      onClose: () => {
+        restoreValue();
+        popupState.close();
+      }
+    },
+    /* @__PURE__ */ React15.createElement(
+      Paper,
+      {
+        sx: {
+          width: anchorRef.current.offsetWidth + "px",
+          borderRadius: 2,
+          p: 1.5
+        }
+      },
+      /* @__PURE__ */ React15.createElement(
+        TextField4,
+        {
+          value,
+          onChange,
+          size: "tiny",
+          type: "text",
+          fullWidth: true,
+          inputProps: {
+            autoFocus: true
+          }
+        }
+      )
+    )
+  );
+};
+
+// src/hooks/use-size-extended-options.ts
+import { useMemo } from "react";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
+var EXPERIMENT_ID = "e_v_3_30";
+function useSizeExtendedOptions(options, disableCustom) {
+  return useMemo(() => {
+    const isVersion330Active = isExperimentActive(EXPERIMENT_ID);
+    const shouldDisableCustom = !isVersion330Active || disableCustom;
+    const extendedOptions = [...options];
+    if (!shouldDisableCustom && !extendedOptions.includes("custom")) {
+      extendedOptions.push("custom");
+    } else if (options.includes("custom")) {
+      extendedOptions.splice(extendedOptions.indexOf("custom"), 1);
+    }
+    return extendedOptions;
+  }, [options, disableCustom]);
+}
+
 // src/hooks/use-sync-external-state.tsx
 import { useEffect, useState as useState2 } from "react";
 var useSyncExternalState = ({
@@ -548,139 +719,163 @@ var useSyncExternalState = ({
 };
 
 // src/controls/size-control.tsx
-var defaultUnits = ["px", "%", "em", "rem", "vw", "vh"];
-var defaultUnit = "px";
-var defaultSize = NaN;
-var SizeControl = createControl(
-  ({ units: units2 = defaultUnits, extendedValues = [], placeholder, startIcon }) => {
-    const { value: sizeValue, setValue: setSizeValue, restoreValue, disabled } = useBoundProp(sizePropTypeUtil);
-    const [state, setState] = useSyncExternalState({
-      external: sizeValue,
-      setExternal: setSizeValue,
-      persistWhen: (controlValue) => !!controlValue?.size || controlValue?.size === 0,
-      fallback: (controlValue) => ({ unit: controlValue?.unit || defaultUnit, size: defaultSize })
-    });
-    const handleUnitChange = (unit) => {
-      setState((prev) => ({
-        size: prev?.size ?? defaultSize,
-        unit
-      }));
-    };
-    const handleSizeChange = (event) => {
-      const { value: size } = event.target;
-      setState((prev) => ({
-        ...prev,
-        size: size || size === "0" ? parseFloat(size) : defaultSize
-      }));
-    };
-    const Input = extendedValues?.length ? ExtendedSizeInput : SizeInput;
-    return /* @__PURE__ */ React14.createElement(
-      Input,
-      {
-        disabled,
-        size: state.size,
-        unit: state.unit,
-        placeholder,
-        startIcon,
-        units: units2,
-        extendedValues,
-        handleSizeChange,
-        handleUnitChange,
-        onBlur: restoreValue
+var DEFAULT_UNIT = "px";
+var DEFAULT_SIZE = NaN;
+var SizeControl = createControl((props) => {
+  const { units: units2 = [...defaultUnits], placeholder, startIcon, anchorRef } = props;
+  const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp(sizePropTypeUtil);
+  const [internalState, setInternalState] = useState3(createStateFromSizeProp(sizeValue));
+  const activeBreakpoint = useActiveBreakpoint();
+  const extendedOptions = useSizeExtendedOptions(props.extendedOptions || [], props.disableCustom ?? false);
+  const popupState = usePopupState2({ variant: "popover" });
+  const [state, setState] = useSyncExternalState({
+    external: internalState,
+    setExternal: (newState) => setSizeValue(extractValueFromState(newState)),
+    persistWhen: (newState) => {
+      if (!newState?.unit) {
+        return false;
       }
-    );
-  }
-);
-var ExtendedSizeInput = (props) => {
-  const { value: stringValue, setValue: setStringValue } = useBoundProp(stringPropTypeUtil4);
-  const { extendedValues = [] } = props;
-  const unit = stringValue ?? props.unit;
+      if (isUnitExtendedOption(newState.unit)) {
+        return newState.unit === "auto" ? true : !!newState.custom;
+      }
+      return !!newState?.numeric || newState?.numeric === 0;
+    },
+    fallback: (newState) => ({
+      unit: newState?.unit ?? DEFAULT_UNIT,
+      numeric: newState?.numeric ?? DEFAULT_SIZE,
+      custom: newState?.custom ?? ""
+    })
+  });
+  const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = DEFAULT_UNIT } = extractValueFromState(state) || {};
   const handleUnitChange = (newUnit) => {
-    if (extendedValues.includes(newUnit)) {
-      setStringValue(newUnit);
-    } else {
-      props.handleUnitChange(newUnit);
+    if (newUnit === "custom") {
+      popupState.open(anchorRef?.current);
     }
+    setState((prev) => ({ ...prev, unit: newUnit }));
   };
-  return /* @__PURE__ */ React14.createElement(
-    SizeInput,
-    {
-      ...props,
-      units: [...props.units, ...extendedValues],
-      handleUnitChange,
-      unit
-    }
-  );
-};
-var RESTRICTED_INPUT_KEYS = ["e", "E", "+", "-"];
-var SizeInput = ({
-  units: units2,
-  handleUnitChange,
-  handleSizeChange,
-  placeholder,
-  startIcon,
-  onBlur,
-  size,
-  unit,
-  disabled
-}) => {
-  const unitInputBufferRef = useRef("");
-  const handleKeyUp = (event) => {
-    const { key } = event;
-    if (!/^[a-zA-Z%]$/.test(key)) {
+  const handleSizeChange = (event) => {
+    const { value: size } = event.target;
+    if (controlUnit === "auto") {
+      setState((prev) => ({ ...prev, unit: controlUnit }));
       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);
+    setState((prev) => ({
+      ...prev,
+      [controlUnit === "custom" ? "custom" : "numeric"]: formatSize(size, controlUnit),
+      unit: controlUnit
+    }));
+  };
+  const onInputFocus = (event) => {
+    if (isUnitExtendedOption(state.unit)) {
+      event.target?.blur();
     }
   };
-  return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(Box, null, /* @__PURE__ */ React14.createElement(
-    TextFieldInnerSelection,
+  const onInputClick = (event) => {
+    if (event.target.closest("input") && "custom" === state.unit) {
+      popupState.open(anchorRef?.current);
+    }
+  };
+  useEffect2(() => {
+    const newState = createStateFromSizeProp(sizeValue);
+    const currentUnit = isUnitExtendedOption(state.unit) ? "custom" : "numeric";
+    const mergedStates = { ...state, [currentUnit]: newState[currentUnit] };
+    if (mergedStates.unit !== "auto" && areStatesEqual(state, mergedStates)) {
+      return;
+    }
+    if (state.unit === newState.unit) {
+      setInternalState(mergedStates);
+      return;
+    }
+    setState(newState);
+  }, [sizeValue]);
+  useEffect2(() => {
+    const newState = createStateFromSizeProp(sizeValue);
+    if (activeBreakpoint && !areStatesEqual(newState, state)) {
+      setState(newState);
+    }
+  }, [activeBreakpoint]);
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+    SizeInput,
     {
       disabled,
-      endAdornment: /* @__PURE__ */ React14.createElement(
-        SelectionEndAdornment,
-        {
-          disabled,
-          options: units2,
-          onClick: handleUnitChange,
-          value: unit ?? defaultUnit
-        }
-      ),
+      size: controlSize,
+      unit: controlUnit,
+      units: [...units2, ...extendedOptions || []],
       placeholder,
-      startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
-      type: "number",
-      value: Number.isNaN(size) ? "" : size,
-      onChange: handleSizeChange,
-      onBlur,
-      onKeyDown: (event) => {
-        if (RESTRICTED_INPUT_KEYS.includes(event.key)) {
-          event.preventDefault();
-        }
-      },
-      onKeyUp: handleKeyUp
+      startIcon,
+      handleSizeChange,
+      handleUnitChange,
+      onBlur: restoreValue,
+      onFocus: onInputFocus,
+      onClick: onInputClick,
+      popupState
     }
-  )));
-};
+  ), anchorRef?.current && /* @__PURE__ */ React16.createElement(
+    TextFieldPopover,
+    {
+      popupState,
+      anchorRef,
+      restoreValue,
+      value: controlSize,
+      onChange: handleSizeChange
+    }
+  ));
+});
+function formatSize(size, unit) {
+  if (isUnitExtendedOption(unit)) {
+    return unit === "auto" ? "" : String(size ?? "");
+  }
+  return size || size === 0 ? Number(size) : NaN;
+}
+function createStateFromSizeProp(sizeValue) {
+  const unit = sizeValue?.unit ?? DEFAULT_UNIT;
+  const size = sizeValue?.size ?? "";
+  return {
+    numeric: !isUnitExtendedOption(unit) && !isNaN(Number(size)) && (size || size === 0) ? Number(size) : DEFAULT_SIZE,
+    custom: unit === "custom" ? String(size) : "",
+    unit
+  };
+}
+function extractValueFromState(state) {
+  if (!state) {
+    return null;
+  }
+  if (!state?.unit) {
+    return { size: DEFAULT_SIZE, unit: DEFAULT_UNIT };
+  }
+  const { unit } = state;
+  if (unit === "auto") {
+    return { size: "", unit };
+  }
+  return {
+    size: state[unit === "custom" ? "custom" : "numeric"],
+    unit
+  };
+}
+function areStatesEqual(state1, state2) {
+  if (state1.unit !== state2.unit || state1.custom !== state2.custom) {
+    return false;
+  }
+  if (isUnitExtendedOption(state1.unit)) {
+    return state1.custom === state2.custom;
+  }
+  return state1.numeric === state2.numeric || isNaN(state1.numeric) && isNaN(state2.numeric);
+}
 
 // src/controls/stroke-control.tsx
-import * as React17 from "react";
+import * as React19 from "react";
+import { forwardRef as forwardRef2, useRef as useRef2 } from "react";
 import { strokePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid2 } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 
 // src/components/section-content.tsx
-import * as React15 from "react";
+import * as React17 from "react";
 import { Stack as Stack3 } from "@elementor/ui";
-var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React15.createElement(Stack3, { gap, sx: { ...sx } }, children);
+var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React17.createElement(Stack3, { gap, sx: { ...sx } }, children);
 
 // src/controls/color-control.tsx
-import * as React16 from "react";
+import * as React18 from "react";
 import { colorPropTypeUtil } from "@elementor/editor-props";
 import { UnstableColorField } from "@elementor/ui";
 var ColorControl = createControl(
@@ -689,7 +884,7 @@ var ColorControl = createControl(
     const handleChange = (selectedColor) => {
       setValue(selectedColor || null);
     };
-    return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React18.createElement(ControlActions, null, /* @__PURE__ */ React18.createElement(
       UnstableColorField,
       {
         size: "tiny",
@@ -721,57 +916,57 @@ var ColorControl = createControl(
 var units = ["px", "em", "rem"];
 var StrokeControl = createControl(() => {
   const propContext = useBoundProp(strokePropTypeUtil);
-  return /* @__PURE__ */ React17.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React17.createElement(SectionContent, null, /* @__PURE__ */ React17.createElement(Control, { bind: "width", label: __3("Stroke width", "elementor") }, /* @__PURE__ */ React17.createElement(SizeControl, { units })), /* @__PURE__ */ React17.createElement(Control, { bind: "color", label: __3("Stroke color", "elementor") }, /* @__PURE__ */ React17.createElement(ColorControl, null))));
+  const rowRef = useRef2();
+  return /* @__PURE__ */ React19.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React19.createElement(SectionContent, null, /* @__PURE__ */ React19.createElement(Control, { bind: "width", label: __3("Stroke width", "elementor"), ref: rowRef }, /* @__PURE__ */ React19.createElement(SizeControl, { units, anchorRef: rowRef })), /* @__PURE__ */ React19.createElement(Control, { bind: "color", label: __3("Stroke color", "elementor") }, /* @__PURE__ */ React19.createElement(ColorControl, null))));
 });
-var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 6 }, children)));
+var Control = forwardRef2(({ bind, label, children }, ref) => /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React19.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React19.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 6 }, children))));
 
 // src/controls/box-shadow-repeater-control.tsx
-import * as React24 from "react";
+import * as React26 from "react";
+import { useRef as useRef3 } from "react";
 import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 import { FormLabel as FormLabel2, Grid as Grid4, UnstableColorIndicator } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 
 // src/components/popover-content.tsx
-import * as React18 from "react";
+import * as React20 from "react";
 import { Stack as Stack4 } from "@elementor/ui";
-var PopoverContent = ({ alignItems, gap = 1.5, p, pt, pb, children }) => /* @__PURE__ */ React18.createElement(Stack4, { alignItems, gap, p, pt, pb }, children);
+var PopoverContent = ({ alignItems, gap = 1.5, p, pt, pb, children }) => /* @__PURE__ */ React20.createElement(Stack4, { alignItems, gap, p, pt, pb }, children);
 
 // src/components/popover-grid-container.tsx
-import * as React19 from "react";
+import { forwardRef as forwardRef3 } from "react";
+import * as React21 from "react";
 import { Grid as Grid3 } from "@elementor/ui";
-var PopoverGridContainer = ({
-  gap = 1.5,
-  alignItems = "center",
-  flexWrap = "nowrap",
-  children
-}) => /* @__PURE__ */ React19.createElement(Grid3, { container: true, gap, alignItems, flexWrap }, children);
+var PopoverGridContainer = forwardRef3(
+  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React21.createElement(Grid3, { container: true, gap, alignItems, flexWrap, ref }, children)
+);
 
 // src/components/repeater.tsx
-import * as React23 from "react";
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import * as React25 from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "@elementor/icons";
 import {
-  bindPopover,
+  bindPopover as bindPopover2,
   bindTrigger as bindTrigger2,
   Box as Box2,
   IconButton,
-  Popover,
+  Popover as Popover2,
   Stack as Stack5,
   Tooltip,
   Typography,
   UnstableTag,
-  usePopupState as usePopupState2
+  usePopupState as usePopupState3
 } from "@elementor/ui";
 import { __ as __4 } from "@wordpress/i18n";
 
 // src/control-adornments/control-adornments.tsx
-import * as React21 from "react";
+import * as React23 from "react";
 
 // src/control-adornments/control-adornments-context.tsx
-import * as React20 from "react";
+import * as React22 from "react";
 import { createContext as createContext5, useContext as useContext5 } from "react";
 var Context2 = createContext5(null);
-var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React20.createElement(Context2.Provider, { value: { items } }, children);
+var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React22.createElement(Context2.Provider, { value: { items } }, children);
 var useControlAdornments = () => {
   const context = useContext5(Context2);
   return context?.items ?? [];
@@ -783,7 +978,7 @@ function ControlAdornments() {
   if (items?.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, items.map(({ Adornment, id }) => /* @__PURE__ */ React21.createElement(Adornment, { key: id })));
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, items.map(({ Adornment, id }) => /* @__PURE__ */ React23.createElement(Adornment, { key: id })));
 }
 
 // src/locations.ts
@@ -792,7 +987,7 @@ var { Slot: RepeaterItemIconSlot, inject: injectIntoRepeaterItemIcon } = createR
 var { Slot: RepeaterItemLabelSlot, inject: injectIntoRepeaterItemLabel } = createReplaceableLocation();
 
 // src/components/sortable.tsx
-import * as React22 from "react";
+import * as React24 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
   Divider,
@@ -803,10 +998,10 @@ import {
   UnstableSortableProvider
 } from "@elementor/ui";
 var SortableProvider = (props) => {
-  return /* @__PURE__ */ React22.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React22.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
+  return /* @__PURE__ */ React24.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React24.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
 };
 var SortableItem = ({ id, children, disabled }) => {
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React24.createElement(
     UnstableSortableItem,
     {
       id,
@@ -819,7 +1014,7 @@ var SortableItem = ({ id, children, disabled }) => {
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React22.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle }));
+        return /* @__PURE__ */ React24.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React24.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React24.createElement(StyledDivider, { style: dropIndicationStyle }));
       }
     }
   );
@@ -853,7 +1048,7 @@ var StyledListItem = styled2(ListItem)`
 		}
 	}
 `;
-var SortableTrigger = (props) => /* @__PURE__ */ React22.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React22.createElement(GripVerticalIcon, { fontSize: "tiny" }));
+var SortableTrigger = (props) => /* @__PURE__ */ React24.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React24.createElement(GripVerticalIcon, { fontSize: "tiny" }));
 var StyledDivider = styled2(Divider)`
 	height: 0px;
 	border: none;
@@ -883,14 +1078,14 @@ var Repeater = ({
   values: repeaterValues = [],
   setValues: setRepeaterValues
 }) => {
-  const [openItem, setOpenItem] = useState3(EMPTY_OPEN_ITEM);
+  const [openItem, setOpenItem] = useState4(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] = useState3(items.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = useState4(items.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -947,7 +1142,7 @@ var Repeater = ({
       });
     });
   };
-  return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(SectionContent, null, /* @__PURE__ */ React25.createElement(
     Stack5,
     {
       direction: "row",
@@ -956,9 +1151,9 @@ var Repeater = ({
       gap: 1,
       sx: { marginInlineEnd: -0.75 }
     },
-    /* @__PURE__ */ React23.createElement(Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
-    /* @__PURE__ */ React23.createElement(ControlAdornments, null),
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React25.createElement(Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
+    /* @__PURE__ */ React25.createElement(ControlAdornments, null),
+    /* @__PURE__ */ React25.createElement(
       IconButton,
       {
         size: SIZE,
@@ -967,27 +1162,27 @@ var Repeater = ({
         onClick: addRepeaterItem,
         "aria-label": __4("Add item", "elementor")
       },
-      /* @__PURE__ */ React23.createElement(PlusIcon, { fontSize: SIZE })
+      /* @__PURE__ */ React25.createElement(PlusIcon, { fontSize: SIZE })
     )
-  ), 0 < uniqueKeys.length && /* @__PURE__ */ React23.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
+  ), 0 < uniqueKeys.length && /* @__PURE__ */ React25.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
     const value = items[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React23.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled }, /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React25.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled }, /* @__PURE__ */ React25.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React23.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React23.createElement(itemSettings.Label, { value })),
-        startIcon: /* @__PURE__ */ React23.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React23.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React25.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React25.createElement(itemSettings.Label, { value })),
+        startIcon: /* @__PURE__ */ React25.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React25.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
         openOnMount: openOnAdd && openItem === key,
         onOpen: () => setOpenItem(EMPTY_OPEN_ITEM)
       },
-      (props) => /* @__PURE__ */ React23.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
+      (props) => /* @__PURE__ */ React25.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
   })));
 };
@@ -1003,12 +1198,12 @@ var RepeaterItem = ({
   onOpen,
   disabled
 }) => {
-  const [anchorEl, setAnchorEl] = useState3(null);
+  const [anchorEl, setAnchorEl] = useState4(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = __4("Duplicate", "elementor");
   const toggleLabel = propDisabled ? __4("Show", "elementor") : __4("Hide", "elementor");
   const removeLabel = __4("Remove", "elementor");
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
     UnstableTag,
     {
       disabled,
@@ -1020,10 +1215,10 @@ var RepeaterItem = ({
       "aria-label": __4("Open item", "elementor"),
       ...bindTrigger2(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React23.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(XIcon, { fontSize: SIZE }))))
+      actions: /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React25.createElement(CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React25.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React25.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React25.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React25.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React25.createElement(XIcon, { fontSize: SIZE }))))
     }
-  ), /* @__PURE__ */ React23.createElement(
-    Popover,
+  ), /* @__PURE__ */ React25.createElement(
+    Popover2,
     {
       disablePortal: true,
       slotProps: {
@@ -1036,14 +1231,14 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React23.createElement(Box2, null, children({ anchorEl }))
+    /* @__PURE__ */ React25.createElement(Box2, null, children({ anchorEl }))
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState3(null);
-  const popoverState = usePopupState2({ variant: "popover" });
-  const popoverProps = bindPopover(popoverState);
-  useEffect2(() => {
+  const [ref, setRef] = useState4(null);
+  const popoverState = usePopupState3({ variant: "popover" });
+  const popoverProps = bindPopover2(popoverState);
+  useEffect3(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -1060,7 +1255,7 @@ var usePopover = (openOnMount, onOpen) => {
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue, disabled } = useBoundProp(boxShadowPropTypeUtil);
-  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue, disabled }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React26.createElement(PropProvider, { propType, value, setValue, disabled }, /* @__PURE__ */ React26.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -1077,13 +1272,14 @@ var BoxShadowRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemIcon = ({ value }) => /* @__PURE__ */ React24.createElement(UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
+var ItemIcon = ({ value }) => /* @__PURE__ */ React26.createElement(UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
 var ItemContent = ({ anchorEl, bind }) => {
-  return /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(Content, { anchorEl }));
+  return /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React26.createElement(Content, { anchorEl }));
 };
 var Content = ({ anchorEl }) => {
   const context = useBoundProp(shadowPropTypeUtil);
-  return /* @__PURE__ */ React24.createElement(PropProvider, { ...context }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: __5("Color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
+  const rowRef = [useRef3(), useRef3()];
+  return /* @__PURE__ */ React26.createElement(PropProvider, { ...context }, /* @__PURE__ */ React26.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(Control2, { bind: "color", label: __5("Color", "elementor") }, /* @__PURE__ */ React26.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React26.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React26.createElement(
     SelectControl,
     {
       options: [
@@ -1091,14 +1287,14 @@ var Content = ({ anchorEl }) => {
         { label: __5("Outset", "elementor"), value: null }
       ]
     }
-  ))), /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "hOffset", label: __5("Horizontal", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)), /* @__PURE__ */ React24.createElement(Control2, { bind: "vOffset", label: __5("Vertical", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null))), /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "blur", label: __5("Blur", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)), /* @__PURE__ */ React24.createElement(Control2, { bind: "spread", label: __5("Spread", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)))));
+  ))), /* @__PURE__ */ React26.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React26.createElement(Control2, { bind: "hOffset", label: __5("Horizontal", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React26.createElement(Control2, { bind: "vOffset", label: __5("Vertical", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React26.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React26.createElement(Control2, { bind: "blur", label: __5("Blur", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React26.createElement(Control2, { bind: "spread", label: __5("Spread", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[1] })))));
 };
 var Control2 = ({
   label,
   bind,
   children,
   sx
-}) => /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React24.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React24.createElement(Grid4, { item: true, xs: 12 }, children))));
+}) => /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React26.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React26.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React26.createElement(Grid4, { item: true, xs: 12 }, children))));
 var ItemLabel = ({ value }) => {
   const { position, hOffset, vOffset, blur, spread } = value.value;
   const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
@@ -1112,7 +1308,7 @@ var ItemLabel = ({ value }) => {
     blurSize + blurUnit,
     spreadSize + spreadUnit
   ].join(" ");
-  return /* @__PURE__ */ React24.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
+  return /* @__PURE__ */ React26.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
 };
 var initialShadow = {
   $$type: "shadow",
@@ -1142,12 +1338,12 @@ var initialShadow = {
 };
 
 // src/controls/toggle-control.tsx
-import * as React27 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
+import * as React29 from "react";
+import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
-import * as React26 from "react";
-import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState4 } from "react";
+import * as React28 from "react";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
@@ -1161,14 +1357,14 @@ import {
 } from "@elementor/ui";
 
 // src/components/conditional-tooltip.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 import { Tooltip as Tooltip2 } from "@elementor/ui";
 var ConditionalTooltip = ({
   showTooltip,
   children,
   label
 }) => {
-  return showTooltip && label ? /* @__PURE__ */ React25.createElement(Tooltip2, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
+  return showTooltip && label ? /* @__PURE__ */ React27.createElement(Tooltip2, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
 };
 
 // src/components/control-toggle-button-group.tsx
@@ -1205,13 +1401,13 @@ var ControlToggleButtonGroup = ({
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  const getGridTemplateColumns = useMemo(() => {
+  const getGridTemplateColumns = useMemo2(() => {
     const isOffLimits = menuItems?.length;
     const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
     return `repeat(${itemsCount}, minmax(0, 25%)) ${templateColumnsSuffix}`;
   }, [menuItems?.length, fixedItems.length]);
-  return /* @__PURE__ */ React26.createElement(ControlActions, null, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React28.createElement(ControlActions, null, /* @__PURE__ */ React28.createElement(
     StyledToggleButtonGroup,
     {
       justify,
@@ -1226,16 +1422,16 @@ var ControlToggleButtonGroup = ({
         width: `100%`
       }
     },
-    fixedItems.map(({ label, value: buttonValue, renderContent: Content3, showTooltip }) => /* @__PURE__ */ React26.createElement(
+    fixedItems.map(({ label, value: buttonValue, renderContent: Content3, showTooltip }) => /* @__PURE__ */ React28.createElement(
       ConditionalTooltip,
       {
         key: buttonValue,
         label,
         showTooltip: showTooltip || false
       },
-      /* @__PURE__ */ React26.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React26.createElement(Content3, { size }))
+      /* @__PURE__ */ React28.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React28.createElement(Content3, { size }))
     )),
-    menuItems.length && exclusive && /* @__PURE__ */ React26.createElement(
+    menuItems.length && exclusive && /* @__PURE__ */ React28.createElement(
       SplitButtonGroup,
       {
         size,
@@ -1255,8 +1451,8 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items, value);
-  const [isMenuOpen, setIsMenuOpen] = useState4(false);
-  const menuButtonRef = useRef2(null);
+  const [isMenuOpen, setIsMenuOpen] = useState5(false);
+  const menuButtonRef = useRef4(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -1269,7 +1465,7 @@ var SplitButtonGroup = ({
     const shouldRemove = newValue === value;
     onChange(shouldRemove ? null : newValue);
   };
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
     ToggleButton,
     {
       value: previewButton.value,
@@ -1283,7 +1479,7 @@ var SplitButtonGroup = ({
       ref: menuButtonRef
     },
     previewButton.renderContent({ size })
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     ToggleButton,
     {
       size,
@@ -1294,8 +1490,8 @@ var SplitButtonGroup = ({
       ref: menuButtonRef,
       value: "__chevron-icon-button__"
     },
-    /* @__PURE__ */ React26.createElement(ChevronDownIcon, { fontSize: size })
-  ), /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React28.createElement(ChevronDownIcon, { fontSize: size })
+  ), /* @__PURE__ */ React28.createElement(
     Menu2,
     {
       open: isMenuOpen,
@@ -1313,22 +1509,22 @@ var SplitButtonGroup = ({
         mt: 0.5
       }
     },
-    items.map(({ label, value: buttonValue }) => /* @__PURE__ */ React26.createElement(
+    items.map(({ label, value: buttonValue }) => /* @__PURE__ */ React28.createElement(
       MenuItem,
       {
         key: buttonValue,
         selected: buttonValue === value,
         onClick: () => onMenuItemClick(buttonValue)
       },
-      /* @__PURE__ */ React26.createElement(ListItemText, null, /* @__PURE__ */ React26.createElement(Typography2, { sx: { fontSize: "14px" } }, label))
+      /* @__PURE__ */ React28.createElement(ListItemText, null, /* @__PURE__ */ React28.createElement(Typography2, { sx: { fontSize: "14px" } }, label))
     ))
   ));
 };
 var usePreviewButton = (items, value) => {
-  const [previewButton, setPreviewButton] = useState4(
+  const [previewButton, setPreviewButton] = useState5(
     items.find((item) => item.value === value) ?? items[0]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     const selectedButton = items.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -1346,7 +1542,7 @@ var ToggleControl = createControl(
     exclusive = true,
     maxItems
   }) => {
-    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil5);
+    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil4);
     const exclusiveValues = options.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
       const newSelectedValue = selectedValues[selectedValues.length - 1];
@@ -1360,7 +1556,7 @@ var ToggleControl = createControl(
       fullWidth,
       size
     };
-    return exclusive ? /* @__PURE__ */ React27.createElement(
+    return exclusive ? /* @__PURE__ */ React29.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1369,7 +1565,7 @@ var ToggleControl = createControl(
         disabled,
         exclusive: true
       }
-    ) : /* @__PURE__ */ React27.createElement(
+    ) : /* @__PURE__ */ React29.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1383,9 +1579,9 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-import * as React28 from "react";
+import * as React30 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
-import { TextField as TextField4 } from "@elementor/ui";
+import { TextField as TextField5 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
 var RESTRICTED_INPUT_KEYS2 = ["e", "E", "+", "-"];
 var NumberControl = createControl(
@@ -1406,8 +1602,8 @@ var NumberControl = createControl(
       const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
       setValue(Math.min(Math.max(formattedValue, min), max));
     };
-    return /* @__PURE__ */ React28.createElement(ControlActions, null, /* @__PURE__ */ React28.createElement(
-      TextField4,
+    return /* @__PURE__ */ React30.createElement(ControlActions, null, /* @__PURE__ */ React30.createElement(
+      TextField5,
       {
         size: "tiny",
         type: "number",
@@ -1428,18 +1624,18 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-import * as React30 from "react";
-import { useId as useId2, useRef as useRef3 } from "react";
+import * as React32 from "react";
+import { useId as useId2, useRef as useRef5 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
-import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack7, ToggleButton as ToggleButton2, Tooltip as Tooltip3, usePopupState as usePopupState3 } from "@elementor/ui";
+import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
+import { bindPopover as bindPopover3, bindToggle, Grid as Grid5, Popover as Popover3, Stack as Stack7, ToggleButton as ToggleButton2, Tooltip as Tooltip3, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 
 // src/components/control-label.tsx
-import * as React29 from "react";
+import * as React31 from "react";
 import { Stack as Stack6 } from "@elementor/ui";
 var ControlLabel = ({ children }) => {
-  return /* @__PURE__ */ React29.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React29.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React31.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React31.createElement(ControlAdornments, null));
 };
 
 // src/controls/equal-unequal-sizes-control.tsx
@@ -1461,8 +1657,7 @@ function EqualUnequalSizesControl({
   multiSizePropTypeUtil
 }) {
   const popupId = useId2();
-  const controlRef = useRef3(null);
-  const popupState = usePopupState3({ variant: "popover", popupId });
+  const popupState = usePopupState4({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
     value: multiSizeValue,
@@ -1470,6 +1665,7 @@ function EqualUnequalSizesControl({
     disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
   const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil2);
+  const rowRefs = [useRef5(), useRef5()];
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
@@ -1496,9 +1692,15 @@ function EqualUnequalSizesControl({
     }
     return splitEqualValue() ?? null;
   };
-  const isShowingGeneralIndicator = !isExperimentActive("e_v_3_30") || !popupState.isOpen;
+  const isShowingGeneralIndicator = !isExperimentActive2("e_v_3_30") || !popupState.isOpen;
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React30.createElement(Grid5, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React30.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React30.createElement(ControlLabel, null, label)), /* @__PURE__ */ React30.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React30.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React30.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React32.createElement(Grid5, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React32.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React32.createElement(ControlLabel, null, label)), /* @__PURE__ */ React32.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React32.createElement(
+    SizeControl,
+    {
+      placeholder: isMixed ? __6("Mixed", "elementor") : void 0,
+      anchorRef: rowRefs[0]
+    }
+  ), /* @__PURE__ */ React32.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React32.createElement(
     ToggleButton2,
     {
       size: "tiny",
@@ -1509,8 +1711,8 @@ function EqualUnequalSizesControl({
       "aria-label": tooltipLabel
     },
     icon
-  ))))), /* @__PURE__ */ React30.createElement(
-    Popover2,
+  ))))), /* @__PURE__ */ React32.createElement(
+    Popover3,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -1522,12 +1724,12 @@ function EqualUnequalSizesControl({
         vertical: "top",
         horizontal: "right"
       },
-      ...bindPopover2(popupState),
+      ...bindPopover3(popupState),
       slotProps: {
-        paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
+        paper: { sx: { mt: 0.5, width: rowRefs[0].current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React32.createElement(
       PropProvider,
       {
         propType: multiSizePropType,
@@ -1535,19 +1737,23 @@ function EqualUnequalSizesControl({
         setValue: setNestedProp,
         disabled: multiSizeDisabled
       },
-      /* @__PURE__ */ React30.createElement(PopoverContent, { p: 1.5, pt: 2.5, pb: 3 }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[2] }), /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[3] })))
+      /* @__PURE__ */ React32.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React32.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React32.createElement(MultiSizeValueControl, { item: items[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React32.createElement(MultiSizeValueControl, { item: items[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React32.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React32.createElement(MultiSizeValueControl, { item: items[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React32.createElement(MultiSizeValueControl, { item: items[3], rowRef: rowRefs[2] })))
     )
   ));
 }
-var MultiSizeValueControl = ({ item }) => {
-  const isUsingNestedProps = isExperimentActive("e_v_3_30");
-  return /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React30.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(Grid5, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(Grid5, { item: true, xs: 12 }, isUsingNestedProps ? /* @__PURE__ */ React30.createElement(ControlLabel, null, item.label) : /* @__PURE__ */ React30.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React30.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(SizeControl, { startIcon: item.icon })))));
+var MultiSizeValueControl = ({
+  item,
+  rowRef
+}) => {
+  const isUsingNestedProps = isExperimentActive2("e_v_3_30");
+  return /* @__PURE__ */ React32.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React32.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(Grid5, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid5, { item: true, xs: 12 }, isUsingNestedProps ? /* @__PURE__ */ React32.createElement(ControlLabel, null, item.label) : /* @__PURE__ */ React32.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React32.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
 };
 
 // src/controls/linked-dimensions-control.tsx
-import * as React31 from "react";
+import * as React33 from "react";
+import { useRef as useRef6 } from "react";
 import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
-import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid6, Stack as Stack8, ToggleButton as ToggleButton3, Tooltip as Tooltip4 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
@@ -1555,9 +1761,10 @@ var LinkedDimensionsControl = createControl(
   ({
     label,
     isSiteRtl = false,
-    extendedValues
+    extendedOptions
   }) => {
     const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil3);
+    const gridRowRefs = [useRef6(), useRef6()];
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
@@ -1565,7 +1772,7 @@ var LinkedDimensionsControl = createControl(
       disabled: dimensionsDisabled
     } = useBoundProp(dimensionsPropTypeUtil);
     const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
-    const isUsingNestedProps = isExperimentActive2("e_v_3_30");
+    const isUsingNestedProps = isExperimentActive3("e_v_3_30");
     const onLinkToggle = () => {
       if (!isLinked) {
         setSizeValue(dimensionsValue["block-start"]?.value ?? null);
@@ -1584,7 +1791,7 @@ var LinkedDimensionsControl = createControl(
     const linkedLabel = __7("Link %s", "elementor").replace("%s", tooltipLabel);
     const unlinkedLabel = __7("Unlink %s", "elementor").replace("%s", tooltipLabel);
     const disabled = sizeDisabled || dimensionsDisabled;
-    return /* @__PURE__ */ React31.createElement(
+    return /* @__PURE__ */ React33.createElement(
       PropProvider,
       {
         propType,
@@ -1592,7 +1799,7 @@ var LinkedDimensionsControl = createControl(
         setValue: setDimensionsValue,
         disabled
       },
-      /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React31.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React33.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React33.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React33.createElement(ControlLabel, null, label), /* @__PURE__ */ React33.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React33.createElement(
         ToggleButton3,
         {
           "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -1603,54 +1810,18 @@ var LinkedDimensionsControl = createControl(
           onChange: onLinkToggle,
           disabled
         },
-        /* @__PURE__ */ React31.createElement(LinkedIcon, { fontSize: "tiny" })
+        /* @__PURE__ */ React33.createElement(LinkedIcon, { fontSize: "tiny" })
       ))),
-      /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-start", label: __7("Top", "elementor") })), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-        Control3,
-        {
-          bind: "block-start",
-          startIcon: /* @__PURE__ */ React31.createElement(SideTopIcon, { fontSize: "tiny" }),
-          isLinked,
-          extendedValues
-        }
-      ))), /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-        Label,
-        {
-          bind: "inline-end",
-          label: isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor")
-        }
-      )), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-        Control3,
-        {
-          bind: "inline-end",
-          startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(SideRightIcon, { fontSize: "tiny" }),
-          isLinked,
-          extendedValues
-        }
-      )))),
-      /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-end", label: __7("Bottom", "elementor") })), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-        Control3,
-        {
-          bind: "block-end",
-          startIcon: /* @__PURE__ */ React31.createElement(SideBottomIcon, { fontSize: "tiny" }),
-          isLinked,
-          extendedValues
-        }
-      ))), /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-        Label,
-        {
-          bind: "inline-start",
-          label: isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor")
-        }
-      )), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+      getCssMarginProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React33.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React33.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React33.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(Label, { ...props })), /* @__PURE__ */ React33.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(
         Control3,
         {
-          bind: "inline-start",
+          bind: props.bind,
+          startIcon: icon,
           isLinked,
-          extendedValues,
-          startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(SideLeftIcon, { fontSize: "tiny" })
+          extendedOptions,
+          anchorRef: gridRowRefs[index]
         }
-      ))))
+      ))))))
     );
   }
 );
@@ -1658,30 +1829,59 @@ var Control3 = ({
   bind,
   startIcon,
   isLinked,
-  extendedValues
+  extendedOptions,
+  anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React31.createElement(SizeControl, { startIcon, extendedValues });
+    return /* @__PURE__ */ React33.createElement(SizeControl, { startIcon, extendedOptions, anchorRef });
   }
-  return /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React31.createElement(SizeControl, { startIcon, extendedValues }));
+  return /* @__PURE__ */ React33.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React33.createElement(SizeControl, { startIcon, extendedOptions, anchorRef }));
 };
 var Label = ({ label, bind }) => {
-  const isUsingNestedProps = isExperimentActive2("e_v_3_30");
+  const isUsingNestedProps = isExperimentActive3("e_v_3_30");
   if (!isUsingNestedProps) {
-    return /* @__PURE__ */ React31.createElement(ControlFormLabel, null, label);
+    return /* @__PURE__ */ React33.createElement(ControlFormLabel, null, label);
   }
-  return /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React31.createElement(ControlLabel, null, label));
+  return /* @__PURE__ */ React33.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React33.createElement(ControlLabel, null, label));
 };
+function getCssMarginProps(isSiteRtl) {
+  return [
+    [
+      {
+        bind: "block-start",
+        label: __7("Top", "elementor"),
+        icon: /* @__PURE__ */ React33.createElement(SideTopIcon, { fontSize: "tiny" })
+      },
+      {
+        bind: "inline-end",
+        label: isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React33.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React33.createElement(SideRightIcon, { fontSize: "tiny" })
+      }
+    ],
+    [
+      {
+        bind: "block-end",
+        label: __7("Bottom", "elementor"),
+        icon: /* @__PURE__ */ React33.createElement(SideBottomIcon, { fontSize: "tiny" })
+      },
+      {
+        bind: "inline-start",
+        label: isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React33.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React33.createElement(SideLeftIcon, { fontSize: "tiny" })
+      }
+    ]
+  ];
+}
 
 // src/controls/font-family-control/font-family-control.tsx
-import * as React33 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
+import * as React35 from "react";
+import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
-import { bindPopover as bindPopover3, bindTrigger as bindTrigger3, Popover as Popover3, UnstableTag as UnstableTag2, usePopupState as usePopupState4 } from "@elementor/ui";
+import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag as UnstableTag2, usePopupState as usePopupState5 } from "@elementor/ui";
 
 // src/components/font-family-selector.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
-import * as React32 from "react";
+import { useEffect as useEffect5, useRef as useRef7, useState as useState6 } from "react";
+import * as React34 from "react";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { SearchIcon, TextIcon } from "@elementor/icons";
 import {
@@ -1693,7 +1893,7 @@ import {
   MenuSubheader,
   Stack as Stack9,
   styled as styled4,
-  TextField as TextField5,
+  TextField as TextField6,
   Typography as Typography3
 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
@@ -1730,7 +1930,7 @@ var FontFamilySelector = ({
   onFontFamilyChange,
   onClose
 }) => {
-  const [searchValue, setSearchValue] = useState5("");
+  const [searchValue, setSearchValue] = useState6("");
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
@@ -1739,15 +1939,15 @@ var FontFamilySelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__PURE__ */ React32.createElement(Stack9, null, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React34.createElement(Stack9, null, /* @__PURE__ */ React34.createElement(
     PopoverHeader,
     {
       title: __8("Font Family", "elementor"),
       onClose: handleClose,
-      icon: /* @__PURE__ */ React32.createElement(TextIcon, { fontSize: SIZE2 })
+      icon: /* @__PURE__ */ React34.createElement(TextIcon, { fontSize: SIZE2 })
     }
-  ), /* @__PURE__ */ React32.createElement(Box3, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
-    TextField5,
+  ), /* @__PURE__ */ React34.createElement(Box3, { px: 1.5, pb: 1 }, /* @__PURE__ */ React34.createElement(
+    TextField6,
     {
       autoFocus: true,
       fullWidth: true,
@@ -1756,10 +1956,10 @@ var FontFamilySelector = ({
       placeholder: __8("Search", "elementor"),
       onChange: handleSearch,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React32.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React32.createElement(SearchIcon, { fontSize: SIZE2 }))
+        startAdornment: /* @__PURE__ */ React34.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React34.createElement(SearchIcon, { fontSize: SIZE2 }))
       }
     }
-  )), /* @__PURE__ */ React32.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React32.createElement(
+  )), /* @__PURE__ */ React34.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React34.createElement(
     FontList,
     {
       fontListItems: filteredFontFamilies,
@@ -1767,7 +1967,7 @@ var FontFamilySelector = ({
       handleClose,
       fontFamily
     }
-  ) : /* @__PURE__ */ React32.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React32.createElement(Stack9, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React32.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React32.createElement(Box3, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React32.createElement(Typography3, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React32.createElement(
+  ) : /* @__PURE__ */ React34.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React34.createElement(Stack9, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React34.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React34.createElement(Box3, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(Typography3, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React34.createElement(
     Typography3,
     {
       variant: "subtitle2",
@@ -1778,10 +1978,10 @@ var FontFamilySelector = ({
         justifyContent: "center"
       }
     },
-    /* @__PURE__ */ React32.createElement("span", null, "\u201C"),
-    /* @__PURE__ */ React32.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
-    /* @__PURE__ */ React32.createElement("span", null, "\u201D.")
-  )), /* @__PURE__ */ React32.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __8("Try something else.", "elementor"), /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React34.createElement("span", null, "\u201C"),
+    /* @__PURE__ */ React34.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
+    /* @__PURE__ */ React34.createElement("span", null, "\u201D.")
+  )), /* @__PURE__ */ React34.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __8("Try something else.", "elementor"), /* @__PURE__ */ React34.createElement(
     Link,
     {
       color: "secondary",
@@ -1795,7 +1995,7 @@ var FontFamilySelector = ({
 var LIST_ITEM_HEIGHT = 36;
 var LIST_ITEMS_BUFFER = 6;
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
-  const containerRef = useRef4(null);
+  const containerRef = useRef7(null);
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
   const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
     getVirtualIndexes().forEach((index) => {
@@ -1812,7 +2012,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
     overscan: LIST_ITEMS_BUFFER,
     onChange: debouncedVirtualizeChange
   });
-  useEffect4(
+  useEffect5(
     () => {
       virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
     },
@@ -1820,7 +2020,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [fontFamily]
   );
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React34.createElement(
     Box3,
     {
       ref: containerRef,
@@ -1830,7 +2030,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
         width: 220
       }
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React34.createElement(
       StyledMenuList,
       {
         role: "listbox",
@@ -1846,7 +2046,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
         const isSelected = selectedItem?.value === item.value;
         const tabIndexFallback = !selectedItem ? 0 : -1;
         if (item.type === "category") {
-          return /* @__PURE__ */ React32.createElement(
+          return /* @__PURE__ */ React34.createElement(
             MenuSubheader,
             {
               key: virtualRow.key,
@@ -1857,7 +2057,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
             item.value
           );
         }
-        return /* @__PURE__ */ React32.createElement(
+        return /* @__PURE__ */ React34.createElement(
           "li",
           {
             key: virtualRow.key,
@@ -1920,35 +2120,35 @@ var StyledMenuList = styled4(MenuList)(({ theme }) => ({
   position: "relative"
 }));
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = useState5(() => debounce(fn, delay));
-  useEffect4(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = useState6(() => debounce(fn, delay));
+  useEffect5(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
 // src/controls/font-family-control/font-family-control.tsx
 var SIZE3 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
-  const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(stringPropTypeUtil6);
-  const popoverState = usePopupState4({ variant: "popover" });
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(
+  const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(stringPropTypeUtil5);
+  const popoverState = usePopupState5({ variant: "popover" });
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(ControlActions, null, /* @__PURE__ */ React35.createElement(
     UnstableTag2,
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React33.createElement(ChevronDownIcon2, { fontSize: SIZE3 }),
+      endIcon: /* @__PURE__ */ React35.createElement(ChevronDownIcon2, { fontSize: SIZE3 }),
       ...bindTrigger3(popoverState),
       fullWidth: true,
       disabled
     }
-  )), /* @__PURE__ */ React33.createElement(
-    Popover3,
+  )), /* @__PURE__ */ React35.createElement(
+    Popover4,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      ...bindPopover3(popoverState)
+      ...bindPopover4(popoverState)
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React35.createElement(
       FontFamilySelector,
       {
         fontFamilies,
@@ -1961,14 +2161,14 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
 });
 
 // src/controls/url-control.tsx
-import * as React34 from "react";
+import * as React36 from "react";
 import { urlPropTypeUtil } from "@elementor/editor-props";
-import { TextField as TextField6 } from "@elementor/ui";
+import { TextField as TextField7 } from "@elementor/ui";
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue, disabled } = useBoundProp(urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
-    TextField6,
+  return /* @__PURE__ */ React36.createElement(ControlActions, null, /* @__PURE__ */ React36.createElement(
+    TextField7,
     {
       size: "tiny",
       fullWidth: true,
@@ -1981,14 +2181,14 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-import * as React36 from "react";
-import { useMemo as useMemo2, useState as useState6 } from "react";
+import * as React38 from "react";
+import { useMemo as useMemo3, useState as useState7 } from "react";
 import { getLinkInLinkRestriction, selectElement } from "@elementor/editor-elements";
 import {
   booleanPropTypeUtil,
   linkPropTypeUtil,
   numberPropTypeUtil as numberPropTypeUtil2,
-  stringPropTypeUtil as stringPropTypeUtil7,
+  stringPropTypeUtil as stringPropTypeUtil6,
   urlPropTypeUtil as urlPropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoTipCard } from "@elementor/editor-ui";
@@ -2000,17 +2200,17 @@ import { debounce as debounce2 } from "@elementor/utils";
 import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/autocomplete.tsx
-import * as React35 from "react";
-import { forwardRef as forwardRef2 } from "react";
+import * as React37 from "react";
+import { forwardRef as forwardRef4 } from "react";
 import { XIcon as XIcon2 } from "@elementor/icons";
 import {
   Autocomplete as AutocompleteBase,
   Box as Box4,
   IconButton as IconButton2,
   InputAdornment as InputAdornment4,
-  TextField as TextField7
+  TextField as TextField8
 } from "@elementor/ui";
-var Autocomplete = forwardRef2((props, ref) => {
+var Autocomplete = forwardRef4((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -2026,7 +2226,7 @@ var Autocomplete = forwardRef2((props, ref) => {
   const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
   const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
   const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     AutocompleteBase,
     {
       ...restProps,
@@ -2044,8 +2244,8 @@ var Autocomplete = forwardRef2((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React35.createElement(Box4, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React35.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React37.createElement(Box4, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React37.createElement(
         TextInput,
         {
           params,
@@ -2068,8 +2268,8 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React35.createElement(
-    TextField7,
+  return /* @__PURE__ */ React37.createElement(
+    TextField8,
     {
       ...params,
       placeholder,
@@ -2081,7 +2281,7 @@ var TextInput = ({
       },
       InputProps: {
         ...params.InputProps,
-        endAdornment: /* @__PURE__ */ React35.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React37.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -2090,7 +2290,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React35.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React35.createElement(IconButton2, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React35.createElement(XIcon2, { fontSize: params.size })));
+}) => /* @__PURE__ */ React37.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React37.createElement(IconButton2, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React37.createElement(XIcon2, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -2120,7 +2320,7 @@ var learnMoreButton = {
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isActive, setIsActive] = useState6(!!value);
+  const [isActive, setIsActive] = useState7(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
@@ -2128,8 +2328,8 @@ var LinkControl = createControl((props) => {
     minInputLength = 2,
     context: { elementId }
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState6(getLinkInLinkRestriction(elementId));
-  const [options, setOptions] = useState6(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState7(getLinkInLinkRestriction(elementId));
+  const [options, setOptions] = useState7(
     generateFirstLoadedOption(value)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
@@ -2155,7 +2355,7 @@ var LinkControl = createControl((props) => {
     const valueToSave = newValue ? {
       ...value,
       destination: numberPropTypeUtil2.create(newValue),
-      label: stringPropTypeUtil7.create(findMatchingOption(options, newValue)?.label || null)
+      label: stringPropTypeUtil6.create(findMatchingOption(options, newValue)?.label || null)
     } : null;
     onSaveNewValue(valueToSave);
   };
@@ -2164,7 +2364,7 @@ var LinkControl = createControl((props) => {
     const valueToSave = newValue ? {
       ...value,
       destination: urlPropTypeUtil2.create(newValue),
-      label: stringPropTypeUtil7.create("")
+      label: stringPropTypeUtil6.create("")
     } : null;
     onSaveNewValue(valueToSave);
     updateOptions(newValue);
@@ -2180,7 +2380,7 @@ var LinkControl = createControl((props) => {
     }
     debounceFetch({ ...requestParams, term: newValue });
   };
-  const debounceFetch = useMemo2(
+  const debounceFetch = useMemo3(
     () => debounce2(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -2189,7 +2389,7 @@ var LinkControl = createControl((props) => {
     ),
     [endpoint]
   );
-  return /* @__PURE__ */ React36.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React36.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React38.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React38.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React38.createElement(
     Stack10,
     {
       direction: "row",
@@ -2199,8 +2399,8 @@ var LinkControl = createControl((props) => {
         marginInlineEnd: -0.75
       }
     },
-    /* @__PURE__ */ React36.createElement(ControlFormLabel, null, __9("Link", "elementor")),
-    /* @__PURE__ */ React36.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React38.createElement(ControlFormLabel, null, __9("Link", "elementor")),
+    /* @__PURE__ */ React38.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React38.createElement(
       ToggleIconControl,
       {
         disabled: shouldDisableAddingLink,
@@ -2209,7 +2409,7 @@ var LinkControl = createControl((props) => {
         label: __9("Toggle link", "elementor")
       }
     ))
-  ), /* @__PURE__ */ React36.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React36.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React36.createElement(ControlActions, null, /* @__PURE__ */ React36.createElement(
+  ), /* @__PURE__ */ React38.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React38.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(
     Autocomplete,
     {
       options,
@@ -2220,10 +2420,10 @@ var LinkControl = createControl((props) => {
       onTextChange,
       minInputLength
     }
-  ))), /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React36.createElement(SwitchControl, { disabled: propContext.disabled || !value }))))));
+  ))), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React38.createElement(SwitchControl, { disabled: propContext.disabled || !value }))))));
 });
 var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
-  return /* @__PURE__ */ React36.createElement(IconButton3, { size: SIZE4, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React36.createElement(MinusIcon, { fontSize: SIZE4 }) : /* @__PURE__ */ React36.createElement(PlusIcon2, { fontSize: SIZE4 }));
+  return /* @__PURE__ */ React38.createElement(IconButton3, { size: SIZE4, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React38.createElement(MinusIcon, { fontSize: SIZE4 }) : /* @__PURE__ */ React38.createElement(PlusIcon2, { fontSize: SIZE4 }));
 };
 var SwitchControl = ({ disabled }) => {
   const { value = false, setValue } = useBoundProp(booleanPropTypeUtil);
@@ -2235,7 +2435,7 @@ var SwitchControl = ({ disabled }) => {
       opacity: 0
     }
   } : {};
-  return /* @__PURE__ */ React36.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React36.createElement(Grid7, { item: true }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React36.createElement(Grid7, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React36.createElement(Switch, { checked: value, onClick, disabled, inputProps })));
+  return /* @__PURE__ */ React38.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React38.createElement(Grid7, { item: true }, /* @__PURE__ */ React38.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React38.createElement(Grid7, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React38.createElement(Switch, { checked: value, onClick, disabled, inputProps })));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -2272,15 +2472,15 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
       selectElement(elementId);
     }
   };
-  return shouldRestrict && isVisible ? /* @__PURE__ */ React36.createElement(
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React38.createElement(
     Infotip,
     {
       placement: "right",
-      content: /* @__PURE__ */ React36.createElement(
+      content: /* @__PURE__ */ React38.createElement(
         InfoTipCard,
         {
           content: INFOTIP_CONTENT[reason],
-          svgIcon: /* @__PURE__ */ React36.createElement(AlertTriangleIcon, null),
+          svgIcon: /* @__PURE__ */ React38.createElement(AlertTriangleIcon, null),
           learnMoreButton,
           ctaButton: {
             label: __9("Take me there", "elementor"),
@@ -2289,16 +2489,17 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
         }
       )
     },
-    /* @__PURE__ */ React36.createElement(Box5, null, children)
-  ) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, children);
+    /* @__PURE__ */ React38.createElement(Box5, null, children)
+  ) : /* @__PURE__ */ React38.createElement(React38.Fragment, null, children);
 };
 var INFOTIP_CONTENT = {
-  descendant: /* @__PURE__ */ React36.createElement(React36.Fragment, null, __9("To add a link to this container,", "elementor"), /* @__PURE__ */ React36.createElement("br", null), __9("first remove the link from the elements inside of it.", "elementor")),
-  ancestor: /* @__PURE__ */ React36.createElement(React36.Fragment, null, __9("To add a link to this element,", "elementor"), /* @__PURE__ */ React36.createElement("br", null), __9("first remove the link from its parent container.", "elementor"))
+  descendant: /* @__PURE__ */ React38.createElement(React38.Fragment, null, __9("To add a link to this container,", "elementor"), /* @__PURE__ */ React38.createElement("br", null), __9("first remove the link from the elements inside of it.", "elementor")),
+  ancestor: /* @__PURE__ */ React38.createElement(React38.Fragment, null, __9("To add a link to this element,", "elementor"), /* @__PURE__ */ React38.createElement("br", null), __9("first remove the link from its parent container.", "elementor"))
 };
 
 // src/controls/gap-control.tsx
-import * as React37 from "react";
+import * as React39 from "react";
+import { useRef as useRef8 } from "react";
 import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid8, Stack as Stack11, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
@@ -2310,6 +2511,7 @@ var GapControl = createControl(({ label }) => {
     propType,
     disabled: directionDisabled
   } = useBoundProp(layoutDirectionPropTypeUtil);
+  const stackRef = useRef8();
   const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
@@ -2328,7 +2530,7 @@ var GapControl = createControl(({ label }) => {
   const linkedLabel = __10("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = __10("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
-  return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React37.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label), /* @__PURE__ */ React37.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React39.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React39.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(ControlLabel, null, label), /* @__PURE__ */ React39.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React39.createElement(
     ToggleButton4,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -2339,23 +2541,27 @@ var GapControl = createControl(({ label }) => {
       onChange: onLinkToggle,
       disabled
     },
-    /* @__PURE__ */ React37.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React37.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React37.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "row", isLinked })))));
+    /* @__PURE__ */ React39.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React39.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React39.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlFormLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React39.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React39.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlFormLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React39.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
 });
-var Control4 = ({ bind, isLinked }) => {
+var Control4 = ({
+  bind,
+  isLinked,
+  anchorRef
+}) => {
   if (isLinked) {
-    return /* @__PURE__ */ React37.createElement(SizeControl, null);
+    return /* @__PURE__ */ React39.createElement(SizeControl, { anchorRef });
   }
-  return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(SizeControl, null));
+  return /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React39.createElement(SizeControl, { anchorRef }));
 };
 
 // src/controls/aspect-ratio-control.tsx
-import * as React38 from "react";
-import { useState as useState7 } from "react";
-import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
+import * as React40 from "react";
+import { useState as useState8 } from "react";
+import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
-import { Grid as Grid9, Select as Select2, Stack as Stack12, TextField as TextField8 } from "@elementor/ui";
+import { Grid as Grid9, Select as Select2, Stack as Stack12, TextField as TextField9 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 var RATIO_OPTIONS = [
   { label: __11("Auto", "elementor"), value: "auto" },
@@ -2369,13 +2575,13 @@ var RATIO_OPTIONS = [
 ];
 var CUSTOM_RATIO = "custom";
 var AspectRatioControl = createControl(({ label }) => {
-  const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil8);
+  const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil7);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
-  const [isCustom, setIsCustom] = useState7(isCustomSelected);
-  const [customWidth, setCustomWidth] = useState7(initialWidth);
-  const [customHeight, setCustomHeight] = useState7(initialHeight);
-  const [selectedValue, setSelectedValue] = useState7(
+  const [isCustom, setIsCustom] = useState8(isCustomSelected);
+  const [customWidth, setCustomWidth] = useState8(initialWidth);
+  const [customHeight, setCustomHeight] = useState8(initialHeight);
+  const [selectedValue, setSelectedValue] = useState8(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
   const handleSelectChange = (event) => {
@@ -2402,7 +2608,7 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
-  return /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(Stack12, { direction: "column", pt: 2, gap: 2 }, /* @__PURE__ */ React38.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, label)), /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(Stack12, { direction: "column", pt: 2, gap: 2 }, /* @__PURE__ */ React40.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, label)), /* @__PURE__ */ React40.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(
     Select2,
     {
       size: "tiny",
@@ -2414,10 +2620,10 @@ var AspectRatioControl = createControl(({ label }) => {
       fullWidth: true
     },
     [...RATIO_OPTIONS, { label: __11("Custom", "elementor"), value: CUSTOM_RATIO }].map(
-      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React38.createElement(MenuListItem3, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React40.createElement(MenuListItem3, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
-  ))), isCustom && /* @__PURE__ */ React38.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
-    TextField8,
+  ))), isCustom && /* @__PURE__ */ React40.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(
+    TextField9,
     {
       size: "tiny",
       type: "number",
@@ -2426,11 +2632,11 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customWidth,
       onChange: handleCustomWidthChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React38.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React40.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
       }
     }
-  )), /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
-    TextField8,
+  )), /* @__PURE__ */ React40.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(
+    TextField9,
     {
       size: "tiny",
       type: "number",
@@ -2439,15 +2645,15 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customHeight,
       onChange: handleCustomHeightChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React38.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React40.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
       }
     }
   )))));
 });
 
 // src/controls/svg-media-control.tsx
-import * as React40 from "react";
-import { useState as useState9 } from "react";
+import * as React42 from "react";
+import { useState as useState10 } from "react";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
 import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled5 } from "@elementor/ui";
@@ -2455,8 +2661,8 @@ import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWp
 import { __ as __13 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
-import * as React39 from "react";
-import { useState as useState8 } from "react";
+import * as React41 from "react";
+import { useState as useState9 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import {
   Button as Button3,
@@ -2489,7 +2695,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
   const { canUser } = useCurrentUserCapabilities();
-  const [isError, setIsError] = useState8(false);
+  const [isError, setIsError] = useState9(false);
   const canManageOptions = canUser("manage_options");
   const onClose = (enabled) => {
     props.onClose(enabled);
@@ -2508,9 +2714,9 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return canManageOptions ? /* @__PURE__ */ React39.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React39.createElement(NonAdminDialog, { ...dialogProps });
+  return canManageOptions ? /* @__PURE__ */ React41.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React41.createElement(NonAdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React39.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React39.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React39.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React39.createElement(Divider3, null), /* @__PURE__ */ React39.createElement(DialogContent, null, /* @__PURE__ */ React39.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React39.createElement(React39.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React39.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React39.createElement(DialogActions, null, /* @__PURE__ */ React39.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __12("Cancel", "elementor")), /* @__PURE__ */ React39.createElement(
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React41.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React41.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React41.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React41.createElement(Divider3, null), /* @__PURE__ */ React41.createElement(DialogContent, null, /* @__PURE__ */ React41.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React41.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React41.createElement(DialogActions, null, /* @__PURE__ */ React41.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __12("Cancel", "elementor")), /* @__PURE__ */ React41.createElement(
   Button3,
   {
     size: "medium",
@@ -2519,9 +2725,9 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React39.createElement(CircularProgress2, { size: 24 }) : __12("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React41.createElement(CircularProgress2, { size: 24 }) : __12("Enable", "elementor")
 )));
-var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React39.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React39.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React39.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React39.createElement(Divider3, null), /* @__PURE__ */ React39.createElement(DialogContent, null, /* @__PURE__ */ React39.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React39.createElement(DialogActions, null, /* @__PURE__ */ React39.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __12("Got it", "elementor"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React41.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React41.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React41.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React41.createElement(Divider3, null), /* @__PURE__ */ React41.createElement(DialogContent, null, /* @__PURE__ */ React41.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React41.createElement(DialogActions, null, /* @__PURE__ */ React41.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __12("Got it", "elementor"))));
 
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
@@ -2554,7 +2760,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState9(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState10(false);
   const { open } = useWpMediaFrame2({
     mediaTypes: ["svg"],
     multiple: false,
@@ -2582,7 +2788,7 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
-  return /* @__PURE__ */ React40.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React40.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React40.createElement(ControlFormLabel, null, " ", __13("SVG", "elementor"), " "), /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React40.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React40.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React42.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React42.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React42.createElement(ControlFormLabel, null, " ", __13("SVG", "elementor"), " "), /* @__PURE__ */ React42.createElement(ControlActions, null, /* @__PURE__ */ React42.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React42.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React42.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React42.createElement(
     CardMedia2,
     {
       component: "img",
@@ -2590,7 +2796,7 @@ var SvgMediaControl = createControl(() => {
       alt: __13("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React40.createElement(
+  )), /* @__PURE__ */ React42.createElement(
     CardOverlay2,
     {
       sx: {
@@ -2599,7 +2805,7 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React40.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React42.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React42.createElement(
       Button4,
       {
         size: "tiny",
@@ -2608,13 +2814,13 @@ var SvgMediaControl = createControl(() => {
         onClick: () => handleClick(MODE_BROWSE)
       },
       __13("Select SVG", "elementor")
-    ), /* @__PURE__ */ React40.createElement(
+    ), /* @__PURE__ */ React42.createElement(
       Button4,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React40.createElement(UploadIcon2, null),
+        startIcon: /* @__PURE__ */ React42.createElement(UploadIcon2, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
       __13("Upload", "elementor")
@@ -2623,14 +2829,14 @@ var SvgMediaControl = createControl(() => {
 });
 
 // src/controls/background-control/background-control.tsx
-import * as React47 from "react";
+import * as React49 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
-import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
 import { Grid as Grid15 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React46 from "react";
+import * as React48 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
@@ -2646,14 +2852,14 @@ import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React41 from "react";
+import * as React43 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
   colorStopPropTypeUtil,
   gradientColorStopPropTypeUtil,
   numberPropTypeUtil as numberPropTypeUtil3,
-  stringPropTypeUtil as stringPropTypeUtil9
+  stringPropTypeUtil as stringPropTypeUtil8
 } from "@elementor/editor-props";
 import { UnstableGradientBox } from "@elementor/ui";
 var BackgroundGradientColorControl = createControl(() => {
@@ -2661,13 +2867,13 @@ var BackgroundGradientColorControl = createControl(() => {
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = stringPropTypeUtil9.create(newValue.positions.join(" "));
+      transformedValue.positions = stringPropTypeUtil8.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: stringPropTypeUtil9.create(newValue.type),
+    type: stringPropTypeUtil8.create(newValue.type),
     angle: numberPropTypeUtil3.create(newValue.angle),
     stops: gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
@@ -2693,7 +2899,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React41.createElement(ControlActions, null, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React43.createElement(ControlActions, null, /* @__PURE__ */ React43.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -2703,7 +2909,7 @@ var BackgroundGradientColorControl = createControl(() => {
   ));
 });
 var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
-  type: stringPropTypeUtil9.create("linear"),
+  type: stringPropTypeUtil8.create("linear"),
   angle: numberPropTypeUtil3.create(180),
   stops: gradientColorStopPropTypeUtil.create([
     colorStopPropTypeUtil.create({
@@ -2718,7 +2924,7 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React42 from "react";
+import * as React44 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid10 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
@@ -2726,23 +2932,24 @@ var attachmentControlOptions = [
   {
     value: "fixed",
     label: __14("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(PinIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
     label: __14("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(PinnedOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, __14("Attachment", "elementor"))), /* @__PURE__ */ React42.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React42.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, __14("Attachment", "elementor"))), /* @__PURE__ */ React44.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React44.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React43 from "react";
-import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
+import * as React45 from "react";
+import { useRef as useRef9 } from "react";
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid11, Select as Select3 } from "@elementor/ui";
@@ -2761,8 +2968,9 @@ var backgroundPositionOptions = [
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil10);
+  const stringPropContext = useBoundProp(stringPropTypeUtil9);
   const isCustom = !!backgroundImageOffsetContext.value;
+  const rowRef = useRef9();
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -2771,7 +2979,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React43.createElement(Grid11, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, __15("Position", "elementor"))), /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React45.createElement(Grid11, { container: true, spacing: 1.5 }, /* @__PURE__ */ React45.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, __15("Position", "elementor"))), /* @__PURE__ */ React45.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React45.createElement(
     Select3,
     {
       fullWidth: true,
@@ -2780,12 +2988,24 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React43.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React43.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(Grid11, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React45.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React45.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React45.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(Grid11, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React45.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React45.createElement(
+    SizeControl,
+    {
+      startIcon: /* @__PURE__ */ React45.createElement(LetterXIcon, { fontSize: "tiny" }),
+      anchorRef: rowRef
+    }
+  ))), /* @__PURE__ */ React45.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React45.createElement(
+    SizeControl,
+    {
+      startIcon: /* @__PURE__ */ React45.createElement(LetterYIcon, { fontSize: "tiny" }),
+      anchorRef: rowRef
+    }
+  )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React44 from "react";
+import * as React46 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
 import { Grid as Grid12 } from "@elementor/ui";
 import { __ as __16 } from "@wordpress/i18n";
@@ -2793,42 +3013,43 @@ var repeatControlOptions = [
   {
     value: "repeat",
     label: __16("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(GridDotsIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
     label: __16("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(DotsHorizontalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
     label: __16("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(DotsVerticalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
     label: __16("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(XIcon3, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, __16("Repeat", "elementor"))), /* @__PURE__ */ React44.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React44.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React46.createElement(PopoverGridContainer, null, /* @__PURE__ */ React46.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ControlFormLabel, null, __16("Repeat", "elementor"))), /* @__PURE__ */ React46.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React46.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React45 from "react";
-import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
+import * as React47 from "react";
+import { useRef as useRef10 } from "react";
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
   ArrowsMoveHorizontalIcon as ArrowsMoveHorizontalIcon2,
   ArrowsMoveVerticalIcon as ArrowsMoveVerticalIcon2,
   LetterAIcon,
-  PencilIcon
+  PencilIcon as PencilIcon2
 } from "@elementor/icons";
 import { Grid as Grid13 } from "@elementor/ui";
 import { __ as __17 } from "@wordpress/i18n";
@@ -2836,32 +3057,33 @@ var sizeControlOptions = [
   {
     value: "auto",
     label: __17("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
     label: __17("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
     label: __17("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(ArrowBarBothIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: __17("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(PencilIcon2, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil11);
+  const stringPropContext = useBoundProp(stringPropTypeUtil10);
   const isCustom = !!backgroundImageScaleContext.value;
+  const rowRef = useRef10();
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -2869,7 +3091,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React45.createElement(Grid13, { container: true, spacing: 1.5 }, /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, __17("Size", "elementor"))), /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React47.createElement(Grid13, { container: true, spacing: 1.5 }, /* @__PURE__ */ React47.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React47.createElement(PopoverGridContainer, null, /* @__PURE__ */ React47.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlFormLabel, null, __17("Size", "elementor"))), /* @__PURE__ */ React47.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -2878,23 +3100,25 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React45.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React45.createElement(
+  )))), isCustom ? /* @__PURE__ */ React47.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React47.createElement(Grid13, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React47.createElement(PopoverGridContainer, null, /* @__PURE__ */ React47.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React47.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React45.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
-      extendedValues: ["auto"]
+      startIcon: /* @__PURE__ */ React47.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      extendedOptions: ["auto"],
+      anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React45.createElement(
+  ))), /* @__PURE__ */ React47.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React47.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React45.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
-      extendedValues: ["auto"]
+      startIcon: /* @__PURE__ */ React47.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      extendedOptions: ["auto"],
+      anchorRef: rowRef
     }
   )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef5 } from "react";
+import { useRef as useRef11 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -2919,7 +3143,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef5({
+  const valuesHistory = useRef11({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -2994,7 +3218,7 @@ var backgroundResolutionOptions = [
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue, disabled } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React46.createElement(PropProvider, { propType, value: overlayValues, setValue, disabled }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React48.createElement(PropProvider, { propType, value: overlayValues, setValue, disabled }, /* @__PURE__ */ React48.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -3012,7 +3236,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
   ));
 });
 var ItemContent2 = ({ anchorEl = null, bind }) => {
-  return /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React46.createElement(Content2, { anchorEl }));
+  return /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React48.createElement(Content2, { anchorEl }));
 };
 var Content2 = ({ anchorEl }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
@@ -3020,7 +3244,7 @@ var Content2 = ({ anchorEl }) => {
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React46.createElement(Box6, { sx: { width: "100%" } }, /* @__PURE__ */ React46.createElement(Box6, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React48.createElement(Box6, { sx: { width: "100%" } }, /* @__PURE__ */ React48.createElement(Box6, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React48.createElement(
     Tabs,
     {
       size: "small",
@@ -3028,19 +3252,19 @@ var Content2 = ({ anchorEl }) => {
       ...getTabsProps(),
       "aria-label": __18("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React46.createElement(Tab, { label: __18("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React46.createElement(Tab, { label: __18("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React46.createElement(Tab, { label: __18("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React46.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React46.createElement(PopoverContent, null, /* @__PURE__ */ React46.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React46.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React46.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React46.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React46.createElement(PopoverContent, null, /* @__PURE__ */ React46.createElement(ColorOverlayContent, { anchorEl }))));
+    /* @__PURE__ */ React48.createElement(Tab, { label: __18("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React48.createElement(Tab, { label: __18("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React48.createElement(Tab, { label: __18("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React48.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React48.createElement(PopoverContent, null, /* @__PURE__ */ React48.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React48.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React48.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React48.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React48.createElement(PopoverContent, null, /* @__PURE__ */ React48.createElement(ColorOverlayContent, { anchorEl }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React46.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React48.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React46.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React48.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React46.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React48.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -3053,11 +3277,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React46.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React48.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React48.createElement(
     CardMedia3,
     {
       image: imageUrl,
@@ -3072,47 +3296,47 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React46.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React48.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React46.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React48.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React46.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React48.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React46.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React48.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React46.createElement("span", null, color);
+  return /* @__PURE__ */ React48.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React46.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React48.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React46.createElement("span", null, __18("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React48.createElement("span", null, __18("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React46.createElement("span", null, __18("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React48.createElement("span", null, __18("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React48.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React48.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React46.createElement(Grid14, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React46.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React48.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React48.createElement(Grid14, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React48.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React48.createElement(
     ImageControl,
     {
       resolutionLabel: __18("Resolution", "elementor"),
       sizes: backgroundResolutionOptions
     }
-  )))), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayAttachment, null)));
+  )))), /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React48.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React48.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React48.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React48.createElement(BackgroundImageOverlayAttachment, null)));
 };
 var StyledUnstableColorIndicator = styled6(UnstableColorIndicator2)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -3150,13 +3374,13 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  const isUsingNestedProps = isExperimentActive3("e_v_3_30");
+  const isUsingNestedProps = isExperimentActive4("e_v_3_30");
   const colorLabel = __19("Color", "elementor");
-  return /* @__PURE__ */ React47.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React47.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React47.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(Grid15, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React47.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React47.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React47.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ColorControl, null)))));
+  return /* @__PURE__ */ React49.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React49.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React49.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(Grid15, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React49.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React49.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React49.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ColorControl, null)))));
 });
 
 // src/controls/switch-control.tsx
-import * as React48 from "react";
+import * as React50 from "react";
 import { booleanPropTypeUtil as booleanPropTypeUtil2 } from "@elementor/editor-props";
 import { Switch as Switch2 } from "@elementor/ui";
 var SwitchControl2 = createControl(() => {
@@ -3164,7 +3388,7 @@ var SwitchControl2 = createControl(() => {
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React48.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React48.createElement(Switch2, { checked: !!value, onChange: handleChange, size: "small", disabled }));
+  return /* @__PURE__ */ React50.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React50.createElement(Switch2, { checked: !!value, onChange: handleChange, size: "small", disabled }));
 });
 export {
   AspectRatioControl,