@elementor/editor-controls 0.6.1 → 0.7.0

package/dist/index.js

@@ -314,13 +314,14 @@ function ControlActions({ children }) {
 }
 
 // src/controls/image-media-control.tsx
-var ImageMediaControl = createControl(() => {
+var ImageMediaControl = createControl((props) => {
   const { value, setValue } = useBoundProp(import_editor_props.imageSrcPropTypeUtil);
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = (0, import_wp_media.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { open } = (0, import_wp_media.useWpMediaFrame)({
     types: ["image", "image/svg+xml"],
+    allowedExtensions: props.allowedExtensions,
     multiple: false,
     selected: id?.value || null,
     onSelect: (selectedAttachment) => {
@@ -333,7 +334,7 @@ var ImageMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React8.createElement(import_ui4.Card, { variant: "outlined" }, /* @__PURE__ */ React8.createElement(import_ui4.CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React8.createElement(import_ui4.Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(import_ui4.CircularProgress, null)) : null), /* @__PURE__ */ React8.createElement(import_ui4.CardOverlay, null, /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(import_ui4.Stack, { gap: 1 }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(import_ui4.Card, { variant: "outlined" }, /* @__PURE__ */ React8.createElement(import_ui4.CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React8.createElement(import_ui4.Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(import_ui4.CircularProgress, null)) : /* @__PURE__ */ React8.createElement(React8.Fragment, null)), /* @__PURE__ */ React8.createElement(import_ui4.CardOverlay, null, /* @__PURE__ */ React8.createElement(import_ui4.Stack, { gap: 1 }, /* @__PURE__ */ React8.createElement(
     import_ui4.Button,
     {
       size: "tiny",
@@ -362,10 +363,11 @@ var import_ui5 = require("@elementor/ui");
 var SelectControl = createControl(({ options, onChange }) => {
   const { value, setValue } = useBoundProp(import_editor_props2.stringPropTypeUtil);
   const handleChange = (event) => {
-    onChange?.(event.target.value, value);
-    setValue(event.target.value);
+    const newValue = event.target.value || null;
+    onChange?.(newValue, value);
+    setValue(newValue);
   };
-  return /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(import_ui5.Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(import_ui5.MenuItem, { key: props.value, ...props }, label))));
+  return /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(import_ui5.Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(import_ui5.MenuItem, { key: props.value, ...props, value: props.value ?? "" }, label))));
 });
 
 // src/controls/image-control.tsx
@@ -376,7 +378,6 @@ var ImageControl = createControl((props) => {
 
 // src/controls/autocomplete-control.tsx
 var React11 = __toESM(require("react"));
-var import_react5 = require("react");
 var import_editor_props4 = require("@elementor/editor-props");
 var import_icons2 = require("@elementor/icons");
 var import_ui7 = require("@elementor/ui");
@@ -389,21 +390,16 @@ var AutocompleteControl = createControl(
     minInputLength = 2
   }) => {
     const { value = "", setValue } = useBoundProp(propType);
-    const [inputValue, setInputValue] = (0, import_react5.useState)(
-      value && options[value]?.label ? options[value]?.label : value
-    );
-    const hasSelectedValue = !!(inputValue && (options[inputValue] || Object.values(options).find(({ label }) => label === inputValue)));
-    const allowClear = !!inputValue;
+    const hasSelectedValue = !!(value && (options[value] || Object.values(options).find(({ label }) => label === value)));
+    const allowClear = !!value;
     const formattedOptions = Object.keys(options);
-    const handleChange = (_, newValue = null) => {
-      const formattedInputValue = newValue && options[newValue]?.label ? options[newValue]?.label : newValue;
-      setInputValue(formattedInputValue || "");
-      if (!allowCustomValues && newValue && !options[newValue]) {
-        return;
-      }
+    const onOptionSelect = (_, newValue) => {
       setValue(newValue);
     };
-    const filterOptions = () => {
+    const handleChange = (newValue) => {
+      setValue(newValue);
+    };
+    const filterOptions = (_, { inputValue }) => {
       const formattedValue = inputValue?.toLowerCase() || "";
       if (formattedValue.length < minInputLength) {
         return [];
@@ -415,18 +411,16 @@ var AutocompleteControl = createControl(
     const isOptionEqualToValue = () => {
       return muiWarningPreventer() ? void 0 : () => true;
     };
-    const muiWarningPreventer = () => allowCustomValues || !!filterOptions().length;
+    const muiWarningPreventer = () => allowCustomValues || !!filterOptions([], { inputValue: value }).length;
     return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
       import_ui7.Autocomplete,
       {
         forcePopupIcon: false,
         disableClearable: true,
         freeSolo: muiWarningPreventer(),
-        value: inputValue || "",
+        value: value || "",
         size: "tiny",
-        onChange: handleChange,
-        onInputChange: handleChange,
-        onBlur: allowCustomValues ? void 0 : () => handleChange(null, value),
+        onChange: onOptionSelect,
         readOnly: hasSelectedValue,
         options: formattedOptions,
         getOptionKey: (option) => option,
@@ -456,11 +450,15 @@ var TextInput = ({
   handleChange,
   hasSelectedValue
 }) => {
+  const onChange = (event) => {
+    handleChange(event.target.value);
+  };
   return /* @__PURE__ */ React11.createElement(
     import_ui7.TextField,
     {
       ...params,
       placeholder,
+      onChange,
       sx: {
         "& .MuiInputBase-input": {
           cursor: hasSelectedValue ? "default" : void 0
@@ -477,7 +475,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React11.createElement(import_ui7.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React11.createElement(import_ui7.IconButton, { size: params.size, onClick: handleChange, sx: { cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(import_icons2.XIcon, { fontSize: params.size })));
+}) => /* @__PURE__ */ React11.createElement(import_ui7.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React11.createElement(import_ui7.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(import_icons2.XIcon, { fontSize: params.size })));
 function shouldGroupOptions(options) {
   return Object.values(options).every((option) => "groupLabel" in option);
 }
@@ -531,9 +529,9 @@ var import_ui11 = require("@elementor/ui");
 
 // src/components/text-field-inner-selection.tsx
 var React14 = __toESM(require("react"));
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_ui10 = require("@elementor/ui");
-var TextFieldInnerSelection = (0, import_react6.forwardRef)(
+var TextFieldInnerSelection = (0, import_react5.forwardRef)(
   ({ placeholder, type, value, onChange, endAdornment, startAdornment }, ref) => {
     return /* @__PURE__ */ React14.createElement(
       import_ui10.TextField,
@@ -560,7 +558,7 @@ var SelectionEndAdornment = ({
 }) => {
   const popupState = (0, import_ui10.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react6.useId)()
+    popupId: (0, import_react5.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
@@ -579,7 +577,7 @@ var SelectionEndAdornment = ({
 };
 
 // src/hooks/use-sync-external-state.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 var useSyncExternalState = ({
   external,
   setExternal,
@@ -598,8 +596,8 @@ var useSyncExternalState = ({
     }
     return externalValue;
   }
-  const [internal, setInternal] = (0, import_react7.useState)(toInternal(external, null));
-  (0, import_react7.useEffect)(() => {
+  const [internal, setInternal] = (0, import_react6.useState)(toInternal(external, null));
+  (0, import_react6.useEffect)(() => {
     setInternal((prevInternal) => toInternal(external, prevInternal));
   }, [external]);
   const setInternalValue = (setter) => {
@@ -690,7 +688,7 @@ var import_i18n5 = require("@wordpress/i18n");
 
 // src/components/repeater.tsx
 var React18 = __toESM(require("react"));
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_icons3 = require("@elementor/icons");
 var import_ui14 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
@@ -738,7 +736,7 @@ var Repeater = ({
       duplicateItem: () => duplicateRepeaterItem(index),
       toggleDisableItem: () => toggleDisableRepeaterItem(index)
     },
-    (props) => /* @__PURE__ */ React18.createElement(itemSettings.Content, { ...props, bind: String(index) })
+    (props) => /* @__PURE__ */ React18.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
   ))));
 };
 var RepeaterItem = ({
@@ -752,8 +750,8 @@ var RepeaterItem = ({
   toggleDisableItem
 }) => {
   const popupId = `repeater-popup-${bind}`;
-  const controlRef = (0, import_react8.useRef)(null);
-  const [anchorEl, setAnchorEl] = (0, import_react8.useState)(null);
+  const controlRef = (0, import_react7.useRef)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react7.useState)(null);
   const popoverState = (0, import_ui14.usePopupState)({ popupId, variant: "popover" });
   const popoverProps = (0, import_ui14.bindPopover)(popoverState);
   return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
@@ -855,7 +853,7 @@ var Content = ({ anchorEl }) => {
     {
       options: [
         { label: (0, import_i18n5.__)("Inset", "elementor"), value: "inset" },
-        { label: (0, import_i18n5.__)("Outset", "elementor"), value: "" }
+        { label: (0, import_i18n5.__)("Outset", "elementor"), value: null }
       ]
     }
   ))), /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React19.createElement(Control2, { bind: "hOffset", label: (0, import_i18n5.__)("Horizontal", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)), /* @__PURE__ */ React19.createElement(Control2, { bind: "vOffset", label: (0, import_i18n5.__)("Vertical", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null))), /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React19.createElement(Control2, { bind: "blur", label: (0, import_i18n5.__)("Blur", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)), /* @__PURE__ */ React19.createElement(Control2, { bind: "spread", label: (0, import_i18n5.__)("Spread", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)))));
@@ -867,13 +865,14 @@ var ItemLabel = ({ value }) => {
   const { size: spreadSize = "", unit: spreadUnit = "" } = spread?.value || {};
   const { size: hOffsetSize = "unset", unit: hOffsetUnit = "" } = hOffset?.value || {};
   const { size: vOffsetSize = "unset", unit: vOffsetUnit = "" } = vOffset?.value || {};
+  const positionLabel = position?.value || "outset";
   const sizes = [
     hOffsetSize + hOffsetUnit,
     vOffsetSize + vOffsetUnit,
     blurSize + blurUnit,
     spreadSize + spreadUnit
   ].join(" ");
-  return /* @__PURE__ */ React19.createElement("span", { style: { textTransform: "capitalize" } }, position ?? "outset", ": ", sizes);
+  return /* @__PURE__ */ React19.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
 };
 var initialShadow = {
   $$type: "shadow",
@@ -1013,7 +1012,7 @@ var NumberControl = createControl(
 
 // src/controls/equal-unequal-sizes-control.tsx
 var React23 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_editor_props13 = require("@elementor/editor-props");
 var import_ui18 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
@@ -1033,8 +1032,8 @@ function EqualUnequalSizesControl({
   items,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react9.useId)();
-  const controlRef = (0, import_react9.useRef)(null);
+  const popupId = (0, import_react8.useId)();
+  const controlRef = (0, import_react8.useRef)(null);
   const popupState = (0, import_ui18.usePopupState)({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
@@ -1058,7 +1057,7 @@ function EqualUnequalSizesControl({
     };
     const isEqual = isEqualSizes(newMappedValues, items);
     if (isEqual) {
-      return setSizeValue(Object.values(newMappedValues)[0].value);
+      return setSizeValue(Object.values(newMappedValues)[0]?.value);
     }
     setMultiSizeValue(newMappedValues);
   };
@@ -1068,7 +1067,8 @@ function EqualUnequalSizesControl({
     }
     return splitEqualValue() ?? null;
   };
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label)), /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(SizeControl, { placeholder: (0, import_i18n6.__)("Mixed", "elementor") }), /* @__PURE__ */ React23.createElement(
+  const isMixed = !!multiSizeValue;
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label)), /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React23.createElement(
     import_ui18.ToggleButton,
     {
       size: "tiny",
@@ -1111,16 +1111,9 @@ var LinkedDimensionsControl = createControl(({ label }) => {
   const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp(import_editor_props14.dimensionsPropTypeUtil);
   const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props14.sizePropTypeUtil);
   const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
-  const setValue = (newValue) => {
-    if (!isLinked) {
-      setDimensionsValue(newValue);
-      return;
-    }
-    setSizeValue(newValue.top);
-  };
   const onLinkToggle = () => {
     if (!isLinked) {
-      setSizeValue(dimensionsValue?.top.value);
+      setSizeValue(dimensionsValue?.top?.value);
       return;
     }
     const value = sizeValue ? import_editor_props14.sizePropTypeUtil.create(sizeValue) : null;
@@ -1132,7 +1125,7 @@ var LinkedDimensionsControl = createControl(({ label }) => {
     });
   };
   const LinkedIcon = isLinked ? import_icons4.LinkIcon : import_icons4.DetachIcon;
-  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value: dimensionsValue, setValue }, /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(ControlLabel, null, label), /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(ControlLabel, null, label), /* @__PURE__ */ React24.createElement(
     import_ui19.ToggleButton,
     {
       "aria-label": (0, import_i18n7.__)("Link Inputs", "elementor"),
@@ -1181,7 +1174,7 @@ var Control3 = ({ bind, startIcon, isLinked }) => {
 };
 
 // src/controls/font-family-control.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var React25 = __toESM(require("react"));
 var import_editor_props15 = require("@elementor/editor-props");
 var import_icons5 = require("@elementor/icons");
@@ -1221,9 +1214,9 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
 // src/controls/font-family-control.tsx
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
-  const [searchValue, setSearchValue] = (0, import_react10.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react9.useState)("");
   const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props15.stringPropTypeUtil);
-  const popupId = (0, import_react10.useId)();
+  const popupId = (0, import_react9.useId)();
   const popoverState = (0, import_ui20.usePopupState)({ variant: "popover", popupId });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
   if (!filteredFontFamilies) {
@@ -1266,7 +1259,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
           startAdornment: /* @__PURE__ */ React25.createElement(import_ui20.InputAdornment, { position: "start" }, /* @__PURE__ */ React25.createElement(import_icons5.SearchIcon, { fontSize: SIZE2 }))
         }
       }
-    )), /* @__PURE__ */ React25.createElement(import_ui20.Divider, null), /* @__PURE__ */ React25.createElement(import_ui20.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React25.createElement(import_ui20.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React25.createElement(import_react10.Fragment, { key: index }, /* @__PURE__ */ React25.createElement(import_ui20.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
+    )), /* @__PURE__ */ React25.createElement(import_ui20.Divider, null), /* @__PURE__ */ React25.createElement(import_ui20.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React25.createElement(import_ui20.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React25.createElement(import_react9.Fragment, { key: index }, /* @__PURE__ */ React25.createElement(import_ui20.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
       const isSelected = item === fontFamily;
       return /* @__PURE__ */ React25.createElement(
         import_ui20.MenuItem,
@@ -1383,29 +1376,26 @@ var import_icons7 = require("@elementor/icons");
 var import_ui23 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 var GapControl = createControl(({ label }) => {
-  const { propType, value, setValue } = useBoundProp(import_editor_props18.gapPropTypeUtil);
-  const { column, row, isLinked = true } = value || {};
-  const setLinkedValue = (newValue, _, meta) => {
+  const {
+    value: directionValue,
+    setValue: setDirectionValue,
+    propType
+  } = useBoundProp(import_editor_props18.layoutDirectionPropTypeUtil);
+  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props18.sizePropTypeUtil);
+  const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
+  const onLinkToggle = () => {
     if (!isLinked) {
-      return setValue(newValue);
+      setSizeValue(directionValue?.column.value);
+      return;
     }
-    const newDimension = newValue[meta?.bind];
-    setValue({
-      isLinked,
-      column: newDimension,
-      row: newDimension
+    const value = sizeValue ? import_editor_props18.sizePropTypeUtil.create(sizeValue) : null;
+    setDirectionValue({
+      row: value,
+      column: value
     });
   };
-  const toggleLinked = () => {
-    const updatedValue = {
-      isLinked: !isLinked,
-      column,
-      row: !isLinked ? column : row
-    };
-    setValue(updatedValue);
-  };
   const LinkedIcon = isLinked ? import_icons7.LinkIcon : import_icons7.DetachIcon;
-  return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value, setValue: setLinkedValue }, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(ControlLabel, null, label), /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(ControlLabel, null, label), /* @__PURE__ */ React28.createElement(
     import_ui23.ToggleButton,
     {
       "aria-label": (0, import_i18n11.__)("Link Inputs", "elementor"),
@@ -1413,36 +1403,176 @@ var GapControl = createControl(({ label }) => {
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
-      onChange: toggleLinked
+      onChange: onLinkToggle
     },
     /* @__PURE__ */ React28.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Column", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: "column" }, /* @__PURE__ */ React28.createElement(SizeControl, null)))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Row", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: "row" }, /* @__PURE__ */ React28.createElement(SizeControl, null))))));
+  )), /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Column", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Row", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(Control4, { bind: "row", isLinked })))));
 });
+var Control4 = ({ bind, isLinked }) => {
+  if (isLinked) {
+    return /* @__PURE__ */ React28.createElement(SizeControl, null);
+  }
+  return /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(SizeControl, null));
+};
 
 // src/controls/background-control/background-control.tsx
-var React30 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 var import_editor_props20 = require("@elementor/editor-props");
-var import_ui25 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_ui30 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-var React29 = __toESM(require("react"));
+var React34 = __toESM(require("react"));
 var import_editor_props19 = require("@elementor/editor-props");
-var import_ui24 = require("@elementor/ui");
+var import_ui29 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
+var import_i18n17 = require("@wordpress/i18n");
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
+var React29 = __toESM(require("react"));
+var import_icons8 = require("@elementor/icons");
+var import_ui24 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
+var attachmentControlOptions = [
+  {
+    value: "fixed",
+    label: (0, import_i18n12.__)("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(import_icons8.PinIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "scroll",
+    label: (0, import_i18n12.__)("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(import_icons8.PinnedOffIcon, { fontSize: size }),
+    showTooltip: true
+  }
+];
+var BackgroundImageOverlayAttachment = () => {
+  return /* @__PURE__ */ React29.createElement(import_ui24.Grid, { container: true, gap: 8, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 2 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, (0, import_i18n12.__)("Attachment", "elementor"))), /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, justifyContent: "flex-end", xs: 8, sx: { display: "flex" } }, /* @__PURE__ */ React29.createElement(ToggleControl, { options: attachmentControlOptions })));
+};
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
+var React30 = __toESM(require("react"));
+var import_ui25 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
+var backgroundPositionOptions = [
+  { label: (0, import_i18n13.__)("Center Center", "elementor"), value: "center center" },
+  { label: (0, import_i18n13.__)("Center Left", "elementor"), value: "center left" },
+  { label: (0, import_i18n13.__)("Center Right", "elementor"), value: "center right" },
+  { label: (0, import_i18n13.__)("Top Center", "elementor"), value: "top center" },
+  { label: (0, import_i18n13.__)("Top Left", "elementor"), value: "top left" },
+  { label: (0, import_i18n13.__)("Top Right", "elementor"), value: "top right" },
+  { label: (0, import_i18n13.__)("Bottom Center", "elementor"), value: "bottom center" },
+  { label: (0, import_i18n13.__)("Bottom Left", "elementor"), value: "bottom left" },
+  { label: (0, import_i18n13.__)("Bottom Right", "elementor"), value: "bottom right" }
+];
+var BackgroundImageOverlayPosition = () => {
+  return /* @__PURE__ */ React30.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, (0, import_i18n13.__)("Position", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(SelectControl, { options: backgroundPositionOptions })));
+};
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
+var React31 = __toESM(require("react"));
+var import_icons9 = require("@elementor/icons");
+var import_ui26 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
+var repeatControlOptions = [
+  {
+    value: "repeat",
+    label: (0, import_i18n14.__)("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.GridDotsIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "repeat-x",
+    label: (0, import_i18n14.__)("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.DotsHorizontalIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "repeat-y",
+    label: (0, import_i18n14.__)("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.DotsVerticalIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "no-repeat",
+    label: (0, import_i18n14.__)("No-Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.XIcon, { fontSize: size }),
+    showTooltip: true
+  }
+];
+var BackgroundImageOverlayRepeat = () => {
+  return /* @__PURE__ */ React31.createElement(import_ui26.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n14.__)("Repeat", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ToggleControl, { options: repeatControlOptions })));
+};
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-resolution.tsx
+var React32 = __toESM(require("react"));
+var import_ui27 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
+var backgroundResolutionOptions = [
+  { label: (0, import_i18n15.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: (0, import_i18n15.__)("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: (0, import_i18n15.__)("Medium Large - 768 x 768"), value: "medium_large" },
+  { label: (0, import_i18n15.__)("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: (0, import_i18n15.__)("Full", "elementor"), value: "full" }
+];
+var BackgroundImageOverlayResolution = () => {
+  return /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n15.__)("Resolution", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(SelectControl, { options: backgroundResolutionOptions })));
+};
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
+var React33 = __toESM(require("react"));
+var import_icons10 = require("@elementor/icons");
+var import_ui28 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
+var sizeControlOptions = [
+  {
+    value: "auto",
+    label: (0, import_i18n16.__)("Auto", "elementor"),
+    renderContent: () => "Auto",
+    showTooltip: true
+  },
+  {
+    value: "cover",
+    label: (0, import_i18n16.__)("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons10.ArrowsMaximizeIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "contain",
+    label: (0, import_i18n16.__)("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons10.ArrowBarBothIcon, { fontSize: size }),
+    showTooltip: true
+  }
+];
+var BackgroundImageOverlaySize = () => {
+  return /* @__PURE__ */ React33.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, (0, import_i18n16.__)("Size", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React33.createElement(ToggleControl, { options: sizeControlOptions })));
+};
+
+// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
+var defaultImagePlaceholderId = 1;
 var initialBackgroundOverlay = {
-  $$type: "background-color-overlay",
-  value: "rgba(0, 0, 0, 0.2)"
+  $$type: "background-image-overlay",
+  value: {
+    "image-src": {
+      $$type: "image-src",
+      value: {
+        id: {
+          $$type: "image-attachment-id",
+          value: defaultImagePlaceholderId
+        }
+      }
+    }
+  }
 };
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props19.backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React29.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React34.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React34.createElement(
     Repeater,
     {
       values: overlayValues ?? [],
       setValues: setValue,
-      label: (0, import_i18n12.__)("Overlay", "elementor"),
+      label: (0, import_i18n17.__)("Overlay", "elementor"),
       itemSettings: {
         Icon: ItemIcon2,
         Label: ItemLabel2,
@@ -1452,36 +1582,50 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemIcon2 = ({ value }) => /* @__PURE__ */ React29.createElement(import_ui24.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
-var ItemContent2 = ({ bind }) => {
-  return /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React29.createElement(Content2, null));
+var ItemIcon2 = ({ value }) => /* @__PURE__ */ React34.createElement(import_ui29.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
+var ItemContent2 = ({ bind, value }) => {
+  return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(Content2, { value }));
 };
-var Content2 = () => {
-  const propContext = useBoundProp(import_editor_props19.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React29.createElement(import_ui24.Stack, { gap: 1.5 }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, (0, import_i18n12.__)("Color", "elementor"))), /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ColorControl, { propTypeUtil: import_editor_props19.backgroundColorOverlayPropTypeUtil }))), /* @__PURE__ */ React29.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind: "image-src" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ImageMediaControl, null))))));
+var Content2 = ({ value }) => {
+  const activeTab = deriveOverlayType(value.$$type);
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui29.useTabs)(activeTab);
+  return /* @__PURE__ */ React34.createElement(import_ui29.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React34.createElement(import_ui29.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React34.createElement(import_ui29.Tabs, { ...getTabsProps(), "aria-label": (0, import_i18n17.__)("Background Overlay", "elementor") }, /* @__PURE__ */ React34.createElement(import_ui29.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React34.createElement(import_ui29.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React34.createElement(import_ui29.TabPanel, { ...getTabPanelProps("image") }, /* @__PURE__ */ React34.createElement(import_ui29.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React34.createElement(import_ui29.TabPanel, { ...getTabPanelProps("color") }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(ColorControl, { propTypeUtil: import_editor_props19.backgroundColorOverlayPropTypeUtil })))));
 };
 var ItemLabel2 = ({ value }) => {
   const type = value.$$type;
   if (type === "background-color-overlay") {
-    return /* @__PURE__ */ React29.createElement(ItemLabelColor, { value });
+    return /* @__PURE__ */ React34.createElement(ItemLabelColor, { value });
   }
   if (type === "background-image-overlay") {
-    return /* @__PURE__ */ React29.createElement(ItemLabelImage, { value });
+    return /* @__PURE__ */ React34.createElement(ItemLabelImage, { value });
   }
 };
 var ItemLabelColor = ({ value }) => {
-  return /* @__PURE__ */ React29.createElement("span", null, value.value);
+  return /* @__PURE__ */ React34.createElement("span", null, value.value);
 };
 var ItemLabelImage = ({ value }) => {
   const { data: attachment } = (0, import_wp_media2.useWpMediaAttachment)(value?.value["image-src"]?.value.id.value || null);
   const imageTitle = attachment?.title || null;
-  return /* @__PURE__ */ React29.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React34.createElement("span", null, imageTitle);
+};
+var ImageOverlayContent = () => {
+  const propContext = useBoundProp(import_editor_props19.backgroundImageOverlayPropTypeUtil);
+  return /* @__PURE__ */ React34.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "image-src" }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(ImageMediaControl, null)))), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "resolution" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayResolution, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React34.createElement(BackgroundImageOverlayAttachment, null)));
+};
+var deriveOverlayType = (type) => {
+  if (type === "background-color-overlay") {
+    return "color";
+  }
+  if (type === "background-image-overlay") {
+    return "image";
+  }
+  throw new Error(`Invalid overlay type: ${type}`);
 };
 
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(import_editor_props20.backgroundPropTypeUtil);
-  return /* @__PURE__ */ React30.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React30.createElement(import_ui25.Stack, { gap: 1.5 }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React30.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React30.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, (0, import_i18n13.__)("Color", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ColorControl, null))))));
+  return /* @__PURE__ */ React35.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React35.createElement(import_ui30.Stack, { gap: 1.5 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React35.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ColorControl, null))))));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {