@elementor/editor-controls 3.35.0-413 → 3.35.0-415

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/controls/image-control.tsx
-import * as React11 from "react";
+import * as React14 from "react";
 import { imagePropTypeUtil } from "@elementor/editor-props";
-import { Grid, Stack as Stack2 } from "@elementor/ui";
+import { Grid, Stack as Stack3 } from "@elementor/ui";
 import { __ as __2 } from "@wordpress/i18n";
 
 // src/bound-prop-context/prop-context.tsx
@@ -204,20 +204,53 @@ var ControlFormLabel = (props) => {
   return /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny", ...props });
 };
 
-// src/create-control.tsx
+// src/components/control-label.tsx
+import * as React6 from "react";
+import { Stack } from "@elementor/ui";
+
+// src/control-adornments/control-adornments.tsx
 import * as React5 from "react";
-import { ErrorBoundary } from "@elementor/ui";
 
-// src/control-replacements.tsx
+// src/control-adornments/control-adornments-context.tsx
 import * as React4 from "react";
 import { createContext as createContext3, useContext as useContext3 } from "react";
-var ControlReplacementContext = createContext3([]);
+var Context = createContext3(null);
+var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React4.createElement(Context.Provider, { value: { items: items2 } }, children);
+var useControlAdornments = () => {
+  const context = useContext3(Context);
+  return context?.items ?? [];
+};
+
+// src/control-adornments/control-adornments.tsx
+function ControlAdornments({
+  customContext
+}) {
+  const items2 = useControlAdornments();
+  if (items2?.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React5.createElement(Adornment, { key: id, customContext })));
+}
+
+// src/components/control-label.tsx
+var ControlLabel = ({ children, ...props }) => {
+  return /* @__PURE__ */ React6.createElement(Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React6.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React6.createElement(ControlAdornments, null));
+};
+
+// src/create-control.tsx
+import * as React8 from "react";
+import { ErrorBoundary } from "@elementor/ui";
+
+// src/control-replacements.tsx
+import * as React7 from "react";
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var ControlReplacementContext = createContext4([]);
 var ControlReplacementsProvider = ({ replacements, children }) => {
-  return /* @__PURE__ */ React4.createElement(ControlReplacementContext.Provider, { value: replacements }, children);
+  return /* @__PURE__ */ React7.createElement(ControlReplacementContext.Provider, { value: replacements }, children);
 };
 var useControlReplacement = (OriginalComponent) => {
   const { value, placeholder } = useBoundProp();
-  const replacements = useContext3(ControlReplacementContext);
+  const replacements = useContext4(ControlReplacementContext);
   try {
     const replacement = replacements.find((r) => r.condition({ value, placeholder }));
     return {
@@ -246,7 +279,7 @@ function createControl(Control5) {
   return ((props) => {
     const { ControlToRender, OriginalControl, isReplaced } = useControlReplacement(Control5);
     const controlProps = isReplaced ? { ...props, OriginalControl } : props;
-    return /* @__PURE__ */ React5.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React5.createElement(ControlToRender, { ...controlProps }));
+    return /* @__PURE__ */ React8.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React8.createElement(ControlToRender, { ...controlProps }));
   });
 }
 
@@ -290,19 +323,19 @@ var formatResponse = (response) => {
 };
 
 // src/controls/image-media-control.tsx
-import * as React9 from "react";
+import * as React12 from "react";
 import { imageSrcPropTypeUtil } from "@elementor/editor-props";
 import { UploadIcon } from "@elementor/icons";
-import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from "@elementor/ui";
+import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack as Stack2 } from "@elementor/ui";
 import { useWpMediaAttachment, useWpMediaFrame } from "@elementor/wp-media";
 import { __ } from "@wordpress/i18n";
 
 // src/control-actions/control-actions.tsx
-import * as React8 from "react";
+import * as React11 from "react";
 
 // src/components/floating-bar.tsx
-import * as React6 from "react";
-import { createContext as createContext4, useContext as useContext4, useState as useState2 } from "react";
+import * as React9 from "react";
+import { createContext as createContext5, useContext as useContext5, useState as useState2 } from "react";
 import { styled, UnstableFloatingActionBar } from "@elementor/ui";
 var FloatingBarContainer = styled("span")`
 	display: contents;
@@ -315,13 +348,13 @@ var FloatingBarContainer = styled("span")`
 		z-index: 1000;
 	}
 `;
-var FloatingActionsContext = createContext4(null);
+var FloatingActionsContext = createContext5(null);
 function FloatingActionsBar({ actions, children }) {
   const [open, setOpen] = useState2(false);
-  return /* @__PURE__ */ React6.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React6.createElement(FloatingBarContainer, null, /* @__PURE__ */ React6.createElement(UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
+  return /* @__PURE__ */ React9.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React9.createElement(FloatingBarContainer, null, /* @__PURE__ */ React9.createElement(UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
 }
 function useFloatingActionsBar() {
-  const context = useContext4(FloatingActionsContext);
+  const context = useContext5(FloatingActionsContext);
   if (!context) {
     throw new Error("useFloatingActions must be used within a FloatingActionsBar");
   }
@@ -329,12 +362,12 @@ function useFloatingActionsBar() {
 }
 
 // src/control-actions/control-actions-context.tsx
-import * as React7 from "react";
-import { createContext as createContext5, useContext as useContext5 } from "react";
-var Context = createContext5(null);
-var ControlActionsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React7.createElement(Context.Provider, { value: { items: items2 } }, children);
+import * as React10 from "react";
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var Context2 = createContext6(null);
+var ControlActionsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React10.createElement(Context2.Provider, { value: { items: items2 } }, children);
 var useControlActions = () => {
-  const context = useContext5(Context);
+  const context = useContext6(Context2);
   if (!context) {
     throw new Error("useControlActions must be used within a ControlActionsProvider");
   }
@@ -348,8 +381,8 @@ function ControlActions({ children }) {
   if (items2.length === 0 || disabled) {
     return children;
   }
-  const menuItems = items2.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React8.createElement(MenuItem2, { key: id }));
-  return /* @__PURE__ */ React8.createElement(FloatingActionsBar, { actions: menuItems }, children);
+  const menuItems = items2.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: id }));
+  return /* @__PURE__ */ React11.createElement(FloatingActionsBar, { actions: menuItems }, children);
 }
 
 // src/controls/image-media-control.tsx
@@ -372,7 +405,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       });
     }
   });
-  return /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React9.createElement(CardMedia, { image: src, sx: { height: propType.meta.isDynamic ? 134 : 150 } }, isFetching ? /* @__PURE__ */ React9.createElement(Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React9.createElement(CircularProgress, null)) : /* @__PURE__ */ React9.createElement(React9.Fragment, null)), /* @__PURE__ */ React9.createElement(CardOverlay, null, /* @__PURE__ */ React9.createElement(Stack, { gap: 1 }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React12.createElement(ControlActions, null, /* @__PURE__ */ React12.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React12.createElement(CardMedia, { image: src, sx: { height: propType.meta.isDynamic ? 134 : 150 } }, isFetching ? /* @__PURE__ */ React12.createElement(Stack2, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React12.createElement(CircularProgress, null)) : /* @__PURE__ */ React12.createElement(React12.Fragment, null)), /* @__PURE__ */ React12.createElement(CardOverlay, null, /* @__PURE__ */ React12.createElement(Stack2, { gap: 1 }, /* @__PURE__ */ React12.createElement(
     Button,
     {
       size: "tiny",
@@ -381,13 +414,13 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       onClick: () => open({ mode: "browse" })
     },
     __("Select image", "elementor")
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React12.createElement(
     Button,
     {
       size: "tiny",
       variant: "text",
       color: "inherit",
-      startIcon: /* @__PURE__ */ React9.createElement(UploadIcon, null),
+      startIcon: /* @__PURE__ */ React12.createElement(UploadIcon, null),
       onClick: () => open({ mode: "upload" })
     },
     __("Upload", "elementor")
@@ -395,7 +428,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
 });
 
 // src/controls/select-control.tsx
-import * as React10 from "react";
+import * as React13 from "react";
 import { stringPropTypeUtil } from "@elementor/editor-props";
 import { MenuListItem } from "@elementor/editor-ui";
 import { Select, Typography } from "@elementor/ui";
@@ -415,7 +448,7 @@ var SelectControl = createControl(
       setValue(newValue);
     };
     const isDisabled = disabled || options.length === 0;
-    return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(
+    return /* @__PURE__ */ React13.createElement(ControlActions, null, /* @__PURE__ */ React13.createElement(
       Select,
       {
         sx: { overflow: "hidden" },
@@ -429,7 +462,7 @@ var SelectControl = createControl(
             if (placeholder) {
               const placeholderOption = findOptionByValue(placeholder);
               const displayText = placeholderOption?.label || placeholder;
-              return /* @__PURE__ */ React10.createElement(Typography, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
+              return /* @__PURE__ */ React13.createElement(Typography, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
             }
             return "";
           }
@@ -441,7 +474,7 @@ var SelectControl = createControl(
         disabled: isDisabled,
         fullWidth: true
       },
-      options.map(({ label, ...props }) => /* @__PURE__ */ React10.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
+      options.map(({ label, ...props }) => /* @__PURE__ */ React13.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
     ));
   }
 );
@@ -449,19 +482,19 @@ var SelectControl = createControl(
 // src/controls/image-control.tsx
 var ImageControl = createControl(({ sizes }) => {
   const propContext = useBoundProp(imagePropTypeUtil);
-  return /* @__PURE__ */ React11.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React11.createElement(Stack2, { gap: 1.5 }, /* @__PURE__ */ React11.createElement(ControlFormLabel, null, __2("Image", "elementor")), /* @__PURE__ */ React11.createElement(ImageSrcControl, null), /* @__PURE__ */ React11.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React11.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React11.createElement(ControlFormLabel, null, __2("Resolution", "elementor"))), /* @__PURE__ */ React11.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React11.createElement(ImageSizeControl, { sizes })))));
+  return /* @__PURE__ */ React14.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React14.createElement(Stack3, { gap: 1.5 }, /* @__PURE__ */ React14.createElement(ControlLabel, null, __2("Image", "elementor")), /* @__PURE__ */ React14.createElement(ImageSrcControl, null), /* @__PURE__ */ React14.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React14.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React14.createElement(ControlFormLabel, null, __2("Resolution", "elementor"))), /* @__PURE__ */ React14.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React14.createElement(ImageSizeControl, { sizes })))));
 });
 var ImageSrcControl = () => {
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
-  return /* @__PURE__ */ React11.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React11.createElement(ImageMediaControl, { mediaTypes }));
+  return /* @__PURE__ */ React14.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React14.createElement(ImageMediaControl, { mediaTypes }));
 };
 var ImageSizeControl = ({ sizes }) => {
-  return /* @__PURE__ */ React11.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React11.createElement(SelectControl, { options: sizes }));
+  return /* @__PURE__ */ React14.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React14.createElement(SelectControl, { options: sizes }));
 };
 
 // src/controls/text-control.tsx
-import * as React12 from "react";
+import * as React15 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
 import { TextField } from "@elementor/ui";
 var TextControl = createControl(
@@ -476,7 +509,7 @@ var TextControl = createControl(
   }) => {
     const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil2);
     const handleChange = (event) => setValue(event.target.value);
-    return /* @__PURE__ */ React12.createElement(ControlActions, null, /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React15.createElement(ControlActions, null, /* @__PURE__ */ React15.createElement(
       TextField,
       {
         size: "tiny",
@@ -497,7 +530,7 @@ var TextControl = createControl(
 );
 
 // src/controls/text-area-control.tsx
-import * as React13 from "react";
+import * as React16 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
 import { TextField as TextField2 } from "@elementor/ui";
 var TextAreaControl = createControl(({ placeholder, ariaLabel }) => {
@@ -505,7 +538,7 @@ var TextAreaControl = createControl(({ placeholder, ariaLabel }) => {
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React13.createElement(ControlActions, null, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(
     TextField2,
     {
       size: "tiny",
@@ -524,14 +557,14 @@ var TextAreaControl = createControl(({ placeholder, ariaLabel }) => {
 });
 
 // src/controls/size-control.tsx
-import * as React18 from "react";
+import * as React21 from "react";
 import { useEffect as useEffect3, 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 React16 from "react";
+import * as React19 from "react";
 import { useRef } from "react";
 import { MathFunctionIcon } from "@elementor/icons";
 import { Box, InputAdornment as InputAdornment2 } from "@elementor/ui";
@@ -548,7 +581,7 @@ function isUnitExtendedOption(unit) {
 }
 
 // src/components/size-control/text-field-inner-selection.tsx
-import * as React15 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";
@@ -563,7 +596,7 @@ import {
 } from "@elementor/ui";
 
 // src/components/number-input.tsx
-import * as React14 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", "+"];
@@ -580,7 +613,7 @@ var NumberInput = forwardRef((props, ref) => {
       setKey((prev) => prev + 1);
     }
   };
-  return /* @__PURE__ */ React14.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];
@@ -612,7 +645,7 @@ var TextFieldInnerSelection = forwardRef2(
     const getCursorStyle = () => ({
       input: { cursor: InputProps.readOnly ? "default !important" : void 0 }
     });
-    return /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React18.createElement(
       NumberInput,
       {
         ref,
@@ -657,7 +690,7 @@ var SelectionEndAdornment = ({
     flexDirection: "column",
     justifyContent: "center"
   };
-  return /* @__PURE__ */ React15.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React18.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React18.createElement(
     StyledButton,
     {
       isPrimaryColor: showPrimaryColor,
@@ -666,7 +699,7 @@ var SelectionEndAdornment = ({
       ...bindTrigger(popupState)
     },
     placeholder ?? alternativeOptionLabels[value] ?? value
-  ), /* @__PURE__ */ React15.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React15.createElement(
+  ), /* @__PURE__ */ React18.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React18.createElement(
     MenuListItem2,
     {
       key: option,
@@ -759,7 +792,7 @@ var SizeInput = ({
     custom: popupAttributes
   } : void 0;
   const alternativeOptionLabels = {
-    custom: /* @__PURE__ */ React16.createElement(MathFunctionIcon, { fontSize: "tiny" })
+    custom: /* @__PURE__ */ React19.createElement(MathFunctionIcon, { fontSize: "tiny" })
   };
   const InputProps = {
     ...popupAttributes,
@@ -767,8 +800,8 @@ var SizeInput = ({
     autoComplete: "off",
     onClick,
     onFocus,
-    startAdornment: startIcon ? /* @__PURE__ */ React16.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
-    endAdornment: /* @__PURE__ */ React16.createElement(
+    startAdornment: startIcon ? /* @__PURE__ */ React19.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
+    endAdornment: /* @__PURE__ */ React19.createElement(
       SelectionEndAdornment,
       {
         disabled,
@@ -780,7 +813,7 @@ var SizeInput = ({
       }
     )
   };
-  return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(Box, null, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(ControlActions, null, /* @__PURE__ */ React19.createElement(Box, null, /* @__PURE__ */ React19.createElement(
     TextFieldInnerSelection,
     {
       disabled,
@@ -799,7 +832,7 @@ var SizeInput = ({
 };
 
 // src/components/text-field-popover.tsx
-import * as React17 from "react";
+import * as React20 from "react";
 import { useEffect, useRef as useRef2 } from "react";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { MathFunctionIcon as MathFunctionIcon2 } from "@elementor/icons";
@@ -822,7 +855,7 @@ var TextFieldPopover = (props) => {
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React20.createElement(
     Popover,
     {
       disablePortal: true,
@@ -839,15 +872,15 @@ var TextFieldPopover = (props) => {
       transformOrigin: { vertical: "top", horizontal: "center" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React20.createElement(
       PopoverHeader,
       {
         title: __3("CSS function", "elementor"),
         onClose: handleClose,
-        icon: /* @__PURE__ */ React17.createElement(MathFunctionIcon2, { fontSize: SIZE })
+        icon: /* @__PURE__ */ React20.createElement(MathFunctionIcon2, { fontSize: SIZE })
       }
     ),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React20.createElement(
       TextField4,
       {
         value,
@@ -994,7 +1027,7 @@ var SizeControl = createControl(
         popupState.open(anchorRef?.current);
       }
     };
-    const maybeClosePopup = React18.useCallback(() => {
+    const maybeClosePopup = React21.useCallback(() => {
       if (popupState && popupState.isOpen) {
         popupState.close();
       }
@@ -1002,7 +1035,7 @@ var SizeControl = createControl(
     useEffect3(() => {
       maybeClosePopup();
     }, [activeBreakpoint]);
-    return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
+    return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
       SizeInput,
       {
         disabled,
@@ -1020,7 +1053,7 @@ var SizeControl = createControl(
         id,
         ariaLabel
       }
-    ), anchorRef?.current && popupState.isOpen && /* @__PURE__ */ React18.createElement(
+    ), anchorRef?.current && popupState.isOpen && /* @__PURE__ */ React21.createElement(
       TextFieldPopover,
       {
         popupState,
@@ -1079,19 +1112,19 @@ function extractValueFromState(state, allowEmpty = false) {
 }
 
 // src/controls/stroke-control.tsx
-import * as React21 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 React19 from "react";
-import { Stack as Stack3 } from "@elementor/ui";
-var SectionContent = ({ gap = 0.5, sx, children }) => /* @__PURE__ */ React19.createElement(Stack3, { gap, sx: { ...sx } }, children);
+import * as React22 from "react";
+import { Stack as Stack4 } from "@elementor/ui";
+var SectionContent = ({ gap = 0.5, sx, children }) => /* @__PURE__ */ React22.createElement(Stack4, { gap, sx: { ...sx } }, children);
 
 // src/controls/color-control.tsx
-import * as React20 from "react";
+import * as React23 from "react";
 import { colorPropTypeUtil } from "@elementor/editor-props";
 import { UnstableColorField } from "@elementor/ui";
 var ColorControl = createControl(
@@ -1101,7 +1134,7 @@ var ColorControl = createControl(
     const handleChange = (selectedColor) => {
       setValue(selectedColor || null);
     };
-    return /* @__PURE__ */ React20.createElement(ControlActions, null, /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React23.createElement(ControlActions, null, /* @__PURE__ */ React23.createElement(
       UnstableColorField,
       {
         id,
@@ -1144,26 +1177,26 @@ var units = ["px", "em", "rem"];
 var StrokeControl = createControl(() => {
   const propContext = useBoundProp(strokePropTypeUtil);
   const rowRef = useRef3(null);
-  return /* @__PURE__ */ React21.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React21.createElement(SectionContent, null, /* @__PURE__ */ React21.createElement(Control, { bind: "width", label: __4("Stroke width", "elementor"), ref: rowRef }, /* @__PURE__ */ React21.createElement(SizeControl, { units, anchorRef: rowRef })), /* @__PURE__ */ React21.createElement(Control, { bind: "color", label: __4("Stroke color", "elementor") }, /* @__PURE__ */ React21.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__ */ React21.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React21.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React21.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React21.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 styled4, UnstableColorIndicator } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 
 // src/components/control-repeater/actions/tooltip-add-item-action.tsx
-import * as React23 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 React22 from "react";
-import { createContext as createContext7, useMemo as useMemo3, useState as useState5 } from "react";
+import * as React25 from "react";
+import { createContext as createContext8, useMemo as useMemo3, useState as useState5 } from "react";
 import { usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/services/event-bus.ts
@@ -1201,18 +1234,18 @@ var EventBus = class {
 var eventBus = new EventBus();
 
 // src/components/control-repeater/context/item-context.tsx
-import { createContext as createContext6 } from "react";
-var ItemContext = createContext6({
+import { createContext as createContext7 } from "react";
+var ItemContext = createContext7({
   index: -1,
   value: {}
 });
 
 // src/components/control-repeater/context/repeater-context.tsx
-var RepeaterContext = createContext7(null);
+var RepeaterContext = createContext8(null);
 var EMPTY_OPEN_ITEM = -1;
 var useRepeaterContext = () => {
-  const context = React22.useContext(RepeaterContext);
-  const itemContext = React22.useContext(ItemContext);
+  const context = React25.useContext(RepeaterContext);
+  const itemContext = React25.useContext(ItemContext);
   if (!context) {
     throw new Error("useRepeaterContext must be used within a RepeaterContextProvider");
   }
@@ -1274,7 +1307,7 @@ var RepeaterContextProvider = ({
     const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
     setItems(newItems);
   };
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React25.createElement(
     RepeaterContext.Provider,
     {
       value: {
@@ -1311,7 +1344,7 @@ var TooltipAddItemAction = ({
 }) => {
   const { addItem } = useRepeaterContext();
   const onClick = (ev) => addItem(ev, { index: newItemIndex });
-  return /* @__PURE__ */ React23.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React23.createElement(Box2, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React23.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,
@@ -1319,20 +1352,20 @@ var TooltipAddItemAction = ({
       onClick,
       "aria-label": sprintf(__5("Add %s item", "elementor"), ariaLabel?.toLowerCase())
     },
-    /* @__PURE__ */ React23.createElement(PlusIcon, { fontSize: SIZE2 })
+    /* @__PURE__ */ React26.createElement(PlusIcon, { fontSize: SIZE2 })
   )));
 };
 var ConditionalToolTip = ({
   children,
   enable,
   content
-}) => enable && content ? /* @__PURE__ */ React23.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 React25 from "react";
+import * as React28 from "react";
 
 // src/components/repeater/sortable.tsx
-import * as React24 from "react";
+import * as React27 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
   Divider,
@@ -1344,10 +1377,10 @@ import {
 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 var SortableProvider = (props) => {
-  return /* @__PURE__ */ React24.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React24.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__ */ React24.createElement(
+  return /* @__PURE__ */ React27.createElement(
     UnstableSortableItem,
     {
       id,
@@ -1360,7 +1393,7 @@ var SortableItem = ({ id, children, disabled }) => {
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React24.createElement(StyledListItem, { ...itemProps, style: itemStyle, tabIndex: -1 }, !disabled && /* @__PURE__ */ React24.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React24.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 }));
       }
     }
   );
@@ -1395,7 +1428,7 @@ var StyledListItem = styled3(ListItem)`
 		}
 	}
 `;
-var SortableTrigger = (props) => /* @__PURE__ */ React24.createElement(
+var SortableTrigger = (props) => /* @__PURE__ */ React27.createElement(
   "div",
   {
     ...props,
@@ -1404,7 +1437,7 @@ var SortableTrigger = (props) => /* @__PURE__ */ React24.createElement(
     tabIndex: 0,
     "aria-label": __6("Drag item", "elementor")
   },
-  /* @__PURE__ */ React24.createElement(GripVerticalIcon, { fontSize: "tiny" })
+  /* @__PURE__ */ React27.createElement(GripVerticalIcon, { fontSize: "tiny" })
 );
 var StyledDivider = styled3(Divider)`
 	height: 0px;
@@ -1441,22 +1474,22 @@ var ItemsContainer = ({
       })
     );
   };
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.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__ */ React25.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React25.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 React27 from "react";
+import * as React30 from "react";
 import { bindTrigger as bindTrigger2 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
 
 // src/hooks/use-repeatable-control-context.ts
-import { createContext as createContext8, useContext as useContext7 } from "react";
-var RepeatableControlContext = createContext8(void 0);
+import { createContext as createContext9, useContext as useContext8 } from "react";
+var RepeatableControlContext = createContext9(void 0);
 var useRepeatableControlContext = () => {
-  const context = useContext7(RepeatableControlContext);
+  const context = useContext8(RepeatableControlContext);
   if (!context) {
     throw new Error("useRepeatableControlContext must be used within RepeatableControl");
   }
@@ -1464,11 +1497,11 @@ var useRepeatableControlContext = () => {
 };
 
 // src/components/repeater/repeater-tag.tsx
-import * as React26 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__ */ React26.createElement(
+  return /* @__PURE__ */ React29.createElement(
     UnstableTag,
     {
       ref,
@@ -1498,7 +1531,7 @@ var Item = ({ Label: Label3, Icon, actions }) => {
     value,
     isItemDisabled: isItemDisabled2
   } = useRepeaterContext();
-  const repeatableContext = React27.useContext(RepeatableControlContext);
+  const repeatableContext = React30.useContext(RepeatableControlContext);
   const disableOpen = !!repeatableContext?.props?.readOnly;
   const triggerProps = bindTrigger2(popoverState);
   const onClick = (ev) => {
@@ -1515,15 +1548,15 @@ var Item = ({ Label: Label3, Icon, actions }) => {
     setRowRef(ref);
     popoverState.setAnchorEl(ref);
   };
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React30.createElement(
     RepeaterTag,
     {
       ref: setRef,
-      label: /* @__PURE__ */ React27.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React27.createElement(Label3, { value })),
+      label: /* @__PURE__ */ React30.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React30.createElement(Label3, { value })),
       "aria-label": __7("Open item", "elementor"),
       ...triggerProps,
       onClick,
-      startIcon: /* @__PURE__ */ React27.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React27.createElement(Icon, { value })),
+      startIcon: /* @__PURE__ */ React30.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React30.createElement(Icon, { value })),
       sx: {
         minHeight: (theme) => theme.spacing(3.5),
         ...isItemDisabled2(index) && {
@@ -1532,20 +1565,20 @@ var Item = ({ Label: Label3, Icon, actions }) => {
           }
         }
       },
-      actions: /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.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 React28 from "react";
+import * as React31 from "react";
 var ControlRepeater = ({
   children,
   initial,
   propTypeUtil,
   isItemDisabled: isItemDisabled2
 }) => {
-  return /* @__PURE__ */ React28.createElement(SectionContent, null, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React31.createElement(SectionContent, null, /* @__PURE__ */ React31.createElement(
     RepeaterContextProvider,
     {
       initial,
@@ -1557,7 +1590,7 @@ var ControlRepeater = ({
 };
 
 // src/components/control-repeater/actions/disable-item-action.tsx
-import * as React29 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";
@@ -1577,11 +1610,11 @@ var DisableItemAction = () => {
     }
     updateItem(self, index);
   };
-  return /* @__PURE__ */ React29.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React29.createElement(IconButton2, { size: SIZE3, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React29.createElement(EyeOffIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React29.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 React30 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";
@@ -1597,7 +1630,7 @@ var DuplicateItemAction = () => {
     const newItem = structuredClone(item);
     addItem(ev, { item: newItem, index: index + 1 });
   };
-  return /* @__PURE__ */ React30.createElement(Tooltip2, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React33.createElement(Tooltip2, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React33.createElement(
     IconButton3,
     {
       size: SIZE4,
@@ -1605,12 +1638,12 @@ var DuplicateItemAction = () => {
       "aria-label": duplicateLabel,
       disabled: isItemDisabled2(index)
     },
-    /* @__PURE__ */ React30.createElement(CopyIcon, { fontSize: SIZE4 })
+    /* @__PURE__ */ React33.createElement(CopyIcon, { fontSize: SIZE4 })
   ));
 };
 
 // src/components/control-repeater/actions/remove-item-action.tsx
-import * as React31 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";
@@ -1622,18 +1655,18 @@ var RemoveItemAction = () => {
   }
   const removeLabel = __10("Remove", "elementor");
   const onClick = () => removeItem(index);
-  return /* @__PURE__ */ React31.createElement(Tooltip3, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(IconButton4, { size: SIZE5, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React31.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 React33 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 React32 from "react";
+import * as React35 from "react";
 import { Popover as Popover2 } from "@elementor/ui";
 var RepeaterPopover = ({ children, width, ...props }) => {
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React35.createElement(
     Popover2,
     {
       disablePortal: true,
@@ -1660,60 +1693,34 @@ var EditItemPopover = ({ children }) => {
     popoverState.setAnchorEl(null);
     setOpenItemIndex(EMPTY_OPEN_ITEM);
   };
-  return /* @__PURE__ */ React33.createElement(RepeaterPopover, { width: rowRef.offsetWidth, ...bindPopover2(popoverState), onClose }, /* @__PURE__ */ React33.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React33.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 React34 from "react";
-import { Stack as Stack4 } from "@elementor/ui";
-var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React34.createElement(Stack4, { ...props, gap }, children);
+import * as React37 from "react";
+import { Stack as Stack5 } from "@elementor/ui";
+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 React35 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__ */ React35.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 Stack5, Typography as Typography2 } from "@elementor/ui";
-
-// src/control-adornments/control-adornments.tsx
-import * as React37 from "react";
-
-// src/control-adornments/control-adornments-context.tsx
-import * as React36 from "react";
-import { createContext as createContext9, useContext as useContext9 } from "react";
-var Context2 = createContext9(null);
-var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React36.createElement(Context2.Provider, { value: { items: items2 } }, children);
-var useControlAdornments = () => {
-  const context = useContext9(Context2);
-  return context?.items ?? [];
-};
-
-// src/control-adornments/control-adornments.tsx
-function ControlAdornments({
-  customContext
-}) {
-  const items2 = useControlAdornments();
-  if (items2?.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React37.createElement(Adornment, { key: id, customContext })));
-}
-
-// src/components/repeater/repeater-header.tsx
+import { Box as Box4, Stack as Stack6, Typography as Typography2 } from "@elementor/ui";
 var RepeaterHeader = forwardRef6(
   ({
     label,
     children,
     adornment: Adornment = ControlAdornments
   }, ref) => {
-    return /* @__PURE__ */ React38.createElement(
-      Stack5,
+    return /* @__PURE__ */ React39.createElement(
+      Stack6,
       {
         direction: "row",
         alignItems: "center",
@@ -1721,7 +1728,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
     );
   }
@@ -1730,26 +1737,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 = 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: [
@@ -1757,14 +1764,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 || {};
@@ -1783,7 +1790,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",
@@ -1813,7 +1820,7 @@ var initialShadow = {
 };
 
 // src/controls/filter-control/filter-repeater-control.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 import {
   backdropFilterPropTypeUtil,
   filterPropTypeUtil
@@ -1821,7 +1828,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 createContext10, useContext as useContext10, useMemo as useMemo4 } from "react";
 import { cssFilterFunctionPropUtil } from "@elementor/editor-props";
 
@@ -1937,7 +1944,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 = useContext10(FilterConfigContext);
@@ -1948,7 +1955,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";
@@ -1956,7 +1963,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";
@@ -1986,7 +1993,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],
@@ -1998,7 +2005,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,
@@ -2017,7 +2024,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
@@ -2035,7 +2042,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();
@@ -2043,19 +2050,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 * 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",
@@ -2069,10 +2076,10 @@ var StyledUnstableColorIndicator2 = styled5(UnstableColorIndicator2)(({ theme })
 }));
 
 // 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;
@@ -2080,11 +2087,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;
@@ -2092,16 +2099,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
@@ -2118,7 +2125,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,
@@ -2129,20 +2136,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) {
@@ -2152,7 +2159,7 @@ function ensureFilterConfig(name) {
 }
 
 // src/controls/select-control-wrapper.tsx
-import * as React49 from "react";
+import * as React50 from "react";
 import { useEffect as useEffect4, useState as useState6 } from "react";
 var getOffCanvasElements = () => {
   const extendedWindow = window;
@@ -2184,16 +2191,16 @@ 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/toggle-control.tsx
-import * as React53 from "react";
+import * as React54 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 import { useEffect as useEffect5, useMemo as useMemo5, useRef as useRef7, useState as useState7 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
@@ -2208,14 +2215,14 @@ import {
 } from "@elementor/ui";
 
 // src/components/conditional-tooltip.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 import { Tooltip as Tooltip4 } from "@elementor/ui";
 var ConditionalTooltip = ({
   showTooltip,
   children,
   label
 }) => {
-  return showTooltip && label ? /* @__PURE__ */ React50.createElement(Tooltip4, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
+  return showTooltip && label ? /* @__PURE__ */ React51.createElement(Tooltip4, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
 };
 
 // src/components/control-toggle-button-group.tsx
@@ -2246,7 +2253,7 @@ var StyledToggleButton = styled6(ToggleButton, {
 		}
 	`}
 `;
-var ToggleButtonGroupUi = React51.forwardRef(
+var ToggleButtonGroupUi = React52.forwardRef(
   ({
     justify = "end",
     size = "tiny",
@@ -2291,7 +2298,7 @@ var ToggleButtonGroupUi = React51.forwardRef(
       return [];
     };
     const placeholderArray = getPlaceholderArray(placeholder);
-    return /* @__PURE__ */ React51.createElement(
+    return /* @__PURE__ */ React52.createElement(
       StyledToggleButtonGroup,
       {
         ref,
@@ -2309,14 +2316,14 @@ var ToggleButtonGroupUi = React51.forwardRef(
       },
       fixedItems.map(({ label, value: buttonValue, renderContent: Content3, showTooltip }) => {
         const isPlaceholder = placeholderArray.length > 0 && placeholderArray.includes(buttonValue) && (shouldShowExclusivePlaceholder || shouldShowNonExclusivePlaceholder);
-        return /* @__PURE__ */ React51.createElement(
+        return /* @__PURE__ */ React52.createElement(
           ConditionalTooltip,
           {
             key: buttonValue,
             label,
             showTooltip: showTooltip || false
           },
-          /* @__PURE__ */ React51.createElement(
+          /* @__PURE__ */ React52.createElement(
             StyledToggleButton,
             {
               value: buttonValue,
@@ -2325,11 +2332,11 @@ var ToggleButtonGroupUi = React51.forwardRef(
               fullWidth,
               isPlaceholder
             },
-            /* @__PURE__ */ React51.createElement(Content3, { size })
+            /* @__PURE__ */ React52.createElement(Content3, { size })
           )
         );
       }),
-      menuItems.length && exclusive && /* @__PURE__ */ React51.createElement(
+      menuItems.length && exclusive && /* @__PURE__ */ React52.createElement(
         SplitButtonGroup,
         {
           size,
@@ -2343,7 +2350,7 @@ var ToggleButtonGroupUi = React51.forwardRef(
   }
 );
 var ControlToggleButtonGroup = (props) => {
-  return /* @__PURE__ */ React51.createElement(ControlActions, null, /* @__PURE__ */ React51.createElement(ToggleButtonGroupUi, { ...props }));
+  return /* @__PURE__ */ React52.createElement(ControlActions, null, /* @__PURE__ */ React52.createElement(ToggleButtonGroupUi, { ...props }));
 };
 var SplitButtonGroup = ({
   size = "tiny",
@@ -2367,7 +2374,7 @@ var SplitButtonGroup = ({
     const shouldRemove = newValue === value;
     onChange(shouldRemove ? null : newValue);
   };
-  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(
     ToggleButton,
     {
       value: previewButton.value,
@@ -2380,7 +2387,7 @@ var SplitButtonGroup = ({
       }
     },
     previewButton.renderContent({ size })
-  ), /* @__PURE__ */ React51.createElement(
+  ), /* @__PURE__ */ React52.createElement(
     ToggleButton,
     {
       size,
@@ -2391,8 +2398,8 @@ var SplitButtonGroup = ({
       ref: menuButtonRef,
       value: "__chevron-icon-button__"
     },
-    /* @__PURE__ */ React51.createElement(ChevronDownIcon, { fontSize: size })
-  ), /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React52.createElement(ChevronDownIcon, { fontSize: size })
+  ), /* @__PURE__ */ React52.createElement(
     Menu2,
     {
       open: isMenuOpen,
@@ -2410,14 +2417,14 @@ var SplitButtonGroup = ({
         mt: 0.5
       }
     },
-    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React51.createElement(
+    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React52.createElement(
       MenuItem,
       {
         key: buttonValue,
         selected: buttonValue === value,
         onClick: () => onMenuItemClick(buttonValue)
       },
-      /* @__PURE__ */ React51.createElement(ListItemText, null, /* @__PURE__ */ React51.createElement(Typography3, { sx: { fontSize: "14px" } }, label))
+      /* @__PURE__ */ React52.createElement(ListItemText, null, /* @__PURE__ */ React52.createElement(Typography3, { sx: { fontSize: "14px" } }, label))
     ))
   ));
 };
@@ -2435,7 +2442,7 @@ var usePreviewButton = (items2, value) => {
 };
 
 // src/utils/convert-toggle-options-to-atomic.tsx
-import * as React52 from "react";
+import * as React53 from "react";
 import * as Icons from "@elementor/icons";
 var convertToggleOptionsToAtomic = (options) => {
   return options.map((option) => {
@@ -2446,7 +2453,7 @@ var convertToggleOptionsToAtomic = (options) => {
       label: option.label,
       renderContent: ({ size }) => {
         if (IconComponent) {
-          return /* @__PURE__ */ React52.createElement(IconComponent, { fontSize: size });
+          return /* @__PURE__ */ React53.createElement(IconComponent, { fontSize: size });
         }
         return option.label;
       },
@@ -2482,7 +2489,7 @@ var ToggleControl = createControl(
       size,
       placeholder
     };
-    return exclusive ? /* @__PURE__ */ React53.createElement(
+    return exclusive ? /* @__PURE__ */ React54.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -2491,7 +2498,7 @@ var ToggleControl = createControl(
         disabled,
         exclusive: true
       }
-    ) : /* @__PURE__ */ React53.createElement(
+    ) : /* @__PURE__ */ React54.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -2505,7 +2512,7 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-import * as React54 from "react";
+import * as React55 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { InputAdornment as InputAdornment3 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
@@ -2536,7 +2543,7 @@ var NumberControl = createControl(
       }
       setValue(updatedValue, void 0, { validation: () => isInputValid });
     };
-    return /* @__PURE__ */ React54.createElement(ControlActions, null, /* @__PURE__ */ React54.createElement(
+    return /* @__PURE__ */ React55.createElement(ControlActions, null, /* @__PURE__ */ React55.createElement(
       NumberInput,
       {
         size: "tiny",
@@ -2549,7 +2556,7 @@ var NumberControl = createControl(
         placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
         inputProps: { step, min },
         InputProps: {
-          startAdornment: startIcon ? /* @__PURE__ */ React54.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0
+          startAdornment: startIcon ? /* @__PURE__ */ React55.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0
         }
       }
     ));
@@ -2561,15 +2568,6 @@ import * as React56 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";
-
-// src/components/control-label.tsx
-import * as React55 from "react";
-import { Stack as Stack6 } from "@elementor/ui";
-var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React55.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React55.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React55.createElement(ControlAdornments, null));
-};
-
-// src/controls/equal-unequal-sizes-control.tsx
 function EqualUnequalSizesControl({
   label,
   icon,