@elementor/editor-controls 0.13.0 → 0.15.0

package/dist/index.js

@@ -271,6 +271,34 @@ function createControl(Component, { supportsReplacements = true } = {}) {
   };
 }
 
+// src/hooks/use-unfiltered-files-upload.ts
+var import_query = require("@elementor/query");
+
+// src/api.ts
+var import_http = require("@elementor/http");
+var ELEMENTOR_SETTING_URL = "elementor/v1/settings";
+var apiClient = {
+  getElementorSetting: (key) => (0, import_http.httpService)().get(`${ELEMENTOR_SETTING_URL}/${key}`).then((res) => formatSettingResponse(res.data)),
+  updateElementorSetting: (key, value) => (0, import_http.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 = () => (0, import_query.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
 var React8 = __toESM(require("react"));
 var import_editor_props = require("@elementor/editor-props");
@@ -309,19 +337,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(import_ui3.UnstableFloatingActionBar, { actions: menuItems }, children));
 }
 
 // src/controls/image-media-control.tsx
-var ImageMediaControl = createControl((props) => {
+var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
   const { value, setValue } = useBoundProp(import_editor_props.imageSrcPropTypeUtil);
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = (0, import_wp_media.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { open } = (0, import_wp_media.useWpMediaFrame)({
-    types: ["image", "image/svg+xml"],
-    allowedExtensions: props.allowedExtensions,
+    mediaTypes,
     multiple: false,
     selected: id?.value || null,
     onSelect: (selectedAttachment) => {
@@ -352,7 +379,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 +412,9 @@ 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 }))))));
+    const { data: allowSvgUpload } = useUnfilteredFilesUpload();
+    const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
+    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, { mediaTypes })), /* @__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 +551,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 +627,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"));
@@ -812,6 +888,9 @@ var RepeaterItem = ({
   const [anchorEl, setAnchorEl] = (0, import_react7.useState)(null);
   const popoverState = (0, import_ui17.usePopupState)({ popupId, variant: "popover" });
   const popoverProps = (0, import_ui17.bindPopover)(popoverState);
+  const duplicateLabel = (0, import_i18n4.__)("Duplicate", "elementor");
+  const toggleLabel = disabled ? (0, import_i18n4.__)("Show", "elementor") : (0, import_i18n4.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n4.__)("Remove", "elementor");
   return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     import_ui17.UnstableTag,
     {
@@ -823,31 +902,8 @@ var RepeaterItem = ({
       "aria-label": (0, import_i18n4.__)("Open item", "elementor"),
       ...(0, import_ui17.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
-        import_ui17.IconButton,
-        {
-          size: SIZE,
-          onClick: duplicateItem,
-          "aria-label": (0, import_i18n4.__)("Duplicate item", "elementor")
-        },
-        /* @__PURE__ */ React21.createElement(import_icons3.CopyIcon, { fontSize: SIZE })
-      ), /* @__PURE__ */ React21.createElement(
-        import_ui17.IconButton,
-        {
-          size: SIZE,
-          onClick: toggleDisableItem,
-          "aria-label": disabled ? (0, import_i18n4.__)("Enable item", "elementor") : (0, import_i18n4.__)("Disable item", "elementor")
-        },
-        disabled ? /* @__PURE__ */ React21.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React21.createElement(import_icons3.EyeIcon, { fontSize: SIZE })
-      ), /* @__PURE__ */ React21.createElement(
-        import_ui17.IconButton,
-        {
-          size: SIZE,
-          onClick: removeItem,
-          "aria-label": (0, import_i18n4.__)("Remove item", "elementor")
-        },
-        /* @__PURE__ */ React21.createElement(import_icons3.XIcon, { fontSize: SIZE })
-      ))
+      actions: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui17.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(import_ui17.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React21.createElement(import_icons3.CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React21.createElement(import_ui17.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(import_ui17.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React21.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React21.createElement(import_icons3.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React21.createElement(import_ui17.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(import_ui17.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React21.createElement(import_icons3.XIcon, { fontSize: SIZE })))),
+      sx: { backgroundColor: "background.paper" }
     }
   ), /* @__PURE__ */ React21.createElement(
     import_ui17.Popover,
@@ -1088,6 +1144,7 @@ var isEqualSizes = (propValue, items) => {
 function EqualUnequalSizesControl({
   label,
   icon,
+  tooltipLabel,
   items,
   multiSizePropTypeUtil
 }) {
@@ -1127,17 +1184,18 @@ function EqualUnequalSizesControl({
     return splitEqualValue() ?? null;
   };
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label)), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React26.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label)), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React26.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React26.createElement(import_ui21.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(
     import_ui21.ToggleButton,
     {
       size: "tiny",
       value: "check",
       sx: { marginLeft: "auto" },
       ...(0, import_ui21.bindToggle)(popupState),
-      selected: popupState.isOpen
+      selected: popupState.isOpen,
+      "aria-label": tooltipLabel
     },
     icon
-  )))), /* @__PURE__ */ React26.createElement(
+  ))))), /* @__PURE__ */ React26.createElement(
     import_ui21.Popover,
     {
       disablePortal: true,
@@ -1166,121 +1224,135 @@ 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,
+    isSiteRtl = false,
+    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["block-start"]?.value);
+        return;
+      }
+      const value = sizeValue ? import_editor_props13.sizePropTypeUtil.create(sizeValue) : null;
+      setDimensionsValue({
+        "block-start": value,
+        "block-end": value,
+        "inline-start": value,
+        "inline-end": value
+      });
+    };
+    const tooltipLabel = label.toLowerCase();
+    const LinkedIcon = isLinked ? import_icons4.LinkIcon : import_icons4.DetachIcon;
+    const linkedLabel = (0, import_i18n7.__)("Link %s", "elementor").replace("%s", tooltipLabel);
+    const unlinkedLabel = (0, import_i18n7.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
+    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.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(
+      import_ui22.ToggleButton,
+      {
+        "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(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: "block-start",
+        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, isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "inline-end",
+        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }) : /* @__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: "block-end",
+        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, isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      Control3,
+      {
+        bind: "inline-start",
+        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }) : /* @__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
-var import_react9 = require("react");
+// src/controls/font-family-control/font-family-control.tsx
 var React28 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_editor_props14 = require("@elementor/editor-props");
 var import_icons5 = require("@elementor/icons");
 var import_ui23 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_utils2 = require("@elementor/utils");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/hooks/use-filtered-font-families.ts
-var import_i18n8 = require("@wordpress/i18n");
-var supportedCategories = {
-  system: (0, import_i18n8.__)("System", "elementor"),
-  googlefonts: (0, import_i18n8.__)("Google Fonts", "elementor"),
-  customfonts: (0, import_i18n8.__)("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] = (0, import_react9.useState)("");
   const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props14.stringPropTypeUtil);
-  const popupId = (0, import_react9.useId)();
-  const popoverState = (0, import_ui23.usePopupState)({ variant: "popover", popupId });
+  const popoverState = (0, import_ui23.usePopupState)({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
-  if (!filteredFontFamilies) {
-    return null;
-  }
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
   };
@@ -1306,42 +1378,27 @@ 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_i18n8.__)("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_i18n8.__)("Search", "elementor"),
         onChange: handleSearch,
         InputProps: {
           startAdornment: /* @__PURE__ */ React28.createElement(import_ui23.InputAdornment, { position: "start" }, /* @__PURE__ */ React28.createElement(import_icons5.SearchIcon, { fontSize: SIZE2 }))
         }
       }
-    )), /* @__PURE__ */ React28.createElement(import_ui23.Divider, null), /* @__PURE__ */ React28.createElement(import_ui23.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React28.createElement(import_ui23.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React28.createElement(import_react9.Fragment, { key: index }, /* @__PURE__ */ React28.createElement(
-      import_ui23.ListSubheader,
+    )), /* @__PURE__ */ React28.createElement(import_ui23.Divider, 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(
-        import_ui23.MenuItem,
-        {
-          key: item,
-          selected: isSelected,
-          autoFocus: isSelected,
-          onClick: () => {
-            setFontFamily(item);
-            handleClose();
-          },
-          sx: { px: 1.5, typography: "caption" },
-          style: { fontFamily: item }
-        },
-        item
-      );
-    })))) : /* @__PURE__ */ React28.createElement(import_ui23.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React28.createElement(import_icons5.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n9.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React28.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React28.createElement(
+        fontListItems: filteredFontFamilies,
+        setFontFamily,
+        handleClose,
+        fontFamily
+      }
+    ) : /* @__PURE__ */ React28.createElement(import_ui23.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React28.createElement(import_icons5.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React28.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React28.createElement(
       import_ui23.Link,
       {
         color: "secondary",
@@ -1349,10 +1406,139 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         component: "button",
         onClick: () => setSearchValue("")
       },
-      (0, import_i18n9.__)("Clear the filters", "elementor")
-    ), "\xA0", (0, import_i18n9.__)("and try again.", "elementor")))))
+      (0, import_i18n8.__)("Clear the filters", "elementor")
+    ), "\xA0", (0, import_i18n8.__)("and try again.", "elementor")))))
   ));
 });
+var LIST_ITEM_HEIGHT = 36;
+var LIST_ITEMS_BUFFER = 6;
+var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
+  const containerRef = (0, import_react9.useRef)(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 = (0, import_react_virtual.useVirtualizer)({
+    count: fontListItems.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => LIST_ITEM_HEIGHT,
+    overscan: LIST_ITEMS_BUFFER,
+    onChange: debouncedVirtualizeChange
+  });
+  (0, import_react9.useEffect)(
+    () => {
+      virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fontFamily]
+  );
+  return /* @__PURE__ */ React28.createElement(
+    import_ui23.Box,
+    {
+      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(
+            import_ui23.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 = (0, import_ui23.styled)(import_ui23.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] = (0, import_react9.useState)(() => (0, import_utils2.debounce)(fn, delay));
+  (0, import_react9.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  return debouncedFn;
+};
 
 // src/controls/url-control.tsx
 var React29 = __toESM(require("react"));
@@ -1377,11 +1563,12 @@ var UrlControl = createControl(({ placeholder }) => {
 var React31 = __toESM(require("react"));
 var import_react11 = require("react");
 var import_editor_props16 = require("@elementor/editor-props");
-var import_http = require("@elementor/http");
+var import_http2 = require("@elementor/http");
 var import_icons7 = require("@elementor/icons");
 var import_session = require("@elementor/session");
 var import_ui26 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_utils3 = require("@elementor/utils");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
 var React30 = __toESM(require("react"));
@@ -1539,7 +1726,7 @@ var LinkControl = createControl((props) => {
     debounceFetch({ ...requestParams, term: newValue });
   };
   const debounceFetch = (0, import_react11.useMemo)(
-    () => debounce(
+    () => (0, import_utils3.debounce)(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
       }),
@@ -1556,13 +1743,13 @@ var LinkControl = createControl((props) => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n10.__)("Link", "elementor")),
+    /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n9.__)("Link", "elementor")),
     /* @__PURE__ */ React31.createElement(
       ToggleIconControl,
       {
         enabled: isEnabled,
         onIconClick: onEnabledChange,
-        label: (0, import_i18n10.__)("Toggle link", "elementor")
+        label: (0, import_i18n9.__)("Toggle link", "elementor")
       }
     )
   ), /* @__PURE__ */ React31.createElement(import_ui26.Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React31.createElement(import_ui26.Stack, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React31.createElement(ControlActions, null, /* @__PURE__ */ React31.createElement(
@@ -1586,14 +1773,14 @@ 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_i18n9.__)("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) {
     return [];
   }
   try {
-    const { data: response } = await (0, import_http.httpService)().get(ajaxUrl, { params });
+    const { data: response } = await (0, import_http2.httpService)().get(ajaxUrl, { params });
     return response.data.value;
   } catch {
     return [];
@@ -1616,22 +1803,13 @@ 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"));
 var import_editor_props17 = require("@elementor/editor-props");
 var import_icons8 = require("@elementor/icons");
 var import_ui27 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 var GapControl = createControl(({ label }) => {
   const {
     value: directionValue,
@@ -1642,7 +1820,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;
@@ -1651,11 +1829,14 @@ var GapControl = createControl(({ label }) => {
       column: value
     });
   };
+  const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? import_icons8.LinkIcon : import_icons8.DetachIcon;
-  return /* @__PURE__ */ React32.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React32.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, label), /* @__PURE__ */ React32.createElement(
+  const linkedLabel = (0, import_i18n10.__)("Link %s", "elementor").replace("%s", tooltipLabel);
+  const unlinkedLabel = (0, import_i18n10.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  return /* @__PURE__ */ React32.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React32.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, label), /* @__PURE__ */ React32.createElement(import_ui27.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React32.createElement(
     import_ui27.ToggleButton,
     {
-      "aria-label": (0, import_i18n11.__)("Link inputs", "elementor"),
+      "aria-label": isLinked ? unlinkedLabel : linkedLabel,
       size: "tiny",
       value: "check",
       selected: isLinked,
@@ -1663,7 +1844,7 @@ var GapControl = createControl(({ label }) => {
       onChange: onLinkToggle
     },
     /* @__PURE__ */ React32.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React32.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n11.__)("Column", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n11.__)("Row", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
+  ))), /* @__PURE__ */ React32.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
 });
 var Control4 = ({ bind, isLinked }) => {
   if (isLinked) {
@@ -1678,7 +1859,7 @@ var import_editor_props18 = require("@elementor/editor-props");
 var import_icons9 = require("@elementor/icons");
 var import_ui28 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
@@ -1706,9 +1887,9 @@ var SvgMediaControl = createControl(() => {
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
+  const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
-    types: ["image/svg+xml"],
-    allowedExtensions: ["svg"],
+    mediaTypes: ["svg"],
     multiple: false,
     selected: id?.value || null,
     onSelect: (selectedAttachment) => {
@@ -1721,12 +1902,18 @@ 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(
+  const handleClick = (openOptions) => {
+    if (allowSvgUpload) {
+      open(openOptions);
+    } else {
+    }
+  };
+  return /* @__PURE__ */ React33.createElement(import_ui28.Stack, { gap: 1 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, " ", (0, import_i18n11.__)("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",
       image: src,
-      alt: (0, import_i18n12.__)("Preview SVG", "elementor"),
+      alt: (0, import_i18n11.__)("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
   )), /* @__PURE__ */ React33.createElement(
@@ -1744,9 +1931,9 @@ var SvgMediaControl = createControl(() => {
         size: "tiny",
         color: "inherit",
         variant: "outlined",
-        onClick: () => open({ mode: "browse" })
+        onClick: () => handleClick({ mode: "browse" })
       },
-      (0, import_i18n12.__)("Select SVG", "elementor")
+      (0, import_i18n11.__)("Select SVG", "elementor")
     ), /* @__PURE__ */ React33.createElement(
       import_ui28.Button,
       {
@@ -1754,9 +1941,9 @@ var SvgMediaControl = createControl(() => {
         variant: "text",
         color: "inherit",
         startIcon: /* @__PURE__ */ React33.createElement(import_icons9.UploadIcon, null),
-        onClick: () => open({ mode: "upload" })
+        onClick: () => handleClick({ mode: "upload" })
       },
-      (0, import_i18n12.__)("Upload SVG", "elementor")
+      (0, import_i18n11.__)("Upload", "elementor")
     ))
   ))));
 });
@@ -1765,14 +1952,14 @@ var SvgMediaControl = createControl(() => {
 var React39 = __toESM(require("react"));
 var import_editor_props23 = require("@elementor/editor-props");
 var import_ui35 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var import_i18n17 = require("@wordpress/i18n");
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 var React38 = __toESM(require("react"));
 var import_editor_props22 = require("@elementor/editor-props");
 var import_ui34 = require("@elementor/ui");
 var import_wp_media3 = require("@elementor/wp-media");
-var import_i18n17 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 
 // src/env.ts
 var import_env = require("@elementor/env");
@@ -1782,23 +1969,23 @@ var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
 var React34 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
 var import_ui29 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: (0, import_i18n13.__)("Fixed", "elementor"),
+    label: (0, import_i18n12.__)("Fixed", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(import_icons10.PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: (0, import_i18n13.__)("Scroll", "elementor"),
+    label: (0, import_i18n12.__)("Scroll", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(import_icons10.PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React34.createElement(PopoverGridContainer, null, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, (0, import_i18n13.__)("Attachment", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui29.Grid, { 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(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, (0, import_i18n12.__)("Attachment", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui29.Grid, { 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
@@ -1806,18 +1993,18 @@ var React35 = __toESM(require("react"));
 var import_editor_props19 = require("@elementor/editor-props");
 var import_icons11 = require("@elementor/icons");
 var import_ui30 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 var backgroundPositionOptions = [
-  { label: (0, import_i18n14.__)("Center center", "elementor"), value: "center center" },
-  { label: (0, import_i18n14.__)("Center left", "elementor"), value: "center left" },
-  { label: (0, import_i18n14.__)("Center right", "elementor"), value: "center right" },
-  { label: (0, import_i18n14.__)("Top center", "elementor"), value: "top center" },
-  { label: (0, import_i18n14.__)("Top left", "elementor"), value: "top left" },
-  { label: (0, import_i18n14.__)("Top right", "elementor"), value: "top right" },
-  { label: (0, import_i18n14.__)("Bottom center", "elementor"), value: "bottom center" },
-  { label: (0, import_i18n14.__)("Bottom left", "elementor"), value: "bottom left" },
-  { label: (0, import_i18n14.__)("Bottom right", "elementor"), value: "bottom right" },
-  { label: (0, import_i18n14.__)("Custom", "elementor"), value: "custom" }
+  { label: (0, import_i18n13.__)("Center center", "elementor"), value: "center center" },
+  { label: (0, import_i18n13.__)("Center left", "elementor"), value: "center left" },
+  { label: (0, import_i18n13.__)("Center right", "elementor"), value: "center right" },
+  { label: (0, import_i18n13.__)("Top center", "elementor"), value: "top center" },
+  { label: (0, import_i18n13.__)("Top left", "elementor"), value: "top left" },
+  { label: (0, import_i18n13.__)("Top right", "elementor"), value: "top right" },
+  { label: (0, import_i18n13.__)("Bottom center", "elementor"), value: "bottom center" },
+  { label: (0, import_i18n13.__)("Bottom left", "elementor"), value: "bottom left" },
+  { label: (0, import_i18n13.__)("Bottom right", "elementor"), value: "bottom right" },
+  { label: (0, import_i18n13.__)("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(import_editor_props19.backgroundImagePositionOffsetPropTypeUtil);
@@ -1831,7 +2018,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React35.createElement(import_ui30.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n14.__)("Position", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React35.createElement(import_ui30.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n13.__)("Position", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React35.createElement(
     import_ui30.Select,
     {
       size: "tiny",
@@ -1847,35 +2034,35 @@ var BackgroundImageOverlayPosition = () => {
 var React36 = __toESM(require("react"));
 var import_icons12 = require("@elementor/icons");
 var import_ui31 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: (0, import_i18n15.__)("Repeat", "elementor"),
+    label: (0, import_i18n14.__)("Repeat", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: (0, import_i18n15.__)("Repeat-x", "elementor"),
+    label: (0, import_i18n14.__)("Repeat-x", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: (0, import_i18n15.__)("Repeat-y", "elementor"),
+    label: (0, import_i18n14.__)("Repeat-y", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: (0, import_i18n15.__)("No-Repeat", "elementor"),
+    label: (0, import_i18n14.__)("No-repeat", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.XIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n15.__)("Repeat", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui31.Grid, { 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(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n14.__)("Repeat", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui31.Grid, { 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
@@ -1883,29 +2070,29 @@ var React37 = __toESM(require("react"));
 var import_editor_props20 = require("@elementor/editor-props");
 var import_icons13 = require("@elementor/icons");
 var import_ui32 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 var sizeControlOptions = [
   {
     value: "auto",
-    label: (0, import_i18n16.__)("Auto", "elementor"),
+    label: (0, import_i18n15.__)("Auto", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: (0, import_i18n16.__)("Cover", "elementor"),
+    label: (0, import_i18n15.__)("Cover", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: (0, import_i18n16.__)("Contain", "elementor"),
+    label: (0, import_i18n15.__)("Contain", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: (0, import_i18n16.__)("Custom", "elementor"),
+    label: (0, import_i18n15.__)("Custom", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
@@ -1921,7 +2108,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React37.createElement(import_ui32.Grid, { container: true, spacing: 1.5 }, /* @__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(ControlLabel, null, (0, import_i18n16.__)("Size", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React37.createElement(import_ui32.Grid, { container: true, spacing: 1.5 }, /* @__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(ControlLabel, null, (0, import_i18n15.__)("Size", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -1929,7 +2116,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
@@ -2001,10 +2200,10 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: (0, import_i18n17.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: (0, import_i18n17.__)("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: (0, import_i18n17.__)("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: (0, import_i18n17.__)("Full", "elementor"), value: "full" }
+  { label: (0, import_i18n16.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: (0, import_i18n16.__)("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: (0, import_i18n16.__)("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: (0, import_i18n16.__)("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props22.backgroundOverlayPropTypeUtil);
@@ -2013,7 +2212,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
     {
       values: overlayValues ?? [],
       setValues: setValue,
-      label: (0, import_i18n17.__)("Overlay", "elementor"),
+      label: (0, import_i18n16.__)("Overlay", "elementor"),
       itemSettings: {
         Icon: ItemIcon2,
         Label: ItemLabel2,
@@ -2031,7 +2230,7 @@ var Content2 = () => {
     image: getInitialBackgroundOverlay().value,
     color: initialBackgroundColorOverlay.value
   });
-  return /* @__PURE__ */ React38.createElement(import_ui34.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React38.createElement(import_ui34.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React38.createElement(import_ui34.Tabs, { ...getTabsProps(), "aria-label": (0, import_i18n17.__)("Background Overlay", "elementor") }, /* @__PURE__ */ React38.createElement(import_ui34.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React38.createElement(import_ui34.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React38.createElement(import_ui34.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React38.createElement(PopoverContent, null, /* @__PURE__ */ React38.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React38.createElement(import_ui34.TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React38.createElement(import_ui34.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(ColorControl, { propTypeUtil: import_editor_props22.backgroundColorOverlayPropTypeUtil })))));
+  return /* @__PURE__ */ React38.createElement(import_ui34.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React38.createElement(import_ui34.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React38.createElement(import_ui34.Tabs, { ...getTabsProps(), "aria-label": (0, import_i18n16.__)("Background Overlay", "elementor") }, /* @__PURE__ */ React38.createElement(import_ui34.Tab, { label: (0, import_i18n16.__)("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React38.createElement(import_ui34.Tab, { label: (0, import_i18n16.__)("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React38.createElement(import_ui34.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React38.createElement(PopoverContent, null, /* @__PURE__ */ React38.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React38.createElement(import_ui34.TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React38.createElement(import_ui34.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(ColorControl, { propTypeUtil: import_editor_props22.backgroundColorOverlayPropTypeUtil })))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
@@ -2072,7 +2271,7 @@ var ImageOverlayContent = () => {
   return /* @__PURE__ */ React38.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React38.createElement(import_ui34.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(
     ImageControl,
     {
-      resolutionLabel: (0, import_i18n17.__)("Resolution", "elementor"),
+      resolutionLabel: (0, import_i18n16.__)("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)));
@@ -2095,7 +2294,7 @@ var useImage = (image) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(import_editor_props23.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(import_ui35.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui35.Grid, { 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(import_ui35.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, (0, import_i18n17.__)("Color", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ColorControl, null))))));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {