@elementor/editor-controls 0.3.1 → 0.4.0

package/dist/index.js

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  BackgroundOverlayRepeaterControl: () => BackgroundOverlayRepeaterControl,
+  BackgroundControl: () => BackgroundControl,
   BoundPropProvider: () => BoundPropProvider,
   BoxShadowRepeaterControl: () => BoxShadowRepeaterControl,
   ColorControl: () => ColorControl,
@@ -272,7 +272,16 @@ var import_ui7 = require("@elementor/ui");
 var TextControl = createControl(({ placeholder }) => {
   const { value, setValue } = useBoundProp(import_editor_props4.stringPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(import_ui7.TextField, { size: "tiny", fullWidth: true, value, onChange: handleChange, placeholder }));
+  return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(
+    import_ui7.TextField,
+    {
+      size: "tiny",
+      fullWidth: true,
+      value: value ?? "",
+      onChange: handleChange,
+      placeholder
+    }
+  ));
 });
 
 // src/controls/text-area-control.tsx
@@ -291,7 +300,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
       multiline: true,
       fullWidth: true,
       rows: 5,
-      value,
+      value: value ?? "",
       onChange: handleChange,
       placeholder
     }
@@ -446,7 +455,16 @@ var ColorControl = createControl(
     const handleChange = (selectedColor) => {
       setValue(selectedColor);
     };
-    return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(import_ui11.UnstableColorField, { size: "tiny", ...props, value, onChange: handleChange, fullWidth: true }));
+    return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
+      import_ui11.UnstableColorField,
+      {
+        size: "tiny",
+        ...props,
+        value: value ?? "",
+        onChange: handleChange,
+        fullWidth: true
+      }
+    ));
   }
 );
 
@@ -786,82 +804,14 @@ var initialShadow = {
   }
 };
 
-// src/controls/background-overlay-repeater-control.tsx
-var React18 = __toESM(require("react"));
-var import_editor_props10 = require("@elementor/editor-props");
-var import_ui15 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
-var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { value: colorOverlayValues, setValue } = useBoundProp(import_editor_props10.backgroundImagePropTypeUtil);
-  const setColorOverlay = (newValue) => {
-    setValue(newValue);
-  };
-  return /* @__PURE__ */ React18.createElement(
-    Repeater,
-    {
-      values: colorOverlayValues,
-      setValues: setColorOverlay,
-      label: (0, import_i18n6.__)("Overlay", "elementor"),
-      itemSettings: {
-        Icon: ItemIcon2,
-        Label: ItemLabel2,
-        Content: ItemContent2,
-        initialValues: initialGradient
-      }
-    }
-  );
-});
-var ItemIcon2 = ({ value }) => /* @__PURE__ */ React18.createElement(import_ui15.UnstableColorIndicator, { 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(import_ui15.Stack, { gap: 1.5 }, /* @__PURE__ */ React18.createElement(
-    Control3,
-    {
-      bind: "color",
-      value: value.value.color,
-      label: (0, import_i18n6.__)("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(import_ui15.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React18.createElement(import_ui15.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(import_ui15.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React18.createElement(import_ui15.Grid, { 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
-var React20 = __toESM(require("react"));
-var import_editor_props11 = require("@elementor/editor-props");
+var React19 = __toESM(require("react"));
+var import_editor_props10 = require("@elementor/editor-props");
 
 // src/components/control-toggle-button-group.tsx
-var React19 = __toESM(require("react"));
-var import_ui16 = require("@elementor/ui");
-var StyledToggleButtonGroup = (0, import_ui16.styled)(import_ui16.ToggleButtonGroup)`
+var React18 = __toESM(require("react"));
+var import_ui15 = require("@elementor/ui");
+var StyledToggleButtonGroup = (0, import_ui15.styled)(import_ui15.ToggleButtonGroup)`
 	${({ justify }) => `justify-content: ${justify};`}
 `;
 var ControlToggleButtonGroup = ({
@@ -873,11 +823,11 @@ var ControlToggleButtonGroup = ({
   exclusive = false,
   fullWidth = false
 }) => {
-  const isRtl = "rtl" === (0, import_ui16.useTheme)().direction;
+  const isRtl = "rtl" === (0, import_ui15.useTheme)().direction;
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     StyledToggleButtonGroup,
     {
       justify,
@@ -889,8 +839,8 @@ var ControlToggleButtonGroup = ({
       }
     },
     items.map(
-      ({ label, value: buttonValue, renderContent: Content, showTooltip }) => showTooltip ? /* @__PURE__ */ React19.createElement(import_ui16.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React19.createElement(import_ui16.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React19.createElement(Content, { size }))) : /* @__PURE__ */ React19.createElement(
-        import_ui16.ToggleButton,
+      ({ label, value: buttonValue, renderContent: Content, showTooltip }) => showTooltip ? /* @__PURE__ */ React18.createElement(import_ui15.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React18.createElement(import_ui15.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React18.createElement(Content, { size }))) : /* @__PURE__ */ React18.createElement(
+        import_ui15.ToggleButton,
         {
           key: buttonValue,
           value: buttonValue,
@@ -898,7 +848,7 @@ var ControlToggleButtonGroup = ({
           size,
           fullWidth
         },
-        /* @__PURE__ */ React19.createElement(Content, { size })
+        /* @__PURE__ */ React18.createElement(Content, { size })
       )
     )
   );
@@ -907,11 +857,11 @@ var ControlToggleButtonGroup = ({
 // src/controls/toggle-control.tsx
 var ToggleControl = createControl(
   ({ options, fullWidth = false, size = "tiny" }) => {
-    const { value, setValue } = useBoundProp(import_editor_props11.stringPropTypeUtil);
+    const { value, setValue } = useBoundProp(import_editor_props10.stringPropTypeUtil);
     const handleToggle = (option) => {
       setValue(option);
     };
-    return /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React19.createElement(
       ControlToggleButtonGroup,
       {
         items: options,
@@ -926,9 +876,9 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-var React21 = __toESM(require("react"));
-var import_editor_props12 = require("@elementor/editor-props");
-var import_ui17 = require("@elementor/ui");
+var React20 = __toESM(require("react"));
+var import_editor_props11 = require("@elementor/editor-props");
+var import_ui16 = require("@elementor/ui");
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
 var NumberControl = createControl(
   ({
@@ -938,7 +888,7 @@ var NumberControl = createControl(
     step = 1,
     shouldForceInt = false
   }) => {
-    const { value, setValue } = useBoundProp(import_editor_props12.numberPropTypeUtil);
+    const { value, setValue } = useBoundProp(import_editor_props11.numberPropTypeUtil);
     const handleChange = (event) => {
       const eventValue = event.target.value;
       if (isEmptyOrNaN(eventValue)) {
@@ -948,8 +898,8 @@ 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(
-      import_ui17.TextField,
+    return /* @__PURE__ */ React20.createElement(ControlActions, null, /* @__PURE__ */ React20.createElement(
+      import_ui16.TextField,
       {
         size: "tiny",
         type: "number",
@@ -964,11 +914,11 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-var React22 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_react7 = require("react");
-var import_editor_props13 = require("@elementor/editor-props");
-var import_ui18 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_editor_props12 = require("@elementor/editor-props");
+var import_ui17 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
 var isEqualSizes = (values, items) => {
   if (values.length !== items.length) {
     return false;
@@ -986,11 +936,14 @@ function EqualUnequalSizesControl({
 }) {
   const popupId = (0, import_react7.useId)();
   const controlRef = (0, import_react7.useRef)(null);
-  const popupState = (0, import_ui18.usePopupState)({ variant: "popover", popupId });
-  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props13.sizePropTypeUtil);
+  const popupState = (0, import_ui17.usePopupState)({ variant: "popover", popupId });
+  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props12.sizePropTypeUtil);
   const { value: multiSizeValue, setValue: setMultiSizeValue } = useBoundProp(multiSizePropTypeUtil);
   const splitEqualValue = () => {
-    return items.reduce((acc, item) => ({ ...acc, [item.bind]: import_editor_props13.sizePropTypeUtil.create(sizeValue) }), {});
+    if (!sizeValue) {
+      return {};
+    }
+    return items.reduce((acc, { bind }) => ({ ...acc, [bind]: import_editor_props12.sizePropTypeUtil.create(sizeValue) }), {});
   };
   const setNestedProp = (item, newValue) => {
     const newMappedValues = {
@@ -1003,27 +956,27 @@ function EqualUnequalSizesControl({
     }
     setMultiSizeValue(newMappedValues);
   };
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, label)), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui17.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React21.createElement(import_ui17.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(ControlLabel, null, label)), /* @__PURE__ */ React21.createElement(import_ui17.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(
     EqualSizeControl,
     {
       items,
       value: sizeValue,
       multiSizeValue,
       setValue: setSizeValue,
-      iconButton: /* @__PURE__ */ React22.createElement(
-        import_ui18.ToggleButton,
+      iconButton: /* @__PURE__ */ React21.createElement(
+        import_ui17.ToggleButton,
         {
           size: "tiny",
           value: "check",
           sx: { marginLeft: "auto" },
-          ...(0, import_ui18.bindToggle)(popupState),
+          ...(0, import_ui17.bindToggle)(popupState),
           selected: popupState.isOpen
         },
         icon
       )
     }
-  ))), /* @__PURE__ */ React22.createElement(
-    import_ui18.Popover,
+  ))), /* @__PURE__ */ React21.createElement(
+    import_ui17.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -1035,12 +988,12 @@ function EqualUnequalSizesControl({
         vertical: "top",
         horizontal: "right"
       },
-      ...(0, import_ui18.bindPopover)(popupState),
+      ...(0, import_ui17.bindPopover)(popupState),
       slotProps: {
         paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React22.createElement(import_ui18.Stack, { gap: 1.5 }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React21.createElement(import_ui17.Stack, { gap: 1.5 }, /* @__PURE__ */ React21.createElement(import_ui17.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React21.createElement(
       MultiSizeValueControl,
       {
         item: items[0],
@@ -1048,7 +1001,7 @@ function EqualUnequalSizesControl({
         setNestedProp,
         splitEqualValue
       }
-    ), /* @__PURE__ */ React22.createElement(
+    ), /* @__PURE__ */ React21.createElement(
       MultiSizeValueControl,
       {
         item: items[1],
@@ -1056,7 +1009,7 @@ function EqualUnequalSizesControl({
         setNestedProp,
         splitEqualValue
       }
-    )), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(
+    )), /* @__PURE__ */ React21.createElement(import_ui17.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React21.createElement(
       MultiSizeValueControl,
       {
         item: items[3],
@@ -1064,7 +1017,7 @@ function EqualUnequalSizesControl({
         setNestedProp,
         splitEqualValue
       }
-    ), /* @__PURE__ */ React22.createElement(
+    ), /* @__PURE__ */ React21.createElement(
       MultiSizeValueControl,
       {
         item: items[2],
@@ -1088,7 +1041,7 @@ var MultiSizeValueControl = ({
     }
     return splitEqualValue()?.[item.bind] ?? null;
   };
-  return /* @__PURE__ */ React22.createElement(BoundPropProvider, { bind: "", setValue: handleChange, value: getMultiSizeValues() }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(SizeControl, { startIcon: item.icon })))));
+  return /* @__PURE__ */ React21.createElement(BoundPropProvider, { bind: "", setValue: handleChange, value: getMultiSizeValues() }, /* @__PURE__ */ React21.createElement(import_ui17.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(import_ui17.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React21.createElement(import_ui17.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React21.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React21.createElement(import_ui17.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React21.createElement(SizeControl, { startIcon: item.icon })))));
 };
 var EqualSizeControl = ({
   value,
@@ -1102,24 +1055,24 @@ var EqualSizeControl = ({
   };
   const getDisplayValue = () => {
     if (value) {
-      return import_editor_props13.sizePropTypeUtil.create(value);
+      return import_editor_props12.sizePropTypeUtil.create(value);
     }
     const multiValues = Object.values(multiSizeValue ?? {});
     if (isEqualSizes(multiValues, items)) {
-      return import_editor_props13.sizePropTypeUtil.create(multiValues[0].value);
+      return import_editor_props12.sizePropTypeUtil.create(multiValues[0].value);
     }
   };
-  return /* @__PURE__ */ React22.createElement(BoundPropProvider, { bind: "", setValue: handleChange, value: getDisplayValue() ?? null }, /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(SizeControl, { placeholder: (0, import_i18n7.__)("MIXED", "elementor") }), iconButton));
+  return /* @__PURE__ */ React21.createElement(BoundPropProvider, { bind: "", setValue: handleChange, value: getDisplayValue() ?? null }, /* @__PURE__ */ React21.createElement(import_ui17.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React21.createElement(SizeControl, { placeholder: (0, import_i18n6.__)("MIXED", "elementor") }), iconButton));
 };
 
 // src/controls/linked-dimensions-control.tsx
-var React23 = __toESM(require("react"));
-var import_editor_props14 = require("@elementor/editor-props");
+var React22 = __toESM(require("react"));
+var import_editor_props13 = require("@elementor/editor-props");
 var import_icons3 = require("@elementor/icons");
-var import_ui19 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_ui18 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
 var LinkedDimensionsControl = createControl(({ label }) => {
-  const { value, setValue } = useBoundProp(import_editor_props14.linkedDimensionsPropTypeUtil);
+  const { value, setValue } = useBoundProp(import_editor_props13.linkedDimensionsPropTypeUtil);
   const { top, right, bottom, left, isLinked = true } = value || {};
   const setLinkedValue = (position, newValue) => {
     const updatedValue = {
@@ -1143,72 +1096,72 @@ var LinkedDimensionsControl = createControl(({ label }) => {
     setValue(updatedValue);
   };
   const LinkedIcon = isLinked ? import_icons3.LinkIcon : import_icons3.DetachIcon;
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label), /* @__PURE__ */ React23.createElement(
-    import_ui19.ToggleButton,
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(ControlLabel, null, label), /* @__PURE__ */ React22.createElement(
+    import_ui18.ToggleButton,
     {
-      "aria-label": (0, import_i18n8.__)("Link Inputs", "elementor"),
+      "aria-label": (0, import_i18n7.__)("Link Inputs", "elementor"),
       size: "tiny",
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: toggleLinked
     },
-    /* @__PURE__ */ React23.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, (0, import_i18n8.__)("Top", "elementor"))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
-    Control4,
+    /* @__PURE__ */ React22.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
+    Control3,
     {
       bind: "top",
       value: top,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React23.createElement(import_icons3.SideTopIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React22.createElement(import_icons3.SideTopIcon, { fontSize: "tiny" })
     }
-  ))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, (0, import_i18n8.__)("Right", "elementor"))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
-    Control4,
+  ))), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
+    Control3,
     {
       bind: "right",
       value: right,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React23.createElement(import_icons3.SideRightIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React22.createElement(import_icons3.SideRightIcon, { fontSize: "tiny" })
     }
-  )))), /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, (0, import_i18n8.__)("Bottom", "elementor"))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
-    Control4,
+  )))), /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
+    Control3,
     {
       bind: "bottom",
       value: bottom,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React23.createElement(import_icons3.SideBottomIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React22.createElement(import_icons3.SideBottomIcon, { fontSize: "tiny" })
     }
-  ))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, (0, import_i18n8.__)("Left", "elementor"))), /* @__PURE__ */ React23.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(
-    Control4,
+  ))), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(
+    Control3,
     {
       bind: "left",
       value: left,
       setValue: setLinkedValue,
-      startIcon: /* @__PURE__ */ React23.createElement(import_icons3.SideLeftIcon, { fontSize: "tiny" })
+      startIcon: /* @__PURE__ */ React22.createElement(import_icons3.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
 var import_react8 = require("react");
-var React24 = __toESM(require("react"));
-var import_editor_props15 = require("@elementor/editor-props");
+var React23 = __toESM(require("react"));
+var import_editor_props14 = require("@elementor/editor-props");
 var import_icons4 = require("@elementor/icons");
-var import_ui20 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_ui19 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/hooks/use-filtered-font-families.ts
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 var supportedCategories = {
-  system: (0, import_i18n9.__)("System", "elementor"),
-  googlefonts: (0, import_i18n9.__)("Google Fonts", "elementor"),
-  customfonts: (0, import_i18n9.__)("Custom Fonts", "elementor")
+  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(
@@ -1237,9 +1190,9 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
   const [searchValue, setSearchValue] = (0, import_react8.useState)("");
-  const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props15.stringPropTypeUtil);
+  const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props14.stringPropTypeUtil);
   const popupId = (0, import_react8.useId)();
-  const popoverState = (0, import_ui20.usePopupState)({ variant: "popover", popupId });
+  const popoverState = (0, import_ui19.usePopupState)({ variant: "popover", popupId });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
   if (!filteredFontFamilies) {
     return null;
@@ -1251,40 +1204,40 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
     setSearchValue("");
     popoverState.close();
   };
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
-    import_ui20.UnstableTag,
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+    import_ui19.UnstableTag,
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React24.createElement(import_icons4.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui20.bindTrigger)(popoverState),
+      endIcon: /* @__PURE__ */ React23.createElement(import_icons4.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui19.bindTrigger)(popoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React24.createElement(
-    import_ui20.Popover,
+  ), /* @__PURE__ */ React23.createElement(
+    import_ui19.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      ...(0, import_ui20.bindPopover)(popoverState),
+      ...(0, import_ui19.bindPopover)(popoverState),
       onClose: handleClose
     },
-    /* @__PURE__ */ React24.createElement(import_ui20.Stack, null, /* @__PURE__ */ React24.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React24.createElement(import_icons4.EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React24.createElement(import_ui20.Typography, { variant: "subtitle2" }, (0, import_i18n10.__)("Font Family", "elementor")), /* @__PURE__ */ React24.createElement(import_ui20.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React24.createElement(import_icons4.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React24.createElement(import_ui20.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React24.createElement(
-      import_ui20.TextField,
+    /* @__PURE__ */ React23.createElement(import_ui19.Stack, null, /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React23.createElement(import_icons4.EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React23.createElement(import_ui19.Typography, { variant: "subtitle2" }, (0, import_i18n9.__)("Font Family", "elementor")), /* @__PURE__ */ React23.createElement(import_ui19.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React23.createElement(import_icons4.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React23.createElement(import_ui19.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React23.createElement(
+      import_ui19.TextField,
       {
         fullWidth: true,
         size: SIZE2,
         value: searchValue,
-        placeholder: (0, import_i18n10.__)("Search", "elementor"),
+        placeholder: (0, import_i18n9.__)("Search", "elementor"),
         onChange: handleSearch,
         InputProps: {
-          startAdornment: /* @__PURE__ */ React24.createElement(import_ui20.InputAdornment, { position: "start" }, /* @__PURE__ */ React24.createElement(import_icons4.SearchIcon, { fontSize: SIZE2 }))
+          startAdornment: /* @__PURE__ */ React23.createElement(import_ui19.InputAdornment, { position: "start" }, /* @__PURE__ */ React23.createElement(import_icons4.SearchIcon, { fontSize: SIZE2 }))
         }
       }
-    )), /* @__PURE__ */ React24.createElement(import_ui20.Divider, null), /* @__PURE__ */ React24.createElement(import_ui20.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React24.createElement(import_ui20.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React24.createElement(import_react8.Fragment, { key: index }, /* @__PURE__ */ React24.createElement(import_ui20.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
+    )), /* @__PURE__ */ React23.createElement(import_ui19.Divider, null), /* @__PURE__ */ React23.createElement(import_ui19.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React23.createElement(import_ui19.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React23.createElement(import_react8.Fragment, { key: index }, /* @__PURE__ */ React23.createElement(import_ui19.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
       const isSelected = item === fontFamily;
-      return /* @__PURE__ */ React24.createElement(
-        import_ui20.MenuItem,
+      return /* @__PURE__ */ React23.createElement(
+        import_ui19.MenuItem,
         {
           key: item,
           selected: isSelected,
@@ -1298,30 +1251,30 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         },
         item
       );
-    })))) : /* @__PURE__ */ React24.createElement(import_ui20.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React24.createElement(import_icons4.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React24.createElement(import_ui20.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n10.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React24.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React24.createElement(import_ui20.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React24.createElement(
-      import_ui20.Link,
+    })))) : /* @__PURE__ */ React23.createElement(import_ui19.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React23.createElement(import_icons4.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React23.createElement(import_ui19.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n9.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React23.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React23.createElement(import_ui19.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React23.createElement(
+      import_ui19.Link,
       {
         color: "secondary",
         variant: "caption",
         component: "button",
         onClick: () => setSearchValue("")
       },
-      (0, import_i18n10.__)("Clear the filters", "elementor")
-    ), "\xA0", (0, import_i18n10.__)("and try again.", "elementor")))))
+      (0, import_i18n9.__)("Clear the filters", "elementor")
+    ), "\xA0", (0, import_i18n9.__)("and try again.", "elementor")))))
   ));
 });
 
 // src/controls/url-control.tsx
-var React25 = __toESM(require("react"));
-var import_ui21 = require("@elementor/ui");
+var React24 = __toESM(require("react"));
+var import_ui20 = require("@elementor/ui");
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue } = useBoundProp();
   const handleChange = (event) => setValue({
     $$type: "url",
     value: event.target.value
   });
-  return /* @__PURE__ */ React25.createElement(ControlActions, null, /* @__PURE__ */ React25.createElement(
-    import_ui21.TextField,
+  return /* @__PURE__ */ React24.createElement(ControlActions, null, /* @__PURE__ */ React24.createElement(
+    import_ui20.TextField,
     {
       size: "tiny",
       fullWidth: true,
@@ -1333,10 +1286,10 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-var React26 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_icons5 = require("@elementor/icons");
-var import_ui22 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_ui21 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var DEFAULT_LINK_CONTROL_VALUE = {
   $$type: "link",
@@ -1361,8 +1314,8 @@ var LinkControl = createControl(() => {
       }
     });
   };
-  return /* @__PURE__ */ React26.createElement(import_ui22.Stack, { gap: 1.5 }, /* @__PURE__ */ React26.createElement(import_ui22.Divider, null), /* @__PURE__ */ React26.createElement(
-    import_ui22.Stack,
+  return /* @__PURE__ */ React25.createElement(import_ui21.Stack, { gap: 1.5 }, /* @__PURE__ */ React25.createElement(import_ui21.Divider, null), /* @__PURE__ */ React25.createElement(
+    import_ui21.Stack,
     {
       direction: "row",
       sx: {
@@ -1370,17 +1323,17 @@ var LinkControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n11.__)("Link", "elementor")),
-    /* @__PURE__ */ React26.createElement(import_ui22.IconButton, { size: SIZE3, onClick: () => handleOnChange("enabled", !enabled) }, enabled ? /* @__PURE__ */ React26.createElement(import_icons5.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React26.createElement(import_icons5.PlusIcon, { fontSize: SIZE3 }))
-  ), /* @__PURE__ */ React26.createElement(import_ui22.Collapse, { in: enabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React26.createElement(import_ui22.Stack, { gap: 1.5 }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React25.createElement(ControlLabel, null, (0, import_i18n10.__)("Link", "elementor")),
+    /* @__PURE__ */ React25.createElement(import_ui21.IconButton, { size: SIZE3, onClick: () => handleOnChange("enabled", !enabled) }, enabled ? /* @__PURE__ */ React25.createElement(import_icons5.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React25.createElement(import_icons5.PlusIcon, { fontSize: SIZE3 }))
+  ), /* @__PURE__ */ React25.createElement(import_ui21.Collapse, { in: enabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React25.createElement(import_ui21.Stack, { gap: 1.5 }, /* @__PURE__ */ React25.createElement(
     BoundPropProvider,
     {
       value: href,
       setValue: (newHref) => handleOnChange("href", newHref),
       bind: "href"
     },
-    /* @__PURE__ */ React26.createElement(UrlControl, { placeholder: (0, import_i18n11.__)("Paste URL or type", "elementor") })
-  ), /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React25.createElement(UrlControl, { placeholder: (0, import_i18n10.__)("Paste URL or type", "elementor") })
+  ), /* @__PURE__ */ React25.createElement(
     SwitchControl,
     {
       value: isTargetBlank,
@@ -1389,17 +1342,17 @@ var LinkControl = createControl(() => {
   ))));
 });
 var SwitchControl = ({ value, onSwitch }) => {
-  return /* @__PURE__ */ React26.createElement(import_ui22.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React26.createElement(import_ui22.Grid, { item: true }, /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n11.__)("Open in new tab", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui22.Grid, { item: true }, /* @__PURE__ */ React26.createElement(import_ui22.Switch, { checked: value, onChange: onSwitch })));
+  return /* @__PURE__ */ React25.createElement(import_ui21.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React25.createElement(import_ui21.Grid, { item: true }, /* @__PURE__ */ React25.createElement(ControlLabel, null, (0, import_i18n10.__)("Open in new tab", "elementor"))), /* @__PURE__ */ React25.createElement(import_ui21.Grid, { item: true }, /* @__PURE__ */ React25.createElement(import_ui21.Switch, { checked: value, onChange: onSwitch })));
 };
 
 // src/controls/gap-control.tsx
-var React27 = __toESM(require("react"));
-var import_editor_props16 = require("@elementor/editor-props");
+var React26 = __toESM(require("react"));
+var import_editor_props15 = require("@elementor/editor-props");
 var import_icons6 = require("@elementor/icons");
-var import_ui23 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_ui22 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 var GapControl = createControl(({ label }) => {
-  const { value, setValue } = useBoundProp(import_editor_props16.gapPropTypeUtil);
+  const { value, setValue } = useBoundProp(import_editor_props15.gapPropTypeUtil);
   const { column, row, isLinked = true } = value || {};
   const setLinkedValue = (gap, newValue) => {
     const updatedValue = {
@@ -1419,38 +1372,125 @@ var GapControl = createControl(({ label }) => {
     setValue(updatedValue);
   };
   const LinkedIcon = isLinked ? import_icons6.LinkIcon : import_icons6.DetachIcon;
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(
-    import_ui23.ToggleButton,
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label), /* @__PURE__ */ React26.createElement(
+    import_ui22.ToggleButton,
     {
-      "aria-label": (0, import_i18n12.__)("Link Inputs", "elementor"),
+      "aria-label": (0, import_i18n11.__)("Link Inputs", "elementor"),
       size: "tiny",
       value: "check",
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: toggleLinked
     },
-    /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React27.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n12.__)("Column", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React26.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React26.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n11.__)("Column", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui22.Grid, { 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(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n12.__)("Row", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React26.createElement(SizeControl, null)
+  ))), /* @__PURE__ */ React26.createElement(import_ui22.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n11.__)("Row", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui22.Grid, { 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
+var React28 = __toESM(require("react"));
+var import_editor_props17 = require("@elementor/editor-props");
+var import_ui24 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
+
+// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
+var React27 = __toESM(require("react"));
+var import_editor_props16 = require("@elementor/editor-props");
+var import_ui23 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
+var initialBackgroundOverlay = {
+  $$type: "background-color-overlay",
+  value: "rgba(0, 0, 0, 0.2)"
+};
+var BackgroundOverlayRepeaterControl = createControl(() => {
+  const { value: overlayValues, setValue } = useBoundProp(import_editor_props16.backgroundOverlayPropTypeUtil);
+  const setColorOverlay = (newValue) => {
+    setValue(newValue);
+  };
+  return /* @__PURE__ */ React27.createElement(
+    Repeater,
+    {
+      values: overlayValues ?? [],
+      setValues: setColorOverlay,
+      label: (0, import_i18n12.__)("Overlay", "elementor"),
+      itemSettings: {
+        Icon: ItemIcon2,
+        Label: ItemLabel2,
+        Content: ItemContent2,
+        initialValues: initialBackgroundOverlay
+      }
+    }
+  );
+});
+var ItemIcon2 = ({ value }) => /* @__PURE__ */ React27.createElement(import_ui23.UnstableColorIndicator, { 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(import_ui23.Stack, { gap: 1.5 }, /* @__PURE__ */ React27.createElement(
+    BoundPropProvider,
+    {
+      bind: "background-color-overlay",
+      value,
+      setValue: setBackgroundColorOverlay
+    },
+    /* @__PURE__ */ React27.createElement(import_ui23.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n12.__)("Color", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui23.Grid, { 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(import_editor_props17.backgroundPropTypeUtil);
+  const setColor = (newValue) => {
+    setValue({
+      ...value,
+      color: newValue
+    });
+  };
+  const setBackgroundColorOverlay = (newValue) => {
+    setValue({
+      ...value,
+      "background-overlay": newValue
+    });
+  };
+  return /* @__PURE__ */ React28.createElement(import_ui24.Stack, { 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(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n13.__)("Color", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ColorControl, null)))));
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BackgroundOverlayRepeaterControl,
+  BackgroundControl,
   BoundPropProvider,
   BoxShadowRepeaterControl,
   ColorControl,