@elementor/editor-controls 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -176,9 +176,10 @@ var ImageMediaControl = createControl(() => {
 import * as React8 from "react";
 import { stringPropTypeUtil } from "@elementor/editor-props";
 import { MenuItem, Select } from "@elementor/ui";
-var SelectControl = createControl(({ options }) => {
+var SelectControl = createControl(({ options, onChange }) => {
   const { value, setValue } = useBoundProp(stringPropTypeUtil);
   const handleChange = (event) => {
+    onChange?.(event.target.value, value);
     setValue(event.target.value);
   };
   return /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React8.createElement(MenuItem, { key: props.value, ...props }, label))));
@@ -210,7 +211,16 @@ import { TextField } from "@elementor/ui";
 var TextControl = createControl(({ placeholder }) => {
   const { value, setValue } = useBoundProp(stringPropTypeUtil2);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(TextField, { size: "tiny", fullWidth: true, value, onChange: handleChange, placeholder }));
+  return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(
+    TextField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: value ?? "",
+      onChange: handleChange,
+      placeholder
+    }
+  ));
 });
 
 // src/controls/text-area-control.tsx
@@ -229,7 +239,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
       multiline: true,
       fullWidth: true,
       rows: 5,
-      value,
+      value: value ?? "",
       onChange: handleChange,
       placeholder
     }
@@ -384,7 +394,16 @@ var ColorControl = createControl(
     const handleChange = (selectedColor) => {
       setValue(selectedColor);
     };
-    return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(UnstableColorField, { size: "tiny", ...props, value, onChange: handleChange, fullWidth: true }));
+    return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
+      UnstableColorField,
+      {
+        size: "tiny",
+        ...props,
+        value: value ?? "",
+        onChange: handleChange,
+        fullWidth: true
+      }
+    ));
   }
 );
 
@@ -736,82 +755,12 @@ var initialShadow = {
   }
 };
 
-// src/controls/background-overlay-repeater-control.tsx
-import * as React18 from "react";
-import {
-  backgroundImagePropTypeUtil
-} from "@elementor/editor-props";
-import { Grid as Grid4, Stack as Stack6, Typography as Typography4, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
-var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { value: colorOverlayValues, setValue } = useBoundProp(backgroundImagePropTypeUtil);
-  const setColorOverlay = (newValue) => {
-    setValue(newValue);
-  };
-  return /* @__PURE__ */ React18.createElement(
-    Repeater,
-    {
-      values: colorOverlayValues,
-      setValues: setColorOverlay,
-      label: __6("Overlay", "elementor"),
-      itemSettings: {
-        Icon: ItemIcon2,
-        Label: ItemLabel2,
-        Content: ItemContent2,
-        initialValues: initialGradient
-      }
-    }
-  );
-});
-var ItemIcon2 = ({ value }) => /* @__PURE__ */ React18.createElement(UnstableColorIndicator2, { size: "inherit", component: "span", value: value.value.color.value });
-var ItemContent2 = ({
-  value,
-  setValue
-}) => {
-  const setColor = (newValue) => {
-    setValue({
-      $$type: "background-overlay",
-      value: newValue
-    });
-  };
-  return /* @__PURE__ */ React18.createElement(Stack6, { gap: 1.5 }, /* @__PURE__ */ React18.createElement(
-    Control3,
-    {
-      bind: "color",
-      value: value.value.color,
-      label: __6("Color", "elementor"),
-      setValue: (v) => setColor({ ...value.value, color: v })
-    },
-    /* @__PURE__ */ React18.createElement(ColorControl, null)
-  ));
-};
-var Control3 = ({
-  value,
-  setValue,
-  label,
-  bind,
-  children
-}) => /* @__PURE__ */ React18.createElement(BoundPropProvider, { value, setValue, bind }, /* @__PURE__ */ React18.createElement(Grid4, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React18.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(Typography4, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React18.createElement(Grid4, { item: true, xs: 12 }, children)));
-var ItemLabel2 = ({ value }) => {
-  const color = value.value.color.value;
-  return /* @__PURE__ */ React18.createElement("span", null, color);
-};
-var initialGradient = {
-  $$type: "background-overlay",
-  value: {
-    color: {
-      $$type: "color",
-      value: "rgba(0, 0, 0, 0.2)"
-    }
-  }
-};
-
 // src/controls/toggle-control.tsx
-import * as React20 from "react";
+import * as React19 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
-import * as React19 from "react";
+import * as React18 from "react";
 import {
   styled as styled2,
   ToggleButton,
@@ -835,7 +784,7 @@ var ControlToggleButtonGroup = ({
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     StyledToggleButtonGroup,
     {
       justify,
@@ -847,7 +796,7 @@ var ControlToggleButtonGroup = ({
       }
     },
     items.map(
-      ({ label, value: buttonValue, renderContent: Content, showTooltip }) => showTooltip ? /* @__PURE__ */ React19.createElement(Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React19.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React19.createElement(Content, { size }))) : /* @__PURE__ */ React19.createElement(
+      ({ label, value: buttonValue, renderContent: Content, showTooltip }) => showTooltip ? /* @__PURE__ */ React18.createElement(Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React18.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React18.createElement(Content, { size }))) : /* @__PURE__ */ React18.createElement(
         ToggleButton,
         {
           key: buttonValue,
@@ -856,7 +805,7 @@ var ControlToggleButtonGroup = ({
           size,
           fullWidth
         },
-        /* @__PURE__ */ React19.createElement(Content, { size })
+        /* @__PURE__ */ React18.createElement(Content, { size })
       )
     )
   );
@@ -869,7 +818,7 @@ var ToggleControl = createControl(
     const handleToggle = (option) => {
       setValue(option);
     };
-    return /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React19.createElement(
       ControlToggleButtonGroup,
       {
         items: options,
@@ -884,7 +833,7 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-import * as React21 from "react";
+import * as React20 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField4 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
@@ -906,7 +855,7 @@ var NumberControl = createControl(
       const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
       setValue(Math.min(Math.max(formattedValue, min), max));
     };
-    return /* @__PURE__ */ React21.createElement(ControlActions, null, /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React20.createElement(ControlActions, null, /* @__PURE__ */ React20.createElement(
       TextField4,
       {
         size: "tiny",
@@ -922,13 +871,13 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-import * as React22 from "react";
+import * as React21 from "react";
 import { useId as useId3, useRef as useRef2 } from "react";
 import {
   sizePropTypeUtil as sizePropTypeUtil2
 } from "@elementor/editor-props";
-import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack7, ToggleButton as ToggleButton2, usePopupState as usePopupState3 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { bindPopover as bindPopover2, bindToggle, Grid as Grid4, Popover as Popover2, Stack as Stack6, ToggleButton as ToggleButton2, usePopupState as usePopupState3 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
 var isEqualSizes = (values, items) => {
   if (values.length !== items.length) {
     return false;
@@ -950,7 +899,10 @@ function EqualUnequalSizesControl({
   const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil2);
   const { value: multiSizeValue, setValue: setMultiSizeValue } = useBoundProp(multiSizePropTypeUtil);
   const splitEqualValue = () => {
-    return items.reduce((acc, item) => ({ ...acc, [item.bind]: sizePropTypeUtil2.create(sizeValue) }), {});
+    if (!sizeValue) {
+      return {};
+    }
+    return items.reduce((acc, { bind }) => ({ ...acc, [bind]: sizePropTypeUtil2.create(sizeValue) }), {});
   };
   const setNestedProp = (item, newValue) => {
     const newMappedValues = {
@@ -963,14 +915,14 @@ function EqualUnequalSizesControl({
     }
     setMultiSizeValue(newMappedValues);
   };
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, label)), /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React21.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(ControlLabel, null, label)), /* @__PURE__ */ React21.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(
     EqualSizeControl,
     {
       items,
       value: sizeValue,
       multiSizeValue,
       setValue: setSizeValue,
-      iconButton: /* @__PURE__ */ React22.createElement(
+      iconButton: /* @__PURE__ */ React21.createElement(
         ToggleButton2,
         {
           size: "tiny",
@@ -982,7 +934,7 @@ function EqualUnequalSizesControl({
         icon
       )
     }
-  ))), /* @__PURE__ */ React22.createElement(
+  ))), /* @__PURE__ */ React21.createElement(
     Popover2,
     {
       disablePortal: true,
@@ -1000,7 +952,7 @@ function EqualUnequalSizesControl({
         paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React22.createElement(Stack7, { gap: 1.5 }, /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React21.createElement(Stack6, { gap: 1.5 }, /* @__PURE__ */ React21.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React21.createElement(
       MultiSizeValueControl,
       {
         item: items[0],
@@ -1008,7 +960,7 @@ function EqualUnequalSizesControl({
         setNestedProp,
         splitEqualValue
       }
-    ), /* @__PURE__ */ React22.createElement(
+    ), /* @__PURE__ */ React21.createElement(
       MultiSizeValueControl,
       {
         item: items[1],
@@ -1016,7 +968,7 @@ function EqualUnequalSizesControl({
         setNestedProp,
         splitEqualValue
       }
-    )), /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(
+    )), /* @__PURE__ */ React21.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React21.createElement(
       MultiSizeValueControl,
       {
         item: items[3],
@@ -1024,7 +976,7 @@ function EqualUnequalSizesControl({
         setNestedProp,
         splitEqualValue
       }
-    ), /* @__PURE__ */ React22.createElement(
+    ), /* @__PURE__ */ React21.createElement(
       MultiSizeValueControl,
       {
         item: items[2],
@@ -1048,7 +1000,7 @@ var MultiSizeValueControl = ({
     }
     return splitEqualValue()?.[item.bind] ?? null;
   };
-  return /* @__PURE__ */ React22.createElement(BoundPropProvider, { bind: "", setValue: handleChange, value: getMultiSizeValues() }, /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(SizeControl, { startIcon: item.icon })))));
+  return /* @__PURE__ */ React21.createElement(BoundPropProvider, { bind: "", setValue: handleChange, value: getMultiSizeValues() }, /* @__PURE__ */ React21.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(Grid4, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React21.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React21.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React21.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React21.createElement(SizeControl, { startIcon: item.icon })))));
 };
 var EqualSizeControl = ({
   value,
@@ -1069,15 +1021,15 @@ var EqualSizeControl = ({
       return sizePropTypeUtil2.create(multiValues[0].value);
     }
   };
-  return /* @__PURE__ */ React22.createElement(BoundPropProvider, { bind: "", setValue: handleChange, value: getDisplayValue() ?? null }, /* @__PURE__ */ React22.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(SizeControl, { placeholder: __7("MIXED", "elementor") }), iconButton));
+  return /* @__PURE__ */ React21.createElement(BoundPropProvider, { bind: "", setValue: handleChange, value: getDisplayValue() ?? null }, /* @__PURE__ */ React21.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React21.createElement(SizeControl, { placeholder: __6("MIXED", "elementor") }), iconButton));
 };
 
 // src/controls/linked-dimensions-control.tsx
-import * as React23 from "react";
+import * as React22 from "react";
 import { linkedDimensionsPropTypeUtil } from "@elementor/editor-props";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
-import { Grid as Grid6, Stack as Stack8, ToggleButton as ToggleButton3 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { Grid as Grid5, Stack as Stack7, ToggleButton as ToggleButton3 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
 var LinkedDimensionsControl = createControl(({ label }) => {
   const { value, setValue } = useBoundProp(linkedDimensionsPropTypeUtil);
   const { top, right, bottom, left, isLinked = true } = value || {};
@@ -1103,61 +1055,61 @@ var LinkedDimensionsControl = createControl(({ label }) => {
     setValue(updatedValue);
   };
   const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label), /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(ControlLabel, null, label), /* @__PURE__ */ React22.createElement(
     ToggleButton3,
     {
-      "aria-label": __8("Link Inputs", "elementor"),
+      "aria-label": __7("Link Inputs", "elementor"),
       size: "tiny",
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: toggleLinked
     },
-    /* @__PURE__ */ React23.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React23.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, __8("Top", "elementor"))), /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
-    Control4,
+    /* @__PURE__ */ React22.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React22.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
+    Control3,
     {
       bind: "top",
       value: top,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React23.createElement(SideTopIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React22.createElement(SideTopIcon, { fontSize: "tiny" })
     }
-  ))), /* @__PURE__ */ React23.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, __8("Right", "elementor"))), /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
-    Control4,
+  ))), /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, __7("Right", "elementor"))), /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
+    Control3,
     {
       bind: "right",
       value: right,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React23.createElement(SideRightIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React22.createElement(SideRightIcon, { fontSize: "tiny" })
     }
-  )))), /* @__PURE__ */ React23.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, __8("Bottom", "elementor"))), /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
-    Control4,
+  )))), /* @__PURE__ */ React22.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
+    Control3,
     {
       bind: "bottom",
       value: bottom,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React23.createElement(SideBottomIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React22.createElement(SideBottomIcon, { fontSize: "tiny" })
     }
-  ))), /* @__PURE__ */ React23.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, __8("Left", "elementor"))), /* @__PURE__ */ React23.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
-    Control4,
+  ))), /* @__PURE__ */ React22.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, __7("Left", "elementor"))), /* @__PURE__ */ React22.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
+    Control3,
     {
       bind: "left",
       value: left,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React23.createElement(SideLeftIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React22.createElement(SideLeftIcon, { fontSize: "tiny" })
     }
   )))));
 });
-var Control4 = ({
+var Control3 = ({
   bind,
   startIcon,
   value,
   setValue
-}) => /* @__PURE__ */ React23.createElement(BoundPropProvider, { setValue: (newValue) => setValue(bind, newValue), value, bind }, /* @__PURE__ */ React23.createElement(SizeControl, { startIcon }));
+}) => /* @__PURE__ */ React22.createElement(BoundPropProvider, { setValue: (newValue) => setValue(bind, newValue), value, bind }, /* @__PURE__ */ React22.createElement(SizeControl, { startIcon }));
 
 // src/controls/font-family-control.tsx
 import { Fragment as Fragment4, useId as useId4, useState as useState3 } from "react";
-import * as React24 from "react";
+import * as React23 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
@@ -1172,20 +1124,20 @@ import {
   MenuItem as MenuItem3,
   MenuList,
   Popover as Popover3,
-  Stack as Stack9,
+  Stack as Stack8,
   TextField as TextField5,
-  Typography as Typography5,
+  Typography as Typography4,
   UnstableTag as UnstableTag2,
   usePopupState as usePopupState4
 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/hooks/use-filtered-font-families.ts
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 var supportedCategories = {
-  system: __9("System", "elementor"),
-  googlefonts: __9("Google Fonts", "elementor"),
-  customfonts: __9("Custom Fonts", "elementor")
+  system: __8("System", "elementor"),
+  googlefonts: __8("Google Fonts", "elementor"),
+  customfonts: __8("Custom Fonts", "elementor")
 };
 var useFilteredFontFamilies = (fontFamilies, searchValue) => {
   const filteredFontFamilies = Object.entries(fontFamilies).reduce(
@@ -1228,16 +1180,16 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
     setSearchValue("");
     popoverState.close();
   };
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
     UnstableTag2,
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React24.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React23.createElement(ChevronDownIcon, { fontSize: "tiny" }),
       ...bindTrigger3(popoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React24.createElement(
+  ), /* @__PURE__ */ React23.createElement(
     Popover3,
     {
       disablePortal: true,
@@ -1246,21 +1198,21 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
       ...bindPopover3(popoverState),
       onClose: handleClose
     },
-    /* @__PURE__ */ React24.createElement(Stack9, null, /* @__PURE__ */ React24.createElement(Stack9, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React24.createElement(EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React24.createElement(Typography5, { variant: "subtitle2" }, __10("Font Family", "elementor")), /* @__PURE__ */ React24.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React24.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React24.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React23.createElement(Stack8, null, /* @__PURE__ */ React23.createElement(Stack8, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React23.createElement(EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React23.createElement(Typography4, { variant: "subtitle2" }, __9("Font Family", "elementor")), /* @__PURE__ */ React23.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React23.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React23.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React23.createElement(
       TextField5,
       {
         fullWidth: true,
         size: SIZE2,
         value: searchValue,
-        placeholder: __10("Search", "elementor"),
+        placeholder: __9("Search", "elementor"),
         onChange: handleSearch,
         InputProps: {
-          startAdornment: /* @__PURE__ */ React24.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React24.createElement(SearchIcon, { fontSize: SIZE2 }))
+          startAdornment: /* @__PURE__ */ React23.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React23.createElement(SearchIcon, { fontSize: SIZE2 }))
         }
       }
-    )), /* @__PURE__ */ React24.createElement(Divider, null), /* @__PURE__ */ React24.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React24.createElement(MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React24.createElement(Fragment4, { key: index }, /* @__PURE__ */ React24.createElement(ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
+    )), /* @__PURE__ */ React23.createElement(Divider, null), /* @__PURE__ */ React23.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React23.createElement(MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React23.createElement(Fragment4, { key: index }, /* @__PURE__ */ React23.createElement(ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
       const isSelected = item === fontFamily;
-      return /* @__PURE__ */ React24.createElement(
+      return /* @__PURE__ */ React23.createElement(
         MenuItem3,
         {
           key: item,
@@ -1275,7 +1227,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         },
         item
       );
-    })))) : /* @__PURE__ */ React24.createElement(Stack9, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React24.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React24.createElement(Typography5, { align: "center", variant: "caption", color: "text.secondary" }, __10("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React24.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React24.createElement(Typography5, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React24.createElement(
+    })))) : /* @__PURE__ */ React23.createElement(Stack8, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React23.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React23.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __9("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React23.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React23.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React23.createElement(
       Link,
       {
         color: "secondary",
@@ -1283,13 +1235,13 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         component: "button",
         onClick: () => setSearchValue("")
       },
-      __10("Clear the filters", "elementor")
-    ), "\xA0", __10("and try again.", "elementor")))))
+      __9("Clear the filters", "elementor")
+    ), "\xA0", __9("and try again.", "elementor")))))
   ));
 });
 
 // src/controls/url-control.tsx
-import * as React25 from "react";
+import * as React24 from "react";
 import { TextField as TextField6 } from "@elementor/ui";
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue } = useBoundProp();
@@ -1297,7 +1249,7 @@ var UrlControl = createControl(({ placeholder }) => {
     $$type: "url",
     value: event.target.value
   });
-  return /* @__PURE__ */ React25.createElement(ControlActions, null, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React24.createElement(ControlActions, null, /* @__PURE__ */ React24.createElement(
     TextField6,
     {
       size: "tiny",
@@ -1310,10 +1262,10 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-import * as React26 from "react";
+import * as React25 from "react";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
-import { Collapse, Divider as Divider2, Grid as Grid7, IconButton as IconButton3, Stack as Stack10, Switch } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { Collapse, Divider as Divider2, Grid as Grid6, IconButton as IconButton3, Stack as Stack9, Switch } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var DEFAULT_LINK_CONTROL_VALUE = {
   $$type: "link",
@@ -1338,8 +1290,8 @@ var LinkControl = createControl(() => {
       }
     });
   };
-  return /* @__PURE__ */ React26.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React26.createElement(Divider2, null), /* @__PURE__ */ React26.createElement(
-    Stack10,
+  return /* @__PURE__ */ React25.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React25.createElement(Divider2, null), /* @__PURE__ */ React25.createElement(
+    Stack9,
     {
       direction: "row",
       sx: {
@@ -1347,17 +1299,17 @@ var LinkControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React26.createElement(ControlLabel, null, __11("Link", "elementor")),
-    /* @__PURE__ */ React26.createElement(IconButton3, { size: SIZE3, onClick: () => handleOnChange("enabled", !enabled) }, enabled ? /* @__PURE__ */ React26.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React26.createElement(PlusIcon2, { fontSize: SIZE3 }))
-  ), /* @__PURE__ */ React26.createElement(Collapse, { in: enabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React26.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React25.createElement(ControlLabel, null, __10("Link", "elementor")),
+    /* @__PURE__ */ React25.createElement(IconButton3, { size: SIZE3, onClick: () => handleOnChange("enabled", !enabled) }, enabled ? /* @__PURE__ */ React25.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React25.createElement(PlusIcon2, { fontSize: SIZE3 }))
+  ), /* @__PURE__ */ React25.createElement(Collapse, { in: enabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React25.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React25.createElement(
     BoundPropProvider,
     {
       value: href,
       setValue: (newHref) => handleOnChange("href", newHref),
       bind: "href"
     },
-    /* @__PURE__ */ React26.createElement(UrlControl, { placeholder: __11("Paste URL or type", "elementor") })
-  ), /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React25.createElement(UrlControl, { placeholder: __10("Paste URL or type", "elementor") })
+  ), /* @__PURE__ */ React25.createElement(
     SwitchControl,
     {
       value: isTargetBlank,
@@ -1366,15 +1318,15 @@ var LinkControl = createControl(() => {
   ))));
 });
 var SwitchControl = ({ value, onSwitch }) => {
-  return /* @__PURE__ */ React26.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React26.createElement(Grid7, { item: true }, /* @__PURE__ */ React26.createElement(ControlLabel, null, __11("Open in new tab", "elementor"))), /* @__PURE__ */ React26.createElement(Grid7, { item: true }, /* @__PURE__ */ React26.createElement(Switch, { checked: value, onChange: onSwitch })));
+  return /* @__PURE__ */ React25.createElement(Grid6, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React25.createElement(Grid6, { item: true }, /* @__PURE__ */ React25.createElement(ControlLabel, null, __10("Open in new tab", "elementor"))), /* @__PURE__ */ React25.createElement(Grid6, { item: true }, /* @__PURE__ */ React25.createElement(Switch, { checked: value, onChange: onSwitch })));
 };
 
 // src/controls/gap-control.tsx
-import * as React27 from "react";
+import * as React26 from "react";
 import { gapPropTypeUtil } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
-import { Grid as Grid8, Stack as Stack11, ToggleButton as ToggleButton4 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { Grid as Grid7, Stack as Stack10, ToggleButton as ToggleButton4 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
 var GapControl = createControl(({ label }) => {
   const { value, setValue } = useBoundProp(gapPropTypeUtil);
   const { column, row, isLinked = true } = value || {};
@@ -1396,37 +1348,128 @@ var GapControl = createControl(({ label }) => {
     setValue(updatedValue);
   };
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label), /* @__PURE__ */ React26.createElement(
     ToggleButton4,
     {
-      "aria-label": __12("Link Inputs", "elementor"),
+      "aria-label": __11("Link Inputs", "elementor"),
       size: "tiny",
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: toggleLinked
     },
-    /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React27.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __12("Column", "elementor"))), /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React26.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React26.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(Grid7, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, __11("Column", "elementor"))), /* @__PURE__ */ React26.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
     BoundPropProvider,
     {
       setValue: (newValue) => setLinkedValue("column", newValue),
       value: column,
       bind: "column"
     },
-    /* @__PURE__ */ React27.createElement(SizeControl, null)
-  ))), /* @__PURE__ */ React27.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __12("Row", "elementor"))), /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React26.createElement(SizeControl, null)
+  ))), /* @__PURE__ */ React26.createElement(Grid7, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, __11("Row", "elementor"))), /* @__PURE__ */ React26.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
     BoundPropProvider,
     {
       setValue: (newValue) => setLinkedValue("row", newValue),
       value: row,
       bind: "row"
     },
-    /* @__PURE__ */ React27.createElement(SizeControl, null)
+    /* @__PURE__ */ React26.createElement(SizeControl, null)
   )))));
 });
+
+// src/controls/background-control/background-control.tsx
+import * as React28 from "react";
+import {
+  backgroundPropTypeUtil
+} from "@elementor/editor-props";
+import { Grid as Grid9, Stack as Stack12 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
+
+// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
+import * as React27 from "react";
+import {
+  backgroundOverlayPropTypeUtil
+} from "@elementor/editor-props";
+import { Grid as Grid8, Stack as Stack11, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
+var initialBackgroundOverlay = {
+  $$type: "background-color-overlay",
+  value: "rgba(0, 0, 0, 0.2)"
+};
+var BackgroundOverlayRepeaterControl = createControl(() => {
+  const { value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
+  const setColorOverlay = (newValue) => {
+    setValue(newValue);
+  };
+  return /* @__PURE__ */ React27.createElement(
+    Repeater,
+    {
+      values: overlayValues ?? [],
+      setValues: setColorOverlay,
+      label: __12("Overlay", "elementor"),
+      itemSettings: {
+        Icon: ItemIcon2,
+        Label: ItemLabel2,
+        Content: ItemContent2,
+        initialValues: initialBackgroundOverlay
+      }
+    }
+  );
+});
+var ItemIcon2 = ({ value }) => /* @__PURE__ */ React27.createElement(UnstableColorIndicator2, { size: "inherit", component: "span", value: value.value });
+var ItemContent2 = ({
+  value,
+  setValue
+}) => {
+  const setBackgroundColorOverlay = (newValue) => {
+    setValue({
+      $$type: "background-color-overlay",
+      value: newValue.value
+    });
+  };
+  return /* @__PURE__ */ React27.createElement(Stack11, { gap: 1.5 }, /* @__PURE__ */ React27.createElement(
+    BoundPropProvider,
+    {
+      bind: "background-color-overlay",
+      value,
+      setValue: setBackgroundColorOverlay
+    },
+    /* @__PURE__ */ React27.createElement(Grid8, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __12("Color", "elementor"))), /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ColorControl, null)))
+  ));
+};
+var ItemLabel2 = ({ value }) => {
+  const color = value.value;
+  return /* @__PURE__ */ React27.createElement("span", null, color);
+};
+
+// src/controls/background-control/background-control.tsx
+var BackgroundControl = createControl(() => {
+  const { value, setValue } = useBoundProp(backgroundPropTypeUtil);
+  const setColor = (newValue) => {
+    setValue({
+      ...value,
+      color: newValue
+    });
+  };
+  const setBackgroundColorOverlay = (newValue) => {
+    setValue({
+      ...value,
+      "background-overlay": newValue
+    });
+  };
+  return /* @__PURE__ */ React28.createElement(Stack12, { gap: 1.5 }, /* @__PURE__ */ React28.createElement(
+    BoundPropProvider,
+    {
+      bind: "background-overlay",
+      value: value?.["background-overlay"],
+      setValue: setBackgroundColorOverlay
+    },
+    /* @__PURE__ */ React28.createElement(BackgroundOverlayRepeaterControl, null)
+  ), /* @__PURE__ */ React28.createElement(BoundPropProvider, { bind: "color", value: value?.color, setValue: setColor }, /* @__PURE__ */ React28.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, __13("Color", "elementor"))), /* @__PURE__ */ React28.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ColorControl, null)))));
+});
 export {
-  BackgroundOverlayRepeaterControl,
+  BackgroundControl,
   BoundPropProvider,
   BoxShadowRepeaterControl,
   ColorControl,