@elementor/editor-controls 0.15.0 → 0.16.0

package/dist/index.mjs

@@ -1277,7 +1277,7 @@ var Control3 = ({
 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,
@@ -1356,7 +1356,7 @@ 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" }, __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(
+    /* @__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,
@@ -1376,7 +1376,27 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         handleClose,
         fontFamily
       }
-    ) : /* @__PURE__ */ React28.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React28.createElement(Stack8, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React28.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React28.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React28.createElement(
+    ) : /* @__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,
+      {
+        variant: "subtitle2",
+        color: "text.secondary",
+        sx: {
+          display: "flex",
+          width: "100%",
+          justifyContent: "center"
+        }
+      },
+      /* @__PURE__ */ React28.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React28.createElement(
+        "span",
+        {
+          style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
+        },
+        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",
@@ -1384,8 +1404,8 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         component: "button",
         onClick: () => setSearchValue("")
       },
-      __8("Clear the filters", "elementor")
-    ), "\xA0", __8("and try again.", "elementor")))))
+      __8("Clear & try again", "elementor")
+    )))))
   ));
 });
 var LIST_ITEM_HEIGHT = 36;
@@ -1939,13 +1959,13 @@ var SvgMediaControl = createControl(() => {
 });
 
 // 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 __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,
@@ -1959,8 +1979,80 @@ import { __ as __16 } from "@wordpress/i18n";
 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 __12 } from "@wordpress/i18n";
@@ -1968,23 +2060,23 @@ var attachmentControlOptions = [
   {
     value: "fixed",
     label: __12("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(PinIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
     label: __12("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(PinnedOffIcon, { fontSize: size }),
+    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, __12("Attachment", "elementor"))), /* @__PURE__ */ React34.createElement(Grid9, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(ToggleControl, { options: attachmentControlOptions })));
+  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 MenuItem3, Select as Select2 } from "@elementor/ui";
 import { __ as __13 } from "@wordpress/i18n";
@@ -2002,7 +2094,7 @@ var backgroundPositionOptions = [
 ];
 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;
@@ -2012,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, __13("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",
@@ -2020,12 +2112,12 @@ var BackgroundImageOverlayPosition = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React35.createElement(MenuItem3, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React35.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: /* @__PURE__ */ React35.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: /* @__PURE__ */ React35.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
+    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 __14 } from "@wordpress/i18n";
@@ -2033,35 +2125,35 @@ var repeatControlOptions = [
   {
     value: "repeat",
     label: __14("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(GridDotsIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
     label: __14("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(DotsHorizontalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
     label: __14("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(DotsVerticalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
     label: __14("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(XIcon4, { fontSize: size }),
+    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, __14("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,
@@ -2076,31 +2168,31 @@ var sizeControlOptions = [
   {
     value: "auto",
     label: __15("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
     label: __15("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
     label: __15("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowBarBothIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: __15("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(PencilIcon, { fontSize: size }),
+    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") {
@@ -2109,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, __15("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,
@@ -2117,16 +2209,16 @@ 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);
@@ -2136,19 +2228,32 @@ var BackgroundImageOverlaySize = () => {
 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 { 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) {
@@ -2160,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);
   };
@@ -2211,7 +2323,7 @@ var backgroundResolutionOptions = [
 ];
 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 ?? [],
@@ -2227,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": __16("Background Overlay", "elementor") }, /* @__PURE__ */ React38.createElement(Tab, { label: __16("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React38.createElement(Tab, { label: __16("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React38.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React38.createElement(PopoverContent, null, /* @__PURE__ */ React38.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React38.createElement(TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React38.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(ColorControl, { propTypeUtil: backgroundColorOverlayPropTypeUtil2 })))));
+  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: __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;
@@ -2294,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, __17("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,