@elementor/editor-controls 0.32.0 → 0.34.0

package/dist/index.mjs

@@ -30,7 +30,8 @@ var PropProvider = ({
   value,
   setValue,
   propType,
-  placeholder
+  placeholder,
+  disabled
 }) => {
   return /* @__PURE__ */ React.createElement(
     PropContext.Provider,
@@ -39,7 +40,8 @@ var PropProvider = ({
         value,
         propType,
         setValue,
-        placeholder
+        placeholder,
+        disabled
       }
     },
     children
@@ -301,14 +303,19 @@ var FloatingBarContainer = styled("span")`
 	.MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
 		display: none;
 	}
+
+	.MuiFloatingActionBar-popper {
+		z-index: 1000;
+	}
 `;
 function ControlActions({ children }) {
   const { items } = useControlActions();
-  if (items.length === 0) {
+  const { disabled } = useBoundProp();
+  if (items.length === 0 || disabled) {
     return children;
   }
   const menuItems = items.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React7.createElement(MenuItem2, { key: id }));
-  return /* @__PURE__ */ React7.createElement(FloatingBarContainer, null, /* @__PURE__ */ React7.createElement(UnstableFloatingActionBar, { actions: menuItems }, children));
+  return /* @__PURE__ */ React7.createElement(FloatingBarContainer, null, /* @__PURE__ */ React7.createElement(UnstableFloatingActionBar, { actions: menuItems, placement: "bottom-start" }, children));
 }
 
 // src/controls/image-media-control.tsx
@@ -359,7 +366,7 @@ import { stringPropTypeUtil } from "@elementor/editor-props";
 import { MenuListItem } from "@elementor/editor-ui";
 import { Select } from "@elementor/ui";
 var SelectControl = createControl(({ options, onChange }) => {
-  const { value, setValue } = useBoundProp(stringPropTypeUtil);
+  const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil);
   const handleChange = (event) => {
     const newValue = event.target.value || null;
     onChange?.(newValue, value);
@@ -373,6 +380,7 @@ var SelectControl = createControl(({ options, onChange }) => {
       size: "tiny",
       value: value ?? "",
       onChange: handleChange,
+      disabled,
       fullWidth: true
     },
     options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
@@ -394,13 +402,14 @@ import * as React11 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
 import { TextField } from "@elementor/ui";
 var TextControl = createControl(({ placeholder }) => {
-  const { value, setValue } = useBoundProp(stringPropTypeUtil2);
+  const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil2);
   const handleChange = (event) => setValue(event.target.value);
   return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
     TextField,
     {
       size: "tiny",
       fullWidth: true,
+      disabled,
       value: value ?? "",
       onChange: handleChange,
       placeholder
@@ -413,7 +422,7 @@ import * as React12 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
 import { TextField as TextField2 } from "@elementor/ui";
 var TextAreaControl = createControl(({ placeholder }) => {
-  const { value, setValue } = useBoundProp(stringPropTypeUtil3);
+  const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil3);
   const handleChange = (event) => {
     setValue(event.target.value);
   };
@@ -424,6 +433,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
       multiline: true,
       fullWidth: true,
       minRows: 5,
+      disabled,
       value: value ?? "",
       onChange: handleChange,
       placeholder
@@ -435,7 +445,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
 import * as React14 from "react";
 import { useRef } from "react";
 import { sizePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
-import { InputAdornment as InputAdornment2 } from "@elementor/ui";
+import { Box, InputAdornment as InputAdornment2 } from "@elementor/ui";
 
 // src/components/text-field-inner-selection.tsx
 import * as React13 from "react";
@@ -452,7 +462,8 @@ var TextFieldInnerSelection = forwardRef(
     onKeyDown,
     onKeyUp,
     endAdornment,
-    startAdornment
+    startAdornment,
+    disabled
   }, ref) => {
     return /* @__PURE__ */ React13.createElement(
       TextField3,
@@ -462,6 +473,7 @@ var TextFieldInnerSelection = forwardRef(
         fullWidth: true,
         type,
         value,
+        disabled,
         onChange,
         onKeyDown,
         onKeyUp,
@@ -478,7 +490,8 @@ var TextFieldInnerSelection = forwardRef(
 var SelectionEndAdornment = ({
   options,
   onClick,
-  value
+  value,
+  disabled
 }) => {
   const popupState = usePopupState({
     variant: "popover",
@@ -493,6 +506,7 @@ var SelectionEndAdornment = ({
     {
       size: "small",
       color: "secondary",
+      disabled,
       sx: { font: "inherit", minWidth: "initial", textTransform: "uppercase" },
       ...bindTrigger(popupState)
     },
@@ -539,7 +553,7 @@ var defaultUnit = "px";
 var defaultSize = NaN;
 var SizeControl = createControl(
   ({ units: units2 = defaultUnits, extendedValues = [], placeholder, startIcon }) => {
-    const { value: sizeValue, setValue: setSizeValue, restoreValue } = useBoundProp(sizePropTypeUtil);
+    const { value: sizeValue, setValue: setSizeValue, restoreValue, disabled } = useBoundProp(sizePropTypeUtil);
     const [state, setState] = useSyncExternalState({
       external: sizeValue,
       setExternal: setSizeValue,
@@ -563,6 +577,7 @@ var SizeControl = createControl(
     return /* @__PURE__ */ React14.createElement(
       Input,
       {
+        disabled,
         size: state.size,
         unit: state.unit,
         placeholder,
@@ -606,7 +621,8 @@ var SizeInput = ({
   startIcon,
   onBlur,
   size,
-  unit
+  unit,
+  disabled
 }) => {
   const unitInputBufferRef = useRef("");
   const handleKeyUp = (event) => {
@@ -623,26 +639,25 @@ var SizeInput = ({
       handleUnitChange(matchedUnit);
     }
   };
-  return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(Box, null, /* @__PURE__ */ React14.createElement(
     TextFieldInnerSelection,
     {
+      disabled,
       endAdornment: /* @__PURE__ */ React14.createElement(
         SelectionEndAdornment,
         {
+          disabled,
           options: units2,
           onClick: handleUnitChange,
           value: unit ?? defaultUnit
         }
       ),
       placeholder,
-      startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(InputAdornment2, { position: "start" }, startIcon) : void 0,
+      startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
       type: "number",
       value: Number.isNaN(size) ? "" : size,
       onChange: handleSizeChange,
-      onBlur: (event) => {
-        unitInputBufferRef.current = "";
-        onBlur?.(event);
-      },
+      onBlur,
       onKeyDown: (event) => {
         if (RESTRICTED_INPUT_KEYS.includes(event.key)) {
           event.preventDefault();
@@ -650,7 +665,7 @@ var SizeInput = ({
       },
       onKeyUp: handleKeyUp
     }
-  ));
+  )));
 };
 
 // src/controls/stroke-control.tsx
@@ -670,7 +685,7 @@ import { colorPropTypeUtil } from "@elementor/editor-props";
 import { UnstableColorField } from "@elementor/ui";
 var ColorControl = createControl(
   ({ propTypeUtil = colorPropTypeUtil, anchorEl, slotProps = {}, ...props }) => {
-    const { value, setValue } = useBoundProp(propTypeUtil);
+    const { value, setValue, disabled } = useBoundProp(propTypeUtil);
     const handleChange = (selectedColor) => {
       setValue(selectedColor || null);
     };
@@ -682,6 +697,7 @@ var ColorControl = createControl(
         value: value ?? "",
         onChange: handleChange,
         ...props,
+        disabled,
         slotProps: {
           ...slotProps,
           colorPicker: {
@@ -718,7 +734,7 @@ import { __ as __5 } from "@wordpress/i18n";
 // src/components/popover-content.tsx
 import * as React18 from "react";
 import { Stack as Stack4 } from "@elementor/ui";
-var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React18.createElement(Stack4, { alignItems, gap, p }, children);
+var PopoverContent = ({ alignItems, gap = 1.5, p, pt, pb, children }) => /* @__PURE__ */ React18.createElement(Stack4, { alignItems, gap, p, pt, pb }, children);
 
 // src/components/popover-grid-container.tsx
 import * as React19 from "react";
@@ -737,7 +753,7 @@ import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "@elementor/icons
 import {
   bindPopover,
   bindTrigger as bindTrigger2,
-  Box,
+  Box as Box2,
   IconButton,
   Popover,
   Stack as Stack5,
@@ -860,6 +876,7 @@ var EMPTY_OPEN_ITEM = -1;
 var Repeater = ({
   label,
   itemSettings,
+  disabled = false,
   openOnAdd = false,
   addToBottom = false,
   values: repeaterValues = [],
@@ -913,8 +930,8 @@ var Repeater = ({
     setItems(
       items.map((value, pos) => {
         if (pos === index) {
-          const { disabled, ...rest } = value;
-          return { ...rest, ...disabled ? {} : { disabled: true } };
+          const { disabled: propDisabled, ...rest } = value;
+          return { ...rest, ...propDisabled ? {} : { disabled: true } };
         }
         return value;
       })
@@ -929,6 +946,7 @@ var Repeater = ({
       });
     });
   };
+  const ItemWrapper = disabled ? React23.Fragment : SortableItem;
   return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(
     Stack5,
     {
@@ -943,8 +961,9 @@ var Repeater = ({
     /* @__PURE__ */ React23.createElement(
       IconButton,
       {
-        sx: { ml: "auto" },
         size: SIZE,
+        sx: { ml: "auto" },
+        disabled,
         onClick: addRepeaterItem,
         "aria-label": __4("Add item", "elementor")
       },
@@ -955,10 +974,11 @@ var Repeater = ({
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React23.createElement(SortableItem, { id: key, key: `sortable-${key}` }, /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React23.createElement(ItemWrapper, { id: key, key: `sortable-${key}` }, /* @__PURE__ */ React23.createElement(
       RepeaterItem,
       {
-        disabled: value?.disabled,
+        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 })),
         removeItem: () => removeRepeaterItem(index),
@@ -973,23 +993,25 @@ var Repeater = ({
 };
 var RepeaterItem = ({
   label,
-  disabled,
+  propDisabled,
   startIcon,
   children,
   removeItem,
   duplicateItem,
   toggleDisableItem,
   openOnMount,
-  onOpen
+  onOpen,
+  disabled
 }) => {
   const [anchorEl, setAnchorEl] = useState3(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = __4("Duplicate", "elementor");
-  const toggleLabel = disabled ? __4("Show", "elementor") : __4("Hide", "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(
     UnstableTag,
     {
+      disabled,
       label,
       showActionsOnHover: true,
       fullWidth: true,
@@ -998,7 +1020,7 @@ 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 }, disabled ? /* @__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__ */ 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 }))))
     }
   ), /* @__PURE__ */ React23.createElement(
     Popover,
@@ -1014,7 +1036,7 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React23.createElement(Box, null, children({ anchorEl }))
+    /* @__PURE__ */ React23.createElement(Box2, null, children({ anchorEl }))
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
@@ -1037,11 +1059,12 @@ var usePopover = (openOnMount, onOpen) => {
 
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
-  const { propType, value, setValue } = useBoundProp(boxShadowPropTypeUtil);
+  const { propType, value, setValue, disabled } = useBoundProp(boxShadowPropTypeUtil);
   return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(
     Repeater,
     {
       openOnAdd: true,
+      disabled,
       values: value ?? [],
       setValues: setValue,
       label: __5("Box shadow", "elementor"),
@@ -1172,7 +1195,8 @@ var ControlToggleButtonGroup = ({
   items,
   maxItems,
   exclusive = false,
-  fullWidth = false
+  fullWidth = false,
+  disabled
 }) => {
   const shouldSliceItems = exclusive && maxItems !== void 0 && items.length > maxItems;
   const menuItems = shouldSliceItems ? items.slice(maxItems - 1) : [];
@@ -1187,13 +1211,14 @@ var ControlToggleButtonGroup = ({
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
     return `repeat(${itemsCount}, minmax(0, 25%)) ${templateColumnsSuffix}`;
   }, [menuItems?.length, fixedItems.length]);
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(ControlActions, null, /* @__PURE__ */ React26.createElement(
     StyledToggleButtonGroup,
     {
       justify,
       value,
       onChange: handleChange,
       exclusive,
+      disabled,
       sx: {
         direction: isRtl ? "rtl /* @noflip */" : "ltr /* @noflip */",
         display: "grid",
@@ -1321,7 +1346,7 @@ var ToggleControl = createControl(
     exclusive = true,
     maxItems
   }) => {
-    const { value, setValue, placeholder } = useBoundProp(stringPropTypeUtil5);
+    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil5);
     const exclusiveValues = options.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
       const newSelectedValue = selectedValues[selectedValues.length - 1];
@@ -1341,6 +1366,7 @@ var ToggleControl = createControl(
         ...toggleButtonGroupProps,
         value: value ?? placeholder ?? null,
         onChange: setValue,
+        disabled,
         exclusive: true
       }
     ) : /* @__PURE__ */ React27.createElement(
@@ -1349,6 +1375,7 @@ var ToggleControl = createControl(
         ...toggleButtonGroupProps,
         value: (value ?? placeholder)?.split(" ") ?? [],
         onChange: handleNonExclusiveToggle,
+        disabled,
         exclusive: false
       }
     );
@@ -1369,7 +1396,7 @@ var NumberControl = createControl(
     step = 1,
     shouldForceInt = false
   }) => {
-    const { value, setValue } = useBoundProp(numberPropTypeUtil);
+    const { value, setValue, disabled } = useBoundProp(numberPropTypeUtil);
     const handleChange = (event) => {
       const eventValue = event.target.value;
       if (isEmptyOrNaN(eventValue)) {
@@ -1385,6 +1412,7 @@ var NumberControl = createControl(
         size: "tiny",
         type: "number",
         fullWidth: true,
+        disabled,
         value: isEmptyOrNaN(value) ? "" : value,
         onChange: handleChange,
         placeholder,
@@ -1403,6 +1431,7 @@ var NumberControl = createControl(
 import * as React30 from "react";
 import { useId as useId2, useRef as useRef3 } 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 { __ as __6 } from "@wordpress/i18n";
 
@@ -1437,9 +1466,10 @@ function EqualUnequalSizesControl({
   const {
     propType: multiSizePropType,
     value: multiSizeValue,
-    setValue: setMultiSizeValue
+    setValue: setMultiSizeValue,
+    disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil2);
+  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil2);
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
@@ -1475,7 +1505,8 @@ function EqualUnequalSizesControl({
       sx: { marginLeft: "auto" },
       ...bindToggle(popupState),
       selected: popupState.isOpen,
-      "aria-label": tooltipLabel
+      "aria-label": tooltipLabel,
+      disabled: multiSizeDisabled || sizeDisabled
     },
     icon
   ))))), /* @__PURE__ */ React30.createElement(
@@ -1496,14 +1527,18 @@ function EqualUnequalSizesControl({
         paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React30.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React30.createElement(PopoverContent, { p: 1.5 }, /* @__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__ */ React30.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__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] }))))
   ));
 }
-var MultiSizeValueControl = ({ item }) => /* @__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 }, /* @__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 }) => {
+  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 })))));
+};
 
 // src/controls/linked-dimensions-control.tsx
 import * as React31 from "react";
 import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
+import { isExperimentActive as isExperimentActive2 } 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";
@@ -1513,13 +1548,15 @@ var LinkedDimensionsControl = createControl(
     isSiteRtl = false,
     extendedValues
   }) => {
+    const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil3);
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
-      propType
+      propType,
+      disabled: dimensionsDisabled
     } = useBoundProp(dimensionsPropTypeUtil);
-    const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil3);
     const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
+    const isUsingNestedProps = isExperimentActive2("e_v_3_30");
     const onLinkToggle = () => {
       if (!isLinked) {
         setSizeValue(dimensionsValue["block-start"]?.value ?? null);
@@ -1537,7 +1574,7 @@ var LinkedDimensionsControl = createControl(
     const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
     const linkedLabel = __7("Link %s", "elementor").replace("%s", tooltipLabel);
     const unlinkedLabel = __7("Unlink %s", "elementor").replace("%s", tooltipLabel);
-    return /* @__PURE__ */ React31.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(
+    return /* @__PURE__ */ React31.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__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(
       ToggleButton3,
       {
         "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -1545,10 +1582,11 @@ var LinkedDimensionsControl = createControl(
         value: "check",
         selected: isLinked,
         sx: { marginLeft: "auto" },
-        onChange: onLinkToggle
+        onChange: onLinkToggle,
+        disabled: sizeDisabled || dimensionsDisabled
       },
       /* @__PURE__ */ React31.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(ControlFormLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    ))), /* @__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",
@@ -1556,7 +1594,13 @@ var LinkedDimensionsControl = createControl(
         isLinked,
         extendedValues
       }
-    ))), /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor"))), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    ))), /* @__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",
@@ -1564,7 +1608,7 @@ var LinkedDimensionsControl = createControl(
         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(ControlFormLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    )))), /* @__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",
@@ -1572,7 +1616,13 @@ var LinkedDimensionsControl = createControl(
         isLinked,
         extendedValues
       }
-    ))), /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor"))), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    ))), /* @__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(
       Control3,
       {
         bind: "inline-start",
@@ -1594,6 +1644,13 @@ var Control3 = ({
   }
   return /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React31.createElement(SizeControl, { startIcon, extendedValues }));
 };
+var Label = ({ label, bind }) => {
+  const isUsingNestedProps = isExperimentActive2("e_v_3_30");
+  if (!isUsingNestedProps) {
+    return /* @__PURE__ */ React31.createElement(ControlFormLabel, null, label);
+  }
+  return /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React31.createElement(ControlLabel, null, label));
+};
 
 // src/controls/font-family-control/font-family-control.tsx
 import * as React32 from "react";
@@ -1603,7 +1660,7 @@ import { ChevronDownIcon as ChevronDownIcon2, SearchIcon, TextIcon, XIcon as XIc
 import {
   bindPopover as bindPopover3,
   bindTrigger as bindTrigger3,
-  Box as Box2,
+  Box as Box3,
   Divider as Divider2,
   IconButton as IconButton2,
   InputAdornment as InputAdornment3,
@@ -1648,7 +1705,7 @@ var enqueueFont = (fontFamily, context = "editor") => {
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
   const [searchValue, setSearchValue] = useState5("");
-  const { value: fontFamily, setValue: setFontFamily } = useBoundProp(stringPropTypeUtil6);
+  const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(stringPropTypeUtil6);
   const popoverState = usePopupState4({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
   const handleSearch = (event) => {
@@ -1665,7 +1722,8 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
       label: fontFamily,
       endIcon: /* @__PURE__ */ React32.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
       ...bindTrigger3(popoverState),
-      fullWidth: true
+      fullWidth: true,
+      disabled
     }
   )), /* @__PURE__ */ React32.createElement(
     Popover3,
@@ -1676,7 +1734,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
       ...bindPopover3(popoverState),
       onClose: handleClose
     },
-    /* @__PURE__ */ React32.createElement(Stack9, null, /* @__PURE__ */ React32.createElement(Stack9, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React32.createElement(TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React32.createElement(Typography3, { variant: "subtitle2" }, __8("Font Family", "elementor")), /* @__PURE__ */ React32.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React32.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React32.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React32.createElement(Stack9, null, /* @__PURE__ */ React32.createElement(Stack9, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React32.createElement(TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React32.createElement(Typography3, { variant: "subtitle2" }, __8("Font Family", "elementor")), /* @__PURE__ */ React32.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React32.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React32.createElement(Box3, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
       TextField5,
       {
         autoFocus: true,
@@ -1697,7 +1755,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         handleClose,
         fontFamily
       }
-    ) : /* @__PURE__ */ React32.createElement(Box2, { 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(Box2, { 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__ */ 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(
       Typography3,
       {
         variant: "subtitle2",
@@ -1758,7 +1816,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
     [fontFamily]
   );
   return /* @__PURE__ */ React32.createElement(
-    Box2,
+    Box3,
     {
       ref: containerRef,
       sx: {
@@ -1867,7 +1925,7 @@ import * as React33 from "react";
 import { urlPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField6 } from "@elementor/ui";
 var UrlControl = createControl(({ placeholder }) => {
-  const { value, setValue } = useBoundProp(urlPropTypeUtil);
+  const { value, setValue, disabled } = useBoundProp(urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
   return /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(
     TextField6,
@@ -1875,6 +1933,7 @@ var UrlControl = createControl(({ placeholder }) => {
       size: "tiny",
       fullWidth: true,
       value: value ?? "",
+      disabled,
       onChange: handleChange,
       placeholder
     }
@@ -1896,7 +1955,7 @@ import { InfoTipCard } from "@elementor/editor-ui";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { AlertTriangleIcon, MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
-import { Box as Box4, Collapse, Grid as Grid7, IconButton as IconButton4, Infotip, Stack as Stack10, Switch } from "@elementor/ui";
+import { Box as Box5, Collapse, Grid as Grid7, IconButton as IconButton4, Infotip, Stack as Stack10, Switch } from "@elementor/ui";
 import { debounce as debounce2 } from "@elementor/utils";
 import { __ as __9 } from "@wordpress/i18n";
 
@@ -1906,7 +1965,7 @@ import { forwardRef as forwardRef2 } from "react";
 import { XIcon as XIcon3 } from "@elementor/icons";
 import {
   Autocomplete as AutocompleteBase,
-  Box as Box3,
+  Box as Box4,
   IconButton as IconButton3,
   InputAdornment as InputAdornment4,
   TextField as TextField7
@@ -1945,7 +2004,7 @@ var Autocomplete = forwardRef2((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React34.createElement(Box3, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React34.createElement(Box4, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
       renderInput: (params) => /* @__PURE__ */ React34.createElement(
         TextInput,
         {
@@ -2190,7 +2249,7 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
         }
       )
     },
-    /* @__PURE__ */ React35.createElement(Box4, null, children)
+    /* @__PURE__ */ React35.createElement(Box5, null, children)
   ) : /* @__PURE__ */ React35.createElement(React35.Fragment, null, children);
 };
 var INFOTIP_CONTENT = {
@@ -2208,9 +2267,10 @@ var GapControl = createControl(({ label }) => {
   const {
     value: directionValue,
     setValue: setDirectionValue,
-    propType
+    propType,
+    disabled: directionDisabled
   } = useBoundProp(layoutDirectionPropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil4);
+  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
     if (!isLinked) {
@@ -2235,7 +2295,8 @@ var GapControl = createControl(({ label }) => {
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
-      onChange: onLinkToggle
+      onChange: onLinkToggle,
+      disabled: sizeDisabled || directionDisabled
     },
     /* @__PURE__ */ React36.createElement(LinkedIcon, { fontSize: "tiny" })
   ))), /* @__PURE__ */ React36.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React36.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(Control4, { bind: "row", isLinked })))));
@@ -2252,6 +2313,7 @@ import * as React37 from "react";
 import { useState as useState7 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil8 } 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 { __ as __11 } from "@wordpress/i18n";
 var RATIO_OPTIONS = [
@@ -2266,7 +2328,7 @@ var RATIO_OPTIONS = [
 ];
 var CUSTOM_RATIO = "custom";
 var AspectRatioControl = createControl(({ label }) => {
-  const { value: aspectRatioValue, setValue: setAspectRatioValue } = useBoundProp(stringPropTypeUtil8);
+  const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil8);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
   const [isCustom, setIsCustom] = useState7(isCustomSelected);
@@ -2299,12 +2361,13 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
-  return /* @__PURE__ */ React37.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React37.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React37.createElement(Stack12, { direction: "column", pt: 2, gap: 2 }, /* @__PURE__ */ React37.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
     Select2,
     {
-      sx: { overflow: "hidden" },
-      displayEmpty: true,
       size: "tiny",
+      displayEmpty: true,
+      sx: { overflow: "hidden" },
+      disabled,
       value: selectedValue,
       onChange: handleSelectChange,
       fullWidth: true
@@ -2318,9 +2381,12 @@ var AspectRatioControl = createControl(({ label }) => {
       size: "tiny",
       type: "number",
       fullWidth: true,
+      disabled,
       value: customWidth,
       onChange: handleCustomWidthChange,
-      placeholder: __11("Width", "elementor")
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React37.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+      }
     }
   )), /* @__PURE__ */ React37.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
     TextField8,
@@ -2328,9 +2394,12 @@ var AspectRatioControl = createControl(({ label }) => {
       size: "tiny",
       type: "number",
       fullWidth: true,
+      disabled,
       value: customHeight,
       onChange: handleCustomHeightChange,
-      placeholder: __11("Height", "elementor")
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React37.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+      }
     }
   ))));
 });
@@ -2515,7 +2584,7 @@ var SvgMediaControl = createControl(() => {
 // src/controls/background-control/background-control.tsx
 import * as React46 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
 import { Grid as Grid15 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
@@ -2527,7 +2596,7 @@ import {
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box5, CardMedia as CardMedia3, Grid as Grid14, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Box as Box6, CardMedia as CardMedia3, Grid as Grid14, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
 import { __ as __18 } from "@wordpress/i18n";
 
@@ -2714,8 +2783,8 @@ import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropT
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
-  ArrowsMoveHorizontalIcon,
-  ArrowsMoveVerticalIcon,
+  ArrowsMoveHorizontalIcon as ArrowsMoveHorizontalIcon2,
+  ArrowsMoveVerticalIcon as ArrowsMoveVerticalIcon2,
   LetterAIcon,
   PencilIcon
 } from "@elementor/icons";
@@ -2769,13 +2838,13 @@ var BackgroundImageOverlaySize = () => {
   )))), isCustom ? /* @__PURE__ */ React44.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React44.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React44.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React44.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
   ))), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React44.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React44.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React44.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
   )))))) : null);
@@ -2881,11 +2950,12 @@ var backgroundResolutionOptions = [
   { label: __18("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
+  const { propType, value: overlayValues, setValue, disabled } = useBoundProp(backgroundOverlayPropTypeUtil);
   return /* @__PURE__ */ React45.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React45.createElement(
     Repeater,
     {
       openOnAdd: true,
+      disabled,
       values: overlayValues ?? [],
       setValues: setValue,
       label: __18("Overlay", "elementor"),
@@ -2907,7 +2977,7 @@ var Content2 = ({ anchorEl }) => {
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React45.createElement(Box5, { sx: { width: "100%" } }, /* @__PURE__ */ React45.createElement(Box5, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React45.createElement(Box6, { sx: { width: "100%" } }, /* @__PURE__ */ React45.createElement(Box6, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React45.createElement(
     Tabs,
     {
       size: "small",
@@ -3037,9 +3107,9 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  const isUsingNestedProps = isExperimentActive("e_v_3_30");
+  const isUsingNestedProps = isExperimentActive3("e_v_3_30");
   const colorLabel = __19("Color", "elementor");
-  return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(SectionContent, null, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React46.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(Grid15, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React46.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React46.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React46.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ColorControl, null))))));
+  return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React46.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(Grid15, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React46.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React46.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React46.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ColorControl, null)))));
 });
 
 // src/controls/switch-control.tsx
@@ -3047,11 +3117,11 @@ import * as React47 from "react";
 import { booleanPropTypeUtil as booleanPropTypeUtil2 } from "@elementor/editor-props";
 import { Switch as Switch2 } from "@elementor/ui";
 var SwitchControl2 = createControl(() => {
-  const { value, setValue } = useBoundProp(booleanPropTypeUtil2);
+  const { value, setValue, disabled } = useBoundProp(booleanPropTypeUtil2);
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React47.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(Switch2, { checked: !!value, onChange: handleChange, size: "small" }));
+  return /* @__PURE__ */ React47.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(Switch2, { checked: !!value, onChange: handleChange, size: "small", disabled }));
 });
 export {
   AspectRatioControl,