@elementor/editor-controls 0.13.0 → 0.15.0

package/dist/index.mjs

@@ -208,6 +208,34 @@ function createControl(Component, { supportsReplacements = true } = {}) {
   };
 }
 
+// src/hooks/use-unfiltered-files-upload.ts
+import { useMutation, useQuery, useQueryClient } from "@elementor/query";
+
+// src/api.ts
+import { httpService } from "@elementor/http";
+var ELEMENTOR_SETTING_URL = "elementor/v1/settings";
+var apiClient = {
+  getElementorSetting: (key) => httpService().get(`${ELEMENTOR_SETTING_URL}/${key}`).then((res) => formatSettingResponse(res.data)),
+  updateElementorSetting: (key, value) => httpService().put(`${ELEMENTOR_SETTING_URL}/${key}`, { value })
+};
+var formatSettingResponse = (response) => response.data.value;
+
+// src/hooks/use-unfiltered-files-upload.ts
+var UNFILTERED_FILES_UPLOAD_KEY = "elementor_unfiltered_files_upload";
+var unfilteredFilesQueryKey = {
+  queryKey: [UNFILTERED_FILES_UPLOAD_KEY]
+};
+var useUnfilteredFilesUpload = () => useQuery({
+  ...unfilteredFilesQueryKey,
+  queryFn: () => apiClient.getElementorSetting(UNFILTERED_FILES_UPLOAD_KEY).then((res) => {
+    return formatResponse(res);
+  }),
+  staleTime: Infinity
+});
+var formatResponse = (response) => {
+  return Boolean(response === "1");
+};
+
 // src/controls/image-media-control.tsx
 import * as React8 from "react";
 import { imageSrcPropTypeUtil } from "@elementor/editor-props";
@@ -246,19 +274,18 @@ function ControlActions({ children }) {
   if (items.length === 0) {
     return children;
   }
-  const menuItems = items.map(({ MenuItem: MenuItem5, id }) => /* @__PURE__ */ React7.createElement(MenuItem5, { key: id }));
+  const menuItems = items.map(({ MenuItem: MenuItem4, id }) => /* @__PURE__ */ React7.createElement(MenuItem4, { key: id }));
   return /* @__PURE__ */ React7.createElement(FloatingBarContainer, null, /* @__PURE__ */ React7.createElement(UnstableFloatingActionBar, { actions: menuItems }, children));
 }
 
 // src/controls/image-media-control.tsx
-var ImageMediaControl = createControl((props) => {
+var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
   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,
+    mediaTypes,
     multiple: false,
     selected: id?.value || null,
     onSelect: (selectedAttachment) => {
@@ -289,7 +316,7 @@ var ImageMediaControl = createControl((props) => {
       startIcon: /* @__PURE__ */ React8.createElement(UploadIcon, null),
       onClick: () => open({ mode: "upload" })
     },
-    __("Upload image", "elementor")
+    __("Upload", "elementor")
   )))));
 });
 
@@ -322,7 +349,9 @@ 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 }))))));
+    const { data: allowSvgUpload } = useUnfilteredFilesUpload();
+    const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
+    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, { mediaTypes })), /* @__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 +399,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 +488,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 +564,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";
@@ -563,6 +639,7 @@ import {
   IconButton,
   Popover,
   Stack as Stack5,
+  Tooltip,
   Typography as Typography2,
   UnstableTag,
   usePopupState as usePopupState2
@@ -766,6 +843,9 @@ var RepeaterItem = ({
   const [anchorEl, setAnchorEl] = useState2(null);
   const popoverState = usePopupState2({ popupId, variant: "popover" });
   const popoverProps = bindPopover(popoverState);
+  const duplicateLabel = __4("Duplicate", "elementor");
+  const toggleLabel = disabled ? __4("Show", "elementor") : __4("Hide", "elementor");
+  const removeLabel = __4("Remove", "elementor");
   return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     UnstableTag,
     {
@@ -777,31 +857,8 @@ var RepeaterItem = ({
       "aria-label": __4("Open item", "elementor"),
       ...bindTrigger2(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
-        IconButton,
-        {
-          size: SIZE,
-          onClick: duplicateItem,
-          "aria-label": __4("Duplicate item", "elementor")
-        },
-        /* @__PURE__ */ React21.createElement(CopyIcon, { fontSize: SIZE })
-      ), /* @__PURE__ */ React21.createElement(
-        IconButton,
-        {
-          size: SIZE,
-          onClick: toggleDisableItem,
-          "aria-label": disabled ? __4("Enable item", "elementor") : __4("Disable item", "elementor")
-        },
-        disabled ? /* @__PURE__ */ React21.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React21.createElement(EyeIcon, { fontSize: SIZE })
-      ), /* @__PURE__ */ React21.createElement(
-        IconButton,
-        {
-          size: SIZE,
-          onClick: removeItem,
-          "aria-label": __4("Remove item", "elementor")
-        },
-        /* @__PURE__ */ React21.createElement(XIcon, { fontSize: SIZE })
-      ))
+      actions: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React21.createElement(CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React21.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React21.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React21.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React21.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React21.createElement(XIcon, { fontSize: SIZE })))),
+      sx: { backgroundColor: "background.paper" }
     }
   ), /* @__PURE__ */ React21.createElement(
     Popover,
@@ -916,7 +973,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";
@@ -924,7 +981,7 @@ import {
   styled as styled3,
   ToggleButton,
   ToggleButtonGroup,
-  Tooltip,
+  Tooltip as Tooltip2,
   useTheme
 } from "@elementor/ui";
 var StyledToggleButtonGroup = styled3(ToggleButtonGroup)`
@@ -955,7 +1012,7 @@ var ControlToggleButtonGroup = ({
       }
     },
     items.map(
-      ({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React23.createElement(Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React23.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React23.createElement(Content3, { size }))) : /* @__PURE__ */ React23.createElement(
+      ({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React23.createElement(Tooltip2, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React23.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React23.createElement(Content3, { size }))) : /* @__PURE__ */ React23.createElement(
         ToggleButton,
         {
           key: buttonValue,
@@ -973,7 +1030,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);
     };
@@ -1033,7 +1090,7 @@ var NumberControl = createControl(
 import * as React26 from "react";
 import { useId as useId2, useRef as useRef2 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
-import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack6, ToggleButton as ToggleButton2, usePopupState as usePopupState3 } from "@elementor/ui";
+import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack6, ToggleButton as ToggleButton2, Tooltip as Tooltip3, usePopupState as usePopupState3 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 var isEqualSizes = (propValue, items) => {
   const values = Object.values(propValue);
@@ -1048,6 +1105,7 @@ var isEqualSizes = (propValue, items) => {
 function EqualUnequalSizesControl({
   label,
   icon,
+  tooltipLabel,
   items,
   multiSizePropTypeUtil
 }) {
@@ -1087,17 +1145,18 @@ function EqualUnequalSizesControl({
     return splitEqualValue() ?? null;
   };
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label)), /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React26.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label)), /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React26.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React26.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(
     ToggleButton2,
     {
       size: "tiny",
       value: "check",
       sx: { marginLeft: "auto" },
       ...bindToggle(popupState),
-      selected: popupState.isOpen
+      selected: popupState.isOpen,
+      "aria-label": tooltipLabel
     },
     icon
-  )))), /* @__PURE__ */ React26.createElement(
+  ))))), /* @__PURE__ */ React26.createElement(
     Popover2,
     {
       disablePortal: true,
@@ -1124,78 +1183,100 @@ var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React26.createElement(
 import * as React27 from "react";
 import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
-import { Grid as Grid6, Stack as Stack7, ToggleButton as ToggleButton3 } from "@elementor/ui";
+import { Grid as Grid6, Stack as Stack7, ToggleButton as ToggleButton3, Tooltip as Tooltip4 } 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,
+    isSiteRtl = false,
+    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["block-start"]?.value);
+        return;
+      }
+      const value = sizeValue ? sizePropTypeUtil3.create(sizeValue) : null;
+      setDimensionsValue({
+        "block-start": value,
+        "block-end": value,
+        "inline-start": value,
+        "inline-end": value
+      });
+    };
+    const tooltipLabel = label.toLowerCase();
+    const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+    const linkedLabel = __7("Link %s", "elementor").replace("%s", tooltipLabel);
+    const unlinkedLabel = __7("Unlink %s", "elementor").replace("%s", tooltipLabel);
+    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(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(
+      ToggleButton3,
+      {
+        "aria-label": isLinked ? unlinkedLabel : linkedLabel,
+        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: "block-start",
+        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, isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "inline-end",
+        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__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: "block-end",
+        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, isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "inline-start",
+        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__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";
+// src/controls/font-family-control/font-family-control.tsx
 import * as React28 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
   bindPopover as bindPopover3,
@@ -1206,58 +1287,50 @@ import {
   InputAdornment as InputAdornment3,
   Link,
   ListSubheader,
-  MenuItem as MenuItem3,
   MenuList,
   Popover as Popover3,
   Stack as Stack8,
+  styled as styled4,
   TextField as TextField5,
   Typography as Typography4,
   UnstableTag as UnstableTag2,
   usePopupState as usePopupState4
 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { debounce } from "@elementor/utils";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/hooks/use-filtered-font-families.ts
-import { __ as __8 } from "@wordpress/i18n";
-var supportedCategories = {
-  system: __8("System", "elementor"),
-  googlefonts: __8("Google Fonts", "elementor"),
-  customfonts: __8("Custom Fonts", "elementor")
-};
 var useFilteredFontFamilies = (fontFamilies, searchValue) => {
   const filteredFontFamilies = Object.entries(fontFamilies).reduce(
-    (acc, [font, category]) => {
-      const isMatch = font.toLowerCase().includes(searchValue.trim().toLowerCase());
-      if (!isMatch) {
-        return acc;
-      }
-      const categoryLabel = supportedCategories[category];
-      if (categoryLabel) {
-        const existingCategory = acc.get(categoryLabel);
-        if (existingCategory) {
-          existingCategory.push(font);
-        } else {
-          acc.set(categoryLabel, [font]);
-        }
+    (acc, [category, fonts]) => {
+      const filteredFonts = fonts.filter((font) => font.toLowerCase().includes(searchValue.toLowerCase()));
+      if (filteredFonts.length) {
+        acc.push({ type: "category", value: category });
+        filteredFonts.forEach((font) => {
+          acc.push({ type: "font", value: font });
+        });
       }
       return acc;
     },
-    /* @__PURE__ */ new Map()
+    []
   );
   return [...filteredFontFamilies];
 };
 
-// src/controls/font-family-control.tsx
+// src/controls/font-family-control/enqueue-font.tsx
+var enqueueFont = (fontFamily, context = "editor") => {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
+};
+
+// src/controls/font-family-control/font-family-control.tsx
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
   const [searchValue, setSearchValue] = useState3("");
-  const { value: fontFamily, setValue: setFontFamily } = useBoundProp(stringPropTypeUtil5);
-  const popupId = useId3();
-  const popoverState = usePopupState4({ variant: "popover", popupId });
+  const { value: fontFamily, setValue: setFontFamily } = useBoundProp(stringPropTypeUtil6);
+  const popoverState = usePopupState4({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
-  if (!filteredFontFamilies) {
-    return null;
-  }
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
   };
@@ -1283,42 +1356,27 @@ 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" }, __8("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: __8("Search", "elementor"),
         onChange: handleSearch,
         InputProps: {
           startAdornment: /* @__PURE__ */ React28.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React28.createElement(SearchIcon, { fontSize: SIZE2 }))
         }
       }
-    )), /* @__PURE__ */ React28.createElement(Divider2, null), /* @__PURE__ */ React28.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React28.createElement(MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React28.createElement(Fragment4, { key: index }, /* @__PURE__ */ React28.createElement(
-      ListSubheader,
+    )), /* @__PURE__ */ React28.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React28.createElement(
+      FontList,
       {
-        sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
-      },
-      category
-    ), items.map((item) => {
-      const isSelected = item === fontFamily;
-      return /* @__PURE__ */ React28.createElement(
-        MenuItem3,
-        {
-          key: item,
-          selected: isSelected,
-          autoFocus: isSelected,
-          onClick: () => {
-            setFontFamily(item);
-            handleClose();
-          },
-          sx: { px: 1.5, typography: "caption" },
-          style: { fontFamily: item }
-        },
-        item
-      );
-    })))) : /* @__PURE__ */ React28.createElement(Stack8, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React28.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __9("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React28.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React28.createElement(
+        fontListItems: filteredFontFamilies,
+        setFontFamily,
+        handleClose,
+        fontFamily
+      }
+    ) : /* @__PURE__ */ React28.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React28.createElement(Stack8, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React28.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React28.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React28.createElement(
       Link,
       {
         color: "secondary",
@@ -1326,10 +1384,139 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         component: "button",
         onClick: () => setSearchValue("")
       },
-      __9("Clear the filters", "elementor")
-    ), "\xA0", __9("and try again.", "elementor")))))
+      __8("Clear the filters", "elementor")
+    ), "\xA0", __8("and try again.", "elementor")))))
   ));
 });
+var LIST_ITEM_HEIGHT = 36;
+var LIST_ITEMS_BUFFER = 6;
+var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
+  const containerRef = useRef3(null);
+  const selectedItem = fontListItems.find((item) => item.value === fontFamily);
+  const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
+    getVirtualIndexes().forEach((index) => {
+      const item = fontListItems[index];
+      if (item && item.type === "font") {
+        enqueueFont(item.value);
+      }
+    });
+  }, 100);
+  const virtualizer = useVirtualizer({
+    count: fontListItems.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => LIST_ITEM_HEIGHT,
+    overscan: LIST_ITEMS_BUFFER,
+    onChange: debouncedVirtualizeChange
+  });
+  useEffect2(
+    () => {
+      virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fontFamily]
+  );
+  return /* @__PURE__ */ React28.createElement(
+    Box2,
+    {
+      ref: containerRef,
+      sx: {
+        overflowY: "auto",
+        height: 260,
+        width: 220
+      }
+    },
+    /* @__PURE__ */ React28.createElement(
+      StyledMenuList,
+      {
+        role: "listbox",
+        style: {
+          height: `${virtualizer.getTotalSize()}px`
+        },
+        "data-testid": "font-list"
+      },
+      virtualizer.getVirtualItems().map((virtualRow) => {
+        const item = fontListItems[virtualRow.index];
+        const isLast = virtualRow.index === fontListItems.length - 1;
+        const isFirst = virtualRow.index === 1;
+        const isSelected = selectedItem?.value === item.value;
+        const tabIndexFallback = !selectedItem ? 0 : -1;
+        if (item.type === "category") {
+          return /* @__PURE__ */ React28.createElement(
+            ListSubheader,
+            {
+              key: virtualRow.key,
+              style: {
+                transform: `translateY(${virtualRow.start}px)`
+              }
+            },
+            item.value
+          );
+        }
+        return /* @__PURE__ */ React28.createElement(
+          "li",
+          {
+            key: virtualRow.key,
+            role: "option",
+            "aria-selected": isSelected,
+            onClick: () => {
+              setFontFamily(item.value);
+              handleClose();
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                setFontFamily(item.value);
+                handleClose();
+              }
+              if (event.key === "ArrowDown" && isLast) {
+                event.preventDefault();
+                event.stopPropagation();
+              }
+              if (event.key === "ArrowUp" && isFirst) {
+                event.preventDefault();
+                event.stopPropagation();
+              }
+            },
+            tabIndex: isSelected ? 0 : tabIndexFallback,
+            style: {
+              transform: `translateY(${virtualRow.start}px)`,
+              fontFamily: item.value
+            }
+          },
+          item.value
+        );
+      })
+    )
+  );
+};
+var StyledMenuList = styled4(MenuList)(({ theme }) => ({
+  "& > li": {
+    height: LIST_ITEM_HEIGHT,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%"
+  },
+  '& > [role="option"]': {
+    ...theme.typography.caption,
+    lineHeight: "inherit",
+    padding: theme.spacing(0.75, 2),
+    "&:hover, &:focus": {
+      backgroundColor: theme.palette.action.hover
+    },
+    '&[aria-selected="true"]': {
+      backgroundColor: theme.palette.action.selected
+    },
+    cursor: "pointer",
+    textOverflow: "ellipsis"
+  },
+  width: "100%",
+  position: "relative"
+}));
+var useDebounce = (fn, delay) => {
+  const [debouncedFn] = useState3(() => debounce(fn, delay));
+  useEffect2(() => () => debouncedFn.cancel(), [debouncedFn]);
+  return debouncedFn;
+};
 
 // src/controls/url-control.tsx
 import * as React29 from "react";
@@ -1357,14 +1544,15 @@ 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 { httpService as httpService2 } 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 { __ as __10 } from "@wordpress/i18n";
+import { debounce as debounce2 } from "@elementor/utils";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/autocomplete.tsx
 import * as React30 from "react";
@@ -1502,7 +1690,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);
   };
@@ -1528,7 +1716,7 @@ var LinkControl = createControl((props) => {
     debounceFetch({ ...requestParams, term: newValue });
   };
   const debounceFetch = useMemo(
-    () => debounce(
+    () => debounce2(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
       }),
@@ -1545,13 +1733,13 @@ var LinkControl = createControl((props) => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React31.createElement(ControlLabel, null, __10("Link", "elementor")),
+    /* @__PURE__ */ React31.createElement(ControlLabel, null, __9("Link", "elementor")),
     /* @__PURE__ */ React31.createElement(
       ToggleIconControl,
       {
         enabled: isEnabled,
         onIconClick: onEnabledChange,
-        label: __10("Toggle link", "elementor")
+        label: __9("Toggle link", "elementor")
       }
     )
   ), /* @__PURE__ */ React31.createElement(Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React31.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React31.createElement(ControlActions, null, /* @__PURE__ */ React31.createElement(
@@ -1575,14 +1763,14 @@ 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, __9("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) {
     return [];
   }
   try {
-    const { data: response } = await httpService().get(ajaxUrl, { params });
+    const { data: response } = await httpService2().get(ajaxUrl, { params });
     return response.data.value;
   } catch {
     return [];
@@ -1605,22 +1793,13 @@ 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";
 import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
-import { Grid as Grid8, Stack as Stack10, ToggleButton as ToggleButton4 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { Grid as Grid8, Stack as Stack10, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
 var GapControl = createControl(({ label }) => {
   const {
     value: directionValue,
@@ -1631,7 +1810,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;
@@ -1640,11 +1819,14 @@ var GapControl = createControl(({ label }) => {
       column: value
     });
   };
+  const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
-  return /* @__PURE__ */ React32.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, label), /* @__PURE__ */ React32.createElement(
+  const linkedLabel = __10("Link %s", "elementor").replace("%s", tooltipLabel);
+  const unlinkedLabel = __10("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  return /* @__PURE__ */ React32.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, label), /* @__PURE__ */ React32.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React32.createElement(
     ToggleButton4,
     {
-      "aria-label": __11("Link inputs", "elementor"),
+      "aria-label": isLinked ? unlinkedLabel : linkedLabel,
       size: "tiny",
       value: "check",
       selected: isLinked,
@@ -1652,7 +1834,7 @@ var GapControl = createControl(({ label }) => {
       onChange: onLinkToggle
     },
     /* @__PURE__ */ React32.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __11("Column", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __11("Row", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
+  ))), /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
 });
 var Control4 = ({ bind, isLinked }) => {
   if (isLinked) {
@@ -1665,14 +1847,14 @@ var Control4 = ({ bind, isLinked }) => {
 import * as React33 from "react";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
-import { Button as Button3, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress2, Stack as Stack11, styled as styled4 } from "@elementor/ui";
+import { Button as Button3, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress2, Stack as Stack11, styled as styled5 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
-var StyledCard = styled4(Card2)`
+var StyledCard = styled5(Card2)`
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -1681,7 +1863,7 @@ var StyledCard = styled4(Card2)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = styled4(Stack11)`
+var StyledCardMediaContainer = styled5(Stack11)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -1695,9 +1877,9 @@ var SvgMediaControl = createControl(() => {
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
+  const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const { open } = useWpMediaFrame2({
-    types: ["image/svg+xml"],
-    allowedExtensions: ["svg"],
+    mediaTypes: ["svg"],
     multiple: false,
     selected: id?.value || null,
     onSelect: (selectedAttachment) => {
@@ -1710,12 +1892,18 @@ 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(
+  const handleClick = (openOptions) => {
+    if (allowSvgUpload) {
+      open(openOptions);
+    } else {
+    }
+  };
+  return /* @__PURE__ */ React33.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, " ", __11("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",
       image: src,
-      alt: __12("Preview SVG", "elementor"),
+      alt: __11("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
   )), /* @__PURE__ */ React33.createElement(
@@ -1733,9 +1921,9 @@ var SvgMediaControl = createControl(() => {
         size: "tiny",
         color: "inherit",
         variant: "outlined",
-        onClick: () => open({ mode: "browse" })
+        onClick: () => handleClick({ mode: "browse" })
       },
-      __12("Select SVG", "elementor")
+      __11("Select SVG", "elementor")
     ), /* @__PURE__ */ React33.createElement(
       Button3,
       {
@@ -1743,9 +1931,9 @@ var SvgMediaControl = createControl(() => {
         variant: "text",
         color: "inherit",
         startIcon: /* @__PURE__ */ React33.createElement(UploadIcon2, null),
-        onClick: () => open({ mode: "upload" })
+        onClick: () => handleClick({ mode: "upload" })
       },
-      __12("Upload SVG", "elementor")
+      __11("Upload", "elementor")
     ))
   ))));
 });
@@ -1754,7 +1942,7 @@ var SvgMediaControl = createControl(() => {
 import * as React39 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid14 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 import * as React38 from "react";
@@ -1765,7 +1953,7 @@ import {
 } from "@elementor/editor-props";
 import { Box as Box4, CardMedia as CardMedia3, Grid as Grid13, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 
 // src/env.ts
 import { parseEnv } from "@elementor/env";
@@ -1775,46 +1963,46 @@ var { env } = parseEnv("@elementor/editor-controls");
 import * as React34 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid9 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: __13("Fixed", "elementor"),
+    label: __12("Fixed", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: __13("Scroll", "elementor"),
+    label: __12("Scroll", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React34.createElement(PopoverGridContainer, null, /* @__PURE__ */ React34.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, __13("Attachment", "elementor"))), /* @__PURE__ */ React34.createElement(Grid9, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React34.createElement(PopoverGridContainer, null, /* @__PURE__ */ React34.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, __12("Attachment", "elementor"))), /* @__PURE__ */ React34.createElement(Grid9, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // 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";
+import { Grid as Grid10, MenuItem as MenuItem3, Select as Select2 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
 var backgroundPositionOptions = [
-  { label: __14("Center center", "elementor"), value: "center center" },
-  { label: __14("Center left", "elementor"), value: "center left" },
-  { label: __14("Center right", "elementor"), value: "center right" },
-  { label: __14("Top center", "elementor"), value: "top center" },
-  { label: __14("Top left", "elementor"), value: "top left" },
-  { label: __14("Top right", "elementor"), value: "top right" },
-  { label: __14("Bottom center", "elementor"), value: "bottom center" },
-  { label: __14("Bottom left", "elementor"), value: "bottom left" },
-  { label: __14("Bottom right", "elementor"), value: "bottom right" },
-  { label: __14("Custom", "elementor"), value: "custom" }
+  { 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" },
+  { label: __13("Custom", "elementor"), value: "custom" }
 ];
 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;
@@ -1824,7 +2012,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React35.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __14("Position", "elementor"))), /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React35.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __13("Position", "elementor"))), /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React35.createElement(
     Select2,
     {
       size: "tiny",
@@ -1832,7 +2020,7 @@ var BackgroundImageOverlayPosition = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React35.createElement(MenuItem4, { key: value, value: value ?? "" }, label))
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React35.createElement(MenuItem3, { key: value, value: value ?? "" }, label))
   )))), isCustom ? /* @__PURE__ */ React35.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: /* @__PURE__ */ React35.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: /* @__PURE__ */ React35.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
@@ -1840,40 +2028,40 @@ var BackgroundImageOverlayPosition = () => {
 import * as React36 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
 import { Grid as Grid11 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: __15("Repeat", "elementor"),
+    label: __14("Repeat", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: __15("Repeat-x", "elementor"),
+    label: __14("Repeat-x", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: __15("Repeat-y", "elementor"),
+    label: __14("Repeat-y", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: __15("No-Repeat", "elementor"),
+    label: __14("No-repeat", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(XIcon4, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, __15("Repeat", "elementor"))), /* @__PURE__ */ React36.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React36.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, __14("Repeat", "elementor"))), /* @__PURE__ */ React36.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React36.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // 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,
@@ -1883,36 +2071,36 @@ import {
   PencilIcon
 } from "@elementor/icons";
 import { Grid as Grid12 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 var sizeControlOptions = [
   {
     value: "auto",
-    label: __16("Auto", "elementor"),
+    label: __15("Auto", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: __16("Cover", "elementor"),
+    label: __15("Cover", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: __16("Contain", "elementor"),
+    label: __15("Contain", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __16("Custom", "elementor"),
+    label: __15("Custom", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil8);
+  const stringPropContext = useBoundProp(stringPropTypeUtil9);
   const isCustom = !!backgroundImageScaleContext.value;
   const handleSizeChange = (size) => {
     if (size === "custom") {
@@ -1921,7 +2109,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React37.createElement(Grid12, { container: true, spacing: 1.5 }, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, __16("Size", "elementor"))), /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React37.createElement(Grid12, { container: true, spacing: 1.5 }, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, __15("Size", "elementor"))), /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -1929,11 +2117,23 @@ 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
-import { useRef as useRef3 } from "react";
+import { useRef as useRef4 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundImageOverlayPropTypeUtil
@@ -1946,7 +2146,7 @@ var useBackgroundTabsHistory = ({
   const { value: imageValue, setValue: setImageValue } = useBoundProp(backgroundImageOverlayPropTypeUtil);
   const { value: colorValue, setValue: setColorValue } = useBoundProp(backgroundColorOverlayPropTypeUtil);
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(colorValue ? "color" : "image");
-  const valuesHistory = useRef3({
+  const valuesHistory = useRef4({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2
   });
@@ -2004,10 +2204,10 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: __17("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: __17("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: __17("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: __17("Full", "elementor"), value: "full" }
+  { label: __16("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: __16("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: __16("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: __16("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
@@ -2016,7 +2216,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
     {
       values: overlayValues ?? [],
       setValues: setValue,
-      label: __17("Overlay", "elementor"),
+      label: __16("Overlay", "elementor"),
       itemSettings: {
         Icon: ItemIcon2,
         Label: ItemLabel2,
@@ -2034,7 +2234,7 @@ var Content2 = () => {
     image: getInitialBackgroundOverlay().value,
     color: initialBackgroundColorOverlay.value
   });
-  return /* @__PURE__ */ React38.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React38.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React38.createElement(Tabs, { ...getTabsProps(), "aria-label": __17("Background Overlay", "elementor") }, /* @__PURE__ */ React38.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React38.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React38.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React38.createElement(PopoverContent, null, /* @__PURE__ */ React38.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React38.createElement(TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React38.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(ColorControl, { propTypeUtil: backgroundColorOverlayPropTypeUtil2 })))));
+  return /* @__PURE__ */ React38.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React38.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React38.createElement(Tabs, { ...getTabsProps(), "aria-label": __16("Background Overlay", "elementor") }, /* @__PURE__ */ React38.createElement(Tab, { label: __16("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React38.createElement(Tab, { label: __16("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React38.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React38.createElement(PopoverContent, null, /* @__PURE__ */ React38.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React38.createElement(TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React38.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(ColorControl, { propTypeUtil: backgroundColorOverlayPropTypeUtil2 })))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
@@ -2075,7 +2275,7 @@ var ImageOverlayContent = () => {
   return /* @__PURE__ */ React38.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React38.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(
     ImageControl,
     {
-      resolutionLabel: __17("Resolution", "elementor"),
+      resolutionLabel: __16("Resolution", "elementor"),
       sizes: backgroundResolutionOptions
     }
   )))), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React38.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React38.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React38.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React38.createElement(BackgroundImageOverlayAttachment, null)));
@@ -2098,7 +2298,7 @@ var useImage = (image) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  return /* @__PURE__ */ React39.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React39.createElement(SectionContent, null, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React39.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React39.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, __18("Color", "elementor"))), /* @__PURE__ */ React39.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ColorControl, null))))));
+  return /* @__PURE__ */ React39.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React39.createElement(SectionContent, null, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React39.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React39.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, __17("Color", "elementor"))), /* @__PURE__ */ React39.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ColorControl, null))))));
 });
 export {
   BackgroundControl,