@elementor/editor-controls 0.14.0 → 0.16.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) => {
@@ -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.__)("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 }))))));
   }
 );
 
@@ -859,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,
     {
@@ -870,31 +902,7 @@ 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(
@@ -1136,6 +1144,7 @@ var isEqualSizes = (propValue, items) => {
 function EqualUnequalSizesControl({
   label,
   icon,
+  tooltipLabel,
   items,
   multiSizePropTypeUtil
 }) {
@@ -1175,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,
@@ -1215,7 +1225,11 @@ var import_icons4 = require("@elementor/icons");
 var import_ui22 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 var LinkedDimensionsControl = createControl(
-  ({ label, extendedValues }) => {
+  ({
+    label,
+    isSiteRtl = false,
+    extendedValues
+  }) => {
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
@@ -1225,22 +1239,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 ? import_editor_props13.sizePropTypeUtil.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 ? 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(
+    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": (0, import_i18n7.__)("Link Inputs", "elementor"),
+        "aria-label": isLinked ? unlinkedLabel : linkedLabel,
         size: "tiny",
         value: "check",
         selected: isLinked,
@@ -1248,35 +1265,35 @@ var LinkedDimensionsControl = createControl(
         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(
+    ))), /* @__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",
+        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, (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    ))), /* @__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: "right",
-        startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }),
+        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: "bottom",
+        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, (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    ))), /* @__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: "left",
-        startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }),
+        bind: "inline-start",
+        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React27.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
@@ -1295,55 +1312,47 @@ var Control3 = ({
   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);
   };
@@ -1369,42 +1378,47 @@ 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.TextIcon, { 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 fonts\u2026", "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,
+      {
+        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, overflow: "hidden" }, /* @__PURE__ */ React28.createElement(import_icons5.TextIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(import_ui23.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React28.createElement(
+      import_ui23.Typography,
       {
-        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(
-        import_ui23.MenuItem,
+      /* @__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(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(
+        searchValue
+      ),
+      /* @__PURE__ */ React28.createElement("span", null, "\u201D.")
+    )), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React28.createElement(
       import_ui23.Link,
       {
         color: "secondary",
@@ -1412,10 +1426,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 & 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"));
@@ -1440,12 +1583,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_utils2 = require("@elementor/utils");
-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"));
@@ -1603,7 +1746,7 @@ var LinkControl = createControl((props) => {
     debounceFetch({ ...requestParams, term: newValue });
   };
   const debounceFetch = (0, import_react11.useMemo)(
-    () => (0, import_utils2.debounce)(
+    () => (0, import_utils3.debounce)(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
       }),
@@ -1620,13 +1763,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(
@@ -1650,14 +1793,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 a 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 [];
@@ -1686,7 +1829,7 @@ 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,
@@ -1706,11 +1849,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,
@@ -1718,7 +1864,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) {
@@ -1733,7 +1879,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";
@@ -1761,9 +1907,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) => {
@@ -1776,12 +1922,18 @@ var SvgMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React33.createElement(import_ui28.Stack, { gap: 1 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, " ", (0, import_i18n12.__)("SVG", "elementor"), " "), /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React33.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React33.createElement(import_ui28.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React33.createElement(
+  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(
@@ -1799,9 +1951,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,
       {
@@ -1809,74 +1961,139 @@ 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", "elementor")
+      (0, import_i18n11.__)("Upload", "elementor")
     ))
   ))));
 });
 
 // src/controls/background-control/background-control.tsx
+var React40 = __toESM(require("react"));
+var import_editor_props24 = require("@elementor/editor-props");
+var import_ui36 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
+
+// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 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");
-
-// 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");
 var { env } = (0, import_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
 var React34 = __toESM(require("react"));
-var import_icons10 = require("@elementor/icons");
+var import_editor_props19 = require("@elementor/editor-props");
 var import_ui29 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var BackgroundGradientColorControl = createControl(() => {
+  const { value, setValue } = useBoundProp(import_editor_props19.backgroundGradientOverlayPropTypeUtil);
+  const handleChange = (newValue) => {
+    const transformedValue = createTransformableValue(newValue);
+    if (transformedValue.positions) {
+      transformedValue.positions = import_editor_props19.stringPropTypeUtil.create(newValue.positions.join(" "));
+    }
+    setValue(transformedValue);
+  };
+  const createTransformableValue = (newValue) => ({
+    ...newValue,
+    type: import_editor_props19.stringPropTypeUtil.create(newValue.type),
+    angle: import_editor_props19.numberPropTypeUtil.create(newValue.angle),
+    stops: import_editor_props19.gradientColorStopPropTypeUtil.create(
+      newValue.stops.map(
+        ({ color, offset }) => import_editor_props19.colorStopPropTypeUtil.create({
+          color: import_editor_props19.colorPropTypeUtil.create(color),
+          offset: import_editor_props19.numberPropTypeUtil.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(
+    import_ui29.UnstableGradientBox,
+    {
+      sx: { width: "auto", padding: 1.5 },
+      value: normalizeValue(),
+      onChange: handleChange
+    }
+  ));
+});
+var initialBackgroundGradientOverlay = import_editor_props19.backgroundGradientOverlayPropTypeUtil.create({
+  type: import_editor_props19.stringPropTypeUtil.create("linear"),
+  angle: import_editor_props19.numberPropTypeUtil.create(180),
+  stops: import_editor_props19.gradientColorStopPropTypeUtil.create([
+    import_editor_props19.colorStopPropTypeUtil.create({
+      color: import_editor_props19.stringPropTypeUtil.create("var(--primary-color)"),
+      offset: import_editor_props19.numberPropTypeUtil.create(0)
+    }),
+    import_editor_props19.colorStopPropTypeUtil.create({
+      color: import_editor_props19.colorPropTypeUtil.create("rgb(255,255,255)"),
+      offset: import_editor_props19.numberPropTypeUtil.create(100)
+    })
+  ])
+});
+
+// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
+var React35 = __toESM(require("react"));
+var import_icons10 = require("@elementor/icons");
+var import_ui30 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: (0, import_i18n13.__)("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(import_icons10.PinIcon, { fontSize: size }),
+    label: (0, import_i18n12.__)("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(import_icons10.PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: (0, import_i18n13.__)("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(import_icons10.PinnedOffIcon, { fontSize: size }),
+    label: (0, import_i18n12.__)("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React35.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__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n12.__)("Attachment", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui30.Grid, { 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
-var React35 = __toESM(require("react"));
-var import_editor_props19 = require("@elementor/editor-props");
+var React36 = __toESM(require("react"));
+var import_editor_props20 = require("@elementor/editor-props");
 var import_icons11 = require("@elementor/icons");
-var import_ui30 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_ui31 = require("@elementor/ui");
+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);
-  const stringPropContext = useBoundProp(import_editor_props19.stringPropTypeUtil);
+  const backgroundImageOffsetContext = useBoundProp(import_editor_props20.backgroundImagePositionOffsetPropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props20.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
@@ -1886,88 +2103,88 @@ 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(
-    import_ui30.Select,
+  return /* @__PURE__ */ React36.createElement(import_ui31.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n13.__)("Position", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React36.createElement(
+    import_ui31.Select,
     {
       size: "tiny",
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
       onChange: handlePositionChange,
       fullWidth: true
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React35.createElement(import_ui30.MenuItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React35.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: /* @__PURE__ */ React35.createElement(import_icons11.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: /* @__PURE__ */ React35.createElement(import_icons11.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React36.createElement(import_ui31.MenuItem, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React36.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(import_icons11.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(import_icons11.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-var React36 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var import_icons12 = require("@elementor/icons");
-var import_ui31 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_ui32 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: (0, import_i18n15.__)("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.GridDotsIcon, { fontSize: size }),
+    label: (0, import_i18n14.__)("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: (0, import_i18n15.__)("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.DotsHorizontalIcon, { fontSize: size }),
+    label: (0, import_i18n14.__)("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: (0, import_i18n15.__)("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.DotsVerticalIcon, { fontSize: size }),
+    label: (0, import_i18n14.__)("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: (0, import_i18n15.__)("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.XIcon, { fontSize: size }),
+    label: (0, import_i18n14.__)("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.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__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, (0, import_i18n14.__)("Repeat", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui32.Grid, { 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
-var React37 = __toESM(require("react"));
-var import_editor_props20 = require("@elementor/editor-props");
+var React38 = __toESM(require("react"));
+var import_editor_props21 = require("@elementor/editor-props");
 var import_icons13 = require("@elementor/icons");
-var import_ui32 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var import_ui33 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
 var sizeControlOptions = [
   {
     value: "auto",
-    label: (0, import_i18n16.__)("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.LetterAIcon, { fontSize: size }),
+    label: (0, import_i18n15.__)("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: (0, import_i18n16.__)("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.ArrowsMaximizeIcon, { fontSize: size }),
+    label: (0, import_i18n15.__)("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: (0, import_i18n16.__)("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.ArrowBarBothIcon, { fontSize: size }),
+    label: (0, import_i18n15.__)("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: (0, import_i18n16.__)("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.PencilIcon, { fontSize: size }),
+    label: (0, import_i18n15.__)("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlaySize = () => {
-  const backgroundImageScaleContext = useBoundProp(import_editor_props20.backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(import_editor_props20.stringPropTypeUtil);
+  const backgroundImageScaleContext = useBoundProp(import_editor_props21.backgroundImageSizeScalePropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props21.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
   const handleSizeChange = (size) => {
     if (size === "custom") {
@@ -1976,7 +2193,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__ */ React38.createElement(import_ui33.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(PopoverGridContainer, null, /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, (0, import_i18n15.__)("Size", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React38.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -1984,16 +2201,16 @@ 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(
+  )))), isCustom ? /* @__PURE__ */ React38.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(PopoverGridContainer, null, /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React38.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React37.createElement(import_icons13.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React38.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(
+  ))), /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React38.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React37.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React38.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
   )))))) : null);
@@ -2001,18 +2218,30 @@ var BackgroundImageOverlaySize = () => {
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
 var import_react12 = require("react");
-var import_editor_props21 = require("@elementor/editor-props");
-var import_ui33 = require("@elementor/ui");
+var import_editor_props22 = require("@elementor/editor-props");
+var import_ui34 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
   color: initialBackgroundColorOverlay2,
-  image: initialBackgroundImageOverlay
+  image: initialBackgroundImageOverlay,
+  gradient: initialBackgroundGradientOverlay2
 }) => {
-  const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props21.backgroundImageOverlayPropTypeUtil);
-  const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props21.backgroundColorOverlayPropTypeUtil);
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui33.useTabs)(colorValue ? "color" : "image");
+  const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props22.backgroundImageOverlayPropTypeUtil);
+  const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props22.backgroundColorOverlayPropTypeUtil);
+  const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props22.backgroundGradientOverlayPropTypeUtil);
+  const getCurrentOverlayType = () => {
+    if (colorValue) {
+      return "color";
+    }
+    if (gradientValue) {
+      return "gradient";
+    }
+    return "image";
+  };
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui34.useTabs)(getCurrentOverlayType());
   const valuesHistory = (0, import_react12.useRef)({
     image: initialBackgroundImageOverlay,
-    color: initialBackgroundColorOverlay2
+    color: initialBackgroundColorOverlay2,
+    gradient: initialBackgroundGradientOverlay2
   });
   const saveToHistory = (key, value) => {
     if (value) {
@@ -2024,10 +2253,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);
   };
@@ -2068,19 +2304,19 @@ 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);
-  return /* @__PURE__ */ React38.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React38.createElement(
+  const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props23.backgroundOverlayPropTypeUtil);
+  return /* @__PURE__ */ React39.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React39.createElement(
     Repeater,
     {
       values: overlayValues ?? [],
       setValues: setValue,
-      label: (0, import_i18n17.__)("Overlay", "elementor"),
+      label: (0, import_i18n16.__)("Overlay", "elementor"),
       itemSettings: {
         Icon: ItemIcon2,
         Label: ItemLabel2,
@@ -2091,58 +2327,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(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__ */ React39.createElement(import_ui35.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React39.createElement(import_ui35.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React39.createElement(import_ui35.Tabs, { ...getTabsProps(), "aria-label": (0, import_i18n16.__)("Background Overlay", "elementor") }, /* @__PURE__ */ React39.createElement(import_ui35.Tab, { label: (0, import_i18n16.__)("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React39.createElement(import_ui35.Tab, { label: (0, import_i18n16.__)("Gradient", "elementor"), ...getTabProps("gradient") }), /* @__PURE__ */ React39.createElement(import_ui35.Tab, { label: (0, import_i18n16.__)("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React39.createElement(import_ui35.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React39.createElement(PopoverContent, null, /* @__PURE__ */ React39.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React39.createElement(import_ui35.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React39.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React39.createElement(import_ui35.TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React39.createElement(ColorControl, { propTypeUtil: import_editor_props23.backgroundColorOverlayPropTypeUtil })));
 };
 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(import_ui34.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
+  return /* @__PURE__ */ React39.createElement(import_ui35.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React38.createElement(import_ui34.CardMedia, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
+  return /* @__PURE__ */ React39.createElement(import_ui35.CardMedia, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
+};
+var ItemIconGradient = ({ value }) => {
+  const gradient = getGradientValue(value);
+  return /* @__PURE__ */ React39.createElement(import_ui35.UnstableColorIndicator, { 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, (0, import_i18n16.__)("Linear Gradient", "elementor"));
+  }
+  return /* @__PURE__ */ React39.createElement("span", null, (0, import_i18n16.__)("Radial Gradient", "elementor"));
 };
 var ImageOverlayContent = () => {
-  const propContext = useBoundProp(import_editor_props22.backgroundImageOverlayPropTypeUtil);
-  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(
+  const propContext = useBoundProp(import_editor_props23.backgroundImageOverlayPropTypeUtil);
+  return /* @__PURE__ */ React39.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React39.createElement(import_ui35.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React39.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)));
+  )))), /* @__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;
@@ -2158,11 +2409,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(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))))));
+  const propContext = useBoundProp(import_editor_props24.backgroundPropTypeUtil);
+  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(import_ui36.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, (0, import_i18n17.__)("Color", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ColorControl, null))))));
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {