@elementor/editor-controls 0.13.0 → 0.14.0

package/dist/index.mjs

@@ -289,7 +289,7 @@ var ImageMediaControl = createControl((props) => {
       startIcon: /* @__PURE__ */ React8.createElement(UploadIcon, null),
       onClick: () => open({ mode: "upload" })
     },
-    __("Upload image", "elementor")
+    __("Upload", "elementor")
   )))));
 });
 
@@ -322,7 +322,7 @@ var SelectControl = createControl(({ options, onChange }) => {
 var ImageControl = createControl(
   ({ sizes, resolutionLabel = __2("Image resolution", "elementor") }) => {
     const propContext = useBoundProp(imagePropTypeUtil);
-    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(Stack2, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", __2("Choose image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, null)), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
+    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(Stack2, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", __2("Image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, null)), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
   }
 );
 
@@ -370,7 +370,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
 
 // src/controls/size-control.tsx
 import * as React14 from "react";
-import { sizePropTypeUtil } from "@elementor/editor-props";
+import { sizePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
 import { InputAdornment as InputAdornment2 } from "@elementor/ui";
 
 // src/components/text-field-inner-selection.tsx
@@ -459,27 +459,74 @@ var useSyncExternalState = ({
 var defaultUnits = ["px", "%", "em", "rem", "vw", "vh"];
 var defaultUnit = "px";
 var defaultSize = NaN;
-var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, startIcon }) => {
-  const { value, setValue } = useBoundProp(sizePropTypeUtil);
-  const [state, setState] = useSyncExternalState({
-    external: value,
-    setExternal: setValue,
-    persistWhen: (controlValue) => !!controlValue?.size || controlValue?.size === 0,
-    fallback: (controlValue) => ({ unit: controlValue?.unit || defaultUnit, size: defaultSize })
-  });
-  const handleUnitChange = (unit) => {
-    setState((prev) => ({
-      size: prev?.size ?? defaultSize,
-      unit
-    }));
-  };
-  const handleSizeChange = (event) => {
-    const { value: size } = event.target;
-    setState((prev) => ({
-      ...prev,
-      size: size || size === "0" ? parseFloat(size) : defaultSize
-    }));
+var SizeControl = createControl(
+  ({ units: units2 = defaultUnits, extendedValues = [], placeholder, startIcon }) => {
+    const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil);
+    const [state, setState] = useSyncExternalState({
+      external: sizeValue,
+      setExternal: setSizeValue,
+      persistWhen: (controlValue) => !!controlValue?.size || controlValue?.size === 0,
+      fallback: (controlValue) => ({ unit: controlValue?.unit || defaultUnit, size: defaultSize })
+    });
+    const handleUnitChange = (unit) => {
+      setState((prev) => ({
+        size: prev?.size ?? defaultSize,
+        unit
+      }));
+    };
+    const handleSizeChange = (event) => {
+      const { value: size } = event.target;
+      setState((prev) => ({
+        ...prev,
+        size: size || size === "0" ? parseFloat(size) : defaultSize
+      }));
+    };
+    const inputProps = {
+      size: state.size,
+      unit: state.unit,
+      placeholder,
+      startIcon,
+      units: units2,
+      extendedValues,
+      handleSizeChange,
+      handleUnitChange
+    };
+    if (extendedValues?.length) {
+      return /* @__PURE__ */ React14.createElement(ExtendedSizeInput, { ...inputProps });
+    }
+    return /* @__PURE__ */ React14.createElement(SizeInput, { ...inputProps });
+  }
+);
+var ExtendedSizeInput = (props) => {
+  const { value: stringValue, setValue: setStringValue } = useBoundProp(stringPropTypeUtil4);
+  const { extendedValues = [] } = props;
+  const unit = stringValue ?? props.unit;
+  const handleUnitChange = (newUnit) => {
+    if (extendedValues.includes(newUnit)) {
+      setStringValue(newUnit);
+    } else {
+      props.handleUnitChange(newUnit);
+    }
   };
+  return /* @__PURE__ */ React14.createElement(
+    SizeInput,
+    {
+      ...props,
+      units: [...props.units, ...extendedValues],
+      handleUnitChange,
+      unit
+    }
+  );
+};
+var SizeInput = ({
+  units: units2,
+  handleUnitChange,
+  handleSizeChange,
+  placeholder,
+  startIcon,
+  size,
+  unit
+}) => {
   return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
     TextFieldInnerSelection,
     {
@@ -488,17 +535,17 @@ var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, st
         {
           options: units2,
           onClick: handleUnitChange,
-          value: state?.unit ?? defaultUnit
+          value: unit ?? defaultUnit
         }
       ),
       placeholder,
       startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(InputAdornment2, { position: "start" }, startIcon) : void 0,
       type: "number",
-      value: Number.isNaN(state?.size) ? "" : state?.size,
+      value: Number.isNaN(size) ? "" : size,
       onChange: handleSizeChange
     }
   ));
-});
+};
 
 // src/controls/stroke-control.tsx
 import * as React17 from "react";
@@ -801,7 +848,8 @@ var RepeaterItem = ({
           "aria-label": __4("Remove item", "elementor")
         },
         /* @__PURE__ */ React21.createElement(XIcon, { fontSize: SIZE })
-      ))
+      )),
+      sx: { backgroundColor: "background.paper" }
     }
   ), /* @__PURE__ */ React21.createElement(
     Popover,
@@ -916,7 +964,7 @@ var initialShadow = {
 
 // src/controls/toggle-control.tsx
 import * as React24 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
 import * as React23 from "react";
@@ -973,7 +1021,7 @@ var ControlToggleButtonGroup = ({
 // src/controls/toggle-control.tsx
 var ToggleControl = createControl(
   ({ options, fullWidth = false, size = "tiny" }) => {
-    const { value, setValue } = useBoundProp(stringPropTypeUtil4);
+    const { value, setValue } = useBoundProp(stringPropTypeUtil5);
     const handleToggle = (option) => {
       setValue(option);
     };
@@ -1126,76 +1174,91 @@ import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid6, Stack as Stack7, ToggleButton as ToggleButton3 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
-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 onLinkToggle = () => {
-    if (!isLinked) {
-      setSizeValue(dimensionsValue?.top?.value);
-      return;
-    }
-    const value = sizeValue ? sizePropTypeUtil3.create(sizeValue) : null;
-    setDimensionsValue({
-      top: value,
-      right: value,
-      bottom: value,
-      left: value
-    });
-  };
-  const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-  return /* @__PURE__ */ React27.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(
-    ToggleButton3,
-    {
-      "aria-label": __7("Link inputs", "elementor"),
-      size: "tiny",
-      value: "check",
-      selected: isLinked,
-      sx: { marginLeft: "auto" },
-      onChange: onLinkToggle
-    },
-    /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
-    Control3,
-    {
-      bind: "top",
-      startIcon: /* @__PURE__ */ React27.createElement(SideTopIcon, { fontSize: "tiny" }),
-      isLinked
-    }
-  ))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Right", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
-    Control3,
-    {
-      bind: "right",
-      startIcon: /* @__PURE__ */ React27.createElement(SideRightIcon, { fontSize: "tiny" }),
-      isLinked
-    }
-  )))), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
-    Control3,
-    {
-      bind: "bottom",
-      startIcon: /* @__PURE__ */ React27.createElement(SideBottomIcon, { fontSize: "tiny" }),
-      isLinked
-    }
-  ))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Left", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
-    Control3,
-    {
-      bind: "left",
-      startIcon: /* @__PURE__ */ React27.createElement(SideLeftIcon, { fontSize: "tiny" }),
-      isLinked
-    }
-  )))));
-});
-var Control3 = ({ bind, startIcon, isLinked }) => {
+var LinkedDimensionsControl = createControl(
+  ({ label, extendedValues }) => {
+    const {
+      value: dimensionsValue,
+      setValue: setDimensionsValue,
+      propType
+    } = useBoundProp(dimensionsPropTypeUtil);
+    const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil3);
+    const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
+    const onLinkToggle = () => {
+      if (!isLinked) {
+        setSizeValue(dimensionsValue?.top?.value);
+        return;
+      }
+      const value = sizeValue ? sizePropTypeUtil3.create(sizeValue) : null;
+      setDimensionsValue({
+        top: value,
+        right: value,
+        bottom: value,
+        left: value
+      });
+    };
+    const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+    return /* @__PURE__ */ React27.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(
+      ToggleButton3,
+      {
+        "aria-label": __7("Link Inputs", "elementor"),
+        size: "tiny",
+        value: "check",
+        selected: isLinked,
+        sx: { marginLeft: "auto" },
+        onChange: onLinkToggle
+      },
+      /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
+    )), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "top",
+        startIcon: /* @__PURE__ */ React27.createElement(SideTopIcon, { fontSize: "tiny" }),
+        isLinked,
+        extendedValues
+      }
+    ))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Right", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "right",
+        startIcon: /* @__PURE__ */ React27.createElement(SideRightIcon, { fontSize: "tiny" }),
+        isLinked,
+        extendedValues
+      }
+    )))), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "bottom",
+        startIcon: /* @__PURE__ */ React27.createElement(SideBottomIcon, { fontSize: "tiny" }),
+        isLinked,
+        extendedValues
+      }
+    ))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Left", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "left",
+        startIcon: /* @__PURE__ */ React27.createElement(SideLeftIcon, { fontSize: "tiny" }),
+        isLinked,
+        extendedValues
+      }
+    )))));
+  }
+);
+var Control3 = ({
+  bind,
+  startIcon,
+  isLinked,
+  extendedValues
+}) => {
   if (isLinked) {
-    return /* @__PURE__ */ React27.createElement(SizeControl, { startIcon });
+    return /* @__PURE__ */ React27.createElement(SizeControl, { startIcon, extendedValues });
   }
-  return /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(SizeControl, { startIcon }));
+  return /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(SizeControl, { startIcon, extendedValues }));
 };
 
 // src/controls/font-family-control.tsx
 import { Fragment as Fragment4, useId as useId3, useState as useState3 } from "react";
 import * as React28 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
   bindPopover as bindPopover3,
@@ -1251,7 +1314,7 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
   const [searchValue, setSearchValue] = useState3("");
-  const { value: fontFamily, setValue: setFontFamily } = useBoundProp(stringPropTypeUtil5);
+  const { value: fontFamily, setValue: setFontFamily } = useBoundProp(stringPropTypeUtil6);
   const popupId = useId3();
   const popoverState = usePopupState4({ variant: "popover", popupId });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
@@ -1283,13 +1346,13 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
       ...bindPopover3(popoverState),
       onClose: handleClose
     },
-    /* @__PURE__ */ React28.createElement(Stack8, null, /* @__PURE__ */ React28.createElement(Stack8, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(Typography4, { variant: "subtitle2" }, __9("Font Family", "elementor")), /* @__PURE__ */ React28.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React28.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React28.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React28.createElement(Stack8, null, /* @__PURE__ */ React28.createElement(Stack8, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(Typography4, { variant: "subtitle2" }, __9("Font family", "elementor")), /* @__PURE__ */ React28.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React28.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React28.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React28.createElement(
       TextField5,
       {
         fullWidth: true,
         size: SIZE2,
         value: searchValue,
-        placeholder: __9("Search", "elementor"),
+        placeholder: __9("Search fonts\u2026", "elementor"),
         onChange: handleSearch,
         InputProps: {
           startAdornment: /* @__PURE__ */ React28.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React28.createElement(SearchIcon, { fontSize: SIZE2 }))
@@ -1357,13 +1420,14 @@ import {
   booleanPropTypeUtil,
   linkPropTypeUtil,
   numberPropTypeUtil as numberPropTypeUtil2,
-  stringPropTypeUtil as stringPropTypeUtil6,
+  stringPropTypeUtil as stringPropTypeUtil7,
   urlPropTypeUtil as urlPropTypeUtil2
 } from "@elementor/editor-props";
 import { httpService } from "@elementor/http";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
 import { Collapse, Divider as Divider3, Grid as Grid7, IconButton as IconButton4, Stack as Stack9, Switch } from "@elementor/ui";
+import { debounce } from "@elementor/utils";
 import { __ as __10 } from "@wordpress/i18n";
 
 // src/components/autocomplete.tsx
@@ -1502,7 +1566,7 @@ var LinkControl = createControl((props) => {
     const valueToSave = newValue ? {
       ...value,
       destination: numberPropTypeUtil2.create(newValue),
-      label: stringPropTypeUtil6.create(findMatchingOption(options, newValue)?.label || null)
+      label: stringPropTypeUtil7.create(findMatchingOption(options, newValue)?.label || null)
     } : null;
     onSaveNewValue(valueToSave);
   };
@@ -1575,7 +1639,7 @@ var SwitchControl = () => {
   const onClick = () => {
     setValue(!value);
   };
-  return /* @__PURE__ */ React31.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React31.createElement(Grid7, { item: true }, /* @__PURE__ */ React31.createElement(ControlLabel, null, __10("Open in new tab", "elementor"))), /* @__PURE__ */ React31.createElement(Grid7, { item: true }, /* @__PURE__ */ React31.createElement(Switch, { checked: value, onClick })));
+  return /* @__PURE__ */ React31.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React31.createElement(Grid7, { item: true }, /* @__PURE__ */ React31.createElement(ControlLabel, null, __10("Open in a new tab", "elementor"))), /* @__PURE__ */ React31.createElement(Grid7, { item: true }, /* @__PURE__ */ React31.createElement(Switch, { checked: value, onClick })));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -1605,15 +1669,6 @@ function generateFirstLoadedOption(unionValue) {
     }
   ] : [];
 }
-function debounce(fn, timeout) {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      fn(...args);
-    }, timeout);
-  };
-}
 
 // src/controls/gap-control.tsx
 import * as React32 from "react";
@@ -1631,7 +1686,7 @@ var GapControl = createControl(({ label }) => {
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
     if (!isLinked) {
-      setSizeValue(directionValue?.column.value);
+      setSizeValue(directionValue?.column?.value);
       return;
     }
     const value = sizeValue ? sizePropTypeUtil4.create(sizeValue) : null;
@@ -1710,7 +1765,7 @@ var SvgMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React33.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, " ", __12("Choose SVG", "elementor"), " "), /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React33.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React33.createElement(CircularProgress2, { role: "progressbar" }) : /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React33.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, " ", __12("SVG", "elementor"), " "), /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React33.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React33.createElement(CircularProgress2, { role: "progressbar" }) : /* @__PURE__ */ React33.createElement(
     CardMedia2,
     {
       component: "img",
@@ -1745,7 +1800,7 @@ var SvgMediaControl = createControl(() => {
         startIcon: /* @__PURE__ */ React33.createElement(UploadIcon2, null),
         onClick: () => open({ mode: "upload" })
       },
-      __12("Upload SVG", "elementor")
+      __12("Upload", "elementor")
     ))
   ))));
 });
@@ -1796,7 +1851,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React35 from "react";
-import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid10, MenuItem as MenuItem4, Select as Select2 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
@@ -1814,7 +1869,7 @@ var backgroundPositionOptions = [
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil7);
+  const stringPropContext = useBoundProp(stringPropTypeUtil8);
   const isCustom = !!backgroundImageOffsetContext.value;
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
@@ -1862,7 +1917,7 @@ var repeatControlOptions = [
   },
   {
     value: "no-repeat",
-    label: __15("No-Repeat", "elementor"),
+    label: __15("No-repeat", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(XIcon4, { fontSize: size }),
     showTooltip: true
   }
@@ -1873,7 +1928,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React37 from "react";
-import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
@@ -1912,7 +1967,7 @@ var sizeControlOptions = [
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil8);
+  const stringPropContext = useBoundProp(stringPropTypeUtil9);
   const isCustom = !!backgroundImageScaleContext.value;
   const handleSizeChange = (size) => {
     if (size === "custom") {
@@ -1929,7 +1984,19 @@ var BackgroundImageOverlaySize = () => {
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
       onChange: handleSizeChange
     }
-  )))), isCustom ? /* @__PURE__ */ React37.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" }) })))))) : null);
+  )))), isCustom ? /* @__PURE__ */ React37.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React37.createElement(
+    SizeControl,
+    {
+      startIcon: /* @__PURE__ */ React37.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      extendedValues: ["auto"]
+    }
+  ))), /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React37.createElement(
+    SizeControl,
+    {
+      startIcon: /* @__PURE__ */ React37.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      extendedValues: ["auto"]
+    }
+  )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts