@elementor/editor-controls 3.32.0-68 → 3.32.0-69

package/dist/index.js

@@ -222,7 +222,7 @@ function useBoundProp(propTypeUtil) {
     return { ...propKeyContext, disabled };
   }
   function setValue(value2, options, meta) {
-    if (!validate2(value2)) {
+    if (!validate2(value2, meta?.validation)) {
       return;
     }
     if (value2 === null) {
@@ -245,11 +245,14 @@ function useBoundProp(propTypeUtil) {
 }
 var useValidation = (propType) => {
   const [isValid, setIsValid] = (0, import_react3.useState)(true);
-  const validate2 = (value) => {
+  const validate2 = (value, validation) => {
     let valid = true;
     if (propType.settings.required && value === null) {
       valid = false;
     }
+    if (validation && !validation(value)) {
+      valid = false;
+    }
     setIsValid(valid);
     return valid;
   };
@@ -611,17 +614,17 @@ var TextAreaControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/size-control.tsx
-var React17 = __toESM(require("react"));
-var import_react12 = require("react");
+var React18 = __toESM(require("react"));
+var import_react13 = require("react");
 var import_editor_props7 = require("@elementor/editor-props");
 var import_editor_responsive = require("@elementor/editor-responsive");
-var import_ui12 = require("@elementor/ui");
+var import_ui13 = require("@elementor/ui");
 
 // src/components/size-control/size-input.tsx
-var React15 = __toESM(require("react"));
-var import_react8 = require("react");
+var React16 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_icons2 = require("@elementor/icons");
-var import_ui10 = require("@elementor/ui");
+var import_ui11 = require("@elementor/ui");
 
 // src/utils/size-control.ts
 var lengthUnits = ["px", "%", "em", "rem", "vw", "vh"];
@@ -635,12 +638,44 @@ function isUnitExtendedOption(unit) {
 }
 
 // src/components/size-control/text-field-inner-selection.tsx
-var React14 = __toESM(require("react"));
-var import_react7 = require("react");
+var React15 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_editor_props6 = require("@elementor/editor-props");
 var import_editor_ui2 = require("@elementor/editor-ui");
+var import_ui10 = require("@elementor/ui");
+
+// src/components/number-input.tsx
+var React14 = __toESM(require("react"));
+var import_react7 = require("react");
 var import_ui9 = require("@elementor/ui");
-var TextFieldInnerSelection = (0, import_react7.forwardRef)(
+var RESTRICTED_INPUT_KEYS = ["e", "E", "+"];
+var NumberInput = (0, import_react7.forwardRef)((props, ref) => {
+  const [key, setKey] = (0, import_react7.useState)(0);
+  const handleKeyDown = (event) => {
+    blockRestrictedKeys(event, props.inputProps?.min);
+    props.onKeyDown?.(event);
+  };
+  const handleBlur = (event) => {
+    props.onBlur?.(event);
+    const { valid } = event.target.validity;
+    if (!valid) {
+      setKey((prev) => prev + 1);
+    }
+  };
+  return /* @__PURE__ */ React14.createElement(import_ui9.TextField, { ...props, ref, key, onKeyDown: handleKeyDown, onBlur: handleBlur });
+});
+function blockRestrictedKeys(event, min) {
+  const restrictedInputKeys = [...RESTRICTED_INPUT_KEYS];
+  if (min >= 0) {
+    restrictedInputKeys.push("-");
+  }
+  if (restrictedInputKeys.includes(event.key)) {
+    event.preventDefault();
+  }
+}
+
+// src/components/size-control/text-field-inner-selection.tsx
+var TextFieldInnerSelection = (0, import_react8.forwardRef)(
   ({
     placeholder,
     type,
@@ -649,16 +684,17 @@ var TextFieldInnerSelection = (0, import_react7.forwardRef)(
     onBlur,
     onKeyDown,
     onKeyUp,
+    InputProps,
     inputProps,
     disabled,
     isPopoverOpen
   }, ref) => {
     const { placeholder: boundPropPlaceholder } = useBoundProp(import_editor_props6.sizePropTypeUtil);
     const getCursorStyle = () => ({
-      input: { cursor: inputProps.readOnly ? "default !important" : void 0 }
+      input: { cursor: InputProps.readOnly ? "default !important" : void 0 }
     });
-    return /* @__PURE__ */ React14.createElement(
-      import_ui9.TextField,
+    return /* @__PURE__ */ React15.createElement(
+      NumberInput,
       {
         ref,
         sx: getCursorStyle(),
@@ -666,14 +702,15 @@ var TextFieldInnerSelection = (0, import_react7.forwardRef)(
         fullWidth: true,
         type,
         value,
-        onChange,
+        onInput: onChange,
         onKeyDown,
         onKeyUp,
         disabled,
         onBlur,
         focused: isPopoverOpen ? true : void 0,
         placeholder: placeholder ?? (String(boundPropPlaceholder?.size ?? "") || void 0),
-        InputProps: inputProps
+        InputProps,
+        inputProps
       }
     );
   }
@@ -686,25 +723,25 @@ var SelectionEndAdornment = ({
   menuItemsAttributes = {},
   disabled
 }) => {
-  const popupState = (0, import_ui9.usePopupState)({
+  const popupState = (0, import_ui10.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react7.useId)()
+    popupId: (0, import_react8.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
     popupState.close();
   };
   const { placeholder, showPrimaryColor } = useUnitPlaceholder(value);
-  return /* @__PURE__ */ React14.createElement(import_ui9.InputAdornment, { position: "end" }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(import_ui10.InputAdornment, { position: "end" }, /* @__PURE__ */ React15.createElement(
     StyledButton,
     {
       isPrimaryColor: showPrimaryColor,
       size: "small",
       disabled,
-      ...(0, import_ui9.bindTrigger)(popupState)
+      ...(0, import_ui10.bindTrigger)(popupState)
     },
     placeholder ?? alternativeOptionLabels[value] ?? value
-  ), /* @__PURE__ */ React14.createElement(import_ui9.Menu, { MenuListProps: { dense: true }, ...(0, import_ui9.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React15.createElement(import_ui10.Menu, { MenuListProps: { dense: true }, ...(0, import_ui10.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React15.createElement(
     import_editor_ui2.MenuListItem,
     {
       key: option,
@@ -734,7 +771,7 @@ function useUnitPlaceholder(value) {
     showPrimaryColor
   };
 }
-var StyledButton = (0, import_ui9.styled)(import_ui9.Button, {
+var StyledButton = (0, import_ui10.styled)(import_ui10.Button, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -744,7 +781,6 @@ var StyledButton = (0, import_ui9.styled)(import_ui9.Button, {
 }));
 
 // src/components/size-control/size-input.tsx
-var RESTRICTED_INPUT_KEYS = ["e", "E", "+", "-"];
 var SizeInput = ({
   units: units2,
   handleUnitChange,
@@ -757,9 +793,10 @@ var SizeInput = ({
   size,
   unit,
   popupState,
-  disabled
+  disabled,
+  min
 }) => {
-  const unitInputBufferRef = (0, import_react8.useRef)("");
+  const unitInputBufferRef = (0, import_react9.useRef)("");
   const inputType = isUnitExtendedOption(unit) ? "text" : "number";
   const inputValue = !isUnitExtendedOption(unit) && Number.isNaN(size) ? "" : size ?? "";
   const handleKeyUp = (event) => {
@@ -780,14 +817,14 @@ var SizeInput = ({
     "aria-controls": popupState.isOpen ? popupState.popupId : void 0,
     "aria-haspopup": true
   };
-  const inputProps = {
+  const InputProps = {
     ...popupAttributes,
     readOnly: isUnitExtendedOption(unit),
     autoComplete: "off",
     onClick,
     onFocus,
-    startAdornment: startIcon ? /* @__PURE__ */ React15.createElement(import_ui10.InputAdornment, { position: "start", disabled }, startIcon) : void 0,
-    endAdornment: /* @__PURE__ */ React15.createElement(
+    startAdornment: startIcon ? /* @__PURE__ */ React16.createElement(import_ui11.InputAdornment, { position: "start", disabled }, startIcon) : void 0,
+    endAdornment: /* @__PURE__ */ React16.createElement(
       SelectionEndAdornment,
       {
         disabled,
@@ -795,7 +832,7 @@ var SizeInput = ({
         onClick: handleUnitChange,
         value: unit,
         alternativeOptionLabels: {
-          custom: /* @__PURE__ */ React15.createElement(import_icons2.MathFunctionIcon, { fontSize: "tiny" })
+          custom: /* @__PURE__ */ React16.createElement(import_icons2.MathFunctionIcon, { fontSize: "tiny" })
         },
         menuItemsAttributes: units2.includes("custom") ? {
           custom: popupAttributes
@@ -803,7 +840,7 @@ var SizeInput = ({
       }
     )
   };
-  return /* @__PURE__ */ React15.createElement(ControlActions, null, /* @__PURE__ */ React15.createElement(import_ui10.Box, null, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(import_ui11.Box, null, /* @__PURE__ */ React16.createElement(
     TextFieldInnerSelection,
     {
       disabled,
@@ -811,31 +848,27 @@ var SizeInput = ({
       type: inputType,
       value: inputValue,
       onChange: handleSizeChange,
-      onKeyDown: (event) => {
-        if (RESTRICTED_INPUT_KEYS.includes(event.key)) {
-          event.preventDefault();
-        }
-      },
       onKeyUp: handleKeyUp,
       onBlur,
-      inputProps,
+      InputProps,
+      inputProps: { min, step: "any" },
       isPopoverOpen: popupState.isOpen
     }
   )));
 };
 
 // src/components/text-field-popover.tsx
-var React16 = __toESM(require("react"));
-var import_react9 = require("react");
+var React17 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons3 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
+var import_ui12 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
 var SIZE = "tiny";
 var TextFieldPopover = (props) => {
   const { popupState, restoreValue, anchorRef, value, onChange } = props;
-  const inputRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const inputRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => {
         if (inputRef.current) {
@@ -848,8 +881,8 @@ var TextFieldPopover = (props) => {
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React16.createElement(
-    import_ui11.Popover,
+  return /* @__PURE__ */ React17.createElement(
+    import_ui12.Popover,
     {
       disablePortal: true,
       slotProps: {
@@ -860,21 +893,21 @@ var TextFieldPopover = (props) => {
           }
         }
       },
-      ...(0, import_ui11.bindPopover)(popupState),
+      ...(0, import_ui12.bindPopover)(popupState),
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement(
       import_editor_ui3.PopoverHeader,
       {
         title: (0, import_i18n3.__)("CSS function", "elementor"),
         onClose: handleClose,
-        icon: /* @__PURE__ */ React16.createElement(import_icons3.MathFunctionIcon, { fontSize: SIZE })
+        icon: /* @__PURE__ */ React17.createElement(import_icons3.MathFunctionIcon, { fontSize: SIZE })
       }
     ),
-    /* @__PURE__ */ React16.createElement(
-      import_ui11.TextField,
+    /* @__PURE__ */ React17.createElement(
+      import_ui12.TextField,
       {
         value,
         onChange,
@@ -891,9 +924,9 @@ var TextFieldPopover = (props) => {
 };
 
 // src/hooks/use-size-extended-options.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useSizeExtendedOptions(options, disableCustom) {
-  return (0, import_react10.useMemo)(() => {
+  return (0, import_react11.useMemo)(() => {
     const extendedOptions = [...options];
     if (!disableCustom && !extendedOptions.includes("custom")) {
       extendedOptions.push("custom");
@@ -905,7 +938,7 @@ function useSizeExtendedOptions(options, disableCustom) {
 }
 
 // src/hooks/use-sync-external-state.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var useSyncExternalState = ({
   external,
   setExternal,
@@ -924,15 +957,15 @@ var useSyncExternalState = ({
     }
     return externalValue;
   }
-  const [internal, setInternal] = (0, import_react11.useState)(toInternal(external, null));
-  (0, import_react11.useEffect)(() => {
+  const [internal, setInternal] = (0, import_react12.useState)(toInternal(external, null));
+  (0, import_react12.useEffect)(() => {
     setInternal((prevInternal) => toInternal(external, prevInternal));
   }, [external]);
-  const setInternalValue = (setter) => {
+  const setInternalValue = (setter, options, meta) => {
     const setterFn = typeof setter === "function" ? setter : () => setter;
     const updated = setterFn(internal);
     setInternal(updated);
-    setExternal(toExternal(updated));
+    setExternal(toExternal(updated), options, meta);
   };
   return [internal, setInternalValue];
 };
@@ -957,7 +990,8 @@ var SizeControl = createControl(
     startIcon,
     anchorRef,
     extendedOptions,
-    disableCustom
+    disableCustom,
+    min = 0
   }) => {
     const {
       value: sizeValue,
@@ -968,13 +1002,13 @@ var SizeControl = createControl(
     } = useBoundProp(import_editor_props7.sizePropTypeUtil);
     const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[variant];
     const actualUnits = units2 ?? [...defaultUnits[variant]];
-    const [internalState, setInternalState] = (0, import_react12.useState)(createStateFromSizeProp(sizeValue, actualDefaultUnit));
+    const [internalState, setInternalState] = (0, import_react13.useState)(createStateFromSizeProp(sizeValue, actualDefaultUnit));
     const activeBreakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
     const actualExtendedOptions = useSizeExtendedOptions(extendedOptions || [], disableCustom ?? false);
-    const popupState = (0, import_ui12.usePopupState)({ variant: "popover" });
+    const popupState = (0, import_ui13.usePopupState)({ variant: "popover" });
     const [state, setState] = useSyncExternalState({
       external: internalState,
-      setExternal: (newState) => setSizeValue(extractValueFromState(newState)),
+      setExternal: (newState, options, meta) => setSizeValue(extractValueFromState(newState), options, meta),
       persistWhen: (newState) => {
         if (!newState?.unit) {
           return false;
@@ -998,23 +1032,28 @@ var SizeControl = createControl(
       setState((prev) => ({ ...prev, unit: newUnit }));
     };
     const handleSizeChange = (event) => {
-      const { value: size } = event.target;
+      const size = event.target.value;
+      const isInputValid = event.target.validity.valid;
       if (controlUnit === "auto") {
         setState((prev) => ({ ...prev, unit: controlUnit }));
         return;
       }
-      setState((prev) => ({
-        ...prev,
-        [controlUnit === "custom" ? "custom" : "numeric"]: formatSize(size, controlUnit),
-        unit: controlUnit
-      }));
+      setState(
+        (prev) => ({
+          ...prev,
+          [controlUnit === "custom" ? "custom" : "numeric"]: formatSize(size, controlUnit),
+          unit: controlUnit
+        }),
+        void 0,
+        { validation: () => isInputValid }
+      );
     };
     const onInputClick = (event) => {
       if (event.target.closest("input") && "custom" === state.unit) {
         popupState.open(anchorRef?.current);
       }
     };
-    (0, import_react12.useEffect)(() => {
+    (0, import_react13.useEffect)(() => {
       const newState = createStateFromSizeProp(
         sizeValue,
         state.unit === "custom" ? state.unit : actualDefaultUnit,
@@ -1036,13 +1075,13 @@ var SizeControl = createControl(
       }
       setState(newState);
     }, [sizeValue]);
-    (0, import_react12.useEffect)(() => {
+    (0, import_react13.useEffect)(() => {
       const newState = createStateFromSizeProp(sizeValue, actualDefaultUnit, "", state.custom);
       if (activeBreakpoint && !areStatesEqual(newState, state)) {
         setState(newState);
       }
     }, [activeBreakpoint]);
-    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
       SizeInput,
       {
         disabled,
@@ -1055,9 +1094,10 @@ var SizeControl = createControl(
         handleUnitChange,
         onBlur: restoreValue,
         onClick: onInputClick,
-        popupState
+        popupState,
+        min
       }
-    ), anchorRef?.current && /* @__PURE__ */ React17.createElement(
+    ), anchorRef?.current && /* @__PURE__ */ React18.createElement(
       TextFieldPopover,
       {
         popupState,
@@ -1111,21 +1151,21 @@ function areStatesEqual(state1, state2) {
 }
 
 // src/controls/stroke-control.tsx
-var React20 = __toESM(require("react"));
-var import_react13 = require("react");
+var React21 = __toESM(require("react"));
+var import_react14 = require("react");
 var import_editor_props9 = require("@elementor/editor-props");
-var import_ui15 = require("@elementor/ui");
+var import_ui16 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 
 // src/components/section-content.tsx
-var React18 = __toESM(require("react"));
-var import_ui13 = require("@elementor/ui");
-var SectionContent = ({ gap = 0.5, sx, children }) => /* @__PURE__ */ React18.createElement(import_ui13.Stack, { gap, sx: { ...sx } }, children);
+var React19 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
+var SectionContent = ({ gap = 0.5, sx, children }) => /* @__PURE__ */ React19.createElement(import_ui14.Stack, { gap, sx: { ...sx } }, children);
 
 // src/controls/color-control.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_editor_props8 = require("@elementor/editor-props");
-var import_ui14 = require("@elementor/ui");
+var import_ui15 = require("@elementor/ui");
 var ColorControl = createControl(
   ({ propTypeUtil = import_editor_props8.colorPropTypeUtil, anchorEl, slotProps = {}, ...props }) => {
     const { value, setValue, placeholder: boundPropPlaceholder, disabled } = useBoundProp(propTypeUtil);
@@ -1133,8 +1173,8 @@ var ColorControl = createControl(
     const handleChange = (selectedColor) => {
       setValue(selectedColor || null);
     };
-    return /* @__PURE__ */ React19.createElement(ControlActions, null, /* @__PURE__ */ React19.createElement(
-      import_ui14.UnstableColorField,
+    return /* @__PURE__ */ React20.createElement(ControlActions, null, /* @__PURE__ */ React20.createElement(
+      import_ui15.UnstableColorField,
       {
         size: "tiny",
         fullWidth: true,
@@ -1174,48 +1214,48 @@ var ColorControl = createControl(
 var units = ["px", "em", "rem"];
 var StrokeControl = createControl(() => {
   const propContext = useBoundProp(import_editor_props9.strokePropTypeUtil);
-  const rowRef = (0, import_react13.useRef)(null);
-  return /* @__PURE__ */ React20.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React20.createElement(SectionContent, null, /* @__PURE__ */ React20.createElement(Control, { bind: "width", label: (0, import_i18n4.__)("Stroke width", "elementor"), ref: rowRef }, /* @__PURE__ */ React20.createElement(SizeControl, { units, anchorRef: rowRef })), /* @__PURE__ */ React20.createElement(Control, { bind: "color", label: (0, import_i18n4.__)("Stroke color", "elementor") }, /* @__PURE__ */ React20.createElement(ColorControl, null))));
+  const rowRef = (0, import_react14.useRef)(null);
+  return /* @__PURE__ */ React21.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React21.createElement(SectionContent, null, /* @__PURE__ */ React21.createElement(Control, { bind: "width", label: (0, import_i18n4.__)("Stroke width", "elementor"), ref: rowRef }, /* @__PURE__ */ React21.createElement(SizeControl, { units, anchorRef: rowRef })), /* @__PURE__ */ React21.createElement(Control, { bind: "color", label: (0, import_i18n4.__)("Stroke color", "elementor") }, /* @__PURE__ */ React21.createElement(ColorControl, null))));
 });
-var Control = (0, import_react13.forwardRef)(({ bind, label, children }, ref) => /* @__PURE__ */ React20.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React20.createElement(import_ui15.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React20.createElement(import_ui15.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React20.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React20.createElement(import_ui15.Grid, { item: true, xs: 6 }, children))));
+var Control = (0, import_react14.forwardRef)(({ bind, label, children }, ref) => /* @__PURE__ */ React21.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React21.createElement(import_ui16.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React21.createElement(import_ui16.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React21.createElement(import_ui16.Grid, { item: true, xs: 6 }, children))));
 
 // src/controls/box-shadow-repeater-control.tsx
-var React27 = __toESM(require("react"));
-var import_react17 = require("react");
+var React28 = __toESM(require("react"));
+var import_react18 = require("react");
 var import_editor_props10 = require("@elementor/editor-props");
-var import_ui20 = require("@elementor/ui");
+var import_ui21 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/popover-content.tsx
-var React21 = __toESM(require("react"));
-var import_ui16 = require("@elementor/ui");
-var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React21.createElement(import_ui16.Stack, { ...props, gap }, children);
-
-// src/components/popover-grid-container.tsx
-var import_react14 = require("react");
 var React22 = __toESM(require("react"));
 var import_ui17 = require("@elementor/ui");
-var PopoverGridContainer = (0, import_react14.forwardRef)(
-  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React22.createElement(import_ui17.Grid, { container: true, gap, alignItems, flexWrap, ref }, children)
+var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React22.createElement(import_ui17.Stack, { ...props, gap }, children);
+
+// src/components/popover-grid-container.tsx
+var import_react15 = require("react");
+var React23 = __toESM(require("react"));
+var import_ui18 = require("@elementor/ui");
+var PopoverGridContainer = (0, import_react15.forwardRef)(
+  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap, alignItems, flexWrap, ref }, children)
 );
 
 // src/components/repeater.tsx
-var React26 = __toESM(require("react"));
-var import_react16 = require("react");
+var React27 = __toESM(require("react"));
+var import_react17 = require("react");
 var import_icons5 = require("@elementor/icons");
-var import_ui19 = require("@elementor/ui");
+var import_ui20 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
 
 // src/control-adornments/control-adornments.tsx
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 
 // src/control-adornments/control-adornments-context.tsx
-var React23 = __toESM(require("react"));
-var import_react15 = require("react");
-var Context2 = (0, import_react15.createContext)(null);
-var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React23.createElement(Context2.Provider, { value: { items: items2 } }, children);
+var React24 = __toESM(require("react"));
+var import_react16 = require("react");
+var Context2 = (0, import_react16.createContext)(null);
+var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React24.createElement(Context2.Provider, { value: { items: items2 } }, children);
 var useControlAdornments = () => {
-  const context = (0, import_react15.useContext)(Context2);
+  const context = (0, import_react16.useContext)(Context2);
   return context?.items ?? [];
 };
 
@@ -1225,19 +1265,19 @@ function ControlAdornments() {
   if (items2?.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React24.createElement(Adornment, { key: id })));
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React25.createElement(Adornment, { key: id })));
 }
 
 // src/components/sortable.tsx
-var React25 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_icons4 = require("@elementor/icons");
-var import_ui18 = require("@elementor/ui");
+var import_ui19 = require("@elementor/ui");
 var SortableProvider = (props) => {
-  return /* @__PURE__ */ React25.createElement(import_ui18.List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React25.createElement(import_ui18.UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
+  return /* @__PURE__ */ React26.createElement(import_ui19.List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React26.createElement(import_ui19.UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
 };
 var SortableItem = ({ id, children, disabled }) => {
-  return /* @__PURE__ */ React25.createElement(
-    import_ui18.UnstableSortableItem,
+  return /* @__PURE__ */ React26.createElement(
+    import_ui19.UnstableSortableItem,
     {
       id,
       disabled,
@@ -1249,12 +1289,12 @@ var SortableItem = ({ id, children, disabled }) => {
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React25.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React25.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React25.createElement(StyledDivider, { style: dropIndicationStyle }));
+        return /* @__PURE__ */ React26.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React26.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React26.createElement(StyledDivider, { style: dropIndicationStyle }));
       }
     }
   );
 };
-var StyledListItem = (0, import_ui18.styled)(import_ui18.ListItem)`
+var StyledListItem = (0, import_ui19.styled)(import_ui19.ListItem)`
 	position: relative;
 	margin-inline: 0px;
 	padding-inline: 0px;
@@ -1283,8 +1323,8 @@ var StyledListItem = (0, import_ui18.styled)(import_ui18.ListItem)`
 		}
 	}
 `;
-var SortableTrigger = (props) => /* @__PURE__ */ React25.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React25.createElement(import_icons4.GripVerticalIcon, { fontSize: "tiny" }));
-var StyledDivider = (0, import_ui18.styled)(import_ui18.Divider)`
+var SortableTrigger = (props) => /* @__PURE__ */ React26.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React26.createElement(import_icons4.GripVerticalIcon, { fontSize: "tiny" }));
+var StyledDivider = (0, import_ui19.styled)(import_ui19.Divider)`
 	height: 0px;
 	border: none;
 	overflow: visible;
@@ -1324,14 +1364,14 @@ var Repeater = ({
   isSortable = true,
   collectionPropUtil
 }) => {
-  const [openItem, setOpenItem] = (0, import_react16.useState)(EMPTY_OPEN_ITEM);
+  const [openItem, setOpenItem] = (0, import_react17.useState)(EMPTY_OPEN_ITEM);
   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_react16.useState)(items2.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = (0, import_react17.useState)(items2.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -1388,8 +1428,8 @@ var Repeater = ({
       });
     });
   };
-  return /* @__PURE__ */ React26.createElement(SectionContent, null, /* @__PURE__ */ React26.createElement(
-    import_ui19.Stack,
+  return /* @__PURE__ */ React27.createElement(SectionContent, null, /* @__PURE__ */ React27.createElement(
+    import_ui20.Stack,
     {
       direction: "row",
       justifyContent: "start",
@@ -1397,10 +1437,10 @@ var Repeater = ({
       gap: 1,
       sx: { marginInlineEnd: -0.75 }
     },
-    /* @__PURE__ */ React26.createElement(import_ui19.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
-    /* @__PURE__ */ React26.createElement(ControlAdornments, null),
-    /* @__PURE__ */ React26.createElement(
-      import_ui19.IconButton,
+    /* @__PURE__ */ React27.createElement(import_ui20.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
+    /* @__PURE__ */ React27.createElement(ControlAdornments, null),
+    /* @__PURE__ */ React27.createElement(
+      import_ui20.IconButton,
       {
         size: SIZE2,
         sx: { ml: "auto" },
@@ -1408,20 +1448,20 @@ var Repeater = ({
         onClick: addRepeaterItem,
         "aria-label": (0, import_i18n5.__)("Add item", "elementor")
       },
-      /* @__PURE__ */ React26.createElement(import_icons5.PlusIcon, { fontSize: SIZE2 })
+      /* @__PURE__ */ React27.createElement(import_icons5.PlusIcon, { fontSize: SIZE2 })
     )
-  ), 0 < uniqueKeys.length && /* @__PURE__ */ React26.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
+  ), 0 < uniqueKeys.length && /* @__PURE__ */ React27.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React26.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React26.createElement(
+    return /* @__PURE__ */ React27.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React27.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React26.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React26.createElement(itemSettings.Label, { value })),
-        startIcon: /* @__PURE__ */ React26.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React26.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React27.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React27.createElement(itemSettings.Label, { value })),
+        startIcon: /* @__PURE__ */ React27.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React27.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -1431,7 +1471,7 @@ var Repeater = ({
         showToggle,
         collectionPropUtil
       },
-      (props) => /* @__PURE__ */ React26.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
+      (props) => /* @__PURE__ */ React27.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
   })));
 };
@@ -1450,13 +1490,13 @@ var RepeaterItem = ({
   disabled,
   collectionPropUtil
 }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react16.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react17.useState)(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = (0, import_i18n5.__)("Duplicate", "elementor");
   const toggleLabel = propDisabled ? (0, import_i18n5.__)("Show", "elementor") : (0, import_i18n5.__)("Hide", "elementor");
   const removeLabel = (0, import_i18n5.__)("Remove", "elementor");
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(
-    import_ui19.UnstableTag,
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(
+    import_ui20.UnstableTag,
     {
       disabled,
       label,
@@ -1465,12 +1505,12 @@ var RepeaterItem = ({
       ref: setRef,
       variant: "outlined",
       "aria-label": (0, import_i18n5.__)("Open item", "elementor"),
-      ...(0, import_ui19.bindTrigger)(popoverState),
+      ...(0, import_ui20.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React26.createElement(React26.Fragment, null, showDuplicate && /* @__PURE__ */ React26.createElement(import_ui19.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(import_ui19.IconButton, { size: SIZE2, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React26.createElement(import_icons5.CopyIcon, { fontSize: SIZE2 }))), showToggle && /* @__PURE__ */ React26.createElement(import_ui19.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(import_ui19.IconButton, { size: SIZE2, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React26.createElement(import_icons5.EyeOffIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React26.createElement(import_icons5.EyeIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React26.createElement(import_ui19.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(import_ui19.IconButton, { size: SIZE2, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React26.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))))
+      actions: /* @__PURE__ */ React27.createElement(React27.Fragment, null, showDuplicate && /* @__PURE__ */ React27.createElement(import_ui20.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(import_ui20.IconButton, { size: SIZE2, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React27.createElement(import_icons5.CopyIcon, { fontSize: SIZE2 }))), showToggle && /* @__PURE__ */ React27.createElement(import_ui20.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(import_ui20.IconButton, { size: SIZE2, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React27.createElement(import_icons5.EyeOffIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React27.createElement(import_icons5.EyeIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React27.createElement(import_ui20.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(import_ui20.IconButton, { size: SIZE2, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React27.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))))
     }
-  ), /* @__PURE__ */ React26.createElement(
-    import_ui19.Popover,
+  ), /* @__PURE__ */ React27.createElement(
+    import_ui20.Popover,
     {
       disablePortal: true,
       slotProps: {
@@ -1483,14 +1523,14 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React26.createElement(import_ui19.Box, null, children({ anchorEl, collectionPropUtil }))
+    /* @__PURE__ */ React27.createElement(import_ui20.Box, null, children({ anchorEl, collectionPropUtil }))
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react16.useState)(null);
-  const popoverState = (0, import_ui19.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui19.bindPopover)(popoverState);
-  (0, import_react16.useEffect)(() => {
+  const [ref, setRef] = (0, import_react17.useState)(null);
+  const popoverState = (0, import_ui20.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui20.bindPopover)(popoverState);
+  (0, import_react17.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -1507,7 +1547,7 @@ var usePopover = (openOnMount, onOpen) => {
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue, disabled } = useBoundProp(import_editor_props10.boxShadowPropTypeUtil);
-  return /* @__PURE__ */ React27.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React28.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -1524,14 +1564,14 @@ var BoxShadowRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemIcon = ({ value }) => /* @__PURE__ */ React27.createElement(import_ui20.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
+var ItemIcon = ({ value }) => /* @__PURE__ */ React28.createElement(import_ui21.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
 var ItemContent = ({ anchorEl, bind }) => {
-  return /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(Content, { anchorEl }));
+  return /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(Content, { anchorEl }));
 };
 var Content = ({ anchorEl }) => {
   const context = useBoundProp(import_editor_props10.shadowPropTypeUtil);
-  const rowRef = [(0, import_react17.useRef)(null), (0, import_react17.useRef)(null)];
-  return /* @__PURE__ */ React27.createElement(PropProvider, { ...context }, /* @__PURE__ */ React27.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React27.createElement(PopoverGridContainer, null, /* @__PURE__ */ React27.createElement(Control2, { bind: "color", label: (0, import_i18n6.__)("Color", "elementor") }, /* @__PURE__ */ React27.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React27.createElement(Control2, { bind: "position", label: (0, import_i18n6.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React27.createElement(
+  const rowRef = [(0, import_react18.useRef)(null), (0, import_react18.useRef)(null)];
+  return /* @__PURE__ */ React28.createElement(PropProvider, { ...context }, /* @__PURE__ */ React28.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React28.createElement(PopoverGridContainer, null, /* @__PURE__ */ React28.createElement(Control2, { bind: "color", label: (0, import_i18n6.__)("Color", "elementor") }, /* @__PURE__ */ React28.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React28.createElement(Control2, { bind: "position", label: (0, import_i18n6.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React28.createElement(
     SelectControl,
     {
       options: [
@@ -1539,14 +1579,14 @@ var Content = ({ anchorEl }) => {
         { label: (0, import_i18n6.__)("Outset", "elementor"), value: null }
       ]
     }
-  ))), /* @__PURE__ */ React27.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React27.createElement(Control2, { bind: "hOffset", label: (0, import_i18n6.__)("Horizontal", "elementor") }, /* @__PURE__ */ React27.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React27.createElement(Control2, { bind: "vOffset", label: (0, import_i18n6.__)("Vertical", "elementor") }, /* @__PURE__ */ React27.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React27.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React27.createElement(Control2, { bind: "blur", label: (0, import_i18n6.__)("Blur", "elementor") }, /* @__PURE__ */ React27.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React27.createElement(Control2, { bind: "spread", label: (0, import_i18n6.__)("Spread", "elementor") }, /* @__PURE__ */ React27.createElement(SizeControl, { anchorRef: rowRef[1] })))));
+  ))), /* @__PURE__ */ React28.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React28.createElement(Control2, { bind: "hOffset", label: (0, import_i18n6.__)("Horizontal", "elementor") }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React28.createElement(Control2, { bind: "vOffset", label: (0, import_i18n6.__)("Vertical", "elementor") }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React28.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React28.createElement(Control2, { bind: "blur", label: (0, import_i18n6.__)("Blur", "elementor") }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React28.createElement(Control2, { bind: "spread", label: (0, import_i18n6.__)("Spread", "elementor") }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef[1] })))));
 };
 var Control2 = ({
   label,
   bind,
   children,
   sx
-}) => /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(import_ui20.Grid, { item: true, xs: 6, sx }, /* @__PURE__ */ React27.createElement(import_ui20.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui20.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(import_ui20.FormLabel, { size: "tiny" }, label)), /* @__PURE__ */ React27.createElement(import_ui20.Grid, { item: true, xs: 12 }, children))));
+}) => /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(import_ui21.Grid, { item: true, xs: 6, sx }, /* @__PURE__ */ React28.createElement(import_ui21.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(import_ui21.FormLabel, { size: "tiny" }, label)), /* @__PURE__ */ React28.createElement(import_ui21.Grid, { item: true, xs: 12 }, children))));
 var ItemLabel = ({ value }) => {
   const { position, hOffset, vOffset, blur, spread } = value.value;
   const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
@@ -1560,7 +1600,7 @@ var ItemLabel = ({ value }) => {
     blurSize + blurUnit,
     spreadSize + spreadUnit
   ].join(" ");
-  return /* @__PURE__ */ React27.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
+  return /* @__PURE__ */ React28.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
 };
 var initialShadow = {
   $$type: "shadow",
@@ -1590,18 +1630,18 @@ var initialShadow = {
 };
 
 // src/controls/filter-repeater-control.tsx
-var React30 = __toESM(require("react"));
-var import_react19 = require("react");
+var React31 = __toESM(require("react"));
+var import_react20 = require("react");
 var import_editor_props12 = require("@elementor/editor-props");
 var import_editor_props13 = require("@elementor/editor-props");
-var import_ui23 = require("@elementor/ui");
+var import_ui24 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 
 // src/controls/filter-control/drop-shadow-item-content.tsx
-var React28 = __toESM(require("react"));
-var import_react18 = require("react");
+var React29 = __toESM(require("react"));
+var import_react19 = require("react");
 var import_editor_props11 = require("@elementor/editor-props");
-var import_ui21 = require("@elementor/ui");
+var import_ui22 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 var items = [
   {
@@ -1630,19 +1670,19 @@ var DropShadowItemContent = ({
   anchorEl
 }) => {
   const context = useBoundProp(import_editor_props11.dropShadowFilterPropTypeUtil);
-  const rowRefs = [(0, import_react18.useRef)(null), (0, import_react18.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_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React28.createElement(import_ui21.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" }))))));
+  const rowRefs = [(0, import_react19.useRef)(null), (0, import_react19.useRef)(null)];
+  return /* @__PURE__ */ React29.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React29.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React29.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React29.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_ui22 = require("@elementor/ui");
+var React30 = __toESM(require("react"));
+var import_ui23 = require("@elementor/ui");
 var DropShadowItemLabel = ({ value }) => {
   const { xAxis, yAxis, blur } = value.value.args.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_ui22.Box, { component: "span" }, /* @__PURE__ */ React29.createElement(import_ui22.Box, { component: "span", style: { textTransform: "capitalize" } }, "Drop shadow:"), `${xValue} ${yValue} ${blurValue}`);
+  return /* @__PURE__ */ React30.createElement(import_ui23.Box, { component: "span" }, /* @__PURE__ */ React30.createElement(import_ui23.Box, { component: "span", style: { textTransform: "capitalize" } }, "Drop shadow:"), `${xValue} ${yValue} ${blurValue}`);
 };
 
 // src/controls/filter-repeater-control.tsx
@@ -1772,7 +1812,7 @@ var isSingleSize = (key) => {
 var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
   const [propUtil, label] = filterPropName === "backdrop-filter" ? [import_editor_props13.backdropFilterPropTypeUtil, (0, import_i18n8.__)("Backdrop Filters", "elementor")] : [import_editor_props12.filterPropTypeUtil, (0, import_i18n8.__)("Filters", "elementor")];
   const { propType, value: filterValues, setValue, disabled } = useBoundProp(propUtil);
-  return /* @__PURE__ */ React30.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React31.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -1790,21 +1830,21 @@ var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
     }
   ));
 });
-var StyledUnstableColorIndicator = (0, import_ui23.styled)(import_ui23.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui24.styled)(import_ui24.UnstableColorIndicator)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
 }));
 var ItemIcon2 = ({ value }) => {
-  return isSingleSize(value.value.func.value ?? "") ? /* @__PURE__ */ React30.createElement(React30.Fragment, null) : /* @__PURE__ */ React30.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.args.value.color.value });
+  return isSingleSize(value.value.func.value ?? "") ? /* @__PURE__ */ React31.createElement(React31.Fragment, null) : /* @__PURE__ */ React31.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.args.value.color.value });
 };
 var ItemLabel2 = ({ value }) => {
-  return isSingleSize(value.value.func.value ?? "") ? /* @__PURE__ */ React30.createElement(SingleSizeItemLabel, { value }) : /* @__PURE__ */ React30.createElement(DropShadowItemLabel, { value });
+  return isSingleSize(value.value.func.value ?? "") ? /* @__PURE__ */ React31.createElement(SingleSizeItemLabel, { value }) : /* @__PURE__ */ React31.createElement(DropShadowItemLabel, { value });
 };
 var SingleSizeItemLabel = ({ value }) => {
   const { func, args } = value.value;
   const defaultUnit = filterConfig[func.value ?? ""].defaultValue.value.args.value.unit ?? lengthUnits[0];
   const { unit, size } = args.value ?? { unit: defaultUnit, size: 0 };
-  const label = /* @__PURE__ */ React30.createElement(import_ui23.Box, { component: "span", style: { textTransform: "capitalize" } }, func.value ?? "", ":");
-  return /* @__PURE__ */ React30.createElement(import_ui23.Box, { component: "span" }, label, unit !== "custom" ? ` ${size ?? 0}${unit ?? defaultUnit}` : size);
+  const label = /* @__PURE__ */ React31.createElement(import_ui24.Box, { component: "span", style: { textTransform: "capitalize" } }, func.value ?? "", ":");
+  return /* @__PURE__ */ React31.createElement(import_ui24.Box, { component: "span" }, label, unit !== "custom" ? ` ${size ?? 0}${unit ?? defaultUnit}` : size);
 };
 var ItemContent2 = ({
   bind,
@@ -1814,7 +1854,7 @@ var ItemContent2 = ({
   const { value: filterValues = [] } = useBoundProp(collectionPropUtil ?? import_editor_props12.filterPropTypeUtil);
   const itemIndex = parseInt(bind, 10);
   const item = filterValues?.[itemIndex];
-  return item ? /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(PropContent, { item, anchorEl })) : null;
+  return item ? /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React31.createElement(PropContent, { item, anchorEl })) : null;
 };
 var PropContent = ({ item, anchorEl }) => {
   const propContext = useBoundProp(import_editor_props12.cssFilterFunctionPropUtil);
@@ -1829,7 +1869,7 @@ var PropContent = ({ item, anchorEl }) => {
     }
     propContext.setValue(newValue);
   };
-  return /* @__PURE__ */ React30.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React30.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, (0, import_i18n8.__)("Filter", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "func" }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React31.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React31.createElement(PopoverGridContainer, null, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, (0, import_i18n8.__)("Filter", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "func" }, /* @__PURE__ */ React31.createElement(
     SelectControl,
     {
       options: filterKeys.map((filterKey) => ({
@@ -1837,44 +1877,44 @@ var PropContent = ({ item, anchorEl }) => {
         value: filterKey
       }))
     }
-  )))), /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "args" }, /* @__PURE__ */ React30.createElement(Content2, { filterType: item?.value.func, anchorEl }))));
+  )))), /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "args" }, /* @__PURE__ */ React31.createElement(Content2, { filterType: item?.value.func, anchorEl }))));
 };
 var Content2 = ({ filterType, anchorEl }) => {
   const filterName = filterType?.value || DEFAULT_FILTER;
   const filterItemConfig = filterConfig[filterName];
   const { units: units2 = [] } = filterItemConfig;
-  return isSingleSize(filterName) ? /* @__PURE__ */ React30.createElement(SingleSizeItemContent, { filterType: filterName }) : /* @__PURE__ */ React30.createElement(DropShadowItemContent, { units: units2, anchorEl });
+  return isSingleSize(filterName) ? /* @__PURE__ */ React31.createElement(SingleSizeItemContent, { filterType: filterName }) : /* @__PURE__ */ React31.createElement(DropShadowItemContent, { units: units2, anchorEl });
 };
 var SingleSizeItemContent = ({ filterType }) => {
   const { valueName, defaultValue, units: units2 } = filterConfig[filterType];
-  const rowRef = (0, import_react19.useRef)(null);
+  const rowRef = (0, import_react20.useRef)(null);
   const defaultUnit = defaultValue.value.args.value.unit;
-  return /* @__PURE__ */ React30.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, valueName)), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(SizeControl, { anchorRef: rowRef, units: units2, defaultUnit })));
+  return /* @__PURE__ */ React31.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, valueName)), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(SizeControl, { anchorRef: rowRef, units: units2, defaultUnit })));
 };
 
 // src/controls/toggle-control.tsx
-var React33 = __toESM(require("react"));
+var React34 = __toESM(require("react"));
 var import_editor_props14 = require("@elementor/editor-props");
 
 // src/components/control-toggle-button-group.tsx
-var React32 = __toESM(require("react"));
-var import_react20 = require("react");
+var React33 = __toESM(require("react"));
+var import_react21 = require("react");
 var import_icons6 = require("@elementor/icons");
-var import_ui25 = require("@elementor/ui");
+var import_ui26 = require("@elementor/ui");
 
 // src/components/conditional-tooltip.tsx
-var React31 = __toESM(require("react"));
-var import_ui24 = require("@elementor/ui");
+var React32 = __toESM(require("react"));
+var import_ui25 = require("@elementor/ui");
 var ConditionalTooltip = ({
   showTooltip,
   children,
   label
 }) => {
-  return showTooltip && label ? /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
+  return showTooltip && label ? /* @__PURE__ */ React32.createElement(import_ui25.Tooltip, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
 };
 
 // src/components/control-toggle-button-group.tsx
-var StyledToggleButtonGroup = (0, import_ui25.styled)(import_ui25.ToggleButtonGroup)`
+var StyledToggleButtonGroup = (0, import_ui26.styled)(import_ui26.ToggleButtonGroup)`
 	${({ justify }) => `justify-content: ${justify};`}
 	button:not( :last-of-type ) {
 		border-start-end-radius: 0;
@@ -1889,7 +1929,7 @@ var StyledToggleButtonGroup = (0, import_ui25.styled)(import_ui25.ToggleButtonGr
 		border-end-end-radius: 8px;
 	}
 `;
-var StyledToggleButton = (0, import_ui25.styled)(import_ui25.ToggleButton, {
+var StyledToggleButton = (0, import_ui26.styled)(import_ui26.ToggleButton, {
   shouldForwardProp: (prop) => prop !== "isPlaceholder"
 })`
 	${({ theme, isPlaceholder }) => isPlaceholder && `
@@ -1916,12 +1956,12 @@ var ControlToggleButtonGroup = ({
   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 theme = (0, import_ui25.useTheme)();
+  const theme = (0, import_ui26.useTheme)();
   const isRtl = "rtl" === theme.direction;
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  const getGridTemplateColumns = (0, import_react20.useMemo)(() => {
+  const getGridTemplateColumns = (0, import_react21.useMemo)(() => {
     const isOffLimits = menuItems?.length;
     const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
@@ -1945,7 +1985,7 @@ var ControlToggleButtonGroup = ({
     return [];
   };
   const placeholderArray = getPlaceholderArray(placeholder);
-  return /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(
     StyledToggleButtonGroup,
     {
       justify,
@@ -1962,14 +2002,14 @@ var ControlToggleButtonGroup = ({
     },
     fixedItems.map(({ label, value: buttonValue, renderContent: Content4, showTooltip }) => {
       const isPlaceholder = placeholderArray.length > 0 && placeholderArray.includes(buttonValue) && (shouldShowExclusivePlaceholder || shouldShowNonExclusivePlaceholder);
-      return /* @__PURE__ */ React32.createElement(
+      return /* @__PURE__ */ React33.createElement(
         ConditionalTooltip,
         {
           key: buttonValue,
           label,
           showTooltip: showTooltip || false
         },
-        /* @__PURE__ */ React32.createElement(
+        /* @__PURE__ */ React33.createElement(
           StyledToggleButton,
           {
             value: buttonValue,
@@ -1978,11 +2018,11 @@ var ControlToggleButtonGroup = ({
             fullWidth,
             isPlaceholder
           },
-          /* @__PURE__ */ React32.createElement(Content4, { size })
+          /* @__PURE__ */ React33.createElement(Content4, { size })
         )
       );
     }),
-    menuItems.length && exclusive && /* @__PURE__ */ React32.createElement(
+    menuItems.length && exclusive && /* @__PURE__ */ React33.createElement(
       SplitButtonGroup,
       {
         size,
@@ -2002,8 +2042,8 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items2, value);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react20.useState)(false);
-  const menuButtonRef = (0, import_react20.useRef)(null);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react21.useState)(false);
+  const menuButtonRef = (0, import_react21.useRef)(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -2016,8 +2056,8 @@ var SplitButtonGroup = ({
     const shouldRemove = newValue === value;
     onChange(shouldRemove ? null : newValue);
   };
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
-    import_ui25.ToggleButton,
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(
+    import_ui26.ToggleButton,
     {
       value: previewButton.value,
       "aria-label": previewButton.label,
@@ -2030,8 +2070,8 @@ var SplitButtonGroup = ({
       ref: menuButtonRef
     },
     previewButton.renderContent({ size })
-  ), /* @__PURE__ */ React32.createElement(
-    import_ui25.ToggleButton,
+  ), /* @__PURE__ */ React33.createElement(
+    import_ui26.ToggleButton,
     {
       size,
       "aria-expanded": isMenuOpen ? "true" : void 0,
@@ -2041,9 +2081,9 @@ var SplitButtonGroup = ({
       ref: menuButtonRef,
       value: "__chevron-icon-button__"
     },
-    /* @__PURE__ */ React32.createElement(import_icons6.ChevronDownIcon, { fontSize: size })
-  ), /* @__PURE__ */ React32.createElement(
-    import_ui25.Menu,
+    /* @__PURE__ */ React33.createElement(import_icons6.ChevronDownIcon, { fontSize: size })
+  ), /* @__PURE__ */ React33.createElement(
+    import_ui26.Menu,
     {
       open: isMenuOpen,
       onClose: () => setIsMenuOpen(false),
@@ -2060,22 +2100,22 @@ var SplitButtonGroup = ({
         mt: 0.5
       }
     },
-    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React32.createElement(
-      import_ui25.MenuItem,
+    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React33.createElement(
+      import_ui26.MenuItem,
       {
         key: buttonValue,
         selected: buttonValue === value,
         onClick: () => onMenuItemClick(buttonValue)
       },
-      /* @__PURE__ */ React32.createElement(import_ui25.ListItemText, null, /* @__PURE__ */ React32.createElement(import_ui25.Typography, { sx: { fontSize: "14px" } }, label))
+      /* @__PURE__ */ React33.createElement(import_ui26.ListItemText, null, /* @__PURE__ */ React33.createElement(import_ui26.Typography, { sx: { fontSize: "14px" } }, label))
     ))
   ));
 };
 var usePreviewButton = (items2, value) => {
-  const [previewButton, setPreviewButton] = (0, import_react20.useState)(
+  const [previewButton, setPreviewButton] = (0, import_react21.useState)(
     items2.find((item) => item.value === value) ?? items2[0]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -2108,7 +2148,7 @@ var ToggleControl = createControl(
       size,
       placeholder
     };
-    return exclusive ? /* @__PURE__ */ React33.createElement(
+    return exclusive ? /* @__PURE__ */ React34.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -2117,7 +2157,7 @@ var ToggleControl = createControl(
         disabled,
         exclusive: true
       }
-    ) : /* @__PURE__ */ React33.createElement(
+    ) : /* @__PURE__ */ React34.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -2131,48 +2171,48 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-var React34 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 var import_editor_props15 = require("@elementor/editor-props");
-var import_ui26 = require("@elementor/ui");
+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(
   ({
     placeholder: labelPlaceholder,
-    max = Number.MAX_VALUE,
-    min = -Number.MAX_VALUE,
+    max = Number.MAX_SAFE_INTEGER,
+    min = -Number.MAX_SAFE_INTEGER,
     step = 1,
     shouldForceInt = false,
     startIcon
   }) => {
-    const { value, setValue, placeholder, disabled } = useBoundProp(import_editor_props15.numberPropTypeUtil);
+    const { value, setValue, placeholder, disabled, restoreValue } = useBoundProp(import_editor_props15.numberPropTypeUtil);
     const handleChange = (event) => {
-      const eventValue = event.target.value;
+      const {
+        value: eventValue,
+        validity: { valid: isInputValid }
+      } = event.target;
+      let updatedValue;
       if (isEmptyOrNaN(eventValue)) {
-        setValue(null);
-        return;
+        updatedValue = null;
+      } else {
+        const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
+        updatedValue = Math.min(Math.max(formattedValue, min), max);
       }
-      const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
-      setValue(Math.min(Math.max(formattedValue, min), max));
+      setValue(updatedValue, void 0, { validation: () => isInputValid });
     };
-    return /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
-      import_ui26.TextField,
+    return /* @__PURE__ */ React35.createElement(ControlActions, null, /* @__PURE__ */ React35.createElement(
+      NumberInput,
       {
         size: "tiny",
         type: "number",
         fullWidth: true,
         disabled,
         value: isEmptyOrNaN(value) ? "" : value,
-        onChange: handleChange,
+        onInput: handleChange,
+        onBlur: restoreValue,
         placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
-        inputProps: { step },
+        inputProps: { step, min },
         InputProps: {
-          startAdornment: startIcon ? /* @__PURE__ */ React34.createElement(import_ui26.InputAdornment, { position: "start", disabled }, startIcon) : void 0
-        },
-        onKeyDown: (event) => {
-          if (RESTRICTED_INPUT_KEYS2.includes(event.key)) {
-            event.preventDefault();
-          }
+          startAdornment: startIcon ? /* @__PURE__ */ React35.createElement(import_ui27.InputAdornment, { position: "start", disabled }, startIcon) : void 0
         }
       }
     ));
@@ -2180,17 +2220,17 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-var React36 = __toESM(require("react"));
-var import_react21 = require("react");
+var React37 = __toESM(require("react"));
+var import_react22 = require("react");
 var import_editor_props16 = require("@elementor/editor-props");
-var import_ui28 = require("@elementor/ui");
+var import_ui29 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/control-label.tsx
-var React35 = __toESM(require("react"));
-var import_ui27 = require("@elementor/ui");
+var React36 = __toESM(require("react"));
+var import_ui28 = require("@elementor/ui");
 var ControlLabel = ({ children }) => {
-  return /* @__PURE__ */ React35.createElement(import_ui27.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React35.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React35.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React36.createElement(import_ui28.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React36.createElement(ControlAdornments, null));
 };
 
 // src/controls/equal-unequal-sizes-control.tsx
@@ -2211,8 +2251,8 @@ function EqualUnequalSizesControl({
   items: items2,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react21.useId)();
-  const popupState = (0, import_ui28.usePopupState)({ variant: "popover", popupId });
+  const popupId = (0, import_react22.useId)();
+  const popupState = (0, import_ui29.usePopupState)({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
     value: multiSizeValue,
@@ -2220,7 +2260,7 @@ function EqualUnequalSizesControl({
     disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
   const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props16.sizePropTypeUtil);
-  const rowRefs = [(0, import_react21.useRef)(null), (0, import_react21.useRef)(null)];
+  const rowRefs = [(0, import_react22.useRef)(null), (0, import_react22.useRef)(null)];
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
@@ -2249,25 +2289,25 @@ function EqualUnequalSizesControl({
   };
   const isShowingGeneralIndicator = !popupState.isOpen;
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React36.createElement(import_ui28.Grid, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React36.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React36.createElement(ControlLabel, null, label)), /* @__PURE__ */ React36.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(import_ui28.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(import_ui29.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React37.createElement(import_ui29.Grid, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React37.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React37.createElement(ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(import_ui29.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React37.createElement(
     SizeControl,
     {
       placeholder: isMixed ? (0, import_i18n9.__)("Mixed", "elementor") : void 0,
       anchorRef: rowRefs[0]
     }
-  ), /* @__PURE__ */ React36.createElement(import_ui28.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React36.createElement(
-    import_ui28.ToggleButton,
+  ), /* @__PURE__ */ React37.createElement(import_ui29.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
+    import_ui29.ToggleButton,
     {
       size: "tiny",
       value: "check",
       sx: { marginLeft: "auto" },
-      ...(0, import_ui28.bindToggle)(popupState),
+      ...(0, import_ui29.bindToggle)(popupState),
       selected: popupState.isOpen,
       "aria-label": tooltipLabel
     },
     icon
-  ))))), /* @__PURE__ */ React36.createElement(
-    import_ui28.Popover,
+  ))))), /* @__PURE__ */ React37.createElement(
+    import_ui29.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -2279,12 +2319,12 @@ function EqualUnequalSizesControl({
         vertical: "top",
         horizontal: "right"
       },
-      ...(0, import_ui28.bindPopover)(popupState),
+      ...(0, import_ui29.bindPopover)(popupState),
       slotProps: {
         paper: { sx: { mt: 0.5, width: rowRefs[0].current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React37.createElement(
       PropProvider,
       {
         propType: multiSizePropType,
@@ -2292,26 +2332,27 @@ function EqualUnequalSizesControl({
         setValue: setNestedProp,
         isDisabled: () => multiSizeDisabled
       },
-      /* @__PURE__ */ React36.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React36.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React36.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React36.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React36.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React36.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React36.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
+      /* @__PURE__ */ React37.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React37.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React37.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React37.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React37.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React37.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
     )
   ));
 }
 var MultiSizeValueControl = ({ item, rowRef }) => {
-  return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React36.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(import_ui28.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React36.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React36.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
+  return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React37.createElement(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(import_ui29.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React37.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
 };
 
 // src/controls/linked-dimensions-control.tsx
-var React37 = __toESM(require("react"));
-var import_react22 = require("react");
+var React38 = __toESM(require("react"));
+var import_react23 = require("react");
 var import_editor_props17 = require("@elementor/editor-props");
 var import_icons7 = require("@elementor/icons");
-var import_ui29 = require("@elementor/ui");
+var import_ui30 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
 var LinkedDimensionsControl = createControl(
   ({
     label,
     isSiteRtl = false,
-    extendedOptions
+    extendedOptions,
+    min
   }) => {
     const {
       value: sizeValue,
@@ -2319,7 +2360,7 @@ var LinkedDimensionsControl = createControl(
       disabled: sizeDisabled,
       placeholder: sizePlaceholder
     } = useBoundProp(import_editor_props17.sizePropTypeUtil);
-    const gridRowRefs = [(0, import_react22.useRef)(null), (0, import_react22.useRef)(null)];
+    const gridRowRefs = [(0, import_react23.useRef)(null), (0, import_react23.useRef)(null)];
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
@@ -2348,7 +2389,7 @@ var LinkedDimensionsControl = createControl(
     const linkedLabel = (0, import_i18n10.__)("Link %s", "elementor").replace("%s", tooltipLabel);
     const unlinkedLabel = (0, import_i18n10.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
     const disabled = sizeDisabled || dimensionsDisabled;
-    return /* @__PURE__ */ React37.createElement(
+    return /* @__PURE__ */ React38.createElement(
       PropProvider,
       {
         propType,
@@ -2357,7 +2398,7 @@ var LinkedDimensionsControl = createControl(
         placeholder: dimensionsPlaceholder,
         isDisabled: () => disabled
       },
-      /* @__PURE__ */ React37.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React37.createElement(import_ui29.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
+      /* @__PURE__ */ React38.createElement(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React38.createElement(import_ui30.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React38.createElement(
         StyledToggleButton,
         {
           "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -2369,16 +2410,17 @@ var LinkedDimensionsControl = createControl(
           disabled,
           isPlaceholder: hasPlaceholders
         },
-        /* @__PURE__ */ React37.createElement(LinkedIcon, { fontSize: "tiny" })
+        /* @__PURE__ */ React38.createElement(LinkedIcon, { fontSize: "tiny" })
       ))),
-      getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React37.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React37.createElement(import_ui29.Grid, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React37.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Label, { ...props })), /* @__PURE__ */ React37.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(
+      getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React38.createElement(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React38.createElement(import_ui30.Grid, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React38.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(Label, { ...props })), /* @__PURE__ */ React38.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(
         Control3,
         {
           bind: props.bind,
           startIcon: icon,
           isLinked,
           extendedOptions,
-          anchorRef: gridRowRefs[index]
+          anchorRef: gridRowRefs[index],
+          min
         }
       ))))))
     );
@@ -2389,15 +2431,32 @@ var Control3 = ({
   startIcon,
   isLinked,
   extendedOptions,
-  anchorRef
+  anchorRef,
+  min
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React37.createElement(SizeControl, { startIcon, extendedOptions, anchorRef });
+    return /* @__PURE__ */ React38.createElement(
+      SizeControl,
+      {
+        startIcon,
+        extendedOptions,
+        anchorRef,
+        min
+      }
+    );
   }
-  return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon, extendedOptions, anchorRef }));
+  return /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React38.createElement(
+    SizeControl,
+    {
+      startIcon,
+      extendedOptions,
+      anchorRef,
+      min
+    }
+  ));
 };
 var Label = ({ label, bind }) => {
-  return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label));
+  return /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React38.createElement(ControlLabel, null, label));
 };
 function getCssDimensionProps(isSiteRtl) {
   return [
@@ -2405,41 +2464,41 @@ function getCssDimensionProps(isSiteRtl) {
       {
         bind: "block-start",
         label: (0, import_i18n10.__)("Top", "elementor"),
-        icon: /* @__PURE__ */ React37.createElement(import_icons7.SideTopIcon, { fontSize: "tiny" })
+        icon: /* @__PURE__ */ React38.createElement(import_icons7.SideTopIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-end",
         label: isSiteRtl ? (0, import_i18n10.__)("Left", "elementor") : (0, import_i18n10.__)("Right", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React37.createElement(import_icons7.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React37.createElement(import_icons7.SideRightIcon, { fontSize: "tiny" })
+        icon: isSiteRtl ? /* @__PURE__ */ React38.createElement(import_icons7.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React38.createElement(import_icons7.SideRightIcon, { fontSize: "tiny" })
       }
     ],
     [
       {
         bind: "block-end",
         label: (0, import_i18n10.__)("Bottom", "elementor"),
-        icon: /* @__PURE__ */ React37.createElement(import_icons7.SideBottomIcon, { fontSize: "tiny" })
+        icon: /* @__PURE__ */ React38.createElement(import_icons7.SideBottomIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-start",
         label: isSiteRtl ? (0, import_i18n10.__)("Right", "elementor") : (0, import_i18n10.__)("Left", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React37.createElement(import_icons7.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React37.createElement(import_icons7.SideLeftIcon, { fontSize: "tiny" })
+        icon: isSiteRtl ? /* @__PURE__ */ React38.createElement(import_icons7.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React38.createElement(import_icons7.SideLeftIcon, { fontSize: "tiny" })
       }
     ]
   ];
 }
 
 // src/controls/font-family-control/font-family-control.tsx
-var React39 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var import_editor_props18 = require("@elementor/editor-props");
 var import_icons8 = require("@elementor/icons");
-var import_ui31 = require("@elementor/ui");
+var import_ui32 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/item-selector.tsx
-var React38 = __toESM(require("react"));
-var import_react23 = require("react");
+var React39 = __toESM(require("react"));
+var import_react24 = require("react");
 var import_editor_ui4 = require("@elementor/editor-ui");
-var import_ui30 = require("@elementor/ui");
+var import_ui31 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
 var import_i18n11 = require("@wordpress/i18n");
 
@@ -2472,7 +2531,7 @@ var ItemSelector = ({
   },
   icon
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react23.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react24.useState)("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -2482,14 +2541,14 @@ var ItemSelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__PURE__ */ React38.createElement(import_editor_ui4.PopoverBody, { width: sectionWidth }, /* @__PURE__ */ React38.createElement(import_editor_ui4.PopoverHeader, { title, onClose: handleClose, icon: /* @__PURE__ */ React38.createElement(IconComponent, { fontSize: "tiny" }) }), /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(import_editor_ui4.PopoverBody, { width: sectionWidth }, /* @__PURE__ */ React39.createElement(import_editor_ui4.PopoverHeader, { title, onClose: handleClose, icon: /* @__PURE__ */ React39.createElement(IconComponent, { fontSize: "tiny" }) }), /* @__PURE__ */ React39.createElement(
     import_editor_ui4.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
       placeholder: (0, import_i18n11.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React38.createElement(import_ui30.Divider, null), filteredItemsList.length > 0 ? /* @__PURE__ */ React38.createElement(
+  ), /* @__PURE__ */ React39.createElement(import_ui31.Divider, null), filteredItemsList.length > 0 ? /* @__PURE__ */ React39.createElement(
     ItemList,
     {
       itemListItems: filteredItemsList,
@@ -2499,8 +2558,8 @@ var ItemSelector = ({
       itemStyle,
       onDebounce
     }
-  ) : /* @__PURE__ */ React38.createElement(
-    import_ui30.Stack,
+  ) : /* @__PURE__ */ React39.createElement(
+    import_ui31.Stack,
     {
       alignItems: "center",
       justifyContent: "center",
@@ -2509,27 +2568,27 @@ var ItemSelector = ({
       gap: 1.5,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React38.createElement(IconComponent, { fontSize: "large" }),
-    /* @__PURE__ */ React38.createElement(import_ui30.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React38.createElement(import_ui30.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React38.createElement(
-      import_ui30.Typography,
+    /* @__PURE__ */ React39.createElement(IconComponent, { fontSize: "large" }),
+    /* @__PURE__ */ React39.createElement(import_ui31.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React39.createElement(import_ui31.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n11.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React39.createElement(
+      import_ui31.Typography,
       {
         variant: "subtitle2",
         color: "text.secondary",
         sx: { display: "flex", width: "100%", justifyContent: "center" }
       },
-      /* @__PURE__ */ React38.createElement("span", null, "\u201C"),
-      /* @__PURE__ */ React38.createElement(
-        import_ui30.Box,
+      /* @__PURE__ */ React39.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React39.createElement(
+        import_ui31.Box,
         {
           component: "span",
           sx: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
         },
         searchValue
       ),
-      /* @__PURE__ */ React38.createElement("span", null, "\u201D.")
+      /* @__PURE__ */ React39.createElement("span", null, "\u201D.")
     )),
-    /* @__PURE__ */ React38.createElement(
-      import_ui30.Typography,
+    /* @__PURE__ */ React39.createElement(
+      import_ui31.Typography,
       {
         align: "center",
         variant: "caption",
@@ -2537,8 +2596,8 @@ var ItemSelector = ({
         sx: { display: "flex", flexDirection: "column" }
       },
       (0, import_i18n11.__)("Try something else.", "elementor"),
-      /* @__PURE__ */ React38.createElement(
-        import_ui30.Link,
+      /* @__PURE__ */ React39.createElement(
+        import_ui31.Link,
         {
           color: "secondary",
           variant: "caption",
@@ -2568,8 +2627,8 @@ var ItemList = ({
       }
     });
   }, 100);
-  const memoizedItemStyle = (0, import_react23.useCallback)((item) => itemStyle(item), [itemStyle]);
-  return /* @__PURE__ */ React38.createElement(
+  const memoizedItemStyle = (0, import_react24.useCallback)((item) => itemStyle(item), [itemStyle]);
+  return /* @__PURE__ */ React39.createElement(
     import_editor_ui4.PopoverMenuList,
     {
       items: itemListItems,
@@ -2583,8 +2642,8 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react23.useState)(() => (0, import_utils2.debounce)(fn, delay));
-  (0, import_react23.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react24.useState)(() => (0, import_utils2.debounce)(fn, delay));
+  (0, import_react24.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
@@ -2597,21 +2656,21 @@ var enqueueFont = (fontFamily, context = "editor") => {
 // src/controls/font-family-control/font-family-control.tsx
 var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
   const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp(import_editor_props18.stringPropTypeUtil);
-  const popoverState = (0, import_ui31.usePopupState)({ variant: "popover" });
+  const popoverState = (0, import_ui32.usePopupState)({ variant: "popover" });
   const isShowingPlaceholder = !fontFamily && placeholder;
-  const mapFontSubs = React39.useMemo(() => {
+  const mapFontSubs = React40.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
     }));
   }, [fontFamilies]);
-  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(
-    import_ui31.UnstableTag,
+  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(
+    import_ui32.UnstableTag,
     {
       variant: "outlined",
       label: fontFamily || placeholder,
-      endIcon: /* @__PURE__ */ React39.createElement(import_icons8.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui31.bindTrigger)(popoverState),
+      endIcon: /* @__PURE__ */ React40.createElement(import_icons8.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui32.bindTrigger)(popoverState),
       fullWidth: true,
       disabled,
       sx: isShowingPlaceholder ? {
@@ -2621,17 +2680,17 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
         textTransform: "capitalize"
       } : void 0
     }
-  )), /* @__PURE__ */ React39.createElement(
-    import_ui31.Popover,
+  )), /* @__PURE__ */ React40.createElement(
+    import_ui32.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" },
       sx: { my: 1.5 },
-      ...(0, import_ui31.bindPopover)(popoverState)
+      ...(0, import_ui32.bindPopover)(popoverState)
     },
-    /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(
       ItemSelector,
       {
         itemsList: mapFontSubs,
@@ -2649,14 +2708,14 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
 });
 
 // src/controls/url-control.tsx
-var React40 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 var import_editor_props19 = require("@elementor/editor-props");
-var import_ui32 = require("@elementor/ui");
+var import_ui33 = require("@elementor/ui");
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue, disabled } = useBoundProp(import_editor_props19.urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(
-    import_ui32.TextField,
+  return /* @__PURE__ */ React41.createElement(ControlActions, null, /* @__PURE__ */ React41.createElement(
+    import_ui33.TextField,
     {
       size: "tiny",
       fullWidth: true,
@@ -2669,23 +2728,23 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-var React44 = __toESM(require("react"));
-var import_react25 = require("react");
+var React45 = __toESM(require("react"));
+var import_react26 = require("react");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_editor_props21 = require("@elementor/editor-props");
 var import_http_client2 = require("@elementor/http-client");
 var import_icons11 = require("@elementor/icons");
 var import_session = require("@elementor/session");
-var import_ui36 = require("@elementor/ui");
+var import_ui37 = require("@elementor/ui");
 var import_utils3 = require("@elementor/utils");
 var import_i18n14 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
-var React41 = __toESM(require("react"));
-var import_react24 = require("react");
+var React42 = __toESM(require("react"));
+var import_react25 = require("react");
 var import_icons9 = require("@elementor/icons");
-var import_ui33 = require("@elementor/ui");
-var Autocomplete = (0, import_react24.forwardRef)((props, ref) => {
+var import_ui34 = require("@elementor/ui");
+var Autocomplete = (0, import_react25.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -2701,8 +2760,8 @@ var Autocomplete = (0, import_react24.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__ */ React41.createElement(
-    import_ui33.Autocomplete,
+  return /* @__PURE__ */ React42.createElement(
+    import_ui34.Autocomplete,
     {
       ...restProps,
       ref,
@@ -2719,8 +2778,8 @@ var Autocomplete = (0, import_react24.forwardRef)((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React41.createElement(import_ui33.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React41.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React42.createElement(import_ui34.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React42.createElement(
         TextInput,
         {
           params,
@@ -2743,8 +2802,8 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React41.createElement(
-    import_ui33.TextField,
+  return /* @__PURE__ */ React42.createElement(
+    import_ui34.TextField,
     {
       ...params,
       placeholder,
@@ -2756,7 +2815,7 @@ var TextInput = ({
       },
       InputProps: {
         ...params.InputProps,
-        endAdornment: /* @__PURE__ */ React41.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React42.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -2765,7 +2824,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React41.createElement(import_ui33.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React41.createElement(import_ui33.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React41.createElement(import_icons9.XIcon, { fontSize: params.size })));
+}) => /* @__PURE__ */ React42.createElement(import_ui34.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React42.createElement(import_ui34.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React42.createElement(import_icons9.XIcon, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -2787,10 +2846,10 @@ function _factoryFilter(newValue, options, minInputLength) {
 }
 
 // src/components/restricted-link-infotip.tsx
-var React42 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var import_editor_elements = require("@elementor/editor-elements");
 var import_icons10 = require("@elementor/icons");
-var import_ui34 = require("@elementor/ui");
+var import_ui35 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 var learnMoreButton = {
   label: (0, import_i18n13.__)("Learn More", "elementor"),
@@ -2814,13 +2873,13 @@ var RestrictedLinkInfotip = ({
       (0, import_editor_elements.selectElement)(elementId);
     }
   };
-  const content = /* @__PURE__ */ React42.createElement(
-    import_ui34.Alert,
+  const content = /* @__PURE__ */ React43.createElement(
+    import_ui35.Alert,
     {
       color: "secondary",
-      icon: /* @__PURE__ */ React42.createElement(import_icons10.InfoCircleFilledIcon, null),
-      action: /* @__PURE__ */ React42.createElement(
-        import_ui34.AlertAction,
+      icon: /* @__PURE__ */ React43.createElement(import_icons10.InfoCircleFilledIcon, null),
+      action: /* @__PURE__ */ React43.createElement(
+        import_ui35.AlertAction,
         {
           sx: { width: "fit-content" },
           variant: "contained",
@@ -2830,32 +2889,32 @@ var RestrictedLinkInfotip = ({
         (0, import_i18n13.__)("Take me there", "elementor")
       )
     },
-    /* @__PURE__ */ React42.createElement(import_ui34.AlertTitle, null, (0, import_i18n13.__)("Nested links", "elementor")),
-    /* @__PURE__ */ React42.createElement(import_ui34.Box, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React42.createElement(import_ui34.Link, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
+    /* @__PURE__ */ React43.createElement(import_ui35.AlertTitle, null, (0, import_i18n13.__)("Nested links", "elementor")),
+    /* @__PURE__ */ React43.createElement(import_ui35.Box, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React43.createElement(import_ui35.Link, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
   );
-  return shouldRestrict && isVisible ? /* @__PURE__ */ React42.createElement(
-    import_ui34.Infotip,
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React43.createElement(
+    import_ui35.Infotip,
     {
       placement: "right",
       content,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React42.createElement(import_ui34.Box, null, children)
-  ) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, children);
+    /* @__PURE__ */ React43.createElement(import_ui35.Box, null, children)
+  ) : /* @__PURE__ */ React43.createElement(React43.Fragment, null, children);
 };
 
 // src/controls/switch-control.tsx
-var React43 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var import_editor_props20 = require("@elementor/editor-props");
-var import_ui35 = require("@elementor/ui");
+var import_ui36 = require("@elementor/ui");
 var SwitchControl = createControl(() => {
   const { value, setValue, disabled } = useBoundProp(import_editor_props20.booleanPropTypeUtil);
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React43.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(
-    import_ui35.Switch,
+  return /* @__PURE__ */ React44.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React44.createElement(
+    import_ui36.Switch,
     {
       checked: !!value,
       onChange: handleChange,
@@ -2873,7 +2932,7 @@ var SIZE3 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props21.linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isActive, setIsActive] = (0, import_react25.useState)(!!value);
+  const [isActive, setIsActive] = (0, import_react26.useState)(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
@@ -2882,8 +2941,8 @@ var LinkControl = createControl((props) => {
     context: { elementId },
     label = (0, import_i18n14.__)("Link", "elementor")
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react25.useState)((0, import_editor_elements2.getLinkInLinkRestriction)(elementId));
-  const [options, setOptions] = (0, import_react25.useState)(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react26.useState)((0, import_editor_elements2.getLinkInLinkRestriction)(elementId));
+  const [options, setOptions] = (0, import_react26.useState)(
     generateFirstLoadedOption(value)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
@@ -2934,7 +2993,7 @@ var LinkControl = createControl((props) => {
     }
     debounceFetch({ ...requestParams, term: newValue });
   };
-  const debounceFetch = (0, import_react25.useMemo)(
+  const debounceFetch = (0, import_react26.useMemo)(
     () => (0, import_utils3.debounce)(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -2943,8 +3002,8 @@ var LinkControl = createControl((props) => {
     ),
     [endpoint]
   );
-  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React44.createElement(import_ui36.Stack, { gap: 1.5 }, /* @__PURE__ */ React44.createElement(
-    import_ui36.Stack,
+  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React45.createElement(import_ui37.Stack, { gap: 1.5 }, /* @__PURE__ */ React45.createElement(
+    import_ui37.Stack,
     {
       direction: "row",
       sx: {
@@ -2953,8 +3012,8 @@ var LinkControl = createControl((props) => {
         marginInlineEnd: -0.75
       }
     },
-    /* @__PURE__ */ React44.createElement(ControlFormLabel, null, label),
-    /* @__PURE__ */ React44.createElement(RestrictedLinkInfotip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React45.createElement(ControlFormLabel, null, label),
+    /* @__PURE__ */ React45.createElement(RestrictedLinkInfotip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React45.createElement(
       ToggleIconControl,
       {
         disabled: shouldDisableAddingLink,
@@ -2963,7 +3022,7 @@ var LinkControl = createControl((props) => {
         label: (0, import_i18n14.__)("Toggle link", "elementor")
       }
     ))
-  ), /* @__PURE__ */ React44.createElement(import_ui36.Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React44.createElement(import_ui36.Stack, { gap: 1.5 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React44.createElement(ControlActions, null, /* @__PURE__ */ React44.createElement(
+  ), /* @__PURE__ */ React45.createElement(import_ui37.Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React45.createElement(import_ui37.Stack, { gap: 1.5 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React45.createElement(ControlActions, null, /* @__PURE__ */ React45.createElement(
     Autocomplete,
     {
       options,
@@ -2974,10 +3033,10 @@ var LinkControl = createControl((props) => {
       onTextChange,
       minInputLength
     }
-  ))), /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React44.createElement(import_ui36.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React44.createElement(import_ui36.Grid, { item: true }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, (0, import_i18n14.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React44.createElement(import_ui36.Grid, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React44.createElement(SwitchControl, null))))))));
+  ))), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React45.createElement(import_ui37.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, (0, import_i18n14.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React45.createElement(SwitchControl, null))))))));
 });
 var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
-  return /* @__PURE__ */ React44.createElement(import_ui36.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React44.createElement(import_icons11.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React44.createElement(import_icons11.PlusIcon, { fontSize: SIZE3 }));
+  return /* @__PURE__ */ React45.createElement(import_ui37.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React45.createElement(import_icons11.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React45.createElement(import_icons11.PlusIcon, { fontSize: SIZE3 }));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -3009,11 +3068,11 @@ function generateFirstLoadedOption(unionValue) {
 }
 
 // src/controls/gap-control.tsx
-var React45 = __toESM(require("react"));
-var import_react26 = require("react");
+var React46 = __toESM(require("react"));
+var import_react27 = require("react");
 var import_editor_props22 = require("@elementor/editor-props");
 var import_icons12 = require("@elementor/icons");
-var import_ui37 = require("@elementor/ui");
+var import_ui38 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 var GapControl = createControl(({ label }) => {
   const {
@@ -3022,7 +3081,7 @@ var GapControl = createControl(({ label }) => {
     propType,
     disabled: directionDisabled
   } = useBoundProp(import_editor_props22.layoutDirectionPropTypeUtil);
-  const stackRef = (0, import_react26.useRef)(null);
+  const stackRef = (0, import_react27.useRef)(null);
   const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props22.sizePropTypeUtil);
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
@@ -3041,8 +3100,8 @@ var GapControl = createControl(({ label }) => {
   const linkedLabel = (0, import_i18n15.__)("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = (0, import_i18n15.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
-  return /* @__PURE__ */ React45.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React45.createElement(import_ui37.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(ControlLabel, null, label), /* @__PURE__ */ React45.createElement(import_ui37.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React45.createElement(
-    import_ui37.ToggleButton,
+  return /* @__PURE__ */ React46.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React46.createElement(import_ui38.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(ControlLabel, null, label), /* @__PURE__ */ React46.createElement(import_ui38.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React46.createElement(
+    import_ui38.ToggleButton,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
       size: "tiny",
@@ -3052,8 +3111,8 @@ var GapControl = createControl(({ label }) => {
       onChange: onLinkToggle,
       disabled
     },
-    /* @__PURE__ */ React45.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React45.createElement(import_ui37.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React45.createElement(import_ui37.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Column", "elementor"))), /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React45.createElement(import_ui37.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Row", "elementor"))), /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
+    /* @__PURE__ */ React46.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React46.createElement(import_ui38.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Column", "elementor"))), /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React46.createElement(import_ui38.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Row", "elementor"))), /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
 });
 var Control4 = ({
   bind,
@@ -3061,18 +3120,18 @@ var Control4 = ({
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React45.createElement(SizeControl, { anchorRef });
+    return /* @__PURE__ */ React46.createElement(SizeControl, { anchorRef });
   }
-  return /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React45.createElement(SizeControl, { anchorRef }));
+  return /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React46.createElement(SizeControl, { anchorRef }));
 };
 
 // src/controls/aspect-ratio-control.tsx
-var React46 = __toESM(require("react"));
-var import_react27 = require("react");
+var React47 = __toESM(require("react"));
+var import_react28 = require("react");
 var import_editor_props23 = require("@elementor/editor-props");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons13 = require("@elementor/icons");
-var import_ui38 = require("@elementor/ui");
+var import_ui39 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 var RATIO_OPTIONS = [
   { label: (0, import_i18n16.__)("Auto", "elementor"), value: "auto" },
@@ -3089,13 +3148,13 @@ var AspectRatioControl = createControl(({ label }) => {
   const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(import_editor_props23.stringPropTypeUtil);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
-  const [isCustom, setIsCustom] = (0, import_react27.useState)(isCustomSelected);
-  const [customWidth, setCustomWidth] = (0, import_react27.useState)(initialWidth);
-  const [customHeight, setCustomHeight] = (0, import_react27.useState)(initialHeight);
-  const [selectedValue, setSelectedValue] = (0, import_react27.useState)(
+  const [isCustom, setIsCustom] = (0, import_react28.useState)(isCustomSelected);
+  const [customWidth, setCustomWidth] = (0, import_react28.useState)(initialWidth);
+  const [customHeight, setCustomHeight] = (0, import_react28.useState)(initialHeight);
+  const [selectedValue, setSelectedValue] = (0, import_react28.useState)(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -3134,8 +3193,8 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
-  return /* @__PURE__ */ React46.createElement(ControlActions, null, /* @__PURE__ */ React46.createElement(import_ui38.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ControlLabel, null, label)), /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(
-    import_ui38.Select,
+  return /* @__PURE__ */ React47.createElement(ControlActions, null, /* @__PURE__ */ React47.createElement(import_ui39.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React47.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel, null, label)), /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(
+    import_ui39.Select,
     {
       size: "tiny",
       displayEmpty: true,
@@ -3146,10 +3205,10 @@ var AspectRatioControl = createControl(({ label }) => {
       fullWidth: true
     },
     [...RATIO_OPTIONS, { label: (0, import_i18n16.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
-      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React46.createElement(import_editor_ui5.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React47.createElement(import_editor_ui5.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
-  ))), isCustom && /* @__PURE__ */ React46.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(
-    import_ui38.TextField,
+  ))), isCustom && /* @__PURE__ */ React47.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(
+    import_ui39.TextField,
     {
       size: "tiny",
       type: "number",
@@ -3158,11 +3217,11 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customWidth,
       onChange: handleCustomWidthChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React46.createElement(import_icons13.ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React47.createElement(import_icons13.ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
       }
     }
-  )), /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(
-    import_ui38.TextField,
+  )), /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(
+    import_ui39.TextField,
     {
       size: "tiny",
       type: "number",
@@ -3171,26 +3230,26 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customHeight,
       onChange: handleCustomHeightChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React46.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React47.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" })
       }
     }
   )))));
 });
 
 // src/controls/svg-media-control.tsx
-var React48 = __toESM(require("react"));
-var import_react29 = require("react");
+var React49 = __toESM(require("react"));
+var import_react30 = require("react");
 var import_editor_props24 = require("@elementor/editor-props");
 var import_icons14 = require("@elementor/icons");
-var import_ui40 = require("@elementor/ui");
+var import_ui41 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
 var import_i18n18 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
-var React47 = __toESM(require("react"));
-var import_react28 = require("react");
+var React48 = __toESM(require("react"));
+var import_react29 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
-var import_ui39 = require("@elementor/ui");
+var import_ui40 = require("@elementor/ui");
 var import_i18n17 = require("@wordpress/i18n");
 var ADMIN_TITLE_TEXT = (0, import_i18n17.__)("Enable Unfiltered Uploads", "elementor");
 var ADMIN_CONTENT_TEXT = (0, import_i18n17.__)(
@@ -3211,7 +3270,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_react28.useState)(false);
+  const [isError, setIsError] = (0, import_react29.useState)(false);
   const canManageOptions = canUser("manage_options");
   const onClose = (enabled) => {
     props.onClose(enabled);
@@ -3230,10 +3289,10 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return canManageOptions ? /* @__PURE__ */ React47.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React47.createElement(NonAdminDialog, { ...dialogProps });
+  return canManageOptions ? /* @__PURE__ */ React48.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React48.createElement(NonAdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React47.createElement(import_ui39.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React47.createElement(import_ui39.DialogHeader, { logo: false }, /* @__PURE__ */ React47.createElement(import_ui39.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React47.createElement(import_ui39.Divider, null), /* @__PURE__ */ React47.createElement(import_ui39.DialogContent, null, /* @__PURE__ */ React47.createElement(import_ui39.DialogContentText, null, isError ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React47.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React47.createElement(import_ui39.DialogActions, null, /* @__PURE__ */ React47.createElement(import_ui39.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n17.__)("Cancel", "elementor")), /* @__PURE__ */ React47.createElement(
-  import_ui39.Button,
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React48.createElement(import_ui40.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React48.createElement(import_ui40.DialogHeader, { logo: false }, /* @__PURE__ */ React48.createElement(import_ui40.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React48.createElement(import_ui40.Divider, null), /* @__PURE__ */ React48.createElement(import_ui40.DialogContent, null, /* @__PURE__ */ React48.createElement(import_ui40.DialogContentText, null, isError ? /* @__PURE__ */ React48.createElement(React48.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React48.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React48.createElement(import_ui40.DialogActions, null, /* @__PURE__ */ React48.createElement(import_ui40.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n17.__)("Cancel", "elementor")), /* @__PURE__ */ React48.createElement(
+  import_ui40.Button,
   {
     size: "medium",
     onClick: () => handleEnable(),
@@ -3241,16 +3300,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React47.createElement(import_ui39.CircularProgress, { size: 24 }) : (0, import_i18n17.__)("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React48.createElement(import_ui40.CircularProgress, { size: 24 }) : (0, import_i18n17.__)("Enable", "elementor")
 )));
-var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React47.createElement(import_ui39.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React47.createElement(import_ui39.DialogHeader, { logo: false }, /* @__PURE__ */ React47.createElement(import_ui39.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React47.createElement(import_ui39.Divider, null), /* @__PURE__ */ React47.createElement(import_ui39.DialogContent, null, /* @__PURE__ */ React47.createElement(import_ui39.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React47.createElement(import_ui39.DialogActions, null, /* @__PURE__ */ React47.createElement(import_ui39.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n17.__)("Got it", "elementor"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React48.createElement(import_ui40.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React48.createElement(import_ui40.DialogHeader, { logo: false }, /* @__PURE__ */ React48.createElement(import_ui40.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React48.createElement(import_ui40.Divider, null), /* @__PURE__ */ React48.createElement(import_ui40.DialogContent, null, /* @__PURE__ */ React48.createElement(import_ui40.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React48.createElement(import_ui40.DialogActions, null, /* @__PURE__ */ React48.createElement(import_ui40.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n17.__)("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_ui40.styled)(import_ui40.Card)`
+var StyledCard = (0, import_ui41.styled)(import_ui41.Card)`
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -3259,7 +3318,7 @@ var StyledCard = (0, import_ui40.styled)(import_ui40.Card)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = (0, import_ui40.styled)(import_ui40.Stack)`
+var StyledCardMediaContainer = (0, import_ui41.styled)(import_ui41.Stack)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -3276,7 +3335,7 @@ var SvgMediaControl = createControl(() => {
   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_react29.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react30.useState)(false);
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
     multiple: false,
@@ -3304,16 +3363,16 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
-  return /* @__PURE__ */ React48.createElement(import_ui40.Stack, { gap: 1 }, /* @__PURE__ */ React48.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React48.createElement(ControlActions, null, /* @__PURE__ */ React48.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React48.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React48.createElement(import_ui40.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React48.createElement(
-    import_ui40.CardMedia,
+  return /* @__PURE__ */ React49.createElement(import_ui41.Stack, { gap: 1 }, /* @__PURE__ */ React49.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React49.createElement(ControlActions, null, /* @__PURE__ */ React49.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React49.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React49.createElement(import_ui41.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React49.createElement(
+    import_ui41.CardMedia,
     {
       component: "img",
       image: src,
       alt: (0, import_i18n18.__)("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React48.createElement(
-    import_ui40.CardOverlay,
+  )), /* @__PURE__ */ React49.createElement(
+    import_ui41.CardOverlay,
     {
       sx: {
         "&:hover": {
@@ -3321,8 +3380,8 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React48.createElement(import_ui40.Stack, { gap: 1 }, /* @__PURE__ */ React48.createElement(
-      import_ui40.Button,
+    /* @__PURE__ */ React49.createElement(import_ui41.Stack, { gap: 1 }, /* @__PURE__ */ React49.createElement(
+      import_ui41.Button,
       {
         size: "tiny",
         color: "inherit",
@@ -3330,13 +3389,13 @@ var SvgMediaControl = createControl(() => {
         onClick: () => handleClick(MODE_BROWSE)
       },
       (0, import_i18n18.__)("Select SVG", "elementor")
-    ), /* @__PURE__ */ React48.createElement(
-      import_ui40.Button,
+    ), /* @__PURE__ */ React49.createElement(
+      import_ui41.Button,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React48.createElement(import_icons14.UploadIcon, null),
+        startIcon: /* @__PURE__ */ React49.createElement(import_icons14.UploadIcon, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
       (0, import_i18n18.__)("Upload", "elementor")
@@ -3345,32 +3404,32 @@ var SvgMediaControl = createControl(() => {
 });
 
 // src/controls/background-control/background-control.tsx
-var React68 = __toESM(require("react"));
+var React69 = __toESM(require("react"));
 var import_editor_props32 = require("@elementor/editor-props");
-var import_ui59 = require("@elementor/ui");
+var import_ui60 = require("@elementor/ui");
 var import_i18n32 = require("@wordpress/i18n");
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-var React67 = __toESM(require("react"));
+var React68 = __toESM(require("react"));
 var import_editor_props31 = require("@elementor/editor-props");
-var import_ui58 = require("@elementor/ui");
+var import_ui59 = require("@elementor/ui");
 var import_wp_media3 = require("@elementor/wp-media");
 var import_i18n31 = require("@wordpress/i18n");
 
 // src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
-var React50 = __toESM(require("react"));
+var React51 = __toESM(require("react"));
 var import_icons15 = require("@elementor/icons");
-var import_ui42 = require("@elementor/ui");
+var import_ui43 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 
 // src/components/unstable-repeater/context/repeater-context.tsx
-var React49 = __toESM(require("react"));
-var import_react30 = require("react");
-var import_ui41 = require("@elementor/ui");
-var RepeaterContext = (0, import_react30.createContext)(null);
+var React50 = __toESM(require("react"));
+var import_react31 = require("react");
+var import_ui42 = require("@elementor/ui");
+var RepeaterContext = (0, import_react31.createContext)(null);
 var EMPTY_OPEN_ITEM2 = -1;
 var useRepeaterContext = () => {
-  const context = React49.useContext(RepeaterContext);
+  const context = React50.useContext(RepeaterContext);
   if (!context) {
     throw new Error("useRepeaterContext must be used within a RepeaterContextProvider");
   }
@@ -3388,10 +3447,10 @@ var RepeaterContextProvider = ({
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [itemsWithKeys, setItemsWithKeys] = (0, import_react30.useState)(() => {
+  const [itemsWithKeys, setItemsWithKeys] = (0, import_react31.useState)(() => {
     return items2?.map((item) => ({ key: generateUniqueKey(), item })) ?? [];
   });
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     setItemsWithKeys((prevItemsWithKeys) => {
       const newItemsWithKeys = items2?.map((item) => {
         const existingItem = prevItemsWithKeys.find((i) => i.item === item);
@@ -3403,10 +3462,10 @@ var RepeaterContextProvider = ({
   const handleSetItems = (newItemsWithKeys) => {
     setItems(newItemsWithKeys.map(({ item }) => item));
   };
-  const [openItemIndex, setOpenItemIndex] = (0, import_react30.useState)(EMPTY_OPEN_ITEM2);
-  const [rowRef, setRowRef] = (0, import_react30.useState)(null);
+  const [openItemIndex, setOpenItemIndex] = (0, import_react31.useState)(EMPTY_OPEN_ITEM2);
+  const [rowRef, setRowRef] = (0, import_react31.useState)(null);
   const isOpen = openItemIndex !== EMPTY_OPEN_ITEM2;
-  const popoverState = (0, import_ui41.usePopupState)({ variant: "popover" });
+  const popoverState = (0, import_ui42.usePopupState)({ variant: "popover" });
   const addItem = (ev, config) => {
     const item = config?.item ?? initial;
     const newIndex = config?.index ?? items2.length;
@@ -3423,7 +3482,7 @@ var RepeaterContextProvider = ({
     const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
     setItems(newItems);
   };
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(
     RepeaterContext.Provider,
     {
       value: {
@@ -3458,39 +3517,39 @@ var TooltipAddItemAction = ({
 }) => {
   const { addItem } = useRepeaterContext();
   const onClick = (ev) => addItem(ev, { index: newItemIndex });
-  return /* @__PURE__ */ React50.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React50.createElement(import_ui42.Box, { sx: { ml: "auto", cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React50.createElement(
-    import_ui42.IconButton,
+  return /* @__PURE__ */ React51.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React51.createElement(import_ui43.Box, { sx: { ml: "auto", cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React51.createElement(
+    import_ui43.IconButton,
     {
       size: SIZE4,
       disabled,
       onClick,
       "aria-label": (0, import_i18n19.__)("Add item", "elementor")
     },
-    /* @__PURE__ */ React50.createElement(import_icons15.PlusIcon, { fontSize: SIZE4 })
+    /* @__PURE__ */ React51.createElement(import_icons15.PlusIcon, { fontSize: SIZE4 })
   )));
 };
 var ConditionalToolTip = ({
   children,
   enable,
   content
-}) => enable && content ? /* @__PURE__ */ React50.createElement(import_ui42.Infotip, { placement: "right", color: "secondary", content }, children) : children;
+}) => enable && content ? /* @__PURE__ */ React51.createElement(import_ui43.Infotip, { placement: "right", color: "secondary", content }, children) : children;
 
 // src/components/unstable-repeater/header/header.tsx
-var React54 = __toESM(require("react"));
-var import_ui46 = require("@elementor/ui");
+var React55 = __toESM(require("react"));
+var import_ui47 = require("@elementor/ui");
 
 // src/controls/transform-control/transform-base-control.tsx
-var React53 = __toESM(require("react"));
-var import_react31 = require("react");
+var React54 = __toESM(require("react"));
+var import_react32 = require("react");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons16 = require("@elementor/icons");
-var import_ui45 = require("@elementor/ui");
+var import_ui46 = require("@elementor/ui");
 var import_i18n22 = require("@wordpress/i18n");
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
-var React51 = __toESM(require("react"));
+var React52 = __toESM(require("react"));
 var import_editor_props25 = require("@elementor/editor-props");
-var import_ui43 = require("@elementor/ui");
+var import_ui44 = require("@elementor/ui");
 var import_i18n20 = require("@wordpress/i18n");
 var ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var CHILDREN_PERSPECTIVE_FIELDS = [
@@ -3511,14 +3570,14 @@ var CHILDREN_PERSPECTIVE_FIELDS = [
   }
 ];
 var ChildrenPerspectiveControl = ({ rowRef }) => {
-  return /* @__PURE__ */ React51.createElement(import_ui43.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React51.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, (0, import_i18n20.__)("Children perspective", "elementor")), /* @__PURE__ */ React51.createElement(import_ui43.Grid, { container: true, spacing: 1.5, ref: rowRef }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React51.createElement(ControlFields, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React51.createElement(import_ui43.Divider, { sx: { py: 3 } })));
+  return /* @__PURE__ */ React52.createElement(import_ui44.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React52.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, (0, import_i18n20.__)("Children perspective", "elementor")), /* @__PURE__ */ React52.createElement(import_ui44.Grid, { container: true, spacing: 1.5, ref: rowRef }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React52.createElement(ControlFields, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React52.createElement(import_ui44.Divider, { sx: { py: 3 } })));
 };
 var ControlFields = ({
   control,
   rowRef
 }) => {
   const context = useBoundProp(import_editor_props25.sizePropTypeUtil);
-  return /* @__PURE__ */ React51.createElement(PropProvider, { ...context }, /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(PropProvider, { ...context }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React52.createElement(
     SizeControl,
     {
       variant: "length",
@@ -3530,9 +3589,9 @@ var ControlFields = ({
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
-var React52 = __toESM(require("react"));
+var React53 = __toESM(require("react"));
 var import_editor_props26 = require("@elementor/editor-props");
-var import_ui44 = require("@elementor/ui");
+var import_ui45 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
 var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var TRANSFORM_ORIGIN_FIELDS = [
@@ -3553,35 +3612,35 @@ var TRANSFORM_ORIGIN_FIELDS = [
   }
 ];
 var TransformOriginControl = ({ rowRef }) => {
-  return /* @__PURE__ */ React52.createElement(import_ui44.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React52.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, (0, import_i18n21.__)("Transform", "elementor")), /* @__PURE__ */ React52.createElement(import_ui44.Grid, { container: true, spacing: 1.5, ref: rowRef }, TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React52.createElement(ControlFields2, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React52.createElement(import_ui44.Divider, { sx: { py: 3 } })));
+  return /* @__PURE__ */ React53.createElement(import_ui45.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React53.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, (0, import_i18n21.__)("Transform", "elementor")), /* @__PURE__ */ React53.createElement(import_ui45.Grid, { container: true, spacing: 1.5, ref: rowRef }, TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React53.createElement(ControlFields2, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React53.createElement(import_ui45.Divider, { sx: { py: 3 } })));
 };
 var ControlFields2 = ({
   control,
   rowRef
 }) => {
   const context = useBoundProp(import_editor_props26.sizePropTypeUtil);
-  return /* @__PURE__ */ React52.createElement(PropProvider, { ...context }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React52.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true }))))));
+  return /* @__PURE__ */ React53.createElement(PropProvider, { ...context }, /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React53.createElement(import_ui45.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(import_ui45.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React53.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React53.createElement(import_ui45.Grid, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React53.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true }))))));
 };
 
 // src/controls/transform-control/transform-base-control.tsx
 var SIZE5 = "tiny";
 var TransformBaseControl = ({ anchorRef }) => {
-  const rowRef = (0, import_react31.useRef)(null);
-  const popupState = (0, import_ui45.usePopupState)({ variant: "popover" });
-  const popupProps = (0, import_ui45.bindPopover)({
+  const rowRef = (0, import_react32.useRef)(null);
+  const popupState = (0, import_ui46.usePopupState)({ variant: "popover" });
+  const popupProps = (0, import_ui46.bindPopover)({
     ...popupState,
     anchorEl: anchorRef.current ?? void 0
   });
-  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(
-    import_ui45.IconButton,
+  return /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(
+    import_ui46.IconButton,
     {
       size: SIZE5,
       "aria-label": (0, import_i18n22.__)("Base Transform", "elementor"),
-      ...(0, import_ui45.bindTrigger)(popupState)
+      ...(0, import_ui46.bindTrigger)(popupState)
     },
-    /* @__PURE__ */ React53.createElement(import_icons16.AdjustmentsIcon, { fontSize: SIZE5 })
-  ), /* @__PURE__ */ React53.createElement(
-    import_ui45.Popover,
+    /* @__PURE__ */ React54.createElement(import_icons16.AdjustmentsIcon, { fontSize: SIZE5 })
+  ), /* @__PURE__ */ React54.createElement(
+    import_ui46.Popover,
     {
       disablePortal: true,
       slotProps: {
@@ -3593,26 +3652,26 @@ var TransformBaseControl = ({ anchorRef }) => {
       },
       ...popupProps
     },
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React54.createElement(
       import_editor_ui6.PopoverHeader,
       {
         title: (0, import_i18n22.__)("Base Transform", "elementor"),
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React53.createElement(import_icons16.AdjustmentsIcon, { fontSize: SIZE5 })
+        icon: /* @__PURE__ */ React54.createElement(import_icons16.AdjustmentsIcon, { fontSize: SIZE5 })
       }
     ),
-    /* @__PURE__ */ React53.createElement(import_ui45.Divider, null),
-    /* @__PURE__ */ React53.createElement(TransformOriginControl, { rowRef }),
-    /* @__PURE__ */ React53.createElement(import_ui45.Divider, null),
-    /* @__PURE__ */ React53.createElement(ChildrenPerspectiveControl, { rowRef })
+    /* @__PURE__ */ React54.createElement(import_ui46.Divider, null),
+    /* @__PURE__ */ React54.createElement(TransformOriginControl, { rowRef }),
+    /* @__PURE__ */ React54.createElement(import_ui46.Divider, null),
+    /* @__PURE__ */ React54.createElement(ChildrenPerspectiveControl, { rowRef })
   ));
 };
 
 // src/components/unstable-repeater/header/header.tsx
 var Header = ({ label, children }) => {
   const { value } = useBoundProp();
-  return /* @__PURE__ */ React54.createElement(
-    import_ui46.Stack,
+  return /* @__PURE__ */ React55.createElement(
+    import_ui47.Stack,
     {
       direction: "row",
       justifyContent: "start",
@@ -3620,15 +3679,15 @@ var Header = ({ label, children }) => {
       gap: 1,
       sx: { marginInlineEnd: -0.75, py: 0.25 }
     },
-    /* @__PURE__ */ React54.createElement(import_ui46.Typography, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label),
-    /* @__PURE__ */ React54.createElement(ControlAdornments, null),
-    /* @__PURE__ */ React54.createElement(RepeaterHeaderActionsSlot, { value }),
-    /* @__PURE__ */ React54.createElement(import_ui46.Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React54.createElement(SlotChildren, { whitelist: [TransformBaseControl, TooltipAddItemAction], sorted: true }, children))
+    /* @__PURE__ */ React55.createElement(import_ui47.Typography, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label),
+    /* @__PURE__ */ React55.createElement(ControlAdornments, null),
+    /* @__PURE__ */ React55.createElement(RepeaterHeaderActionsSlot, { value }),
+    /* @__PURE__ */ React55.createElement(import_ui47.Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React55.createElement(SlotChildren, { whitelist: [TransformBaseControl, TooltipAddItemAction], sorted: true }, children))
   );
 };
 
 // src/components/unstable-repeater/items/items-container.tsx
-var React55 = __toESM(require("react"));
+var React56 = __toESM(require("react"));
 var ItemsContainer = ({
   itemTemplate,
   isSortable = true,
@@ -3647,9 +3706,9 @@ var ItemsContainer = ({
       })
     );
   };
-  return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
+  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
     const value = items2[index].item;
-    return /* @__PURE__ */ React55.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React55.isValidElement(itemTemplate) ? React55.cloneElement(itemTemplate, {
+    return /* @__PURE__ */ React56.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React56.isValidElement(itemTemplate) ? React56.cloneElement(itemTemplate, {
       key,
       value,
       index,
@@ -3659,14 +3718,14 @@ var ItemsContainer = ({
 };
 
 // src/components/unstable-repeater/items/item.tsx
-var React59 = __toESM(require("react"));
-var import_ui50 = require("@elementor/ui");
+var React60 = __toESM(require("react"));
+var import_ui51 = require("@elementor/ui");
 var import_i18n26 = require("@wordpress/i18n");
 
 // src/components/unstable-repeater/actions/disable-item-action.tsx
-var React56 = __toESM(require("react"));
+var React57 = __toESM(require("react"));
 var import_icons17 = require("@elementor/icons");
-var import_ui47 = require("@elementor/ui");
+var import_ui48 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
 var DisableItemAction = ({ index = -1 }) => {
@@ -3684,13 +3743,13 @@ var DisableItemAction = ({ index = -1 }) => {
     }
     updateItem(self, index);
   };
-  return /* @__PURE__ */ React56.createElement(import_ui47.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React56.createElement(import_ui47.IconButton, { size: SIZE6, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React56.createElement(import_icons17.EyeOffIcon, { fontSize: SIZE6 }) : /* @__PURE__ */ React56.createElement(import_icons17.EyeIcon, { fontSize: SIZE6 })));
+  return /* @__PURE__ */ React57.createElement(import_ui48.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(import_ui48.IconButton, { size: SIZE6, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React57.createElement(import_icons17.EyeOffIcon, { fontSize: SIZE6 }) : /* @__PURE__ */ React57.createElement(import_icons17.EyeIcon, { fontSize: SIZE6 })));
 };
 
 // src/components/unstable-repeater/actions/duplicate-item-action.tsx
-var React57 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 var import_icons18 = require("@elementor/icons");
-var import_ui48 = require("@elementor/ui");
+var import_ui49 = require("@elementor/ui");
 var import_i18n24 = require("@wordpress/i18n");
 var SIZE7 = "tiny";
 var DuplicateItemAction = ({ index = -1 }) => {
@@ -3703,13 +3762,13 @@ var DuplicateItemAction = ({ index = -1 }) => {
     const newItem = structuredClone(items2[index]?.item);
     addItem(ev, { item: newItem, index: index + 1 });
   };
-  return /* @__PURE__ */ React57.createElement(import_ui48.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(import_ui48.IconButton, { size: SIZE7, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React57.createElement(import_icons18.CopyIcon, { fontSize: SIZE7 })));
+  return /* @__PURE__ */ React58.createElement(import_ui49.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React58.createElement(import_ui49.IconButton, { size: SIZE7, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React58.createElement(import_icons18.CopyIcon, { fontSize: SIZE7 })));
 };
 
 // src/components/unstable-repeater/actions/remove-item-action.tsx
-var React58 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 var import_icons19 = require("@elementor/icons");
-var import_ui49 = require("@elementor/ui");
+var import_ui50 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
 var SIZE8 = "tiny";
 var RemoveItemAction = ({ index = -1 }) => {
@@ -3719,7 +3778,7 @@ var RemoveItemAction = ({ index = -1 }) => {
   }
   const removeLabel = (0, import_i18n25.__)("Remove", "elementor");
   const onClick = () => removeItem(index);
-  return /* @__PURE__ */ React58.createElement(import_ui49.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React58.createElement(import_ui49.IconButton, { size: SIZE8, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React58.createElement(import_icons19.XIcon, { fontSize: SIZE8 })));
+  return /* @__PURE__ */ React59.createElement(import_ui50.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React59.createElement(import_ui50.IconButton, { size: SIZE8, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React59.createElement(import_icons19.XIcon, { fontSize: SIZE8 })));
 };
 
 // src/components/unstable-repeater/items/item.tsx
@@ -3731,18 +3790,18 @@ var Item = ({
   children
 }) => {
   const { items: items2, popoverState, setRowRef, openItemIndex, setOpenItemIndex } = useRepeaterContext();
-  const triggerProps = (0, import_ui50.bindTrigger)(popoverState);
+  const triggerProps = (0, import_ui51.bindTrigger)(popoverState);
   const key = items2[index].key ?? -1;
   const onClick = (ev) => {
     triggerProps.onClick(ev);
     setOpenItemIndex(index);
   };
-  return /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(
-    import_ui50.UnstableTag,
+  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(
+    import_ui51.UnstableTag,
     {
       key,
       disabled: false,
-      label: /* @__PURE__ */ React59.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React59.createElement(Label3, { value })),
+      label: /* @__PURE__ */ React60.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React60.createElement(Label3, { value })),
       showActionsOnHover: true,
       fullWidth: true,
       ref: (ref) => ref && openItemIndex === index && setRowRef(ref),
@@ -3751,8 +3810,8 @@ var Item = ({
       sx: { minHeight: (theme) => theme.spacing(4) },
       ...triggerProps,
       onClick,
-      startIcon: /* @__PURE__ */ React59.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React59.createElement(Icon, { value })),
-      actions: /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), /* @__PURE__ */ React59.createElement(
+      startIcon: /* @__PURE__ */ React60.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React60.createElement(Icon, { value })),
+      actions: /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), /* @__PURE__ */ React60.createElement(
         SlotChildren,
         {
           whitelist: [DuplicateItemAction, DisableItemAction, RemoveItemAction],
@@ -3766,14 +3825,14 @@ var Item = ({
 };
 
 // src/components/unstable-repeater/unstable-repeater.tsx
-var React61 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 
 // src/components/unstable-repeater/items/edit-item-popover.tsx
-var React60 = __toESM(require("react"));
-var import_ui51 = require("@elementor/ui");
+var React61 = __toESM(require("react"));
+var import_ui52 = require("@elementor/ui");
 var EditItemPopover = ({ children }) => {
   const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items: items2 } = useRepeaterContext();
-  const popoverProps = (0, import_ui51.bindPopover)(popoverState);
+  const popoverProps = (0, import_ui52.bindPopover)(popoverState);
   if (!isOpen || !rowRef) {
     return null;
   }
@@ -3783,8 +3842,8 @@ var EditItemPopover = ({ children }) => {
     setRowRef(null);
     setOpenItemIndex(EMPTY_OPEN_ITEM2);
   };
-  return /* @__PURE__ */ React60.createElement(
-    import_ui51.Popover,
+  return /* @__PURE__ */ React61.createElement(
+    import_ui52.Popover,
     {
       disablePortal: true,
       slotProps: {
@@ -3797,7 +3856,7 @@ var EditItemPopover = ({ children }) => {
       anchorEl: rowRef,
       onClose
     },
-    /* @__PURE__ */ React60.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React60.createElement(import_ui51.Box, null, React60.isValidElement(children) && React60.cloneElement(children, { bind, index: openItemIndex })))
+    /* @__PURE__ */ React61.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React61.createElement(import_ui52.Box, null, React61.isValidElement(children) && React61.cloneElement(children, { bind, index: openItemIndex })))
   );
 };
 
@@ -3807,7 +3866,7 @@ var UnstableRepeater = ({
   initial,
   propTypeUtil
 }) => {
-  return /* @__PURE__ */ React61.createElement(SectionContent, null, /* @__PURE__ */ React61.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React61.createElement(SlotChildren, { whitelist: [Header, ItemsContainer, EditItemPopover], sorted: true }, children)));
+  return /* @__PURE__ */ React62.createElement(SectionContent, null, /* @__PURE__ */ React62.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React62.createElement(SlotChildren, { whitelist: [Header, ItemsContainer, EditItemPopover], sorted: true }, children)));
 };
 
 // src/env.ts
@@ -3815,9 +3874,9 @@ 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 React62 = __toESM(require("react"));
+var React63 = __toESM(require("react"));
 var import_editor_props27 = require("@elementor/editor-props");
-var import_ui52 = require("@elementor/ui");
+var import_ui53 = require("@elementor/ui");
 var BackgroundGradientColorControl = createControl(() => {
   const { value, setValue } = useBoundProp(import_editor_props27.backgroundGradientOverlayPropTypeUtil);
   const handleChange = (newValue) => {
@@ -3855,8 +3914,8 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React62.createElement(ControlActions, null, /* @__PURE__ */ React62.createElement(
-    import_ui52.UnstableGradientBox,
+  return /* @__PURE__ */ React63.createElement(ControlActions, null, /* @__PURE__ */ React63.createElement(
+    import_ui53.UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
       value: normalizeValue(),
@@ -3880,35 +3939,35 @@ var initialBackgroundGradientOverlay = import_editor_props27.backgroundGradientO
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-var React63 = __toESM(require("react"));
+var React64 = __toESM(require("react"));
 var import_icons20 = require("@elementor/icons");
-var import_ui53 = require("@elementor/ui");
+var import_ui54 = require("@elementor/ui");
 var import_i18n27 = require("@wordpress/i18n");
 var attachmentControlOptions = [
   {
     value: "fixed",
     label: (0, import_i18n27.__)("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(import_icons20.PinIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons20.PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
     label: (0, import_i18n27.__)("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(import_icons20.PinnedOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons20.PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React63.createElement(PopoverGridContainer, null, /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlFormLabel, null, (0, import_i18n27.__)("Attachment", "elementor"))), /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React63.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React64.createElement(PopoverGridContainer, null, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(ControlFormLabel, null, (0, import_i18n27.__)("Attachment", "elementor"))), /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React64.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-var React64 = __toESM(require("react"));
-var import_react32 = require("react");
+var React65 = __toESM(require("react"));
+var import_react33 = require("react");
 var import_editor_props28 = require("@elementor/editor-props");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons21 = require("@elementor/icons");
-var import_ui54 = require("@elementor/ui");
+var import_ui55 = require("@elementor/ui");
 var import_i18n28 = require("@wordpress/i18n");
 var backgroundPositionOptions = [
   { label: (0, import_i18n28.__)("Center center", "elementor"), value: "center center" },
@@ -3926,7 +3985,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(import_editor_props28.backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props28.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = (0, import_react32.useRef)(null);
+  const rowRef = (0, import_react33.useRef)(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -3935,8 +3994,8 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React64.createElement(import_ui54.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React64.createElement(PopoverGridContainer, null, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(ControlFormLabel, null, (0, import_i18n28.__)("Position", "elementor"))), /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React64.createElement(
-    import_ui54.Select,
+  return /* @__PURE__ */ React65.createElement(import_ui55.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(PopoverGridContainer, null, /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, (0, import_i18n28.__)("Position", "elementor"))), /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React65.createElement(
+    import_ui55.Select,
     {
       fullWidth: true,
       size: "tiny",
@@ -3944,87 +4003,89 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React64.createElement(import_editor_ui7.MenuListItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React64.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React64.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React65.createElement(import_editor_ui7.MenuListItem, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React65.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(import_ui55.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React65.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React64.createElement(import_icons21.LetterXIcon, { fontSize: "tiny" }),
-      anchorRef: rowRef
+      startIcon: /* @__PURE__ */ React65.createElement(import_icons21.LetterXIcon, { fontSize: "tiny" }),
+      anchorRef: rowRef,
+      min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React64.createElement(
+  ))), /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React65.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React64.createElement(import_icons21.LetterYIcon, { fontSize: "tiny" }),
-      anchorRef: rowRef
+      startIcon: /* @__PURE__ */ React65.createElement(import_icons21.LetterYIcon, { fontSize: "tiny" }),
+      anchorRef: rowRef,
+      min: -Number.MAX_SAFE_INTEGER
     }
   )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-var React65 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 var import_icons22 = require("@elementor/icons");
-var import_ui55 = require("@elementor/ui");
+var import_ui56 = require("@elementor/ui");
 var import_i18n29 = require("@wordpress/i18n");
 var repeatControlOptions = [
   {
     value: "repeat",
     label: (0, import_i18n29.__)("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.GridDotsIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons22.GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
     label: (0, import_i18n29.__)("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.DotsHorizontalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons22.DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
     label: (0, import_i18n29.__)("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.DotsVerticalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons22.DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
     label: (0, import_i18n29.__)("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.XIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons22.XIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React65.createElement(PopoverGridContainer, null, /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, (0, import_i18n29.__)("Repeat", "elementor"))), /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React65.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlFormLabel, null, (0, import_i18n29.__)("Repeat", "elementor"))), /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React66.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-var React66 = __toESM(require("react"));
-var import_react33 = require("react");
+var React67 = __toESM(require("react"));
+var import_react34 = require("react");
 var import_editor_props29 = require("@elementor/editor-props");
 var import_icons23 = require("@elementor/icons");
-var import_ui56 = require("@elementor/ui");
+var import_ui57 = require("@elementor/ui");
 var import_i18n30 = require("@wordpress/i18n");
 var sizeControlOptions = [
   {
     value: "auto",
     label: (0, import_i18n30.__)("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons23.LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(import_icons23.LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
     label: (0, import_i18n30.__)("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons23.ArrowsMaximizeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(import_icons23.ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
     label: (0, import_i18n30.__)("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons23.ArrowBarBothIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(import_icons23.ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: (0, import_i18n30.__)("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons23.PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(import_icons23.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4032,7 +4093,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(import_editor_props29.backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props29.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = (0, import_react33.useRef)(null);
+  const rowRef = (0, import_react34.useRef)(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -4040,7 +4101,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React66.createElement(import_ui56.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlFormLabel, null, (0, import_i18n30.__)("Size", "elementor"))), /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React67.createElement(import_ui57.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React67.createElement(import_ui57.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(PopoverGridContainer, null, /* @__PURE__ */ React67.createElement(import_ui57.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(ControlFormLabel, null, (0, import_i18n30.__)("Size", "elementor"))), /* @__PURE__ */ React67.createElement(import_ui57.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React67.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -4049,17 +4110,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React66.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React66.createElement(
+  )))), isCustom ? /* @__PURE__ */ React67.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React67.createElement(import_ui57.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React67.createElement(PopoverGridContainer, null, /* @__PURE__ */ React67.createElement(import_ui57.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React67.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React66.createElement(import_icons23.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React67.createElement(import_icons23.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React66.createElement(
+  ))), /* @__PURE__ */ React67.createElement(import_ui57.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React67.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React66.createElement(import_icons23.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React67.createElement(import_icons23.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -4067,9 +4128,9 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_editor_props30 = require("@elementor/editor-props");
-var import_ui57 = require("@elementor/ui");
+var import_ui58 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
   color: initialBackgroundColorOverlay2,
   image: initialBackgroundImageOverlay,
@@ -4087,8 +4148,8 @@ var useBackgroundTabsHistory = ({
     }
     return "image";
   };
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui57.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react34.useRef)({
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui58.useTabs)(getCurrentOverlayType());
+  const valuesHistory = (0, import_react35.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -4163,15 +4224,15 @@ var backgroundResolutionOptions = [
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props31.backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React67.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React68.createElement(
     UnstableRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: import_editor_props31.backgroundOverlayPropTypeUtil
     },
-    /* @__PURE__ */ React67.createElement(Header, { label: (0, import_i18n31.__)("Overlay", "elementor") }, /* @__PURE__ */ React67.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
-    /* @__PURE__ */ React67.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React67.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3 }) }, /* @__PURE__ */ React67.createElement(DuplicateItemAction, null), /* @__PURE__ */ React67.createElement(DisableItemAction, null), /* @__PURE__ */ React67.createElement(RemoveItemAction, null)),
-    /* @__PURE__ */ React67.createElement(EditItemPopover, null, /* @__PURE__ */ React67.createElement(ItemContent3, null))
+    /* @__PURE__ */ React68.createElement(Header, { label: (0, import_i18n31.__)("Overlay", "elementor") }, /* @__PURE__ */ React68.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React68.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React68.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3 }) }, /* @__PURE__ */ React68.createElement(DuplicateItemAction, null), /* @__PURE__ */ React68.createElement(DisableItemAction, null), /* @__PURE__ */ React68.createElement(RemoveItemAction, null)),
+    /* @__PURE__ */ React68.createElement(EditItemPopover, null, /* @__PURE__ */ React68.createElement(ItemContent3, null))
   ));
 });
 var ItemContent3 = () => {
@@ -4181,27 +4242,27 @@ var ItemContent3 = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React67.createElement(import_ui58.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React67.createElement(import_ui58.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React67.createElement(
-    import_ui58.Tabs,
+  return /* @__PURE__ */ React68.createElement(import_ui59.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React68.createElement(import_ui59.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React68.createElement(
+    import_ui59.Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
       "aria-label": (0, import_i18n31.__)("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React67.createElement(import_ui58.Tab, { label: (0, import_i18n31.__)("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React67.createElement(import_ui58.Tab, { label: (0, import_i18n31.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React67.createElement(import_ui58.Tab, { label: (0, import_i18n31.__)("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React67.createElement(import_ui58.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React67.createElement(PopoverContent, null, /* @__PURE__ */ React67.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React67.createElement(import_ui58.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React67.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React67.createElement(import_ui58.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React67.createElement(PopoverContent, null, /* @__PURE__ */ React67.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React68.createElement(import_ui59.Tab, { label: (0, import_i18n31.__)("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React68.createElement(import_ui59.Tab, { label: (0, import_i18n31.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React68.createElement(import_ui59.Tab, { label: (0, import_i18n31.__)("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React68.createElement(import_ui59.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React68.createElement(PopoverContent, null, /* @__PURE__ */ React68.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React68.createElement(import_ui59.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React68.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React68.createElement(import_ui59.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React68.createElement(PopoverContent, null, /* @__PURE__ */ React68.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React67.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React68.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React67.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React68.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React67.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React68.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -4214,12 +4275,12 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React68.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React67.createElement(
-    import_ui58.CardMedia,
+  return /* @__PURE__ */ React68.createElement(
+    import_ui59.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -4233,43 +4294,43 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React68.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React67.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React68.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React67.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React68.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React67.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React68.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React67.createElement("span", null, color);
+  return /* @__PURE__ */ React68.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React67.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React68.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React67.createElement("span", null, (0, import_i18n31.__)("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React68.createElement("span", null, (0, import_i18n31.__)("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React67.createElement("span", null, (0, import_i18n31.__)("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React68.createElement("span", null, (0, import_i18n31.__)("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(import_editor_props31.backgroundColorOverlayPropTypeUtil);
-  return /* @__PURE__ */ React67.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React67.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React68.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(import_editor_props31.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React67.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React67.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlayAttachment, null)));
+  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React68.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React68.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React68.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React68.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React68.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator2 = (0, import_ui58.styled)(import_ui58.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator2 = (0, import_ui59.styled)(import_ui59.UnstableColorIndicator)(({ theme }) => ({
   height: "1rem",
   width: "1rem",
   borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -4308,20 +4369,20 @@ var getGradientValue = (value) => {
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(import_editor_props32.backgroundPropTypeUtil);
   const colorLabel = (0, import_i18n32.__)("Color", "elementor");
-  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React68.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React68.createElement(import_ui59.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(import_ui59.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React68.createElement(import_ui59.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ColorControl, null)))));
+  return /* @__PURE__ */ React69.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React69.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React69.createElement(import_ui60.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(import_ui60.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React69.createElement(import_ui60.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ColorControl, null)))));
 });
 
 // src/controls/repeatable-control.tsx
-var React69 = __toESM(require("react"));
-var import_react36 = require("react");
+var React70 = __toESM(require("react"));
+var import_react37 = require("react");
 var import_editor_props33 = require("@elementor/editor-props");
-var import_ui60 = require("@elementor/ui");
+var import_ui61 = require("@elementor/ui");
 
 // src/hooks/use-repeatable-control-context.ts
-var import_react35 = require("react");
-var RepeatableControlContext = (0, import_react35.createContext)(void 0);
+var import_react36 = require("react");
+var RepeatableControlContext = (0, import_react36.createContext)(void 0);
 var useRepeatableControlContext = () => {
-  const context = (0, import_react35.useContext)(RepeatableControlContext);
+  const context = (0, import_react36.useContext)(RepeatableControlContext);
   if (!context) {
     throw new Error("useRepeatableControlContext must be used within RepeatableControl");
   }
@@ -4346,11 +4407,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil = (0, import_react36.useMemo)(
+    const childArrayPropTypeUtil = (0, import_react37.useMemo)(
       () => (0, import_editor_props33.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = (0, import_react36.useMemo)(
+    const contextValue = (0, import_react37.useMemo)(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -4359,31 +4420,31 @@ var RepeatableControl = createControl(
       [childControlConfig, placeholder, patternLabel]
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    return /* @__PURE__ */ React69.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React69.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React70.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React70.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React70.createElement(
       UnstableRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil
       },
-      /* @__PURE__ */ React69.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React69.createElement(TooltipAddItemAction, { ...addItemTooltipProps, newItemIndex: 0 })),
-      /* @__PURE__ */ React69.createElement(
+      /* @__PURE__ */ React70.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React70.createElement(TooltipAddItemAction, { ...addItemTooltipProps, newItemIndex: 0 })),
+      /* @__PURE__ */ React70.createElement(
         ItemsContainer,
         {
           isSortable: false,
-          itemTemplate: /* @__PURE__ */ React69.createElement(Item, { Icon: ItemIcon4, Label: ItemLabel4 })
+          itemTemplate: /* @__PURE__ */ React70.createElement(Item, { Icon: ItemIcon4, Label: ItemLabel4 })
         },
-        showDuplicate && /* @__PURE__ */ React69.createElement(DuplicateItemAction, null),
-        showToggle && /* @__PURE__ */ React69.createElement(DisableItemAction, null),
-        /* @__PURE__ */ React69.createElement(RemoveItemAction, null)
+        showDuplicate && /* @__PURE__ */ React70.createElement(DuplicateItemAction, null),
+        showToggle && /* @__PURE__ */ React70.createElement(DisableItemAction, null),
+        /* @__PURE__ */ React70.createElement(RemoveItemAction, null)
       ),
-      /* @__PURE__ */ React69.createElement(EditItemPopover, null, /* @__PURE__ */ React69.createElement(Content3, null))
+      /* @__PURE__ */ React70.createElement(EditItemPopover, null, /* @__PURE__ */ React70.createElement(Content3, null))
     )));
   }
 );
-var ItemIcon4 = () => /* @__PURE__ */ React69.createElement(React69.Fragment, null);
+var ItemIcon4 = () => /* @__PURE__ */ React70.createElement(React70.Fragment, null);
 var Content3 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React69.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React69.createElement(PopoverGridContainer, null, /* @__PURE__ */ React69.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React70.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React70.createElement(PopoverGridContainer, null, /* @__PURE__ */ React70.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -4445,7 +4506,7 @@ var ItemLabel4 = ({ value }) => {
   const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const color = showPlaceholder ? "text.tertiary" : "text.primary";
-  return /* @__PURE__ */ React69.createElement(import_ui60.Box, { component: "span", color }, label);
+  return /* @__PURE__ */ React70.createElement(import_ui61.Box, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -4453,16 +4514,16 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-var React70 = __toESM(require("react"));
-var import_react37 = require("react");
+var React71 = __toESM(require("react"));
+var import_react38 = require("react");
 var import_editor_props34 = require("@elementor/editor-props");
-var import_ui61 = require("@elementor/ui");
+var import_ui62 = require("@elementor/ui");
 var import_i18n33 = require("@wordpress/i18n");
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props34.keyValuePropTypeUtil);
-  const [keyError, setKeyError] = (0, import_react37.useState)("");
-  const [valueError, setValueError] = (0, import_react37.useState)("");
-  const [sessionState, setSessionState] = (0, import_react37.useState)({
+  const [keyError, setKeyError] = (0, import_react38.useState)("");
+  const [valueError, setValueError] = (0, import_react38.useState)("");
+  const [sessionState, setSessionState] = (0, import_react38.useState)({
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
@@ -4472,7 +4533,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = (0, import_react37.useMemo)(
+  const [keyRegex, valueRegex, errMsg] = (0, import_react38.useMemo)(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -4525,7 +4586,7 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React70.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React70.createElement(import_ui61.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React70.createElement(import_ui61.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(import_ui61.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React70.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError, helperText: keyHelper })), !!keyError && /* @__PURE__ */ React70.createElement(import_ui61.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React70.createElement(import_ui61.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(import_ui61.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React71.createElement(import_ui62.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React71.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError, helperText: keyHelper })), !!keyError && /* @__PURE__ */ React71.createElement(import_ui62.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React71.createElement(import_ui62.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React71.createElement(
     TextControl,
     {
       inputValue: sessionState.value,
@@ -4533,15 +4594,15 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React70.createElement(import_ui61.FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React71.createElement(import_ui62.FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-var React71 = __toESM(require("react"));
+var React72 = __toESM(require("react"));
 var import_editor_props35 = require("@elementor/editor-props");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons24 = require("@elementor/icons");
-var import_ui62 = require("@elementor/ui");
+var import_ui63 = require("@elementor/ui");
 var import_i18n34 = require("@wordpress/i18n");
 var positionOptions = [
   { label: (0, import_i18n34.__)("Center center", "elementor"), value: "center center" },
@@ -4567,8 +4628,8 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React71.createElement(import_ui62.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(ControlFormLabel, null, (0, import_i18n34.__)("Object position", "elementor"))), /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React71.createElement(
-    import_ui62.Select,
+  return /* @__PURE__ */ React72.createElement(import_ui63.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlFormLabel, null, (0, import_i18n34.__)("Object position", "elementor"))), /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React72.createElement(
+    import_ui63.Select,
     {
       size: "tiny",
       disabled: stringPropContext.disabled,
@@ -4576,15 +4637,27 @@ var PositionControl = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React71.createElement(import_editor_ui8.MenuListItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React71.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React71.createElement(SizeControl, { startIcon: /* @__PURE__ */ React71.createElement(import_icons24.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React71.createElement(SizeControl, { startIcon: /* @__PURE__ */ React71.createElement(import_icons24.LetterYIcon, { fontSize: "tiny" }) })))))));
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React72.createElement(import_editor_ui8.MenuListItem, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React72.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React72.createElement(
+    SizeControl,
+    {
+      startIcon: /* @__PURE__ */ React72.createElement(import_icons24.LetterXIcon, { fontSize: "tiny" }),
+      min: -Number.MAX_SAFE_INTEGER
+    }
+  ))), /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React72.createElement(
+    SizeControl,
+    {
+      startIcon: /* @__PURE__ */ React72.createElement(import_icons24.LetterYIcon, { fontSize: "tiny" }),
+      min: -Number.MAX_SAFE_INTEGER
+    }
+  )))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-var React81 = __toESM(require("react"));
+var React82 = __toESM(require("react"));
 var import_editor_props42 = require("@elementor/editor-props");
 var import_icons30 = require("@elementor/icons");
-var import_ui72 = require("@elementor/ui");
+var import_ui73 = require("@elementor/ui");
 var import_i18n41 = require("@wordpress/i18n");
 
 // src/controls/transform-control/initial-values.ts
@@ -4634,29 +4707,30 @@ var initialSkewValue = import_editor_props36.skewTransformPropTypeUtil.create({
 });
 
 // src/controls/transform-control/transform-content.tsx
-var React78 = __toESM(require("react"));
-var import_ui70 = require("@elementor/ui");
+var React79 = __toESM(require("react"));
+var import_ui71 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/move.tsx
-var React73 = __toESM(require("react"));
-var import_react38 = require("react");
+var React74 = __toESM(require("react"));
+var import_react39 = require("react");
 var import_editor_props37 = require("@elementor/editor-props");
 var import_icons25 = require("@elementor/icons");
-var import_ui64 = require("@elementor/ui");
+var import_ui65 = require("@elementor/ui");
 var import_i18n35 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/axis-row.tsx
-var React72 = __toESM(require("react"));
-var import_ui63 = require("@elementor/ui");
+var React73 = __toESM(require("react"));
+var import_ui64 = require("@elementor/ui");
 var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
-  return /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlLabel, null, label)), /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(import_ui64.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React73.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React73.createElement(import_ui64.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(ControlLabel, null, label)), /* @__PURE__ */ React73.createElement(import_ui64.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React73.createElement(
     SizeControl,
     {
       anchorRef,
       startIcon,
       units: units2,
-      variant
+      variant,
+      min: -Number.MAX_SAFE_INTEGER
     }
   )))));
 };
@@ -4666,26 +4740,26 @@ var moveAxisControls = [
   {
     label: (0, import_i18n35.__)("Move X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowRightIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React74.createElement(import_icons25.ArrowRightIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw"]
   },
   {
     label: (0, import_i18n35.__)("Move Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowDownSmallIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React74.createElement(import_icons25.ArrowDownSmallIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vh"]
   },
   {
     label: (0, import_i18n35.__)("Move Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowDownLeftIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React74.createElement(import_icons25.ArrowDownLeftIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(import_editor_props37.moveTransformPropTypeUtil);
-  const rowRefs = [(0, import_react38.useRef)(null), (0, import_react38.useRef)(null), (0, import_react38.useRef)(null)];
-  return /* @__PURE__ */ React73.createElement(import_ui64.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React73.createElement(PropProvider, { ...context }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React73.createElement(
+  const rowRefs = [(0, import_react39.useRef)(null), (0, import_react39.useRef)(null), (0, import_react39.useRef)(null)];
+  return /* @__PURE__ */ React74.createElement(import_ui65.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(PropProvider, { ...context }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React74.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -4698,34 +4772,34 @@ var Move = () => {
 };
 
 // src/controls/transform-control/functions/rotate.tsx
-var React74 = __toESM(require("react"));
-var import_react39 = require("react");
+var React75 = __toESM(require("react"));
+var import_react40 = require("react");
 var import_editor_props38 = require("@elementor/editor-props");
 var import_icons26 = require("@elementor/icons");
-var import_ui65 = require("@elementor/ui");
+var import_ui66 = require("@elementor/ui");
 var import_i18n36 = require("@wordpress/i18n");
 var rotateAxisControls = [
   {
     label: (0, import_i18n36.__)("Rotate X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React74.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React75.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny" })
   },
   {
     label: (0, import_i18n36.__)("Rotate Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React74.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React75.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
     label: (0, import_i18n36.__)("Rotate Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React74.createElement(import_icons26.RotateClockwiseIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React75.createElement(import_icons26.RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(import_editor_props38.rotateTransformPropTypeUtil);
-  const rowRefs = [(0, import_react39.useRef)(null), (0, import_react39.useRef)(null), (0, import_react39.useRef)(null)];
-  return /* @__PURE__ */ React74.createElement(import_ui65.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(PropProvider, { ...context }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React74.createElement(
+  const rowRefs = [(0, import_react40.useRef)(null), (0, import_react40.useRef)(null), (0, import_react40.useRef)(null)];
+  return /* @__PURE__ */ React75.createElement(import_ui66.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React75.createElement(PropProvider, { ...context }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React75.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -4737,18 +4811,18 @@ var Rotate = () => {
 };
 
 // src/controls/transform-control/functions/scale.tsx
-var React76 = __toESM(require("react"));
-var import_react40 = require("react");
+var React77 = __toESM(require("react"));
+var import_react41 = require("react");
 var import_editor_props39 = require("@elementor/editor-props");
 var import_icons27 = require("@elementor/icons");
-var import_ui67 = require("@elementor/ui");
+var import_ui68 = require("@elementor/ui");
 var import_i18n37 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/scale-axis-row.tsx
-var React75 = __toESM(require("react"));
-var import_ui66 = require("@elementor/ui");
+var React76 = __toESM(require("react"));
+var import_ui67 = require("@elementor/ui");
 var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React75.createElement(import_ui66.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React75.createElement(import_ui66.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, label)), /* @__PURE__ */ React75.createElement(import_ui66.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React75.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+  return /* @__PURE__ */ React76.createElement(import_ui67.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React76.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React76.createElement(import_ui67.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(ControlLabel, null, label)), /* @__PURE__ */ React76.createElement(import_ui67.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React76.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
@@ -4756,49 +4830,49 @@ var scaleAxisControls = [
   {
     label: (0, import_i18n37.__)("Scale X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React76.createElement(import_icons27.ArrowRightIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React77.createElement(import_icons27.ArrowRightIcon, { fontSize: "tiny" })
   },
   {
     label: (0, import_i18n37.__)("Scale Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React76.createElement(import_icons27.ArrowDownSmallIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React77.createElement(import_icons27.ArrowDownSmallIcon, { fontSize: "tiny" })
   },
   {
     label: (0, import_i18n37.__)("Scale Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React76.createElement(import_icons27.ArrowDownLeftIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React77.createElement(import_icons27.ArrowDownLeftIcon, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(import_editor_props39.scaleTransformPropTypeUtil);
-  const rowRefs = [(0, import_react40.useRef)(null), (0, import_react40.useRef)(null), (0, import_react40.useRef)(null)];
-  return /* @__PURE__ */ React76.createElement(import_ui67.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React76.createElement(PropProvider, { ...context }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React76.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
+  const rowRefs = [(0, import_react41.useRef)(null), (0, import_react41.useRef)(null), (0, import_react41.useRef)(null)];
+  return /* @__PURE__ */ React77.createElement(import_ui68.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...context }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React77.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
-var React77 = __toESM(require("react"));
-var import_react41 = require("react");
+var React78 = __toESM(require("react"));
+var import_react42 = require("react");
 var import_editor_props40 = require("@elementor/editor-props");
 var import_icons28 = require("@elementor/icons");
-var import_ui68 = require("@elementor/ui");
+var import_ui69 = require("@elementor/ui");
 var import_i18n38 = require("@wordpress/i18n");
 var skewAxisControls = [
   {
     label: (0, import_i18n38.__)("Skew X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React77.createElement(import_icons28.ArrowRightIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React78.createElement(import_icons28.ArrowRightIcon, { fontSize: "tiny" })
   },
   {
     label: (0, import_i18n38.__)("Skew Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React77.createElement(import_icons28.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React78.createElement(import_icons28.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(import_editor_props40.skewTransformPropTypeUtil);
-  const rowRefs = [(0, import_react41.useRef)(null), (0, import_react41.useRef)(null), (0, import_react41.useRef)(null)];
-  return /* @__PURE__ */ React77.createElement(import_ui68.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...context }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React77.createElement(
+  const rowRefs = [(0, import_react42.useRef)(null), (0, import_react42.useRef)(null), (0, import_react42.useRef)(null)];
+  return /* @__PURE__ */ React78.createElement(import_ui69.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React78.createElement(PropProvider, { ...context }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React78.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -4810,9 +4884,9 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_editor_props41 = require("@elementor/editor-props");
-var import_ui69 = require("@elementor/ui");
+var import_ui70 = require("@elementor/ui");
 var useTransformTabsHistory = ({
   move: initialMove,
   scale: initialScale,
@@ -4836,8 +4910,8 @@ var useTransformTabsHistory = ({
         return TransformFunctionKeys.move;
     }
   };
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui69.useTabs)(getCurrentTransformType());
-  const valuesHistory = (0, import_react42.useRef)({
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui70.useTabs)(getCurrentTransformType());
+  const valuesHistory = (0, import_react43.useRef)({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -4898,8 +4972,8 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React78.createElement(PopoverContent, null, /* @__PURE__ */ React78.createElement(import_ui70.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React78.createElement(import_ui70.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React78.createElement(
-    import_ui70.Tabs,
+  return /* @__PURE__ */ React79.createElement(PopoverContent, null, /* @__PURE__ */ React79.createElement(import_ui71.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React79.createElement(import_ui71.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React79.createElement(
+    import_ui71.Tabs,
     {
       size: "small",
       variant: "fullWidth",
@@ -4911,34 +4985,34 @@ var TransformContent = () => {
       ...getTabsProps(),
       "aria-label": (0, import_i18n39.__)("Transform", "elementor")
     },
-    /* @__PURE__ */ React78.createElement(import_ui70.Tab, { label: (0, import_i18n39.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
-    /* @__PURE__ */ React78.createElement(import_ui70.Tab, { label: (0, import_i18n39.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
-    /* @__PURE__ */ React78.createElement(import_ui70.Tab, { label: (0, import_i18n39.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
-    /* @__PURE__ */ React78.createElement(import_ui70.Tab, { label: (0, import_i18n39.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
-  )), /* @__PURE__ */ React78.createElement(import_ui70.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React78.createElement(Move, null)), /* @__PURE__ */ React78.createElement(import_ui70.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React78.createElement(Scale, null)), /* @__PURE__ */ React78.createElement(import_ui70.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React78.createElement(Rotate, null)), /* @__PURE__ */ React78.createElement(import_ui70.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React78.createElement(Skew, null))));
+    /* @__PURE__ */ React79.createElement(import_ui71.Tab, { label: (0, import_i18n39.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React79.createElement(import_ui71.Tab, { label: (0, import_i18n39.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React79.createElement(import_ui71.Tab, { label: (0, import_i18n39.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React79.createElement(import_ui71.Tab, { label: (0, import_i18n39.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React79.createElement(import_ui71.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React79.createElement(Move, null)), /* @__PURE__ */ React79.createElement(import_ui71.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React79.createElement(Scale, null)), /* @__PURE__ */ React79.createElement(import_ui71.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React79.createElement(Rotate, null)), /* @__PURE__ */ React79.createElement(import_ui71.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React79.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-var React79 = __toESM(require("react"));
+var React80 = __toESM(require("react"));
 var import_icons29 = require("@elementor/icons");
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React79.createElement(import_icons29.ArrowsMaximizeIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React80.createElement(import_icons29.ArrowsMaximizeIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React79.createElement(import_icons29.ExpandIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React80.createElement(import_icons29.ExpandIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React79.createElement(import_icons29.RotateClockwise2Icon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React80.createElement(import_icons29.RotateClockwise2Icon, { fontSize: "tiny" });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React79.createElement(import_icons29.SkewXIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React80.createElement(import_icons29.SkewXIcon, { fontSize: "tiny" });
     default:
       return null;
   }
 };
 
 // src/controls/transform-control/transform-label.tsx
-var React80 = __toESM(require("react"));
-var import_ui71 = require("@elementor/ui");
+var React81 = __toESM(require("react"));
+var import_ui72 = require("@elementor/ui");
 var import_i18n40 = require("@wordpress/i18n");
 var transformMoveValue = (value) => Object.values(value).map((axis) => {
   const size = axis?.value?.size ?? defaultValues.move.size;
@@ -4960,35 +5034,35 @@ var TransformLabel = (props) => {
   const { $$type, value } = props.value;
   switch ($$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React80.createElement(Label2, { label: (0, import_i18n40.__)("Move", "elementor"), value: transformMoveValue(value) });
+      return /* @__PURE__ */ React81.createElement(Label2, { label: (0, import_i18n40.__)("Move", "elementor"), value: transformMoveValue(value) });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React80.createElement(Label2, { label: (0, import_i18n40.__)("Scale", "elementor"), value: transformScaleValue(value) });
+      return /* @__PURE__ */ React81.createElement(Label2, { label: (0, import_i18n40.__)("Scale", "elementor"), value: transformScaleValue(value) });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React80.createElement(Label2, { label: (0, import_i18n40.__)("Rotate", "elementor"), value: transformRotateValue(value) });
+      return /* @__PURE__ */ React81.createElement(Label2, { label: (0, import_i18n40.__)("Rotate", "elementor"), value: transformRotateValue(value) });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React80.createElement(Label2, { label: (0, import_i18n40.__)("Skew", "elementor"), value: transformSkewValue(value) });
+      return /* @__PURE__ */ React81.createElement(Label2, { label: (0, import_i18n40.__)("Skew", "elementor"), value: transformSkewValue(value) });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React80.createElement(import_ui71.Box, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React81.createElement(import_ui72.Box, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var TransformRepeaterControl = createControl(() => {
   const context = useBoundProp(import_editor_props42.transformPropTypeUtil);
-  return /* @__PURE__ */ React81.createElement(PropProvider, { ...context }, /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React81.createElement(Repeater2, null)));
+  return /* @__PURE__ */ React82.createElement(PropProvider, { ...context }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React82.createElement(Repeater2, null)));
 });
-var ToolTip = /* @__PURE__ */ React81.createElement(
-  import_ui72.Box,
+var ToolTip = /* @__PURE__ */ React82.createElement(
+  import_ui73.Box,
   {
     component: "span",
     "aria-label": void 0,
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
-  /* @__PURE__ */ React81.createElement(import_icons30.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React81.createElement(import_ui72.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n41.__)("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React82.createElement(import_icons30.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
+  /* @__PURE__ */ React82.createElement(import_ui73.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n41.__)("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = () => {
   const transformFunctionsContext = useBoundProp(import_editor_props42.transformFunctionsPropTypeUtil);
@@ -4998,13 +5072,13 @@ var Repeater2 = () => {
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
   const shouldDisableAddItem = !getInitialValue();
-  return /* @__PURE__ */ React81.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React82.createElement(
     UnstableRepeater,
     {
       initial: getInitialValue() ?? initialTransformValue,
       propTypeUtil: import_editor_props42.transformFunctionsPropTypeUtil
     },
-    /* @__PURE__ */ React81.createElement(Header, { label: (0, import_i18n41.__)("Transform", "elementor") }, /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(Header, { label: (0, import_i18n41.__)("Transform", "elementor") }, /* @__PURE__ */ React82.createElement(
       TooltipAddItemAction,
       {
         disabled: shouldDisableAddItem,
@@ -5012,28 +5086,28 @@ var Repeater2 = () => {
         enableTooltip: shouldDisableAddItem
       }
     )),
-    /* @__PURE__ */ React81.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React81.createElement(Item, { Icon: TransformIcon, Label: TransformLabel }) }, /* @__PURE__ */ React81.createElement(DisableItemAction, null), /* @__PURE__ */ React81.createElement(RemoveItemAction, null)),
-    /* @__PURE__ */ React81.createElement(EditItemPopover, null, /* @__PURE__ */ React81.createElement(TransformContent, null))
+    /* @__PURE__ */ React82.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React82.createElement(Item, { Icon: TransformIcon, Label: TransformLabel }) }, /* @__PURE__ */ React82.createElement(DisableItemAction, null), /* @__PURE__ */ React82.createElement(RemoveItemAction, null)),
+    /* @__PURE__ */ React82.createElement(EditItemPopover, null, /* @__PURE__ */ React82.createElement(TransformContent, null))
   ));
 };
 
 // src/controls/transition-control/transition-repeater-control.tsx
-var React84 = __toESM(require("react"));
+var React85 = __toESM(require("react"));
 var import_editor_props45 = require("@elementor/editor-props");
 var import_icons32 = require("@elementor/icons");
-var import_ui75 = require("@elementor/ui");
+var import_ui76 = require("@elementor/ui");
 var import_i18n44 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
-var React82 = __toESM(require("react"));
-var import_react43 = require("react");
+var React83 = __toESM(require("react"));
+var import_react44 = require("react");
 var import_editor_props43 = require("@elementor/editor-props");
-var import_ui73 = require("@elementor/ui");
+var import_ui74 = require("@elementor/ui");
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(import_editor_props43.selectionSizePropTypeUtil);
-    const rowRef = (0, import_react43.useRef)(null);
-    const currentSizeConfig = (0, import_react43.useMemo)(() => {
+    const rowRef = (0, import_react44.useRef)(null);
+    const currentSizeConfig = (0, import_react44.useMemo)(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -5044,7 +5118,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React82.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React82.createElement(import_ui73.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React82.createElement(import_ui73.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React82.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React82.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(import_ui73.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, sizeLabel)), /* @__PURE__ */ React82.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React83.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React83.createElement(import_ui74.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React83.createElement(import_ui74.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React83.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React83.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React83.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement(import_ui74.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React83.createElement(ControlFormLabel, null, sizeLabel)), /* @__PURE__ */ React83.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React83.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -5081,11 +5155,11 @@ var transitionsItemsList = transitionProperties.map((category) => ({
 }));
 
 // src/controls/transition-control/transition-selector.tsx
-var React83 = __toESM(require("react"));
-var import_react44 = require("react");
+var React84 = __toESM(require("react"));
+var import_react45 = require("react");
 var import_editor_props44 = require("@elementor/editor-props");
 var import_icons31 = require("@elementor/icons");
-var import_ui74 = require("@elementor/ui");
+var import_ui75 = require("@elementor/ui");
 var import_i18n43 = require("@wordpress/i18n");
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
@@ -5113,8 +5187,8 @@ var TransitionSelector = ({ recentlyUsedList }) => {
     value: { value: transitionValue },
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = (0, import_react44.useRef)(null);
-  const popoverState = (0, import_ui74.usePopupState)({ variant: "popover" });
+  const defaultRef = (0, import_react45.useRef)(null);
+  const popoverState = (0, import_ui75.usePopupState)({ variant: "popover" });
   const getItemList = () => {
     const recentItems = recentlyUsedList.map((item) => findByValue(item)).filter((item) => !!item);
     const filteredItems = transitionsItemsList.map((category) => {
@@ -5154,27 +5228,27 @@ var TransitionSelector = ({ recentlyUsedList }) => {
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React83.createElement(import_ui74.Box, { ref: defaultRef }, /* @__PURE__ */ React83.createElement(
-    import_ui74.UnstableTag,
+  return /* @__PURE__ */ React84.createElement(import_ui75.Box, { ref: defaultRef }, /* @__PURE__ */ React84.createElement(
+    import_ui75.UnstableTag,
     {
       variant: "outlined",
       label: transitionLabel,
-      endIcon: /* @__PURE__ */ React83.createElement(import_icons31.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui74.bindTrigger)(popoverState),
+      endIcon: /* @__PURE__ */ React84.createElement(import_icons31.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui75.bindTrigger)(popoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React83.createElement(
-    import_ui74.Popover,
+  ), /* @__PURE__ */ React84.createElement(
+    import_ui75.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
-      ...(0, import_ui74.bindPopover)(popoverState),
+      ...(0, import_ui75.bindPopover)(popoverState),
       anchorReference: "anchorPosition",
       anchorPosition: getAnchorPosition(),
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "left" }
     },
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React84.createElement(
       ItemSelector,
       {
         itemsList: getItemList(),
@@ -5225,18 +5299,18 @@ function getChildControlConfig(recentlyUsedList) {
     props: getSelectionSizeProps(recentlyUsedList)
   };
 }
-var disableAddItemTooltipContent = /* @__PURE__ */ React84.createElement(
-  import_ui75.Alert,
+var disableAddItemTooltipContent = /* @__PURE__ */ React85.createElement(
+  import_ui76.Alert,
   {
     sx: {
       width: 280,
       gap: 0.5
     },
     color: "secondary",
-    icon: /* @__PURE__ */ React84.createElement(import_icons32.InfoCircleFilledIcon, null)
+    icon: /* @__PURE__ */ React85.createElement(import_icons32.InfoCircleFilledIcon, null)
   },
-  /* @__PURE__ */ React84.createElement(import_ui75.AlertTitle, null, (0, import_i18n44.__)("Transitions", "elementor")),
-  /* @__PURE__ */ React84.createElement(import_ui75.Box, { component: "span" }, /* @__PURE__ */ React84.createElement(import_ui75.Typography, { variant: "body2" }, (0, import_i18n44.__)("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React85.createElement(import_ui76.AlertTitle, null, (0, import_i18n44.__)("Transitions", "elementor")),
+  /* @__PURE__ */ React85.createElement(import_ui76.Box, { component: "span" }, /* @__PURE__ */ React85.createElement(import_ui76.Typography, { variant: "body2" }, (0, import_i18n44.__)("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -5244,7 +5318,7 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    return /* @__PURE__ */ React84.createElement(
+    return /* @__PURE__ */ React85.createElement(
       RepeatableControl,
       {
         label: (0, import_i18n44.__)("Transitions", "elementor"),
@@ -5267,14 +5341,14 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/components/css-code-editor/css-editor.tsx
-var React86 = __toESM(require("react"));
+var React87 = __toESM(require("react"));
 var import_editor_responsive2 = require("@elementor/editor-responsive");
-var import_ui77 = require("@elementor/ui");
-var import_react45 = require("@monaco-editor/react");
+var import_ui78 = require("@elementor/ui");
+var import_react46 = require("@monaco-editor/react");
 
 // src/components/css-code-editor/css-editor.styles.ts
-var import_ui76 = require("@elementor/ui");
-var EditorWrapper = (0, import_ui76.styled)(import_ui76.Box)`
+var import_ui77 = require("@elementor/ui");
+var EditorWrapper = (0, import_ui77.styled)(import_ui77.Box)`
 	border: 1px solid var( --e-a-border-color );
 	border-radius: 8px;
 	padding: 10px 12px;
@@ -5285,7 +5359,7 @@ var EditorWrapper = (0, import_ui76.styled)(import_ui76.Box)`
 		z-index: 99999999 !important;
 	}
 `;
-var ResizeHandle = (0, import_ui76.styled)(import_ui76.Button)`
+var ResizeHandle = (0, import_ui77.styled)(import_ui77.Button)`
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -5375,9 +5449,9 @@ function validate(editor, monaco) {
 }
 
 // src/components/css-code-editor/resize-handle.tsx
-var React85 = __toESM(require("react"));
+var React86 = __toESM(require("react"));
 var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
-  const handleResizeMove = React85.useCallback(
+  const handleResizeMove = React86.useCallback(
     (e) => {
       const container = containerRef.current;
       if (!container) {
@@ -5390,11 +5464,11 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [containerRef, onResize, onHeightChange]
   );
-  const handleResizeEnd = React85.useCallback(() => {
+  const handleResizeEnd = React86.useCallback(() => {
     document.removeEventListener("mousemove", handleResizeMove);
     document.removeEventListener("mouseup", handleResizeEnd);
   }, [handleResizeMove]);
-  const handleResizeStart = React85.useCallback(
+  const handleResizeStart = React86.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -5403,13 +5477,13 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [handleResizeMove, handleResizeEnd]
   );
-  React85.useEffect(() => {
+  React86.useEffect(() => {
     return () => {
       document.removeEventListener("mousemove", handleResizeMove);
       document.removeEventListener("mouseup", handleResizeEnd);
     };
   }, [handleResizeMove, handleResizeEnd]);
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(
     ResizeHandle,
     {
       onMouseDown: handleResizeStart,
@@ -5492,22 +5566,22 @@ var createEditorDidMountHandler = (editorRef, monacoRef, debounceTimer, onChange
   };
 };
 var CssEditor = ({ value, onChange }) => {
-  const theme = (0, import_ui77.useTheme)();
-  const containerRef = React86.useRef(null);
-  const editorRef = React86.useRef(null);
-  const monacoRef = React86.useRef(null);
-  const debounceTimer = React86.useRef(null);
+  const theme = (0, import_ui78.useTheme)();
+  const containerRef = React87.useRef(null);
+  const editorRef = React87.useRef(null);
+  const monacoRef = React87.useRef(null);
+  const debounceTimer = React87.useRef(null);
   const activeBreakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
-  const handleResize = React86.useCallback(() => {
+  const handleResize = React87.useCallback(() => {
     editorRef.current?.layout();
   }, []);
-  const handleHeightChange = React86.useCallback((height) => {
+  const handleHeightChange = React87.useCallback((height) => {
     if (containerRef.current) {
       containerRef.current.style.height = `${height}px`;
     }
   }, []);
   const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef, debounceTimer, onChange);
-  React86.useEffect(() => {
+  React87.useEffect(() => {
     const timerRef = debounceTimer;
     return () => {
       const timer = timerRef.current;
@@ -5516,8 +5590,8 @@ var CssEditor = ({ value, onChange }) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React86.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React86.createElement(
-    import_react45.Editor,
+  return /* @__PURE__ */ React87.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React87.createElement(
+    import_react46.Editor,
     {
       key: activeBreakpoint,
       height: "100%",
@@ -5537,7 +5611,7 @@ var CssEditor = ({ value, onChange }) => {
         fixedOverflowWidgets: true
       }
     }
-  ), /* @__PURE__ */ React86.createElement(
+  ), /* @__PURE__ */ React87.createElement(
     ResizeHandleComponent,
     {
       onResize: handleResize,