@elementor/editor-controls 4.1.0-769 → 4.1.0-770

package/dist/index.mjs

@@ -561,15 +561,145 @@ var TextAreaControl = createControl(({ placeholder: propPlaceholder, ariaLabel }
   ));
 });
 
+// src/controls/mention-text-area-control.tsx
+import * as React16 from "react";
+import { useCallback, useState as useState2 } from "react";
+import { Mention } from "primereact/mention";
+import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
+import { styled } from "@elementor/ui";
+var MentionWrapper = styled("div")(({ theme }) => ({
+  position: "relative",
+  "& .p-mention": {
+    width: "100%",
+    position: "relative"
+  },
+  "& textarea": {
+    width: "100%",
+    boxSizing: "border-box",
+    fontFamily: "inherit",
+    fontSize: theme.typography.pxToRem(12),
+    lineHeight: 1.4375,
+    padding: "4px 8px",
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: "transparent",
+    color: "inherit",
+    resize: "vertical",
+    outline: "none",
+    transition: "border-color 150ms ease-in-out",
+    "&:hover": {
+      borderColor: theme.palette.action.active
+    },
+    "&:focus": {
+      borderColor: theme.palette.primary.main,
+      borderWidth: 2,
+      padding: "3px 7px"
+    },
+    "&:disabled": {
+      opacity: 0.38,
+      cursor: "default"
+    },
+    "&::placeholder": {
+      color: "inherit",
+      opacity: 0.5
+    }
+  },
+  "& .p-mention-panel": {
+    fontFamily: "inherit",
+    fontSize: theme.typography.pxToRem(12),
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[4],
+    maxHeight: "200px",
+    overflow: "auto",
+    zIndex: theme.zIndex.modal,
+    maxWidth: "100%",
+    right: 0,
+    left: "auto !important"
+  },
+  "& .p-mention-items": {
+    listStyle: "none",
+    margin: 0,
+    padding: "4px 0"
+  },
+  "& .p-mention-item": {
+    padding: "6px 12px",
+    cursor: "pointer",
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    },
+    "&.p-highlight": {
+      backgroundColor: theme.palette.action.selected
+    }
+  }
+}));
+var MentionTextAreaControl = createControl(
+  ({ placeholder, ariaLabel, suggestions: allSuggestions }) => {
+    const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil4);
+    const [filteredSuggestions, setFilteredSuggestions] = useState2([]);
+    const transformMentionsToShortcodes = useCallback(
+      (text) => {
+        let result = text;
+        for (const suggestion of allSuggestions) {
+          const mentionPattern = new RegExp(
+            `@${suggestion.value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?=\\s|$|[^a-zA-Z0-9_-])`,
+            "g"
+          );
+          result = result.replace(mentionPattern, `[${suggestion.value}]`);
+        }
+        return result;
+      },
+      [allSuggestions]
+    );
+    const handleChange = useCallback(
+      (e) => {
+        const rawValue = e.target.value;
+        const transformed = transformMentionsToShortcodes(rawValue);
+        setValue(transformed);
+      },
+      [setValue, transformMentionsToShortcodes]
+    );
+    const handleSearch = useCallback(
+      (event) => {
+        const query = event.query.toLowerCase();
+        const filtered = allSuggestions.filter(
+          (item) => item.label.toLowerCase().includes(query) || item.value.toLowerCase().includes(query)
+        );
+        setFilteredSuggestions(filtered);
+      },
+      [allSuggestions]
+    );
+    return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(MentionWrapper, null, /* @__PURE__ */ React16.createElement(
+      Mention,
+      {
+        value: value ?? "",
+        onChange: handleChange,
+        suggestions: filteredSuggestions,
+        onSearch: handleSearch,
+        field: "value",
+        trigger: "@",
+        rows: 5,
+        disabled,
+        placeholder,
+        itemTemplate: SuggestionItem,
+        ...ariaLabel ? { "aria-label": ariaLabel } : {}
+      }
+    )));
+  }
+);
+var SuggestionItem = (suggestion) => /* @__PURE__ */ React16.createElement("span", null, suggestion.label);
+
 // src/controls/size-control.tsx
-import * as React20 from "react";
-import { useCallback, useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import * as React21 from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo2 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { usePopupState as usePopupState2 } from "@elementor/ui";
 
 // src/components/size-control/size-input.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { MathFunctionIcon } from "@elementor/icons";
 import { Box, InputAdornment as InputAdornment2 } from "@elementor/ui";
 
@@ -624,7 +754,7 @@ function isUnitExtendedOption(unit) {
 }
 
 // src/components/size-control/text-field-inner-selection.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { forwardRef as forwardRef2, useId } from "react";
 import { sizePropTypeUtil } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
@@ -634,17 +764,17 @@ import {
   Button as Button2,
   InputAdornment,
   Menu,
-  styled,
+  styled as styled2,
   usePopupState
 } from "@elementor/ui";
 
 // src/components/number-input.tsx
-import * as React16 from "react";
-import { forwardRef, useState as useState2 } from "react";
+import * as React17 from "react";
+import { forwardRef, useState as useState3 } from "react";
 import { TextField as TextField3 } from "@elementor/ui";
 var RESTRICTED_INPUT_KEYS = ["e", "E", "+"];
 var NumberInput = forwardRef((props, ref) => {
-  const [key, setKey] = useState2(0);
+  const [key, setKey] = useState3(0);
   const handleKeyDown = (event) => {
     blockRestrictedKeys(event, props.inputProps?.min);
     props.onKeyDown?.(event);
@@ -656,7 +786,7 @@ var NumberInput = forwardRef((props, ref) => {
       setKey((prev) => prev + 1);
     }
   };
-  return /* @__PURE__ */ React16.createElement(TextField3, { ...props, ref, key, onKeyDown: handleKeyDown, onBlur: handleBlur });
+  return /* @__PURE__ */ React17.createElement(TextField3, { ...props, ref, key, onKeyDown: handleKeyDown, onBlur: handleBlur });
 });
 function blockRestrictedKeys(event, min) {
   const restrictedInputKeys = [...RESTRICTED_INPUT_KEYS];
@@ -688,7 +818,7 @@ var TextFieldInnerSelection = forwardRef2(
     const getCursorStyle3 = () => ({
       input: { cursor: InputProps.readOnly ? "default !important" : void 0 }
     });
-    return /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React18.createElement(
       NumberInput,
       {
         ref,
@@ -733,7 +863,7 @@ var SelectionEndAdornment = ({
     flexDirection: "column",
     justifyContent: "center"
   };
-  return /* @__PURE__ */ React17.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React18.createElement(
     StyledButton,
     {
       isPrimaryColor: showPrimaryColor,
@@ -742,7 +872,7 @@ var SelectionEndAdornment = ({
       ...bindTrigger(popupState)
     },
     placeholder ?? alternativeOptionLabels[value] ?? value
-  ), /* @__PURE__ */ React17.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React18.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React18.createElement(
     MenuListItem2,
     {
       key: option,
@@ -782,7 +912,7 @@ function useUnitPlaceholder(value) {
     showPrimaryColor
   };
 }
-var StyledButton = styled(Button2, {
+var StyledButton = styled2(Button2, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -843,7 +973,7 @@ var SizeInput = ({
     custom: popupAttributes
   } : void 0;
   const alternativeOptionLabels = {
-    custom: /* @__PURE__ */ React18.createElement(MathFunctionIcon, { fontSize: "tiny" })
+    custom: /* @__PURE__ */ React19.createElement(MathFunctionIcon, { fontSize: "tiny" })
   };
   const InputProps = {
     ...popupAttributes,
@@ -851,8 +981,8 @@ var SizeInput = ({
     autoComplete: "off",
     onClick,
     onFocus,
-    startAdornment: startIcon ? /* @__PURE__ */ React18.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
-    endAdornment: /* @__PURE__ */ React18.createElement(
+    startAdornment: startIcon ? /* @__PURE__ */ React19.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
+    endAdornment: /* @__PURE__ */ React19.createElement(
       SelectionEndAdornment,
       {
         disabled,
@@ -864,7 +994,7 @@ var SizeInput = ({
       }
     )
   };
-  return /* @__PURE__ */ React18.createElement(ControlActions, null, /* @__PURE__ */ React18.createElement(Box, null, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(ControlActions, null, /* @__PURE__ */ React19.createElement(Box, null, /* @__PURE__ */ React19.createElement(
     TextFieldInnerSelection,
     {
       disabled,
@@ -883,7 +1013,7 @@ var SizeInput = ({
 };
 
 // src/components/text-field-popover.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { MathFunctionIcon as MathFunctionIcon2 } from "@elementor/icons";
@@ -911,7 +1041,7 @@ var TextFieldPopover = (props) => {
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     Popover,
     {
       disablePortal: true,
@@ -928,15 +1058,15 @@ var TextFieldPopover = (props) => {
       transformOrigin: { vertical: "top", horizontal: "center" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(
       PopoverHeader,
       {
         title: __3("CSS function", "elementor"),
         onClose: handleClose,
-        icon: /* @__PURE__ */ React19.createElement(MathFunctionIcon2, { fontSize: SIZE })
+        icon: /* @__PURE__ */ React20.createElement(MathFunctionIcon2, { fontSize: SIZE })
       }
     ),
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(
       TextField4,
       {
         value,
@@ -969,7 +1099,7 @@ function useSizeExtendedOptions(options, disableCustom) {
 }
 
 // src/hooks/use-sync-external-state.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 var useSyncExternalState = ({
   external,
   setExternal,
@@ -988,7 +1118,7 @@ var useSyncExternalState = ({
     }
     return externalValue;
   }
-  const [internal, setInternal] = useState3(toInternal(external, null));
+  const [internal, setInternal] = useState4(toInternal(external, null));
   useEffect3(() => {
     setInternal((prevInternal) => toInternal(external, prevInternal));
   }, [external]);
@@ -1084,7 +1214,7 @@ var SizeControl = createControl(
         popupState.open(anchorRef?.current);
       }
     };
-    const maybeClosePopup = useCallback(() => {
+    const maybeClosePopup = useCallback2(() => {
       if (popupState && popupState.isOpen) {
         popupState.close();
       }
@@ -1092,7 +1222,7 @@ var SizeControl = createControl(
     useEffect4(() => {
       maybeClosePopup();
     }, [activeBreakpoint]);
-    return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
       SizeInput,
       {
         disabled,
@@ -1110,7 +1240,7 @@ var SizeControl = createControl(
         id,
         ariaLabel
       }
-    ), anchorRef?.current && popupState.isOpen && /* @__PURE__ */ React20.createElement(
+    ), anchorRef?.current && popupState.isOpen && /* @__PURE__ */ React21.createElement(
       TextFieldPopover,
       {
         popupState,
@@ -1169,19 +1299,19 @@ function extractValueFromState(state, allowEmpty = false) {
 }
 
 // src/controls/stroke-control.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import { forwardRef as forwardRef3, useRef as useRef3 } from "react";
 import { strokePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid2 } from "@elementor/ui";
 import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/section-content.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import { Stack as Stack4 } from "@elementor/ui";
-var SectionContent = ({ gap = 0.5, sx, children }) => /* @__PURE__ */ React21.createElement(Stack4, { gap, sx: { ...sx } }, children);
+var SectionContent = ({ gap = 0.5, sx, children }) => /* @__PURE__ */ React22.createElement(Stack4, { gap, sx: { ...sx } }, children);
 
 // src/controls/color-control.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 import { colorPropTypeUtil } from "@elementor/editor-props";
 import { UnstableColorField } from "@elementor/ui";
 var ColorControl = createControl(
@@ -1191,7 +1321,7 @@ var ColorControl = createControl(
     const handleChange = (selectedColor) => {
       setValue(selectedColor || null);
     };
-    return /* @__PURE__ */ React22.createElement(ControlActions, null, /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React23.createElement(ControlActions, null, /* @__PURE__ */ React23.createElement(
       UnstableColorField,
       {
         id,
@@ -1234,26 +1364,26 @@ var units = ["px", "em", "rem"];
 var StrokeControl = createControl(() => {
   const propContext = useBoundProp(strokePropTypeUtil);
   const rowRef = useRef3(null);
-  return /* @__PURE__ */ React23.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(Control, { bind: "width", label: __4("Stroke width", "elementor"), ref: rowRef }, /* @__PURE__ */ React23.createElement(SizeControl, { units, anchorRef: rowRef })), /* @__PURE__ */ React23.createElement(Control, { bind: "color", label: __4("Stroke color", "elementor") }, /* @__PURE__ */ React23.createElement(ColorControl, null))));
+  return /* @__PURE__ */ React24.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React24.createElement(SectionContent, null, /* @__PURE__ */ React24.createElement(Control, { bind: "width", label: __4("Stroke width", "elementor"), ref: rowRef }, /* @__PURE__ */ React24.createElement(SizeControl, { units, anchorRef: rowRef })), /* @__PURE__ */ React24.createElement(Control, { bind: "color", label: __4("Stroke color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, null))));
 });
-var Control = forwardRef3(({ bind, label, children }, ref) => /* @__PURE__ */ React23.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React23.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React23.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React23.createElement(Grid2, { item: true, xs: 6 }, children))));
+var Control = forwardRef3(({ bind, label, children }, ref) => /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React24.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React24.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React24.createElement(Grid2, { item: true, xs: 6 }, children))));
 
 // src/controls/box-shadow-repeater-control.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import { useRef as useRef4 } from "react";
 import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
-import { FormLabel as FormLabel2, Grid as Grid4, styled as styled3, UnstableColorIndicator } from "@elementor/ui";
+import { FormLabel as FormLabel2, Grid as Grid4, styled as styled4, UnstableColorIndicator } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 
 // src/components/control-repeater/actions/tooltip-add-item-action.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { PlusIcon } from "@elementor/icons";
 import { Box as Box2, IconButton, Infotip } from "@elementor/ui";
 import { __ as __5, sprintf } from "@wordpress/i18n";
 
 // src/components/control-repeater/context/repeater-context.tsx
-import * as React24 from "react";
-import { createContext as createContext7, useContext as useContext6, useEffect as useEffect5, useMemo as useMemo3, useState as useState4 } from "react";
+import * as React25 from "react";
+import { createContext as createContext7, useContext as useContext6, useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
 import { usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/services/event-bus.ts
@@ -1321,7 +1451,7 @@ var RepeaterContextProvider = ({
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = useState4(() => {
+  const [uniqueKeys, setUniqueKeys] = useState5(() => {
     return items2?.map(() => generateUniqueKey()) ?? [];
   });
   useEffect5(() => {
@@ -1347,8 +1477,8 @@ var RepeaterContextProvider = ({
   const handleSetItems = (newItemsWithKeys) => {
     setItems(newItemsWithKeys.map(({ item }) => item));
   };
-  const [openItemIndex, setOpenItemIndex] = useState4(EMPTY_OPEN_ITEM);
-  const [rowRef, setRowRef] = useState4(null);
+  const [openItemIndex, setOpenItemIndex] = useState5(EMPTY_OPEN_ITEM);
+  const [rowRef, setRowRef] = useState5(null);
   const isOpen = openItemIndex !== EMPTY_OPEN_ITEM;
   const popoverState = usePopupState3({ variant: "popover" });
   const addItem = (ev, config) => {
@@ -1377,7 +1507,7 @@ var RepeaterContextProvider = ({
     const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
     setItems(newItems);
   };
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     RepeaterContext.Provider,
     {
       value: {
@@ -1414,7 +1544,7 @@ var TooltipAddItemAction = ({
 }) => {
   const { addItem } = useRepeaterContext();
   const onClick = (ev) => addItem(ev, { index: newItemIndex });
-  return /* @__PURE__ */ React25.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React25.createElement(Box2, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React26.createElement(Box2, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React26.createElement(
     IconButton,
     {
       size: SIZE2,
@@ -1422,35 +1552,35 @@ var TooltipAddItemAction = ({
       onClick,
       "aria-label": sprintf(__5("Add %s item", "elementor"), ariaLabel?.toLowerCase())
     },
-    /* @__PURE__ */ React25.createElement(PlusIcon, { fontSize: SIZE2 })
+    /* @__PURE__ */ React26.createElement(PlusIcon, { fontSize: SIZE2 })
   )));
 };
 var ConditionalToolTip = ({
   children,
   enable,
   content
-}) => enable && content ? /* @__PURE__ */ React25.createElement(Infotip, { placement: "right", color: "secondary", content }, children) : children;
+}) => enable && content ? /* @__PURE__ */ React26.createElement(Infotip, { placement: "right", color: "secondary", content }, children) : children;
 
 // src/components/control-repeater/items/items-container.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 
 // src/components/repeater/sortable.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
   Divider,
   List,
   ListItem,
-  styled as styled2,
+  styled as styled3,
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 var SortableProvider = (props) => {
-  return /* @__PURE__ */ React26.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React26.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
+  return /* @__PURE__ */ React27.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React27.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
 };
 var SortableItem = ({ id, children, disabled }) => {
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     UnstableSortableItem,
     {
       id,
@@ -1463,12 +1593,12 @@ var SortableItem = ({ id, children, disabled }) => {
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React26.createElement(StyledListItem, { ...itemProps, style: itemStyle, tabIndex: -1 }, !disabled && /* @__PURE__ */ React26.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React26.createElement(StyledDivider, { style: dropIndicationStyle }));
+        return /* @__PURE__ */ React27.createElement(StyledListItem, { ...itemProps, style: itemStyle, tabIndex: -1 }, !disabled && /* @__PURE__ */ React27.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React27.createElement(StyledDivider, { style: dropIndicationStyle }));
       }
     }
   );
 };
-var StyledListItem = styled2(ListItem)`
+var StyledListItem = styled3(ListItem)`
 	position: relative;
 	margin-inline: 0px;
 	padding-inline: 0px;
@@ -1498,7 +1628,7 @@ var StyledListItem = styled2(ListItem)`
 		}
 	}
 `;
-var SortableTrigger = (props) => /* @__PURE__ */ React26.createElement(
+var SortableTrigger = (props) => /* @__PURE__ */ React27.createElement(
   "div",
   {
     ...props,
@@ -1507,9 +1637,9 @@ var SortableTrigger = (props) => /* @__PURE__ */ React26.createElement(
     tabIndex: 0,
     "aria-label": __6("Drag item", "elementor")
   },
-  /* @__PURE__ */ React26.createElement(GripVerticalIcon, { fontSize: "tiny" })
+  /* @__PURE__ */ React27.createElement(GripVerticalIcon, { fontSize: "tiny" })
 );
-var StyledDivider = styled2(Divider)`
+var StyledDivider = styled3(Divider)`
 	height: 0px;
 	border: none;
 	overflow: visible;
@@ -1544,14 +1674,14 @@ var ItemsContainer = ({
       })
     );
   };
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
     const value = items2[index].item;
-    return /* @__PURE__ */ React27.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React27.createElement(ItemContext.Provider, { value: { index, value } }, children));
+    return /* @__PURE__ */ React28.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React28.createElement(ItemContext.Provider, { value: { index, value } }, children));
   })));
 };
 
 // src/components/control-repeater/items/item.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { useContext as useContext8 } from "react";
 import { bindTrigger as bindTrigger2 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
@@ -1568,11 +1698,11 @@ var useRepeatableControlContext = () => {
 };
 
 // src/components/repeater/repeater-tag.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { forwardRef as forwardRef4 } from "react";
 import { UnstableTag } from "@elementor/ui";
 var RepeaterTag = forwardRef4((props, ref) => {
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     UnstableTag,
     {
       ref,
@@ -1619,15 +1749,15 @@ var Item = ({ Label: Label3, Icon, actions }) => {
     setRowRef(ref);
     popoverState.setAnchorEl(ref);
   };
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     RepeaterTag,
     {
       ref: setRef,
-      label: /* @__PURE__ */ React29.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React29.createElement(Label3, { value })),
+      label: /* @__PURE__ */ React30.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React30.createElement(Label3, { value })),
       "aria-label": __7("Open item", "elementor"),
       ...triggerProps,
       onClick,
-      startIcon: /* @__PURE__ */ React29.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React29.createElement(Icon, { value })),
+      startIcon: /* @__PURE__ */ React30.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React30.createElement(Icon, { value })),
       sx: {
         minHeight: (theme) => theme.spacing(3.5),
         ...isItemDisabled2(index) && {
@@ -1636,20 +1766,20 @@ var Item = ({ Label: Label3, Icon, actions }) => {
           }
         }
       },
-      actions: /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), actions)
+      actions: /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), actions)
     }
   );
 };
 
 // src/components/control-repeater/control-repeater.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 var ControlRepeater = ({
   children,
   initial,
   propTypeUtil,
   isItemDisabled: isItemDisabled2
 }) => {
-  return /* @__PURE__ */ React30.createElement(SectionContent, null, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(SectionContent, null, /* @__PURE__ */ React31.createElement(
     RepeaterContextProvider,
     {
       initial,
@@ -1661,7 +1791,7 @@ var ControlRepeater = ({
 };
 
 // src/components/control-repeater/actions/disable-item-action.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import { EyeIcon, EyeOffIcon } from "@elementor/icons";
 import { IconButton as IconButton2, Tooltip } from "@elementor/ui";
 import { __ as __8 } from "@wordpress/i18n";
@@ -1681,11 +1811,11 @@ var DisableItemAction = () => {
     }
     updateItem(self, index);
   };
-  return /* @__PURE__ */ React31.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(IconButton2, { size: SIZE3, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React31.createElement(EyeOffIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React31.createElement(EyeIcon, { fontSize: SIZE3 })));
+  return /* @__PURE__ */ React32.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React32.createElement(IconButton2, { size: SIZE3, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React32.createElement(EyeOffIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React32.createElement(EyeIcon, { fontSize: SIZE3 })));
 };
 
 // src/components/control-repeater/actions/duplicate-item-action.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 import { CopyIcon } from "@elementor/icons";
 import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
 import { __ as __9 } from "@wordpress/i18n";
@@ -1701,7 +1831,7 @@ var DuplicateItemAction = () => {
     const newItem = structuredClone(item);
     addItem(ev, { item: newItem, index: index + 1 });
   };
-  return /* @__PURE__ */ React32.createElement(Tooltip2, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(Tooltip2, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React33.createElement(
     IconButton3,
     {
       size: SIZE4,
@@ -1709,12 +1839,12 @@ var DuplicateItemAction = () => {
       "aria-label": duplicateLabel,
       disabled: isItemDisabled2(index)
     },
-    /* @__PURE__ */ React32.createElement(CopyIcon, { fontSize: SIZE4 })
+    /* @__PURE__ */ React33.createElement(CopyIcon, { fontSize: SIZE4 })
   ));
 };
 
 // src/components/control-repeater/actions/remove-item-action.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { XIcon } from "@elementor/icons";
 import { IconButton as IconButton4, Tooltip as Tooltip3 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
@@ -1726,18 +1856,18 @@ var RemoveItemAction = () => {
   }
   const removeLabel = __10("Remove", "elementor");
   const onClick = () => removeItem(index);
-  return /* @__PURE__ */ React33.createElement(Tooltip3, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React33.createElement(IconButton4, { size: SIZE5, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React33.createElement(XIcon, { fontSize: SIZE5 })));
+  return /* @__PURE__ */ React34.createElement(Tooltip3, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React34.createElement(IconButton4, { size: SIZE5, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React34.createElement(XIcon, { fontSize: SIZE5 })));
 };
 
 // src/components/control-repeater/items/edit-item-popover.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import { bindPopover as bindPopover2, Box as Box3 } from "@elementor/ui";
 
 // src/components/repeater/repeater-popover.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 import { Popover as Popover2 } from "@elementor/ui";
 var RepeaterPopover = ({ children, width, ...props }) => {
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     Popover2,
     {
       disablePortal: true,
@@ -1765,24 +1895,24 @@ var EditItemPopover = ({ children }) => {
     popoverState.setAnchorEl(null);
     setOpenItemIndex(EMPTY_OPEN_ITEM);
   };
-  return /* @__PURE__ */ React35.createElement(RepeaterPopover, { width: rowRef.offsetWidth, ...bindPopover2(popoverState), onClose }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React35.createElement(Box3, null, children)));
+  return /* @__PURE__ */ React36.createElement(RepeaterPopover, { width: rowRef.offsetWidth, ...bindPopover2(popoverState), onClose }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React36.createElement(Box3, null, children)));
 };
 
 // src/components/popover-content.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { Stack as Stack5 } from "@elementor/ui";
-var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React36.createElement(Stack5, { ...props, gap }, children);
+var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React37.createElement(Stack5, { ...props, gap }, children);
 
 // src/components/popover-grid-container.tsx
 import { forwardRef as forwardRef5 } from "react";
-import * as React37 from "react";
+import * as React38 from "react";
 import { Grid as Grid3 } from "@elementor/ui";
 var PopoverGridContainer = forwardRef5(
-  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React37.createElement(Grid3, { container: true, gap, alignItems, flexWrap, ref }, children)
+  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React38.createElement(Grid3, { container: true, gap, alignItems, flexWrap, ref }, children)
 );
 
 // src/components/repeater/repeater-header.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { forwardRef as forwardRef6 } from "react";
 import { Box as Box4, Stack as Stack6, Typography as Typography2 } from "@elementor/ui";
 var RepeaterHeader = forwardRef6(
@@ -1791,7 +1921,7 @@ var RepeaterHeader = forwardRef6(
     children,
     adornment: Adornment = ControlAdornments
   }, ref) => {
-    return /* @__PURE__ */ React38.createElement(
+    return /* @__PURE__ */ React39.createElement(
       Stack6,
       {
         direction: "row",
@@ -1800,7 +1930,7 @@ var RepeaterHeader = forwardRef6(
         sx: { marginInlineEnd: -0.75, py: 0.25 },
         ref
       },
-      /* @__PURE__ */ React38.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, sx: { flexGrow: 1 } }, /* @__PURE__ */ React38.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label), /* @__PURE__ */ React38.createElement(Adornment, null)),
+      /* @__PURE__ */ React39.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, sx: { flexGrow: 1 } }, /* @__PURE__ */ React39.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label), /* @__PURE__ */ React39.createElement(Adornment, null)),
       children
     );
   }
@@ -1809,26 +1939,26 @@ var RepeaterHeader = forwardRef6(
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue, disabled } = useBoundProp(boxShadowPropTypeUtil);
-  return /* @__PURE__ */ React39.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React39.createElement(ControlRepeater, { initial: initialShadow, propTypeUtil: boxShadowPropTypeUtil }, /* @__PURE__ */ React39.createElement(RepeaterHeader, { label: __11("Box shadow", "elementor") }, /* @__PURE__ */ React39.createElement(TooltipAddItemAction, { newItemIndex: 0, disabled, ariaLabel: "Box shadow" })), /* @__PURE__ */ React39.createElement(ItemsContainer, null, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React40.createElement(ControlRepeater, { initial: initialShadow, propTypeUtil: boxShadowPropTypeUtil }, /* @__PURE__ */ React40.createElement(RepeaterHeader, { label: __11("Box shadow", "elementor") }, /* @__PURE__ */ React40.createElement(TooltipAddItemAction, { newItemIndex: 0, disabled, ariaLabel: "Box shadow" })), /* @__PURE__ */ React40.createElement(ItemsContainer, null, /* @__PURE__ */ React40.createElement(
     Item,
     {
       Icon: ItemIcon,
       Label: ItemLabel,
-      actions: /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(DuplicateItemAction, null), /* @__PURE__ */ React39.createElement(DisableItemAction, null), /* @__PURE__ */ React39.createElement(RemoveItemAction, null))
+      actions: /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(DuplicateItemAction, null), /* @__PURE__ */ React40.createElement(DisableItemAction, null), /* @__PURE__ */ React40.createElement(RemoveItemAction, null))
     }
-  )), /* @__PURE__ */ React39.createElement(EditItemPopover, null, /* @__PURE__ */ React39.createElement(Content, null))));
+  )), /* @__PURE__ */ React40.createElement(EditItemPopover, null, /* @__PURE__ */ React40.createElement(Content, null))));
 });
-var StyledUnstableColorIndicator = styled3(UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = styled4(UnstableColorIndicator)(({ theme }) => ({
   height: "1rem",
   width: "1rem",
   borderRadius: `${theme.shape.borderRadius / 2}px`
 }));
-var ItemIcon = ({ value }) => /* @__PURE__ */ React39.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
+var ItemIcon = ({ value }) => /* @__PURE__ */ React40.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
 var Content = () => {
   const context = useBoundProp(shadowPropTypeUtil);
   const rowRef = [useRef4(null), useRef4(null)];
   const { rowRef: anchorEl } = useRepeaterContext();
-  return /* @__PURE__ */ React39.createElement(PropProvider, { ...context }, /* @__PURE__ */ React39.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React39.createElement(PopoverGridContainer, null, /* @__PURE__ */ React39.createElement(Control2, { bind: "color", label: __11("Color", "elementor") }, /* @__PURE__ */ React39.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React39.createElement(Control2, { bind: "position", label: __11("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(PropProvider, { ...context }, /* @__PURE__ */ React40.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React40.createElement(PopoverGridContainer, null, /* @__PURE__ */ React40.createElement(Control2, { bind: "color", label: __11("Color", "elementor") }, /* @__PURE__ */ React40.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React40.createElement(Control2, { bind: "position", label: __11("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(
     SelectControl,
     {
       options: [
@@ -1836,14 +1966,14 @@ var Content = () => {
         { label: __11("Outset", "elementor"), value: null }
       ]
     }
-  ))), /* @__PURE__ */ React39.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React39.createElement(Control2, { bind: "hOffset", label: __11("Horizontal", "elementor") }, /* @__PURE__ */ React39.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React39.createElement(Control2, { bind: "vOffset", label: __11("Vertical", "elementor") }, /* @__PURE__ */ React39.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React39.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React39.createElement(Control2, { bind: "blur", label: __11("Blur", "elementor") }, /* @__PURE__ */ React39.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React39.createElement(Control2, { bind: "spread", label: __11("Spread", "elementor") }, /* @__PURE__ */ React39.createElement(SizeControl, { anchorRef: rowRef[1] })))));
+  ))), /* @__PURE__ */ React40.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React40.createElement(Control2, { bind: "hOffset", label: __11("Horizontal", "elementor") }, /* @__PURE__ */ React40.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React40.createElement(Control2, { bind: "vOffset", label: __11("Vertical", "elementor") }, /* @__PURE__ */ React40.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React40.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React40.createElement(Control2, { bind: "blur", label: __11("Blur", "elementor") }, /* @__PURE__ */ React40.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React40.createElement(Control2, { bind: "spread", label: __11("Spread", "elementor") }, /* @__PURE__ */ React40.createElement(SizeControl, { anchorRef: rowRef[1] })))));
 };
 var Control2 = ({
   label,
   bind,
   children,
   sx
-}) => /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React39.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React39.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React39.createElement(Grid4, { item: true, xs: 12 }, children))));
+}) => /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React40.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React40.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React40.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React40.createElement(Grid4, { item: true, xs: 12 }, children))));
 var ItemLabel = ({ value }) => {
   const { position, hOffset, vOffset, blur, spread } = value.value;
   const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
@@ -1862,7 +1992,7 @@ var ItemLabel = ({ value }) => {
     }
     return !size ? CUSTOM_SIZE_LABEL : size;
   }).join(" ");
-  return /* @__PURE__ */ React39.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
+  return /* @__PURE__ */ React40.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
 };
 var initialShadow = {
   $$type: "shadow",
@@ -1892,7 +2022,7 @@ var initialShadow = {
 };
 
 // src/controls/filter-control/filter-repeater-control.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 import {
   backdropFilterPropTypeUtil,
   filterPropTypeUtil
@@ -1900,7 +2030,7 @@ import {
 import { __ as __16 } from "@wordpress/i18n";
 
 // src/controls/filter-control/context/filter-config-context.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { createContext as createContext9, useContext as useContext9, useMemo as useMemo4 } from "react";
 import { cssFilterFunctionPropUtil } from "@elementor/editor-props";
 
@@ -2016,7 +2146,7 @@ function FilterConfigProvider({ children }) {
       getInitialValue: () => config.blur.defaultValue
     };
   }, [propContext.propType]);
-  return /* @__PURE__ */ React40.createElement(FilterConfigContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React41.createElement(FilterConfigContext.Provider, { value: contextValue }, children);
 }
 function useFilterConfig() {
   const context = useContext9(FilterConfigContext);
@@ -2027,7 +2157,7 @@ function useFilterConfig() {
 }
 
 // src/controls/filter-control/filter-content.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import {
   cssFilterFunctionPropUtil as cssFilterFunctionPropUtil2
 } from "@elementor/editor-props";
@@ -2035,7 +2165,7 @@ import { Grid as Grid7 } from "@elementor/ui";
 import { __ as __15 } from "@wordpress/i18n";
 
 // src/controls/filter-control/drop-shadow/drop-shadow-item-content.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { useRef as useRef5 } from "react";
 import { dropShadowFilterPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid5 } from "@elementor/ui";
@@ -2065,7 +2195,7 @@ var items = [
 var DropShadowItemContent = ({ anchorEl }) => {
   const context = useBoundProp(dropShadowFilterPropTypeUtil);
   const rowRefs = [useRef5(null), useRef5(null)];
-  return /* @__PURE__ */ React41.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React41.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React41.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React41.createElement(Grid5, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React41.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React42.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React42.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React42.createElement(Grid5, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React42.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React42.createElement(
     SizeControl,
     {
       anchorRef: rowRefs[item.rowIndex],
@@ -2078,7 +2208,7 @@ var DropShadowItemContent = ({ anchorEl }) => {
 
 // src/controls/filter-control/single-size/single-size-item-content.tsx
 import { useRef as useRef6 } from "react";
-import * as React42 from "react";
+import * as React43 from "react";
 import {
   blurFilterPropTypeUtil,
   colorToneFilterPropTypeUtil,
@@ -2097,7 +2227,7 @@ var SingleSizeItemContent = ({ filterFunc }) => {
   const { getFilterFunctionConfig } = useFilterConfig();
   const { valueName, filterFunctionGroup } = getFilterFunctionConfig(filterFunc);
   const context = useBoundProp(propTypeMap[filterFunctionGroup]);
-  return /* @__PURE__ */ React42.createElement(PropProvider, { ...context }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: filterFunctionGroup }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React42.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, valueName)), /* @__PURE__ */ React42.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(SizeControl, { anchorRef: rowRef, enablePropTypeUnits: true }))))));
+  return /* @__PURE__ */ React43.createElement(PropProvider, { ...context }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: filterFunctionGroup }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React43.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React43.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, valueName)), /* @__PURE__ */ React43.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeControl, { anchorRef: rowRef, enablePropTypeUnits: true }))))));
 };
 
 // src/controls/filter-control/filter-content.tsx
@@ -2115,7 +2245,7 @@ var FilterContent = () => {
     }
     propContext.setValue(newValue);
   };
-  return /* @__PURE__ */ React43.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "css-filter-func" }, /* @__PURE__ */ React43.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, __15("Filter", "elementor"))), /* @__PURE__ */ React43.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "func" }, /* @__PURE__ */ React43.createElement(SelectControl, { options: filterOptions })))), /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "args" }, /* @__PURE__ */ React43.createElement(FilterValueContent, null)))));
+  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "css-filter-func" }, /* @__PURE__ */ React44.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, __15("Filter", "elementor"))), /* @__PURE__ */ React44.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "func" }, /* @__PURE__ */ React44.createElement(SelectControl, { options: filterOptions })))), /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "args" }, /* @__PURE__ */ React44.createElement(FilterValueContent, null)))));
 };
 var FilterValueContent = () => {
   const { openItemIndex, items: items2 } = useRepeaterContext();
@@ -2123,19 +2253,19 @@ var FilterValueContent = () => {
   const filterFunc = currentItem.item.value.func.value;
   const isDropShadow = filterFunc === "drop-shadow";
   if (isDropShadow) {
-    return /* @__PURE__ */ React43.createElement(DropShadowItemContent, null);
+    return /* @__PURE__ */ React44.createElement(DropShadowItemContent, null);
   }
-  return /* @__PURE__ */ React43.createElement(SingleSizeItemContent, { filterFunc });
+  return /* @__PURE__ */ React44.createElement(SingleSizeItemContent, { filterFunc });
 };
 
 // src/controls/filter-control/filter-icon.tsx
-import * as React44 from "react";
-import { styled as styled4, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import * as React45 from "react";
+import { styled as styled5, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 var FilterIcon = ({ value }) => {
   if (value.value.func.value !== "drop-shadow") {
     return null;
   }
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(
     StyledUnstableColorIndicator2,
     {
       size: "inherit",
@@ -2144,15 +2274,15 @@ var FilterIcon = ({ value }) => {
     }
   );
 };
-var StyledUnstableColorIndicator2 = styled4(UnstableColorIndicator2)(({ theme }) => ({
+var StyledUnstableColorIndicator2 = styled5(UnstableColorIndicator2)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
 }));
 
 // src/controls/filter-control/filter-label.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 
 // src/controls/filter-control/drop-shadow/drop-shadow-item-label.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import { Box as Box5 } from "@elementor/ui";
 var DropShadowItemLabel = ({ value }) => {
   const values = value.value.args.value;
@@ -2160,11 +2290,11 @@ var DropShadowItemLabel = ({ value }) => {
   const labels = keys.map(
     (key) => values[key]?.value?.unit !== "custom" ? `${values[key]?.value?.size ?? 0}${values[key]?.value?.unit ?? "px"}` : values[key]?.value?.size || CUSTOM_SIZE_LABEL
   );
-  return /* @__PURE__ */ React45.createElement(Box5, { component: "span" }, /* @__PURE__ */ React45.createElement(Box5, { component: "span", style: { textTransform: "capitalize" } }, "Drop shadow:"), ` ${labels.join(" ")}`);
+  return /* @__PURE__ */ React46.createElement(Box5, { component: "span" }, /* @__PURE__ */ React46.createElement(Box5, { component: "span", style: { textTransform: "capitalize" } }, "Drop shadow:"), ` ${labels.join(" ")}`);
 };
 
 // src/controls/filter-control/single-size/single-size-item-label.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import { Box as Box6 } from "@elementor/ui";
 var SingleSizeItemLabel = ({ value }) => {
   const { func, args } = value.value;
@@ -2172,16 +2302,16 @@ var SingleSizeItemLabel = ({ value }) => {
   const { defaultValue } = getFilterFunctionConfig(func.value ?? "");
   const defaultUnit = defaultValue.value.args.value?.size?.value?.unit ?? lengthUnits[0];
   const { unit, size } = args.value.size?.value ?? { unit: defaultUnit, size: 0 };
-  const label = /* @__PURE__ */ React46.createElement(Box6, { component: "span", style: { textTransform: "capitalize" } }, func.value ?? "", ":");
-  return /* @__PURE__ */ React46.createElement(Box6, { component: "span" }, label, " " + (unit !== "custom" ? `${size ?? 0}${unit ?? defaultUnit}` : size || CUSTOM_SIZE_LABEL));
+  const label = /* @__PURE__ */ React47.createElement(Box6, { component: "span", style: { textTransform: "capitalize" } }, func.value ?? "", ":");
+  return /* @__PURE__ */ React47.createElement(Box6, { component: "span" }, label, " " + (unit !== "custom" ? `${size ?? 0}${unit ?? defaultUnit}` : size || CUSTOM_SIZE_LABEL));
 };
 
 // src/controls/filter-control/filter-label.tsx
 var FilterLabel = ({ value }) => {
   if (value.value.func.value === "drop-shadow") {
-    return /* @__PURE__ */ React47.createElement(DropShadowItemLabel, { value });
+    return /* @__PURE__ */ React48.createElement(DropShadowItemLabel, { value });
   }
-  return /* @__PURE__ */ React47.createElement(SingleSizeItemLabel, { value });
+  return /* @__PURE__ */ React48.createElement(SingleSizeItemLabel, { value });
 };
 
 // src/controls/filter-control/filter-repeater-control.tsx
@@ -2198,7 +2328,7 @@ var FILTER_CONFIG = {
 var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
   const { propTypeUtil, label } = ensureFilterConfig(filterPropName);
   const { propType, value: filterValues, setValue } = useBoundProp(propTypeUtil);
-  return /* @__PURE__ */ React48.createElement(FilterConfigProvider, null, /* @__PURE__ */ React48.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(FilterConfigProvider, null, /* @__PURE__ */ React49.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React49.createElement(
     Repeater,
     {
       propTypeUtil,
@@ -2209,20 +2339,20 @@ var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
 });
 var Repeater = ({ propTypeUtil, label, filterPropName }) => {
   const { getInitialValue: getInitialValue2 } = useFilterConfig();
-  return /* @__PURE__ */ React48.createElement(ControlRepeater, { initial: getInitialValue2(), propTypeUtil }, /* @__PURE__ */ React48.createElement(RepeaterHeader, { label }, /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(ControlRepeater, { initial: getInitialValue2(), propTypeUtil }, /* @__PURE__ */ React49.createElement(RepeaterHeader, { label }, /* @__PURE__ */ React49.createElement(
     TooltipAddItemAction,
     {
       newItemIndex: 0,
       ariaLabel: filterPropName === "backdrop-filter" ? "backdrop filter" : "filter"
     }
-  )), /* @__PURE__ */ React48.createElement(ItemsContainer, null, /* @__PURE__ */ React48.createElement(
+  )), /* @__PURE__ */ React49.createElement(ItemsContainer, null, /* @__PURE__ */ React49.createElement(
     Item,
     {
       Label: FilterLabel,
       Icon: FilterIcon,
-      actions: /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(DuplicateItemAction, null), /* @__PURE__ */ React48.createElement(DisableItemAction, null), /* @__PURE__ */ React48.createElement(RemoveItemAction, null))
+      actions: /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(DuplicateItemAction, null), /* @__PURE__ */ React49.createElement(DisableItemAction, null), /* @__PURE__ */ React49.createElement(RemoveItemAction, null))
     }
-  )), /* @__PURE__ */ React48.createElement(EditItemPopover, null, /* @__PURE__ */ React48.createElement(FilterContent, null)));
+  )), /* @__PURE__ */ React49.createElement(EditItemPopover, null, /* @__PURE__ */ React49.createElement(FilterContent, null)));
 };
 function ensureFilterConfig(name) {
   if (name && name in FILTER_CONFIG) {
@@ -2232,8 +2362,8 @@ function ensureFilterConfig(name) {
 }
 
 // src/controls/select-control-wrapper.tsx
-import * as React49 from "react";
-import { useEffect as useEffect6, useState as useState5 } from "react";
+import * as React50 from "react";
+import { useEffect as useEffect6, useState as useState6 } from "react";
 var getOffCanvasElements = () => {
   const extendedWindow = window;
   const documentId = extendedWindow.elementor.config.document.id;
@@ -2269,7 +2399,7 @@ var collectionMethods = {
   "form-elements": getFormElements
 };
 var useDynamicOptions = (collectionId, initialOptions) => {
-  const [options, setOptions] = useState5(initialOptions ?? []);
+  const [options, setOptions] = useState6(initialOptions ?? []);
   useEffect6(() => {
     if (!collectionId || !collectionMethods[collectionId]) {
       setOptions(initialOptions ?? []);
@@ -2282,24 +2412,24 @@ var useDynamicOptions = (collectionId, initialOptions) => {
 var SelectControlWrapper = createControl(
   ({ collectionId, options, ...props }) => {
     const actualOptions = useDynamicOptions(collectionId, options);
-    return /* @__PURE__ */ React49.createElement(SelectControl, { options: actualOptions, ...props });
+    return /* @__PURE__ */ React50.createElement(SelectControl, { options: actualOptions, ...props });
   }
 );
 
 // src/controls/chips-control.tsx
-import * as React50 from "react";
-import { stringArrayPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
+import * as React51 from "react";
+import { stringArrayPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 import { Autocomplete, Chip, TextField as TextField5 } from "@elementor/ui";
 var SIZE6 = "tiny";
 var ChipsControl = createControl(({ options }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil);
-  const selectedValues = (value || []).map((item) => stringPropTypeUtil4.extract(item)).filter((val) => val !== null);
+  const selectedValues = (value || []).map((item) => stringPropTypeUtil5.extract(item)).filter((val) => val !== null);
   const selectedOptions = selectedValues.map((val) => options.find((opt) => opt.value === val)).filter((opt) => opt !== void 0);
   const handleChange = (_, newValue) => {
-    const values = newValue.map((option) => stringPropTypeUtil4.create(option.value));
+    const values = newValue.map((option) => stringPropTypeUtil5.create(option.value));
     setValue(values);
   };
-  return /* @__PURE__ */ React50.createElement(ControlActions, null, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement(ControlActions, null, /* @__PURE__ */ React51.createElement(
     Autocomplete,
     {
       fullWidth: true,
@@ -2311,28 +2441,28 @@ var ChipsControl = createControl(({ options }) => {
       options,
       getOptionLabel: (option) => option.label,
       isOptionEqualToValue: (option, val) => option.value === val.value,
-      renderInput: (params) => /* @__PURE__ */ React50.createElement(TextField5, { ...params }),
+      renderInput: (params) => /* @__PURE__ */ React51.createElement(TextField5, { ...params }),
       renderTags: (values, getTagProps) => values.map((option, index) => {
         const { key, ...chipProps } = getTagProps({ index });
-        return /* @__PURE__ */ React50.createElement(Chip, { key, size: "tiny", label: option.label, ...chipProps });
+        return /* @__PURE__ */ React51.createElement(Chip, { key, size: "tiny", label: option.label, ...chipProps });
       })
     }
   ));
 });
 
 // src/controls/toggle-control.tsx
-import * as React54 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
+import * as React55 from "react";
+import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
-import * as React52 from "react";
-import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
+import * as React53 from "react";
+import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef7, useState as useState7 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
   Menu as Menu2,
   MenuItem,
-  styled as styled5,
+  styled as styled6,
   ToggleButton,
   ToggleButtonGroup,
   Typography as Typography3,
@@ -2340,18 +2470,18 @@ import {
 } from "@elementor/ui";
 
 // src/components/conditional-tooltip.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 import { Tooltip as Tooltip4 } from "@elementor/ui";
 var ConditionalTooltip = ({
   showTooltip,
   children,
   label
 }) => {
-  return showTooltip && label ? /* @__PURE__ */ React51.createElement(Tooltip4, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
+  return showTooltip && label ? /* @__PURE__ */ React52.createElement(Tooltip4, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
 };
 
 // src/components/control-toggle-button-group.tsx
-var StyledToggleButtonGroup = styled5(ToggleButtonGroup)`
+var StyledToggleButtonGroup = styled6(ToggleButtonGroup)`
 	${({ justify }) => `justify-content: ${justify};`}
 	button:not( :last-of-type ) {
 		border-start-end-radius: 0;
@@ -2366,7 +2496,7 @@ var StyledToggleButtonGroup = styled5(ToggleButtonGroup)`
 		border-end-end-radius: 8px;
 	}
 `;
-var StyledToggleButton = styled5(ToggleButton, {
+var StyledToggleButton = styled6(ToggleButton, {
   shouldForwardProp: (prop) => prop !== "isPlaceholder"
 })`
 	${({ theme, isPlaceholder }) => isPlaceholder && `
@@ -2378,7 +2508,7 @@ var StyledToggleButton = styled5(ToggleButton, {
 		}
 	`}
 `;
-var ToggleButtonGroupUi = React52.forwardRef(
+var ToggleButtonGroupUi = React53.forwardRef(
   ({
     justify = "end",
     size = "tiny",
@@ -2426,7 +2556,7 @@ var ToggleButtonGroupUi = React52.forwardRef(
       return [];
     };
     const placeholderArray = getPlaceholderArray(placeholder);
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React53.createElement(
       StyledToggleButtonGroup,
       {
         ref,
@@ -2451,14 +2581,14 @@ var ToggleButtonGroupUi = React52.forwardRef(
           disabled: optionDisabled = false
         }) => {
           const isPlaceholder = placeholderArray.length > 0 && placeholderArray.includes(buttonValue) && (shouldShowExclusivePlaceholder || shouldShowNonExclusivePlaceholder);
-          return /* @__PURE__ */ React52.createElement(
+          return /* @__PURE__ */ React53.createElement(
             ConditionalTooltip,
             {
               key: buttonValue,
               label,
               showTooltip: showTooltip || false
             },
-            /* @__PURE__ */ React52.createElement(
+            /* @__PURE__ */ React53.createElement(
               StyledToggleButton,
               {
                 value: buttonValue,
@@ -2468,12 +2598,12 @@ var ToggleButtonGroupUi = React52.forwardRef(
                 isPlaceholder,
                 disabled: optionDisabled
               },
-              /* @__PURE__ */ React52.createElement(Content3, { size })
+              /* @__PURE__ */ React53.createElement(Content3, { size })
             )
           );
         }
       ),
-      menuItems.length && exclusive && /* @__PURE__ */ React52.createElement(
+      menuItems.length && exclusive && /* @__PURE__ */ React53.createElement(
         SplitButtonGroup,
         {
           size,
@@ -2487,7 +2617,7 @@ var ToggleButtonGroupUi = React52.forwardRef(
   }
 );
 var ControlToggleButtonGroup = (props) => {
-  return /* @__PURE__ */ React52.createElement(ControlActions, null, /* @__PURE__ */ React52.createElement(ToggleButtonGroupUi, { ...props }));
+  return /* @__PURE__ */ React53.createElement(ControlActions, null, /* @__PURE__ */ React53.createElement(ToggleButtonGroupUi, { ...props }));
 };
 var SplitButtonGroup = ({
   size = "tiny",
@@ -2497,7 +2627,7 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items2, value);
-  const [isMenuOpen, setIsMenuOpen] = useState6(false);
+  const [isMenuOpen, setIsMenuOpen] = useState7(false);
   const menuButtonRef = useRef7(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
@@ -2511,7 +2641,7 @@ var SplitButtonGroup = ({
     const shouldRemove = newValue === value;
     onChange(shouldRemove ? null : newValue);
   };
-  return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(
     ToggleButton,
     {
       value: previewButton.value,
@@ -2524,7 +2654,7 @@ var SplitButtonGroup = ({
       }
     },
     previewButton.renderContent({ size })
-  ), /* @__PURE__ */ React52.createElement(
+  ), /* @__PURE__ */ React53.createElement(
     ToggleButton,
     {
       size,
@@ -2535,8 +2665,8 @@ var SplitButtonGroup = ({
       ref: menuButtonRef,
       value: "__chevron-icon-button__"
     },
-    /* @__PURE__ */ React52.createElement(ChevronDownIcon, { fontSize: size })
-  ), /* @__PURE__ */ React52.createElement(
+    /* @__PURE__ */ React53.createElement(ChevronDownIcon, { fontSize: size })
+  ), /* @__PURE__ */ React53.createElement(
     Menu2,
     {
       open: isMenuOpen,
@@ -2554,19 +2684,19 @@ var SplitButtonGroup = ({
         mt: 0.5
       }
     },
-    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React52.createElement(
+    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React53.createElement(
       MenuItem,
       {
         key: buttonValue,
         selected: buttonValue === value,
         onClick: () => onMenuItemClick(buttonValue)
       },
-      /* @__PURE__ */ React52.createElement(ListItemText, null, /* @__PURE__ */ React52.createElement(Typography3, { sx: { fontSize: "14px" } }, label))
+      /* @__PURE__ */ React53.createElement(ListItemText, null, /* @__PURE__ */ React53.createElement(Typography3, { sx: { fontSize: "14px" } }, label))
     ))
   ));
 };
 var usePreviewButton = (items2, value) => {
-  const [previewButton, setPreviewButton] = useState6(
+  const [previewButton, setPreviewButton] = useState7(
     items2.find((item) => item.value === value) ?? items2[0]
   );
   useEffect7(() => {
@@ -2579,7 +2709,7 @@ var usePreviewButton = (items2, value) => {
 };
 
 // src/utils/convert-toggle-options-to-atomic.tsx
-import * as React53 from "react";
+import * as React54 from "react";
 import * as Icons from "@elementor/icons";
 var convertToggleOptionsToAtomic = (options) => {
   return options.map((option) => {
@@ -2590,7 +2720,7 @@ var convertToggleOptionsToAtomic = (options) => {
       label: option.label,
       renderContent: ({ size }) => {
         if (IconComponent) {
-          return /* @__PURE__ */ React53.createElement(IconComponent, { fontSize: size });
+          return /* @__PURE__ */ React54.createElement(IconComponent, { fontSize: size });
         }
         return option.label;
       },
@@ -2610,7 +2740,7 @@ var ToggleControl = createControl(
     maxItems,
     convertOptions = false
   }) => {
-    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil5);
+    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil6);
     const processedOptions = convertOptions ? convertToggleOptionsToAtomic(options) : options;
     const exclusiveValues = processedOptions.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
@@ -2626,7 +2756,7 @@ var ToggleControl = createControl(
       size,
       placeholder
     };
-    return exclusive ? /* @__PURE__ */ React54.createElement(
+    return exclusive ? /* @__PURE__ */ React55.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -2635,7 +2765,7 @@ var ToggleControl = createControl(
         disabled,
         exclusive: true
       }
-    ) : /* @__PURE__ */ React54.createElement(
+    ) : /* @__PURE__ */ React55.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -2649,15 +2779,15 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-import * as React55 from "react";
+import * as React56 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { InputAdornment as InputAdornment3, Typography as Typography4 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
 var renderSuffix = (propType) => {
   if (propType.meta?.suffix) {
-    return /* @__PURE__ */ React55.createElement(InputAdornment3, { position: "end" }, /* @__PURE__ */ React55.createElement(Typography4, { variant: "caption", color: "text.secondary" }, propType.meta.suffix));
+    return /* @__PURE__ */ React56.createElement(InputAdornment3, { position: "end" }, /* @__PURE__ */ React56.createElement(Typography4, { variant: "caption", color: "text.secondary" }, propType.meta.suffix));
   }
-  return /* @__PURE__ */ React55.createElement(React55.Fragment, null);
+  return /* @__PURE__ */ React56.createElement(React56.Fragment, null);
 };
 var NumberControl = createControl(
   ({
@@ -2686,7 +2816,7 @@ var NumberControl = createControl(
       }
       setValue(updatedValue, void 0, { validation: () => isInputValid });
     };
-    return /* @__PURE__ */ React55.createElement(ControlActions, null, /* @__PURE__ */ React55.createElement(
+    return /* @__PURE__ */ React56.createElement(ControlActions, null, /* @__PURE__ */ React56.createElement(
       NumberInput,
       {
         size: "tiny",
@@ -2699,7 +2829,7 @@ var NumberControl = createControl(
         placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
         inputProps: { step, min },
         InputProps: {
-          startAdornment: startIcon ? /* @__PURE__ */ React55.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0,
+          startAdornment: startIcon ? /* @__PURE__ */ React56.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0,
           endAdornment: renderSuffix(propType)
         }
       }
@@ -2708,7 +2838,7 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-import * as React56 from "react";
+import * as React57 from "react";
 import { useId as useId2, useRef as useRef8 } from "react";
 import { bindPopover as bindPopover3, bindToggle, Box as Box7, Grid as Grid8, Popover as Popover3, Stack as Stack7, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __17 } from "@wordpress/i18n";
@@ -2759,14 +2889,14 @@ function EqualUnequalSizesControl({
     }
     setMasterValue(Object.values(newValue)?.pop() ?? null);
   };
-  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(Grid8, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React56.createElement(Grid8, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React56.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React56.createElement(ControlLabel, null, label)), /* @__PURE__ */ React56.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React56.createElement(Box7, { flexGrow: 1 }, /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(Grid8, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React57.createElement(Grid8, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React57.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React57.createElement(ControlLabel, null, label)), /* @__PURE__ */ React57.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React57.createElement(Box7, { flexGrow: 1 }, /* @__PURE__ */ React57.createElement(
     SizeControl,
     {
       placeholder: isMixed ? __17("Mixed", "elementor") : void 0,
       enablePropTypeUnits: !isMixed || !isMixedPlaceholder,
       anchorRef: rowRefs[0]
     }
-  )), /* @__PURE__ */ React56.createElement(Tooltip5, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React56.createElement(
+  )), /* @__PURE__ */ React57.createElement(Tooltip5, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(
     StyledToggleButton,
     {
       size: "tiny",
@@ -2778,7 +2908,7 @@ function EqualUnequalSizesControl({
       "aria-label": tooltipLabel
     },
     icon
-  ))))), /* @__PURE__ */ React56.createElement(
+  ))))), /* @__PURE__ */ React57.createElement(
     Popover3,
     {
       disablePortal: true,
@@ -2796,7 +2926,7 @@ function EqualUnequalSizesControl({
         paper: { sx: { mt: 0.5, width: rowRefs[0].current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React57.createElement(
       PropProvider,
       {
         propType: multiSizePropType,
@@ -2805,18 +2935,18 @@ function EqualUnequalSizesControl({
         setValue: applyMultiSizeValue,
         isDisabled: () => multiSizeDisabled
       },
-      /* @__PURE__ */ React56.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React56.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React56.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React56.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React56.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React56.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React56.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
+      /* @__PURE__ */ React57.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React57.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React57.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React57.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React57.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React57.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React57.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
     )
   ));
 }
 var MultiSizeValueControl = ({ item, rowRef }) => {
   const { bind, label, icon, ariaLabel } = item;
-  return /* @__PURE__ */ React56.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React56.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React56.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(ControlLabel, null, label)), /* @__PURE__ */ React56.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(SizeControl, { startIcon: icon, ariaLabel, anchorRef: rowRef })))));
+  return /* @__PURE__ */ React57.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React57.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React57.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, label)), /* @__PURE__ */ React57.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(SizeControl, { startIcon: icon, ariaLabel, anchorRef: rowRef })))));
 };
 
 // src/controls/linked-dimensions-control.tsx
-import * as React57 from "react";
-import { useLayoutEffect, useRef as useRef9, useState as useState7 } from "react";
+import * as React58 from "react";
+import { useLayoutEffect, useRef as useRef9, useState as useState8 } from "react";
 import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
 import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
@@ -2842,7 +2972,7 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min
     }
     return true;
   };
-  const [isLinked, setIsLinked] = useState7(() => inferIsLinked());
+  const [isLinked, setIsLinked] = useState8(() => inferIsLinked());
   const activeBreakpoint = useActiveBreakpoint2();
   useLayoutEffect(() => {
     setIsLinked(inferIsLinked);
@@ -2891,7 +3021,7 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min
     isDisabled: () => dimensionsDisabled
   };
   const hasPlaceholders = !masterValue && (dimensionsPlaceholder || masterPlaceholder);
-  return /* @__PURE__ */ React57.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React57.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React57.createElement(Tooltip6, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React58.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React58.createElement(Tooltip6, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React58.createElement(
     StyledToggleButton,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -2903,8 +3033,8 @@ var LinkedDimensionsControl = ({ label, isSiteRtl = false, extendedOptions, min
       disabled,
       isPlaceholder: hasPlaceholders
     },
-    /* @__PURE__ */ React57.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), getCssDimensionProps(label, isSiteRtl).map((row, index) => /* @__PURE__ */ React57.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React57.createElement(Grid9, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React57.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(Label, { ...props })), /* @__PURE__ */ React57.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React58.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), getCssDimensionProps(label, isSiteRtl).map((row, index) => /* @__PURE__ */ React58.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React58.createElement(Grid9, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React58.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React58.createElement(Label, { ...props })), /* @__PURE__ */ React58.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React58.createElement(
     Control3,
     {
       bind: props.bind,
@@ -2927,7 +3057,7 @@ var Control3 = ({
   min
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React57.createElement(
+    return /* @__PURE__ */ React58.createElement(
       SizeControl,
       {
         ariaLabel,
@@ -2938,7 +3068,7 @@ var Control3 = ({
       }
     );
   }
-  return /* @__PURE__ */ React57.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React58.createElement(
     SizeControl,
     {
       ariaLabel,
@@ -2950,7 +3080,7 @@ var Control3 = ({
   ));
 };
 var Label = ({ label, bind }) => {
-  return /* @__PURE__ */ React57.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React57.createElement(ControlLabel, null, label));
+  return /* @__PURE__ */ React58.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React58.createElement(ControlLabel, null, label));
 };
 function getCssDimensionProps(label, isSiteRtl) {
   return [
@@ -2960,7 +3090,7 @@ function getCssDimensionProps(label, isSiteRtl) {
         label: __18("Top", "elementor"),
         /* translators: %s is the name of the main group (margin or padding) */
         ariaLabel: sprintf2(__18("%s top", "elementor"), label),
-        icon: /* @__PURE__ */ React57.createElement(SideTopIcon, { fontSize: "tiny" })
+        icon: /* @__PURE__ */ React58.createElement(SideTopIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-end",
@@ -2972,7 +3102,7 @@ function getCssDimensionProps(label, isSiteRtl) {
           /* translators: %s is the name of the main group (margin or padding) */
           sprintf2(__18("%s right", "elementor"), label)
         ),
-        icon: isSiteRtl ? /* @__PURE__ */ React57.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React57.createElement(SideRightIcon, { fontSize: "tiny" })
+        icon: isSiteRtl ? /* @__PURE__ */ React58.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React58.createElement(SideRightIcon, { fontSize: "tiny" })
       }
     ],
     [
@@ -2981,7 +3111,7 @@ function getCssDimensionProps(label, isSiteRtl) {
         label: __18("Bottom", "elementor"),
         /* translators: %s is the name of the main group (margin or padding) */
         ariaLabel: sprintf2(__18("%s bottom", "elementor"), label),
-        icon: /* @__PURE__ */ React57.createElement(SideBottomIcon, { fontSize: "tiny" })
+        icon: /* @__PURE__ */ React58.createElement(SideBottomIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-start",
@@ -2993,23 +3123,23 @@ function getCssDimensionProps(label, isSiteRtl) {
           /* translators: %s is the name of the main group (margin or padding) */
           sprintf2(__18("%s left", "elementor"), label)
         ),
-        icon: isSiteRtl ? /* @__PURE__ */ React57.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React57.createElement(SideLeftIcon, { fontSize: "tiny" })
+        icon: isSiteRtl ? /* @__PURE__ */ React58.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React58.createElement(SideLeftIcon, { fontSize: "tiny" })
       }
     ]
   ];
 }
 
 // src/controls/font-family-control/font-family-control.tsx
-import * as React59 from "react";
+import * as React60 from "react";
 import { useMemo as useMemo6 } from "react";
-import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon2, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag as UnstableTag2, usePopupState as usePopupState5 } from "@elementor/ui";
 import { __ as __20 } from "@wordpress/i18n";
 
 // src/components/item-selector.tsx
-import * as React58 from "react";
-import { useCallback as useCallback2, useEffect as useEffect8, useState as useState8 } from "react";
+import * as React59 from "react";
+import { useCallback as useCallback3, useEffect as useEffect8, useState as useState9 } from "react";
 import { PopoverBody, PopoverHeader as PopoverHeader2, PopoverMenuList, SearchField } from "@elementor/editor-ui";
 import { Box as Box8, Divider as Divider2, Link, Stack as Stack9, Typography as Typography5 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
@@ -3048,7 +3178,7 @@ var ItemSelector = ({
   footer,
   categoryItemContentTemplate
 }) => {
-  const [searchValue, setSearchValue] = useState8("");
+  const [searchValue, setSearchValue] = useState9("");
   const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
@@ -3058,7 +3188,7 @@ var ItemSelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__PURE__ */ React58.createElement(PopoverBody, { width: sectionWidth, id }, /* @__PURE__ */ React58.createElement(PopoverHeader2, { title, onClose: handleClose, icon: /* @__PURE__ */ React58.createElement(IconComponent, { fontSize: "tiny" }) }), /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(PopoverBody, { width: sectionWidth, id }, /* @__PURE__ */ React59.createElement(PopoverHeader2, { title, onClose: handleClose, icon: /* @__PURE__ */ React59.createElement(IconComponent, { fontSize: "tiny" }) }), /* @__PURE__ */ React59.createElement(
     SearchField,
     {
       value: searchValue,
@@ -3066,7 +3196,7 @@ var ItemSelector = ({
       placeholder: __19("Search", "elementor"),
       id: id + "-search"
     }
-  ), /* @__PURE__ */ React58.createElement(Divider2, null), /* @__PURE__ */ React58.createElement(Box8, { sx: { flex: 1, overflow: "auto", minHeight: 0 } }, filteredItemsList.length > 0 ? /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React59.createElement(Divider2, null), /* @__PURE__ */ React59.createElement(Box8, { sx: { flex: 1, overflow: "auto", minHeight: 0 } }, filteredItemsList.length > 0 ? /* @__PURE__ */ React59.createElement(
     ItemList,
     {
       itemListItems: filteredItemsList,
@@ -3077,7 +3207,7 @@ var ItemSelector = ({
       onDebounce,
       categoryItemContentTemplate
     }
-  ) : /* @__PURE__ */ React58.createElement(
+  ) : /* @__PURE__ */ React59.createElement(
     Stack9,
     {
       alignItems: "center",
@@ -3087,16 +3217,16 @@ var ItemSelector = ({
       gap: 1.5,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React58.createElement(IconComponent, { fontSize: "large" }),
-    /* @__PURE__ */ React58.createElement(Box8, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(Typography5, { align: "center", variant: "subtitle2", color: "text.secondary" }, __19("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement(IconComponent, { fontSize: "large" }),
+    /* @__PURE__ */ React59.createElement(Box8, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React59.createElement(Typography5, { align: "center", variant: "subtitle2", color: "text.secondary" }, __19("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React59.createElement(
       Typography5,
       {
         variant: "subtitle2",
         color: "text.secondary",
         sx: { display: "flex", width: "100%", justifyContent: "center" }
       },
-      /* @__PURE__ */ React58.createElement("span", null, "\u201C"),
-      /* @__PURE__ */ React58.createElement(
+      /* @__PURE__ */ React59.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React59.createElement(
         Box8,
         {
           component: "span",
@@ -3104,9 +3234,9 @@ var ItemSelector = ({
         },
         searchValue
       ),
-      /* @__PURE__ */ React58.createElement("span", null, "\u201D.")
+      /* @__PURE__ */ React59.createElement("span", null, "\u201D.")
     )),
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement(
       Typography5,
       {
         align: "center",
@@ -3115,7 +3245,7 @@ var ItemSelector = ({
         sx: { display: "flex", flexDirection: "column" }
       },
       __19("Try something else.", "elementor"),
-      /* @__PURE__ */ React58.createElement(
+      /* @__PURE__ */ React59.createElement(
         Link,
         {
           color: "secondary",
@@ -3146,8 +3276,8 @@ var ItemList = ({
       }
     });
   }, 100);
-  const memoizedItemStyle = useCallback2((item) => itemStyle(item), [itemStyle]);
-  return /* @__PURE__ */ React58.createElement(
+  const memoizedItemStyle = useCallback3((item) => itemStyle(item), [itemStyle]);
+  return /* @__PURE__ */ React59.createElement(
     PopoverMenuList,
     {
       items: itemListItems,
@@ -3162,7 +3292,7 @@ var ItemList = ({
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = useState8(() => debounce(fn, delay));
+  const [debouncedFn] = useState9(() => debounce(fn, delay));
   useEffect8(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
@@ -3181,7 +3311,7 @@ var FontFamilyControl = createControl(
       setValue: setFontFamily,
       disabled,
       placeholder
-    } = useBoundProp(stringPropTypeUtil6);
+    } = useBoundProp(stringPropTypeUtil7);
     const popoverState = usePopupState5({ variant: "popover" });
     const isShowingPlaceholder = !fontFamily && placeholder;
     const mapFontSubs = useMemo6(() => {
@@ -3190,13 +3320,13 @@ var FontFamilyControl = createControl(
         items: fonts
       }));
     }, [fontFamilies]);
-    return /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(ControlActions, null, /* @__PURE__ */ React59.createElement(
+    return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(ControlActions, null, /* @__PURE__ */ React60.createElement(
       UnstableTag2,
       {
         id: "font-family-control",
         variant: "outlined",
         label: fontFamily || placeholder,
-        endIcon: /* @__PURE__ */ React59.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
+        endIcon: /* @__PURE__ */ React60.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
         ...bindTrigger3(popoverState),
         fullWidth: true,
         disabled,
@@ -3208,7 +3338,7 @@ var FontFamilyControl = createControl(
           textTransform: "capitalize"
         } : void 0
       }
-    )), /* @__PURE__ */ React59.createElement(
+    )), /* @__PURE__ */ React60.createElement(
       Popover4,
       {
         disablePortal: true,
@@ -3218,7 +3348,7 @@ var FontFamilyControl = createControl(
         sx: { my: 1.5 },
         ...bindPopover4(popoverState)
       },
-      /* @__PURE__ */ React59.createElement(
+      /* @__PURE__ */ React60.createElement(
         ItemSelector,
         {
           id: "font-family-selector",
@@ -3238,7 +3368,7 @@ var FontFamilyControl = createControl(
 );
 
 // src/controls/url-control.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 import { urlPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField6 } from "@elementor/ui";
 var UrlControl = createControl(
@@ -3246,7 +3376,7 @@ var UrlControl = createControl(
     const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(urlPropTypeUtil);
     const handleChange = (event) => setValue(event.target.value);
     const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
-    return /* @__PURE__ */ React60.createElement(ControlActions, null, /* @__PURE__ */ React60.createElement(
+    return /* @__PURE__ */ React61.createElement(ControlActions, null, /* @__PURE__ */ React61.createElement(
       TextField6,
       {
         size: "tiny",
@@ -3264,8 +3394,8 @@ var UrlControl = createControl(
 );
 
 // src/controls/link-control.tsx
-import * as React65 from "react";
-import { useEffect as useEffect9, useMemo as useMemo8, useState as useState10 } from "react";
+import * as React66 from "react";
+import { useEffect as useEffect9, useMemo as useMemo8, useState as useState11 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
@@ -3275,7 +3405,7 @@ import { debounce as debounce3 } from "@elementor/utils";
 import { __ as __23 } from "@wordpress/i18n";
 
 // src/components/restricted-link-infotip.tsx
-import * as React61 from "react";
+import * as React62 from "react";
 import { selectElement } from "@elementor/editor-elements";
 import { InfoCircleFilledIcon } from "@elementor/icons";
 import { Alert, AlertAction, AlertTitle, Box as Box9, Infotip as Infotip2, Link as Link2 } from "@elementor/ui";
@@ -3305,12 +3435,12 @@ var RestrictedLinkInfotip = ({
       selectElement(elementId);
     }
   };
-  const content = /* @__PURE__ */ React61.createElement(
+  const content = /* @__PURE__ */ React62.createElement(
     Alert,
     {
       color: "secondary",
-      icon: /* @__PURE__ */ React61.createElement(InfoCircleFilledIcon, null),
-      action: /* @__PURE__ */ React61.createElement(
+      icon: /* @__PURE__ */ React62.createElement(InfoCircleFilledIcon, null),
+      action: /* @__PURE__ */ React62.createElement(
         AlertAction,
         {
           sx: { width: "fit-content" },
@@ -3321,10 +3451,10 @@ var RestrictedLinkInfotip = ({
         __21("Take me there", "elementor")
       )
     },
-    /* @__PURE__ */ React61.createElement(AlertTitle, null, __21("Nested links", "elementor")),
-    /* @__PURE__ */ React61.createElement(Box9, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React61.createElement(Link2, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
+    /* @__PURE__ */ React62.createElement(AlertTitle, null, __21("Nested links", "elementor")),
+    /* @__PURE__ */ React62.createElement(Box9, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React62.createElement(Link2, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
   );
-  return shouldRestrict && isVisible ? /* @__PURE__ */ React61.createElement(
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React62.createElement(
     Infotip2,
     {
       placement: "right",
@@ -3332,17 +3462,17 @@ var RestrictedLinkInfotip = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React61.createElement(Box9, null, children)
-  ) : /* @__PURE__ */ React61.createElement(React61.Fragment, null, children);
+    /* @__PURE__ */ React62.createElement(Box9, null, children)
+  ) : /* @__PURE__ */ React62.createElement(React62.Fragment, null, children);
 };
 
 // src/controls/query-control.tsx
-import * as React63 from "react";
-import { useMemo as useMemo7, useState as useState9 } from "react";
+import * as React64 from "react";
+import { useMemo as useMemo7, useState as useState10 } from "react";
 import {
   numberPropTypeUtil as numberPropTypeUtil2,
   queryPropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil7,
+  stringPropTypeUtil as stringPropTypeUtil8,
   urlPropTypeUtil as urlPropTypeUtil2
 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
@@ -3351,7 +3481,7 @@ import { debounce as debounce2 } from "@elementor/utils";
 import { __ as __22 } from "@wordpress/i18n";
 
 // src/components/autocomplete.tsx
-import * as React62 from "react";
+import * as React63 from "react";
 import { forwardRef as forwardRef8 } from "react";
 import { XIcon as XIcon2 } from "@elementor/icons";
 import {
@@ -3383,7 +3513,7 @@ var Autocomplete2 = forwardRef8((props, ref) => {
   const valueLength = value?.toString()?.length ?? 0;
   const meetsMinLength = valueLength >= minInputLength;
   const shouldOpen = meetsMinLength && (allowCustomValues ? optionKeys.length > 0 : true);
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(
     AutocompleteBase,
     {
       ...restProps,
@@ -3404,8 +3534,8 @@ var Autocomplete2 = forwardRef8((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React62.createElement(Box10, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React62.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React63.createElement(Box10, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React63.createElement(
         TextInput,
         {
           params,
@@ -3432,7 +3562,7 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(
     TextField7,
     {
       ...params,
@@ -3447,7 +3577,7 @@ var TextInput = ({
       InputProps: {
         ...params.InputProps,
         startAdornment: startAdornment || params.InputProps.startAdornment,
-        endAdornment: /* @__PURE__ */ React62.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React63.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -3456,7 +3586,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React62.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React62.createElement(IconButton5, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React62.createElement(XIcon2, { fontSize: params.size })));
+}) => /* @__PURE__ */ React63.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React63.createElement(IconButton5, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React63.createElement(XIcon2, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -3493,7 +3623,7 @@ var QueryControl = createControl((props) => {
     onSetValue,
     ariaLabel
   } = props || {};
-  const [options, setOptions] = useState9(
+  const [options, setOptions] = useState10(
     generateFirstLoadedOption(queryValue)
   );
   const onOptionChange = (newValue) => {
@@ -3504,7 +3634,7 @@ var QueryControl = createControl((props) => {
     }
     const newQueryValue = {
       id: numberPropTypeUtil2.create(newValue),
-      label: stringPropTypeUtil7.create(findMatchingOption(options, newValue)?.label || null)
+      label: stringPropTypeUtil8.create(findMatchingOption(options, newValue)?.label || null)
     };
     setQueryValue(newQueryValue);
     onSetValue?.(queryPropTypeUtil.create(newQueryValue));
@@ -3537,13 +3667,13 @@ var QueryControl = createControl((props) => {
     [url]
   );
   const displayValue = queryValue?.id?.value ?? urlValue;
-  return /* @__PURE__ */ React63.createElement(ControlActions, null, /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement(ControlActions, null, /* @__PURE__ */ React64.createElement(
     Autocomplete2,
     {
       options,
       allowCustomValues,
       placeholder: urlPlaceholder ?? placeholder,
-      startAdornment: /* @__PURE__ */ React63.createElement(SearchIcon, { fontSize: "tiny" }),
+      startAdornment: /* @__PURE__ */ React64.createElement(SearchIcon, { fontSize: "tiny" }),
       value: displayValue,
       onOptionChange,
       onTextChange,
@@ -3583,7 +3713,7 @@ function generateFirstLoadedOption(queryValue) {
 }
 
 // src/controls/switch-control.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 import { booleanPropTypeUtil } from "@elementor/editor-props";
 import { Box as Box11, Switch } from "@elementor/ui";
 var SwitchControl = createControl(() => {
@@ -3591,7 +3721,7 @@ var SwitchControl = createControl(() => {
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React64.createElement(Box11, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(Box11, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React65.createElement(
     Switch,
     {
       checked: !!(value || placeholder),
@@ -3611,7 +3741,7 @@ var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const linkPlaceholder = propContext.placeholder;
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isActive, setIsActive] = useState10(!!value || !!linkPlaceholder);
+  const [isActive, setIsActive] = useState11(!!value || !!linkPlaceholder);
   const {
     allowCustomValues = true,
     queryOptions,
@@ -3621,7 +3751,7 @@ var LinkControl = createControl((props) => {
     label = __23("Link", "elementor"),
     ariaLabel
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState10(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState11(
     getLinkInLinkRestriction(elementId, value ?? linkPlaceholder)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
@@ -3674,7 +3804,7 @@ var LinkControl = createControl((props) => {
     } : null;
     setLinkSessionValue({ ...linkSessionValue, value: valueToSave });
   };
-  return /* @__PURE__ */ React65.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React65.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React66.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React66.createElement(
     Stack10,
     {
       direction: "row",
@@ -3684,8 +3814,8 @@ var LinkControl = createControl((props) => {
         marginInlineEnd: -0.75
       }
     },
-    /* @__PURE__ */ React65.createElement(ControlLabel, null, label),
-    /* @__PURE__ */ React65.createElement(RestrictedLinkInfotip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React66.createElement(ControlLabel, null, label),
+    /* @__PURE__ */ React66.createElement(RestrictedLinkInfotip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React66.createElement(
       IconButton6,
       {
         size: SIZE7,
@@ -3693,9 +3823,9 @@ var LinkControl = createControl((props) => {
         "aria-label": __23("Toggle link", "elementor"),
         disabled: shouldDisableAddingLink
       },
-      isActive ? /* @__PURE__ */ React65.createElement(MinusIcon, { fontSize: SIZE7 }) : /* @__PURE__ */ React65.createElement(PlusIcon2, { fontSize: SIZE7 })
+      isActive ? /* @__PURE__ */ React66.createElement(MinusIcon, { fontSize: SIZE7 }) : /* @__PURE__ */ React66.createElement(PlusIcon2, { fontSize: SIZE7 })
     ))
-  ), /* @__PURE__ */ React65.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React65.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React65.createElement(
+  ), /* @__PURE__ */ React66.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React66.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React66.createElement(
     QueryControl,
     {
       queryOptions,
@@ -3705,29 +3835,29 @@ var LinkControl = createControl((props) => {
       onSetValue: onSaveValueToSession,
       ariaLabel: ariaLabel || label
     }
-  )), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React65.createElement(Grid10, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React65.createElement(Grid10, { item: true }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, __23("Open in a new tab", "elementor"))), /* @__PURE__ */ React65.createElement(Grid10, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React65.createElement(SwitchControl, null))))))));
+  )), /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React66.createElement(Grid10, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React66.createElement(Grid10, { item: true }, /* @__PURE__ */ React66.createElement(ControlFormLabel, null, __23("Open in a new tab", "elementor"))), /* @__PURE__ */ React66.createElement(Grid10, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React66.createElement(SwitchControl, null))))))));
 });
 
 // src/controls/html-tag-control.tsx
-import * as React67 from "react";
+import * as React68 from "react";
 import { getElementLabel } from "@elementor/editor-elements";
-import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
-import { Select as Select2, styled as styled6, Typography as Typography6 } from "@elementor/ui";
+import { Select as Select2, styled as styled7, Typography as Typography6 } from "@elementor/ui";
 import { __ as __24 } from "@wordpress/i18n";
 
 // src/components/conditional-control-infotip.tsx
-import * as React66 from "react";
+import * as React67 from "react";
 import { InfoAlert } from "@elementor/editor-ui";
 import { AlertTitle as AlertTitle2, Box as Box12, Infotip as Infotip3, useTheme as useTheme2 } from "@elementor/ui";
 import { DirectionProvider } from "@elementor/ui";
 var DEFAULT_COLOR = "secondary";
-var ConditionalControlInfotip = React66.forwardRef(
+var ConditionalControlInfotip = React67.forwardRef(
   ({ children, title, description, alertProps, infotipProps, ...props }, ref) => {
     const theme = useTheme2();
     const isUiRtl = "rtl" === theme.direction;
     const isEnabled = props.isEnabled && (title || description);
-    return /* @__PURE__ */ React66.createElement(Box12, { ref }, isEnabled ? /* @__PURE__ */ React66.createElement(DirectionProvider, { rtl: isUiRtl }, /* @__PURE__ */ React66.createElement(
+    return /* @__PURE__ */ React67.createElement(Box12, { ref }, isEnabled ? /* @__PURE__ */ React67.createElement(DirectionProvider, { rtl: isUiRtl }, /* @__PURE__ */ React67.createElement(
       Infotip3,
       {
         placement: "right",
@@ -3745,14 +3875,14 @@ var ConditionalControlInfotip = React66.forwardRef(
           }
         },
         ...infotipProps,
-        content: /* @__PURE__ */ React66.createElement(
+        content: /* @__PURE__ */ React67.createElement(
           InfoAlert,
           {
             color: DEFAULT_COLOR,
             sx: { width: 300, px: 1.5, py: 2 },
             ...alertProps
           },
-          /* @__PURE__ */ React66.createElement(Box12, { sx: { flexDirection: "column", display: "flex", gap: 0.5 } }, /* @__PURE__ */ React66.createElement(AlertTitle2, null, title), /* @__PURE__ */ React66.createElement(Box12, null, description))
+          /* @__PURE__ */ React67.createElement(Box12, { sx: { flexDirection: "column", display: "flex", gap: 0.5 } }, /* @__PURE__ */ React67.createElement(AlertTitle2, null, title), /* @__PURE__ */ React67.createElement(Box12, null, description))
         )
       },
       children
@@ -3761,7 +3891,7 @@ var ConditionalControlInfotip = React66.forwardRef(
 );
 
 // src/controls/html-tag-control.tsx
-var StyledSelect = styled6(Select2)(() => ({ ".MuiSelect-select.Mui-disabled": { cursor: "not-allowed" } }));
+var StyledSelect = styled7(Select2)(() => ({ ".MuiSelect-select.Mui-disabled": { cursor: "not-allowed" } }));
 var HtmlTagControl = createControl((props) => {
   const {
     options,
@@ -3769,7 +3899,7 @@ var HtmlTagControl = createControl((props) => {
     fallbackLabels = {},
     context: { elementId }
   } = props;
-  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil8);
+  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil9);
   const handleChange = (event) => {
     const newValue = event.target.value || null;
     onChange?.(newValue, value);
@@ -3794,10 +3924,10 @@ var HtmlTagControl = createControl((props) => {
     }
     const placeholderOption = findOptionByValue(placeholder);
     const displayText = placeholderOption?.label || placeholder;
-    return /* @__PURE__ */ React67.createElement(Typography6, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
+    return /* @__PURE__ */ React68.createElement(Typography6, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
   };
   const findOptionByValue = (searchValue) => options.find((opt) => opt.value === searchValue);
-  return /* @__PURE__ */ React67.createElement(ControlActions, null, /* @__PURE__ */ React67.createElement(ConditionalControlInfotip, { ...infoTipProps }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(ControlActions, null, /* @__PURE__ */ React68.createElement(ConditionalControlInfotip, { ...infoTipProps }, /* @__PURE__ */ React68.createElement(
     StyledSelect,
     {
       sx: { overflow: "hidden", cursor: disabled ? "not-allowed" : void 0 },
@@ -3809,13 +3939,13 @@ var HtmlTagControl = createControl((props) => {
       disabled,
       fullWidth: true
     },
-    options.map(({ label, ...itemProps }) => /* @__PURE__ */ React67.createElement(MenuListItem3, { key: itemProps.value, ...itemProps, value: itemProps.value ?? "" }, label))
+    options.map(({ label, ...itemProps }) => /* @__PURE__ */ React68.createElement(MenuListItem3, { key: itemProps.value, ...itemProps, value: itemProps.value ?? "" }, label))
   )));
 });
 
 // src/controls/gap-control.tsx
-import * as React68 from "react";
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState11 } from "react";
+import * as React69 from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState12 } from "react";
 import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { useActiveBreakpoint as useActiveBreakpoint3 } from "@elementor/editor-responsive";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
@@ -3841,7 +3971,7 @@ var GapControl = ({ label }) => {
     }
     return true;
   };
-  const [isLinked, setIsLinked] = useState11(() => inferIsLinked());
+  const [isLinked, setIsLinked] = useState12(() => inferIsLinked());
   const activeBreakpoint = useActiveBreakpoint3();
   useLayoutEffect2(() => {
     setIsLinked(inferIsLinked());
@@ -3877,7 +4007,7 @@ var GapControl = ({ label }) => {
     placeholder: directionPlaceholder
   };
   const hasPlaceholders = !masterValue && (directionPlaceholder || masterPlaceholder);
-  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React68.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(ControlLabel, null, label), /* @__PURE__ */ React68.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React69.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(ControlLabel, null, label), /* @__PURE__ */ React69.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React69.createElement(
     StyledToggleButton,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -3889,8 +4019,8 @@ var GapControl = ({ label }) => {
       disabled,
       isPlaceholder: hasPlaceholders
     },
-    /* @__PURE__ */ React68.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React68.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React68.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, __25("Column", "elementor"))), /* @__PURE__ */ React68.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React69.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React69.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React69.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(ControlFormLabel, null, __25("Column", "elementor"))), /* @__PURE__ */ React69.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(
     Control4,
     {
       bind: "column",
@@ -3898,7 +4028,7 @@ var GapControl = ({ label }) => {
       isLinked,
       anchorRef: stackRef
     }
-  ))), /* @__PURE__ */ React68.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React68.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, __25("Row", "elementor"))), /* @__PURE__ */ React68.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(
+  ))), /* @__PURE__ */ React69.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React69.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(ControlFormLabel, null, __25("Row", "elementor"))), /* @__PURE__ */ React69.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(
     Control4,
     {
       bind: "row",
@@ -3915,15 +4045,15 @@ var Control4 = ({
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React68.createElement(SizeControl, { anchorRef, ariaLabel });
+    return /* @__PURE__ */ React69.createElement(SizeControl, { anchorRef, ariaLabel });
   }
-  return /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React68.createElement(SizeControl, { anchorRef, ariaLabel }));
+  return /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React69.createElement(SizeControl, { anchorRef, ariaLabel }));
 };
 
 // src/controls/aspect-ratio-control.tsx
-import * as React69 from "react";
-import { useEffect as useEffect10, useState as useState12 } from "react";
-import { stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
+import * as React70 from "react";
+import { useEffect as useEffect10, useState as useState13 } from "react";
+import { stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
 import { Grid as Grid12, Select as Select3, Stack as Stack12, TextField as TextField8 } from "@elementor/ui";
@@ -3945,14 +4075,14 @@ var AspectRatioControl = createControl(({ label }) => {
     setValue: setAspectRatioValue,
     disabled,
     placeholder: externalPlaceholder
-  } = useBoundProp(stringPropTypeUtil9);
+  } = useBoundProp(stringPropTypeUtil10);
   const aspectRatioValue = currentPropValue ?? externalPlaceholder;
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
-  const [isCustom, setIsCustom] = useState12(isCustomSelected);
-  const [customWidth, setCustomWidth] = useState12(initialWidth);
-  const [customHeight, setCustomHeight] = useState12(initialHeight);
-  const [selectedValue, setSelectedValue] = useState12(
+  const [isCustom, setIsCustom] = useState13(isCustomSelected);
+  const [customWidth, setCustomWidth] = useState13(initialWidth);
+  const [customHeight, setCustomHeight] = useState13(initialHeight);
+  const [selectedValue, setSelectedValue] = useState13(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
   useEffect10(() => {
@@ -3996,7 +4126,7 @@ var AspectRatioControl = createControl(({ label }) => {
   };
   const lookup = currentPropValue ?? externalPlaceholder;
   const selectedOption = RATIO_OPTIONS.find((option) => option.value === lookup);
-  return /* @__PURE__ */ React69.createElement(ControlActions, null, /* @__PURE__ */ React69.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React69.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlLabel, null, label)), /* @__PURE__ */ React69.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(ControlActions, null, /* @__PURE__ */ React70.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React70.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React70.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(ControlLabel, null, label)), /* @__PURE__ */ React70.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(
     Select3,
     {
       size: "tiny",
@@ -4009,9 +4139,9 @@ var AspectRatioControl = createControl(({ label }) => {
       fullWidth: true
     },
     [...RATIO_OPTIONS, { label: __26("Custom", "elementor"), value: CUSTOM_RATIO }].map(
-      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React69.createElement(MenuListItem4, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React70.createElement(MenuListItem4, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
-  ))), isCustom && /* @__PURE__ */ React69.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(
+  ))), isCustom && /* @__PURE__ */ React70.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React70.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(
     TextField8,
     {
       size: "tiny",
@@ -4021,10 +4151,10 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customWidth,
       onChange: handleCustomWidthChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React69.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React70.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
       }
     }
-  )), /* @__PURE__ */ React69.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(
+  )), /* @__PURE__ */ React70.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(
     TextField8,
     {
       size: "tiny",
@@ -4034,25 +4164,25 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customHeight,
       onChange: handleCustomHeightChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React69.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React70.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
       }
     }
   )))));
 });
 
 // src/controls/svg-media-control.tsx
-import * as React71 from "react";
-import { useState as useState14 } from "react";
+import * as React72 from "react";
+import { useState as useState15 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil3 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
-import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled7, ThemeProvider } from "@elementor/ui";
+import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled8, ThemeProvider } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
 import { __ as __28 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
-import * as React70 from "react";
-import { useState as useState13 } from "react";
+import * as React71 from "react";
+import { useState as useState14 } from "react";
 import {
   Button as Button3,
   CircularProgress as CircularProgress2,
@@ -4078,7 +4208,7 @@ var ADMIN_FAILED_CONTENT_TEXT_PT2 = __27(
 var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
-  const [isError, setIsError] = useState13(false);
+  const [isError, setIsError] = useState14(false);
   const onClose = (enabled) => {
     props.onClose(enabled);
     setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
@@ -4096,9 +4226,9 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return /* @__PURE__ */ React70.createElement(AdminDialog, { ...dialogProps });
+  return /* @__PURE__ */ React71.createElement(AdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React70.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React70.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React70.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React70.createElement(Divider3, null), /* @__PURE__ */ React70.createElement(DialogContent, null, /* @__PURE__ */ React70.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React70.createElement(React70.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React70.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React70.createElement(DialogActions, null, /* @__PURE__ */ React70.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __27("Cancel", "elementor")), /* @__PURE__ */ React70.createElement(
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React71.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React71.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React71.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React71.createElement(Divider3, null), /* @__PURE__ */ React71.createElement(DialogContent, null, /* @__PURE__ */ React71.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React71.createElement(React71.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React71.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React71.createElement(DialogActions, null, /* @__PURE__ */ React71.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __27("Cancel", "elementor")), /* @__PURE__ */ React71.createElement(
   Button3,
   {
     size: "medium",
@@ -4107,7 +4237,7 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React70.createElement(CircularProgress2, { size: 24 }) : __27("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React71.createElement(CircularProgress2, { size: 24 }) : __27("Enable", "elementor")
 )));
 
 // src/controls/svg-media-control.tsx
@@ -4115,7 +4245,7 @@ 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 = styled7(Card2)`
+var StyledCard = styled8(Card2)`
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -4124,7 +4254,7 @@ var StyledCard = styled7(Card2)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = styled7(Stack13)`
+var StyledCardMediaContainer = styled8(Stack13)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -4142,7 +4272,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState14(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState15(false);
   const { isAdmin } = useCurrentUserCapabilities();
   const { open } = useWpMediaFrame2({
     mediaTypes: ["svg"],
@@ -4173,10 +4303,10 @@ var SvgMediaControl = createControl(() => {
   };
   const infotipProps = {
     title: __28("Sorry, you can't upload that file yet.", "elementor"),
-    description: /* @__PURE__ */ React71.createElement(React71.Fragment, null, __28("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React71.createElement("br", null), __28("file uploads.", "elementor")),
+    description: /* @__PURE__ */ React72.createElement(React72.Fragment, null, __28("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React72.createElement("br", null), __28("file uploads.", "elementor")),
     isEnabled: !isAdmin
   };
-  return /* @__PURE__ */ React71.createElement(Stack13, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React71.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React71.createElement(ControlActions, null, /* @__PURE__ */ React71.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React71.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React71.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React72.createElement(Stack13, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React72.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React72.createElement(ControlActions, null, /* @__PURE__ */ React72.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React72.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React72.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React72.createElement(
     CardMedia2,
     {
       component: "img",
@@ -4184,7 +4314,7 @@ var SvgMediaControl = createControl(() => {
       alt: __28("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React71.createElement(
+  )), /* @__PURE__ */ React72.createElement(
     CardOverlay2,
     {
       sx: {
@@ -4193,7 +4323,7 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React71.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React72.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React72.createElement(
       Button4,
       {
         size: "tiny",
@@ -4203,13 +4333,13 @@ var SvgMediaControl = createControl(() => {
         "aria-label": "Select SVG"
       },
       __28("Select SVG", "elementor")
-    ), /* @__PURE__ */ React71.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React71.createElement("span", null, /* @__PURE__ */ React71.createElement(ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React71.createElement(
+    ), /* @__PURE__ */ React72.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React72.createElement("span", null, /* @__PURE__ */ React72.createElement(ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React72.createElement(
       Button4,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React71.createElement(UploadIcon2, null),
+        startIcon: /* @__PURE__ */ React72.createElement(UploadIcon2, null),
         disabled: !isAdmin,
         onClick: () => isAdmin && handleClick(MODE_UPLOAD),
         "aria-label": "Upload SVG"
@@ -4220,7 +4350,7 @@ var SvgMediaControl = createControl(() => {
 });
 
 // src/controls/video-media-control.tsx
-import * as React72 from "react";
+import * as React73 from "react";
 import { videoSrcPropTypeUtil } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon3 } from "@elementor/icons";
 import { Button as Button5, Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress4, Stack as Stack14 } from "@elementor/ui";
@@ -4246,7 +4376,7 @@ var VideoMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React72.createElement(ControlActions, null, /* @__PURE__ */ React72.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(ControlActions, null, /* @__PURE__ */ React73.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React73.createElement(
     CardMedia3,
     {
       sx: {
@@ -4261,8 +4391,8 @@ var VideoMediaControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React72.createElement(VideoPreview, { isFetching, videoUrl })
-  ), /* @__PURE__ */ React72.createElement(CardOverlay3, null, /* @__PURE__ */ React72.createElement(Stack14, { gap: 1 }, /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.createElement(VideoPreview, { isFetching, videoUrl })
+  ), /* @__PURE__ */ React73.createElement(CardOverlay3, null, /* @__PURE__ */ React73.createElement(Stack14, { gap: 1 }, /* @__PURE__ */ React73.createElement(
     Button5,
     {
       size: "tiny",
@@ -4271,13 +4401,13 @@ var VideoMediaControl = createControl(() => {
       onClick: () => open({ mode: "browse" })
     },
     __29("Select video", "elementor")
-  ), /* @__PURE__ */ React72.createElement(
+  ), /* @__PURE__ */ React73.createElement(
     Button5,
     {
       size: "tiny",
       variant: "text",
       color: "inherit",
-      startIcon: /* @__PURE__ */ React72.createElement(UploadIcon3, null),
+      startIcon: /* @__PURE__ */ React73.createElement(UploadIcon3, null),
       onClick: () => open({ mode: "upload" })
     },
     __29("Upload", "elementor")
@@ -4285,10 +4415,10 @@ var VideoMediaControl = createControl(() => {
 });
 var VideoPreview = ({ isFetching = false, videoUrl }) => {
   if (isFetching) {
-    return /* @__PURE__ */ React72.createElement(CircularProgress4, null);
+    return /* @__PURE__ */ React73.createElement(CircularProgress4, null);
   }
   if (videoUrl) {
-    return /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React73.createElement(
       "video",
       {
         src: videoUrl,
@@ -4303,24 +4433,24 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ React72.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
+  return /* @__PURE__ */ React73.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
 };
 
 // src/controls/background-control/background-control.tsx
-import * as React79 from "react";
+import * as React80 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid17 } from "@elementor/ui";
 import { __ as __35 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React78 from "react";
+import * as React79 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box13, CardMedia as CardMedia4, styled as styled8, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
+import { Box as Box13, CardMedia as CardMedia4, styled as styled9, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
 import { __ as __34 } from "@wordpress/i18n";
 
@@ -4329,14 +4459,14 @@ import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React73 from "react";
+import * as React74 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
   colorStopPropTypeUtil,
   gradientColorStopPropTypeUtil,
   numberPropTypeUtil as numberPropTypeUtil3,
-  stringPropTypeUtil as stringPropTypeUtil10
+  stringPropTypeUtil as stringPropTypeUtil11
 } from "@elementor/editor-props";
 import { UnstableGradientBox } from "@elementor/ui";
 var BackgroundGradientColorControl = createControl(() => {
@@ -4344,13 +4474,13 @@ var BackgroundGradientColorControl = createControl(() => {
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = stringPropTypeUtil10.create(newValue.positions.join(" "));
+      transformedValue.positions = stringPropTypeUtil11.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: stringPropTypeUtil10.create(newValue.type),
+    type: stringPropTypeUtil11.create(newValue.type),
     angle: numberPropTypeUtil3.create(newValue.angle),
     stops: gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
@@ -4376,7 +4506,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -4386,7 +4516,7 @@ var BackgroundGradientColorControl = createControl(() => {
   );
 });
 var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
-  type: stringPropTypeUtil10.create("linear"),
+  type: stringPropTypeUtil11.create("linear"),
   angle: numberPropTypeUtil3.create(180),
   stops: gradientColorStopPropTypeUtil.create([
     colorStopPropTypeUtil.create({
@@ -4401,7 +4531,7 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React74 from "react";
+import * as React75 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid13 } from "@elementor/ui";
 import { __ as __30 } from "@wordpress/i18n";
@@ -4409,24 +4539,24 @@ var attachmentControlOptions = [
   {
     value: "fixed",
     label: __30("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(PinIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
     label: __30("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(PinnedOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React74.createElement(PopoverGridContainer, null, /* @__PURE__ */ React74.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React74.createElement(ControlFormLabel, null, __30("Attachment", "elementor"))), /* @__PURE__ */ React74.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React74.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React75.createElement(PopoverGridContainer, null, /* @__PURE__ */ React75.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlFormLabel, null, __30("Attachment", "elementor"))), /* @__PURE__ */ React75.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React75.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React75 from "react";
+import * as React76 from "react";
 import { useRef as useRef11 } from "react";
-import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid14, Select as Select4 } from "@elementor/ui";
@@ -4445,7 +4575,7 @@ var backgroundPositionOptions = [
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil11);
+  const stringPropContext = useBoundProp(stringPropTypeUtil12);
   const isCustom = !!backgroundImageOffsetContext.value;
   const rowRef = useRef11(null);
   const handlePositionChange = (event) => {
@@ -4456,7 +4586,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React75.createElement(Grid14, { container: true, spacing: 1.5 }, /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, null, /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlFormLabel, null, __31("Position", "elementor"))), /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React75.createElement(ControlActions, null, /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React76.createElement(Grid14, { container: true, spacing: 1.5 }, /* @__PURE__ */ React76.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React76.createElement(PopoverGridContainer, null, /* @__PURE__ */ React76.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(ControlFormLabel, null, __31("Position", "elementor"))), /* @__PURE__ */ React76.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React76.createElement(ControlActions, null, /* @__PURE__ */ React76.createElement(
     Select4,
     {
       fullWidth: true,
@@ -4465,18 +4595,18 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React75.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
-  ))))), isCustom ? /* @__PURE__ */ React75.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(Grid14, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React75.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React76.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
+  ))))), isCustom ? /* @__PURE__ */ React76.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React76.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React76.createElement(Grid14, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React76.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React76.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React75.createElement(LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React76.createElement(LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React75.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React75.createElement(
+  ))), /* @__PURE__ */ React76.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React76.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React75.createElement(LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React76.createElement(LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
@@ -4484,7 +4614,7 @@ var BackgroundImageOverlayPosition = () => {
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React76 from "react";
+import * as React77 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
 import { Grid as Grid15 } from "@elementor/ui";
 import { __ as __32 } from "@wordpress/i18n";
@@ -4492,36 +4622,36 @@ var repeatControlOptions = [
   {
     value: "repeat",
     label: __32("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(GridDotsIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
     label: __32("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(DotsHorizontalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
     label: __32("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(DotsVerticalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
     label: __32("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(XIcon3, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React76.createElement(PopoverGridContainer, null, /* @__PURE__ */ React76.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(ControlFormLabel, null, __32("Repeat", "elementor"))), /* @__PURE__ */ React76.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React76.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React77.createElement(PopoverGridContainer, null, /* @__PURE__ */ React77.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, __32("Repeat", "elementor"))), /* @__PURE__ */ React77.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React77.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React77 from "react";
+import * as React78 from "react";
 import { useRef as useRef12 } from "react";
-import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
@@ -4536,31 +4666,31 @@ var sizeControlOptions = [
   {
     value: "auto",
     label: __33("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
     label: __33("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
     label: __33("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(ArrowBarBothIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: __33("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil12);
+  const stringPropContext = useBoundProp(stringPropTypeUtil13);
   const isCustom = !!backgroundImageScaleContext.value;
   const rowRef = useRef12(null);
   const handleSizeChange = (size) => {
@@ -4570,7 +4700,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React77.createElement(Grid16, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, null, /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, __33("Size", "elementor"))), /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(Grid16, { container: true, spacing: 1.5 }, /* @__PURE__ */ React78.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(PopoverGridContainer, null, /* @__PURE__ */ React78.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(ControlFormLabel, null, __33("Size", "elementor"))), /* @__PURE__ */ React78.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React78.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -4579,17 +4709,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React77.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, null, /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React77.createElement(
+  )))), isCustom ? /* @__PURE__ */ React78.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React78.createElement(Grid16, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React78.createElement(PopoverGridContainer, null, /* @__PURE__ */ React78.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React78.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React77.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React78.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React77.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React77.createElement(
+  ))), /* @__PURE__ */ React78.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React78.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React77.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React78.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -4697,22 +4827,22 @@ var backgroundResolutionOptions = [
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React78.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React79.createElement(
     ControlRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: backgroundOverlayPropTypeUtil
     },
-    /* @__PURE__ */ React78.createElement(RepeaterHeader, { label: __34("Overlay", "elementor") }, /* @__PURE__ */ React78.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
-    /* @__PURE__ */ React78.createElement(ItemsContainer, null, /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React79.createElement(RepeaterHeader, { label: __34("Overlay", "elementor") }, /* @__PURE__ */ React79.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React79.createElement(ItemsContainer, null, /* @__PURE__ */ React79.createElement(
       Item,
       {
         Icon: ItemIcon2,
         Label: ItemLabel2,
-        actions: /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(DuplicateItemAction, null), /* @__PURE__ */ React78.createElement(DisableItemAction, null), /* @__PURE__ */ React78.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(DuplicateItemAction, null), /* @__PURE__ */ React79.createElement(DisableItemAction, null), /* @__PURE__ */ React79.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React78.createElement(EditItemPopover, null, /* @__PURE__ */ React78.createElement(ItemContent, null))
+    /* @__PURE__ */ React79.createElement(EditItemPopover, null, /* @__PURE__ */ React79.createElement(ItemContent, null))
   ));
 });
 var ItemContent = () => {
@@ -4722,7 +4852,7 @@ var ItemContent = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React78.createElement(Box13, { sx: { width: "100%" } }, /* @__PURE__ */ React78.createElement(Box13, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(Box13, { sx: { width: "100%" } }, /* @__PURE__ */ React79.createElement(Box13, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React79.createElement(
     Tabs,
     {
       size: "small",
@@ -4730,19 +4860,19 @@ var ItemContent = () => {
       ...getTabsProps(),
       "aria-label": __34("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React78.createElement(Tab, { label: __34("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React78.createElement(Tab, { label: __34("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React78.createElement(Tab, { label: __34("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React78.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React78.createElement(PopoverContent, null, /* @__PURE__ */ React78.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React78.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React78.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React78.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React78.createElement(PopoverContent, null, /* @__PURE__ */ React78.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React79.createElement(Tab, { label: __34("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React79.createElement(Tab, { label: __34("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React79.createElement(Tab, { label: __34("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React79.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React79.createElement(PopoverContent, null, /* @__PURE__ */ React79.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React79.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React79.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React79.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React79.createElement(PopoverContent, null, /* @__PURE__ */ React79.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React78.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React79.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React78.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React79.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React78.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React79.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -4755,11 +4885,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React78.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React79.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     CardMedia4,
     {
       image: imageUrl,
@@ -4774,43 +4904,43 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React78.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React79.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React78.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React79.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React78.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React79.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React78.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React79.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React78.createElement("span", null, color);
+  return /* @__PURE__ */ React79.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React78.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React79.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React78.createElement("span", null, __34("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React79.createElement("span", null, __34("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React78.createElement("span", null, __34("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React79.createElement("span", null, __34("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React78.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React78.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React79.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React79.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React78.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React78.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlayAttachment, null)));
+  return /* @__PURE__ */ React79.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React79.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React79.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React79.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React79.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React79.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator3 = styled8(UnstableColorIndicator3)(({ theme }) => ({
+var StyledUnstableColorIndicator3 = styled9(UnstableColorIndicator3)(({ theme }) => ({
   height: "1rem",
   width: "1rem",
   borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -4856,17 +4986,17 @@ var colorLabel = __35("Color", "elementor");
 var clipLabel = __35("Clipping", "elementor");
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  return /* @__PURE__ */ React79.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React79.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React79.createElement(BackgroundColorField, null), /* @__PURE__ */ React79.createElement(BackgroundClipField, null));
+  return /* @__PURE__ */ React80.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React80.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React80.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React80.createElement(BackgroundColorField, null), /* @__PURE__ */ React80.createElement(BackgroundClipField, null));
 });
 var BackgroundColorField = () => {
-  return /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React79.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React79.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ColorControl, null))));
+  return /* @__PURE__ */ React80.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React80.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React80.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React80.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React80.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React80.createElement(ColorControl, null))));
 };
 var BackgroundClipField = () => {
-  return /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React79.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React79.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(SelectControl, { options: clipOptions }))));
+  return /* @__PURE__ */ React80.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React80.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React80.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React80.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React80.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React80.createElement(SelectControl, { options: clipOptions }))));
 };
 
 // src/controls/repeatable-control.tsx
-import * as React80 from "react";
+import * as React81 from "react";
 import { useMemo as useMemo9 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
 import { Box as Box14 } from "@elementor/ui";
@@ -4900,14 +5030,14 @@ var RepeatableControl = createControl(
       [childControlConfig, placeholder, patternLabel]
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
-    return /* @__PURE__ */ React80.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React80.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React80.createElement(
+    return /* @__PURE__ */ React81.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React81.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React81.createElement(
       ControlRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil2,
         isItemDisabled: isItemDisabled2
       },
-      /* @__PURE__ */ React80.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React80.createElement(
+      /* @__PURE__ */ React81.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React81.createElement(
         TooltipAddItemAction,
         {
           ...addItemTooltipProps,
@@ -4915,22 +5045,22 @@ var RepeatableControl = createControl(
           ariaLabel: repeaterLabel
         }
       )),
-      /* @__PURE__ */ React80.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React80.createElement(
+      /* @__PURE__ */ React81.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React81.createElement(
         Item,
         {
           Icon: ItemIcon3,
           Label: ItemLabel3,
-          actions: /* @__PURE__ */ React80.createElement(React80.Fragment, null, showDuplicate && /* @__PURE__ */ React80.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React80.createElement(DisableItemAction, null), /* @__PURE__ */ React80.createElement(RemoveItemAction, null))
+          actions: /* @__PURE__ */ React81.createElement(React81.Fragment, null, showDuplicate && /* @__PURE__ */ React81.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React81.createElement(DisableItemAction, null), /* @__PURE__ */ React81.createElement(RemoveItemAction, null))
         }
       )),
-      /* @__PURE__ */ React80.createElement(EditItemPopover, null, /* @__PURE__ */ React80.createElement(Content2, null))
+      /* @__PURE__ */ React81.createElement(EditItemPopover, null, /* @__PURE__ */ React81.createElement(Content2, null))
     )));
   }
 );
-var ItemIcon3 = () => /* @__PURE__ */ React80.createElement(React80.Fragment, null);
+var ItemIcon3 = () => /* @__PURE__ */ React81.createElement(React81.Fragment, null);
 var Content2 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React80.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React80.createElement(PopoverGridContainer, null, /* @__PURE__ */ React80.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React81.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React81.createElement(PopoverGridContainer, null, /* @__PURE__ */ React81.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -5013,7 +5143,7 @@ var ItemLabel3 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React80.createElement(Box14, { component: "span", color }, label);
+  return /* @__PURE__ */ React81.createElement(Box14, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -5021,12 +5151,12 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-import * as React81 from "react";
-import { useMemo as useMemo10, useState as useState15 } from "react";
+import * as React82 from "react";
+import { useMemo as useMemo10, useState as useState16 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil13
+  stringPropTypeUtil as stringPropTypeUtil14
 } from "@elementor/editor-props";
 import { FormHelperText, FormLabel as FormLabel3, Grid as Grid18 } from "@elementor/ui";
 import { __ as __36 } from "@wordpress/i18n";
@@ -5053,9 +5183,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState15("");
-  const [valueError, setValueError] = useState15("");
-  const [sessionState, setSessionState] = useState15({
+  const [keyError, setKeyError] = useState16("");
+  const [valueError, setValueError] = useState16("");
+  const [sessionState, setSessionState] = useState16({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -5098,7 +5228,7 @@ var KeyValueControl = createControl((props = {}) => {
       });
       return;
     }
-    const extractedValue = stringPropTypeUtil13.extract(newChangedValue);
+    const extractedValue = stringPropTypeUtil14.extract(newChangedValue);
     setSessionState((prev) => ({
       ...prev,
       [fieldType]: extractedValue
@@ -5118,14 +5248,14 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React81.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React81.createElement(Grid18, { container: true, gap: 1.5 }, /* @__PURE__ */ React81.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React81.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React82.createElement(Grid18, { container: true, gap: 1.5 }, /* @__PURE__ */ React82.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React82.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React82.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
       error: !!keyError,
       helperText: keyHelper
     }
-  )), !!keyError && /* @__PURE__ */ React81.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React81.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React81.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React81.createElement(
+  )), !!keyError && /* @__PURE__ */ React82.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React82.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React82.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React82.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
@@ -5133,12 +5263,12 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React81.createElement(FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React82.createElement(FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-import * as React82 from "react";
-import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
+import * as React83 from "react";
+import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
 import { Grid as Grid19, Select as Select5 } from "@elementor/ui";
@@ -5157,7 +5287,7 @@ var positionOptions = [
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil14);
+  const stringPropContext = useBoundProp(stringPropTypeUtil15);
   const isCustom = !!positionContext.value;
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
@@ -5167,7 +5297,7 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React82.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, __37("Object position", "elementor"))), /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React83.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React83.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React83.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(ControlFormLabel, null, __37("Object position", "elementor"))), /* @__PURE__ */ React83.createElement(Grid19, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React83.createElement(
     Select5,
     {
       size: "tiny",
@@ -5176,24 +5306,24 @@ var PositionControl = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React82.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React82.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React82.createElement(
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React83.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React83.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React83.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React83.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React83.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React83.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React82.createElement(LetterXIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React83.createElement(LetterXIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React82.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React82.createElement(
+  ))), /* @__PURE__ */ React83.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React83.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React82.createElement(LetterYIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React83.createElement(LetterYIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
   )))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-import * as React95 from "react";
+import * as React96 from "react";
 import { useRef as useRef21 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
@@ -5252,12 +5382,12 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
 });
 
 // src/controls/transform-control/transform-content.tsx
-import * as React89 from "react";
+import * as React90 from "react";
 import { Box as Box15, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
 import { __ as __42 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
-import * as React84 from "react";
+import * as React85 from "react";
 import { useRef as useRef14 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
@@ -5265,11 +5395,11 @@ import { Grid as Grid21 } from "@elementor/ui";
 import { __ as __38 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/axis-row.tsx
-import * as React83 from "react";
+import * as React84 from "react";
 import { Grid as Grid20 } from "@elementor/ui";
 var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
   const safeId = label.replace(/\s+/g, "-").toLowerCase();
-  return /* @__PURE__ */ React83.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React83.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React83.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React83.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React84.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React84.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React84.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React84.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React84.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React84.createElement(
     SizeControl,
     {
       anchorRef,
@@ -5287,26 +5417,26 @@ var moveAxisControls = [
   {
     label: __38("Move X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React84.createElement(ArrowRightIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React85.createElement(ArrowRightIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw"]
   },
   {
     label: __38("Move Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React84.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React85.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vh"]
   },
   {
     label: __38("Move Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React84.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React85.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
   const rowRefs = [useRef14(null), useRef14(null), useRef14(null)];
-  return /* @__PURE__ */ React84.createElement(Grid21, { container: true, spacing: 1.5 }, /* @__PURE__ */ React84.createElement(PropProvider, { ...context }, /* @__PURE__ */ React84.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(Grid21, { container: true, spacing: 1.5 }, /* @__PURE__ */ React85.createElement(PropProvider, { ...context }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React85.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -5319,7 +5449,7 @@ var Move = () => {
 };
 
 // src/controls/transform-control/functions/rotate.tsx
-import * as React85 from "react";
+import * as React86 from "react";
 import { useRef as useRef15 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
@@ -5329,24 +5459,24 @@ var rotateAxisControls = [
   {
     label: __39("Rotate X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React85.createElement(Arrow360Icon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React86.createElement(Arrow360Icon, { fontSize: "tiny" })
   },
   {
     label: __39("Rotate Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React85.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React86.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
     label: __39("Rotate Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React85.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React86.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
   const rowRefs = [useRef15(null), useRef15(null), useRef15(null)];
-  return /* @__PURE__ */ React85.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React85.createElement(PropProvider, { ...context }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React86.createElement(PropProvider, { ...context }, /* @__PURE__ */ React86.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React86.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -5358,7 +5488,7 @@ var Rotate = () => {
 };
 
 // src/controls/transform-control/functions/scale.tsx
-import * as React87 from "react";
+import * as React88 from "react";
 import { useRef as useRef16 } from "react";
 import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
@@ -5366,10 +5496,10 @@ import { Grid as Grid24 } from "@elementor/ui";
 import { __ as __40 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/scale-axis-row.tsx
-import * as React86 from "react";
+import * as React87 from "react";
 import { Grid as Grid23 } from "@elementor/ui";
 var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React86.createElement(Grid23, { item: true, xs: 12 }, /* @__PURE__ */ React86.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React86.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React86.createElement(ControlLabel, null, label)), /* @__PURE__ */ React86.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React86.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React86.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+  return /* @__PURE__ */ React87.createElement(Grid23, { item: true, xs: 12 }, /* @__PURE__ */ React87.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React87.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(ControlLabel, null, label)), /* @__PURE__ */ React87.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React87.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
@@ -5377,27 +5507,27 @@ var scaleAxisControls = [
   {
     label: __40("Scale X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React87.createElement(ArrowRightIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React88.createElement(ArrowRightIcon2, { fontSize: "tiny" })
   },
   {
     label: __40("Scale Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React87.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React88.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
   },
   {
     label: __40("Scale Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React87.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React88.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
   const rowRefs = [useRef16(null), useRef16(null), useRef16(null)];
-  return /* @__PURE__ */ React87.createElement(Grid24, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(PropProvider, { ...context }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React87.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
+  return /* @__PURE__ */ React88.createElement(Grid24, { container: true, spacing: 1.5 }, /* @__PURE__ */ React88.createElement(PropProvider, { ...context }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React88.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
-import * as React88 from "react";
+import * as React89 from "react";
 import { useRef as useRef17 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
@@ -5407,19 +5537,19 @@ var skewAxisControls = [
   {
     label: __41("Skew X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React88.createElement(ArrowRightIcon3, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React89.createElement(ArrowRightIcon3, { fontSize: "tiny" })
   },
   {
     label: __41("Skew Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React88.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React89.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
   const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
-  return /* @__PURE__ */ React88.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React88.createElement(PropProvider, { ...context }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React89.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React89.createElement(PropProvider, { ...context }, /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React89.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -5524,7 +5654,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React89.createElement(PopoverContent, null, /* @__PURE__ */ React89.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React89.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React90.createElement(PopoverContent, null, /* @__PURE__ */ React90.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React90.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React90.createElement(
     Tabs2,
     {
       size: "small",
@@ -5537,33 +5667,33 @@ var TransformContent = () => {
       ...getTabsProps(),
       "aria-label": __42("Transform", "elementor")
     },
-    /* @__PURE__ */ React89.createElement(Tab2, { label: __42("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
-    /* @__PURE__ */ React89.createElement(Tab2, { label: __42("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
-    /* @__PURE__ */ React89.createElement(Tab2, { label: __42("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
-    /* @__PURE__ */ React89.createElement(Tab2, { label: __42("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
-  )), /* @__PURE__ */ React89.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React89.createElement(Move, null)), /* @__PURE__ */ React89.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React89.createElement(Scale, null)), /* @__PURE__ */ React89.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React89.createElement(Rotate, null)), /* @__PURE__ */ React89.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React89.createElement(Skew, null))));
+    /* @__PURE__ */ React90.createElement(Tab2, { label: __42("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React90.createElement(Tab2, { label: __42("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React90.createElement(Tab2, { label: __42("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React90.createElement(Tab2, { label: __42("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React90.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React90.createElement(Move, null)), /* @__PURE__ */ React90.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React90.createElement(Scale, null)), /* @__PURE__ */ React90.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React90.createElement(Rotate, null)), /* @__PURE__ */ React90.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React90.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-import * as React90 from "react";
+import * as React91 from "react";
 import { ArrowAutofitHeightIcon, ArrowsMaximizeIcon as ArrowsMaximizeIcon2, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React90.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
+      return /* @__PURE__ */ React91.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React90.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React91.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React90.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React91.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React90.createElement(SkewXIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React91.createElement(SkewXIcon, { fontSize: "tiny" });
     default:
       return null;
   }
 };
 
 // src/controls/transform-control/transform-label.tsx
-import * as React91 from "react";
+import * as React92 from "react";
 import { Box as Box16 } from "@elementor/ui";
 import { __ as __43 } from "@wordpress/i18n";
 var orderedAxis = ["x", "y", "z"];
@@ -5583,30 +5713,30 @@ var TransformLabel = (props) => {
   const { $$type, value } = props.value;
   switch ($$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React91.createElement(Label2, { label: __43("Move", "elementor"), value: formatLabel(value, "move") });
+      return /* @__PURE__ */ React92.createElement(Label2, { label: __43("Move", "elementor"), value: formatLabel(value, "move") });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React91.createElement(Label2, { label: __43("Scale", "elementor"), value: formatLabel(value, "scale") });
+      return /* @__PURE__ */ React92.createElement(Label2, { label: __43("Scale", "elementor"), value: formatLabel(value, "scale") });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React91.createElement(Label2, { label: __43("Rotate", "elementor"), value: formatLabel(value, "rotate") });
+      return /* @__PURE__ */ React92.createElement(Label2, { label: __43("Rotate", "elementor"), value: formatLabel(value, "rotate") });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React91.createElement(Label2, { label: __43("Skew", "elementor"), value: formatLabel(value, "skew") });
+      return /* @__PURE__ */ React92.createElement(Label2, { label: __43("Skew", "elementor"), value: formatLabel(value, "skew") });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React91.createElement(Box16, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React92.createElement(Box16, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
-import * as React94 from "react";
+import * as React95 from "react";
 import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
 import { AdjustmentsIcon } from "@elementor/icons";
 import { bindPopover as bindPopover5, Box as Box17, Divider as Divider4, Popover as Popover5 } from "@elementor/ui";
 import { __ as __46 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
-import * as React92 from "react";
+import * as React93 from "react";
 import { useRef as useRef19 } from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid26, Stack as Stack15 } from "@elementor/ui";
@@ -5630,21 +5760,21 @@ var CHILDREN_PERSPECTIVE_FIELDS = [
   }
 ];
 var ChildrenPerspectiveControl = () => {
-  return /* @__PURE__ */ React92.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, __44("Children perspective", "elementor")), /* @__PURE__ */ React92.createElement(PerspectiveControl, null), /* @__PURE__ */ React92.createElement(PerspectiveOriginControl, null));
+  return /* @__PURE__ */ React93.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, __44("Children perspective", "elementor")), /* @__PURE__ */ React93.createElement(PerspectiveControl, null), /* @__PURE__ */ React93.createElement(PerspectiveOriginControl, null));
 };
-var PerspectiveControl = () => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React92.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
-var PerspectiveOriginControl = () => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React92.createElement(PerspectiveOriginControlProvider, null));
+var PerspectiveControl = () => /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React93.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
+var PerspectiveOriginControl = () => /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React93.createElement(PerspectiveOriginControlProvider, null));
 var PerspectiveOriginControlProvider = () => {
   const context = useBoundProp(perspectiveOriginPropTypeUtil);
-  return /* @__PURE__ */ React92.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React92.createElement(ControlFields, { control }))));
+  return /* @__PURE__ */ React93.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React93.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
   const rowRef = useRef19(null);
-  return /* @__PURE__ */ React92.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React92.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React92.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
+  return /* @__PURE__ */ React93.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React93.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React93.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
-import * as React93 from "react";
+import * as React94 from "react";
 import { useRef as useRef20 } from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid27, Stack as Stack16 } from "@elementor/ui";
@@ -5669,12 +5799,12 @@ var TRANSFORM_ORIGIN_FIELDS = [
   }
 ];
 var TransformOriginControl = () => {
-  return /* @__PURE__ */ React93.createElement(Stack16, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, __45("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React93.createElement(ControlFields2, { control, key: control.bind })));
+  return /* @__PURE__ */ React94.createElement(Stack16, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, __45("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React94.createElement(ControlFields2, { control, key: control.bind })));
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
   const rowRef = useRef20(null);
-  return /* @__PURE__ */ React93.createElement(PropProvider, { ...context }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React93.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React93.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
+  return /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React94.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React94.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
@@ -5688,7 +5818,7 @@ var TransformSettingsControl = ({
     ...popupState,
     anchorEl: anchorRef.current ?? void 0
   });
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(
     Popover5,
     {
       disablePortal: true,
@@ -5703,16 +5833,16 @@ var TransformSettingsControl = ({
       },
       ...popupProps
     },
-    /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React95.createElement(
       PopoverHeader3,
       {
         title: __46("Transform settings", "elementor"),
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React94.createElement(AdjustmentsIcon, { fontSize: SIZE8 })
+        icon: /* @__PURE__ */ React95.createElement(AdjustmentsIcon, { fontSize: SIZE8 })
       }
     ),
-    /* @__PURE__ */ React94.createElement(Divider4, null),
-    /* @__PURE__ */ React94.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React94.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(Box17, { sx: { my: 0.5 } }, /* @__PURE__ */ React94.createElement(Divider4, null)), /* @__PURE__ */ React94.createElement(ChildrenPerspectiveControl, null)))
+    /* @__PURE__ */ React95.createElement(Divider4, null),
+    /* @__PURE__ */ React95.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React95.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(Box17, { sx: { my: 0.5 } }, /* @__PURE__ */ React95.createElement(Divider4, null)), /* @__PURE__ */ React95.createElement(ChildrenPerspectiveControl, null)))
   );
 };
 
@@ -5723,25 +5853,25 @@ var TransformRepeaterControl = createControl(
     const context = useBoundProp(transformPropTypeUtil);
     const headerRef = useRef21(null);
     const popupState = usePopupState6({ variant: "popover" });
-    return /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(
+    return /* @__PURE__ */ React96.createElement(PropProvider, { ...context }, /* @__PURE__ */ React96.createElement(
       TransformSettingsControl,
       {
         popupState,
         anchorRef: headerRef,
         showChildrenPerspective
       }
-    ), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React95.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
+    ), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React96.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
   }
 );
-var ToolTip = /* @__PURE__ */ React95.createElement(
+var ToolTip = /* @__PURE__ */ React96.createElement(
   Box18,
   {
     component: "span",
     "aria-label": void 0,
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
-  /* @__PURE__ */ React95.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React95.createElement(Typography7, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __47("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React96.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
+  /* @__PURE__ */ React96.createElement(Typography7, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __47("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = ({
   headerRef,
@@ -5755,21 +5885,21 @@ var Repeater2 = ({
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
   const shouldDisableAddItem = !getInitialValue2();
-  return /* @__PURE__ */ React95.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React96.createElement(
     ControlRepeater,
     {
       initial: getInitialValue2() ?? initialTransformValue,
       propTypeUtil: transformFunctionsPropTypeUtil
     },
-    /* @__PURE__ */ React95.createElement(
+    /* @__PURE__ */ React96.createElement(
       RepeaterHeader,
       {
         label: __47("Transform", "elementor"),
-        adornment: () => /* @__PURE__ */ React95.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
+        adornment: () => /* @__PURE__ */ React96.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
         ref: headerRef
       },
-      /* @__PURE__ */ React95.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
-      /* @__PURE__ */ React95.createElement(
+      /* @__PURE__ */ React96.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
+      /* @__PURE__ */ React96.createElement(
         TooltipAddItemAction,
         {
           disabled: shouldDisableAddItem,
@@ -5779,15 +5909,15 @@ var Repeater2 = ({
         }
       )
     ),
-    /* @__PURE__ */ React95.createElement(ItemsContainer, null, /* @__PURE__ */ React95.createElement(
+    /* @__PURE__ */ React96.createElement(ItemsContainer, null, /* @__PURE__ */ React96.createElement(
       Item,
       {
         Icon: TransformIcon,
         Label: TransformLabel,
-        actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(DisableItemAction, null), /* @__PURE__ */ React95.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(DisableItemAction, null), /* @__PURE__ */ React96.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React95.createElement(EditItemPopover, null, /* @__PURE__ */ React95.createElement(TransformContent, null))
+    /* @__PURE__ */ React96.createElement(EditItemPopover, null, /* @__PURE__ */ React96.createElement(TransformContent, null))
   ));
 };
 var TransformBasePopoverTrigger = ({
@@ -5796,12 +5926,12 @@ var TransformBasePopoverTrigger = ({
 }) => {
   const { bind } = useBoundProp();
   const titleLabel = __47("Transform settings", "elementor");
-  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React95.createElement(Tooltip8, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React95.createElement(IconButton7, { size: SIZE9, "aria-label": titleLabel, ...bindTrigger4(popupState) }, /* @__PURE__ */ React95.createElement(AdjustmentsIcon2, { fontSize: SIZE9 })));
+  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React96.createElement(Tooltip8, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(IconButton7, { size: SIZE9, "aria-label": titleLabel, ...bindTrigger4(popupState) }, /* @__PURE__ */ React96.createElement(AdjustmentsIcon2, { fontSize: SIZE9 })));
 };
 
 // src/controls/transition-control/transition-repeater-control.tsx
-import * as React98 from "react";
-import { useEffect as useEffect11, useMemo as useMemo13, useState as useState16 } from "react";
+import * as React99 from "react";
+import { useEffect as useEffect11, useMemo as useMemo13, useState as useState17 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -5812,7 +5942,7 @@ import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
 import { __ as __50 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
-import * as React96 from "react";
+import * as React97 from "react";
 import { useMemo as useMemo11, useRef as useRef22 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid28 } from "@elementor/ui";
@@ -5832,7 +5962,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React96.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React96.createElement(Grid28, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React96.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React96.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React96.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React96.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React96.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React96.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React96.createElement(
+    return /* @__PURE__ */ React97.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React97.createElement(Grid28, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React97.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React97.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React97.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React97.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React97.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React97.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React97.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -6033,7 +6163,7 @@ function subscribeToTransitionEvent() {
 }
 
 // src/controls/transition-control/transition-selector.tsx
-import * as React97 from "react";
+import * as React98 from "react";
 import { useMemo as useMemo12, useRef as useRef23 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
@@ -6167,16 +6297,16 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React97.createElement(Box19, { ref: defaultRef }, /* @__PURE__ */ React97.createElement(ControlActions, null, /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React98.createElement(Box19, { ref: defaultRef }, /* @__PURE__ */ React98.createElement(ControlActions, null, /* @__PURE__ */ React98.createElement(
     UnstableTag3,
     {
       variant: "outlined",
       label: transitionLabel,
-      endIcon: /* @__PURE__ */ React97.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React98.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
       ...bindTrigger5(popoverState),
       fullWidth: true
     }
-  )), /* @__PURE__ */ React97.createElement(
+  )), /* @__PURE__ */ React98.createElement(
     Popover6,
     {
       disablePortal: true,
@@ -6187,7 +6317,7 @@ var TransitionSelector = ({
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "left" }
     },
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React98.createElement(
       ItemSelector,
       {
         itemsList: getItemList(),
@@ -6198,7 +6328,7 @@ var TransitionSelector = ({
         title: __49("Transition Property", "elementor"),
         icon: VariationsIcon,
         disabledItems: includeCurrentValueInOptions(value, disabledItems),
-        categoryItemContentTemplate: (item) => /* @__PURE__ */ React97.createElement(
+        categoryItemContentTemplate: (item) => /* @__PURE__ */ React98.createElement(
           Box19,
           {
             sx: {
@@ -6208,10 +6338,10 @@ var TransitionSelector = ({
               width: "100%"
             }
           },
-          /* @__PURE__ */ React97.createElement("span", null, item.value),
-          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React97.createElement(PromotionChip, null)
+          /* @__PURE__ */ React98.createElement("span", null, item.value),
+          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React98.createElement(PromotionChip, null)
         ),
-        footer: showPromotion ? /* @__PURE__ */ React97.createElement(
+        footer: showPromotion ? /* @__PURE__ */ React98.createElement(
           PromotionAlert,
           {
             message: __49(
@@ -6330,7 +6460,7 @@ var getInitialValue = (values = []) => {
   }
   return initialTransitionValue;
 };
-var disableAddItemTooltipContent = /* @__PURE__ */ React98.createElement(
+var disableAddItemTooltipContent = /* @__PURE__ */ React99.createElement(
   Alert2,
   {
     sx: {
@@ -6338,10 +6468,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React98.createElement(
       gap: 0.5
     },
     color: "secondary",
-    icon: /* @__PURE__ */ React98.createElement(InfoCircleFilledIcon3, null)
+    icon: /* @__PURE__ */ React99.createElement(InfoCircleFilledIcon3, null)
   },
-  /* @__PURE__ */ React98.createElement(AlertTitle3, null, __50("Transitions", "elementor")),
-  /* @__PURE__ */ React98.createElement(Box20, { component: "span" }, /* @__PURE__ */ React98.createElement(Typography8, { variant: "body2" }, __50("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React99.createElement(AlertTitle3, null, __50("Transitions", "elementor")),
+  /* @__PURE__ */ React99.createElement(Box20, { component: "span" }, /* @__PURE__ */ React99.createElement(Typography8, { variant: "body2" }, __50("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -6349,7 +6479,7 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState16([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState17([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo13(
@@ -6384,7 +6514,7 @@ var TransitionRepeaterControl = createControl(
     }, [recentlyUsedListGetter]);
     const allPropertiesUsed = useMemo13(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
-    return /* @__PURE__ */ React98.createElement(
+    return /* @__PURE__ */ React99.createElement(
       RepeatableControl,
       {
         label: __50("Transitions", "elementor"),
@@ -6411,9 +6541,9 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/controls/date-time-control.tsx
-import * as React99 from "react";
+import * as React100 from "react";
 import * as dayjs from "dayjs";
-import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
+import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
 import { Box as Box21, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
 var DATE_FORMAT = "YYYY-MM-DD";
@@ -6459,10 +6589,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
     const base = dayjs.default();
     return base.hour(h).minute(m).second(0).millisecond(0);
   };
-  return /* @__PURE__ */ React99.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React99.createElement(ControlActions, null, /* @__PURE__ */ React99.createElement(LocalizationProvider, null, /* @__PURE__ */ React99.createElement(Box21, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React100.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React100.createElement(ControlActions, null, /* @__PURE__ */ React100.createElement(LocalizationProvider, null, /* @__PURE__ */ React100.createElement(Box21, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React100.createElement(
     DatePicker,
     {
-      value: parseDateValue(stringPropTypeUtil15.extract(value?.date)),
+      value: parseDateValue(stringPropTypeUtil16.extract(value?.date)),
       onChange: (v) => handleChange({ date: v }, { bind: "date" }),
       disabled: inputDisabled,
       slotProps: {
@@ -6471,10 +6601,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
         openPickerIcon: { fontSize: "tiny" }
       }
     }
-  )), /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React99.createElement(
+  )), /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React100.createElement(
     TimePicker,
     {
-      value: parseTimeValue(stringPropTypeUtil15.extract(value?.time)),
+      value: parseTimeValue(stringPropTypeUtil16.extract(value?.time)),
       onChange: (v) => handleChange({ time: v }, { bind: "time" }),
       disabled: inputDisabled,
       slotProps: {
@@ -6487,14 +6617,14 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 });
 
 // src/controls/inline-editing-control.tsx
-import * as React101 from "react";
-import { useCallback as useCallback3, useEffect as useEffect13, useMemo as useMemo14 } from "react";
-import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
+import * as React102 from "react";
+import { useCallback as useCallback4, useEffect as useEffect13, useMemo as useMemo14 } from "react";
+import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import { Box as Box23 } from "@elementor/ui";
 import { debounce as debounce4 } from "@elementor/utils";
 
 // src/components/inline-editor.tsx
-import * as React100 from "react";
+import * as React101 from "react";
 import { useEffect as useEffect12, useRef as useRef24 } from "react";
 import { Box as Box22 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
@@ -6533,7 +6663,7 @@ function htmlToPlainText(html) {
 var ITALIC_KEYBOARD_SHORTCUT = "i";
 var BOLD_KEYBOARD_SHORTCUT = "b";
 var UNDERLINE_KEYBOARD_SHORTCUT = "u";
-var InlineEditor = React100.forwardRef((props, ref) => {
+var InlineEditor = React101.forwardRef((props, ref) => {
   const {
     value,
     setValue,
@@ -6644,7 +6774,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React100.createElement(Box22, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React100.createElement(EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React101.createElement(Box22, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React101.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = useRef24(false);
@@ -6666,22 +6796,22 @@ var InlineEditingControl = createControl(
     props
   }) => {
     const { value, setValue, placeholder } = useBoundProp(htmlV3PropTypeUtil);
-    const content = stringPropTypeUtil16.extract(value?.content ?? null) ?? "";
+    const content = stringPropTypeUtil17.extract(value?.content ?? null) ?? "";
     const debouncedParse = useMemo14(
       () => debounce4((html) => {
         const parsed = parseHtmlChildren(html);
         setValue({
-          content: parsed.content ? stringPropTypeUtil16.create(parsed.content) : null,
+          content: parsed.content ? stringPropTypeUtil17.create(parsed.content) : null,
           children: parsed.children
         });
       }, CHILDREN_PARSE_DEBOUNCE_MS),
       [setValue]
     );
-    const handleChange = useCallback3(
+    const handleChange = useCallback4(
       (newValue) => {
         const html = newValue ?? "";
         setValue({
-          content: html ? stringPropTypeUtil16.create(html) : null,
+          content: html ? stringPropTypeUtil17.create(html) : null,
           children: value?.children ?? []
         });
         debouncedParse(html);
@@ -6689,7 +6819,7 @@ var InlineEditingControl = createControl(
       [setValue, value?.children, debouncedParse]
     );
     useEffect13(() => () => debouncedParse.cancel(), [debouncedParse]);
-    return /* @__PURE__ */ React101.createElement(ControlActions, null, /* @__PURE__ */ React101.createElement(
+    return /* @__PURE__ */ React102.createElement(ControlActions, null, /* @__PURE__ */ React102.createElement(
       Box23,
       {
         sx: {
@@ -6734,7 +6864,7 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React101.createElement(
+      /* @__PURE__ */ React102.createElement(
         InlineEditor,
         {
           value: content,
@@ -6747,14 +6877,58 @@ var InlineEditingControl = createControl(
 );
 
 // src/controls/email-form-action-control.tsx
-import * as React102 from "react";
+import * as React103 from "react";
 import { emailPropTypeUtil } from "@elementor/editor-props";
-import { CollapsibleContent } from "@elementor/editor-ui";
+import { CollapsibleContent, InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
 import { Box as Box24, Divider as Divider5, Grid as Grid29, Stack as Stack17 } from "@elementor/ui";
+import { hasProInstalled as hasProInstalled3, isVersionGreaterOrEqual as isVersionGreaterOrEqual2 } from "@elementor/utils";
 import { __ as __51 } from "@wordpress/i18n";
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React102.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(TextControl, { placeholder }))));
-var SendToField = ({ placeholder }) => /* @__PURE__ */ React102.createElement(EmailField, { bind: "to", label: __51("Send to", "elementor"), placeholder });
-var SubjectField = () => /* @__PURE__ */ React102.createElement(
+
+// src/hooks/use-form-field-suggestions.ts
+import { getContainer, getSelectedElements as getSelectedElements3 } from "@elementor/editor-elements";
+import { isTransformable as isTransformable3 } from "@elementor/editor-props";
+import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+var FORM_FIELD_WIDGET_TYPES = ["e-form-input", "e-form-textarea", "e-form-checkbox"];
+function useFormFieldSuggestions() {
+  return useListenTo(
+    [
+      v1ReadyEvent(),
+      commandEndEvent("document/elements/create"),
+      commandEndEvent("document/elements/delete"),
+      commandEndEvent("document/elements/set-settings")
+    ],
+    () => {
+      const selectedElements = getSelectedElements3();
+      const formElement = selectedElements[0];
+      if (!formElement) {
+        return [];
+      }
+      const container = getContainer(formElement.id);
+      if (!container?.children) {
+        return [];
+      }
+      const suggestions = [];
+      container.children.forEachRecursive?.((child) => {
+        const widgetType = child.model.get("widgetType");
+        if (!widgetType || !FORM_FIELD_WIDGET_TYPES.includes(widgetType)) {
+          return;
+        }
+        const cssIdProp = child.settings.get("_cssid");
+        const fieldId = isTransformable3(cssIdProp) ? cssIdProp.value : cssIdProp;
+        if (fieldId && typeof fieldId === "string") {
+          suggestions.push({ label: fieldId, value: fieldId });
+        }
+      });
+      return suggestions;
+    },
+    []
+  );
+}
+
+// src/controls/email-form-action-control.tsx
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React103.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React103.createElement(Grid29, { item: true }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React103.createElement(Grid29, { item: true }, /* @__PURE__ */ React103.createElement(TextControl, { placeholder }))));
+var SendToField = ({ placeholder }) => /* @__PURE__ */ React103.createElement(EmailField, { bind: "to", label: __51("Send to", "elementor"), placeholder });
+var SubjectField = () => /* @__PURE__ */ React103.createElement(
   EmailField,
   {
     bind: "subject",
@@ -6762,16 +6936,25 @@ var SubjectField = () => /* @__PURE__ */ React102.createElement(
     placeholder: __51("New form submission", "elementor")
   }
 );
-var MessageField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React102.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, __51("Message", "elementor"))), /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(
-  TextAreaControl,
-  {
-    placeholder: __51(
-      "By default, all form fields are sent via [all-fields] shortcode.",
-      "elementor"
-    )
+var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
+var shouldShowMentionsInfo = () => {
+  if (!hasProInstalled3()) {
+    return true;
   }
-))));
-var FromEmailField = () => /* @__PURE__ */ React102.createElement(
+  const proVersion = window.elementorPro?.config?.version;
+  if (!proVersion) {
+    return false;
+  }
+  return isVersionGreaterOrEqual2(proVersion, MIN_PRO_VERSION_FOR_MENTIONS);
+};
+var MessageField = () => {
+  const suggestions = useFormFieldSuggestions();
+  return /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React103.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React103.createElement(Grid29, { item: true }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, __51("Message", "elementor"))), /* @__PURE__ */ React103.createElement(Grid29, { item: true }, /* @__PURE__ */ React103.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React103.createElement(Grid29, { item: true }, /* @__PURE__ */ React103.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __51(
+    "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
+    "elementor"
+  ) : __51("[all-fields] shortcode sends all fields.", "elementor")))));
+};
+var FromEmailField = () => /* @__PURE__ */ React103.createElement(
   EmailField,
   {
     bind: "from",
@@ -6779,7 +6962,7 @@ var FromEmailField = () => /* @__PURE__ */ React102.createElement(
     placeholder: __51("What email should appear as the sender?", "elementor")
   }
 );
-var FromNameField = () => /* @__PURE__ */ React102.createElement(
+var FromNameField = () => /* @__PURE__ */ React103.createElement(
   EmailField,
   {
     bind: "from-name",
@@ -6787,10 +6970,10 @@ var FromNameField = () => /* @__PURE__ */ React102.createElement(
     placeholder: __51("What name should appear as the sender?", "elementor")
   }
 );
-var ReplyToField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "reply-to", label: __51("Reply-to", "elementor") });
-var CcField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "cc", label: __51("Cc", "elementor") });
-var BccField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "bcc", label: __51("Bcc", "elementor") });
-var MetaDataField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 0.5 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, __51("Metadata", "elementor")), /* @__PURE__ */ React102.createElement(
+var ReplyToField = () => /* @__PURE__ */ React103.createElement(EmailField, { bind: "reply-to", label: __51("Reply-to", "elementor") });
+var CcField = () => /* @__PURE__ */ React103.createElement(EmailField, { bind: "cc", label: __51("Cc", "elementor") });
+var BccField = () => /* @__PURE__ */ React103.createElement(EmailField, { bind: "bcc", label: __51("Bcc", "elementor") });
+var MetaDataField = () => /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React103.createElement(Stack17, { gap: 0.5 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, __51("Metadata", "elementor")), /* @__PURE__ */ React103.createElement(
   ChipsControl,
   {
     options: [
@@ -6802,7 +6985,7 @@ var MetaDataField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React102.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, __51("Send as", "elementor"))), /* @__PURE__ */ React102.createElement(Grid29, { item: true }, /* @__PURE__ */ React102.createElement(
+var SendAsField = () => /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React103.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React103.createElement(Grid29, { item: true }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, __51("Send as", "elementor"))), /* @__PURE__ */ React103.createElement(Grid29, { item: true }, /* @__PURE__ */ React103.createElement(
   SelectControl,
   {
     options: [
@@ -6811,24 +6994,24 @@ var SendAsField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider,
     ]
   }
 ))));
-var AdvancedSettings = () => /* @__PURE__ */ React102.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React102.createElement(Box24, { sx: { pt: 2 } }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React102.createElement(FromNameField, null), /* @__PURE__ */ React102.createElement(ReplyToField, null), /* @__PURE__ */ React102.createElement(CcField, null), /* @__PURE__ */ React102.createElement(BccField, null), /* @__PURE__ */ React102.createElement(Divider5, null), /* @__PURE__ */ React102.createElement(MetaDataField, null), /* @__PURE__ */ React102.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React103.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React103.createElement(Box24, { sx: { pt: 2 } }, /* @__PURE__ */ React103.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React103.createElement(FromNameField, null), /* @__PURE__ */ React103.createElement(ReplyToField, null), /* @__PURE__ */ React103.createElement(CcField, null), /* @__PURE__ */ React103.createElement(BccField, null), /* @__PURE__ */ React103.createElement(Divider5, null), /* @__PURE__ */ React103.createElement(MetaDataField, null), /* @__PURE__ */ React103.createElement(SendAsField, null))));
 var EmailFormActionControl = createControl(({ toPlaceholder }) => {
   const { value, setValue, ...propContext } = useBoundProp(emailPropTypeUtil);
-  return /* @__PURE__ */ React102.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React102.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, __51("Email settings", "elementor")), /* @__PURE__ */ React102.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React102.createElement(SubjectField, null), /* @__PURE__ */ React102.createElement(MessageField, null), /* @__PURE__ */ React102.createElement(FromEmailField, null), /* @__PURE__ */ React102.createElement(AdvancedSettings, null)));
+  return /* @__PURE__ */ React103.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React103.createElement(Stack17, { gap: 2 }, /* @__PURE__ */ React103.createElement(ControlLabel, null, __51("Email settings", "elementor")), /* @__PURE__ */ React103.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React103.createElement(SubjectField, null), /* @__PURE__ */ React103.createElement(MessageField, null), /* @__PURE__ */ React103.createElement(FromEmailField, null), /* @__PURE__ */ React103.createElement(AdvancedSettings, null)));
 });
 
 // src/controls/size-control/unstable-size-control.tsx
-import * as React108 from "react";
+import * as React109 from "react";
 import { sizePropTypeUtil as sizePropTypeUtil6 } from "@elementor/editor-props";
 
 // src/controls/size-control/size-component.tsx
-import * as React107 from "react";
+import * as React108 from "react";
 import { useEffect as useEffect16 } from "react";
 import { useActiveBreakpoint as useActiveBreakpoint4 } from "@elementor/editor-responsive";
 import { Box as Box25, usePopupState as usePopupState9 } from "@elementor/ui";
 
 // src/controls/size-control/size-field.tsx
-import * as React105 from "react";
+import * as React106 from "react";
 import { MathFunctionIcon as MathFunctionIcon3 } from "@elementor/icons";
 import { InputAdornment as InputAdornment5 } from "@elementor/ui";
 
@@ -6946,9 +7129,9 @@ var sanitizeSize = (size) => {
 };
 
 // src/controls/size-control/hooks/use-unit-sync.ts
-import { useEffect as useEffect14, useState as useState17 } from "react";
+import { useEffect as useEffect14, useState as useState18 } from "react";
 var useUnitSync = ({ unit, setUnit, persistWhen }) => {
-  const [state, setState] = useState17(unit);
+  const [state, setState] = useState18(unit);
   useEffect14(() => {
     if (unit !== state) {
       setState(unit);
@@ -7024,7 +7207,7 @@ var hasChanged = (next, current) => {
 };
 
 // src/controls/size-control/ui/size-input.tsx
-import * as React103 from "react";
+import * as React104 from "react";
 import { forwardRef as forwardRef11 } from "react";
 var SizeInput2 = forwardRef11(
   ({
@@ -7041,7 +7224,7 @@ var SizeInput2 = forwardRef11(
     inputProps,
     placeholder
   }, ref) => {
-    return /* @__PURE__ */ React103.createElement(
+    return /* @__PURE__ */ React104.createElement(
       NumberInput,
       {
         id,
@@ -7069,10 +7252,10 @@ var getCursorStyle = (readOnly) => ({
 });
 
 // src/controls/size-control/ui/unit-selector.tsx
-import * as React104 from "react";
+import * as React105 from "react";
 import { useId as useId3 } from "react";
 import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
-import { bindMenu as bindMenu2, bindTrigger as bindTrigger6, Button as Button6, Menu as Menu3, styled as styled9, usePopupState as usePopupState8 } from "@elementor/ui";
+import { bindMenu as bindMenu2, bindTrigger as bindTrigger6, Button as Button6, Menu as Menu3, styled as styled10, usePopupState as usePopupState8 } from "@elementor/ui";
 var menuItemContentStyles = {
   display: "flex",
   flexDirection: "column",
@@ -7095,7 +7278,7 @@ var UnitSelector = ({
     onSelect(option);
     popupState.close();
   };
-  return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React105.createElement(React105.Fragment, null, /* @__PURE__ */ React105.createElement(
     StyledButton2,
     {
       isHighlighted: isUnitHighlighted,
@@ -7104,7 +7287,7 @@ var UnitSelector = ({
       ...bindTrigger6(popupState)
     },
     optionLabelOverrides[value] ?? value
-  ), /* @__PURE__ */ React104.createElement(Menu3, { MenuListProps: { dense: true }, ...bindMenu2(popupState) }, options.map((option) => /* @__PURE__ */ React104.createElement(
+  ), /* @__PURE__ */ React105.createElement(Menu3, { MenuListProps: { dense: true }, ...bindMenu2(popupState) }, options.map((option) => /* @__PURE__ */ React105.createElement(
     MenuListItem7,
     {
       key: option,
@@ -7124,7 +7307,7 @@ var UnitSelector = ({
     optionLabelOverrides[option] ?? option.toUpperCase()
   ))));
 };
-var StyledButton2 = styled9(Button6, {
+var StyledButton2 = styled10(Button6, {
   shouldForwardProp: (prop) => prop !== "isHighlighted"
 })(({ isHighlighted, theme }) => ({
   color: isHighlighted ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -7135,7 +7318,7 @@ var StyledButton2 = styled9(Button6, {
 
 // src/controls/size-control/size-field.tsx
 var UNIT_DISPLAY_LABELS_OVERRIDES = {
-  custom: /* @__PURE__ */ React105.createElement(MathFunctionIcon3, { fontSize: "tiny" })
+  custom: /* @__PURE__ */ React106.createElement(MathFunctionIcon3, { fontSize: "tiny" })
 };
 var SizeField = ({
   value,
@@ -7170,7 +7353,7 @@ var SizeField = ({
     setSize(newSize, isInputValid);
   };
   const inputType = isExtendedUnit(unit) ? "text" : "number";
-  return /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React106.createElement(
     SizeInput2,
     {
       disabled,
@@ -7185,8 +7368,8 @@ var SizeField = ({
         ...InputProps,
         autoComplete: "off",
         readOnly: isExtendedUnit(unit),
-        startAdornment: startIcon && /* @__PURE__ */ React105.createElement(InputAdornment5, { position: "start", disabled }, startIcon),
-        endAdornment: /* @__PURE__ */ React105.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React105.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React106.createElement(InputAdornment5, { position: "start", disabled }, startIcon),
+        endAdornment: /* @__PURE__ */ React106.createElement(InputAdornment5, { position: "end" }, /* @__PURE__ */ React106.createElement(
           UnitSelector,
           {
             options: units2,
@@ -7213,7 +7396,7 @@ var shouldHighlightUnit = (value) => {
 };
 
 // src/controls/size-control/ui/text-field-popover.tsx
-import * as React106 from "react";
+import * as React107 from "react";
 import { useEffect as useEffect15, useRef as useRef25 } from "react";
 import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
 import { MathFunctionIcon as MathFunctionIcon4 } from "@elementor/icons";
@@ -7240,7 +7423,7 @@ var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) =>
     onClose?.();
     popupState.close();
   };
-  return /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React107.createElement(
     Popover7,
     {
       disablePortal: true,
@@ -7257,15 +7440,15 @@ var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) =>
       transformOrigin: { vertical: "top", horizontal: "center" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React106.createElement(
+    /* @__PURE__ */ React107.createElement(
       PopoverHeader4,
       {
         title: __52("CSS function", "elementor"),
         onClose: handleClose,
-        icon: /* @__PURE__ */ React106.createElement(MathFunctionIcon4, { fontSize: SIZE10 })
+        icon: /* @__PURE__ */ React107.createElement(MathFunctionIcon4, { fontSize: SIZE10 })
       }
     ),
-    /* @__PURE__ */ React106.createElement(
+    /* @__PURE__ */ React107.createElement(
       TextField9,
       {
         value,
@@ -7284,7 +7467,7 @@ var TextFieldPopover2 = ({ popupState, anchorRef, value, onChange, onClose }) =>
 };
 
 // src/controls/size-control/size-component.tsx
-var SizeComponent = ({ anchorRef, SizeFieldWrapper = React107.Fragment, ...sizeFieldProps }) => {
+var SizeComponent = ({ anchorRef, SizeFieldWrapper = React108.Fragment, ...sizeFieldProps }) => {
   const popupState = usePopupState9({ variant: "popover" });
   const activeBreakpoint = useActiveBreakpoint4();
   const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
@@ -7314,7 +7497,7 @@ var SizeComponent = ({ anchorRef, SizeFieldWrapper = React107.Fragment, ...sizeF
     "aria-controls": popupState.isOpen ? popupState.popupId : void 0,
     "aria-haspopup": true
   };
-  return /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(SizeFieldWrapper, null, /* @__PURE__ */ React107.createElement(Box25, null, /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(SizeFieldWrapper, null, /* @__PURE__ */ React108.createElement(Box25, null, /* @__PURE__ */ React108.createElement(
     SizeField,
     {
       focused: popupState.isOpen ? true : void 0,
@@ -7328,7 +7511,7 @@ var SizeComponent = ({ anchorRef, SizeFieldWrapper = React107.Fragment, ...sizeF
       },
       ...sizeFieldProps
     }
-  ))), popupState.isOpen && anchorRef?.current && /* @__PURE__ */ React107.createElement(
+  ))), popupState.isOpen && anchorRef?.current && /* @__PURE__ */ React108.createElement(
     TextFieldPopover2,
     {
       popupState,
@@ -7448,7 +7631,7 @@ var UnstableSizeControl = createControl(
         }
       });
     };
-    return /* @__PURE__ */ React108.createElement(
+    return /* @__PURE__ */ React109.createElement(
       SizeComponent,
       {
         units: units2,
@@ -7468,15 +7651,15 @@ var UnstableSizeControl = createControl(
 );
 
 // src/components/promotions/display-conditions-control.tsx
-import * as React110 from "react";
+import * as React111 from "react";
 import { useRef as useRef26 } from "react";
 import { SitemapIcon } from "@elementor/icons";
 import { IconButton as IconButton8, Stack as Stack18, Tooltip as Tooltip9 } from "@elementor/ui";
 import { __ as __53 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
-import * as React109 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback4, useImperativeHandle, useState as useState18 } from "react";
+import * as React110 from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState19 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box26 } from "@elementor/ui";
 function getV4Promotion(key) {
@@ -7484,9 +7667,9 @@ function getV4Promotion(key) {
 }
 var PromotionTrigger = forwardRef12(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = useState18(false);
+    const [isOpen, setIsOpen] = useState19(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = useCallback4(() => {
+    const toggle = useCallback5(() => {
       setIsOpen((prev) => {
         if (!prev) {
           trackViewPromotion(trackingData);
@@ -7495,7 +7678,7 @@ var PromotionTrigger = forwardRef12(
       });
     }, [trackingData]);
     useImperativeHandle(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React109.createElement(React109.Fragment, null, promotion && /* @__PURE__ */ React109.createElement(
+    return /* @__PURE__ */ React110.createElement(React110.Fragment, null, promotion && /* @__PURE__ */ React110.createElement(
       PromotionInfotip,
       {
         title: promotion.title,
@@ -7509,7 +7692,7 @@ var PromotionTrigger = forwardRef12(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React109.createElement(
+      /* @__PURE__ */ React110.createElement(
         Box26,
         {
           onClick: (e) => {
@@ -7518,7 +7701,7 @@ var PromotionTrigger = forwardRef12(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React109.createElement(PromotionChip2, null)
+        children ?? /* @__PURE__ */ React110.createElement(PromotionChip2, null)
       )
     ));
   }
@@ -7529,7 +7712,7 @@ var ARIA_LABEL = __53("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
   const triggerRef = useRef26(null);
-  return /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React111.createElement(
     Stack18,
     {
       direction: "row",
@@ -7539,8 +7722,8 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React110.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React110.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React110.createElement(
+    /* @__PURE__ */ React111.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React111.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React111.createElement(
       IconButton8,
       {
         size: "tiny",
@@ -7553,13 +7736,13 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React110.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React111.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-import * as React111 from "react";
+import * as React112 from "react";
 import { useRef as useRef27 } from "react";
 import { PlusIcon as PlusIcon3 } from "@elementor/icons";
 import { Stack as Stack19, Tooltip as Tooltip10 } from "@elementor/ui";
@@ -7568,7 +7751,7 @@ var ARIA_LABEL2 = __54("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
   const triggerRef = useRef27(null);
-  return /* @__PURE__ */ React111.createElement(
+  return /* @__PURE__ */ React112.createElement(
     Stack19,
     {
       direction: "row",
@@ -7578,8 +7761,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React111.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React111.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React111.createElement(
+    /* @__PURE__ */ React112.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React112.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React112.createElement(
       PlusIcon3,
       {
         "aria-label": ARIA_LABEL2,
@@ -7593,18 +7776,18 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React112 from "react";
+import * as React113 from "react";
 import { BrushBigIcon } from "@elementor/icons";
-import { IconButton as IconButton9, styled as styled10, Tooltip as Tooltip11 } from "@elementor/ui";
-var CustomIconButton = styled10(IconButton9)(({ theme }) => ({
+import { IconButton as IconButton9, styled as styled11, Tooltip as Tooltip11 } from "@elementor/ui";
+var CustomIconButton = styled11(IconButton9)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React112.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React112.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React112.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React113.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React113.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React113.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React113 from "react";
-import { useEffect as useEffect17, useState as useState19 } from "react";
+import * as React114 from "react";
+import { useEffect as useEffect17, useState as useState20 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon4, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover8,
@@ -7634,7 +7817,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = useState19(initialOpenItem);
+  const [openItem, setOpenItem] = useState20(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -7697,7 +7880,7 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React113.createElement(
+  const addButton = /* @__PURE__ */ React114.createElement(
     IconButton10,
     {
       size: SIZE11,
@@ -7708,9 +7891,9 @@ var Repeater3 = ({
       onClick: addRepeaterItem,
       "aria-label": __55("Add item", "elementor")
     },
-    /* @__PURE__ */ React113.createElement(PlusIcon4, { fontSize: SIZE11 })
+    /* @__PURE__ */ React114.createElement(PlusIcon4, { fontSize: SIZE11 })
   );
-  return /* @__PURE__ */ React113.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React113.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React113.createElement(
+  return /* @__PURE__ */ React114.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React114.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React114.createElement(
     Infotip4,
     {
       placement: "right",
@@ -7718,20 +7901,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React113.createElement(Box27, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React113.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React114.createElement(Box27, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React114.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React113.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React113.createElement(
+    return /* @__PURE__ */ React114.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React114.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React113.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React113.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React113.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React113.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React114.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React114.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React114.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React114.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -7745,7 +7928,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React113.createElement(
+      (props) => /* @__PURE__ */ React114.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -7789,7 +7972,7 @@ var RepeaterItem = ({
   const duplicateLabel = __55("Duplicate", "elementor");
   const toggleLabel = propDisabled ? __55("Show", "elementor") : __55("Hide", "elementor");
   const removeLabel = __55("Remove", "elementor");
-  return /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(
+  return /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(
     RepeaterTag,
     {
       disabled,
@@ -7804,20 +7987,20 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React113.createElement(React113.Fragment, null, showDuplicate && /* @__PURE__ */ React113.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton10, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React113.createElement(CopyIcon2, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React113.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton10, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React113.createElement(EyeOffIcon2, { fontSize: SIZE11 }) : /* @__PURE__ */ React113.createElement(EyeIcon2, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React113.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton10, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React113.createElement(XIcon4, { fontSize: SIZE11 }))))
+      actions: /* @__PURE__ */ React114.createElement(React114.Fragment, null, showDuplicate && /* @__PURE__ */ React114.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(IconButton10, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React114.createElement(CopyIcon2, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React114.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(IconButton10, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React114.createElement(EyeOffIcon2, { fontSize: SIZE11 }) : /* @__PURE__ */ React114.createElement(EyeIcon2, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React114.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React114.createElement(IconButton10, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React114.createElement(XIcon4, { fontSize: SIZE11 }))))
     }
-  ), /* @__PURE__ */ React113.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React113.createElement(
+  ), /* @__PURE__ */ React114.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React114.createElement(
     ClickAwayListener,
     {
       mouseEvent: "onMouseDown",
       touchEvent: "onTouchStart",
       onClickAway: popoverProps.onClose
     },
-    /* @__PURE__ */ React113.createElement(Box27, null, children({ anchorEl: ref }))
+    /* @__PURE__ */ React114.createElement(Box27, null, children({ anchorEl: ref }))
   )));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = useState19(null);
+  const [ref, setRef] = useState20(null);
   const popoverState = usePopupState10({ variant: "popover" });
   const popoverProps = bindPopover8(popoverState);
   useEffect17(() => {
@@ -7839,9 +8022,9 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-import * as React115 from "react";
-import { useEffect as useEffect19, useMemo as useMemo16, useRef as useRef29, useState as useState20 } from "react";
-import { getContainer, getElementSetting } from "@elementor/editor-elements";
+import * as React116 from "react";
+import { useEffect as useEffect19, useMemo as useMemo16, useRef as useRef29, useState as useState21 } from "react";
+import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
   ItalicIcon,
@@ -7865,7 +8048,7 @@ import { useEditorState } from "@tiptap/react";
 import { __ as __57 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
-import * as React114 from "react";
+import * as React115 from "react";
 import { useEffect as useEffect18, useRef as useRef28 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack20, TextField as TextField10, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
@@ -7889,7 +8072,7 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React114.createElement(
+  return /* @__PURE__ */ React115.createElement(
     Popover8,
     {
       slotProps: {
@@ -7900,7 +8083,7 @@ var UrlPopover = ({
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React114.createElement(Stack20, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React114.createElement(
+    /* @__PURE__ */ React115.createElement(Stack20, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React115.createElement(
       TextField10,
       {
         value,
@@ -7913,7 +8096,7 @@ var UrlPopover = ({
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React114.createElement(Tooltip13, { title: __56("Open in a new tab", "elementor") }, /* @__PURE__ */ React114.createElement(
+    ), /* @__PURE__ */ React115.createElement(Tooltip13, { title: __56("Open in a new tab", "elementor") }, /* @__PURE__ */ React115.createElement(
       ToggleButton2,
       {
         size: "tiny",
@@ -7923,15 +8106,15 @@ var UrlPopover = ({
         "aria-label": __56("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React114.createElement(ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React115.createElement(ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
 
 // src/components/inline-editor-toolbar.tsx
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = useState20("");
-  const [openInNewTab, setOpenInNewTab] = useState20(false);
+  const [urlValue, setUrlValue] = useState21("");
+  const [openInNewTab, setOpenInNewTab] = useState21(false);
   const toolbarRef = useRef29(null);
   const linkPopupState = usePopupState11({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
@@ -7979,7 +8162,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   useEffect19(() => {
     editor?.commands?.focus();
   }, [editor]);
-  return /* @__PURE__ */ React115.createElement(
+  return /* @__PURE__ */ React116.createElement(
     Box28,
     {
       ref: toolbarRef,
@@ -7996,8 +8179,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         ...sx
       }
     },
-    /* @__PURE__ */ React115.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React115.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React115.createElement(
+    /* @__PURE__ */ React116.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React116.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React116.createElement(
       ToggleButtonGroup2,
       {
         value: editorState,
@@ -8019,7 +8202,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React115.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React115.createElement(
+      formatButtonsList.map((button) => /* @__PURE__ */ React116.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React116.createElement(
         ToggleButton3,
         {
           value: button.action,
@@ -8037,7 +8220,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
         button.icon
       )))
     ),
-    /* @__PURE__ */ React115.createElement(
+    /* @__PURE__ */ React116.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -8052,7 +8235,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
   );
 };
 var checkIfElementIsClickable = (elementId) => {
-  const container = getContainer(elementId);
+  const container = getContainer2(elementId);
   const type = container?.model.get("widgetType");
   const isButton = type === "e-button";
   const hasLink = !!getElementSetting(elementId, "link")?.value?.destination;
@@ -8061,7 +8244,7 @@ var checkIfElementIsClickable = (elementId) => {
 var toolbarButtons = {
   clear: {
     label: __57("Clear", "elementor"),
-    icon: /* @__PURE__ */ React115.createElement(MinusIcon2, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React116.createElement(MinusIcon2, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
@@ -8069,7 +8252,7 @@ var toolbarButtons = {
   },
   bold: {
     label: __57("Bold", "elementor"),
-    icon: /* @__PURE__ */ React115.createElement(BoldIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React116.createElement(BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
@@ -8077,7 +8260,7 @@ var toolbarButtons = {
   },
   italic: {
     label: __57("Italic", "elementor"),
-    icon: /* @__PURE__ */ React115.createElement(ItalicIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React116.createElement(ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
@@ -8085,7 +8268,7 @@ var toolbarButtons = {
   },
   underline: {
     label: __57("Underline", "elementor"),
-    icon: /* @__PURE__ */ React115.createElement(UnderlineIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React116.createElement(UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
@@ -8093,7 +8276,7 @@ var toolbarButtons = {
   },
   strike: {
     label: __57("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React115.createElement(StrikethroughIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React116.createElement(StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
@@ -8101,7 +8284,7 @@ var toolbarButtons = {
   },
   superscript: {
     label: __57("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React115.createElement(SuperscriptIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React116.createElement(SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
@@ -8109,7 +8292,7 @@ var toolbarButtons = {
   },
   subscript: {
     label: __57("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React115.createElement(SubscriptIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React116.createElement(SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
@@ -8117,7 +8300,7 @@ var toolbarButtons = {
   },
   link: {
     label: __57("Link", "elementor"),
-    icon: /* @__PURE__ */ React115.createElement(LinkIcon3, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React116.createElement(LinkIcon3, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -8126,7 +8309,7 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
 
 // src/components/size/unstable-size-field.tsx
-import * as React118 from "react";
+import * as React119 from "react";
 import { InputAdornment as InputAdornment6 } from "@elementor/ui";
 
 // src/hooks/use-size-value.ts
@@ -8169,10 +8352,10 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-import * as React116 from "react";
+import * as React117 from "react";
 import { useId as useId4 } from "react";
 import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
-import { bindMenu as bindMenu3, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu4, styled as styled11, usePopupState as usePopupState12 } from "@elementor/ui";
+import { bindMenu as bindMenu3, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu4, styled as styled12, usePopupState as usePopupState12 } from "@elementor/ui";
 var menuItemContentStyles2 = {
   display: "flex",
   flexDirection: "column",
@@ -8187,7 +8370,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React116.createElement(Menu4, { MenuListProps: { dense: true }, ...bindMenu3(popupState) }, options.map((option, index) => /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React117.createElement(Menu4, { MenuListProps: { dense: true }, ...bindMenu3(popupState) }, options.map((option, index) => /* @__PURE__ */ React117.createElement(
     MenuListItem8,
     {
       key: option,
@@ -8206,7 +8389,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     option.toUpperCase()
   ))));
 };
-var StyledButton3 = styled11(Button7, {
+var StyledButton3 = styled12(Button7, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -8216,11 +8399,11 @@ var StyledButton3 = styled11(Button7, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-import * as React117 from "react";
+import * as React118 from "react";
 import { forwardRef as forwardRef13 } from "react";
 var UnstableSizeInput = forwardRef13(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React117.createElement(
+    return /* @__PURE__ */ React118.createElement(
       NumberInput,
       {
         ref,
@@ -8258,7 +8441,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit2 = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React118.createElement(
+  return /* @__PURE__ */ React119.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -8267,8 +8450,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React118.createElement(InputAdornment6, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React118.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React118.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React119.createElement(InputAdornment6, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React119.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React119.createElement(
           UnitSelect,
           {
             options: units2,
@@ -8346,6 +8529,7 @@ export {
   KeyValueControl,
   LinkControl,
   LinkedDimensionsControl,
+  MentionTextAreaControl,
   NumberControl,
   NumberInput,
   PopoverContent,