@elementor/editor-controls 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @elementor/editor-controls
 
+## 0.14.0
+
+### Minor Changes
+
+- 1a1e998: Add auto size unit to size controls
+- bcf4254: VQA text fixes
+- ed5962d: removed transparency during, to prevent ui glitches while using drag-n-drop to re-order repeater nodes
+
+### Patch Changes
+
+- f4b76ac: cannot link values once you unlinked them when input is empty
+- 571ff75: Add `debounce` util
+- Updated dependencies [c654f89]
+- Updated dependencies [571ff75]
+  - @elementor/editor-props@0.9.3
+  - @elementor/utils@0.4.0
+  - @elementor/wp-media@0.4.2
+
 ## 0.13.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -21,13 +21,15 @@ type Props$5 = {
 };
 declare const TextAreaControl: ControlComponent<({ placeholder }: Props$5) => React.JSX.Element>;
 
+type ExtendedValue = 'auto';
 type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
 type SizeControlProps = {
     placeholder?: string;
     startIcon?: React.ReactNode;
     units?: Unit[];
+    extendedValues?: ExtendedValue[];
 };
-declare const SizeControl: ControlComponent<({ units, placeholder, startIcon }: SizeControlProps) => React.JSX.Element>;
+declare const SizeControl: ControlComponent<({ units, extendedValues, placeholder, startIcon }: SizeControlProps) => React.JSX.Element>;
 
 declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
 
@@ -105,8 +107,9 @@ type Props$1<TMultiPropType extends string, TPropValue extends MultiSizePropValu
 };
 declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props$1<TMultiPropType, TPropValue>): React.JSX.Element;
 
-declare const LinkedDimensionsControl: ControlComponent<({ label }: {
+declare const LinkedDimensionsControl: ControlComponent<({ label, extendedValues }: {
     label: string;
+    extendedValues?: ExtendedValue[];
 }) => React.JSX.Element>;
 
 declare const FontFamilyControl: ControlComponent<({ fontFamilies }: any) => React.JSX.Element | null>;
@@ -211,4 +214,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.d.ts

@@ -21,13 +21,15 @@ type Props$5 = {
 };
 declare const TextAreaControl: ControlComponent<({ placeholder }: Props$5) => React.JSX.Element>;
 
+type ExtendedValue = 'auto';
 type Unit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh';
 type SizeControlProps = {
     placeholder?: string;
     startIcon?: React.ReactNode;
     units?: Unit[];
+    extendedValues?: ExtendedValue[];
 };
-declare const SizeControl: ControlComponent<({ units, placeholder, startIcon }: SizeControlProps) => React.JSX.Element>;
+declare const SizeControl: ControlComponent<({ units, extendedValues, placeholder, startIcon }: SizeControlProps) => React.JSX.Element>;
 
 declare const StrokeControl: ControlComponent<() => React.JSX.Element>;
 
@@ -105,8 +107,9 @@ type Props$1<TMultiPropType extends string, TPropValue extends MultiSizePropValu
 };
 declare function EqualUnequalSizesControl<TMultiPropType extends string, TPropValue extends MultiSizePropValue>({ label, icon, items, multiSizePropTypeUtil, }: Props$1<TMultiPropType, TPropValue>): React.JSX.Element;
 
-declare const LinkedDimensionsControl: ControlComponent<({ label }: {
+declare const LinkedDimensionsControl: ControlComponent<({ label, extendedValues }: {
     label: string;
+    extendedValues?: ExtendedValue[];
 }) => React.JSX.Element>;
 
 declare const FontFamilyControl: ControlComponent<({ fontFamilies }: any) => React.JSX.Element | null>;
@@ -211,4 +214,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };
+export { BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, type ControlComponent, ControlLabel, ControlReplacementProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, UrlControl, createControlReplacement, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.js

@@ -352,7 +352,7 @@ var ImageMediaControl = createControl((props) => {
       startIcon: /* @__PURE__ */ React8.createElement(import_icons.UploadIcon, null),
       onClick: () => open({ mode: "upload" })
     },
-    (0, import_i18n.__)("Upload image", "elementor")
+    (0, import_i18n.__)("Upload", "elementor")
   )))));
 });
 
@@ -385,7 +385,7 @@ var SelectControl = createControl(({ options, onChange }) => {
 var ImageControl = createControl(
   ({ sizes, resolutionLabel = (0, import_i18n2.__)("Image resolution", "elementor") }) => {
     const propContext = useBoundProp(import_editor_props3.imagePropTypeUtil);
-    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", (0, import_i18n2.__)("Choose image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, null)), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
+    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", (0, import_i18n2.__)("Image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, null)), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
   }
 );
 
@@ -522,27 +522,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(import_editor_props6.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(import_editor_props6.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(import_editor_props6.stringPropTypeUtil);
+  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,
     {
@@ -551,17 +598,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(import_ui10.InputAdornment, { 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
 var React17 = __toESM(require("react"));
@@ -847,7 +894,8 @@ var RepeaterItem = ({
           "aria-label": (0, import_i18n4.__)("Remove item", "elementor")
         },
         /* @__PURE__ */ React21.createElement(import_icons3.XIcon, { fontSize: SIZE })
-      ))
+      )),
+      sx: { backgroundColor: "background.paper" }
     }
   ), /* @__PURE__ */ React21.createElement(
     import_ui17.Popover,
@@ -1166,70 +1214,85 @@ var import_editor_props13 = require("@elementor/editor-props");
 var import_icons4 = require("@elementor/icons");
 var import_ui22 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
-var LinkedDimensionsControl = createControl(({ label }) => {
-  const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp(import_editor_props13.dimensionsPropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props13.sizePropTypeUtil);
-  const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
-  const onLinkToggle = () => {
-    if (!isLinked) {
-      setSizeValue(dimensionsValue?.top?.value);
-      return;
-    }
-    const value = sizeValue ? import_editor_props13.sizePropTypeUtil.create(sizeValue) : null;
-    setDimensionsValue({
-      top: value,
-      right: value,
-      bottom: value,
-      left: value
-    });
-  };
-  const LinkedIcon = isLinked ? import_icons4.LinkIcon : import_icons4.DetachIcon;
-  return /* @__PURE__ */ React27.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(
-    import_ui22.ToggleButton,
-    {
-      "aria-label": (0, import_i18n7.__)("Link inputs", "elementor"),
-      size: "tiny",
-      value: "check",
-      selected: isLinked,
-      sx: { marginLeft: "auto" },
-      onChange: onLinkToggle
-    },
-    /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
-    Control3,
-    {
-      bind: "top",
-      startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }),
-      isLinked
-    }
-  ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
-    Control3,
-    {
-      bind: "right",
-      startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }),
-      isLinked
-    }
-  )))), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
-    Control3,
-    {
-      bind: "bottom",
-      startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }),
-      isLinked
-    }
-  ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
-    Control3,
-    {
-      bind: "left",
-      startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }),
-      isLinked
-    }
-  )))));
-});
-var Control3 = ({ bind, startIcon, isLinked }) => {
+var LinkedDimensionsControl = createControl(
+  ({ label, extendedValues }) => {
+    const {
+      value: dimensionsValue,
+      setValue: setDimensionsValue,
+      propType
+    } = useBoundProp(import_editor_props13.dimensionsPropTypeUtil);
+    const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props13.sizePropTypeUtil);
+    const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
+    const onLinkToggle = () => {
+      if (!isLinked) {
+        setSizeValue(dimensionsValue?.top?.value);
+        return;
+      }
+      const value = sizeValue ? import_editor_props13.sizePropTypeUtil.create(sizeValue) : null;
+      setDimensionsValue({
+        top: value,
+        right: value,
+        bottom: value,
+        left: value
+      });
+    };
+    const LinkedIcon = isLinked ? import_icons4.LinkIcon : import_icons4.DetachIcon;
+    return /* @__PURE__ */ React27.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(
+      import_ui22.ToggleButton,
+      {
+        "aria-label": (0, import_i18n7.__)("Link Inputs", "elementor"),
+        size: "tiny",
+        value: "check",
+        selected: isLinked,
+        sx: { marginLeft: "auto" },
+        onChange: onLinkToggle
+      },
+      /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
+    )), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "top",
+        startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }),
+        isLinked,
+        extendedValues
+      }
+    ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "right",
+        startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }),
+        isLinked,
+        extendedValues
+      }
+    )))), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "bottom",
+        startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }),
+        isLinked,
+        extendedValues
+      }
+    ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "left",
+        startIcon: /* @__PURE__ */ React27.createElement(import_icons4.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
@@ -1306,13 +1369,13 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
       ...(0, import_ui23.bindPopover)(popoverState),
       onClose: handleClose
     },
-    /* @__PURE__ */ React28.createElement(import_ui23.Stack, null, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(import_icons5.EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { variant: "subtitle2" }, (0, import_i18n9.__)("Font Family", "elementor")), /* @__PURE__ */ React28.createElement(import_ui23.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React28.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React28.createElement(import_ui23.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React28.createElement(import_ui23.Stack, null, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(import_icons5.EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { variant: "subtitle2" }, (0, import_i18n9.__)("Font family", "elementor")), /* @__PURE__ */ React28.createElement(import_ui23.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React28.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React28.createElement(import_ui23.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React28.createElement(
       import_ui23.TextField,
       {
         fullWidth: true,
         size: SIZE2,
         value: searchValue,
-        placeholder: (0, import_i18n9.__)("Search", "elementor"),
+        placeholder: (0, import_i18n9.__)("Search fonts\u2026", "elementor"),
         onChange: handleSearch,
         InputProps: {
           startAdornment: /* @__PURE__ */ React28.createElement(import_ui23.InputAdornment, { position: "start" }, /* @__PURE__ */ React28.createElement(import_icons5.SearchIcon, { fontSize: SIZE2 }))
@@ -1381,6 +1444,7 @@ var import_http = require("@elementor/http");
 var import_icons7 = require("@elementor/icons");
 var import_session = require("@elementor/session");
 var import_ui26 = require("@elementor/ui");
+var import_utils2 = require("@elementor/utils");
 var import_i18n10 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
@@ -1539,7 +1603,7 @@ var LinkControl = createControl((props) => {
     debounceFetch({ ...requestParams, term: newValue });
   };
   const debounceFetch = (0, import_react11.useMemo)(
-    () => debounce(
+    () => (0, import_utils2.debounce)(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
       }),
@@ -1586,7 +1650,7 @@ var SwitchControl = () => {
   const onClick = () => {
     setValue(!value);
   };
-  return /* @__PURE__ */ React31.createElement(import_ui26.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true }, /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n10.__)("Open in new tab", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true }, /* @__PURE__ */ React31.createElement(import_ui26.Switch, { checked: value, onClick })));
+  return /* @__PURE__ */ React31.createElement(import_ui26.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true }, /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n10.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true }, /* @__PURE__ */ React31.createElement(import_ui26.Switch, { checked: value, onClick })));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -1616,15 +1680,6 @@ function generateFirstLoadedOption(unionValue) {
     }
   ] : [];
 }
-function debounce(fn, timeout) {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      fn(...args);
-    }, timeout);
-  };
-}
 
 // src/controls/gap-control.tsx
 var React32 = __toESM(require("react"));
@@ -1642,7 +1697,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 ? import_editor_props17.sizePropTypeUtil.create(sizeValue) : null;
@@ -1721,7 +1776,7 @@ var SvgMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React33.createElement(import_ui28.Stack, { gap: 1 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, " ", (0, import_i18n12.__)("Choose SVG", "elementor"), " "), /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React33.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React33.createElement(import_ui28.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React33.createElement(import_ui28.Stack, { gap: 1 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, " ", (0, import_i18n12.__)("SVG", "elementor"), " "), /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React33.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React33.createElement(import_ui28.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React33.createElement(
     import_ui28.CardMedia,
     {
       component: "img",
@@ -1756,7 +1811,7 @@ var SvgMediaControl = createControl(() => {
         startIcon: /* @__PURE__ */ React33.createElement(import_icons9.UploadIcon, null),
         onClick: () => open({ mode: "upload" })
       },
-      (0, import_i18n12.__)("Upload SVG", "elementor")
+      (0, import_i18n12.__)("Upload", "elementor")
     ))
   ))));
 });
@@ -1869,7 +1924,7 @@ var repeatControlOptions = [
   },
   {
     value: "no-repeat",
-    label: (0, import_i18n15.__)("No-Repeat", "elementor"),
+    label: (0, import_i18n15.__)("No-repeat", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.XIcon, { fontSize: size }),
     showTooltip: true
   }
@@ -1929,7 +1984,19 @@ var BackgroundImageOverlaySize = () => {
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
       onChange: handleSizeChange
     }
-  )))), isCustom ? /* @__PURE__ */ React37.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(import_icons13.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" }) })))))) : null);
+  )))), isCustom ? /* @__PURE__ */ React37.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React37.createElement(
+    SizeControl,
+    {
+      startIcon: /* @__PURE__ */ React37.createElement(import_icons13.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      extendedValues: ["auto"]
+    }
+  ))), /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React37.createElement(
+    SizeControl,
+    {
+      startIcon: /* @__PURE__ */ React37.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      extendedValues: ["auto"]
+    }
+  )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts