@elementor/editor-controls 0.32.0 → 0.34.0

package/dist/index.js

@@ -99,7 +99,8 @@ var PropProvider = ({
   value,
   setValue,
   propType,
-  placeholder
+  placeholder,
+  disabled
 }) => {
   return /* @__PURE__ */ React.createElement(
     PropContext.Provider,
@@ -108,7 +109,8 @@ var PropProvider = ({
         value,
         propType,
         setValue,
-        placeholder
+        placeholder,
+        disabled
       }
     },
     children
@@ -370,14 +372,19 @@ var FloatingBarContainer = (0, import_ui3.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(import_ui3.UnstableFloatingActionBar, { actions: menuItems }, children));
+  return /* @__PURE__ */ React7.createElement(FloatingBarContainer, null, /* @__PURE__ */ React7.createElement(import_ui3.UnstableFloatingActionBar, { actions: menuItems, placement: "bottom-start" }, children));
 }
 
 // src/controls/image-media-control.tsx
@@ -428,7 +435,7 @@ var import_editor_props2 = require("@elementor/editor-props");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui5 = require("@elementor/ui");
 var SelectControl = createControl(({ options, onChange }) => {
-  const { value, setValue } = useBoundProp(import_editor_props2.stringPropTypeUtil);
+  const { value, setValue, disabled } = useBoundProp(import_editor_props2.stringPropTypeUtil);
   const handleChange = (event) => {
     const newValue = event.target.value || null;
     onChange?.(newValue, value);
@@ -442,6 +449,7 @@ var SelectControl = createControl(({ options, onChange }) => {
       size: "tiny",
       value: value ?? "",
       onChange: handleChange,
+      disabled,
       fullWidth: true
     },
     options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(import_editor_ui.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
@@ -463,13 +471,14 @@ var React11 = __toESM(require("react"));
 var import_editor_props4 = require("@elementor/editor-props");
 var import_ui7 = require("@elementor/ui");
 var TextControl = createControl(({ placeholder }) => {
-  const { value, setValue } = useBoundProp(import_editor_props4.stringPropTypeUtil);
+  const { value, setValue, disabled } = useBoundProp(import_editor_props4.stringPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
   return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
     import_ui7.TextField,
     {
       size: "tiny",
       fullWidth: true,
+      disabled,
       value: value ?? "",
       onChange: handleChange,
       placeholder
@@ -482,7 +491,7 @@ var React12 = __toESM(require("react"));
 var import_editor_props5 = require("@elementor/editor-props");
 var import_ui8 = require("@elementor/ui");
 var TextAreaControl = createControl(({ placeholder }) => {
-  const { value, setValue } = useBoundProp(import_editor_props5.stringPropTypeUtil);
+  const { value, setValue, disabled } = useBoundProp(import_editor_props5.stringPropTypeUtil);
   const handleChange = (event) => {
     setValue(event.target.value);
   };
@@ -493,6 +502,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
       multiline: true,
       fullWidth: true,
       minRows: 5,
+      disabled,
       value: value ?? "",
       onChange: handleChange,
       placeholder
@@ -521,7 +531,8 @@ var TextFieldInnerSelection = (0, import_react6.forwardRef)(
     onKeyDown,
     onKeyUp,
     endAdornment,
-    startAdornment
+    startAdornment,
+    disabled
   }, ref) => {
     return /* @__PURE__ */ React13.createElement(
       import_ui9.TextField,
@@ -531,6 +542,7 @@ var TextFieldInnerSelection = (0, import_react6.forwardRef)(
         fullWidth: true,
         type,
         value,
+        disabled,
         onChange,
         onKeyDown,
         onKeyUp,
@@ -547,7 +559,8 @@ var TextFieldInnerSelection = (0, import_react6.forwardRef)(
 var SelectionEndAdornment = ({
   options,
   onClick,
-  value
+  value,
+  disabled
 }) => {
   const popupState = (0, import_ui9.usePopupState)({
     variant: "popover",
@@ -562,6 +575,7 @@ var SelectionEndAdornment = ({
     {
       size: "small",
       color: "secondary",
+      disabled,
       sx: { font: "inherit", minWidth: "initial", textTransform: "uppercase" },
       ...(0, import_ui9.bindTrigger)(popupState)
     },
@@ -608,7 +622,7 @@ var defaultUnit = "px";
 var defaultSize = NaN;
 var SizeControl = createControl(
   ({ units: units2 = defaultUnits, extendedValues = [], placeholder, startIcon }) => {
-    const { value: sizeValue, setValue: setSizeValue, restoreValue } = useBoundProp(import_editor_props6.sizePropTypeUtil);
+    const { value: sizeValue, setValue: setSizeValue, restoreValue, disabled } = useBoundProp(import_editor_props6.sizePropTypeUtil);
     const [state, setState] = useSyncExternalState({
       external: sizeValue,
       setExternal: setSizeValue,
@@ -632,6 +646,7 @@ var SizeControl = createControl(
     return /* @__PURE__ */ React14.createElement(
       Input,
       {
+        disabled,
         size: state.size,
         unit: state.unit,
         placeholder,
@@ -675,7 +690,8 @@ var SizeInput = ({
   startIcon,
   onBlur,
   size,
-  unit
+  unit,
+  disabled
 }) => {
   const unitInputBufferRef = (0, import_react8.useRef)("");
   const handleKeyUp = (event) => {
@@ -692,26 +708,25 @@ var SizeInput = ({
       handleUnitChange(matchedUnit);
     }
   };
-  return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(import_ui10.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(import_ui10.InputAdornment, { position: "start" }, startIcon) : void 0,
+      startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(import_ui10.InputAdornment, { 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();
@@ -719,7 +734,7 @@ var SizeInput = ({
       },
       onKeyUp: handleKeyUp
     }
-  ));
+  )));
 };
 
 // src/controls/stroke-control.tsx
@@ -739,7 +754,7 @@ var import_editor_props7 = require("@elementor/editor-props");
 var import_ui12 = require("@elementor/ui");
 var ColorControl = createControl(
   ({ propTypeUtil = import_editor_props7.colorPropTypeUtil, anchorEl, slotProps = {}, ...props }) => {
-    const { value, setValue } = useBoundProp(propTypeUtil);
+    const { value, setValue, disabled } = useBoundProp(propTypeUtil);
     const handleChange = (selectedColor) => {
       setValue(selectedColor || null);
     };
@@ -751,6 +766,7 @@ var ColorControl = createControl(
         value: value ?? "",
         onChange: handleChange,
         ...props,
+        disabled,
         slotProps: {
           ...slotProps,
           colorPicker: {
@@ -787,7 +803,7 @@ var import_i18n5 = require("@wordpress/i18n");
 // src/components/popover-content.tsx
 var React18 = __toESM(require("react"));
 var import_ui14 = require("@elementor/ui");
-var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React18.createElement(import_ui14.Stack, { alignItems, gap, p }, children);
+var PopoverContent = ({ alignItems, gap = 1.5, p, pt, pb, children }) => /* @__PURE__ */ React18.createElement(import_ui14.Stack, { alignItems, gap, p, pt, pb }, children);
 
 // src/components/popover-grid-container.tsx
 var React19 = __toESM(require("react"));
@@ -911,6 +927,7 @@ var EMPTY_OPEN_ITEM = -1;
 var Repeater = ({
   label,
   itemSettings,
+  disabled = false,
   openOnAdd = false,
   addToBottom = false,
   values: repeaterValues = [],
@@ -964,8 +981,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;
       })
@@ -980,6 +997,7 @@ var Repeater = ({
       });
     });
   };
+  const ItemWrapper = disabled ? React23.Fragment : SortableItem;
   return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(
     import_ui17.Stack,
     {
@@ -994,8 +1012,9 @@ var Repeater = ({
     /* @__PURE__ */ React23.createElement(
       import_ui17.IconButton,
       {
-        sx: { ml: "auto" },
         size: SIZE,
+        sx: { ml: "auto" },
+        disabled,
         onClick: addRepeaterItem,
         "aria-label": (0, import_i18n4.__)("Add item", "elementor")
       },
@@ -1006,10 +1025,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),
@@ -1024,23 +1044,25 @@ var Repeater = ({
 };
 var RepeaterItem = ({
   label,
-  disabled,
+  propDisabled,
   startIcon,
   children,
   removeItem,
   duplicateItem,
   toggleDisableItem,
   openOnMount,
-  onOpen
+  onOpen,
+  disabled
 }) => {
   const [anchorEl, setAnchorEl] = (0, import_react10.useState)(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = (0, import_i18n4.__)("Duplicate", "elementor");
-  const toggleLabel = disabled ? (0, import_i18n4.__)("Show", "elementor") : (0, import_i18n4.__)("Hide", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n4.__)("Show", "elementor") : (0, import_i18n4.__)("Hide", "elementor");
   const removeLabel = (0, import_i18n4.__)("Remove", "elementor");
   return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
     import_ui17.UnstableTag,
     {
+      disabled,
       label,
       showActionsOnHover: true,
       fullWidth: true,
@@ -1049,7 +1071,7 @@ var RepeaterItem = ({
       "aria-label": (0, import_i18n4.__)("Open item", "elementor"),
       ...(0, import_ui17.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(import_icons3.CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React23.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(import_icons3.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(import_icons3.XIcon, { fontSize: SIZE }))))
+      actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(import_icons3.CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React23.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(import_icons3.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(import_icons3.XIcon, { fontSize: SIZE }))))
     }
   ), /* @__PURE__ */ React23.createElement(
     import_ui17.Popover,
@@ -1088,11 +1110,12 @@ var usePopover = (openOnMount, onOpen) => {
 
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
-  const { propType, value, setValue } = useBoundProp(import_editor_props9.boxShadowPropTypeUtil);
+  const { propType, value, setValue, disabled } = useBoundProp(import_editor_props9.boxShadowPropTypeUtil);
   return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(
     Repeater,
     {
       openOnAdd: true,
+      disabled,
       values: value ?? [],
       setValues: setValue,
       label: (0, import_i18n5.__)("Box shadow", "elementor"),
@@ -1214,7 +1237,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) : [];
@@ -1229,13 +1253,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",
@@ -1363,7 +1388,7 @@ var ToggleControl = createControl(
     exclusive = true,
     maxItems
   }) => {
-    const { value, setValue, placeholder } = useBoundProp(import_editor_props10.stringPropTypeUtil);
+    const { value, setValue, placeholder, disabled } = useBoundProp(import_editor_props10.stringPropTypeUtil);
     const exclusiveValues = options.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
       const newSelectedValue = selectedValues[selectedValues.length - 1];
@@ -1383,6 +1408,7 @@ var ToggleControl = createControl(
         ...toggleButtonGroupProps,
         value: value ?? placeholder ?? null,
         onChange: setValue,
+        disabled,
         exclusive: true
       }
     ) : /* @__PURE__ */ React27.createElement(
@@ -1391,6 +1417,7 @@ var ToggleControl = createControl(
         ...toggleButtonGroupProps,
         value: (value ?? placeholder)?.split(" ") ?? [],
         onChange: handleNonExclusiveToggle,
+        disabled,
         exclusive: false
       }
     );
@@ -1411,7 +1438,7 @@ var NumberControl = createControl(
     step = 1,
     shouldForceInt = false
   }) => {
-    const { value, setValue } = useBoundProp(import_editor_props11.numberPropTypeUtil);
+    const { value, setValue, disabled } = useBoundProp(import_editor_props11.numberPropTypeUtil);
     const handleChange = (event) => {
       const eventValue = event.target.value;
       if (isEmptyOrNaN(eventValue)) {
@@ -1427,6 +1454,7 @@ var NumberControl = createControl(
         size: "tiny",
         type: "number",
         fullWidth: true,
+        disabled,
         value: isEmptyOrNaN(value) ? "" : value,
         onChange: handleChange,
         placeholder,
@@ -1445,6 +1473,7 @@ var NumberControl = createControl(
 var React30 = __toESM(require("react"));
 var import_react12 = require("react");
 var import_editor_props12 = require("@elementor/editor-props");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_ui23 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
@@ -1479,9 +1508,10 @@ function EqualUnequalSizesControl({
   const {
     propType: multiSizePropType,
     value: multiSizeValue,
-    setValue: setMultiSizeValue
+    setValue: setMultiSizeValue,
+    disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props12.sizePropTypeUtil);
+  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props12.sizePropTypeUtil);
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
@@ -1517,7 +1547,8 @@ function EqualUnequalSizesControl({
       sx: { marginLeft: "auto" },
       ...(0, import_ui23.bindToggle)(popupState),
       selected: popupState.isOpen,
-      "aria-label": tooltipLabel
+      "aria-label": tooltipLabel,
+      disabled: multiSizeDisabled || sizeDisabled
     },
     icon
   ))))), /* @__PURE__ */ React30.createElement(
@@ -1538,14 +1569,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(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(SizeControl, { startIcon: item.icon })))));
+var MultiSizeValueControl = ({ item }) => {
+  const isUsingNestedProps = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
+  return /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, isUsingNestedProps ? /* @__PURE__ */ React30.createElement(ControlLabel, null, item.label) : /* @__PURE__ */ React30.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(SizeControl, { startIcon: item.icon })))));
+};
 
 // src/controls/linked-dimensions-control.tsx
 var React31 = __toESM(require("react"));
 var import_editor_props13 = require("@elementor/editor-props");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_icons5 = require("@elementor/icons");
 var import_ui24 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
@@ -1555,13 +1590,15 @@ var LinkedDimensionsControl = createControl(
     isSiteRtl = false,
     extendedValues
   }) => {
+    const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props13.sizePropTypeUtil);
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
-      propType
+      propType,
+      disabled: dimensionsDisabled
     } = useBoundProp(import_editor_props13.dimensionsPropTypeUtil);
-    const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props13.sizePropTypeUtil);
     const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
+    const isUsingNestedProps = (0, import_editor_v1_adapters2.isExperimentActive)("e_v_3_30");
     const onLinkToggle = () => {
       if (!isLinked) {
         setSizeValue(dimensionsValue["block-start"]?.value ?? null);
@@ -1579,7 +1616,7 @@ var LinkedDimensionsControl = createControl(
     const LinkedIcon = isLinked ? import_icons5.LinkIcon : import_icons5.DetachIcon;
     const linkedLabel = (0, import_i18n7.__)("Link %s", "elementor").replace("%s", tooltipLabel);
     const unlinkedLabel = (0, import_i18n7.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
-    return /* @__PURE__ */ React31.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(
+    return /* @__PURE__ */ React31.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React31.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(
       import_ui24.ToggleButton,
       {
         "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -1587,10 +1624,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(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    ))), /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-start", label: (0, import_i18n7.__)("Top", "elementor") })), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
       Control3,
       {
         bind: "block-start",
@@ -1598,7 +1636,13 @@ var LinkedDimensionsControl = createControl(
         isLinked,
         extendedValues
       }
-    ))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    ))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+      Label,
+      {
+        bind: "inline-end",
+        label: isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor")
+      }
+    )), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
       Control3,
       {
         bind: "inline-end",
@@ -1606,7 +1650,7 @@ var LinkedDimensionsControl = createControl(
         isLinked,
         extendedValues
       }
-    )))), /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    )))), /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-end", label: (0, import_i18n7.__)("Bottom", "elementor") })), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
       Control3,
       {
         bind: "block-end",
@@ -1614,7 +1658,13 @@ var LinkedDimensionsControl = createControl(
         isLinked,
         extendedValues
       }
-    ))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+    ))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+      Label,
+      {
+        bind: "inline-start",
+        label: isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor")
+      }
+    )), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
       Control3,
       {
         bind: "inline-start",
@@ -1636,6 +1686,13 @@ var Control3 = ({
   }
   return /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React31.createElement(SizeControl, { startIcon, extendedValues }));
 };
+var Label = ({ label, bind }) => {
+  const isUsingNestedProps = (0, import_editor_v1_adapters2.isExperimentActive)("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
 var React32 = __toESM(require("react"));
@@ -1673,7 +1730,7 @@ var enqueueFont = (fontFamily, context = "editor") => {
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
   const [searchValue, setSearchValue] = (0, import_react13.useState)("");
-  const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props14.stringPropTypeUtil);
+  const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(import_editor_props14.stringPropTypeUtil);
   const popoverState = (0, import_ui25.usePopupState)({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
   const handleSearch = (event) => {
@@ -1690,7 +1747,8 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
       label: fontFamily,
       endIcon: /* @__PURE__ */ React32.createElement(import_icons6.ChevronDownIcon, { fontSize: "tiny" }),
       ...(0, import_ui25.bindTrigger)(popoverState),
-      fullWidth: true
+      fullWidth: true,
+      disabled
     }
   )), /* @__PURE__ */ React32.createElement(
     import_ui25.Popover,
@@ -1892,7 +1950,7 @@ var React33 = __toESM(require("react"));
 var import_editor_props15 = require("@elementor/editor-props");
 var import_ui26 = require("@elementor/ui");
 var UrlControl = createControl(({ placeholder }) => {
-  const { value, setValue } = useBoundProp(import_editor_props15.urlPropTypeUtil);
+  const { value, setValue, disabled } = useBoundProp(import_editor_props15.urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
   return /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(
     import_ui26.TextField,
@@ -1900,6 +1958,7 @@ var UrlControl = createControl(({ placeholder }) => {
       size: "tiny",
       fullWidth: true,
       value: value ?? "",
+      disabled,
       onChange: handleChange,
       placeholder
     }
@@ -2221,9 +2280,10 @@ var GapControl = createControl(({ label }) => {
   const {
     value: directionValue,
     setValue: setDirectionValue,
-    propType
+    propType,
+    disabled: directionDisabled
   } = useBoundProp(import_editor_props17.layoutDirectionPropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props17.sizePropTypeUtil);
+  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props17.sizePropTypeUtil);
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
     if (!isLinked) {
@@ -2248,7 +2308,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(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(import_ui29.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React36.createElement(import_ui29.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(Control4, { bind: "row", isLinked })))));
@@ -2265,6 +2326,7 @@ var React37 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_props18 = require("@elementor/editor-props");
 var import_editor_ui4 = require("@elementor/editor-ui");
+var import_icons10 = require("@elementor/icons");
 var import_ui30 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 var RATIO_OPTIONS = [
@@ -2279,7 +2341,7 @@ var RATIO_OPTIONS = [
 ];
 var CUSTOM_RATIO = "custom";
 var AspectRatioControl = createControl(({ label }) => {
-  const { value: aspectRatioValue, setValue: setAspectRatioValue } = useBoundProp(import_editor_props18.stringPropTypeUtil);
+  const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(import_editor_props18.stringPropTypeUtil);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
   const [isCustom, setIsCustom] = (0, import_react16.useState)(isCustomSelected);
@@ -2312,12 +2374,13 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
-  return /* @__PURE__ */ React37.createElement(import_ui30.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React37.createElement(import_ui30.Stack, { direction: "column", pt: 2, gap: 2 }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
     import_ui30.Select,
     {
-      sx: { overflow: "hidden" },
-      displayEmpty: true,
       size: "tiny",
+      displayEmpty: true,
+      sx: { overflow: "hidden" },
+      disabled,
       value: selectedValue,
       onChange: handleSelectChange,
       fullWidth: true
@@ -2331,9 +2394,12 @@ var AspectRatioControl = createControl(({ label }) => {
       size: "tiny",
       type: "number",
       fullWidth: true,
+      disabled,
       value: customWidth,
       onChange: handleCustomWidthChange,
-      placeholder: (0, import_i18n11.__)("Width", "elementor")
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React37.createElement(import_icons10.ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+      }
     }
   )), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
     import_ui30.TextField,
@@ -2341,9 +2407,12 @@ var AspectRatioControl = createControl(({ label }) => {
       size: "tiny",
       type: "number",
       fullWidth: true,
+      disabled,
       value: customHeight,
       onChange: handleCustomHeightChange,
-      placeholder: (0, import_i18n11.__)("Height", "elementor")
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React37.createElement(import_icons10.ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+      }
     }
   ))));
 });
@@ -2352,7 +2421,7 @@ var AspectRatioControl = createControl(({ label }) => {
 var React39 = __toESM(require("react"));
 var import_react18 = require("react");
 var import_editor_props19 = require("@elementor/editor-props");
-var import_icons10 = require("@elementor/icons");
+var import_icons11 = require("@elementor/icons");
 var import_ui32 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
 var import_i18n13 = require("@wordpress/i18n");
@@ -2507,7 +2576,7 @@ var SvgMediaControl = createControl(() => {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React39.createElement(import_icons10.UploadIcon, null),
+        startIcon: /* @__PURE__ */ React39.createElement(import_icons11.UploadIcon, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
       (0, import_i18n13.__)("Upload", "elementor")
@@ -2518,7 +2587,7 @@ var SvgMediaControl = createControl(() => {
 // src/controls/background-control/background-control.tsx
 var React46 = __toESM(require("react"));
 var import_editor_props25 = require("@elementor/editor-props");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_ui40 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 
@@ -2600,20 +2669,20 @@ var initialBackgroundGradientOverlay = import_editor_props20.backgroundGradientO
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
 var React41 = __toESM(require("react"));
-var import_icons11 = require("@elementor/icons");
+var import_icons12 = require("@elementor/icons");
 var import_ui34 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
 var attachmentControlOptions = [
   {
     value: "fixed",
     label: (0, import_i18n14.__)("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons11.PinIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
     label: (0, import_i18n14.__)("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons11.PinnedOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -2625,7 +2694,7 @@ var BackgroundImageOverlayAttachment = () => {
 var React42 = __toESM(require("react"));
 var import_editor_props21 = require("@elementor/editor-props");
 var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons12 = require("@elementor/icons");
+var import_icons13 = require("@elementor/icons");
 var import_ui35 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 var backgroundPositionOptions = [
@@ -2661,37 +2730,37 @@ var BackgroundImageOverlayPosition = () => {
       fullWidth: true
     },
     backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React42.createElement(import_editor_ui5.MenuListItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React42.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(import_icons12.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(import_icons12.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
+  )))), isCustom ? /* @__PURE__ */ React42.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(import_icons13.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(import_icons13.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
 var React43 = __toESM(require("react"));
-var import_icons13 = require("@elementor/icons");
+var import_icons14 = require("@elementor/icons");
 var import_ui36 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 var repeatControlOptions = [
   {
     value: "repeat",
     label: (0, import_i18n16.__)("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.GridDotsIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons14.GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
     label: (0, import_i18n16.__)("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.DotsHorizontalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons14.DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
     label: (0, import_i18n16.__)("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.DotsVerticalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons14.DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
     label: (0, import_i18n16.__)("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.XIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons14.XIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -2702,32 +2771,32 @@ var BackgroundImageOverlayRepeat = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 var React44 = __toESM(require("react"));
 var import_editor_props22 = require("@elementor/editor-props");
-var import_icons14 = require("@elementor/icons");
+var import_icons15 = require("@elementor/icons");
 var import_ui37 = require("@elementor/ui");
 var import_i18n17 = require("@wordpress/i18n");
 var sizeControlOptions = [
   {
     value: "auto",
     label: (0, import_i18n17.__)("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
     label: (0, import_i18n17.__)("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.ArrowsMaximizeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
     label: (0, import_i18n17.__)("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.ArrowBarBothIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: (0, import_i18n17.__)("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -2753,13 +2822,13 @@ var BackgroundImageOverlaySize = () => {
   )))), isCustom ? /* @__PURE__ */ React44.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React44.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React44.createElement(import_icons14.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React44.createElement(import_icons15.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
   ))), /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React44.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React44.createElement(import_icons14.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React44.createElement(import_icons15.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
   )))))) : null);
@@ -2861,11 +2930,12 @@ var backgroundResolutionOptions = [
   { label: (0, import_i18n18.__)("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props24.backgroundOverlayPropTypeUtil);
+  const { propType, value: overlayValues, setValue, disabled } = useBoundProp(import_editor_props24.backgroundOverlayPropTypeUtil);
   return /* @__PURE__ */ React45.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React45.createElement(
     Repeater,
     {
       openOnAdd: true,
+      disabled,
       values: overlayValues ?? [],
       setValues: setValue,
       label: (0, import_i18n18.__)("Overlay", "elementor"),
@@ -3017,9 +3087,9 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(import_editor_props25.backgroundPropTypeUtil);
-  const isUsingNestedProps = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
+  const isUsingNestedProps = (0, import_editor_v1_adapters3.isExperimentActive)("e_v_3_30");
   const colorLabel = (0, import_i18n19.__)("Color", "elementor");
-  return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(SectionContent, null, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React46.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React46.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React46.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ColorControl, null))))));
+  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(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React46.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React46.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ColorControl, null)))));
 });
 
 // src/controls/switch-control.tsx
@@ -3027,11 +3097,11 @@ var React47 = __toESM(require("react"));
 var import_editor_props26 = require("@elementor/editor-props");
 var import_ui41 = require("@elementor/ui");
 var SwitchControl2 = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props26.booleanPropTypeUtil);
+  const { value, setValue, disabled } = useBoundProp(import_editor_props26.booleanPropTypeUtil);
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React47.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(import_ui41.Switch, { checked: !!value, onChange: handleChange, size: "small" }));
+  return /* @__PURE__ */ React47.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(import_ui41.Switch, { checked: !!value, onChange: handleChange, size: "small", disabled }));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {