@elementor/editor-controls 0.14.0 → 0.16.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) => {
@@ -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("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 }))))));
   }
 );
 
@@ -610,6 +639,7 @@ import {
   IconButton,
   Popover,
   Stack as Stack5,
+  Tooltip,
   Typography as Typography2,
   UnstableTag,
   usePopupState as usePopupState2
@@ -813,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,
     {
@@ -824,31 +857,7 @@ 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(
@@ -972,7 +981,7 @@ import {
   styled as styled3,
   ToggleButton,
   ToggleButtonGroup,
-  Tooltip,
+  Tooltip as Tooltip2,
   useTheme
 } from "@elementor/ui";
 var StyledToggleButtonGroup = styled3(ToggleButtonGroup)`
@@ -1003,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,
@@ -1081,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);
@@ -1096,6 +1105,7 @@ var isEqualSizes = (propValue, items) => {
 function EqualUnequalSizesControl({
   label,
   icon,
+  tooltipLabel,
   items,
   multiSizePropTypeUtil
 }) {
@@ -1135,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,
@@ -1172,10 +1183,14 @@ 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, extendedValues }) => {
+  ({
+    label,
+    isSiteRtl = false,
+    extendedValues
+  }) => {
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
@@ -1185,22 +1200,25 @@ var LinkedDimensionsControl = createControl(
     const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
     const onLinkToggle = () => {
       if (!isLinked) {
-        setSizeValue(dimensionsValue?.top?.value);
+        setSizeValue(dimensionsValue["block-start"]?.value);
         return;
       }
       const value = sizeValue ? sizePropTypeUtil3.create(sizeValue) : null;
       setDimensionsValue({
-        top: value,
-        right: value,
-        bottom: value,
-        left: value
+        "block-start": value,
+        "block-end": value,
+        "inline-start": value,
+        "inline-end": value
       });
     };
+    const tooltipLabel = label.toLowerCase();
     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(
+    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": __7("Link Inputs", "elementor"),
+        "aria-label": isLinked ? unlinkedLabel : linkedLabel,
         size: "tiny",
         value: "check",
         selected: isLinked,
@@ -1208,35 +1226,35 @@ var LinkedDimensionsControl = createControl(
         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(
+    ))), /* @__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",
+        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, __7("Right", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    ))), /* @__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: "right",
-        startIcon: /* @__PURE__ */ React27.createElement(SideRightIcon, { fontSize: "tiny" }),
+        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: "bottom",
+        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, __7("Left", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    ))), /* @__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: "left",
-        startIcon: /* @__PURE__ */ React27.createElement(SideLeftIcon, { fontSize: "tiny" }),
+        bind: "inline-start",
+        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React27.createElement(SideLeftIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
@@ -1255,11 +1273,11 @@ var Control3 = ({
   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 { 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 { ChevronDownIcon, SearchIcon, TextIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
   bindPopover as bindPopover3,
   bindTrigger as bindTrigger3,
@@ -1269,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(stringPropTypeUtil6);
-  const popupId = useId3();
-  const popoverState = usePopupState4({ variant: "popover", popupId });
+  const popoverState = usePopupState4({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
-  if (!filteredFontFamilies) {
-    return null;
-  }
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
   };
@@ -1346,42 +1356,47 @@ 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(TextIcon, { 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 fonts\u2026", "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,
+      {
+        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, overflow: "hidden" }, /* @__PURE__ */ React28.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(Box2, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React28.createElement(
+      Typography4,
       {
-        sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
+        variant: "subtitle2",
+        color: "text.secondary",
+        sx: {
+          display: "flex",
+          width: "100%",
+          justifyContent: "center"
+        }
       },
-      category
-    ), items.map((item) => {
-      const isSelected = item === fontFamily;
-      return /* @__PURE__ */ React28.createElement(
-        MenuItem3,
+      /* @__PURE__ */ React28.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React28.createElement(
+        "span",
         {
-          key: item,
-          selected: isSelected,
-          autoFocus: isSelected,
-          onClick: () => {
-            setFontFamily(item);
-            handleClose();
-          },
-          sx: { px: 1.5, typography: "caption" },
-          style: { fontFamily: item }
+          style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
         },
-        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(
+        searchValue
+      ),
+      /* @__PURE__ */ React28.createElement("span", null, "\u201D.")
+    )), /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __8("Try something else.", "elementor"), /* @__PURE__ */ React28.createElement(
       Link,
       {
         color: "secondary",
@@ -1389,10 +1404,139 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         component: "button",
         onClick: () => setSearchValue("")
       },
-      __9("Clear the filters", "elementor")
-    ), "\xA0", __9("and try again.", "elementor")))))
+      __8("Clear & 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";
@@ -1423,12 +1567,12 @@ import {
   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 { debounce } from "@elementor/utils";
-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";
@@ -1592,7 +1736,7 @@ var LinkControl = createControl((props) => {
     debounceFetch({ ...requestParams, term: newValue });
   };
   const debounceFetch = useMemo(
-    () => debounce(
+    () => debounce2(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
       }),
@@ -1609,13 +1753,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(
@@ -1639,14 +1783,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 a 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 [];
@@ -1674,8 +1818,8 @@ function generateFirstLoadedOption(unionValue) {
 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,
@@ -1695,11 +1839,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,
@@ -1707,7 +1854,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) {
@@ -1720,14 +1867,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;
@@ -1736,7 +1883,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;
@@ -1750,9 +1897,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) => {
@@ -1765,12 +1912,18 @@ var SvgMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React33.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, " ", __12("SVG", "elementor"), " "), /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React33.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React33.createElement(CircularProgress2, { role: "progressbar" }) : /* @__PURE__ */ React33.createElement(
+  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(
@@ -1788,9 +1941,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,
       {
@@ -1798,21 +1951,21 @@ var SvgMediaControl = createControl(() => {
         variant: "text",
         color: "inherit",
         startIcon: /* @__PURE__ */ React33.createElement(UploadIcon2, null),
-        onClick: () => open({ mode: "upload" })
+        onClick: () => handleClick({ mode: "upload" })
       },
-      __12("Upload", "elementor")
+      __11("Upload", "elementor")
     ))
   ))));
 });
 
 // src/controls/background-control/background-control.tsx
-import * as React39 from "react";
+import * as React40 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";
+import * as React39 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
@@ -1820,56 +1973,128 @@ 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";
 var { env } = parseEnv("@elementor/editor-controls");
 
-// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
+// src/controls/background-control/background-gradient-color-control.tsx
 import * as React34 from "react";
+import {
+  backgroundGradientOverlayPropTypeUtil,
+  colorPropTypeUtil as colorPropTypeUtil2,
+  colorStopPropTypeUtil,
+  gradientColorStopPropTypeUtil,
+  numberPropTypeUtil as numberPropTypeUtil3,
+  stringPropTypeUtil as stringPropTypeUtil8
+} from "@elementor/editor-props";
+import { UnstableGradientBox } from "@elementor/ui";
+var BackgroundGradientColorControl = createControl(() => {
+  const { value, setValue } = useBoundProp(backgroundGradientOverlayPropTypeUtil);
+  const handleChange = (newValue) => {
+    const transformedValue = createTransformableValue(newValue);
+    if (transformedValue.positions) {
+      transformedValue.positions = stringPropTypeUtil8.create(newValue.positions.join(" "));
+    }
+    setValue(transformedValue);
+  };
+  const createTransformableValue = (newValue) => ({
+    ...newValue,
+    type: stringPropTypeUtil8.create(newValue.type),
+    angle: numberPropTypeUtil3.create(newValue.angle),
+    stops: gradientColorStopPropTypeUtil.create(
+      newValue.stops.map(
+        ({ color, offset }) => colorStopPropTypeUtil.create({
+          color: colorPropTypeUtil2.create(color),
+          offset: numberPropTypeUtil3.create(offset)
+        })
+      )
+    )
+  });
+  const normalizeValue = () => {
+    if (!value) {
+      return;
+    }
+    const { type, angle, stops, positions } = value;
+    return {
+      type: type.value,
+      angle: angle.value,
+      stops: stops.value.map(({ value: { color, offset } }) => ({
+        color: color.value,
+        offset: offset.value
+      })),
+      positions: positions?.value.split(" ")
+    };
+  };
+  return /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
+    UnstableGradientBox,
+    {
+      sx: { width: "auto", padding: 1.5 },
+      value: normalizeValue(),
+      onChange: handleChange
+    }
+  ));
+});
+var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
+  type: stringPropTypeUtil8.create("linear"),
+  angle: numberPropTypeUtil3.create(180),
+  stops: gradientColorStopPropTypeUtil.create([
+    colorStopPropTypeUtil.create({
+      color: stringPropTypeUtil8.create("var(--primary-color)"),
+      offset: numberPropTypeUtil3.create(0)
+    }),
+    colorStopPropTypeUtil.create({
+      color: colorPropTypeUtil2.create("rgb(255,255,255)"),
+      offset: numberPropTypeUtil3.create(100)
+    })
+  ])
+});
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
+import * as React35 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"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(PinIcon, { fontSize: size }),
+    label: __12("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: __13("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(PinnedOffIcon, { fontSize: size }),
+    label: __12("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React35.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__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __12("Attachment", "elementor"))), /* @__PURE__ */ React35.createElement(Grid9, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React35.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 stringPropTypeUtil8 } from "@elementor/editor-props";
+import * as React36 from "react";
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil9 } 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(stringPropTypeUtil8);
+  const stringPropContext = useBoundProp(stringPropTypeUtil9);
   const isCustom = !!backgroundImageOffsetContext.value;
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
@@ -1879,7 +2104,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__ */ React36.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React36.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, __13("Position", "elementor"))), /* @__PURE__ */ React36.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React36.createElement(
     Select2,
     {
       size: "tiny",
@@ -1887,48 +2112,48 @@ var BackgroundImageOverlayPosition = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React35.createElement(MenuItem4, { 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);
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React36.createElement(MenuItem3, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React36.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React36.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React36.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React36.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React36 from "react";
+import * as React37 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"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(GridDotsIcon, { fontSize: size }),
+    label: __14("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: __15("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(DotsHorizontalIcon, { fontSize: size }),
+    label: __14("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: __15("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(DotsVerticalIcon, { fontSize: size }),
+    label: __14("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: __15("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(XIcon4, { fontSize: size }),
+    label: __14("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.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__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, __14("Repeat", "elementor"))), /* @__PURE__ */ React37.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.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 stringPropTypeUtil9 } from "@elementor/editor-props";
+import * as React38 from "react";
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
@@ -1938,36 +2163,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"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(LetterAIcon, { fontSize: size }),
+    label: __15("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: __16("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    label: __15("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: __16("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowBarBothIcon, { fontSize: size }),
+    label: __15("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __16("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(PencilIcon, { fontSize: size }),
+    label: __15("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil9);
+  const stringPropContext = useBoundProp(stringPropTypeUtil10);
   const isCustom = !!backgroundImageScaleContext.value;
   const handleSizeChange = (size) => {
     if (size === "custom") {
@@ -1976,7 +2201,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__ */ React38.createElement(Grid12, { container: true, spacing: 1.5 }, /* @__PURE__ */ React38.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(PopoverGridContainer, null, /* @__PURE__ */ React38.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, __15("Size", "elementor"))), /* @__PURE__ */ React38.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React38.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -1984,38 +2209,51 @@ 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(
+  )))), isCustom ? /* @__PURE__ */ React38.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React38.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(PopoverGridContainer, null, /* @__PURE__ */ React38.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React38.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React37.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React38.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
-  ))), /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React37.createElement(
+  ))), /* @__PURE__ */ React38.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React38.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React37.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React38.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,
+  backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil
 } from "@elementor/editor-props";
 import { useTabs } from "@elementor/ui";
 var useBackgroundTabsHistory = ({
   color: initialBackgroundColorOverlay2,
-  image: initialBackgroundImageOverlay
+  image: initialBackgroundImageOverlay,
+  gradient: initialBackgroundGradientOverlay2
 }) => {
   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 { value: gradientValue, setValue: setGradientValue } = useBoundProp(backgroundGradientOverlayPropTypeUtil2);
+  const getCurrentOverlayType = () => {
+    if (colorValue) {
+      return "color";
+    }
+    if (gradientValue) {
+      return "gradient";
+    }
+    return "image";
+  };
+  const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
+  const valuesHistory = useRef4({
     image: initialBackgroundImageOverlay,
-    color: initialBackgroundColorOverlay2
+    color: initialBackgroundColorOverlay2,
+    gradient: initialBackgroundGradientOverlay2
   });
   const saveToHistory = (key, value) => {
     if (value) {
@@ -2027,10 +2265,17 @@ var useBackgroundTabsHistory = ({
       case "image":
         setImageValue(valuesHistory.current.image);
         saveToHistory("color", colorValue);
+        saveToHistory("gradient", gradientValue);
+        break;
+      case "gradient":
+        setGradientValue(valuesHistory.current.gradient);
+        saveToHistory("color", colorValue);
+        saveToHistory("image", imageValue);
         break;
       case "color":
         setColorValue(valuesHistory.current.color);
         saveToHistory("image", imageValue);
+        saveToHistory("gradient", gradientValue);
     }
     return getTabsProps().onChange(e, tabName);
   };
@@ -2071,19 +2316,19 @@ 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);
-  return /* @__PURE__ */ React38.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React39.createElement(
     Repeater,
     {
       values: overlayValues ?? [],
       setValues: setValue,
-      label: __17("Overlay", "elementor"),
+      label: __16("Overlay", "elementor"),
       itemSettings: {
         Icon: ItemIcon2,
         Label: ItemLabel2,
@@ -2094,58 +2339,73 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
   ));
 });
 var ItemContent2 = ({ bind }) => {
-  return /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React38.createElement(Content2, null));
+  return /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React39.createElement(Content2, null));
 };
 var Content2 = () => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
     image: getInitialBackgroundOverlay().value,
-    color: initialBackgroundColorOverlay.value
+    color: initialBackgroundColorOverlay.value,
+    gradient: initialBackgroundGradientOverlay.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__ */ React39.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React39.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React39.createElement(Tabs, { ...getTabsProps(), "aria-label": __16("Background Overlay", "elementor") }, /* @__PURE__ */ React39.createElement(Tab, { label: __16("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React39.createElement(Tab, { label: __16("Gradient", "elementor"), ...getTabProps("gradient") }), /* @__PURE__ */ React39.createElement(Tab, { label: __16("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React39.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React39.createElement(PopoverContent, null, /* @__PURE__ */ React39.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React39.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React39.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React39.createElement(TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React39.createElement(ColorControl, { propTypeUtil: backgroundColorOverlayPropTypeUtil2 })));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React38.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React39.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React38.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React39.createElement(ItemIconColor, { value });
+    case "background-gradient-overlay":
+      return /* @__PURE__ */ React39.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
 };
 var ItemIconColor = ({ value }) => {
-  return /* @__PURE__ */ React38.createElement(UnstableColorIndicator2, { size: "inherit", component: "span", value: value.value });
+  return /* @__PURE__ */ React39.createElement(UnstableColorIndicator2, { size: "inherit", component: "span", value: value.value });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React38.createElement(CardMedia3, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
+  return /* @__PURE__ */ React39.createElement(CardMedia3, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
+};
+var ItemIconGradient = ({ value }) => {
+  const gradient = getGradientValue(value);
+  return /* @__PURE__ */ React39.createElement(UnstableColorIndicator2, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React38.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React39.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React38.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React39.createElement(ItemLabelColor, { value });
+    case "background-gradient-overlay":
+      return /* @__PURE__ */ React39.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value }) => {
-  return /* @__PURE__ */ React38.createElement("span", null, value.value);
+  return /* @__PURE__ */ React39.createElement("span", null, value.value);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React38.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React39.createElement("span", null, imageTitle);
+};
+var ItemLabelGradient = ({ value }) => {
+  if (value.value.type.value === "linear") {
+    return /* @__PURE__ */ React39.createElement("span", null, __16("Linear Gradient", "elementor"));
+  }
+  return /* @__PURE__ */ React39.createElement("span", null, __16("Radial Gradient", "elementor"));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  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(
+  return /* @__PURE__ */ React39.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React39.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React39.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)));
+  )))), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React39.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React39.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React39.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React39.createElement(BackgroundImageOverlayAttachment, null)));
 };
 var useImage = (image) => {
   let imageTitle, imageUrl = null;
@@ -2161,11 +2421,19 @@ var useImage = (image) => {
   }
   return { imageTitle, imageUrl };
 };
+var getGradientValue = (value) => {
+  const gradient = value.value;
+  const stops = gradient.stops.value?.map(({ value: { color, offset } }) => `${color.value} ${offset.value ?? 0}%`)?.join(",");
+  if (gradient.type.value === "linear") {
+    return `linear-gradient(${gradient.angle.value}deg, ${stops})`;
+  }
+  return `radial-gradient(circle at ${gradient.positions.value}, ${stops})`;
+};
 
 // 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__ */ React40.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React40.createElement(SectionContent, null, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React40.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React40.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, __17("Color", "elementor"))), /* @__PURE__ */ React40.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ColorControl, null))))));
 });
 export {
   BackgroundControl,