@elementor/editor-controls 1.3.0 → 1.5.0

package/dist/index.js

@@ -365,7 +365,7 @@ var import_ui3 = require("@elementor/ui");
 var React6 = __toESM(require("react"));
 var import_react5 = require("react");
 var Context = (0, import_react5.createContext)(null);
-var ControlActionsProvider = ({ children, items }) => /* @__PURE__ */ React6.createElement(Context.Provider, { value: { items } }, children);
+var ControlActionsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React6.createElement(Context.Provider, { value: { items: items2 } }, children);
 var useControlActions = () => {
   const context = (0, import_react5.useContext)(Context);
   if (!context) {
@@ -387,12 +387,12 @@ var FloatingBarContainer = (0, import_ui3.styled)("span")`
 	}
 `;
 function ControlActions({ children }) {
-  const { items } = useControlActions();
+  const { items: items2 } = useControlActions();
   const { disabled } = useBoundProp();
-  if (items.length === 0 || disabled) {
+  if (items2.length === 0 || disabled) {
     return children;
   }
-  const menuItems = items.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React7.createElement(MenuItem2, { key: id }));
+  const menuItems = items2.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React7.createElement(MenuItem2, { key: id }));
   return /* @__PURE__ */ React7.createElement(FloatingBarContainer, null, /* @__PURE__ */ React7.createElement(import_ui3.UnstableFloatingActionBar, { actions: menuItems }, children));
 }
 
@@ -508,21 +508,31 @@ var ImageSizeControl = ({ sizes }) => {
 var React11 = __toESM(require("react"));
 var import_editor_props4 = require("@elementor/editor-props");
 var import_ui7 = require("@elementor/ui");
-var TextControl = createControl(({ placeholder }) => {
-  const { value, setValue, disabled } = useBoundProp(import_editor_props4.stringPropTypeUtil);
-  const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
-    import_ui7.TextField,
-    {
-      size: "tiny",
-      fullWidth: true,
-      disabled,
-      value: value ?? "",
-      onChange: handleChange,
-      placeholder
-    }
-  ));
-});
+var TextControl = createControl(
+  ({
+    placeholder,
+    error,
+    inputValue,
+    inputDisabled,
+    sx
+  }) => {
+    const { value, setValue, disabled } = useBoundProp(import_editor_props4.stringPropTypeUtil);
+    const handleChange = (event) => setValue(event.target.value);
+    return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
+      import_ui7.TextField,
+      {
+        size: "tiny",
+        fullWidth: true,
+        disabled: inputDisabled ?? disabled,
+        value: inputValue ?? value ?? "",
+        onChange: handleChange,
+        placeholder,
+        error,
+        sx
+      }
+    ));
+  }
+);
 
 // src/controls/text-area-control.tsx
 var React12 = __toESM(require("react"));
@@ -840,12 +850,12 @@ var SizeControl = createControl((props) => {
       return !!newState?.numeric || newState?.numeric === 0;
     },
     fallback: (newState) => ({
-      unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
+      unit: newState?.unit ?? defaultUnit,
       numeric: newState?.numeric ?? DEFAULT_SIZE,
       custom: newState?.custom ?? ""
     })
   });
-  const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = DEFAULT_UNIT } = extractValueFromState(state) || {};
+  const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = defaultUnit } = extractValueFromState(state) || {};
   const handleUnitChange = (newUnit) => {
     if (newUnit === "custom") {
       popupState.open(anchorRef?.current);
@@ -875,9 +885,13 @@ var SizeControl = createControl((props) => {
     }
   };
   (0, import_react10.useEffect)(() => {
-    const newState = createStateFromSizeProp(sizeValue, defaultUnit);
-    const currentUnit = isUnitExtendedOption(state.unit) ? "custom" : "numeric";
-    const mergedStates = { ...state, [currentUnit]: newState[currentUnit] };
+    const newState = createStateFromSizeProp(sizeValue, state.unit === "custom" ? state.unit : defaultUnit);
+    const currentUnitType = isUnitExtendedOption(state.unit) ? "custom" : "numeric";
+    const mergedStates = {
+      ...state,
+      unit: newState.unit ?? state.unit,
+      [currentUnitType]: newState[currentUnitType]
+    };
     if (mergedStates.unit !== "auto" && areStatesEqual(state, mergedStates)) {
       return;
     }
@@ -979,7 +993,8 @@ var import_editor_props7 = require("@elementor/editor-props");
 var import_ui14 = require("@elementor/ui");
 var ColorControl = createControl(
   ({ propTypeUtil = import_editor_props7.colorPropTypeUtil, anchorEl, slotProps = {}, ...props }) => {
-    const { value, setValue, disabled } = useBoundProp(propTypeUtil);
+    const { value, setValue, placeholder: boundPropPlaceholder, disabled } = useBoundProp(propTypeUtil);
+    const placeholder = props.placeholder ?? boundPropPlaceholder;
     const handleChange = (selectedColor) => {
       setValue(selectedColor || null);
     };
@@ -989,6 +1004,7 @@ var ColorControl = createControl(
         size: "tiny",
         fullWidth: true,
         value: value ?? "",
+        placeholder: placeholder ?? "",
         onChange: handleChange,
         ...props,
         disabled,
@@ -1003,6 +1019,14 @@ var ColorControl = createControl(
             transformOrigin: {
               vertical: "top",
               horizontal: -10
+            },
+            slotProps: {
+              colorIndicator: {
+                value: value ?? placeholder ?? ""
+              },
+              colorBox: {
+                value: value ?? placeholder ?? ""
+              }
             }
           }
         }
@@ -1054,7 +1078,7 @@ var React23 = __toESM(require("react"));
 var React22 = __toESM(require("react"));
 var import_react13 = require("react");
 var Context2 = (0, import_react13.createContext)(null);
-var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React22.createElement(Context2.Provider, { value: { items } }, children);
+var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React22.createElement(Context2.Provider, { value: { items: items2 } }, children);
 var useControlAdornments = () => {
   const context = (0, import_react13.useContext)(Context2);
   return context?.items ?? [];
@@ -1062,11 +1086,11 @@ var useControlAdornments = () => {
 
 // src/control-adornments/control-adornments.tsx
 function ControlAdornments() {
-  const items = useControlAdornments();
-  if (items?.length === 0) {
+  const items2 = useControlAdornments();
+  if (items2?.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, items.map(({ Adornment, id }) => /* @__PURE__ */ React23.createElement(Adornment, { key: id })));
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React23.createElement(Adornment, { key: id })));
 }
 
 // src/locations.ts
@@ -1160,16 +1184,17 @@ var Repeater = ({
   setValues: setRepeaterValues,
   showDuplicate = true,
   showToggle = true,
-  isSortable = true
+  isSortable = true,
+  collectionPropUtil
 }) => {
   const [openItem, setOpenItem] = (0, import_react14.useState)(EMPTY_OPEN_ITEM);
-  const [items, setItems] = useSyncExternalState({
+  const [items2, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = (0, import_react14.useState)(items.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = (0, import_react14.useState)(items2.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -1177,10 +1202,10 @@ var Repeater = ({
     const newItem = structuredClone(itemSettings.initialValues);
     const newKey = generateNextKey(uniqueKeys);
     if (addToBottom) {
-      setItems([...items, newItem]);
+      setItems([...items2, newItem]);
       setUniqueKeys([...uniqueKeys, newKey]);
     } else {
-      setItems([newItem, ...items]);
+      setItems([newItem, ...items2]);
       setUniqueKeys([newKey, ...uniqueKeys]);
     }
     if (openOnAdd) {
@@ -1188,10 +1213,10 @@ var Repeater = ({
     }
   };
   const duplicateRepeaterItem = (index) => {
-    const newItem = structuredClone(items[index]);
+    const newItem = structuredClone(items2[index]);
     const newKey = generateNextKey(uniqueKeys);
     const atPosition = 1 + index;
-    setItems([...items.slice(0, atPosition), newItem, ...items.slice(atPosition)]);
+    setItems([...items2.slice(0, atPosition), newItem, ...items2.slice(atPosition)]);
     setUniqueKeys([...uniqueKeys.slice(0, atPosition), newKey, ...uniqueKeys.slice(atPosition)]);
   };
   const removeRepeaterItem = (index) => {
@@ -1201,14 +1226,14 @@ var Repeater = ({
       })
     );
     setItems(
-      items.filter((_, pos) => {
+      items2.filter((_, pos) => {
         return pos !== index;
       })
     );
   };
   const toggleDisableRepeaterItem = (index) => {
     setItems(
-      items.map((value, pos) => {
+      items2.map((value, pos) => {
         if (pos === index) {
           const { disabled: propDisabled, ...rest } = value;
           return { ...rest, ...propDisabled ? {} : { disabled: true } };
@@ -1249,7 +1274,7 @@ var Repeater = ({
       /* @__PURE__ */ React25.createElement(import_icons4.PlusIcon, { fontSize: SIZE })
     )
   ), 0 < uniqueKeys.length && /* @__PURE__ */ React25.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
-    const value = items[index];
+    const value = items2[index];
     if (!value) {
       return null;
     }
@@ -1266,7 +1291,8 @@ var Repeater = ({
         openOnMount: openOnAdd && openItem === key,
         onOpen: () => setOpenItem(EMPTY_OPEN_ITEM),
         showDuplicate,
-        showToggle
+        showToggle,
+        collectionPropUtil
       },
       (props) => /* @__PURE__ */ React25.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
@@ -1284,7 +1310,8 @@ var RepeaterItem = ({
   onOpen,
   showDuplicate,
   showToggle,
-  disabled
+  disabled,
+  collectionPropUtil
 }) => {
   const [anchorEl, setAnchorEl] = (0, import_react14.useState)(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
@@ -1319,7 +1346,7 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React25.createElement(import_ui19.Box, null, children({ anchorEl }))
+    /* @__PURE__ */ React25.createElement(import_ui19.Box, null, children({ anchorEl, collectionPropUtil }))
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
@@ -1426,12 +1453,13 @@ var initialShadow = {
 };
 
 // src/controls/filter-repeater-control.tsx
-var React28 = __toESM(require("react"));
-var import_react16 = require("react");
+var React30 = __toESM(require("react"));
+var import_react17 = require("react");
 var import_editor_props10 = require("@elementor/editor-props");
+var import_editor_props11 = require("@elementor/editor-props");
 var import_editor_ui3 = require("@elementor/editor-ui");
-var import_ui22 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_ui24 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/components/control-label.tsx
 var React27 = __toESM(require("react"));
@@ -1440,39 +1468,145 @@ var ControlLabel = ({ children }) => {
   return /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React27.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React27.createElement(ControlAdornments, null));
 };
 
+// src/controls/filter-control/drop-shadow-item-content.tsx
+var React28 = __toESM(require("react"));
+var import_react16 = require("react");
+var import_ui22 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
+var items = [
+  {
+    bind: "xAxis",
+    label: (0, import_i18n6.__)("X-axis", "elementor"),
+    rowIndex: 0
+  },
+  {
+    bind: "yAxis",
+    label: (0, import_i18n6.__)("Y-axis", "elementor"),
+    rowIndex: 0
+  },
+  {
+    bind: "blur",
+    label: (0, import_i18n6.__)("Blur", "elementor"),
+    rowIndex: 1
+  },
+  {
+    bind: "color",
+    label: (0, import_i18n6.__)("Color", "elementor"),
+    rowIndex: 1
+  }
+];
+var DropShadowItemContent = ({
+  propType,
+  units: units2,
+  anchorEl
+}) => {
+  const context = useBoundProp(propType);
+  const rowRefs = [(0, import_react16.useRef)(null), (0, import_react16.useRef)(null)];
+  return /* @__PURE__ */ React28.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React28.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React28.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React28.createElement(import_ui22.Grid, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React28.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRefs[item.rowIndex], units: units2, defaultUnit: "px" }))))));
+};
+
+// src/controls/filter-control/drop-shadow-item-label.tsx
+var React29 = __toESM(require("react"));
+var import_ui23 = require("@elementor/ui");
+var DropShadowItemLabel = ({ value }) => {
+  const { xAxis, yAxis, blur } = value.value;
+  const xValue = `${xAxis?.value?.size ?? 0}${xAxis?.value?.unit ?? "px"}`;
+  const yValue = `${yAxis?.value?.size ?? 0}${yAxis?.value?.unit ?? "px"}`;
+  const blurValue = `${blur?.value?.size ?? 10}${blur?.value?.unit ?? "px"}`;
+  return /* @__PURE__ */ React29.createElement(import_ui23.Box, { component: "span" }, /* @__PURE__ */ React29.createElement(import_ui23.Box, { component: "span", style: { textTransform: "capitalize" } }, "Drop shadow:"), `${xValue} ${yValue} ${blurValue}`);
+};
+
 // src/controls/filter-repeater-control.tsx
 var DEFAULT_FILTER_KEY = "blur";
 var filterConfig = {
   blur: {
     defaultValue: { $$type: "radius", radius: { $$type: "size", value: { size: 0, unit: "px" } } },
-    name: (0, import_i18n6.__)("Blur", "elementor"),
-    valueName: (0, import_i18n6.__)("Radius", "elementor"),
+    name: (0, import_i18n7.__)("Blur", "elementor"),
+    valueName: (0, import_i18n7.__)("Radius", "elementor"),
     propType: import_editor_props10.blurFilterPropTypeUtil,
     units: defaultUnits.filter((unit) => unit !== "%")
   },
+  "drop-shadow": {
+    defaultValue: {
+      $$type: "drop-shadow",
+      value: {
+        xAxis: { $$type: "size", value: { size: 0, unit: "px" } },
+        yAxis: { $$type: "size", value: { size: 0, unit: "px" } },
+        blur: { $$type: "size", value: { size: 10, unit: "px" } },
+        color: { $$type: "color", value: "rgba(0, 0, 0, 1)" }
+      }
+    },
+    name: (0, import_i18n7.__)("Drop shadow", "elementor"),
+    valueName: (0, import_i18n7.__)("Drop-shadow", "elementor"),
+    propType: import_editor_props10.dropShadowFilterPropTypeUtil,
+    units: defaultUnits.filter((unit) => unit !== "%")
+  },
   brightness: {
     defaultValue: { $$type: "amount", amount: { $$type: "size", value: { size: 100, unit: "%" } } },
-    name: (0, import_i18n6.__)("Brightness", "elementor"),
-    valueName: (0, import_i18n6.__)("Amount", "elementor"),
+    name: (0, import_i18n7.__)("Brightness", "elementor"),
+    valueName: (0, import_i18n7.__)("Amount", "elementor"),
     propType: import_editor_props10.brightnessFilterPropTypeUtil,
     units: ["%"]
+  },
+  contrast: {
+    defaultValue: { $$type: "contrast", contrast: { $$type: "size", value: { size: 100, unit: "%" } } },
+    name: (0, import_i18n7.__)("Contrast", "elementor"),
+    valueName: (0, import_i18n7.__)("Amount", "elementor"),
+    propType: import_editor_props10.contrastFilterPropTypeUtil,
+    units: ["%"]
+  },
+  "hue-rotate": {
+    defaultValue: { $$type: "hue-rotate", "hue-rotate": { $$type: "size", value: { size: 0, unit: "deg" } } },
+    name: (0, import_i18n7.__)("Hue Rotate", "elementor"),
+    valueName: (0, import_i18n7.__)("Angle", "elementor"),
+    propType: import_editor_props10.hueRotateFilterPropTypeUtil,
+    units: ["deg", "rad", "grad", "turn"]
+  },
+  saturate: {
+    defaultValue: { $$type: "saturate", saturate: { $$type: "size", value: { size: 100, unit: "%" } } },
+    name: (0, import_i18n7.__)("Saturate", "elementor"),
+    valueName: (0, import_i18n7.__)("Amount", "elementor"),
+    propType: import_editor_props10.saturateFilterPropTypeUtil,
+    units: ["%"]
+  },
+  grayscale: {
+    defaultValue: { $$type: "grayscale", grayscale: { $$type: "size", value: { size: 0, unit: "%" } } },
+    name: (0, import_i18n7.__)("Grayscale", "elementor"),
+    valueName: (0, import_i18n7.__)("Amount", "elementor"),
+    propType: import_editor_props10.grayscaleFilterPropTypeUtil,
+    units: ["%"]
+  },
+  invert: {
+    defaultValue: { $$type: "invert", invert: { $$type: "size", value: { size: 0, unit: "%" } } },
+    name: (0, import_i18n7.__)("Invert", "elementor"),
+    valueName: (0, import_i18n7.__)("Amount", "elementor"),
+    propType: import_editor_props10.invertFilterPropTypeUtil,
+    units: ["%"]
+  },
+  sepia: {
+    defaultValue: { $$type: "sepia", sepia: { $$type: "size", value: { size: 0, unit: "%" } } },
+    name: (0, import_i18n7.__)("Sepia", "elementor"),
+    valueName: (0, import_i18n7.__)("Amount", "elementor"),
+    propType: import_editor_props10.sepiaFilterPropTypeUtil,
+    units: ["%"]
   }
 };
 var filterKeys = Object.keys(filterConfig);
-var singleSizeFilterNames = filterKeys.filter((name) => {
-  const filter = filterConfig[name].defaultValue;
-  return filter[filter.$$type].$$type === "size";
-});
-var FilterRepeaterControl = createControl(() => {
-  const { propType, value: filterValues, setValue, disabled } = useBoundProp(import_editor_props10.filterPropTypeUtil);
-  return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React28.createElement(
+var isSingleSize = (key) => {
+  return !["drop-shadow"].includes(key);
+};
+var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
+  const [propUtil, label] = filterPropName === "backdrop-filter" ? [import_editor_props11.backdropFilterPropTypeUtil, (0, import_i18n7.__)("Backdrop Filters", "elementor")] : [import_editor_props10.filterPropTypeUtil, (0, import_i18n7.__)("Filters", "elementor")];
+  const { propType, value: filterValues, setValue, disabled } = useBoundProp(propUtil);
+  return /* @__PURE__ */ React30.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React30.createElement(
     Repeater,
     {
       openOnAdd: true,
       disabled,
       values: filterValues ?? [],
       setValues: setValue,
-      label: (0, import_i18n6.__)("Filter", "elementor"),
+      label,
+      collectionPropUtil: propUtil,
       itemSettings: {
         Icon: ItemIcon2,
         Label: ItemLabel2,
@@ -1485,21 +1619,24 @@ var FilterRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemIcon2 = () => /* @__PURE__ */ React28.createElement(React28.Fragment, null);
-var ItemLabel2 = (props) => {
-  const { $$type } = props.value;
-  return singleSizeFilterNames.includes($$type) && /* @__PURE__ */ React28.createElement(SingleSizeItemLabel, { value: props.value });
+var ItemIcon2 = () => /* @__PURE__ */ React30.createElement(React30.Fragment, null);
+var ItemLabel2 = ({ value }) => {
+  return isSingleSize(value.$$type) ? /* @__PURE__ */ React30.createElement(SingleSizeItemLabel, { value }) : /* @__PURE__ */ React30.createElement(DropShadowItemLabel, { value });
 };
 var SingleSizeItemLabel = ({ value }) => {
   const { $$type, value: sizeValue } = value;
   const { $$type: key } = filterConfig[$$type].defaultValue;
   const defaultUnit = filterConfig[$$type].defaultValue[key].value.unit;
   const { unit, size } = sizeValue[key]?.value ?? { unit: defaultUnit, size: 0 };
-  const label = /* @__PURE__ */ React28.createElement(import_ui22.Box, { component: "span", style: { textTransform: "capitalize" } }, value.$$type, ":");
-  return /* @__PURE__ */ React28.createElement(import_ui22.Box, { component: "span" }, label, unit !== "custom" ? ` ${size ?? 0}${unit ?? defaultUnit}` : size);
+  const label = /* @__PURE__ */ React30.createElement(import_ui24.Box, { component: "span", style: { textTransform: "capitalize" } }, value.$$type, ":");
+  return /* @__PURE__ */ React30.createElement(import_ui24.Box, { component: "span" }, label, unit !== "custom" ? ` ${size ?? 0}${unit ?? defaultUnit}` : size);
 };
-var ItemContent2 = ({ bind }) => {
-  const { value: filterValues, setValue } = useBoundProp(import_editor_props10.filterPropTypeUtil);
+var ItemContent2 = ({
+  bind,
+  collectionPropUtil,
+  anchorEl
+}) => {
+  const { value: filterValues, setValue } = useBoundProp(collectionPropUtil ?? import_editor_props10.filterPropTypeUtil);
   const itemIndex = parseInt(bind, 10);
   const item = filterValues?.[itemIndex];
   const handleChange = (e) => {
@@ -1507,12 +1644,12 @@ var ItemContent2 = ({ bind }) => {
     const filterType = e.target.value;
     newFilterValues[itemIndex] = {
       $$type: filterType,
-      value: filterConfig[filterType].defaultValue
+      value: { ...filterConfig[filterType].defaultValue }
     };
     setValue(newFilterValues);
   };
-  return /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React28.createElement(PopoverGridContainer, null, /* @__PURE__ */ React28.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n6.__)("Filter", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(
-    import_ui22.Select,
+  return /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, (0, import_i18n7.__)("Filter", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(
+    import_ui24.Select,
     {
       sx: { overflow: "hidden" },
       size: "tiny",
@@ -1520,43 +1657,45 @@ var ItemContent2 = ({ bind }) => {
       onChange: handleChange,
       fullWidth: true
     },
-    filterKeys.map((filterKey) => /* @__PURE__ */ React28.createElement(import_editor_ui3.MenuListItem, { key: filterKey, value: filterKey }, filterConfig[filterKey].name))
-  ))), /* @__PURE__ */ React28.createElement(Content2, { filterType: item?.$$type })));
+    filterKeys.map((filterKey) => /* @__PURE__ */ React30.createElement(import_editor_ui3.MenuListItem, { key: filterKey, value: filterKey }, filterConfig[filterKey].name))
+  ))), /* @__PURE__ */ React30.createElement(Content2, { filterType: item?.$$type, anchorEl })));
 };
-var Content2 = ({ filterType }) => {
-  return singleSizeFilterNames.includes(filterType) && /* @__PURE__ */ React28.createElement(SingleSizeItemContent, { filterType });
+var Content2 = ({ filterType, anchorEl }) => {
+  const { propType, units: units2 = [] } = filterConfig[filterType];
+  return isSingleSize(filterType) ? /* @__PURE__ */ React30.createElement(SingleSizeItemContent, { filterType }) : /* @__PURE__ */ React30.createElement(DropShadowItemContent, { propType, units: units2, anchorEl });
 };
 var SingleSizeItemContent = ({ filterType }) => {
   const { propType, valueName, defaultValue, units: units2 } = filterConfig[filterType];
   const { $$type } = defaultValue;
   const context = useBoundProp(propType);
-  const rowRef = (0, import_react16.useRef)(null);
-  return /* @__PURE__ */ React28.createElement(PropProvider, { ...context }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: $$type }, /* @__PURE__ */ React28.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React28.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, valueName)), /* @__PURE__ */ React28.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef, units: units2 })))));
+  const rowRef = (0, import_react17.useRef)(null);
+  const defaultUnit = defaultValue[$$type].value.unit;
+  return /* @__PURE__ */ React30.createElement(PropProvider, { ...context }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: $$type }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React30.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, valueName)), /* @__PURE__ */ React30.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(SizeControl, { anchorRef: rowRef, units: units2, defaultUnit })))));
 };
 
 // src/controls/toggle-control.tsx
-var React31 = __toESM(require("react"));
-var import_editor_props11 = require("@elementor/editor-props");
+var React33 = __toESM(require("react"));
+var import_editor_props12 = require("@elementor/editor-props");
 
 // src/components/control-toggle-button-group.tsx
-var React30 = __toESM(require("react"));
-var import_react17 = require("react");
+var React32 = __toESM(require("react"));
+var import_react18 = require("react");
 var import_icons5 = require("@elementor/icons");
-var import_ui24 = require("@elementor/ui");
+var import_ui26 = require("@elementor/ui");
 
 // src/components/conditional-tooltip.tsx
-var React29 = __toESM(require("react"));
-var import_ui23 = require("@elementor/ui");
+var React31 = __toESM(require("react"));
+var import_ui25 = require("@elementor/ui");
 var ConditionalTooltip = ({
   showTooltip,
   children,
   label
 }) => {
-  return showTooltip && label ? /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
+  return showTooltip && label ? /* @__PURE__ */ React31.createElement(import_ui25.Tooltip, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
 };
 
 // src/components/control-toggle-button-group.tsx
-var StyledToggleButtonGroup = (0, import_ui24.styled)(import_ui24.ToggleButtonGroup)`
+var StyledToggleButtonGroup = (0, import_ui26.styled)(import_ui26.ToggleButtonGroup)`
 	${({ justify }) => `justify-content: ${justify};`}
 	button:not( :last-of-type ) {
 		border-start-end-radius: 0;
@@ -1576,26 +1715,26 @@ var ControlToggleButtonGroup = ({
   size = "tiny",
   value,
   onChange,
-  items,
+  items: items2,
   maxItems,
   exclusive = false,
   fullWidth = false,
   disabled
 }) => {
-  const shouldSliceItems = exclusive && maxItems !== void 0 && items.length > maxItems;
-  const menuItems = shouldSliceItems ? items.slice(maxItems - 1) : [];
-  const fixedItems = shouldSliceItems ? items.slice(0, maxItems - 1) : items;
-  const isRtl = "rtl" === (0, import_ui24.useTheme)().direction;
+  const shouldSliceItems = exclusive && maxItems !== void 0 && items2.length > maxItems;
+  const menuItems = shouldSliceItems ? items2.slice(maxItems - 1) : [];
+  const fixedItems = shouldSliceItems ? items2.slice(0, maxItems - 1) : items2;
+  const isRtl = "rtl" === (0, import_ui26.useTheme)().direction;
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  const getGridTemplateColumns = (0, import_react17.useMemo)(() => {
+  const getGridTemplateColumns = (0, import_react18.useMemo)(() => {
     const isOffLimits = menuItems?.length;
     const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
     return `repeat(${itemsCount}, minmax(0, 25%)) ${templateColumnsSuffix}`;
   }, [menuItems?.length, fixedItems.length]);
-  return /* @__PURE__ */ React30.createElement(ControlActions, null, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
     StyledToggleButtonGroup,
     {
       justify,
@@ -1610,16 +1749,16 @@ var ControlToggleButtonGroup = ({
         width: `100%`
       }
     },
-    fixedItems.map(({ label, value: buttonValue, renderContent: Content5, showTooltip }) => /* @__PURE__ */ React30.createElement(
+    fixedItems.map(({ label, value: buttonValue, renderContent: Content5, showTooltip }) => /* @__PURE__ */ React32.createElement(
       ConditionalTooltip,
       {
         key: buttonValue,
         label,
         showTooltip: showTooltip || false
       },
-      /* @__PURE__ */ React30.createElement(import_ui24.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React30.createElement(Content5, { size }))
+      /* @__PURE__ */ React32.createElement(import_ui26.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React32.createElement(Content5, { size }))
     )),
-    menuItems.length && exclusive && /* @__PURE__ */ React30.createElement(
+    menuItems.length && exclusive && /* @__PURE__ */ React32.createElement(
       SplitButtonGroup,
       {
         size,
@@ -1634,13 +1773,13 @@ var ControlToggleButtonGroup = ({
 var SplitButtonGroup = ({
   size = "tiny",
   onChange,
-  items,
+  items: items2,
   fullWidth,
   value
 }) => {
-  const previewButton = usePreviewButton(items, value);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react17.useState)(false);
-  const menuButtonRef = (0, import_react17.useRef)(null);
+  const previewButton = usePreviewButton(items2, value);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react18.useState)(false);
+  const menuButtonRef = (0, import_react18.useRef)(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -1653,8 +1792,8 @@ var SplitButtonGroup = ({
     const shouldRemove = newValue === value;
     onChange(shouldRemove ? null : newValue);
   };
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(
-    import_ui24.ToggleButton,
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
+    import_ui26.ToggleButton,
     {
       value: previewButton.value,
       "aria-label": previewButton.label,
@@ -1667,8 +1806,8 @@ var SplitButtonGroup = ({
       ref: menuButtonRef
     },
     previewButton.renderContent({ size })
-  ), /* @__PURE__ */ React30.createElement(
-    import_ui24.ToggleButton,
+  ), /* @__PURE__ */ React32.createElement(
+    import_ui26.ToggleButton,
     {
       size,
       "aria-expanded": isMenuOpen ? "true" : void 0,
@@ -1678,9 +1817,9 @@ var SplitButtonGroup = ({
       ref: menuButtonRef,
       value: "__chevron-icon-button__"
     },
-    /* @__PURE__ */ React30.createElement(import_icons5.ChevronDownIcon, { fontSize: size })
-  ), /* @__PURE__ */ React30.createElement(
-    import_ui24.Menu,
+    /* @__PURE__ */ React32.createElement(import_icons5.ChevronDownIcon, { fontSize: size })
+  ), /* @__PURE__ */ React32.createElement(
+    import_ui26.Menu,
     {
       open: isMenuOpen,
       onClose: () => setIsMenuOpen(false),
@@ -1697,27 +1836,27 @@ var SplitButtonGroup = ({
         mt: 0.5
       }
     },
-    items.map(({ label, value: buttonValue }) => /* @__PURE__ */ React30.createElement(
-      import_ui24.MenuItem,
+    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React32.createElement(
+      import_ui26.MenuItem,
       {
         key: buttonValue,
         selected: buttonValue === value,
         onClick: () => onMenuItemClick(buttonValue)
       },
-      /* @__PURE__ */ React30.createElement(import_ui24.ListItemText, null, /* @__PURE__ */ React30.createElement(import_ui24.Typography, { sx: { fontSize: "14px" } }, label))
+      /* @__PURE__ */ React32.createElement(import_ui26.ListItemText, null, /* @__PURE__ */ React32.createElement(import_ui26.Typography, { sx: { fontSize: "14px" } }, label))
     ))
   ));
 };
-var usePreviewButton = (items, value) => {
-  const [previewButton, setPreviewButton] = (0, import_react17.useState)(
-    items.find((item) => item.value === value) ?? items[0]
+var usePreviewButton = (items2, value) => {
+  const [previewButton, setPreviewButton] = (0, import_react18.useState)(
+    items2.find((item) => item.value === value) ?? items2[0]
   );
-  (0, import_react17.useEffect)(() => {
-    const selectedButton = items.find((item) => item.value === value);
+  (0, import_react18.useEffect)(() => {
+    const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
     }
-  }, [items, value]);
+  }, [items2, value]);
   return previewButton;
 };
 
@@ -1730,7 +1869,7 @@ var ToggleControl = createControl(
     exclusive = true,
     maxItems
   }) => {
-    const { value, setValue, placeholder, disabled } = useBoundProp(import_editor_props11.stringPropTypeUtil);
+    const { value, setValue, placeholder, disabled } = useBoundProp(import_editor_props12.stringPropTypeUtil);
     const exclusiveValues = options.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
       const newSelectedValue = selectedValues[selectedValues.length - 1];
@@ -1744,7 +1883,7 @@ var ToggleControl = createControl(
       fullWidth,
       size
     };
-    return exclusive ? /* @__PURE__ */ React31.createElement(
+    return exclusive ? /* @__PURE__ */ React33.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1753,7 +1892,7 @@ var ToggleControl = createControl(
         disabled,
         exclusive: true
       }
-    ) : /* @__PURE__ */ React31.createElement(
+    ) : /* @__PURE__ */ React33.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1767,9 +1906,9 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-var React32 = __toESM(require("react"));
-var import_editor_props12 = require("@elementor/editor-props");
-var import_ui25 = require("@elementor/ui");
+var React34 = __toESM(require("react"));
+var import_editor_props13 = require("@elementor/editor-props");
+var import_ui27 = require("@elementor/ui");
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
 var RESTRICTED_INPUT_KEYS2 = ["e", "E", "+", "-"];
 var NumberControl = createControl(
@@ -1780,7 +1919,7 @@ var NumberControl = createControl(
     step = 1,
     shouldForceInt = false
   }) => {
-    const { value, setValue, placeholder, disabled } = useBoundProp(import_editor_props12.numberPropTypeUtil);
+    const { value, setValue, placeholder, disabled } = useBoundProp(import_editor_props13.numberPropTypeUtil);
     const handleChange = (event) => {
       const eventValue = event.target.value;
       if (isEmptyOrNaN(eventValue)) {
@@ -1790,8 +1929,8 @@ var NumberControl = createControl(
       const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
       setValue(Math.min(Math.max(formattedValue, min), max));
     };
-    return /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
-      import_ui25.TextField,
+    return /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
+      import_ui27.TextField,
       {
         size: "tiny",
         type: "number",
@@ -1812,15 +1951,15 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-var React33 = __toESM(require("react"));
-var import_react18 = require("react");
-var import_editor_props13 = require("@elementor/editor-props");
+var React35 = __toESM(require("react"));
+var import_react19 = require("react");
+var import_editor_props14 = require("@elementor/editor-props");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_ui26 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
-var isEqualSizes = (propValue, items) => {
+var import_ui28 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+var isEqualSizes = (propValue, items2) => {
   const values = Object.values(propValue);
-  if (values.length !== items.length) {
+  if (values.length !== items2.length) {
     return false;
   }
   const [firstValue, ...restValues] = values;
@@ -1832,25 +1971,25 @@ function EqualUnequalSizesControl({
   label,
   icon,
   tooltipLabel,
-  items,
+  items: items2,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react18.useId)();
-  const popupState = (0, import_ui26.usePopupState)({ variant: "popover", popupId });
+  const popupId = (0, import_react19.useId)();
+  const popupState = (0, import_ui28.usePopupState)({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
     value: multiSizeValue,
     setValue: setMultiSizeValue,
     disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props13.sizePropTypeUtil);
-  const rowRefs = [(0, import_react18.useRef)(null), (0, import_react18.useRef)(null)];
+  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props14.sizePropTypeUtil);
+  const rowRefs = [(0, import_react19.useRef)(null), (0, import_react19.useRef)(null)];
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
     }
-    return items.reduce(
-      (acc, { bind }) => ({ ...acc, [bind]: import_editor_props13.sizePropTypeUtil.create(sizeValue) }),
+    return items2.reduce(
+      (acc, { bind }) => ({ ...acc, [bind]: import_editor_props14.sizePropTypeUtil.create(sizeValue) }),
       {}
     );
   };
@@ -1859,7 +1998,7 @@ function EqualUnequalSizesControl({
       ...multiSizeValue ?? splitEqualValue(),
       ...newValue
     };
-    const isEqual = isEqualSizes(newMappedValues, items);
+    const isEqual = isEqualSizes(newMappedValues, items2);
     if (isEqual) {
       return setSizeValue(Object.values(newMappedValues)[0]?.value);
     }
@@ -1873,25 +2012,25 @@ function EqualUnequalSizesControl({
   };
   const isShowingGeneralIndicator = !(0, import_editor_v1_adapters2.isExperimentActive)("e_v_3_30") || !popupState.isOpen;
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(import_ui26.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React33.createElement(import_ui26.Grid, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React33.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React33.createElement(ControlLabel, null, label)), /* @__PURE__ */ React33.createElement(import_ui26.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_ui26.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React35.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React35.createElement(ControlLabel, null, label)), /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(import_ui28.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React35.createElement(
     SizeControl,
     {
-      placeholder: isMixed ? (0, import_i18n7.__)("Mixed", "elementor") : void 0,
+      placeholder: isMixed ? (0, import_i18n8.__)("Mixed", "elementor") : void 0,
       anchorRef: rowRefs[0]
     }
-  ), /* @__PURE__ */ React33.createElement(import_ui26.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React33.createElement(
-    import_ui26.ToggleButton,
+  ), /* @__PURE__ */ React35.createElement(import_ui28.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React35.createElement(
+    import_ui28.ToggleButton,
     {
       size: "tiny",
       value: "check",
       sx: { marginLeft: "auto" },
-      ...(0, import_ui26.bindToggle)(popupState),
+      ...(0, import_ui28.bindToggle)(popupState),
       selected: popupState.isOpen,
       "aria-label": tooltipLabel
     },
     icon
-  ))))), /* @__PURE__ */ React33.createElement(
-    import_ui26.Popover,
+  ))))), /* @__PURE__ */ React35.createElement(
+    import_ui28.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -1903,12 +2042,12 @@ function EqualUnequalSizesControl({
         vertical: "top",
         horizontal: "right"
       },
-      ...(0, import_ui26.bindPopover)(popupState),
+      ...(0, import_ui28.bindPopover)(popupState),
       slotProps: {
         paper: { sx: { mt: 0.5, width: rowRefs[0].current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React35.createElement(
       PropProvider,
       {
         propType: multiSizePropType,
@@ -1916,37 +2055,37 @@ function EqualUnequalSizesControl({
         setValue: setNestedProp,
         isDisabled: () => multiSizeDisabled
       },
-      /* @__PURE__ */ React33.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React33.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React33.createElement(MultiSizeValueControl, { item: items[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React33.createElement(MultiSizeValueControl, { item: items[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React33.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React33.createElement(MultiSizeValueControl, { item: items[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React33.createElement(MultiSizeValueControl, { item: items[3], rowRef: rowRefs[2] })))
+      /* @__PURE__ */ React35.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React35.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React35.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React35.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React35.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React35.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React35.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
     )
   ));
 }
 var MultiSizeValueControl = ({ item, rowRef }) => {
   const isUsingNestedProps = (0, import_editor_v1_adapters2.isExperimentActive)("e_v_3_30");
-  return /* @__PURE__ */ React33.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React33.createElement(import_ui26.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_ui26.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React33.createElement(import_ui26.Grid, { item: true, xs: 12 }, isUsingNestedProps ? /* @__PURE__ */ React33.createElement(ControlLabel, null, item.label) : /* @__PURE__ */ React33.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React33.createElement(import_ui26.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
+  return /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, isUsingNestedProps ? /* @__PURE__ */ React35.createElement(ControlLabel, null, item.label) : /* @__PURE__ */ React35.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
 };
 
 // src/controls/linked-dimensions-control.tsx
-var React34 = __toESM(require("react"));
-var import_react19 = require("react");
-var import_editor_props14 = require("@elementor/editor-props");
+var React36 = __toESM(require("react"));
+var import_react20 = require("react");
+var import_editor_props15 = require("@elementor/editor-props");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_icons6 = require("@elementor/icons");
-var import_ui27 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_ui29 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 var LinkedDimensionsControl = createControl(
   ({
     label,
     isSiteRtl = false,
     extendedOptions
   }) => {
-    const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props14.sizePropTypeUtil);
-    const gridRowRefs = [(0, import_react19.useRef)(null), (0, import_react19.useRef)(null)];
+    const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props15.sizePropTypeUtil);
+    const gridRowRefs = [(0, import_react20.useRef)(null), (0, import_react20.useRef)(null)];
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
       propType,
       disabled: dimensionsDisabled
-    } = useBoundProp(import_editor_props14.dimensionsPropTypeUtil);
+    } = useBoundProp(import_editor_props15.dimensionsPropTypeUtil);
     const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
     const isUsingNestedProps = (0, import_editor_v1_adapters3.isExperimentActive)("e_v_3_30");
     const onLinkToggle = () => {
@@ -1954,7 +2093,7 @@ var LinkedDimensionsControl = createControl(
         setSizeValue(dimensionsValue["block-start"]?.value ?? null);
         return;
       }
-      const value = sizeValue ? import_editor_props14.sizePropTypeUtil.create(sizeValue) : null;
+      const value = sizeValue ? import_editor_props15.sizePropTypeUtil.create(sizeValue) : null;
       setDimensionsValue({
         "block-start": value,
         "block-end": value,
@@ -1964,10 +2103,10 @@ var LinkedDimensionsControl = createControl(
     };
     const tooltipLabel = label.toLowerCase();
     const LinkedIcon = isLinked ? import_icons6.LinkIcon : import_icons6.DetachIcon;
-    const linkedLabel = (0, import_i18n8.__)("Link %s", "elementor").replace("%s", tooltipLabel);
-    const unlinkedLabel = (0, import_i18n8.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
+    const linkedLabel = (0, import_i18n9.__)("Link %s", "elementor").replace("%s", tooltipLabel);
+    const unlinkedLabel = (0, import_i18n9.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
     const disabled = sizeDisabled || dimensionsDisabled;
-    return /* @__PURE__ */ React34.createElement(
+    return /* @__PURE__ */ React36.createElement(
       PropProvider,
       {
         propType,
@@ -1975,8 +2114,8 @@ var LinkedDimensionsControl = createControl(
         setValue: setDimensionsValue,
         isDisabled: () => disabled
       },
-      /* @__PURE__ */ React34.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React34.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React34.createElement(ControlLabel, null, label), /* @__PURE__ */ React34.createElement(import_ui27.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React34.createElement(
-        import_ui27.ToggleButton,
+      /* @__PURE__ */ React36.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React36.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React36.createElement(ControlLabel, null, label), /* @__PURE__ */ React36.createElement(import_ui29.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React36.createElement(
+        import_ui29.ToggleButton,
         {
           "aria-label": isLinked ? unlinkedLabel : linkedLabel,
           size: "tiny",
@@ -1986,9 +2125,9 @@ var LinkedDimensionsControl = createControl(
           onChange: onLinkToggle,
           disabled
         },
-        /* @__PURE__ */ React34.createElement(LinkedIcon, { fontSize: "tiny" })
+        /* @__PURE__ */ React36.createElement(LinkedIcon, { fontSize: "tiny" })
       ))),
-      getCssMarginProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React34.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React34.createElement(import_ui27.Grid, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(Label, { ...props })), /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(
+      getCssMarginProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React36.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React36.createElement(import_ui29.Grid, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(Label, { ...props })), /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(
         Control3,
         {
           bind: props.bind,
@@ -2009,60 +2148,60 @@ var Control3 = ({
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React34.createElement(SizeControl, { startIcon, extendedOptions, anchorRef });
+    return /* @__PURE__ */ React36.createElement(SizeControl, { startIcon, extendedOptions, anchorRef });
   }
-  return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(SizeControl, { startIcon, extendedOptions, anchorRef }));
+  return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon, extendedOptions, anchorRef }));
 };
 var Label = ({ label, bind }) => {
   const isUsingNestedProps = (0, import_editor_v1_adapters3.isExperimentActive)("e_v_3_30");
   if (!isUsingNestedProps) {
-    return /* @__PURE__ */ React34.createElement(ControlFormLabel, null, label);
+    return /* @__PURE__ */ React36.createElement(ControlFormLabel, null, label);
   }
-  return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(ControlLabel, null, label));
+  return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React36.createElement(ControlLabel, null, label));
 };
 function getCssMarginProps(isSiteRtl) {
   return [
     [
       {
         bind: "block-start",
-        label: (0, import_i18n8.__)("Top", "elementor"),
-        icon: /* @__PURE__ */ React34.createElement(import_icons6.SideTopIcon, { fontSize: "tiny" })
+        label: (0, import_i18n9.__)("Top", "elementor"),
+        icon: /* @__PURE__ */ React36.createElement(import_icons6.SideTopIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-end",
-        label: isSiteRtl ? (0, import_i18n8.__)("Left", "elementor") : (0, import_i18n8.__)("Right", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React34.createElement(import_icons6.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React34.createElement(import_icons6.SideRightIcon, { fontSize: "tiny" })
+        label: isSiteRtl ? (0, import_i18n9.__)("Left", "elementor") : (0, import_i18n9.__)("Right", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React36.createElement(import_icons6.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React36.createElement(import_icons6.SideRightIcon, { fontSize: "tiny" })
       }
     ],
     [
       {
         bind: "block-end",
-        label: (0, import_i18n8.__)("Bottom", "elementor"),
-        icon: /* @__PURE__ */ React34.createElement(import_icons6.SideBottomIcon, { fontSize: "tiny" })
+        label: (0, import_i18n9.__)("Bottom", "elementor"),
+        icon: /* @__PURE__ */ React36.createElement(import_icons6.SideBottomIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-start",
-        label: isSiteRtl ? (0, import_i18n8.__)("Right", "elementor") : (0, import_i18n8.__)("Left", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React34.createElement(import_icons6.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React34.createElement(import_icons6.SideLeftIcon, { fontSize: "tiny" })
+        label: isSiteRtl ? (0, import_i18n9.__)("Right", "elementor") : (0, import_i18n9.__)("Left", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React36.createElement(import_icons6.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React36.createElement(import_icons6.SideLeftIcon, { fontSize: "tiny" })
       }
     ]
   ];
 }
 
 // src/controls/font-family-control/font-family-control.tsx
-var React36 = __toESM(require("react"));
-var import_editor_props15 = require("@elementor/editor-props");
+var React38 = __toESM(require("react"));
+var import_editor_props16 = require("@elementor/editor-props");
 var import_icons8 = require("@elementor/icons");
-var import_ui29 = require("@elementor/ui");
+var import_ui31 = require("@elementor/ui");
 
 // src/components/font-family-selector.tsx
-var React35 = __toESM(require("react"));
-var import_react20 = require("react");
+var React37 = __toESM(require("react"));
+var import_react21 = require("react");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
-var import_ui28 = require("@elementor/ui");
+var import_ui30 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/controls/font-family-control/enqueue-font.tsx
 var enqueueFont = (fontFamily, context = "editor") => {
@@ -2095,7 +2234,7 @@ var FontFamilySelector = ({
   onClose,
   sectionWidth
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react20.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react21.useState)("");
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
   const handleSearch = (value) => {
     setSearchValue(value);
@@ -2104,21 +2243,21 @@ var FontFamilySelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__PURE__ */ React35.createElement(import_ui28.Stack, null, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(import_editor_ui4.PopoverBody, { width: sectionWidth }, /* @__PURE__ */ React37.createElement(
     import_editor_ui4.PopoverHeader,
     {
-      title: (0, import_i18n9.__)("Font Family", "elementor"),
+      title: (0, import_i18n10.__)("Font Family", "elementor"),
       onClose: handleClose,
-      icon: /* @__PURE__ */ React35.createElement(import_icons7.TextIcon, { fontSize: SIZE2 })
+      icon: /* @__PURE__ */ React37.createElement(import_icons7.TextIcon, { fontSize: SIZE2 })
     }
-  ), /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React37.createElement(
     import_editor_ui4.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: (0, import_i18n9.__)("Search", "elementor")
+      placeholder: (0, import_i18n10.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React35.createElement(import_ui28.Divider, null), /* @__PURE__ */ React35.createElement(import_editor_ui4.PopoverScrollableContent, { width: sectionWidth }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React37.createElement(import_ui30.Divider, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React37.createElement(
     FontList,
     {
       fontListItems: filteredFontFamilies,
@@ -2126,8 +2265,8 @@ var FontFamilySelector = ({
       handleClose,
       fontFamily
     }
-  ) : /* @__PURE__ */ React35.createElement(
-    import_ui28.Stack,
+  ) : /* @__PURE__ */ React37.createElement(
+    import_ui30.Stack,
     {
       alignItems: "center",
       justifyContent: "center",
@@ -2136,9 +2275,9 @@ var FontFamilySelector = ({
       gap: 1.5,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React35.createElement(import_icons7.TextIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React35.createElement(import_ui28.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React35.createElement(import_ui28.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n9.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React35.createElement(
-      import_ui28.Typography,
+    /* @__PURE__ */ React37.createElement(import_icons7.TextIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React37.createElement(import_ui30.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React37.createElement(import_ui30.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n10.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React37.createElement(
+      import_ui30.Typography,
       {
         variant: "subtitle2",
         color: "text.secondary",
@@ -2148,31 +2287,31 @@ var FontFamilySelector = ({
           justifyContent: "center"
         }
       },
-      /* @__PURE__ */ React35.createElement("span", null, "\u201C"),
-      /* @__PURE__ */ React35.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
-      /* @__PURE__ */ React35.createElement("span", null, "\u201D.")
+      /* @__PURE__ */ React37.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React37.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
+      /* @__PURE__ */ React37.createElement("span", null, "\u201D.")
     )),
-    /* @__PURE__ */ React35.createElement(
-      import_ui28.Typography,
+    /* @__PURE__ */ React37.createElement(
+      import_ui30.Typography,
       {
         align: "center",
         variant: "caption",
         color: "text.secondary",
         sx: { display: "flex", flexDirection: "column" }
       },
-      (0, import_i18n9.__)("Try something else.", "elementor"),
-      /* @__PURE__ */ React35.createElement(
-        import_ui28.Link,
+      (0, import_i18n10.__)("Try something else.", "elementor"),
+      /* @__PURE__ */ React37.createElement(
+        import_ui30.Link,
         {
           color: "secondary",
           variant: "caption",
           component: "button",
           onClick: () => setSearchValue("")
         },
-        (0, import_i18n9.__)("Clear & try again", "elementor")
+        (0, import_i18n10.__)("Clear & try again", "elementor")
       )
     )
-  )));
+  ));
 };
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
@@ -2184,7 +2323,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
       }
     });
   }, 100);
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     import_editor_ui4.PopoverMenuList,
     {
       items: fontListItems,
@@ -2198,24 +2337,24 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react20.useState)(() => (0, import_utils2.debounce)(fn, delay));
-  (0, import_react20.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react21.useState)(() => (0, import_utils2.debounce)(fn, delay));
+  (0, import_react21.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
 // src/controls/font-family-control/font-family-control.tsx
 var SIZE3 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
-  const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp(import_editor_props15.stringPropTypeUtil);
-  const popoverState = (0, import_ui29.usePopupState)({ variant: "popover" });
+  const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp(import_editor_props16.stringPropTypeUtil);
+  const popoverState = (0, import_ui31.usePopupState)({ variant: "popover" });
   const isShowingPlaceholder = !fontFamily && placeholder;
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(ControlActions, null, /* @__PURE__ */ React36.createElement(
-    import_ui29.UnstableTag,
+  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(
+    import_ui31.UnstableTag,
     {
       variant: "outlined",
       label: fontFamily || placeholder,
-      endIcon: /* @__PURE__ */ React36.createElement(import_icons8.ChevronDownIcon, { fontSize: SIZE3 }),
-      ...(0, import_ui29.bindTrigger)(popoverState),
+      endIcon: /* @__PURE__ */ React38.createElement(import_icons8.ChevronDownIcon, { fontSize: SIZE3 }),
+      ...(0, import_ui31.bindTrigger)(popoverState),
       fullWidth: true,
       disabled,
       sx: isShowingPlaceholder ? {
@@ -2225,17 +2364,17 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
         textTransform: "capitalize"
       } : void 0
     }
-  )), /* @__PURE__ */ React36.createElement(
-    import_ui29.Popover,
+  )), /* @__PURE__ */ React38.createElement(
+    import_ui31.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },
       sx: { my: 1.5 },
-      ...(0, import_ui29.bindPopover)(popoverState)
+      ...(0, import_ui31.bindPopover)(popoverState)
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React38.createElement(
       FontFamilySelector,
       {
         fontFamilies,
@@ -2249,14 +2388,14 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
 });
 
 // src/controls/url-control.tsx
-var React37 = __toESM(require("react"));
-var import_editor_props16 = require("@elementor/editor-props");
-var import_ui30 = require("@elementor/ui");
+var React39 = __toESM(require("react"));
+var import_editor_props17 = require("@elementor/editor-props");
+var import_ui32 = require("@elementor/ui");
 var UrlControl = createControl(({ placeholder }) => {
-  const { value, setValue, disabled } = useBoundProp(import_editor_props16.urlPropTypeUtil);
+  const { value, setValue, disabled } = useBoundProp(import_editor_props17.urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React37.createElement(ControlActions, null, /* @__PURE__ */ React37.createElement(
-    import_ui30.TextField,
+  return /* @__PURE__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(
+    import_ui32.TextField,
     {
       size: "tiny",
       fullWidth: true,
@@ -2269,25 +2408,25 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-var React40 = __toESM(require("react"));
-var import_react22 = require("react");
+var React42 = __toESM(require("react"));
+var import_react23 = require("react");
 var import_editor_elements = require("@elementor/editor-elements");
-var import_editor_props18 = require("@elementor/editor-props");
+var import_editor_props19 = require("@elementor/editor-props");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_http_client2 = require("@elementor/http-client");
 var import_icons10 = require("@elementor/icons");
 var import_session = require("@elementor/session");
-var import_ui33 = require("@elementor/ui");
+var import_ui35 = require("@elementor/ui");
 var import_utils3 = require("@elementor/utils");
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
-var React38 = __toESM(require("react"));
-var import_react21 = require("react");
+var React40 = __toESM(require("react"));
+var import_react22 = require("react");
 var import_icons9 = require("@elementor/icons");
-var import_ui31 = require("@elementor/ui");
-var Autocomplete = (0, import_react21.forwardRef)((props, ref) => {
+var import_ui33 = require("@elementor/ui");
+var Autocomplete = (0, import_react22.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -2303,8 +2442,8 @@ var Autocomplete = (0, import_react21.forwardRef)((props, ref) => {
   const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
   const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
   const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
-  return /* @__PURE__ */ React38.createElement(
-    import_ui31.Autocomplete,
+  return /* @__PURE__ */ React40.createElement(
+    import_ui33.Autocomplete,
     {
       ...restProps,
       ref,
@@ -2321,8 +2460,8 @@ var Autocomplete = (0, import_react21.forwardRef)((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React38.createElement(import_ui31.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React38.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React40.createElement(import_ui33.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React40.createElement(
         TextInput,
         {
           params,
@@ -2345,8 +2484,8 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React38.createElement(
-    import_ui31.TextField,
+  return /* @__PURE__ */ React40.createElement(
+    import_ui33.TextField,
     {
       ...params,
       placeholder,
@@ -2358,7 +2497,7 @@ var TextInput = ({
       },
       InputProps: {
         ...params.InputProps,
-        endAdornment: /* @__PURE__ */ React38.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React40.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -2367,7 +2506,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React38.createElement(import_ui31.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React38.createElement(import_ui31.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React38.createElement(import_icons9.XIcon, { fontSize: params.size })));
+}) => /* @__PURE__ */ React40.createElement(import_ui33.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React40.createElement(import_ui33.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React40.createElement(import_icons9.XIcon, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -2389,16 +2528,16 @@ function _factoryFilter(newValue, options, minInputLength) {
 }
 
 // src/controls/switch-control.tsx
-var React39 = __toESM(require("react"));
-var import_editor_props17 = require("@elementor/editor-props");
-var import_ui32 = require("@elementor/ui");
+var React41 = __toESM(require("react"));
+var import_editor_props18 = require("@elementor/editor-props");
+var import_ui34 = require("@elementor/ui");
 var SwitchControl = createControl(() => {
-  const { value, setValue, disabled } = useBoundProp(import_editor_props17.booleanPropTypeUtil);
+  const { value, setValue, disabled } = useBoundProp(import_editor_props18.booleanPropTypeUtil);
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React39.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React39.createElement(
-    import_ui32.Switch,
+  return /* @__PURE__ */ React41.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(
+    import_ui34.Switch,
     {
       checked: !!value,
       onChange: handleChange,
@@ -2414,23 +2553,23 @@ var SwitchControl = createControl(() => {
 // src/controls/link-control.tsx
 var SIZE4 = "tiny";
 var learnMoreButton = {
-  label: (0, import_i18n10.__)("Learn More", "elementor"),
+  label: (0, import_i18n11.__)("Learn More", "elementor"),
   href: "https://go.elementor.com/element-link-inside-link-infotip"
 };
 var LinkControl = createControl((props) => {
-  const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props18.linkPropTypeUtil);
+  const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props19.linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isActive, setIsActive] = (0, import_react22.useState)(!!value);
+  const [isActive, setIsActive] = (0, import_react23.useState)(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
     placeholder,
     minInputLength = 2,
     context: { elementId },
-    label = (0, import_i18n10.__)("Link", "elementor")
+    label = (0, import_i18n11.__)("Link", "elementor")
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react22.useState)((0, import_editor_elements.getLinkInLinkRestriction)(elementId));
-  const [options, setOptions] = (0, import_react22.useState)(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react23.useState)((0, import_editor_elements.getLinkInLinkRestriction)(elementId));
+  const [options, setOptions] = (0, import_react23.useState)(
     generateFirstLoadedOption(value)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
@@ -2455,8 +2594,8 @@ var LinkControl = createControl((props) => {
   const onOptionChange = (newValue) => {
     const valueToSave = newValue ? {
       ...value,
-      destination: import_editor_props18.numberPropTypeUtil.create(newValue),
-      label: import_editor_props18.stringPropTypeUtil.create(findMatchingOption(options, newValue)?.label || null)
+      destination: import_editor_props19.numberPropTypeUtil.create(newValue),
+      label: import_editor_props19.stringPropTypeUtil.create(findMatchingOption(options, newValue)?.label || null)
     } : null;
     onSaveNewValue(valueToSave);
   };
@@ -2464,8 +2603,8 @@ var LinkControl = createControl((props) => {
     newValue = newValue?.trim() || "";
     const valueToSave = newValue ? {
       ...value,
-      destination: import_editor_props18.urlPropTypeUtil.create(newValue),
-      label: import_editor_props18.stringPropTypeUtil.create("")
+      destination: import_editor_props19.urlPropTypeUtil.create(newValue),
+      label: import_editor_props19.stringPropTypeUtil.create("")
     } : null;
     onSaveNewValue(valueToSave);
     updateOptions(newValue);
@@ -2481,7 +2620,7 @@ var LinkControl = createControl((props) => {
     }
     debounceFetch({ ...requestParams, term: newValue });
   };
-  const debounceFetch = (0, import_react22.useMemo)(
+  const debounceFetch = (0, import_react23.useMemo)(
     () => (0, import_utils3.debounce)(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -2490,8 +2629,8 @@ var LinkControl = createControl((props) => {
     ),
     [endpoint]
   );
-  return /* @__PURE__ */ React40.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React40.createElement(import_ui33.Stack, { gap: 1.5 }, /* @__PURE__ */ React40.createElement(
-    import_ui33.Stack,
+  return /* @__PURE__ */ React42.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React42.createElement(import_ui35.Stack, { gap: 1.5 }, /* @__PURE__ */ React42.createElement(
+    import_ui35.Stack,
     {
       direction: "row",
       sx: {
@@ -2500,17 +2639,17 @@ var LinkControl = createControl((props) => {
         marginInlineEnd: -0.75
       }
     },
-    /* @__PURE__ */ React40.createElement(ControlFormLabel, null, label),
-    /* @__PURE__ */ React40.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React42.createElement(ControlFormLabel, null, label),
+    /* @__PURE__ */ React42.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React42.createElement(
       ToggleIconControl,
       {
         disabled: shouldDisableAddingLink,
         active: isActive,
         onIconClick: onEnabledChange,
-        label: (0, import_i18n10.__)("Toggle link", "elementor")
+        label: (0, import_i18n11.__)("Toggle link", "elementor")
       }
     ))
-  ), /* @__PURE__ */ React40.createElement(import_ui33.Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React40.createElement(import_ui33.Stack, { gap: 1.5 }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(
+  ), /* @__PURE__ */ React42.createElement(import_ui35.Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React42.createElement(import_ui35.Stack, { gap: 1.5 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React42.createElement(ControlActions, null, /* @__PURE__ */ React42.createElement(
     Autocomplete,
     {
       options,
@@ -2521,22 +2660,22 @@ var LinkControl = createControl((props) => {
       onTextChange,
       minInputLength
     }
-  ))), /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true }, /* @__PURE__ */ React40.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React40.createElement(SwitchControlComponent, { disabled: propContext.disabled || !value }))))))));
+  ))), /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, (0, import_i18n11.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React42.createElement(SwitchControlComponent, { disabled: propContext.disabled || !value }))))))));
 });
 var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
-  return /* @__PURE__ */ React40.createElement(import_ui33.IconButton, { size: SIZE4, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React40.createElement(import_icons10.MinusIcon, { fontSize: SIZE4 }) : /* @__PURE__ */ React40.createElement(import_icons10.PlusIcon, { fontSize: SIZE4 }));
+  return /* @__PURE__ */ React42.createElement(import_ui35.IconButton, { size: SIZE4, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React42.createElement(import_icons10.MinusIcon, { fontSize: SIZE4 }) : /* @__PURE__ */ React42.createElement(import_icons10.PlusIcon, { fontSize: SIZE4 }));
 };
 var SwitchControlComponent = ({ disabled }) => {
-  const { value, setValue } = useBoundProp(import_editor_props18.booleanPropTypeUtil);
+  const { value, setValue } = useBoundProp(import_editor_props19.booleanPropTypeUtil);
   const isVersion331Active = (0, import_editor_v1_adapters4.isExperimentActive)("e_v_3_31");
   if (isVersion331Active) {
-    return /* @__PURE__ */ React40.createElement(SwitchControl, null);
+    return /* @__PURE__ */ React42.createElement(SwitchControl, null);
   }
   const onClick = () => {
     setValue(!value);
   };
-  return /* @__PURE__ */ React40.createElement(
-    import_ui33.Switch,
+  return /* @__PURE__ */ React42.createElement(
+    import_ui35.Switch,
     {
       checked: value ?? false,
       onClick,
@@ -2582,54 +2721,54 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
       (0, import_editor_elements.selectElement)(elementId);
     }
   };
-  return shouldRestrict && isVisible ? /* @__PURE__ */ React40.createElement(
-    import_ui33.Infotip,
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React42.createElement(
+    import_ui35.Infotip,
     {
       placement: "right",
-      content: /* @__PURE__ */ React40.createElement(
+      content: /* @__PURE__ */ React42.createElement(
         import_editor_ui5.InfoTipCard,
         {
           content: INFOTIP_CONTENT[reason],
-          svgIcon: /* @__PURE__ */ React40.createElement(import_icons10.AlertTriangleIcon, null),
+          svgIcon: /* @__PURE__ */ React42.createElement(import_icons10.AlertTriangleIcon, null),
           learnMoreButton,
           ctaButton: {
-            label: (0, import_i18n10.__)("Take me there", "elementor"),
+            label: (0, import_i18n11.__)("Take me there", "elementor"),
             onClick: handleTakeMeClick
           }
         }
       )
     },
-    /* @__PURE__ */ React40.createElement(import_ui33.Box, null, children)
-  ) : /* @__PURE__ */ React40.createElement(React40.Fragment, null, children);
+    /* @__PURE__ */ React42.createElement(import_ui35.Box, null, children)
+  ) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, children);
 };
 var INFOTIP_CONTENT = {
-  descendant: /* @__PURE__ */ React40.createElement(React40.Fragment, null, (0, import_i18n10.__)("To add a link to this container,", "elementor"), /* @__PURE__ */ React40.createElement("br", null), (0, import_i18n10.__)("first remove the link from the elements inside of it.", "elementor")),
-  ancestor: /* @__PURE__ */ React40.createElement(React40.Fragment, null, (0, import_i18n10.__)("To add a link to this element,", "elementor"), /* @__PURE__ */ React40.createElement("br", null), (0, import_i18n10.__)("first remove the link from its parent container.", "elementor"))
+  descendant: /* @__PURE__ */ React42.createElement(React42.Fragment, null, (0, import_i18n11.__)("To add a link to this container,", "elementor"), /* @__PURE__ */ React42.createElement("br", null), (0, import_i18n11.__)("first remove the link from the elements inside of it.", "elementor")),
+  ancestor: /* @__PURE__ */ React42.createElement(React42.Fragment, null, (0, import_i18n11.__)("To add a link to this element,", "elementor"), /* @__PURE__ */ React42.createElement("br", null), (0, import_i18n11.__)("first remove the link from its parent container.", "elementor"))
 };
 
 // src/controls/gap-control.tsx
-var React41 = __toESM(require("react"));
-var import_react23 = require("react");
-var import_editor_props19 = require("@elementor/editor-props");
+var React43 = __toESM(require("react"));
+var import_react24 = require("react");
+var import_editor_props20 = require("@elementor/editor-props");
 var import_icons11 = require("@elementor/icons");
-var import_ui34 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_ui36 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 var GapControl = createControl(({ label }) => {
   const {
     value: directionValue,
     setValue: setDirectionValue,
     propType,
     disabled: directionDisabled
-  } = useBoundProp(import_editor_props19.layoutDirectionPropTypeUtil);
-  const stackRef = (0, import_react23.useRef)(null);
-  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props19.sizePropTypeUtil);
+  } = useBoundProp(import_editor_props20.layoutDirectionPropTypeUtil);
+  const stackRef = (0, import_react24.useRef)(null);
+  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props20.sizePropTypeUtil);
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
     if (!isLinked) {
       setSizeValue(directionValue?.column?.value ?? null);
       return;
     }
-    const value = sizeValue ? import_editor_props19.sizePropTypeUtil.create(sizeValue) : null;
+    const value = sizeValue ? import_editor_props20.sizePropTypeUtil.create(sizeValue) : null;
     setDirectionValue({
       row: value,
       column: value
@@ -2637,11 +2776,11 @@ var GapControl = createControl(({ label }) => {
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? import_icons11.LinkIcon : import_icons11.DetachIcon;
-  const linkedLabel = (0, import_i18n11.__)("Link %s", "elementor").replace("%s", tooltipLabel);
-  const unlinkedLabel = (0, import_i18n11.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  const linkedLabel = (0, import_i18n12.__)("Link %s", "elementor").replace("%s", tooltipLabel);
+  const unlinkedLabel = (0, import_i18n12.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
-  return /* @__PURE__ */ React41.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React41.createElement(import_ui34.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(ControlLabel, null, label), /* @__PURE__ */ React41.createElement(import_ui34.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React41.createElement(
-    import_ui34.ToggleButton,
+  return /* @__PURE__ */ React43.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React43.createElement(import_ui36.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(ControlLabel, null, label), /* @__PURE__ */ React43.createElement(import_ui36.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React43.createElement(
+    import_ui36.ToggleButton,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
       size: "tiny",
@@ -2651,8 +2790,8 @@ var GapControl = createControl(({ label }) => {
       onChange: onLinkToggle,
       disabled
     },
-    /* @__PURE__ */ React41.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React41.createElement(import_ui34.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, (0, import_i18n11.__)("Column", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React41.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React41.createElement(import_ui34.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, (0, import_i18n11.__)("Row", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React41.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
+    /* @__PURE__ */ React43.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React43.createElement(import_ui36.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, (0, import_i18n12.__)("Column", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, (0, import_i18n12.__)("Row", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
 });
 var Control4 = ({
   bind,
@@ -2660,21 +2799,21 @@ var Control4 = ({
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React41.createElement(SizeControl, { anchorRef });
+    return /* @__PURE__ */ React43.createElement(SizeControl, { anchorRef });
   }
-  return /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React41.createElement(SizeControl, { anchorRef }));
+  return /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React43.createElement(SizeControl, { anchorRef }));
 };
 
 // src/controls/aspect-ratio-control.tsx
-var React42 = __toESM(require("react"));
-var import_react24 = require("react");
-var import_editor_props20 = require("@elementor/editor-props");
+var React44 = __toESM(require("react"));
+var import_react25 = require("react");
+var import_editor_props21 = require("@elementor/editor-props");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons12 = require("@elementor/icons");
-var import_ui35 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_ui37 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
 var RATIO_OPTIONS = [
-  { label: (0, import_i18n12.__)("Auto", "elementor"), value: "auto" },
+  { label: (0, import_i18n13.__)("Auto", "elementor"), value: "auto" },
   { label: "1/1", value: "1/1" },
   { label: "4/3", value: "4/3" },
   { label: "3/4", value: "3/4" },
@@ -2685,16 +2824,16 @@ var RATIO_OPTIONS = [
 ];
 var CUSTOM_RATIO = "custom";
 var AspectRatioControl = createControl(({ label }) => {
-  const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(import_editor_props20.stringPropTypeUtil);
+  const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(import_editor_props21.stringPropTypeUtil);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
-  const [isCustom, setIsCustom] = (0, import_react24.useState)(isCustomSelected);
-  const [customWidth, setCustomWidth] = (0, import_react24.useState)(initialWidth);
-  const [customHeight, setCustomHeight] = (0, import_react24.useState)(initialHeight);
-  const [selectedValue, setSelectedValue] = (0, import_react24.useState)(
+  const [isCustom, setIsCustom] = (0, import_react25.useState)(isCustomSelected);
+  const [customWidth, setCustomWidth] = (0, import_react25.useState)(initialWidth);
+  const [customHeight, setCustomHeight] = (0, import_react25.useState)(initialHeight);
+  const [selectedValue, setSelectedValue] = (0, import_react25.useState)(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -2733,8 +2872,8 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
-  return /* @__PURE__ */ React42.createElement(ControlActions, null, /* @__PURE__ */ React42.createElement(import_ui35.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlLabel, null, label)), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(
-    import_ui35.Select,
+  return /* @__PURE__ */ React44.createElement(ControlActions, null, /* @__PURE__ */ React44.createElement(import_ui37.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlLabel, null, label)), /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
+    import_ui37.Select,
     {
       size: "tiny",
       displayEmpty: true,
@@ -2744,11 +2883,11 @@ var AspectRatioControl = createControl(({ label }) => {
       onChange: handleSelectChange,
       fullWidth: true
     },
-    [...RATIO_OPTIONS, { label: (0, import_i18n12.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
-      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React42.createElement(import_editor_ui6.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+    [...RATIO_OPTIONS, { label: (0, import_i18n13.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React44.createElement(import_editor_ui6.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
-  ))), isCustom && /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(
-    import_ui35.TextField,
+  ))), isCustom && /* @__PURE__ */ React44.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
+    import_ui37.TextField,
     {
       size: "tiny",
       type: "number",
@@ -2757,11 +2896,11 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customWidth,
       onChange: handleCustomWidthChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React42.createElement(import_icons12.ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React44.createElement(import_icons12.ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
       }
     }
-  )), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(
-    import_ui35.TextField,
+  )), /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
+    import_ui37.TextField,
     {
       size: "tiny",
       type: "number",
@@ -2770,39 +2909,39 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customHeight,
       onChange: handleCustomHeightChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React42.createElement(import_icons12.ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React44.createElement(import_icons12.ArrowsMoveVerticalIcon, { fontSize: "tiny" })
       }
     }
   )))));
 });
 
 // src/controls/svg-media-control.tsx
-var React44 = __toESM(require("react"));
-var import_react26 = require("react");
-var import_editor_props21 = require("@elementor/editor-props");
+var React46 = __toESM(require("react"));
+var import_react27 = require("react");
+var import_editor_props22 = require("@elementor/editor-props");
 var import_icons13 = require("@elementor/icons");
-var import_ui37 = require("@elementor/ui");
+var import_ui39 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
-var React43 = __toESM(require("react"));
-var import_react25 = require("react");
+var React45 = __toESM(require("react"));
+var import_react26 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
-var import_ui36 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
-var ADMIN_TITLE_TEXT = (0, import_i18n13.__)("Enable Unfiltered Uploads", "elementor");
-var ADMIN_CONTENT_TEXT = (0, import_i18n13.__)(
+var import_ui38 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
+var ADMIN_TITLE_TEXT = (0, import_i18n14.__)("Enable Unfiltered Uploads", "elementor");
+var ADMIN_CONTENT_TEXT = (0, import_i18n14.__)(
   "Before you enable unfiltered files upload, note that such files include a security risk. Elementor does run a process to remove possible malicious code, but there is still risk involved when using such files.",
   "elementor"
 );
-var NON_ADMIN_TITLE_TEXT = (0, import_i18n13.__)("Sorry, you can't upload that file yet", "elementor");
-var NON_ADMIN_CONTENT_TEXT = (0, import_i18n13.__)(
+var NON_ADMIN_TITLE_TEXT = (0, import_i18n14.__)("Sorry, you can't upload that file yet", "elementor");
+var NON_ADMIN_CONTENT_TEXT = (0, import_i18n14.__)(
   "This is because this file type may pose a security risk. To upload them anyway, ask the site administrator to enable unfiltered file uploads.",
   "elementor"
 );
-var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0, import_i18n13.__)("Failed to enable unfiltered files upload.", "elementor");
-var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n13.__)(
+var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0, import_i18n14.__)("Failed to enable unfiltered files upload.", "elementor");
+var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n14.__)(
   "You can try again, if the problem persists, please contact support.",
   "elementor"
 );
@@ -2810,7 +2949,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
   const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
-  const [isError, setIsError] = (0, import_react25.useState)(false);
+  const [isError, setIsError] = (0, import_react26.useState)(false);
   const canManageOptions = canUser("manage_options");
   const onClose = (enabled) => {
     props.onClose(enabled);
@@ -2829,10 +2968,10 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return canManageOptions ? /* @__PURE__ */ React43.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React43.createElement(NonAdminDialog, { ...dialogProps });
+  return canManageOptions ? /* @__PURE__ */ React45.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React45.createElement(NonAdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React43.createElement(import_ui36.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React43.createElement(import_ui36.DialogHeader, { logo: false }, /* @__PURE__ */ React43.createElement(import_ui36.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React43.createElement(import_ui36.Divider, null), /* @__PURE__ */ React43.createElement(import_ui36.DialogContent, null, /* @__PURE__ */ React43.createElement(import_ui36.DialogContentText, null, isError ? /* @__PURE__ */ React43.createElement(React43.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React43.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React43.createElement(import_ui36.DialogActions, null, /* @__PURE__ */ React43.createElement(import_ui36.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n13.__)("Cancel", "elementor")), /* @__PURE__ */ React43.createElement(
-  import_ui36.Button,
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React45.createElement(import_ui38.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React45.createElement(import_ui38.DialogHeader, { logo: false }, /* @__PURE__ */ React45.createElement(import_ui38.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React45.createElement(import_ui38.Divider, null), /* @__PURE__ */ React45.createElement(import_ui38.DialogContent, null, /* @__PURE__ */ React45.createElement(import_ui38.DialogContentText, null, isError ? /* @__PURE__ */ React45.createElement(React45.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React45.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React45.createElement(import_ui38.DialogActions, null, /* @__PURE__ */ React45.createElement(import_ui38.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n14.__)("Cancel", "elementor")), /* @__PURE__ */ React45.createElement(
+  import_ui38.Button,
   {
     size: "medium",
     onClick: () => handleEnable(),
@@ -2840,16 +2979,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React43.createElement(import_ui36.CircularProgress, { size: 24 }) : (0, import_i18n13.__)("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React45.createElement(import_ui38.CircularProgress, { size: 24 }) : (0, import_i18n14.__)("Enable", "elementor")
 )));
-var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React43.createElement(import_ui36.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React43.createElement(import_ui36.DialogHeader, { logo: false }, /* @__PURE__ */ React43.createElement(import_ui36.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React43.createElement(import_ui36.Divider, null), /* @__PURE__ */ React43.createElement(import_ui36.DialogContent, null, /* @__PURE__ */ React43.createElement(import_ui36.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React43.createElement(import_ui36.DialogActions, null, /* @__PURE__ */ React43.createElement(import_ui36.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n13.__)("Got it", "elementor"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React45.createElement(import_ui38.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React45.createElement(import_ui38.DialogHeader, { logo: false }, /* @__PURE__ */ React45.createElement(import_ui38.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React45.createElement(import_ui38.Divider, null), /* @__PURE__ */ React45.createElement(import_ui38.DialogContent, null, /* @__PURE__ */ React45.createElement(import_ui38.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React45.createElement(import_ui38.DialogActions, null, /* @__PURE__ */ React45.createElement(import_ui38.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n14.__)("Got it", "elementor"))));
 
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
-var StyledCard = (0, import_ui37.styled)(import_ui37.Card)`
+var StyledCard = (0, import_ui39.styled)(import_ui39.Card)`
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -2858,7 +2997,7 @@ var StyledCard = (0, import_ui37.styled)(import_ui37.Card)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = (0, import_ui37.styled)(import_ui37.Stack)`
+var StyledCardMediaContainer = (0, import_ui39.styled)(import_ui39.Stack)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -2870,12 +3009,12 @@ var StyledCardMediaContainer = (0, import_ui37.styled)(import_ui37.Stack)`
 var MODE_BROWSE = { mode: "browse" };
 var MODE_UPLOAD = { mode: "upload" };
 var SvgMediaControl = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props21.imageSrcPropTypeUtil);
+  const { value, setValue } = useBoundProp(import_editor_props22.imageSrcPropTypeUtil);
   const { id, url } = value ?? {};
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react26.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react27.useState)(false);
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
     multiple: false,
@@ -2903,16 +3042,16 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
-  return /* @__PURE__ */ React44.createElement(import_ui37.Stack, { gap: 1 }, /* @__PURE__ */ React44.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React44.createElement(ControlActions, null, /* @__PURE__ */ React44.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React44.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React44.createElement(import_ui37.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React44.createElement(
-    import_ui37.CardMedia,
+  return /* @__PURE__ */ React46.createElement(import_ui39.Stack, { gap: 1 }, /* @__PURE__ */ React46.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React46.createElement(ControlActions, null, /* @__PURE__ */ React46.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React46.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React46.createElement(import_ui39.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React46.createElement(
+    import_ui39.CardMedia,
     {
       component: "img",
       image: src,
-      alt: (0, import_i18n14.__)("Preview SVG", "elementor"),
+      alt: (0, import_i18n15.__)("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React44.createElement(
-    import_ui37.CardOverlay,
+  )), /* @__PURE__ */ React46.createElement(
+    import_ui39.CardOverlay,
     {
       sx: {
         "&:hover": {
@@ -2920,69 +3059,69 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React44.createElement(import_ui37.Stack, { gap: 1 }, /* @__PURE__ */ React44.createElement(
-      import_ui37.Button,
+    /* @__PURE__ */ React46.createElement(import_ui39.Stack, { gap: 1 }, /* @__PURE__ */ React46.createElement(
+      import_ui39.Button,
       {
         size: "tiny",
         color: "inherit",
         variant: "outlined",
         onClick: () => handleClick(MODE_BROWSE)
       },
-      (0, import_i18n14.__)("Select SVG", "elementor")
-    ), /* @__PURE__ */ React44.createElement(
-      import_ui37.Button,
+      (0, import_i18n15.__)("Select SVG", "elementor")
+    ), /* @__PURE__ */ React46.createElement(
+      import_ui39.Button,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React44.createElement(import_icons13.UploadIcon, null),
+        startIcon: /* @__PURE__ */ React46.createElement(import_icons13.UploadIcon, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
-      (0, import_i18n14.__)("Upload", "elementor")
+      (0, import_i18n15.__)("Upload", "elementor")
     ))
   ))));
 });
 
 // src/controls/background-control/background-control.tsx
-var React51 = __toESM(require("react"));
-var import_editor_props27 = require("@elementor/editor-props");
+var React53 = __toESM(require("react"));
+var import_editor_props28 = require("@elementor/editor-props");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_ui45 = require("@elementor/ui");
-var import_i18n20 = require("@wordpress/i18n");
+var import_ui47 = require("@elementor/ui");
+var import_i18n21 = require("@wordpress/i18n");
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-var React50 = __toESM(require("react"));
-var import_editor_props26 = require("@elementor/editor-props");
-var import_ui44 = require("@elementor/ui");
+var React52 = __toESM(require("react"));
+var import_editor_props27 = require("@elementor/editor-props");
+var import_ui46 = require("@elementor/ui");
 var import_wp_media3 = require("@elementor/wp-media");
-var import_i18n19 = require("@wordpress/i18n");
+var import_i18n20 = require("@wordpress/i18n");
 
 // src/env.ts
 var import_env = require("@elementor/env");
 var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-var React45 = __toESM(require("react"));
-var import_editor_props22 = require("@elementor/editor-props");
-var import_ui38 = require("@elementor/ui");
+var React47 = __toESM(require("react"));
+var import_editor_props23 = require("@elementor/editor-props");
+var import_ui40 = require("@elementor/ui");
 var BackgroundGradientColorControl = createControl(() => {
-  const { value, setValue } = useBoundProp(import_editor_props22.backgroundGradientOverlayPropTypeUtil);
+  const { value, setValue } = useBoundProp(import_editor_props23.backgroundGradientOverlayPropTypeUtil);
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = import_editor_props22.stringPropTypeUtil.create(newValue.positions.join(" "));
+      transformedValue.positions = import_editor_props23.stringPropTypeUtil.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: import_editor_props22.stringPropTypeUtil.create(newValue.type),
-    angle: import_editor_props22.numberPropTypeUtil.create(newValue.angle),
-    stops: import_editor_props22.gradientColorStopPropTypeUtil.create(
+    type: import_editor_props23.stringPropTypeUtil.create(newValue.type),
+    angle: import_editor_props23.numberPropTypeUtil.create(newValue.angle),
+    stops: import_editor_props23.gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
-        ({ color, offset }) => import_editor_props22.colorStopPropTypeUtil.create({
-          color: import_editor_props22.colorPropTypeUtil.create(color),
-          offset: import_editor_props22.numberPropTypeUtil.create(offset)
+        ({ color, offset }) => import_editor_props23.colorStopPropTypeUtil.create({
+          color: import_editor_props23.colorPropTypeUtil.create(color),
+          offset: import_editor_props23.numberPropTypeUtil.create(offset)
         })
       )
     )
@@ -3002,8 +3141,8 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React45.createElement(ControlActions, null, /* @__PURE__ */ React45.createElement(
-    import_ui38.UnstableGradientBox,
+  return /* @__PURE__ */ React47.createElement(ControlActions, null, /* @__PURE__ */ React47.createElement(
+    import_ui40.UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
       value: normalizeValue(),
@@ -3011,69 +3150,69 @@ var BackgroundGradientColorControl = createControl(() => {
     }
   ));
 });
-var initialBackgroundGradientOverlay = import_editor_props22.backgroundGradientOverlayPropTypeUtil.create({
-  type: import_editor_props22.stringPropTypeUtil.create("linear"),
-  angle: import_editor_props22.numberPropTypeUtil.create(180),
-  stops: import_editor_props22.gradientColorStopPropTypeUtil.create([
-    import_editor_props22.colorStopPropTypeUtil.create({
-      color: import_editor_props22.colorPropTypeUtil.create("rgb(0,0,0)"),
-      offset: import_editor_props22.numberPropTypeUtil.create(0)
+var initialBackgroundGradientOverlay = import_editor_props23.backgroundGradientOverlayPropTypeUtil.create({
+  type: import_editor_props23.stringPropTypeUtil.create("linear"),
+  angle: import_editor_props23.numberPropTypeUtil.create(180),
+  stops: import_editor_props23.gradientColorStopPropTypeUtil.create([
+    import_editor_props23.colorStopPropTypeUtil.create({
+      color: import_editor_props23.colorPropTypeUtil.create("rgb(0,0,0)"),
+      offset: import_editor_props23.numberPropTypeUtil.create(0)
     }),
-    import_editor_props22.colorStopPropTypeUtil.create({
-      color: import_editor_props22.colorPropTypeUtil.create("rgb(255,255,255)"),
-      offset: import_editor_props22.numberPropTypeUtil.create(100)
+    import_editor_props23.colorStopPropTypeUtil.create({
+      color: import_editor_props23.colorPropTypeUtil.create("rgb(255,255,255)"),
+      offset: import_editor_props23.numberPropTypeUtil.create(100)
     })
   ])
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-var React46 = __toESM(require("react"));
+var React48 = __toESM(require("react"));
 var import_icons14 = require("@elementor/icons");
-var import_ui39 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_ui41 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: (0, import_i18n15.__)("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(import_icons14.PinIcon, { fontSize: size }),
+    label: (0, import_i18n16.__)("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons14.PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: (0, import_i18n15.__)("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(import_icons14.PinnedOffIcon, { fontSize: size }),
+    label: (0, import_i18n16.__)("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons14.PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React46.createElement(PopoverGridContainer, null, /* @__PURE__ */ React46.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Attachment", "elementor"))), /* @__PURE__ */ React46.createElement(import_ui39.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React46.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React48.createElement(PopoverGridContainer, null, /* @__PURE__ */ React48.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(ControlFormLabel, null, (0, import_i18n16.__)("Attachment", "elementor"))), /* @__PURE__ */ React48.createElement(import_ui41.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React48.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-var React47 = __toESM(require("react"));
-var import_react27 = require("react");
-var import_editor_props23 = require("@elementor/editor-props");
+var React49 = __toESM(require("react"));
+var import_react28 = require("react");
+var import_editor_props24 = require("@elementor/editor-props");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons15 = require("@elementor/icons");
-var import_ui40 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var import_ui42 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 var backgroundPositionOptions = [
-  { label: (0, import_i18n16.__)("Center center", "elementor"), value: "center center" },
-  { label: (0, import_i18n16.__)("Center left", "elementor"), value: "center left" },
-  { label: (0, import_i18n16.__)("Center right", "elementor"), value: "center right" },
-  { label: (0, import_i18n16.__)("Top center", "elementor"), value: "top center" },
-  { label: (0, import_i18n16.__)("Top left", "elementor"), value: "top left" },
-  { label: (0, import_i18n16.__)("Top right", "elementor"), value: "top right" },
-  { label: (0, import_i18n16.__)("Bottom center", "elementor"), value: "bottom center" },
-  { label: (0, import_i18n16.__)("Bottom left", "elementor"), value: "bottom left" },
-  { label: (0, import_i18n16.__)("Bottom right", "elementor"), value: "bottom right" },
-  { label: (0, import_i18n16.__)("Custom", "elementor"), value: "custom" }
+  { label: (0, import_i18n17.__)("Center center", "elementor"), value: "center center" },
+  { label: (0, import_i18n17.__)("Center left", "elementor"), value: "center left" },
+  { label: (0, import_i18n17.__)("Center right", "elementor"), value: "center right" },
+  { label: (0, import_i18n17.__)("Top center", "elementor"), value: "top center" },
+  { label: (0, import_i18n17.__)("Top left", "elementor"), value: "top left" },
+  { label: (0, import_i18n17.__)("Top right", "elementor"), value: "top right" },
+  { label: (0, import_i18n17.__)("Bottom center", "elementor"), value: "bottom center" },
+  { label: (0, import_i18n17.__)("Bottom left", "elementor"), value: "bottom left" },
+  { label: (0, import_i18n17.__)("Bottom right", "elementor"), value: "bottom right" },
+  { label: (0, import_i18n17.__)("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
-  const backgroundImageOffsetContext = useBoundProp(import_editor_props23.backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(import_editor_props23.stringPropTypeUtil);
+  const backgroundImageOffsetContext = useBoundProp(import_editor_props24.backgroundImagePositionOffsetPropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props24.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = (0, import_react27.useRef)(null);
+  const rowRef = (0, import_react28.useRef)(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -3082,8 +3221,8 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React47.createElement(import_ui40.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React47.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React47.createElement(PopoverGridContainer, null, /* @__PURE__ */ React47.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlFormLabel, null, (0, import_i18n16.__)("Position", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui40.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React47.createElement(
-    import_ui40.Select,
+  return /* @__PURE__ */ React49.createElement(import_ui42.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React49.createElement(PopoverGridContainer, null, /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlFormLabel, null, (0, import_i18n17.__)("Position", "elementor"))), /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React49.createElement(
+    import_ui42.Select,
     {
       fullWidth: true,
       size: "tiny",
@@ -3091,95 +3230,95 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React47.createElement(import_editor_ui7.MenuListItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React47.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React47.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React47.createElement(import_ui40.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React47.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React47.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React49.createElement(import_editor_ui7.MenuListItem, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React49.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React49.createElement(import_ui42.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React49.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React47.createElement(import_icons15.LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React49.createElement(import_icons15.LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React47.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React47.createElement(
+  ))), /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React49.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React47.createElement(import_icons15.LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React49.createElement(import_icons15.LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef
     }
   )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-var React48 = __toESM(require("react"));
+var React50 = __toESM(require("react"));
 var import_icons16 = require("@elementor/icons");
-var import_ui41 = require("@elementor/ui");
-var import_i18n17 = require("@wordpress/i18n");
+var import_ui43 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: (0, import_i18n17.__)("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons16.GridDotsIcon, { fontSize: size }),
+    label: (0, import_i18n18.__)("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons16.GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: (0, import_i18n17.__)("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons16.DotsHorizontalIcon, { fontSize: size }),
+    label: (0, import_i18n18.__)("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons16.DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: (0, import_i18n17.__)("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons16.DotsVerticalIcon, { fontSize: size }),
+    label: (0, import_i18n18.__)("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons16.DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: (0, import_i18n17.__)("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons16.XIcon, { fontSize: size }),
+    label: (0, import_i18n18.__)("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons16.XIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React48.createElement(PopoverGridContainer, null, /* @__PURE__ */ React48.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(ControlFormLabel, null, (0, import_i18n17.__)("Repeat", "elementor"))), /* @__PURE__ */ React48.createElement(import_ui41.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React48.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React50.createElement(PopoverGridContainer, null, /* @__PURE__ */ React50.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(ControlFormLabel, null, (0, import_i18n18.__)("Repeat", "elementor"))), /* @__PURE__ */ React50.createElement(import_ui43.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React50.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-var React49 = __toESM(require("react"));
-var import_react28 = require("react");
-var import_editor_props24 = require("@elementor/editor-props");
+var React51 = __toESM(require("react"));
+var import_react29 = require("react");
+var import_editor_props25 = require("@elementor/editor-props");
 var import_icons17 = require("@elementor/icons");
-var import_ui42 = require("@elementor/ui");
-var import_i18n18 = require("@wordpress/i18n");
+var import_ui44 = require("@elementor/ui");
+var import_i18n19 = require("@wordpress/i18n");
 var sizeControlOptions = [
   {
     value: "auto",
-    label: (0, import_i18n18.__)("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons17.LetterAIcon, { fontSize: size }),
+    label: (0, import_i18n19.__)("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons17.LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: (0, import_i18n18.__)("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons17.ArrowsMaximizeIcon, { fontSize: size }),
+    label: (0, import_i18n19.__)("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons17.ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: (0, import_i18n18.__)("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons17.ArrowBarBothIcon, { fontSize: size }),
+    label: (0, import_i18n19.__)("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons17.ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: (0, import_i18n18.__)("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons17.PencilIcon, { fontSize: size }),
+    label: (0, import_i18n19.__)("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons17.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlaySize = () => {
-  const backgroundImageScaleContext = useBoundProp(import_editor_props24.backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(import_editor_props24.stringPropTypeUtil);
+  const backgroundImageScaleContext = useBoundProp(import_editor_props25.backgroundImageSizeScalePropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props25.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = (0, import_react28.useRef)(null);
+  const rowRef = (0, import_react29.useRef)(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -3187,7 +3326,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React49.createElement(import_ui42.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React49.createElement(PopoverGridContainer, null, /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlFormLabel, null, (0, import_i18n18.__)("Size", "elementor"))), /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React51.createElement(import_ui44.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React51.createElement(import_ui44.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React51.createElement(PopoverGridContainer, null, /* @__PURE__ */ React51.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlFormLabel, null, (0, import_i18n19.__)("Size", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui44.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React51.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -3196,17 +3335,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React49.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React49.createElement(PopoverGridContainer, null, /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React49.createElement(
+  )))), isCustom ? /* @__PURE__ */ React51.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React51.createElement(import_ui44.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React51.createElement(PopoverGridContainer, null, /* @__PURE__ */ React51.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React51.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React49.createElement(import_icons17.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React51.createElement(import_icons17.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React49.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React49.createElement(
+  ))), /* @__PURE__ */ React51.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React51.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React49.createElement(import_icons17.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React51.createElement(import_icons17.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -3214,17 +3353,17 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react29 = require("react");
-var import_editor_props25 = require("@elementor/editor-props");
-var import_ui43 = require("@elementor/ui");
+var import_react30 = require("react");
+var import_editor_props26 = require("@elementor/editor-props");
+var import_ui45 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
   color: initialBackgroundColorOverlay2,
   image: initialBackgroundImageOverlay,
   gradient: initialBackgroundGradientOverlay2
 }) => {
-  const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props25.backgroundImageOverlayPropTypeUtil);
-  const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props25.backgroundColorOverlayPropTypeUtil);
-  const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props25.backgroundGradientOverlayPropTypeUtil);
+  const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props26.backgroundImageOverlayPropTypeUtil);
+  const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props26.backgroundColorOverlayPropTypeUtil);
+  const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props26.backgroundGradientOverlayPropTypeUtil);
   const getCurrentOverlayType = () => {
     if (colorValue) {
       return "color";
@@ -3234,8 +3373,8 @@ var useBackgroundTabsHistory = ({
     }
     return "image";
   };
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui43.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react29.useRef)({
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui45.useTabs)(getCurrentOverlayType());
+  const valuesHistory = (0, import_react30.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -3273,9 +3412,9 @@ var useBackgroundTabsHistory = ({
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 var DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = "#00000033";
-var initialBackgroundColorOverlay = import_editor_props26.backgroundColorOverlayPropTypeUtil.create(
+var initialBackgroundColorOverlay = import_editor_props27.backgroundColorOverlayPropTypeUtil.create(
   {
-    color: import_editor_props26.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
+    color: import_editor_props27.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
   }
 );
 var getInitialBackgroundOverlay = () => ({
@@ -3303,21 +3442,21 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: (0, import_i18n19.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: (0, import_i18n19.__)("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: (0, import_i18n19.__)("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: (0, import_i18n19.__)("Full", "elementor"), value: "full" }
+  { label: (0, import_i18n20.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: (0, import_i18n20.__)("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: (0, import_i18n20.__)("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: (0, import_i18n20.__)("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { propType, value: overlayValues, setValue, disabled } = useBoundProp(import_editor_props26.backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React50.createElement(PropProvider, { propType, value: overlayValues, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React50.createElement(
+  const { propType, value: overlayValues, setValue, disabled } = useBoundProp(import_editor_props27.backgroundOverlayPropTypeUtil);
+  return /* @__PURE__ */ React52.createElement(PropProvider, { propType, value: overlayValues, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React52.createElement(
     Repeater,
     {
       openOnAdd: true,
       disabled,
       values: overlayValues ?? [],
       setValues: setValue,
-      label: (0, import_i18n19.__)("Overlay", "elementor"),
+      label: (0, import_i18n20.__)("Overlay", "elementor"),
       itemSettings: {
         Icon: ItemIcon3,
         Label: ItemLabel3,
@@ -3328,7 +3467,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
   ));
 });
 var ItemContent3 = ({ anchorEl = null, bind }) => {
-  return /* @__PURE__ */ React50.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React50.createElement(Content3, { anchorEl }));
+  return /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React52.createElement(Content3, { anchorEl }));
 };
 var Content3 = ({ anchorEl }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
@@ -3336,27 +3475,27 @@ var Content3 = ({ anchorEl }) => {
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React50.createElement(import_ui44.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React50.createElement(import_ui44.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React50.createElement(
-    import_ui44.Tabs,
+  return /* @__PURE__ */ React52.createElement(import_ui46.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React52.createElement(import_ui46.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React52.createElement(
+    import_ui46.Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": (0, import_i18n19.__)("Background Overlay", "elementor")
+      "aria-label": (0, import_i18n20.__)("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React50.createElement(import_ui44.Tab, { label: (0, import_i18n19.__)("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React50.createElement(import_ui44.Tab, { label: (0, import_i18n19.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React50.createElement(import_ui44.Tab, { label: (0, import_i18n19.__)("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React50.createElement(import_ui44.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React50.createElement(PopoverContent, null, /* @__PURE__ */ React50.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React50.createElement(import_ui44.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React50.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React50.createElement(import_ui44.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React50.createElement(PopoverContent, null, /* @__PURE__ */ React50.createElement(ColorOverlayContent, { anchorEl }))));
+    /* @__PURE__ */ React52.createElement(import_ui46.Tab, { label: (0, import_i18n20.__)("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React52.createElement(import_ui46.Tab, { label: (0, import_i18n20.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React52.createElement(import_ui46.Tab, { label: (0, import_i18n20.__)("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React52.createElement(import_ui46.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React52.createElement(PopoverContent, null, /* @__PURE__ */ React52.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React52.createElement(import_ui46.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React52.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React52.createElement(import_ui46.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React52.createElement(PopoverContent, null, /* @__PURE__ */ React52.createElement(ColorOverlayContent, { anchorEl }))));
 };
 var ItemIcon3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React50.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React52.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React50.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React52.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React50.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React52.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -3369,12 +3508,12 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React50.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React52.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React50.createElement(
-    import_ui44.CardMedia,
+  return /* @__PURE__ */ React52.createElement(
+    import_ui46.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -3388,43 +3527,43 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React50.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React52.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React50.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React52.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React50.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React52.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React50.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React52.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React50.createElement("span", null, color);
+  return /* @__PURE__ */ React52.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React50.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React52.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React50.createElement("span", null, (0, import_i18n19.__)("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React52.createElement("span", null, (0, import_i18n20.__)("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React50.createElement("span", null, (0, import_i18n19.__)("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React52.createElement("span", null, (0, import_i18n20.__)("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
-  const propContext = useBoundProp(import_editor_props26.backgroundColorOverlayPropTypeUtil);
-  return /* @__PURE__ */ React50.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React50.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React50.createElement(ColorControl, { anchorEl })));
+  const propContext = useBoundProp(import_editor_props27.backgroundColorOverlayPropTypeUtil);
+  return /* @__PURE__ */ React52.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React52.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
-  const propContext = useBoundProp(import_editor_props26.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React50.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React50.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React50.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React50.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React50.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React50.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React50.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React50.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React50.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React50.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React50.createElement(BackgroundImageOverlayAttachment, null)));
+  const propContext = useBoundProp(import_editor_props27.backgroundImageOverlayPropTypeUtil);
+  return /* @__PURE__ */ React52.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React52.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React52.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React52.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React52.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React52.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator = (0, import_ui44.styled)(import_ui44.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui46.styled)(import_ui46.UnstableColorIndicator)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
 }));
 var useImage = (image) => {
@@ -3459,23 +3598,23 @@ var getGradientValue = (value) => {
 
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
-  const propContext = useBoundProp(import_editor_props27.backgroundPropTypeUtil);
+  const propContext = useBoundProp(import_editor_props28.backgroundPropTypeUtil);
   const isUsingNestedProps = (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_30");
-  const colorLabel = (0, import_i18n20.__)("Color", "elementor");
-  return /* @__PURE__ */ React51.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React51.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React51.createElement(import_ui45.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui45.Grid, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React51.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React51.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React51.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ColorControl, null)))));
+  const colorLabel = (0, import_i18n21.__)("Color", "elementor");
+  return /* @__PURE__ */ React53.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React53.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React53.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui47.Grid, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React53.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React53.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React53.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ColorControl, null)))));
 });
 
 // src/controls/repeatable-control.tsx
-var React52 = __toESM(require("react"));
-var import_react31 = require("react");
-var import_editor_props28 = require("@elementor/editor-props");
-var import_ui46 = require("@elementor/ui");
+var React54 = __toESM(require("react"));
+var import_react32 = require("react");
+var import_editor_props29 = require("@elementor/editor-props");
+var import_ui48 = require("@elementor/ui");
 
 // src/hooks/use-repeatable-control-context.ts
-var import_react30 = require("react");
-var RepeatableControlContext = (0, import_react30.createContext)(void 0);
+var import_react31 = require("react");
+var RepeatableControlContext = (0, import_react31.createContext)(void 0);
 var useRepeatableControlContext = () => {
-  const context = (0, import_react30.useContext)(RepeatableControlContext);
+  const context = (0, import_react31.useContext)(RepeatableControlContext);
   if (!context) {
     throw new Error("useRepeatableControlContext must be used within RepeatableControl");
   }
@@ -3483,6 +3622,7 @@ var useRepeatableControlContext = () => {
 };
 
 // src/controls/repeatable-control.tsx
+var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
   ({
     repeaterLabel,
@@ -3497,11 +3637,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil = (0, import_react31.useMemo)(
-      () => (0, import_editor_props28.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema),
+    const childArrayPropTypeUtil = (0, import_react32.useMemo)(
+      () => (0, import_editor_props29.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema),
       [childPropTypeUtil.key, childPropTypeUtil.schema]
     );
-    const contextValue = (0, import_react31.useMemo)(
+    const contextValue = (0, import_react32.useMemo)(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -3510,7 +3650,7 @@ var RepeatableControl = createControl(
       [childControlConfig, placeholder, patternLabel]
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    return /* @__PURE__ */ React52.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React52.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React54.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React54.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React54.createElement(
       Repeater,
       {
         openOnAdd: true,
@@ -3531,21 +3671,38 @@ var RepeatableControl = createControl(
   }
 );
 var ItemContent4 = ({ bind }) => {
-  return /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React52.createElement(Content4, null));
+  return /* @__PURE__ */ React54.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React54.createElement(Content4, null));
 };
-var ItemIcon4 = () => /* @__PURE__ */ React52.createElement(React52.Fragment, null);
+var ItemIcon4 = () => /* @__PURE__ */ React54.createElement(React54.Fragment, null);
 var Content4 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React52.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React52.createElement(PopoverGridContainer, null, /* @__PURE__ */ React52.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React54.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React54.createElement(PopoverGridContainer, null, /* @__PURE__ */ React54.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
     return template;
   }
-  return new Function(...Object.keys(data), `return \`${template}\`;`)(...Object.values(data));
+  return template.replace(PLACEHOLDER_REGEX, (_, path) => {
+    const value = getNestedValue(data, path);
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      if (value.name) {
+        return value.name;
+      }
+      return JSON.stringify(value);
+    }
+    if (Array.isArray(value)) {
+      return value.join(", ");
+    }
+    return String(value ?? "");
+  });
 };
 var getNestedValue = (obj, path) => {
-  return path.split(".").reduce((current, key) => current?.[key], obj);
+  return path.split(".").reduce((current, key) => {
+    if (current && typeof current === "object") {
+      return current[key];
+    }
+    return {};
+  }, obj);
 };
 var isEmptyValue = (val) => {
   if (typeof val === "string") {
@@ -3557,8 +3714,8 @@ var isEmptyValue = (val) => {
   if (Array.isArray(val)) {
     return val.length === 0;
   }
-  if (typeof val === "object" && val !== null && Object.keys(val).length === 0) {
-    return true;
+  if (typeof val === "object" && val !== null) {
+    return Object.keys(val).length === 0;
   }
   return false;
 };
@@ -3579,64 +3736,71 @@ var shouldShowPlaceholder = (pattern, data) => {
 var ItemLabel4 = ({ value }) => {
   const { placeholder, patternLabel } = useRepeatableControlContext();
   const label = shouldShowPlaceholder(patternLabel, value) ? placeholder : interpolate(patternLabel, value);
-  return /* @__PURE__ */ React52.createElement(import_ui46.Box, { component: "span", color: "text.tertiary" }, label);
+  return /* @__PURE__ */ React54.createElement(import_ui48.Box, { component: "span", color: "text.tertiary" }, label);
 };
 var getAllProperties = (pattern) => {
-  const properties = pattern.match(/\$\{([^}]+)\}/g)?.map(
-    (match) => match.slice(2, -1)
-  ) || [];
+  const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
   return properties;
 };
 
 // src/controls/key-value-control.tsx
-var React53 = __toESM(require("react"));
-var import_react32 = require("react");
-var import_editor_props29 = require("@elementor/editor-props");
-var import_ui47 = require("@elementor/ui");
-var import_i18n21 = require("@wordpress/i18n");
+var React55 = __toESM(require("react"));
+var import_react33 = require("react");
+var import_editor_props30 = require("@elementor/editor-props");
+var import_ui49 = require("@elementor/ui");
+var import_i18n22 = require("@wordpress/i18n");
 var KeyValueControl = createControl((props = {}) => {
-  const { value, setValue } = useBoundProp(import_editor_props29.keyValuePropTypeUtil);
-  const [keyError, setKeyError] = (0, import_react32.useState)(null);
-  const [valueError, setValueError] = (0, import_react32.useState)(null);
-  const [sessionState, setSessionState] = (0, import_react32.useState)({
+  const { value, setValue, ...propContext } = useBoundProp(import_editor_props30.keyValuePropTypeUtil);
+  const [keyError, setKeyError] = (0, import_react33.useState)("");
+  const [valueError, setValueError] = (0, import_react33.useState)("");
+  const [sessionState, setSessionState] = (0, import_react33.useState)({
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
-  const keyLabel = props.keyName || (0, import_i18n21.__)("Key", "elementor");
-  const valueLabel = props.valueName || (0, import_i18n21.__)("Value", "elementor");
-  const [keyRegex, valueRegex, errMsg] = (0, import_react32.useMemo)(
+  const keyLabel = props.keyName || (0, import_i18n22.__)("Key", "elementor");
+  const valueLabel = props.valueName || (0, import_i18n22.__)("Value", "elementor");
+  const [keyRegex, valueRegex, errMsg] = (0, import_react33.useMemo)(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
-      props.validationErrorMessage || (0, import_i18n21.__)("Invalid Format", "elementor")
+      props.validationErrorMessage || (0, import_i18n22.__)("Invalid Format", "elementor")
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
   const validate = (newValue, fieldType) => {
     if (fieldType === "key" && keyRegex) {
       const isValid = keyRegex.test(newValue);
-      setKeyError(isValid ? null : errMsg);
+      setKeyError(isValid ? "" : errMsg);
       return isValid;
     } else if (fieldType === "value" && valueRegex) {
       const isValid = valueRegex.test(newValue);
-      setValueError(isValid ? null : errMsg);
+      setValueError(isValid ? "" : errMsg);
       return isValid;
     }
     return true;
   };
-  const handleChange = (event, fieldType) => {
-    const newValue = event.target.value;
+  const handleChange = (newValue, options, meta) => {
+    const fieldType = meta?.bind;
+    if (!fieldType) {
+      return;
+    }
+    const newChangedValue = newValue[fieldType];
+    if ((0, import_editor_props30.isTransformable)(newChangedValue) && newChangedValue.$$type === "dynamic") {
+      setValue({
+        ...value,
+        [fieldType]: newChangedValue
+      });
+      return;
+    }
+    const extractedValue = import_editor_props30.stringPropTypeUtil.extract(newChangedValue);
     setSessionState((prev) => ({
       ...prev,
-      [fieldType]: newValue
+      [fieldType]: extractedValue
     }));
-    if (validate(newValue, fieldType)) {
+    if (extractedValue && validate(extractedValue, fieldType)) {
       setValue({
         ...value,
-        [fieldType]: {
-          value: newValue,
-          $$type: "string"
-        }
+        [fieldType]: newChangedValue
       });
     } else {
       setValue({
@@ -3648,62 +3812,46 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  const isKeyInvalid = keyError !== null;
-  const isValueInvalid = valueError !== null;
-  return /* @__PURE__ */ React53.createElement(ControlActions, null, /* @__PURE__ */ React53.createElement(import_ui47.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React53.createElement(import_ui47.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(import_ui47.FormLabel, { size: "tiny" }, keyLabel), /* @__PURE__ */ React53.createElement(
-    import_ui47.TextField,
+  return /* @__PURE__ */ React55.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React55.createElement(import_ui49.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React55.createElement(import_ui49.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React55.createElement(import_ui49.FormLabel, { size: "tiny" }, keyLabel), /* @__PURE__ */ React55.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React55.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError, sx: { pt: 1 } })), !!keyError && /* @__PURE__ */ React55.createElement(import_ui49.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React55.createElement(import_ui49.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React55.createElement(import_ui49.FormLabel, { size: "tiny" }, valueLabel), /* @__PURE__ */ React55.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React55.createElement(
+    TextControl,
     {
-      autoFocus: true,
-      sx: { pt: 1 },
-      size: "tiny",
-      fullWidth: true,
-      value: sessionState.key,
-      onChange: (e) => handleChange(e, "key"),
-      error: isKeyInvalid
+      inputValue: sessionState.value,
+      error: !!valueError,
+      inputDisabled: !!keyError,
+      sx: { pt: 1 }
     }
-  ), isKeyInvalid && /* @__PURE__ */ React53.createElement(import_ui47.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React53.createElement(import_ui47.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(import_ui47.FormLabel, { size: "tiny" }, valueLabel), /* @__PURE__ */ React53.createElement(
-    import_ui47.TextField,
-    {
-      sx: { pt: 1 },
-      size: "tiny",
-      fullWidth: true,
-      value: sessionState.value,
-      onChange: (e) => handleChange(e, "value"),
-      disabled: isKeyInvalid,
-      error: isValueInvalid
-    }
-  ), isValueInvalid && /* @__PURE__ */ React53.createElement(import_ui47.FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React55.createElement(import_ui49.FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-var React54 = __toESM(require("react"));
-var import_react33 = require("react");
-var import_editor_props30 = require("@elementor/editor-props");
+var React56 = __toESM(require("react"));
+var import_react34 = require("react");
+var import_editor_props31 = require("@elementor/editor-props");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_icons18 = require("@elementor/icons");
-var import_ui48 = require("@elementor/ui");
-var import_i18n22 = require("@wordpress/i18n");
+var import_ui50 = require("@elementor/ui");
+var import_i18n23 = require("@wordpress/i18n");
 var positionOptions = [
-  { label: (0, import_i18n22.__)("Center center", "elementor"), value: "center center" },
-  { label: (0, import_i18n22.__)("Center left", "elementor"), value: "center left" },
-  { label: (0, import_i18n22.__)("Center right", "elementor"), value: "center right" },
-  { label: (0, import_i18n22.__)("Top center", "elementor"), value: "top center" },
-  { label: (0, import_i18n22.__)("Top left", "elementor"), value: "top left" },
-  { label: (0, import_i18n22.__)("Top right", "elementor"), value: "top right" },
-  { label: (0, import_i18n22.__)("Bottom center", "elementor"), value: "bottom center" },
-  { label: (0, import_i18n22.__)("Bottom left", "elementor"), value: "bottom left" },
-  { label: (0, import_i18n22.__)("Bottom right", "elementor"), value: "bottom right" }
+  { label: (0, import_i18n23.__)("Center center", "elementor"), value: "center center" },
+  { label: (0, import_i18n23.__)("Center left", "elementor"), value: "center left" },
+  { label: (0, import_i18n23.__)("Center right", "elementor"), value: "center right" },
+  { label: (0, import_i18n23.__)("Top center", "elementor"), value: "top center" },
+  { label: (0, import_i18n23.__)("Top left", "elementor"), value: "top left" },
+  { label: (0, import_i18n23.__)("Top right", "elementor"), value: "top right" },
+  { label: (0, import_i18n23.__)("Bottom center", "elementor"), value: "bottom center" },
+  { label: (0, import_i18n23.__)("Bottom left", "elementor"), value: "bottom left" },
+  { label: (0, import_i18n23.__)("Bottom right", "elementor"), value: "bottom right" }
 ];
 var PositionControl = () => {
-  const positionContext = useBoundProp(import_editor_props30.positionPropTypeUtil);
-  const stringPropContext = useBoundProp(import_editor_props30.stringPropTypeUtil);
+  const positionContext = useBoundProp(import_editor_props31.positionPropTypeUtil);
+  const stringPropContext = useBoundProp(import_editor_props31.stringPropTypeUtil);
   const isVersion331Active = (0, import_editor_v1_adapters6.isExperimentActive)("e_v_3_31");
   const isCustom = !!positionContext.value && isVersion331Active;
-  const availablePositionOptions = (0, import_react33.useMemo)(() => {
+  const availablePositionOptions = (0, import_react34.useMemo)(() => {
     const options = [...positionOptions];
     if (isVersion331Active) {
-      options.push({ label: (0, import_i18n22.__)("Custom", "elementor"), value: "custom" });
+      options.push({ label: (0, import_i18n23.__)("Custom", "elementor"), value: "custom" });
     }
     return options;
   }, [isVersion331Active]);
@@ -3715,8 +3863,8 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React54.createElement(import_ui48.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React54.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React54.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(ControlFormLabel, null, (0, import_i18n22.__)("Object position", "elementor"))), /* @__PURE__ */ React54.createElement(import_ui48.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React54.createElement(
-    import_ui48.Select,
+  return /* @__PURE__ */ React56.createElement(import_ui50.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React56.createElement(import_ui50.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(import_ui50.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(ControlFormLabel, null, (0, import_i18n23.__)("Object position", "elementor"))), /* @__PURE__ */ React56.createElement(import_ui50.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React56.createElement(
+    import_ui50.Select,
     {
       size: "tiny",
       disabled: stringPropContext.disabled,
@@ -3724,102 +3872,102 @@ var PositionControl = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    availablePositionOptions.map(({ label, value }) => /* @__PURE__ */ React54.createElement(import_editor_ui8.MenuListItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React54.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React54.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React54.createElement(import_ui48.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React54.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React54.createElement(SizeControl, { startIcon: /* @__PURE__ */ React54.createElement(import_icons18.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React54.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React54.createElement(SizeControl, { startIcon: /* @__PURE__ */ React54.createElement(import_icons18.LetterYIcon, { fontSize: "tiny" }) })))))));
+    availablePositionOptions.map(({ label, value }) => /* @__PURE__ */ React56.createElement(import_editor_ui8.MenuListItem, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React56.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React56.createElement(import_ui50.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(import_ui50.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React56.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React56.createElement(SizeControl, { startIcon: /* @__PURE__ */ React56.createElement(import_icons18.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React56.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React56.createElement(SizeControl, { startIcon: /* @__PURE__ */ React56.createElement(import_icons18.LetterYIcon, { fontSize: "tiny" }) })))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-var React60 = __toESM(require("react"));
-var import_editor_props32 = require("@elementor/editor-props");
-var import_i18n26 = require("@wordpress/i18n");
+var React62 = __toESM(require("react"));
+var import_editor_props33 = require("@elementor/editor-props");
+var import_i18n27 = require("@wordpress/i18n");
 
 // src/controls/transform-control/transform-content.tsx
-var React57 = __toESM(require("react"));
-var import_ui51 = require("@elementor/ui");
-var import_i18n24 = require("@wordpress/i18n");
+var React59 = __toESM(require("react"));
+var import_ui53 = require("@elementor/ui");
+var import_i18n25 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/move.tsx
-var React56 = __toESM(require("react"));
-var import_react34 = require("react");
-var import_editor_props31 = require("@elementor/editor-props");
+var React58 = __toESM(require("react"));
+var import_react35 = require("react");
+var import_editor_props32 = require("@elementor/editor-props");
 var import_icons19 = require("@elementor/icons");
-var import_ui50 = require("@elementor/ui");
-var import_i18n23 = require("@wordpress/i18n");
+var import_ui52 = require("@elementor/ui");
+var import_i18n24 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/axis-row.tsx
-var React55 = __toESM(require("react"));
-var import_ui49 = require("@elementor/ui");
+var React57 = __toESM(require("react"));
+var import_ui51 = require("@elementor/ui");
 var AxisRow = ({ label, bindValue, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React55.createElement(import_ui49.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React55.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React55.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(ControlLabel, null, label)), /* @__PURE__ */ React55.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React55.createElement(SizeControl, { anchorRef, startIcon })))));
+  return /* @__PURE__ */ React57.createElement(import_ui51.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React57.createElement(import_ui51.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, label)), /* @__PURE__ */ React57.createElement(import_ui51.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React57.createElement(SizeControl, { anchorRef, startIcon })))));
 };
 
 // src/controls/transform-control/functions/move.tsx
 var moveAxisControls = [
   {
-    label: (0, import_i18n23.__)("Move X", "elementor"),
+    label: (0, import_i18n24.__)("Move X", "elementor"),
     bindValue: "x",
-    startIcon: /* @__PURE__ */ React56.createElement(import_icons19.ArrowRightIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React58.createElement(import_icons19.ArrowRightIcon, { fontSize: "tiny" })
   },
   {
-    label: (0, import_i18n23.__)("Move Y", "elementor"),
+    label: (0, import_i18n24.__)("Move Y", "elementor"),
     bindValue: "y",
-    startIcon: /* @__PURE__ */ React56.createElement(import_icons19.ArrowDownSmallIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React58.createElement(import_icons19.ArrowDownSmallIcon, { fontSize: "tiny" })
   },
   {
-    label: (0, import_i18n23.__)("Move Z", "elementor"),
+    label: (0, import_i18n24.__)("Move Z", "elementor"),
     bindValue: "z",
-    startIcon: /* @__PURE__ */ React56.createElement(import_icons19.ArrowDownLeftIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React58.createElement(import_icons19.ArrowDownLeftIcon, { fontSize: "tiny" })
   }
 ];
 var Move = () => {
-  const context = useBoundProp(import_editor_props31.moveTransformPropTypeUtil);
-  const rowRef = (0, import_react34.useRef)(null);
-  return /* @__PURE__ */ React56.createElement(import_ui50.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React56.createElement(PropProvider, { ...context }, /* @__PURE__ */ React56.createElement(PropKeyProvider, { bind: "transform-move" }, moveAxisControls.map((control) => /* @__PURE__ */ React56.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
+  const context = useBoundProp(import_editor_props32.moveTransformPropTypeUtil);
+  const rowRef = (0, import_react35.useRef)(null);
+  return /* @__PURE__ */ React58.createElement(import_ui52.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React58.createElement(PropProvider, { ...context }, /* @__PURE__ */ React58.createElement(PropKeyProvider, { bind: "transform-move" }, moveAxisControls.map((control) => /* @__PURE__ */ React58.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
 };
 
 // src/controls/transform-control/transform-content.tsx
 var TransformContent = ({ bind }) => {
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui51.useTabs)("transform-move");
-  return /* @__PURE__ */ React57.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React57.createElement(PopoverContent, null, /* @__PURE__ */ React57.createElement(import_ui51.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React57.createElement(import_ui51.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React57.createElement(
-    import_ui51.Tabs,
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui53.useTabs)("transform-move");
+  return /* @__PURE__ */ React59.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React59.createElement(PopoverContent, null, /* @__PURE__ */ React59.createElement(import_ui53.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React59.createElement(import_ui53.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React59.createElement(
+    import_ui53.Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": (0, import_i18n24.__)("Transform", "elementor")
+      "aria-label": (0, import_i18n25.__)("Transform", "elementor")
     },
-    /* @__PURE__ */ React57.createElement(import_ui51.Tab, { label: (0, import_i18n24.__)("Move", "elementor"), ...getTabProps("transform-move") })
-  )), /* @__PURE__ */ React57.createElement(import_ui51.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("transform-move") }, /* @__PURE__ */ React57.createElement(Move, null)))));
+    /* @__PURE__ */ React59.createElement(import_ui53.Tab, { label: (0, import_i18n25.__)("Move", "elementor"), ...getTabProps("transform-move") })
+  )), /* @__PURE__ */ React59.createElement(import_ui53.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("transform-move") }, /* @__PURE__ */ React59.createElement(Move, null)))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-var React58 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 var import_icons20 = require("@elementor/icons");
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
     case "transform-move":
-      return /* @__PURE__ */ React58.createElement(import_icons20.ArrowsMaximizeIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React60.createElement(import_icons20.ArrowsMaximizeIcon, { fontSize: "tiny" });
     default:
       return null;
   }
 };
 
 // src/controls/transform-control/transform-label.tsx
-var React59 = __toESM(require("react"));
-var import_ui52 = require("@elementor/ui");
-var import_i18n25 = require("@wordpress/i18n");
+var React61 = __toESM(require("react"));
+var import_ui54 = require("@elementor/ui");
+var import_i18n26 = require("@wordpress/i18n");
 var transformMoveValue = (value) => Object.values(value).map((axis) => `${axis?.value.size}${axis?.value.unit}`).join(", ");
 var TransformLabel = (props) => {
   const { $$type, value } = props.value;
   switch ($$type) {
     case "transform-move":
-      return /* @__PURE__ */ React59.createElement(Label2, { label: (0, import_i18n25.__)("Move", "elementor"), value: transformMoveValue(value) });
+      return /* @__PURE__ */ React61.createElement(Label2, { label: (0, import_i18n26.__)("Move", "elementor"), value: transformMoveValue(value) });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React59.createElement(import_ui52.Box, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React61.createElement(import_ui54.Box, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
@@ -3832,15 +3980,15 @@ var initialTransformValue = {
   }
 };
 var TransformRepeaterControl = createControl(() => {
-  const { propType, value: transformValues, setValue, disabled } = useBoundProp(import_editor_props32.transformPropTypeUtil);
-  return /* @__PURE__ */ React60.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React60.createElement(
+  const { propType, value: transformValues, setValue, disabled } = useBoundProp(import_editor_props33.transformPropTypeUtil);
+  return /* @__PURE__ */ React62.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React62.createElement(
     Repeater,
     {
       openOnAdd: true,
       disabled,
       values: transformValues ?? [],
       setValues: setValue,
-      label: (0, import_i18n26.__)("Transform", "elementor"),
+      label: (0, import_i18n27.__)("Transform", "elementor"),
       showDuplicate: false,
       itemSettings: {
         Icon: TransformIcon,