@elementor/editor-controls 0.6.1 → 0.7.0

package/dist/index.mjs

@@ -251,13 +251,14 @@ function ControlActions({ children }) {
 }
 
 // src/controls/image-media-control.tsx
-var ImageMediaControl = createControl(() => {
+var ImageMediaControl = createControl((props) => {
   const { value, setValue } = useBoundProp(imageSrcPropTypeUtil);
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = useWpMediaAttachment(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { open } = useWpMediaFrame({
     types: ["image", "image/svg+xml"],
+    allowedExtensions: props.allowedExtensions,
     multiple: false,
     selected: id?.value || null,
     onSelect: (selectedAttachment) => {
@@ -270,7 +271,7 @@ var ImageMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React8.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React8.createElement(CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React8.createElement(Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(CircularProgress, null)) : null), /* @__PURE__ */ React8.createElement(CardOverlay, null, /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(Stack, { gap: 1 }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React8.createElement(CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React8.createElement(Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(CircularProgress, null)) : /* @__PURE__ */ React8.createElement(React8.Fragment, null)), /* @__PURE__ */ React8.createElement(CardOverlay, null, /* @__PURE__ */ React8.createElement(Stack, { gap: 1 }, /* @__PURE__ */ React8.createElement(
     Button,
     {
       size: "tiny",
@@ -299,10 +300,11 @@ import { MenuItem, Select } from "@elementor/ui";
 var SelectControl = createControl(({ options, onChange }) => {
   const { value, setValue } = useBoundProp(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(Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(MenuItem, { key: props.value, ...props }, label))));
+  return /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(MenuItem, { key: props.value, ...props, value: props.value ?? "" }, label))));
 });
 
 // src/controls/image-control.tsx
@@ -313,7 +315,6 @@ var ImageControl = createControl((props) => {
 
 // src/controls/autocomplete-control.tsx
 import * as React11 from "react";
-import { useState } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
 import { XIcon } from "@elementor/icons";
 import {
@@ -332,21 +333,16 @@ var AutocompleteControl = createControl(
     minInputLength = 2
   }) => {
     const { value = "", setValue } = useBoundProp(propType);
-    const [inputValue, setInputValue] = 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 [];
@@ -358,18 +354,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(
       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,
@@ -399,11 +393,15 @@ var TextInput = ({
   handleChange,
   hasSelectedValue
 }) => {
+  const onChange = (event) => {
+    handleChange(event.target.value);
+  };
   return /* @__PURE__ */ React11.createElement(
     TextField,
     {
       ...params,
       placeholder,
+      onChange,
       sx: {
         "& .MuiInputBase-input": {
           cursor: hasSelectedValue ? "default" : void 0
@@ -420,7 +418,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React11.createElement(InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React11.createElement(IconButton, { size: params.size, onClick: handleChange, sx: { cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(XIcon, { fontSize: params.size })));
+}) => /* @__PURE__ */ React11.createElement(InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React11.createElement(IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(XIcon, { fontSize: params.size })));
 function shouldGroupOptions(options) {
   return Object.values(options).every((option) => "groupLabel" in option);
 }
@@ -522,7 +520,7 @@ var SelectionEndAdornment = ({
 };
 
 // src/hooks/use-sync-external-state.tsx
-import { useEffect, useState as useState2 } from "react";
+import { useEffect, useState } from "react";
 var useSyncExternalState = ({
   external,
   setExternal,
@@ -541,7 +539,7 @@ var useSyncExternalState = ({
     }
     return externalValue;
   }
-  const [internal, setInternal] = useState2(toInternal(external, null));
+  const [internal, setInternal] = useState(toInternal(external, null));
   useEffect(() => {
     setInternal((prevInternal) => toInternal(external, prevInternal));
   }, [external]);
@@ -633,7 +631,7 @@ import { __ as __5 } from "@wordpress/i18n";
 
 // src/components/repeater.tsx
 import * as React18 from "react";
-import { useRef, useState as useState3 } from "react";
+import { useRef, useState as useState2 } from "react";
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
   bindPopover,
@@ -691,7 +689,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 = ({
@@ -706,7 +704,7 @@ var RepeaterItem = ({
 }) => {
   const popupId = `repeater-popup-${bind}`;
   const controlRef = useRef(null);
-  const [anchorEl, setAnchorEl] = useState3(null);
+  const [anchorEl, setAnchorEl] = useState2(null);
   const popoverState = usePopupState2({ popupId, variant: "popover" });
   const popoverProps = bindPopover(popoverState);
   return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
@@ -808,7 +806,7 @@ var Content = ({ anchorEl }) => {
     {
       options: [
         { label: __5("Inset", "elementor"), value: "inset" },
-        { label: __5("Outset", "elementor"), value: "" }
+        { label: __5("Outset", "elementor"), value: null }
       ]
     }
   ))), /* @__PURE__ */ React19.createElement(Grid3, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React19.createElement(Control2, { bind: "hOffset", label: __5("Horizontal", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)), /* @__PURE__ */ React19.createElement(Control2, { bind: "vOffset", label: __5("Vertical", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null))), /* @__PURE__ */ React19.createElement(Grid3, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React19.createElement(Control2, { bind: "blur", label: __5("Blur", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)), /* @__PURE__ */ React19.createElement(Control2, { bind: "spread", label: __5("Spread", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)))));
@@ -820,13 +818,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",
@@ -1017,7 +1016,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);
   };
@@ -1027,7 +1026,8 @@ function EqualUnequalSizesControl({
     }
     return splitEqualValue() ?? null;
   };
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label)), /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(SizeControl, { placeholder: __6("Mixed", "elementor") }), /* @__PURE__ */ React23.createElement(
+  const isMixed = !!multiSizeValue;
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label)), /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React23.createElement(
     ToggleButton2,
     {
       size: "tiny",
@@ -1062,10 +1062,7 @@ var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React23.createElement(
 
 // src/controls/linked-dimensions-control.tsx
 import * as React24 from "react";
-import {
-  dimensionsPropTypeUtil,
-  sizePropTypeUtil as sizePropTypeUtil3
-} from "@elementor/editor-props";
+import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid5, Stack as Stack7, ToggleButton as ToggleButton3 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
@@ -1073,16 +1070,9 @@ var LinkedDimensionsControl = createControl(({ label }) => {
   const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp(dimensionsPropTypeUtil);
   const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil3);
   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 ? sizePropTypeUtil3.create(sizeValue) : null;
@@ -1094,7 +1084,7 @@ var LinkedDimensionsControl = createControl(({ label }) => {
     });
   };
   const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value: dimensionsValue, setValue }, /* @__PURE__ */ React24.createElement(Stack7, { 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(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(ControlLabel, null, label), /* @__PURE__ */ React24.createElement(
     ToggleButton3,
     {
       "aria-label": __7("Link Inputs", "elementor"),
@@ -1143,7 +1133,7 @@ var Control3 = ({ bind, startIcon, isLinked }) => {
 };
 
 // src/controls/font-family-control.tsx
-import { Fragment as Fragment3, useId as useId3, useState as useState4 } from "react";
+import { Fragment as Fragment4, useId as useId3, useState as useState3 } from "react";
 import * as React25 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon as XIcon3 } from "@elementor/icons";
@@ -1200,7 +1190,7 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
 // src/controls/font-family-control.tsx
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
-  const [searchValue, setSearchValue] = useState4("");
+  const [searchValue, setSearchValue] = useState3("");
   const { value: fontFamily, setValue: setFontFamily } = useBoundProp(stringPropTypeUtil6);
   const popupId = useId3();
   const popoverState = usePopupState4({ variant: "popover", popupId });
@@ -1245,7 +1235,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
           startAdornment: /* @__PURE__ */ React25.createElement(InputAdornment4, { position: "start" }, /* @__PURE__ */ React25.createElement(SearchIcon, { fontSize: SIZE2 }))
         }
       }
-    )), /* @__PURE__ */ React25.createElement(Divider, null), /* @__PURE__ */ React25.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React25.createElement(MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React25.createElement(Fragment3, { key: index }, /* @__PURE__ */ React25.createElement(ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
+    )), /* @__PURE__ */ React25.createElement(Divider, null), /* @__PURE__ */ React25.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React25.createElement(MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React25.createElement(Fragment4, { key: index }, /* @__PURE__ */ React25.createElement(ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
       const isSelected = item === fontFamily;
       return /* @__PURE__ */ React25.createElement(
         MenuItem3,
@@ -1357,34 +1347,31 @@ var SwitchControl = () => {
 
 // src/controls/gap-control.tsx
 import * as React28 from "react";
-import { gapPropTypeUtil } from "@elementor/editor-props";
+import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid7, Stack as Stack10, ToggleButton as ToggleButton4 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 var GapControl = createControl(({ label }) => {
-  const { propType, value, setValue } = useBoundProp(gapPropTypeUtil);
-  const { column, row, isLinked = true } = value || {};
-  const setLinkedValue = (newValue, _, meta) => {
+  const {
+    value: directionValue,
+    setValue: setDirectionValue,
+    propType
+  } = useBoundProp(layoutDirectionPropTypeUtil);
+  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil4);
+  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 ? sizePropTypeUtil4.create(sizeValue) : null;
+    setDirectionValue({
+      row: value,
+      column: value
     });
   };
-  const toggleLinked = () => {
-    const updatedValue = {
-      isLinked: !isLinked,
-      column,
-      row: !isLinked ? column : row
-    };
-    setValue(updatedValue);
-  };
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
-  return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value, setValue: setLinkedValue }, /* @__PURE__ */ React28.createElement(Stack10, { 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(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(ControlLabel, null, label), /* @__PURE__ */ React28.createElement(
     ToggleButton4,
     {
       "aria-label": __11("Link Inputs", "elementor"),
@@ -1392,40 +1379,180 @@ var GapControl = createControl(({ label }) => {
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
-      onChange: toggleLinked
+      onChange: onLinkToggle
     },
     /* @__PURE__ */ React28.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React28.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(Grid7, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, __11("Column", "elementor"))), /* @__PURE__ */ React28.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: "column" }, /* @__PURE__ */ React28.createElement(SizeControl, null)))), /* @__PURE__ */ React28.createElement(Grid7, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, __11("Row", "elementor"))), /* @__PURE__ */ React28.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: "row" }, /* @__PURE__ */ React28.createElement(SizeControl, null))))));
+  )), /* @__PURE__ */ React28.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(Grid7, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, __11("Column", "elementor"))), /* @__PURE__ */ React28.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React28.createElement(Grid7, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, __11("Row", "elementor"))), /* @__PURE__ */ React28.createElement(Grid7, { 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
-import * as React30 from "react";
+import * as React35 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid9, Stack as Stack12 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { Grid as Grid14, Stack as Stack12 } from "@elementor/ui";
+import { __ as __18 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React29 from "react";
+import * as React34 from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundImageOverlayPropTypeUtil,
   backgroundOverlayPropTypeUtil
 } from "@elementor/editor-props";
-import { Grid as Grid8, Stack as Stack11, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Box as Box4, Grid as Grid13, Stack as Stack11, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2, useTabs } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2 } from "@elementor/wp-media";
+import { __ as __17 } from "@wordpress/i18n";
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
+import * as React29 from "react";
+import { PinIcon, PinnedOffIcon } from "@elementor/icons";
+import { Grid as Grid8 } from "@elementor/ui";
 import { __ as __12 } from "@wordpress/i18n";
+var attachmentControlOptions = [
+  {
+    value: "fixed",
+    label: __12("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(PinIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "scroll",
+    label: __12("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(PinnedOffIcon, { fontSize: size }),
+    showTooltip: true
+  }
+];
+var BackgroundImageOverlayAttachment = () => {
+  return /* @__PURE__ */ React29.createElement(Grid8, { container: true, gap: 8, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React29.createElement(Grid8, { item: true, xs: 2 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, __12("Attachment", "elementor"))), /* @__PURE__ */ React29.createElement(Grid8, { 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
+import * as React30 from "react";
+import { Grid as Grid9 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
+var backgroundPositionOptions = [
+  { label: __13("Center Center", "elementor"), value: "center center" },
+  { label: __13("Center Left", "elementor"), value: "center left" },
+  { label: __13("Center Right", "elementor"), value: "center right" },
+  { label: __13("Top Center", "elementor"), value: "top center" },
+  { label: __13("Top Left", "elementor"), value: "top left" },
+  { label: __13("Top Right", "elementor"), value: "top right" },
+  { label: __13("Bottom Center", "elementor"), value: "bottom center" },
+  { label: __13("Bottom Left", "elementor"), value: "bottom left" },
+  { label: __13("Bottom Right", "elementor"), value: "bottom right" }
+];
+var BackgroundImageOverlayPosition = () => {
+  return /* @__PURE__ */ React30.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, __13("Position", "elementor"))), /* @__PURE__ */ React30.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(SelectControl, { options: backgroundPositionOptions })));
+};
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
+import * as React31 from "react";
+import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
+import { Grid as Grid10 } from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
+var repeatControlOptions = [
+  {
+    value: "repeat",
+    label: __14("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(GridDotsIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "repeat-x",
+    label: __14("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(DotsHorizontalIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "repeat-y",
+    label: __14("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(DotsVerticalIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "no-repeat",
+    label: __14("No-Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(XIcon4, { fontSize: size }),
+    showTooltip: true
+  }
+];
+var BackgroundImageOverlayRepeat = () => {
+  return /* @__PURE__ */ React31.createElement(Grid10, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ControlLabel, null, __14("Repeat", "elementor"))), /* @__PURE__ */ React31.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ToggleControl, { options: repeatControlOptions })));
+};
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-resolution.tsx
+import * as React32 from "react";
+import { Grid as Grid11 } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
+var backgroundResolutionOptions = [
+  { label: __15("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: __15("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: __15("Medium Large - 768 x 768"), value: "medium_large" },
+  { label: __15("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: __15("Full", "elementor"), value: "full" }
+];
+var BackgroundImageOverlayResolution = () => {
+  return /* @__PURE__ */ React32.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __15("Resolution", "elementor"))), /* @__PURE__ */ React32.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(SelectControl, { options: backgroundResolutionOptions })));
+};
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
+import * as React33 from "react";
+import { ArrowBarBothIcon, ArrowsMaximizeIcon } from "@elementor/icons";
+import { Grid as Grid12 } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
+var sizeControlOptions = [
+  {
+    value: "auto",
+    label: __16("Auto", "elementor"),
+    renderContent: () => "Auto",
+    showTooltip: true
+  },
+  {
+    value: "cover",
+    label: __16("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    showTooltip: true
+  },
+  {
+    value: "contain",
+    label: __16("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(ArrowBarBothIcon, { fontSize: size }),
+    showTooltip: true
+  }
+];
+var BackgroundImageOverlaySize = () => {
+  return /* @__PURE__ */ React33.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, __16("Size", "elementor"))), /* @__PURE__ */ React33.createElement(Grid12, { 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(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: __12("Overlay", "elementor"),
+      label: __17("Overlay", "elementor"),
       itemSettings: {
         Icon: ItemIcon2,
         Label: ItemLabel2,
@@ -1435,36 +1562,50 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemIcon2 = ({ value }) => /* @__PURE__ */ React29.createElement(UnstableColorIndicator2, { 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(UnstableColorIndicator2, { 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(backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React29.createElement(Stack11, { gap: 1.5 }, /* @__PURE__ */ React29.createElement(Grid8, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React29.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, __12("Color", "elementor"))), /* @__PURE__ */ React29.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ColorControl, { propTypeUtil: backgroundColorOverlayPropTypeUtil }))), /* @__PURE__ */ React29.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind: "image-src" }, /* @__PURE__ */ React29.createElement(Grid8, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React29.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ImageMediaControl, null))))));
+var Content2 = ({ value }) => {
+  const activeTab = deriveOverlayType(value.$$type);
+  const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(activeTab);
+  return /* @__PURE__ */ React34.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React34.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React34.createElement(Tabs, { ...getTabsProps(), "aria-label": __17("Background Overlay", "elementor") }, /* @__PURE__ */ React34.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React34.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React34.createElement(TabPanel, { ...getTabPanelProps("image") }, /* @__PURE__ */ React34.createElement(Stack11, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React34.createElement(TabPanel, { ...getTabPanelProps("color") }, /* @__PURE__ */ React34.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(ColorControl, { propTypeUtil: 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 } = useWpMediaAttachment2(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(backgroundImageOverlayPropTypeUtil);
+  return /* @__PURE__ */ React34.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "image-src" }, /* @__PURE__ */ React34.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(Grid13, { 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(backgroundPropTypeUtil);
-  return /* @__PURE__ */ React30.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React30.createElement(Stack12, { gap: 1.5 }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React30.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React30.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, __13("Color", "elementor"))), /* @__PURE__ */ React30.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ColorControl, null))))));
+  return /* @__PURE__ */ React35.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React35.createElement(Stack12, { gap: 1.5 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React35.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React35.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __18("Color", "elementor"))), /* @__PURE__ */ React35.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ColorControl, null))))));
 });
 export {
   AutocompleteControl,