@elementor/editor-controls 1.2.0 → 1.5.0

package/dist/index.mjs

@@ -1,7 +1,8 @@
 // src/controls/image-control.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { imagePropTypeUtil } from "@elementor/editor-props";
-import { Stack as Stack2 } from "@elementor/ui";
+import { Grid, Stack as Stack2 } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
 
 // src/bound-prop-context/prop-context.tsx
 import * as React from "react";
@@ -30,7 +31,7 @@ var PropProvider = ({
   setValue,
   propType,
   placeholder,
-  disabled
+  isDisabled
 }) => {
   return /* @__PURE__ */ React.createElement(
     PropContext.Provider,
@@ -40,7 +41,7 @@ var PropProvider = ({
         propType,
         setValue,
         placeholder,
-        disabled
+        isDisabled
       }
     },
     children
@@ -130,8 +131,9 @@ import { useState } from "react";
 function useBoundProp(propTypeUtil) {
   const propKeyContext = usePropKeyContext();
   const { isValid, validate, restoreValue } = useValidation(propKeyContext.propType);
+  const disabled = propKeyContext.isDisabled?.(propKeyContext.propType);
   if (!propTypeUtil) {
-    return propKeyContext;
+    return { ...propKeyContext, disabled };
   }
   function setValue(value2, options, meta) {
     if (!validate(value2)) {
@@ -151,7 +153,8 @@ function useBoundProp(propTypeUtil) {
     setValue,
     value: isValid ? value : null,
     restoreValue,
-    placeholder
+    placeholder,
+    disabled
   };
 }
 var useValidation = (propType) => {
@@ -183,16 +186,23 @@ var resolveUnionPropType = (propType, key) => {
   return resolvedPropType;
 };
 
+// src/components/control-form-label.tsx
+import * as React3 from "react";
+import { FormLabel } from "@elementor/ui";
+var ControlFormLabel = (props) => {
+  return /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny", ...props });
+};
+
 // src/create-control.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { ErrorBoundary } from "@elementor/ui";
 
 // src/control-replacements.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { createContext as createContext3, useContext as useContext3 } from "react";
 var ControlReplacementContext = createContext3([]);
 var ControlReplacementsProvider = ({ replacements, children }) => {
-  return /* @__PURE__ */ React3.createElement(ControlReplacementContext.Provider, { value: replacements }, children);
+  return /* @__PURE__ */ React4.createElement(ControlReplacementContext.Provider, { value: replacements }, children);
 };
 var useControlReplacement = (OriginalComponent) => {
   const { value } = useBoundProp();
@@ -220,7 +230,7 @@ var brandSymbol = Symbol("control");
 function createControl(Control5) {
   return (props) => {
     const Component = useControlReplacement(Control5);
-    return /* @__PURE__ */ React4.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React4.createElement(Component, { ...props }));
+    return /* @__PURE__ */ React5.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React5.createElement(Component, { ...props }));
   };
 }
 
@@ -264,7 +274,7 @@ var formatResponse = (response) => {
 };
 
 // src/controls/image-media-control.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { imageSrcPropTypeUtil } from "@elementor/editor-props";
 import { UploadIcon } from "@elementor/icons";
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from "@elementor/ui";
@@ -272,14 +282,14 @@ import { useWpMediaAttachment, useWpMediaFrame } from "@elementor/wp-media";
 import { __ } from "@wordpress/i18n";
 
 // src/control-actions/control-actions.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { styled, UnstableFloatingActionBar } from "@elementor/ui";
 
 // src/control-actions/control-actions-context.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { createContext as createContext4, useContext as useContext4 } from "react";
 var Context = createContext4(null);
-var ControlActionsProvider = ({ children, items }) => /* @__PURE__ */ React5.createElement(Context.Provider, { value: { items } }, children);
+var ControlActionsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React6.createElement(Context.Provider, { value: { items: items2 } }, children);
 var useControlActions = () => {
   const context = useContext4(Context);
   if (!context) {
@@ -301,13 +311,13 @@ var FloatingBarContainer = styled("span")`
 	}
 `;
 function ControlActions({ children }) {
-  const { items } = useControlActions();
+  const { items: items2 } = useControlActions();
   const { disabled } = useBoundProp();
-  if (items.length === 0 || disabled) {
+  if (items2.length === 0 || disabled) {
     return children;
   }
-  const menuItems = items.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React6.createElement(MenuItem2, { key: id }));
-  return /* @__PURE__ */ React6.createElement(FloatingBarContainer, null, /* @__PURE__ */ React6.createElement(UnstableFloatingActionBar, { actions: menuItems }, children));
+  const menuItems = items2.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React7.createElement(MenuItem2, { key: id }));
+  return /* @__PURE__ */ React7.createElement(FloatingBarContainer, null, /* @__PURE__ */ React7.createElement(UnstableFloatingActionBar, { actions: menuItems }, children));
 }
 
 // src/controls/image-media-control.tsx
@@ -330,7 +340,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       });
     }
   });
-  return /* @__PURE__ */ React7.createElement(ControlActions, null, /* @__PURE__ */ React7.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React7.createElement(CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React7.createElement(Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(CircularProgress, null)) : /* @__PURE__ */ React7.createElement(React7.Fragment, null)), /* @__PURE__ */ React7.createElement(CardOverlay, null, /* @__PURE__ */ React7.createElement(Stack, { gap: 1 }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React8.createElement(CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React8.createElement(Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(CircularProgress, null)) : /* @__PURE__ */ React8.createElement(React8.Fragment, null)), /* @__PURE__ */ React8.createElement(CardOverlay, null, /* @__PURE__ */ React8.createElement(Stack, { gap: 1 }, /* @__PURE__ */ React8.createElement(
     Button,
     {
       size: "tiny",
@@ -339,13 +349,13 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       onClick: () => open({ mode: "browse" })
     },
     __("Select image", "elementor")
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     Button,
     {
       size: "tiny",
       variant: "text",
       color: "inherit",
-      startIcon: /* @__PURE__ */ React7.createElement(UploadIcon, null),
+      startIcon: /* @__PURE__ */ React8.createElement(UploadIcon, null),
       onClick: () => open({ mode: "upload" })
     },
     __("Upload", "elementor")
@@ -353,62 +363,103 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
 });
 
 // src/controls/select-control.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { stringPropTypeUtil } from "@elementor/editor-props";
 import { MenuListItem } from "@elementor/editor-ui";
-import { Select } from "@elementor/ui";
+import { Select, Typography } from "@elementor/ui";
 var SelectControl = createControl(({ options, onChange }) => {
-  const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil);
+  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil);
   const handleChange = (event) => {
     const newValue = event.target.value || null;
     onChange?.(newValue, value);
     setValue(newValue);
   };
-  return /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(
     Select,
     {
       sx: { overflow: "hidden" },
       displayEmpty: true,
       size: "tiny",
+      renderValue: (selectedValue) => {
+        const findOptionByValue = (searchValue) => options.find((opt) => opt.value === searchValue);
+        if (!selectedValue || selectedValue === "") {
+          if (placeholder) {
+            const placeholderOption = findOptionByValue(placeholder);
+            const displayText = placeholderOption?.label || placeholder;
+            return /* @__PURE__ */ React9.createElement(Typography, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
+          }
+          return "";
+        }
+        const option = findOptionByValue(selectedValue);
+        return option?.label || selectedValue;
+      },
       value: value ?? "",
       onChange: handleChange,
       disabled,
       fullWidth: true
     },
-    options.map(({ label, ...props }) => /* @__PURE__ */ React8.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
+    options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
   ));
 });
 
 // src/controls/image-control.tsx
 var ImageControl = createControl(({ sizes, showMode = "all" }) => {
   const propContext = useBoundProp(imagePropTypeUtil);
+  let componentToRender;
+  switch (showMode) {
+    case "media":
+      componentToRender = /* @__PURE__ */ React10.createElement(ImageSrcControl, null);
+      break;
+    case "sizes":
+      componentToRender = /* @__PURE__ */ React10.createElement(ImageSizeControl, { sizes });
+      break;
+    case "all":
+    default:
+      componentToRender = /* @__PURE__ */ React10.createElement(Stack2, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, __2("Image", "elementor")), /* @__PURE__ */ React10.createElement(ImageSrcControl, null), /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, __2("Resolution", "elementor"))), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(ImageSizeControl, { sizes }))));
+  }
+  return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, componentToRender);
+});
+var ImageSrcControl = () => {
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
-  return /* @__PURE__ */ React9.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React9.createElement(Stack2, { gap: 1.5 }, ["all", "media"].includes(showMode) ? /* @__PURE__ */ React9.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React9.createElement(ImageMediaControl, { mediaTypes })) : null, ["all", "sizes"].includes(showMode) ? /* @__PURE__ */ React9.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React9.createElement(SelectControl, { options: sizes })) : null));
-});
+  return /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes }));
+};
+var ImageSizeControl = ({ sizes }) => {
+  return /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }));
+};
 
 // src/controls/text-control.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
 import { TextField } from "@elementor/ui";
-var TextControl = createControl(({ placeholder }) => {
-  const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil2);
-  const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(
-    TextField,
-    {
-      size: "tiny",
-      fullWidth: true,
-      disabled,
-      value: value ?? "",
-      onChange: handleChange,
-      placeholder
-    }
-  ));
-});
+var TextControl = createControl(
+  ({
+    placeholder,
+    error,
+    inputValue,
+    inputDisabled,
+    sx
+  }) => {
+    const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil2);
+    const handleChange = (event) => setValue(event.target.value);
+    return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
+      TextField,
+      {
+        size: "tiny",
+        fullWidth: true,
+        disabled: inputDisabled ?? disabled,
+        value: inputValue ?? value ?? "",
+        onChange: handleChange,
+        placeholder,
+        error,
+        sx
+      }
+    ));
+  }
+);
 
 // src/controls/text-area-control.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
 import { TextField as TextField2 } from "@elementor/ui";
 var TextAreaControl = createControl(({ placeholder }) => {
@@ -416,7 +467,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(ControlActions, null, /* @__PURE__ */ React12.createElement(
     TextField2,
     {
       size: "tiny",
@@ -432,14 +483,14 @@ var TextAreaControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/size-control.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { useEffect as useEffect2, useState as useState3 } from "react";
 import { sizePropTypeUtil } 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 React13 from "react";
+import * as React14 from "react";
 import { useRef } from "react";
 import { PencilIcon } from "@elementor/icons";
 import { Box, InputAdornment as InputAdornment2 } from "@elementor/ui";
@@ -452,7 +503,7 @@ function isUnitExtendedOption(unit) {
 }
 
 // src/components/size-control/text-field-inner-selection.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { forwardRef, useId } from "react";
 import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
 import {
@@ -477,7 +528,7 @@ var TextFieldInnerSelection = forwardRef(
     inputProps,
     disabled
   }, ref) => {
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React13.createElement(
       TextField3,
       {
         ref,
@@ -513,7 +564,7 @@ var SelectionEndAdornment = ({
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React12.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React13.createElement(
     Button2,
     {
       size: "small",
@@ -523,7 +574,7 @@ var SelectionEndAdornment = ({
       ...bindTrigger(popupState)
     },
     alternativeOptionLabels[value] ?? value
-  ), /* @__PURE__ */ React12.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React13.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React13.createElement(
     MenuListItem2,
     {
       key: option,
@@ -576,8 +627,8 @@ var SizeInput = ({
     autoComplete: "off",
     onClick,
     onFocus,
-    startAdornment: startIcon ? /* @__PURE__ */ React13.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
-    endAdornment: /* @__PURE__ */ React13.createElement(
+    startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
+    endAdornment: /* @__PURE__ */ React14.createElement(
       SelectionEndAdornment,
       {
         disabled,
@@ -585,7 +636,7 @@ var SizeInput = ({
         onClick: handleUnitChange,
         value: unit,
         alternativeOptionLabels: {
-          custom: /* @__PURE__ */ React13.createElement(PencilIcon, { fontSize: "small" })
+          custom: /* @__PURE__ */ React14.createElement(PencilIcon, { fontSize: "small" })
         },
         menuItemsAttributes: units2.includes("custom") ? {
           custom: popupAttributes
@@ -593,7 +644,7 @@ var SizeInput = ({
       }
     )
   };
-  return /* @__PURE__ */ React13.createElement(ControlActions, null, /* @__PURE__ */ React13.createElement(Box, null, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(Box, null, /* @__PURE__ */ React14.createElement(
     TextFieldInnerSelection,
     {
       disabled,
@@ -615,14 +666,23 @@ var SizeInput = ({
 };
 
 // src/components/text-field-popover.tsx
-import * as React14 from "react";
-import { bindPopover, Paper, Popover, TextField as TextField4 } from "@elementor/ui";
+import * as React15 from "react";
+import { bindPopover, Popover, TextField as TextField4 } from "@elementor/ui";
 var TextFieldPopover = (props) => {
   const { popupState, restoreValue, anchorRef, value, onChange } = props;
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     Popover,
     {
       disablePortal: true,
+      slotProps: {
+        paper: {
+          sx: {
+            borderRadius: 2,
+            width: anchorRef.current?.offsetWidth + "px",
+            p: 1.5
+          }
+        }
+      },
       ...bindPopover(popupState),
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" },
@@ -631,28 +691,18 @@ var TextFieldPopover = (props) => {
         popupState.close();
       }
     },
-    /* @__PURE__ */ React14.createElement(
-      Paper,
+    /* @__PURE__ */ React15.createElement(
+      TextField4,
       {
-        sx: {
-          width: anchorRef.current?.offsetWidth + "px",
-          borderRadius: 2,
-          p: 1.5
-        }
-      },
-      /* @__PURE__ */ React14.createElement(
-        TextField4,
-        {
-          value,
-          onChange,
-          size: "tiny",
-          type: "text",
-          fullWidth: true,
-          inputProps: {
-            autoFocus: true
-          }
+        value,
+        onChange,
+        size: "tiny",
+        type: "text",
+        fullWidth: true,
+        inputProps: {
+          autoFocus: true
         }
-      )
+      }
     )
   );
 };
@@ -732,12 +782,12 @@ var SizeControl = createControl((props) => {
       return !!newState?.numeric || newState?.numeric === 0;
     },
     fallback: (newState) => ({
-      unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
+      unit: newState?.unit ?? defaultUnit,
       numeric: newState?.numeric ?? DEFAULT_SIZE,
       custom: newState?.custom ?? ""
     })
   });
-  const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = DEFAULT_UNIT } = extractValueFromState(state) || {};
+  const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = defaultUnit } = extractValueFromState(state) || {};
   const handleUnitChange = (newUnit) => {
     if (newUnit === "custom") {
       popupState.open(anchorRef?.current);
@@ -767,9 +817,13 @@ var SizeControl = createControl((props) => {
     }
   };
   useEffect2(() => {
-    const newState = createStateFromSizeProp(sizeValue, defaultUnit);
-    const currentUnit = isUnitExtendedOption(state.unit) ? "custom" : "numeric";
-    const mergedStates = { ...state, [currentUnit]: newState[currentUnit] };
+    const newState = createStateFromSizeProp(sizeValue, state.unit === "custom" ? state.unit : defaultUnit);
+    const currentUnitType = isUnitExtendedOption(state.unit) ? "custom" : "numeric";
+    const mergedStates = {
+      ...state,
+      unit: newState.unit ?? state.unit,
+      [currentUnitType]: newState[currentUnitType]
+    };
     if (mergedStates.unit !== "auto" && areStatesEqual(state, mergedStates)) {
       return;
     }
@@ -785,7 +839,7 @@ var SizeControl = createControl((props) => {
       setState(newState);
     }
   }, [activeBreakpoint]);
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     SizeInput,
     {
       disabled,
@@ -801,7 +855,7 @@ var SizeControl = createControl((props) => {
       onClick: onInputClick,
       popupState
     }
-  ), anchorRef?.current && /* @__PURE__ */ React15.createElement(
+  ), anchorRef?.current && /* @__PURE__ */ React16.createElement(
     TextFieldPopover,
     {
       popupState,
@@ -857,15 +911,8 @@ function areStatesEqual(state1, state2) {
 import * as React19 from "react";
 import { forwardRef as forwardRef2, useRef as useRef2 } from "react";
 import { strokePropTypeUtil } from "@elementor/editor-props";
-import { Grid } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
-
-// src/components/control-form-label.tsx
-import * as React16 from "react";
-import { FormLabel } from "@elementor/ui";
-var ControlFormLabel = (props) => {
-  return /* @__PURE__ */ React16.createElement(FormLabel, { size: "tiny", ...props });
-};
+import { Grid as Grid2 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/components/section-content.tsx
 import * as React17 from "react";
@@ -878,7 +925,8 @@ import { colorPropTypeUtil } from "@elementor/editor-props";
 import { UnstableColorField } from "@elementor/ui";
 var ColorControl = createControl(
   ({ propTypeUtil = colorPropTypeUtil, anchorEl, slotProps = {}, ...props }) => {
-    const { value, setValue, disabled } = useBoundProp(propTypeUtil);
+    const { value, setValue, placeholder: boundPropPlaceholder, disabled } = useBoundProp(propTypeUtil);
+    const placeholder = props.placeholder ?? boundPropPlaceholder;
     const handleChange = (selectedColor) => {
       setValue(selectedColor || null);
     };
@@ -888,6 +936,7 @@ var ColorControl = createControl(
         size: "tiny",
         fullWidth: true,
         value: value ?? "",
+        placeholder: placeholder ?? "",
         onChange: handleChange,
         ...props,
         disabled,
@@ -902,6 +951,14 @@ var ColorControl = createControl(
             transformOrigin: {
               vertical: "top",
               horizontal: -10
+            },
+            slotProps: {
+              colorIndicator: {
+                value: value ?? placeholder ?? ""
+              },
+              colorBox: {
+                value: value ?? placeholder ?? ""
+              }
             }
           }
         }
@@ -915,16 +972,16 @@ var units = ["px", "em", "rem"];
 var StrokeControl = createControl(() => {
   const propContext = useBoundProp(strokePropTypeUtil);
   const rowRef = useRef2(null);
-  return /* @__PURE__ */ React19.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React19.createElement(SectionContent, null, /* @__PURE__ */ React19.createElement(Control, { bind: "width", label: __2("Stroke width", "elementor"), ref: rowRef }, /* @__PURE__ */ React19.createElement(SizeControl, { units, anchorRef: rowRef })), /* @__PURE__ */ React19.createElement(Control, { bind: "color", label: __2("Stroke color", "elementor") }, /* @__PURE__ */ React19.createElement(ColorControl, null))));
+  return /* @__PURE__ */ React19.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React19.createElement(SectionContent, null, /* @__PURE__ */ React19.createElement(Control, { bind: "width", label: __3("Stroke width", "elementor"), ref: rowRef }, /* @__PURE__ */ React19.createElement(SizeControl, { units, anchorRef: rowRef })), /* @__PURE__ */ React19.createElement(Control, { bind: "color", label: __3("Stroke color", "elementor") }, /* @__PURE__ */ React19.createElement(ColorControl, null))));
 });
-var Control = forwardRef2(({ bind, label, children }, ref) => /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React19.createElement(Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React19.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React19.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React19.createElement(Grid, { item: true, xs: 6 }, children))));
+var Control = forwardRef2(({ bind, label, children }, ref) => /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React19.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React19.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 6 }, children))));
 
 // src/controls/box-shadow-repeater-control.tsx
 import * as React26 from "react";
 import { useRef as useRef3 } from "react";
 import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
-import { FormLabel as FormLabel2, Grid as Grid3, UnstableColorIndicator } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { FormLabel as FormLabel2, Grid as Grid4, UnstableColorIndicator } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/components/popover-content.tsx
 import * as React20 from "react";
@@ -934,9 +991,9 @@ var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ Reac
 // src/components/popover-grid-container.tsx
 import { forwardRef as forwardRef3 } from "react";
 import * as React21 from "react";
-import { Grid as Grid2 } from "@elementor/ui";
+import { Grid as Grid3 } from "@elementor/ui";
 var PopoverGridContainer = forwardRef3(
-  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React21.createElement(Grid2, { container: true, gap, alignItems, flexWrap, ref }, children)
+  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React21.createElement(Grid3, { container: true, gap, alignItems, flexWrap, ref }, children)
 );
 
 // src/components/repeater.tsx
@@ -951,11 +1008,11 @@ import {
   Popover as Popover2,
   Stack as Stack5,
   Tooltip,
-  Typography,
+  Typography as Typography2,
   UnstableTag,
   usePopupState as usePopupState3
 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/control-adornments/control-adornments.tsx
 import * as React23 from "react";
@@ -964,7 +1021,7 @@ import * as React23 from "react";
 import * as React22 from "react";
 import { createContext as createContext5, useContext as useContext5 } from "react";
 var Context2 = createContext5(null);
-var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React22.createElement(Context2.Provider, { value: { items } }, children);
+var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React22.createElement(Context2.Provider, { value: { items: items2 } }, children);
 var useControlAdornments = () => {
   const context = useContext5(Context2);
   return context?.items ?? [];
@@ -972,11 +1029,11 @@ var useControlAdornments = () => {
 
 // src/control-adornments/control-adornments.tsx
 function ControlAdornments() {
-  const items = useControlAdornments();
-  if (items?.length === 0) {
+  const items2 = useControlAdornments();
+  if (items2?.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, items.map(({ Adornment, id }) => /* @__PURE__ */ React23.createElement(Adornment, { key: id })));
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React23.createElement(Adornment, { key: id })));
 }
 
 // src/locations.ts
@@ -1077,16 +1134,17 @@ var Repeater = ({
   setValues: setRepeaterValues,
   showDuplicate = true,
   showToggle = true,
-  isSortable = true
+  isSortable = true,
+  collectionPropUtil
 }) => {
   const [openItem, setOpenItem] = useState4(EMPTY_OPEN_ITEM);
-  const [items, setItems] = useSyncExternalState({
+  const [items2, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = useState4(items.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = useState4(items2.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -1094,10 +1152,10 @@ var Repeater = ({
     const newItem = structuredClone(itemSettings.initialValues);
     const newKey = generateNextKey(uniqueKeys);
     if (addToBottom) {
-      setItems([...items, newItem]);
+      setItems([...items2, newItem]);
       setUniqueKeys([...uniqueKeys, newKey]);
     } else {
-      setItems([newItem, ...items]);
+      setItems([newItem, ...items2]);
       setUniqueKeys([newKey, ...uniqueKeys]);
     }
     if (openOnAdd) {
@@ -1105,10 +1163,10 @@ var Repeater = ({
     }
   };
   const duplicateRepeaterItem = (index) => {
-    const newItem = structuredClone(items[index]);
+    const newItem = structuredClone(items2[index]);
     const newKey = generateNextKey(uniqueKeys);
     const atPosition = 1 + index;
-    setItems([...items.slice(0, atPosition), newItem, ...items.slice(atPosition)]);
+    setItems([...items2.slice(0, atPosition), newItem, ...items2.slice(atPosition)]);
     setUniqueKeys([...uniqueKeys.slice(0, atPosition), newKey, ...uniqueKeys.slice(atPosition)]);
   };
   const removeRepeaterItem = (index) => {
@@ -1118,14 +1176,14 @@ var Repeater = ({
       })
     );
     setItems(
-      items.filter((_, pos) => {
+      items2.filter((_, pos) => {
         return pos !== index;
       })
     );
   };
   const toggleDisableRepeaterItem = (index) => {
     setItems(
-      items.map((value, pos) => {
+      items2.map((value, pos) => {
         if (pos === index) {
           const { disabled: propDisabled, ...rest } = value;
           return { ...rest, ...propDisabled ? {} : { disabled: true } };
@@ -1152,7 +1210,7 @@ var Repeater = ({
       gap: 1,
       sx: { marginInlineEnd: -0.75 }
     },
-    /* @__PURE__ */ React25.createElement(Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
+    /* @__PURE__ */ React25.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary" }, label),
     /* @__PURE__ */ React25.createElement(ControlAdornments, null),
     /* @__PURE__ */ React25.createElement(
       IconButton,
@@ -1161,12 +1219,12 @@ var Repeater = ({
         sx: { ml: "auto" },
         disabled,
         onClick: addRepeaterItem,
-        "aria-label": __3("Add item", "elementor")
+        "aria-label": __4("Add item", "elementor")
       },
       /* @__PURE__ */ React25.createElement(PlusIcon, { fontSize: SIZE })
     )
   ), 0 < uniqueKeys.length && /* @__PURE__ */ React25.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
-    const value = items[index];
+    const value = items2[index];
     if (!value) {
       return null;
     }
@@ -1183,7 +1241,8 @@ var Repeater = ({
         openOnMount: openOnAdd && openItem === key,
         onOpen: () => setOpenItem(EMPTY_OPEN_ITEM),
         showDuplicate,
-        showToggle
+        showToggle,
+        collectionPropUtil
       },
       (props) => /* @__PURE__ */ React25.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
@@ -1201,13 +1260,14 @@ var RepeaterItem = ({
   onOpen,
   showDuplicate,
   showToggle,
-  disabled
+  disabled,
+  collectionPropUtil
 }) => {
   const [anchorEl, setAnchorEl] = useState4(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = __3("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __3("Show", "elementor") : __3("Hide", "elementor");
-  const removeLabel = __3("Remove", "elementor");
+  const duplicateLabel = __4("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __4("Show", "elementor") : __4("Hide", "elementor");
+  const removeLabel = __4("Remove", "elementor");
   return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
     UnstableTag,
     {
@@ -1217,7 +1277,7 @@ var RepeaterItem = ({
       fullWidth: true,
       ref: setRef,
       variant: "outlined",
-      "aria-label": __3("Open item", "elementor"),
+      "aria-label": __4("Open item", "elementor"),
       ...bindTrigger2(popoverState),
       startIcon,
       actions: /* @__PURE__ */ React25.createElement(React25.Fragment, null, showDuplicate && /* @__PURE__ */ React25.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React25.createElement(CopyIcon, { fontSize: SIZE }))), showToggle && /* @__PURE__ */ React25.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React25.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React25.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React25.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React25.createElement(XIcon, { fontSize: SIZE }))))
@@ -1236,7 +1296,7 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React25.createElement(Box2, null, children({ anchorEl }))
+    /* @__PURE__ */ React25.createElement(Box2, null, children({ anchorEl, collectionPropUtil }))
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
@@ -1260,14 +1320,14 @@ var usePopover = (openOnMount, onOpen) => {
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue, disabled } = useBoundProp(boxShadowPropTypeUtil);
-  return /* @__PURE__ */ React26.createElement(PropProvider, { propType, value, setValue, disabled }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React26.createElement(
     Repeater,
     {
       openOnAdd: true,
       disabled,
       values: value ?? [],
       setValues: setValue,
-      label: __4("Box shadow", "elementor"),
+      label: __5("Box shadow", "elementor"),
       itemSettings: {
         Icon: ItemIcon,
         Label: ItemLabel,
@@ -1284,22 +1344,22 @@ var ItemContent = ({ anchorEl, bind }) => {
 var Content = ({ anchorEl }) => {
   const context = useBoundProp(shadowPropTypeUtil);
   const rowRef = [useRef3(null), useRef3(null)];
-  return /* @__PURE__ */ React26.createElement(PropProvider, { ...context }, /* @__PURE__ */ React26.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(Control2, { bind: "color", label: __4("Color", "elementor") }, /* @__PURE__ */ React26.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React26.createElement(Control2, { bind: "position", label: __4("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(PropProvider, { ...context }, /* @__PURE__ */ React26.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(Control2, { bind: "color", label: __5("Color", "elementor") }, /* @__PURE__ */ React26.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React26.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React26.createElement(
     SelectControl,
     {
       options: [
-        { label: __4("Inset", "elementor"), value: "inset" },
-        { label: __4("Outset", "elementor"), value: null }
+        { label: __5("Inset", "elementor"), value: "inset" },
+        { label: __5("Outset", "elementor"), value: null }
       ]
     }
-  ))), /* @__PURE__ */ React26.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React26.createElement(Control2, { bind: "hOffset", label: __4("Horizontal", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React26.createElement(Control2, { bind: "vOffset", label: __4("Vertical", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React26.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React26.createElement(Control2, { bind: "blur", label: __4("Blur", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React26.createElement(Control2, { bind: "spread", label: __4("Spread", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[1] })))));
+  ))), /* @__PURE__ */ React26.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React26.createElement(Control2, { bind: "hOffset", label: __5("Horizontal", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React26.createElement(Control2, { bind: "vOffset", label: __5("Vertical", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React26.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React26.createElement(Control2, { bind: "blur", label: __5("Blur", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React26.createElement(Control2, { bind: "spread", label: __5("Spread", "elementor") }, /* @__PURE__ */ React26.createElement(SizeControl, { anchorRef: rowRef[1] })))));
 };
 var Control2 = ({
   label,
   bind,
   children,
   sx
-}) => /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React26.createElement(Grid3, { item: true, xs: 6, sx }, /* @__PURE__ */ React26.createElement(Grid3, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid3, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React26.createElement(Grid3, { item: true, xs: 12 }, children))));
+}) => /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React26.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React26.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React26.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 || {};
@@ -1343,16 +1403,24 @@ var initialShadow = {
 };
 
 // src/controls/filter-repeater-control.tsx
-import * as React28 from "react";
-import { useRef as useRef4 } from "react";
+import * as React30 from "react";
+import { useRef as useRef5 } from "react";
 import {
   blurFilterPropTypeUtil,
   brightnessFilterPropTypeUtil,
-  filterPropTypeUtil
+  contrastFilterPropTypeUtil,
+  dropShadowFilterPropTypeUtil,
+  filterPropTypeUtil,
+  grayscaleFilterPropTypeUtil,
+  hueRotateFilterPropTypeUtil,
+  invertFilterPropTypeUtil,
+  saturateFilterPropTypeUtil,
+  sepiaFilterPropTypeUtil
 } from "@elementor/editor-props";
+import { backdropFilterPropTypeUtil } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
-import { Box as Box3, Grid as Grid4, Select as Select2 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { Box as Box4, Grid as Grid6, Select as Select2 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/components/control-label.tsx
 import * as React27 from "react";
@@ -1361,39 +1429,145 @@ var ControlLabel = ({ children }) => {
   return /* @__PURE__ */ React27.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React27.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React27.createElement(ControlAdornments, null));
 };
 
+// src/controls/filter-control/drop-shadow-item-content.tsx
+import * as React28 from "react";
+import { useRef as useRef4 } from "react";
+import { Grid as Grid5 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+var items = [
+  {
+    bind: "xAxis",
+    label: __6("X-axis", "elementor"),
+    rowIndex: 0
+  },
+  {
+    bind: "yAxis",
+    label: __6("Y-axis", "elementor"),
+    rowIndex: 0
+  },
+  {
+    bind: "blur",
+    label: __6("Blur", "elementor"),
+    rowIndex: 1
+  },
+  {
+    bind: "color",
+    label: __6("Color", "elementor"),
+    rowIndex: 1
+  }
+];
+var DropShadowItemContent = ({
+  propType,
+  units: units2,
+  anchorEl
+}) => {
+  const context = useBoundProp(propType);
+  const rowRefs = [useRef4(null), useRef4(null)];
+  return /* @__PURE__ */ React28.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React28.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React28.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React28.createElement(Grid5, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React28.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRefs[item.rowIndex], units: units2, defaultUnit: "px" }))))));
+};
+
+// src/controls/filter-control/drop-shadow-item-label.tsx
+import * as React29 from "react";
+import { Box as Box3 } from "@elementor/ui";
+var DropShadowItemLabel = ({ value }) => {
+  const { xAxis, yAxis, blur } = value.value;
+  const xValue = `${xAxis?.value?.size ?? 0}${xAxis?.value?.unit ?? "px"}`;
+  const yValue = `${yAxis?.value?.size ?? 0}${yAxis?.value?.unit ?? "px"}`;
+  const blurValue = `${blur?.value?.size ?? 10}${blur?.value?.unit ?? "px"}`;
+  return /* @__PURE__ */ React29.createElement(Box3, { component: "span" }, /* @__PURE__ */ React29.createElement(Box3, { component: "span", style: { textTransform: "capitalize" } }, "Drop shadow:"), `${xValue} ${yValue} ${blurValue}`);
+};
+
 // src/controls/filter-repeater-control.tsx
 var DEFAULT_FILTER_KEY = "blur";
 var filterConfig = {
   blur: {
     defaultValue: { $$type: "radius", radius: { $$type: "size", value: { size: 0, unit: "px" } } },
-    name: __5("Blur", "elementor"),
-    valueName: __5("Radius", "elementor"),
+    name: __7("Blur", "elementor"),
+    valueName: __7("Radius", "elementor"),
     propType: blurFilterPropTypeUtil,
     units: defaultUnits.filter((unit) => unit !== "%")
   },
+  "drop-shadow": {
+    defaultValue: {
+      $$type: "drop-shadow",
+      value: {
+        xAxis: { $$type: "size", value: { size: 0, unit: "px" } },
+        yAxis: { $$type: "size", value: { size: 0, unit: "px" } },
+        blur: { $$type: "size", value: { size: 10, unit: "px" } },
+        color: { $$type: "color", value: "rgba(0, 0, 0, 1)" }
+      }
+    },
+    name: __7("Drop shadow", "elementor"),
+    valueName: __7("Drop-shadow", "elementor"),
+    propType: dropShadowFilterPropTypeUtil,
+    units: defaultUnits.filter((unit) => unit !== "%")
+  },
   brightness: {
     defaultValue: { $$type: "amount", amount: { $$type: "size", value: { size: 100, unit: "%" } } },
-    name: __5("Brightness", "elementor"),
-    valueName: __5("Amount", "elementor"),
+    name: __7("Brightness", "elementor"),
+    valueName: __7("Amount", "elementor"),
     propType: brightnessFilterPropTypeUtil,
     units: ["%"]
+  },
+  contrast: {
+    defaultValue: { $$type: "contrast", contrast: { $$type: "size", value: { size: 100, unit: "%" } } },
+    name: __7("Contrast", "elementor"),
+    valueName: __7("Amount", "elementor"),
+    propType: contrastFilterPropTypeUtil,
+    units: ["%"]
+  },
+  "hue-rotate": {
+    defaultValue: { $$type: "hue-rotate", "hue-rotate": { $$type: "size", value: { size: 0, unit: "deg" } } },
+    name: __7("Hue Rotate", "elementor"),
+    valueName: __7("Angle", "elementor"),
+    propType: hueRotateFilterPropTypeUtil,
+    units: ["deg", "rad", "grad", "turn"]
+  },
+  saturate: {
+    defaultValue: { $$type: "saturate", saturate: { $$type: "size", value: { size: 100, unit: "%" } } },
+    name: __7("Saturate", "elementor"),
+    valueName: __7("Amount", "elementor"),
+    propType: saturateFilterPropTypeUtil,
+    units: ["%"]
+  },
+  grayscale: {
+    defaultValue: { $$type: "grayscale", grayscale: { $$type: "size", value: { size: 0, unit: "%" } } },
+    name: __7("Grayscale", "elementor"),
+    valueName: __7("Amount", "elementor"),
+    propType: grayscaleFilterPropTypeUtil,
+    units: ["%"]
+  },
+  invert: {
+    defaultValue: { $$type: "invert", invert: { $$type: "size", value: { size: 0, unit: "%" } } },
+    name: __7("Invert", "elementor"),
+    valueName: __7("Amount", "elementor"),
+    propType: invertFilterPropTypeUtil,
+    units: ["%"]
+  },
+  sepia: {
+    defaultValue: { $$type: "sepia", sepia: { $$type: "size", value: { size: 0, unit: "%" } } },
+    name: __7("Sepia", "elementor"),
+    valueName: __7("Amount", "elementor"),
+    propType: sepiaFilterPropTypeUtil,
+    units: ["%"]
   }
 };
 var filterKeys = Object.keys(filterConfig);
-var singleSizeFilterNames = filterKeys.filter((name) => {
-  const filter = filterConfig[name].defaultValue;
-  return filter[filter.$$type].$$type === "size";
-});
-var FilterRepeaterControl = createControl(() => {
-  const { propType, value: filterValues, setValue, disabled } = useBoundProp(filterPropTypeUtil);
-  return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React28.createElement(
+var isSingleSize = (key) => {
+  return !["drop-shadow"].includes(key);
+};
+var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
+  const [propUtil, label] = filterPropName === "backdrop-filter" ? [backdropFilterPropTypeUtil, __7("Backdrop Filters", "elementor")] : [filterPropTypeUtil, __7("Filters", "elementor")];
+  const { propType, value: filterValues, setValue, disabled } = useBoundProp(propUtil);
+  return /* @__PURE__ */ React30.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React30.createElement(
     Repeater,
     {
       openOnAdd: true,
       disabled,
       values: filterValues ?? [],
       setValues: setValue,
-      label: __5("Filter", "elementor"),
+      label,
+      collectionPropUtil: propUtil,
       itemSettings: {
         Icon: ItemIcon2,
         Label: ItemLabel2,
@@ -1406,21 +1580,24 @@ var FilterRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemIcon2 = () => /* @__PURE__ */ React28.createElement(React28.Fragment, null);
-var ItemLabel2 = (props) => {
-  const { $$type } = props.value;
-  return singleSizeFilterNames.includes($$type) && /* @__PURE__ */ React28.createElement(SingleSizeItemLabel, { value: props.value });
+var ItemIcon2 = () => /* @__PURE__ */ React30.createElement(React30.Fragment, null);
+var ItemLabel2 = ({ value }) => {
+  return isSingleSize(value.$$type) ? /* @__PURE__ */ React30.createElement(SingleSizeItemLabel, { value }) : /* @__PURE__ */ React30.createElement(DropShadowItemLabel, { value });
 };
 var SingleSizeItemLabel = ({ value }) => {
   const { $$type, value: sizeValue } = value;
   const { $$type: key } = filterConfig[$$type].defaultValue;
   const defaultUnit = filterConfig[$$type].defaultValue[key].value.unit;
   const { unit, size } = sizeValue[key]?.value ?? { unit: defaultUnit, size: 0 };
-  const label = /* @__PURE__ */ React28.createElement(Box3, { component: "span", style: { textTransform: "capitalize" } }, value.$$type, ":");
-  return /* @__PURE__ */ React28.createElement(Box3, { component: "span" }, label, unit !== "custom" ? ` ${size ?? 0}${unit ?? defaultUnit}` : size);
+  const label = /* @__PURE__ */ React30.createElement(Box4, { component: "span", style: { textTransform: "capitalize" } }, value.$$type, ":");
+  return /* @__PURE__ */ React30.createElement(Box4, { component: "span" }, label, unit !== "custom" ? ` ${size ?? 0}${unit ?? defaultUnit}` : size);
 };
-var ItemContent2 = ({ bind }) => {
-  const { value: filterValues, setValue } = useBoundProp(filterPropTypeUtil);
+var ItemContent2 = ({
+  bind,
+  collectionPropUtil,
+  anchorEl
+}) => {
+  const { value: filterValues, setValue } = useBoundProp(collectionPropUtil ?? filterPropTypeUtil);
   const itemIndex = parseInt(bind, 10);
   const item = filterValues?.[itemIndex];
   const handleChange = (e) => {
@@ -1428,11 +1605,11 @@ var ItemContent2 = ({ bind }) => {
     const filterType = e.target.value;
     newFilterValues[itemIndex] = {
       $$type: filterType,
-      value: filterConfig[filterType].defaultValue
+      value: { ...filterConfig[filterType].defaultValue }
     };
     setValue(newFilterValues);
   };
-  return /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React28.createElement(PopoverGridContainer, null, /* @__PURE__ */ React28.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, __5("Filter", "elementor"))), /* @__PURE__ */ React28.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, __7("Filter", "elementor"))), /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(
     Select2,
     {
       sx: { overflow: "hidden" },
@@ -1441,27 +1618,29 @@ var ItemContent2 = ({ bind }) => {
       onChange: handleChange,
       fullWidth: true
     },
-    filterKeys.map((filterKey) => /* @__PURE__ */ React28.createElement(MenuListItem3, { key: filterKey, value: filterKey }, filterConfig[filterKey].name))
-  ))), /* @__PURE__ */ React28.createElement(Content2, { filterType: item?.$$type })));
+    filterKeys.map((filterKey) => /* @__PURE__ */ React30.createElement(MenuListItem3, { key: filterKey, value: filterKey }, filterConfig[filterKey].name))
+  ))), /* @__PURE__ */ React30.createElement(Content2, { filterType: item?.$$type, anchorEl })));
 };
-var Content2 = ({ filterType }) => {
-  return singleSizeFilterNames.includes(filterType) && /* @__PURE__ */ React28.createElement(SingleSizeItemContent, { filterType });
+var Content2 = ({ filterType, anchorEl }) => {
+  const { propType, units: units2 = [] } = filterConfig[filterType];
+  return isSingleSize(filterType) ? /* @__PURE__ */ React30.createElement(SingleSizeItemContent, { filterType }) : /* @__PURE__ */ React30.createElement(DropShadowItemContent, { propType, units: units2, anchorEl });
 };
 var SingleSizeItemContent = ({ filterType }) => {
   const { propType, valueName, defaultValue, units: units2 } = filterConfig[filterType];
   const { $$type } = defaultValue;
   const context = useBoundProp(propType);
-  const rowRef = useRef4(null);
-  return /* @__PURE__ */ React28.createElement(PropProvider, { ...context }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: $$type }, /* @__PURE__ */ React28.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React28.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, valueName)), /* @__PURE__ */ React28.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef, units: units2 })))));
+  const rowRef = useRef5(null);
+  const defaultUnit = defaultValue[$$type].value.unit;
+  return /* @__PURE__ */ React30.createElement(PropProvider, { ...context }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: $$type }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, valueName)), /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(SizeControl, { anchorRef: rowRef, units: units2, defaultUnit })))));
 };
 
 // src/controls/toggle-control.tsx
-import * as React31 from "react";
+import * as React33 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
-import * as React30 from "react";
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState5 } from "react";
+import * as React32 from "react";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef6, useState as useState5 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
@@ -1470,19 +1649,19 @@ import {
   styled as styled3,
   ToggleButton,
   ToggleButtonGroup,
-  Typography as Typography2,
+  Typography as Typography3,
   useTheme
 } from "@elementor/ui";
 
 // src/components/conditional-tooltip.tsx
-import * as React29 from "react";
+import * as React31 from "react";
 import { Tooltip as Tooltip2 } from "@elementor/ui";
 var ConditionalTooltip = ({
   showTooltip,
   children,
   label
 }) => {
-  return showTooltip && label ? /* @__PURE__ */ React29.createElement(Tooltip2, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
+  return showTooltip && label ? /* @__PURE__ */ React31.createElement(Tooltip2, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
 };
 
 // src/components/control-toggle-button-group.tsx
@@ -1506,15 +1685,15 @@ var ControlToggleButtonGroup = ({
   size = "tiny",
   value,
   onChange,
-  items,
+  items: items2,
   maxItems,
   exclusive = false,
   fullWidth = false,
   disabled
 }) => {
-  const shouldSliceItems = exclusive && maxItems !== void 0 && items.length > maxItems;
-  const menuItems = shouldSliceItems ? items.slice(maxItems - 1) : [];
-  const fixedItems = shouldSliceItems ? items.slice(0, maxItems - 1) : items;
+  const shouldSliceItems = exclusive && maxItems !== void 0 && items2.length > maxItems;
+  const menuItems = shouldSliceItems ? items2.slice(maxItems - 1) : [];
+  const fixedItems = shouldSliceItems ? items2.slice(0, maxItems - 1) : items2;
   const isRtl = "rtl" === useTheme().direction;
   const handleChange = (_, newValue) => {
     onChange(newValue);
@@ -1525,7 +1704,7 @@ var ControlToggleButtonGroup = ({
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
     return `repeat(${itemsCount}, minmax(0, 25%)) ${templateColumnsSuffix}`;
   }, [menuItems?.length, fixedItems.length]);
-  return /* @__PURE__ */ React30.createElement(ControlActions, null, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
     StyledToggleButtonGroup,
     {
       justify,
@@ -1540,16 +1719,16 @@ var ControlToggleButtonGroup = ({
         width: `100%`
       }
     },
-    fixedItems.map(({ label, value: buttonValue, renderContent: Content5, showTooltip }) => /* @__PURE__ */ React30.createElement(
+    fixedItems.map(({ label, value: buttonValue, renderContent: Content5, showTooltip }) => /* @__PURE__ */ React32.createElement(
       ConditionalTooltip,
       {
         key: buttonValue,
         label,
         showTooltip: showTooltip || false
       },
-      /* @__PURE__ */ React30.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React30.createElement(Content5, { size }))
+      /* @__PURE__ */ React32.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React32.createElement(Content5, { size }))
     )),
-    menuItems.length && exclusive && /* @__PURE__ */ React30.createElement(
+    menuItems.length && exclusive && /* @__PURE__ */ React32.createElement(
       SplitButtonGroup,
       {
         size,
@@ -1564,13 +1743,13 @@ var ControlToggleButtonGroup = ({
 var SplitButtonGroup = ({
   size = "tiny",
   onChange,
-  items,
+  items: items2,
   fullWidth,
   value
 }) => {
-  const previewButton = usePreviewButton(items, value);
+  const previewButton = usePreviewButton(items2, value);
   const [isMenuOpen, setIsMenuOpen] = useState5(false);
-  const menuButtonRef = useRef5(null);
+  const menuButtonRef = useRef6(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -1583,7 +1762,7 @@ var SplitButtonGroup = ({
     const shouldRemove = newValue === value;
     onChange(shouldRemove ? null : newValue);
   };
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
     ToggleButton,
     {
       value: previewButton.value,
@@ -1597,7 +1776,7 @@ var SplitButtonGroup = ({
       ref: menuButtonRef
     },
     previewButton.renderContent({ size })
-  ), /* @__PURE__ */ React30.createElement(
+  ), /* @__PURE__ */ React32.createElement(
     ToggleButton,
     {
       size,
@@ -1608,8 +1787,8 @@ var SplitButtonGroup = ({
       ref: menuButtonRef,
       value: "__chevron-icon-button__"
     },
-    /* @__PURE__ */ React30.createElement(ChevronDownIcon, { fontSize: size })
-  ), /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React32.createElement(ChevronDownIcon, { fontSize: size })
+  ), /* @__PURE__ */ React32.createElement(
     Menu2,
     {
       open: isMenuOpen,
@@ -1627,27 +1806,27 @@ var SplitButtonGroup = ({
         mt: 0.5
       }
     },
-    items.map(({ label, value: buttonValue }) => /* @__PURE__ */ React30.createElement(
+    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React32.createElement(
       MenuItem,
       {
         key: buttonValue,
         selected: buttonValue === value,
         onClick: () => onMenuItemClick(buttonValue)
       },
-      /* @__PURE__ */ React30.createElement(ListItemText, null, /* @__PURE__ */ React30.createElement(Typography2, { sx: { fontSize: "14px" } }, label))
+      /* @__PURE__ */ React32.createElement(ListItemText, null, /* @__PURE__ */ React32.createElement(Typography3, { sx: { fontSize: "14px" } }, label))
     ))
   ));
 };
-var usePreviewButton = (items, value) => {
+var usePreviewButton = (items2, value) => {
   const [previewButton, setPreviewButton] = useState5(
-    items.find((item) => item.value === value) ?? items[0]
+    items2.find((item) => item.value === value) ?? items2[0]
   );
   useEffect4(() => {
-    const selectedButton = items.find((item) => item.value === value);
+    const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
     }
-  }, [items, value]);
+  }, [items2, value]);
   return previewButton;
 };
 
@@ -1674,7 +1853,7 @@ var ToggleControl = createControl(
       fullWidth,
       size
     };
-    return exclusive ? /* @__PURE__ */ React31.createElement(
+    return exclusive ? /* @__PURE__ */ React33.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1683,7 +1862,7 @@ var ToggleControl = createControl(
         disabled,
         exclusive: true
       }
-    ) : /* @__PURE__ */ React31.createElement(
+    ) : /* @__PURE__ */ React33.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1697,7 +1876,7 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-import * as React32 from "react";
+import * as React34 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField5 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
@@ -1720,7 +1899,7 @@ var NumberControl = createControl(
       const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
       setValue(Math.min(Math.max(formattedValue, min), max));
     };
-    return /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
+    return /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
       TextField5,
       {
         size: "tiny",
@@ -1742,15 +1921,15 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-import * as React33 from "react";
-import { useId as useId2, useRef as useRef6 } from "react";
+import * as React35 from "react";
+import { useId as useId2, useRef as useRef7 } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
 import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
-import { bindPopover as bindPopover3, bindToggle, Grid as Grid5, Popover as Popover3, Stack as Stack7, ToggleButton as ToggleButton2, Tooltip as Tooltip3, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
-var isEqualSizes = (propValue, items) => {
+import { bindPopover as bindPopover3, bindToggle, Grid as Grid7, Popover as Popover3, Stack as Stack7, ToggleButton as ToggleButton2, Tooltip as Tooltip3, usePopupState as usePopupState4 } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
+var isEqualSizes = (propValue, items2) => {
   const values = Object.values(propValue);
-  if (values.length !== items.length) {
+  if (values.length !== items2.length) {
     return false;
   }
   const [firstValue, ...restValues] = values;
@@ -1762,7 +1941,7 @@ function EqualUnequalSizesControl({
   label,
   icon,
   tooltipLabel,
-  items,
+  items: items2,
   multiSizePropTypeUtil
 }) {
   const popupId = useId2();
@@ -1774,12 +1953,12 @@ function EqualUnequalSizesControl({
     disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
   const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil2);
-  const rowRefs = [useRef6(null), useRef6(null)];
+  const rowRefs = [useRef7(null), useRef7(null)];
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
     }
-    return items.reduce(
+    return items2.reduce(
       (acc, { bind }) => ({ ...acc, [bind]: sizePropTypeUtil2.create(sizeValue) }),
       {}
     );
@@ -1789,7 +1968,7 @@ function EqualUnequalSizesControl({
       ...multiSizeValue ?? splitEqualValue(),
       ...newValue
     };
-    const isEqual = isEqualSizes(newMappedValues, items);
+    const isEqual = isEqualSizes(newMappedValues, items2);
     if (isEqual) {
       return setSizeValue(Object.values(newMappedValues)[0]?.value);
     }
@@ -1803,13 +1982,13 @@ function EqualUnequalSizesControl({
   };
   const isShowingGeneralIndicator = !isExperimentActive2("e_v_3_30") || !popupState.isOpen;
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React33.createElement(Grid5, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React33.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React33.createElement(ControlLabel, null, label)), /* @__PURE__ */ React33.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React35.createElement(Grid7, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React35.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React35.createElement(ControlLabel, null, label)), /* @__PURE__ */ React35.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React35.createElement(
     SizeControl,
     {
-      placeholder: isMixed ? __6("Mixed", "elementor") : void 0,
+      placeholder: isMixed ? __8("Mixed", "elementor") : void 0,
       anchorRef: rowRefs[0]
     }
-  ), /* @__PURE__ */ React33.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React33.createElement(
+  ), /* @__PURE__ */ React35.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React35.createElement(
     ToggleButton2,
     {
       size: "tiny",
@@ -1820,7 +1999,7 @@ function EqualUnequalSizesControl({
       "aria-label": tooltipLabel
     },
     icon
-  ))))), /* @__PURE__ */ React33.createElement(
+  ))))), /* @__PURE__ */ React35.createElement(
     Popover3,
     {
       disablePortal: true,
@@ -1838,31 +2017,31 @@ function EqualUnequalSizesControl({
         paper: { sx: { mt: 0.5, width: rowRefs[0].current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React35.createElement(
       PropProvider,
       {
         propType: multiSizePropType,
         value: getMultiSizeValues(),
         setValue: setNestedProp,
-        disabled: multiSizeDisabled
+        isDisabled: () => multiSizeDisabled
       },
-      /* @__PURE__ */ React33.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React33.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React33.createElement(MultiSizeValueControl, { item: items[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React33.createElement(MultiSizeValueControl, { item: items[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React33.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React33.createElement(MultiSizeValueControl, { item: items[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React33.createElement(MultiSizeValueControl, { item: items[3], rowRef: rowRefs[2] })))
+      /* @__PURE__ */ React35.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React35.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React35.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React35.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React35.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React35.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React35.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
     )
   ));
 }
 var MultiSizeValueControl = ({ item, rowRef }) => {
   const isUsingNestedProps = isExperimentActive2("e_v_3_30");
-  return /* @__PURE__ */ React33.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React33.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(Grid5, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React33.createElement(Grid5, { item: true, xs: 12 }, isUsingNestedProps ? /* @__PURE__ */ React33.createElement(ControlLabel, null, item.label) : /* @__PURE__ */ React33.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React33.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React33.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
+  return /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React35.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(Grid7, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React35.createElement(Grid7, { item: true, xs: 12 }, isUsingNestedProps ? /* @__PURE__ */ React35.createElement(ControlLabel, null, item.label) : /* @__PURE__ */ React35.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React35.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
 };
 
 // src/controls/linked-dimensions-control.tsx
-import * as React34 from "react";
-import { useRef as useRef7 } from "react";
+import * as React36 from "react";
+import { useRef as useRef8 } from "react";
 import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
 import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
-import { Grid as Grid6, Stack as Stack8, ToggleButton as ToggleButton3, Tooltip as Tooltip4 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { Grid as Grid8, Stack as Stack8, ToggleButton as ToggleButton3, Tooltip as Tooltip4 } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
 var LinkedDimensionsControl = createControl(
   ({
     label,
@@ -1870,7 +2049,7 @@ var LinkedDimensionsControl = createControl(
     extendedOptions
   }) => {
     const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil3);
-    const gridRowRefs = [useRef7(null), useRef7(null)];
+    const gridRowRefs = [useRef8(null), useRef8(null)];
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
@@ -1894,18 +2073,18 @@ var LinkedDimensionsControl = createControl(
     };
     const tooltipLabel = label.toLowerCase();
     const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-    const linkedLabel = __7("Link %s", "elementor").replace("%s", tooltipLabel);
-    const unlinkedLabel = __7("Unlink %s", "elementor").replace("%s", tooltipLabel);
+    const linkedLabel = __9("Link %s", "elementor").replace("%s", tooltipLabel);
+    const unlinkedLabel = __9("Unlink %s", "elementor").replace("%s", tooltipLabel);
     const disabled = sizeDisabled || dimensionsDisabled;
-    return /* @__PURE__ */ React34.createElement(
+    return /* @__PURE__ */ React36.createElement(
       PropProvider,
       {
         propType,
         value: dimensionsValue,
         setValue: setDimensionsValue,
-        disabled
+        isDisabled: () => disabled
       },
-      /* @__PURE__ */ React34.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React34.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React34.createElement(ControlLabel, null, label), /* @__PURE__ */ React34.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React36.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React36.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React36.createElement(ControlLabel, null, label), /* @__PURE__ */ React36.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React36.createElement(
         ToggleButton3,
         {
           "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -1916,9 +2095,9 @@ var LinkedDimensionsControl = createControl(
           onChange: onLinkToggle,
           disabled
         },
-        /* @__PURE__ */ React34.createElement(LinkedIcon, { fontSize: "tiny" })
+        /* @__PURE__ */ React36.createElement(LinkedIcon, { fontSize: "tiny" })
       ))),
-      getCssMarginProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React34.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React34.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React34.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(Label, { ...props })), /* @__PURE__ */ React34.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(
+      getCssMarginProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React36.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React36.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(Label, { ...props })), /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(
         Control3,
         {
           bind: props.bind,
@@ -1939,60 +2118,60 @@ var Control3 = ({
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React34.createElement(SizeControl, { startIcon, extendedOptions, anchorRef });
+    return /* @__PURE__ */ React36.createElement(SizeControl, { startIcon, extendedOptions, anchorRef });
   }
-  return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(SizeControl, { startIcon, extendedOptions, anchorRef }));
+  return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon, extendedOptions, anchorRef }));
 };
 var Label = ({ label, bind }) => {
   const isUsingNestedProps = isExperimentActive3("e_v_3_30");
   if (!isUsingNestedProps) {
-    return /* @__PURE__ */ React34.createElement(ControlFormLabel, null, label);
+    return /* @__PURE__ */ React36.createElement(ControlFormLabel, null, label);
   }
-  return /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(ControlLabel, null, label));
+  return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React36.createElement(ControlLabel, null, label));
 };
 function getCssMarginProps(isSiteRtl) {
   return [
     [
       {
         bind: "block-start",
-        label: __7("Top", "elementor"),
-        icon: /* @__PURE__ */ React34.createElement(SideTopIcon, { fontSize: "tiny" })
+        label: __9("Top", "elementor"),
+        icon: /* @__PURE__ */ React36.createElement(SideTopIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-end",
-        label: isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React34.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React34.createElement(SideRightIcon, { fontSize: "tiny" })
+        label: isSiteRtl ? __9("Left", "elementor") : __9("Right", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React36.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React36.createElement(SideRightIcon, { fontSize: "tiny" })
       }
     ],
     [
       {
         bind: "block-end",
-        label: __7("Bottom", "elementor"),
-        icon: /* @__PURE__ */ React34.createElement(SideBottomIcon, { fontSize: "tiny" })
+        label: __9("Bottom", "elementor"),
+        icon: /* @__PURE__ */ React36.createElement(SideBottomIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-start",
-        label: isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React34.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React34.createElement(SideLeftIcon, { fontSize: "tiny" })
+        label: isSiteRtl ? __9("Right", "elementor") : __9("Left", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React36.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React36.createElement(SideLeftIcon, { fontSize: "tiny" })
       }
     ]
   ];
 }
 
 // src/controls/font-family-control/font-family-control.tsx
-import * as React36 from "react";
+import * as React38 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag as UnstableTag2, usePopupState as usePopupState5 } from "@elementor/ui";
 
 // src/components/font-family-selector.tsx
-import * as React35 from "react";
+import * as React37 from "react";
 import { useEffect as useEffect5, useState as useState6 } from "react";
-import { PopoverHeader, PopoverMenuList, PopoverScrollableContent, PopoverSearch } from "@elementor/editor-ui";
+import { PopoverBody, PopoverHeader, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
 import { TextIcon } from "@elementor/icons";
-import { Box as Box4, Divider as Divider2, Link, Stack as Stack9, Typography as Typography3 } from "@elementor/ui";
+import { Box as Box5, Divider as Divider2, Link, Stack as Stack9, Typography as Typography4 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/controls/font-family-control/enqueue-font.tsx
 var enqueueFont = (fontFamily, context = "editor") => {
@@ -2034,21 +2213,21 @@ var FontFamilySelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__PURE__ */ React35.createElement(Stack9, null, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(PopoverBody, { width: sectionWidth }, /* @__PURE__ */ React37.createElement(
     PopoverHeader,
     {
-      title: __8("Font Family", "elementor"),
+      title: __10("Font Family", "elementor"),
       onClose: handleClose,
-      icon: /* @__PURE__ */ React35.createElement(TextIcon, { fontSize: SIZE2 })
+      icon: /* @__PURE__ */ React37.createElement(TextIcon, { fontSize: SIZE2 })
     }
-  ), /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React37.createElement(
     PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __8("Search", "elementor")
+      placeholder: __10("Search", "elementor")
     }
-  ), /* @__PURE__ */ React35.createElement(Divider2, null), /* @__PURE__ */ React35.createElement(PopoverScrollableContent, { width: sectionWidth }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React37.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React37.createElement(
     FontList,
     {
       fontListItems: filteredFontFamilies,
@@ -2056,7 +2235,7 @@ var FontFamilySelector = ({
       handleClose,
       fontFamily
     }
-  ) : /* @__PURE__ */ React35.createElement(
+  ) : /* @__PURE__ */ React37.createElement(
     Stack9,
     {
       alignItems: "center",
@@ -2066,9 +2245,9 @@ var FontFamilySelector = ({
       gap: 1.5,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React35.createElement(TextIcon, { fontSize: "large" }),
-    /* @__PURE__ */ React35.createElement(Box4, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React35.createElement(Typography3, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React35.createElement(
-      Typography3,
+    /* @__PURE__ */ React37.createElement(TextIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React37.createElement(Box5, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React37.createElement(Typography4, { align: "center", variant: "subtitle2", color: "text.secondary" }, __10("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React37.createElement(
+      Typography4,
       {
         variant: "subtitle2",
         color: "text.secondary",
@@ -2078,20 +2257,20 @@ var FontFamilySelector = ({
           justifyContent: "center"
         }
       },
-      /* @__PURE__ */ React35.createElement("span", null, "\u201C"),
-      /* @__PURE__ */ React35.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
-      /* @__PURE__ */ React35.createElement("span", null, "\u201D.")
+      /* @__PURE__ */ React37.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React37.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
+      /* @__PURE__ */ React37.createElement("span", null, "\u201D.")
     )),
-    /* @__PURE__ */ React35.createElement(
-      Typography3,
+    /* @__PURE__ */ React37.createElement(
+      Typography4,
       {
         align: "center",
         variant: "caption",
         color: "text.secondary",
         sx: { display: "flex", flexDirection: "column" }
       },
-      __8("Try something else.", "elementor"),
-      /* @__PURE__ */ React35.createElement(
+      __10("Try something else.", "elementor"),
+      /* @__PURE__ */ React37.createElement(
         Link,
         {
           color: "secondary",
@@ -2099,10 +2278,10 @@ var FontFamilySelector = ({
           component: "button",
           onClick: () => setSearchValue("")
         },
-        __8("Clear & try again", "elementor")
+        __10("Clear & try again", "elementor")
       )
     )
-  )));
+  ));
 };
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
@@ -2114,7 +2293,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
       }
     });
   }, 100);
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     PopoverMenuList,
     {
       items: fontListItems,
@@ -2136,19 +2315,26 @@ var useDebounce = (fn, delay) => {
 // src/controls/font-family-control/font-family-control.tsx
 var SIZE3 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
-  const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(stringPropTypeUtil5);
+  const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp(stringPropTypeUtil5);
   const popoverState = usePopupState5({ variant: "popover" });
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(ControlActions, null, /* @__PURE__ */ React36.createElement(
+  const isShowingPlaceholder = !fontFamily && placeholder;
+  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(
     UnstableTag2,
     {
       variant: "outlined",
-      label: fontFamily,
-      endIcon: /* @__PURE__ */ React36.createElement(ChevronDownIcon2, { fontSize: SIZE3 }),
+      label: fontFamily || placeholder,
+      endIcon: /* @__PURE__ */ React38.createElement(ChevronDownIcon2, { fontSize: SIZE3 }),
       ...bindTrigger3(popoverState),
       fullWidth: true,
-      disabled
+      disabled,
+      sx: isShowingPlaceholder ? {
+        "& .MuiTag-label": {
+          color: (theme) => theme.palette.text.tertiary
+        },
+        textTransform: "capitalize"
+      } : void 0
     }
-  )), /* @__PURE__ */ React36.createElement(
+  )), /* @__PURE__ */ React38.createElement(
     Popover4,
     {
       disablePortal: true,
@@ -2158,7 +2344,7 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
       sx: { my: 1.5 },
       ...bindPopover4(popoverState)
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React38.createElement(
       FontFamilySelector,
       {
         fontFamilies,
@@ -2172,13 +2358,13 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
 });
 
 // src/controls/url-control.tsx
-import * as React37 from "react";
+import * as React39 from "react";
 import { urlPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField6 } from "@elementor/ui";
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue, disabled } = useBoundProp(urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React37.createElement(ControlActions, null, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(
     TextField6,
     {
       size: "tiny",
@@ -2192,31 +2378,32 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-import * as React39 from "react";
+import * as React42 from "react";
 import { useMemo as useMemo3, useState as useState7 } from "react";
 import { getLinkInLinkRestriction, selectElement } from "@elementor/editor-elements";
 import {
-  booleanPropTypeUtil,
+  booleanPropTypeUtil as booleanPropTypeUtil2,
   linkPropTypeUtil,
   numberPropTypeUtil as numberPropTypeUtil2,
   stringPropTypeUtil as stringPropTypeUtil6,
   urlPropTypeUtil as urlPropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoTipCard } from "@elementor/editor-ui";
+import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { AlertTriangleIcon, MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
-import { Box as Box6, Collapse, Grid as Grid7, IconButton as IconButton3, Infotip, Stack as Stack10, Switch } from "@elementor/ui";
+import { Box as Box7, Collapse, Grid as Grid9, IconButton as IconButton3, Infotip, Stack as Stack10, Switch as Switch2 } from "@elementor/ui";
 import { debounce as debounce2 } from "@elementor/utils";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 
 // src/components/autocomplete.tsx
-import * as React38 from "react";
+import * as React40 from "react";
 import { forwardRef as forwardRef4 } from "react";
 import { XIcon as XIcon2 } from "@elementor/icons";
 import {
   Autocomplete as AutocompleteBase,
-  Box as Box5,
+  Box as Box6,
   IconButton as IconButton2,
   InputAdornment as InputAdornment3,
   TextField as TextField7
@@ -2237,7 +2424,7 @@ var Autocomplete = forwardRef4((props, ref) => {
   const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
   const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
   const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React40.createElement(
     AutocompleteBase,
     {
       ...restProps,
@@ -2255,8 +2442,8 @@ var Autocomplete = forwardRef4((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React38.createElement(Box5, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React38.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React40.createElement(Box6, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React40.createElement(
         TextInput,
         {
           params,
@@ -2279,7 +2466,7 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React40.createElement(
     TextField7,
     {
       ...params,
@@ -2292,7 +2479,7 @@ var TextInput = ({
       },
       InputProps: {
         ...params.InputProps,
-        endAdornment: /* @__PURE__ */ React38.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React40.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -2301,7 +2488,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React38.createElement(InputAdornment3, { position: "end" }, allowClear && /* @__PURE__ */ React38.createElement(IconButton2, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React38.createElement(XIcon2, { fontSize: params.size })));
+}) => /* @__PURE__ */ React40.createElement(InputAdornment3, { position: "end" }, allowClear && /* @__PURE__ */ React40.createElement(IconButton2, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React40.createElement(XIcon2, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -2322,10 +2509,33 @@ function _factoryFilter(newValue, options, minInputLength) {
   );
 }
 
+// src/controls/switch-control.tsx
+import * as React41 from "react";
+import { booleanPropTypeUtil } from "@elementor/editor-props";
+import { Switch } from "@elementor/ui";
+var SwitchControl = createControl(() => {
+  const { value, setValue, disabled } = useBoundProp(booleanPropTypeUtil);
+  const handleChange = (event) => {
+    setValue(event.target.checked);
+  };
+  return /* @__PURE__ */ React41.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(
+    Switch,
+    {
+      checked: !!value,
+      onChange: handleChange,
+      size: "small",
+      disabled,
+      inputProps: {
+        ...disabled ? { style: { opacity: 0 } } : {}
+      }
+    }
+  ));
+});
+
 // src/controls/link-control.tsx
 var SIZE4 = "tiny";
 var learnMoreButton = {
-  label: __9("Learn More", "elementor"),
+  label: __11("Learn More", "elementor"),
   href: "https://go.elementor.com/element-link-inside-link-infotip"
 };
 var LinkControl = createControl((props) => {
@@ -2338,7 +2548,7 @@ var LinkControl = createControl((props) => {
     placeholder,
     minInputLength = 2,
     context: { elementId },
-    label = __9("Link", "elementor")
+    label = __11("Link", "elementor")
   } = props || {};
   const [linkInLinkRestriction, setLinkInLinkRestriction] = useState7(getLinkInLinkRestriction(elementId));
   const [options, setOptions] = useState7(
@@ -2401,7 +2611,7 @@ var LinkControl = createControl((props) => {
     ),
     [endpoint]
   );
-  return /* @__PURE__ */ React39.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React39.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React42.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React42.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React42.createElement(
     Stack10,
     {
       direction: "row",
@@ -2411,17 +2621,17 @@ var LinkControl = createControl((props) => {
         marginInlineEnd: -0.75
       }
     },
-    /* @__PURE__ */ React39.createElement(ControlFormLabel, null, label),
-    /* @__PURE__ */ React39.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React42.createElement(ControlFormLabel, null, label),
+    /* @__PURE__ */ React42.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React42.createElement(
       ToggleIconControl,
       {
         disabled: shouldDisableAddingLink,
         active: isActive,
         onIconClick: onEnabledChange,
-        label: __9("Toggle link", "elementor")
+        label: __11("Toggle link", "elementor")
       }
     ))
-  ), /* @__PURE__ */ React39.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React39.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(
+  ), /* @__PURE__ */ React42.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React42.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React42.createElement(ControlActions, null, /* @__PURE__ */ React42.createElement(
     Autocomplete,
     {
       options,
@@ -2432,22 +2642,31 @@ var LinkControl = createControl((props) => {
       onTextChange,
       minInputLength
     }
-  ))), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React39.createElement(SwitchControl, { disabled: propContext.disabled || !value }))))));
+  ))), /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React42.createElement(Grid9, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React42.createElement(Grid9, { item: true }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, __11("Open in a new tab", "elementor"))), /* @__PURE__ */ React42.createElement(Grid9, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React42.createElement(SwitchControlComponent, { disabled: propContext.disabled || !value }))))))));
 });
 var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
-  return /* @__PURE__ */ React39.createElement(IconButton3, { size: SIZE4, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React39.createElement(MinusIcon, { fontSize: SIZE4 }) : /* @__PURE__ */ React39.createElement(PlusIcon2, { fontSize: SIZE4 }));
+  return /* @__PURE__ */ React42.createElement(IconButton3, { size: SIZE4, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React42.createElement(MinusIcon, { fontSize: SIZE4 }) : /* @__PURE__ */ React42.createElement(PlusIcon2, { fontSize: SIZE4 }));
 };
-var SwitchControl = ({ disabled }) => {
-  const { value = false, setValue } = useBoundProp(booleanPropTypeUtil);
+var SwitchControlComponent = ({ disabled }) => {
+  const { value, setValue } = useBoundProp(booleanPropTypeUtil2);
+  const isVersion331Active = isExperimentActive4("e_v_3_31");
+  if (isVersion331Active) {
+    return /* @__PURE__ */ React42.createElement(SwitchControl, null);
+  }
   const onClick = () => {
     setValue(!value);
   };
-  const inputProps = disabled ? {
-    style: {
-      opacity: 0
+  return /* @__PURE__ */ React42.createElement(
+    Switch2,
+    {
+      checked: value ?? false,
+      onClick,
+      disabled,
+      inputProps: {
+        ...disabled ? { style: { opacity: 0 } } : {}
+      }
     }
-  } : {};
-  return /* @__PURE__ */ React39.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React39.createElement(Grid7, { item: true }, /* @__PURE__ */ React39.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React39.createElement(Grid7, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React39.createElement(Switch, { checked: value, onClick, disabled, inputProps })));
+  );
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -2484,38 +2703,38 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
       selectElement(elementId);
     }
   };
-  return shouldRestrict && isVisible ? /* @__PURE__ */ React39.createElement(
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React42.createElement(
     Infotip,
     {
       placement: "right",
-      content: /* @__PURE__ */ React39.createElement(
+      content: /* @__PURE__ */ React42.createElement(
         InfoTipCard,
         {
           content: INFOTIP_CONTENT[reason],
-          svgIcon: /* @__PURE__ */ React39.createElement(AlertTriangleIcon, null),
+          svgIcon: /* @__PURE__ */ React42.createElement(AlertTriangleIcon, null),
           learnMoreButton,
           ctaButton: {
-            label: __9("Take me there", "elementor"),
+            label: __11("Take me there", "elementor"),
             onClick: handleTakeMeClick
           }
         }
       )
     },
-    /* @__PURE__ */ React39.createElement(Box6, null, children)
-  ) : /* @__PURE__ */ React39.createElement(React39.Fragment, null, children);
+    /* @__PURE__ */ React42.createElement(Box7, null, children)
+  ) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, children);
 };
 var INFOTIP_CONTENT = {
-  descendant: /* @__PURE__ */ React39.createElement(React39.Fragment, null, __9("To add a link to this container,", "elementor"), /* @__PURE__ */ React39.createElement("br", null), __9("first remove the link from the elements inside of it.", "elementor")),
-  ancestor: /* @__PURE__ */ React39.createElement(React39.Fragment, null, __9("To add a link to this element,", "elementor"), /* @__PURE__ */ React39.createElement("br", null), __9("first remove the link from its parent container.", "elementor"))
+  descendant: /* @__PURE__ */ React42.createElement(React42.Fragment, null, __11("To add a link to this container,", "elementor"), /* @__PURE__ */ React42.createElement("br", null), __11("first remove the link from the elements inside of it.", "elementor")),
+  ancestor: /* @__PURE__ */ React42.createElement(React42.Fragment, null, __11("To add a link to this element,", "elementor"), /* @__PURE__ */ React42.createElement("br", null), __11("first remove the link from its parent container.", "elementor"))
 };
 
 // src/controls/gap-control.tsx
-import * as React40 from "react";
-import { useRef as useRef8 } from "react";
+import * as React43 from "react";
+import { useRef as useRef9 } from "react";
 import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
-import { Grid as Grid8, Stack as Stack11, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { Grid as Grid10, Stack as Stack11, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 var GapControl = createControl(({ label }) => {
   const {
     value: directionValue,
@@ -2523,7 +2742,7 @@ var GapControl = createControl(({ label }) => {
     propType,
     disabled: directionDisabled
   } = useBoundProp(layoutDirectionPropTypeUtil);
-  const stackRef = useRef8(null);
+  const stackRef = useRef9(null);
   const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
@@ -2539,10 +2758,10 @@ var GapControl = createControl(({ label }) => {
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
-  const linkedLabel = __10("Link %s", "elementor").replace("%s", tooltipLabel);
-  const unlinkedLabel = __10("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  const linkedLabel = __12("Link %s", "elementor").replace("%s", tooltipLabel);
+  const unlinkedLabel = __12("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
-  return /* @__PURE__ */ React40.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React40.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(ControlLabel, null, label), /* @__PURE__ */ React40.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React43.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React43.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(ControlLabel, null, label), /* @__PURE__ */ React43.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React43.createElement(
     ToggleButton4,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -2553,8 +2772,8 @@ var GapControl = createControl(({ label }) => {
       onChange: onLinkToggle,
       disabled
     },
-    /* @__PURE__ */ React40.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React40.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React40.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React40.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(ControlFormLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React40.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React40.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React40.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(ControlFormLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React40.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
+    /* @__PURE__ */ React43.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React43.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React43.createElement(Grid10, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React43.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, __12("Column", "elementor"))), /* @__PURE__ */ React43.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React43.createElement(Grid10, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React43.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, __12("Row", "elementor"))), /* @__PURE__ */ React43.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
 });
 var Control4 = ({
   bind,
@@ -2562,21 +2781,21 @@ var Control4 = ({
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React40.createElement(SizeControl, { anchorRef });
+    return /* @__PURE__ */ React43.createElement(SizeControl, { anchorRef });
   }
-  return /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React40.createElement(SizeControl, { anchorRef }));
+  return /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React43.createElement(SizeControl, { anchorRef }));
 };
 
 // src/controls/aspect-ratio-control.tsx
-import * as React41 from "react";
+import * as React44 from "react";
 import { useEffect as useEffect6, useState as useState8 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
-import { Grid as Grid9, Select as Select3, Stack as Stack12, TextField as TextField8 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { Grid as Grid11, Select as Select3, Stack as Stack12, TextField as TextField8 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
 var RATIO_OPTIONS = [
-  { label: __11("Auto", "elementor"), value: "auto" },
+  { label: __13("Auto", "elementor"), value: "auto" },
   { label: "1/1", value: "1/1" },
   { label: "4/3", value: "4/3" },
   { label: "3/4", value: "3/4" },
@@ -2635,7 +2854,7 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
-  return /* @__PURE__ */ React41.createElement(ControlActions, null, /* @__PURE__ */ React41.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React41.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel, null, label)), /* @__PURE__ */ React41.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React44.createElement(ControlActions, null, /* @__PURE__ */ React44.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React44.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlLabel, null, label)), /* @__PURE__ */ React44.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
     Select3,
     {
       size: "tiny",
@@ -2646,10 +2865,10 @@ var AspectRatioControl = createControl(({ label }) => {
       onChange: handleSelectChange,
       fullWidth: true
     },
-    [...RATIO_OPTIONS, { label: __11("Custom", "elementor"), value: CUSTOM_RATIO }].map(
-      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React41.createElement(MenuListItem4, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+    [...RATIO_OPTIONS, { label: __13("Custom", "elementor"), value: CUSTOM_RATIO }].map(
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React44.createElement(MenuListItem4, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
-  ))), isCustom && /* @__PURE__ */ React41.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(
+  ))), isCustom && /* @__PURE__ */ React44.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
     TextField8,
     {
       size: "tiny",
@@ -2659,10 +2878,10 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customWidth,
       onChange: handleCustomWidthChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React41.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React44.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
       }
     }
-  )), /* @__PURE__ */ React41.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(
+  )), /* @__PURE__ */ React44.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
     TextField8,
     {
       size: "tiny",
@@ -2672,23 +2891,23 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customHeight,
       onChange: handleCustomHeightChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React41.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React44.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
       }
     }
   )))));
 });
 
 // src/controls/svg-media-control.tsx
-import * as React43 from "react";
+import * as React46 from "react";
 import { useState as useState10 } from "react";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } 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 styled4 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
-import * as React42 from "react";
+import * as React45 from "react";
 import { useState as useState9 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import {
@@ -2702,19 +2921,19 @@ import {
   DialogTitle,
   Divider as Divider3
 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
-var ADMIN_TITLE_TEXT = __12("Enable Unfiltered Uploads", "elementor");
-var ADMIN_CONTENT_TEXT = __12(
+import { __ as __14 } from "@wordpress/i18n";
+var ADMIN_TITLE_TEXT = __14("Enable Unfiltered Uploads", "elementor");
+var ADMIN_CONTENT_TEXT = __14(
   "Before you enable unfiltered files upload, note that such files include a security risk. Elementor does run a process to remove possible malicious code, but there is still risk involved when using such files.",
   "elementor"
 );
-var NON_ADMIN_TITLE_TEXT = __12("Sorry, you can't upload that file yet", "elementor");
-var NON_ADMIN_CONTENT_TEXT = __12(
+var NON_ADMIN_TITLE_TEXT = __14("Sorry, you can't upload that file yet", "elementor");
+var NON_ADMIN_CONTENT_TEXT = __14(
   "This is because this file type may pose a security risk. To upload them anyway, ask the site administrator to enable unfiltered file uploads.",
   "elementor"
 );
-var ADMIN_FAILED_CONTENT_TEXT_PT1 = __12("Failed to enable unfiltered files upload.", "elementor");
-var ADMIN_FAILED_CONTENT_TEXT_PT2 = __12(
+var ADMIN_FAILED_CONTENT_TEXT_PT1 = __14("Failed to enable unfiltered files upload.", "elementor");
+var ADMIN_FAILED_CONTENT_TEXT_PT2 = __14(
   "You can try again, if the problem persists, please contact support.",
   "elementor"
 );
@@ -2741,9 +2960,9 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return canManageOptions ? /* @__PURE__ */ React42.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React42.createElement(NonAdminDialog, { ...dialogProps });
+  return canManageOptions ? /* @__PURE__ */ React45.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React45.createElement(NonAdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React42.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React42.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React42.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React42.createElement(Divider3, null), /* @__PURE__ */ React42.createElement(DialogContent, null, /* @__PURE__ */ React42.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React42.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React42.createElement(DialogActions, null, /* @__PURE__ */ React42.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __12("Cancel", "elementor")), /* @__PURE__ */ React42.createElement(
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React45.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React45.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React45.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React45.createElement(Divider3, null), /* @__PURE__ */ React45.createElement(DialogContent, null, /* @__PURE__ */ React45.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React45.createElement(React45.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React45.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React45.createElement(DialogActions, null, /* @__PURE__ */ React45.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __14("Cancel", "elementor")), /* @__PURE__ */ React45.createElement(
   Button3,
   {
     size: "medium",
@@ -2752,9 +2971,9 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React42.createElement(CircularProgress2, { size: 24 }) : __12("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React45.createElement(CircularProgress2, { size: 24 }) : __14("Enable", "elementor")
 )));
-var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React42.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React42.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React42.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React42.createElement(Divider3, null), /* @__PURE__ */ React42.createElement(DialogContent, null, /* @__PURE__ */ React42.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React42.createElement(DialogActions, null, /* @__PURE__ */ React42.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __12("Got it", "elementor"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React45.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React45.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React45.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React45.createElement(Divider3, null), /* @__PURE__ */ React45.createElement(DialogContent, null, /* @__PURE__ */ React45.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React45.createElement(DialogActions, null, /* @__PURE__ */ React45.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __14("Got it", "elementor"))));
 
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
@@ -2815,15 +3034,15 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
-  return /* @__PURE__ */ React43.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React43.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React43.createElement(ControlActions, null, /* @__PURE__ */ React43.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React43.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React43.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React46.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React46.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React46.createElement(ControlActions, null, /* @__PURE__ */ React46.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React46.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React46.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React46.createElement(
     CardMedia2,
     {
       component: "img",
       image: src,
-      alt: __13("Preview SVG", "elementor"),
+      alt: __15("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React43.createElement(
+  )), /* @__PURE__ */ React46.createElement(
     CardOverlay2,
     {
       sx: {
@@ -2832,7 +3051,7 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React43.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React46.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React46.createElement(
       Button4,
       {
         size: "tiny",
@@ -2840,46 +3059,46 @@ var SvgMediaControl = createControl(() => {
         variant: "outlined",
         onClick: () => handleClick(MODE_BROWSE)
       },
-      __13("Select SVG", "elementor")
-    ), /* @__PURE__ */ React43.createElement(
+      __15("Select SVG", "elementor")
+    ), /* @__PURE__ */ React46.createElement(
       Button4,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React43.createElement(UploadIcon2, null),
+        startIcon: /* @__PURE__ */ React46.createElement(UploadIcon2, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
-      __13("Upload", "elementor")
+      __15("Upload", "elementor")
     ))
   ))));
 });
 
 // src/controls/background-control/background-control.tsx
-import * as React50 from "react";
+import * as React53 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
-import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
-import { Grid as Grid15 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { isExperimentActive as isExperimentActive5 } from "@elementor/editor-v1-adapters";
+import { Grid as Grid16 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React49 from "react";
+import * as React52 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box7, CardMedia as CardMedia3, Grid as Grid14, styled as styled5, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Box as Box8, CardMedia as CardMedia3, styled as styled5, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 
 // src/env.ts
 import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React44 from "react";
+import * as React47 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
@@ -2926,7 +3145,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React44.createElement(ControlActions, null, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React47.createElement(ControlActions, null, /* @__PURE__ */ React47.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -2951,53 +3170,53 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React45 from "react";
+import * as React48 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
-import { Grid as Grid10 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { Grid as Grid12 } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: __14("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(PinIcon, { fontSize: size }),
+    label: __16("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: __14("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(PinnedOffIcon, { fontSize: size }),
+    label: __16("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, __14("Attachment", "elementor"))), /* @__PURE__ */ React45.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React45.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React48.createElement(PopoverGridContainer, null, /* @__PURE__ */ React48.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(ControlFormLabel, null, __16("Attachment", "elementor"))), /* @__PURE__ */ React48.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React48.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React46 from "react";
-import { useRef as useRef9 } from "react";
+import * as React49 from "react";
+import { useRef as useRef10 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
-import { Grid as Grid11, Select as Select4 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { Grid as Grid13, Select as Select4 } from "@elementor/ui";
+import { __ as __17 } from "@wordpress/i18n";
 var backgroundPositionOptions = [
-  { label: __15("Center center", "elementor"), value: "center center" },
-  { label: __15("Center left", "elementor"), value: "center left" },
-  { label: __15("Center right", "elementor"), value: "center right" },
-  { label: __15("Top center", "elementor"), value: "top center" },
-  { label: __15("Top left", "elementor"), value: "top left" },
-  { label: __15("Top right", "elementor"), value: "top right" },
-  { label: __15("Bottom center", "elementor"), value: "bottom center" },
-  { label: __15("Bottom left", "elementor"), value: "bottom left" },
-  { label: __15("Bottom right", "elementor"), value: "bottom right" },
-  { label: __15("Custom", "elementor"), value: "custom" }
+  { label: __17("Center center", "elementor"), value: "center center" },
+  { label: __17("Center left", "elementor"), value: "center left" },
+  { label: __17("Center right", "elementor"), value: "center right" },
+  { label: __17("Top center", "elementor"), value: "top center" },
+  { label: __17("Top left", "elementor"), value: "top left" },
+  { label: __17("Top right", "elementor"), value: "top right" },
+  { label: __17("Bottom center", "elementor"), value: "bottom center" },
+  { label: __17("Bottom left", "elementor"), value: "bottom left" },
+  { label: __17("Bottom right", "elementor"), value: "bottom right" },
+  { label: __17("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil9);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef9(null);
+  const rowRef = useRef10(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -3006,7 +3225,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React46.createElement(Grid11, { container: true, spacing: 1.5 }, /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(PopoverGridContainer, null, /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ControlFormLabel, null, __15("Position", "elementor"))), /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React49.createElement(Grid13, { container: true, spacing: 1.5 }, /* @__PURE__ */ React49.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React49.createElement(PopoverGridContainer, null, /* @__PURE__ */ React49.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlFormLabel, null, __17("Position", "elementor"))), /* @__PURE__ */ React49.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React49.createElement(
     Select4,
     {
       fullWidth: true,
@@ -3015,60 +3234,60 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React46.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React46.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(Grid11, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React46.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React49.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React49.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React49.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React49.createElement(Grid13, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React49.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React49.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React46.createElement(LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React49.createElement(LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React46.createElement(
+  ))), /* @__PURE__ */ React49.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React49.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React46.createElement(LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React49.createElement(LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef
     }
   )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React47 from "react";
+import * as React50 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
-import { Grid as Grid12 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { Grid as Grid14 } from "@elementor/ui";
+import { __ as __18 } from "@wordpress/i18n";
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: __16("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(GridDotsIcon, { fontSize: size }),
+    label: __18("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: __16("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(DotsHorizontalIcon, { fontSize: size }),
+    label: __18("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: __16("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(DotsVerticalIcon, { fontSize: size }),
+    label: __18("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: __16("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(XIcon3, { fontSize: size }),
+    label: __18("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React47.createElement(PopoverGridContainer, null, /* @__PURE__ */ React47.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlFormLabel, null, __16("Repeat", "elementor"))), /* @__PURE__ */ React47.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React50.createElement(PopoverGridContainer, null, /* @__PURE__ */ React50.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(ControlFormLabel, null, __18("Repeat", "elementor"))), /* @__PURE__ */ React50.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React50.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React48 from "react";
-import { useRef as useRef10 } from "react";
+import * as React51 from "react";
+import { useRef as useRef11 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -3078,31 +3297,31 @@ import {
   LetterAIcon,
   PencilIcon as PencilIcon2
 } from "@elementor/icons";
-import { Grid as Grid13 } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { Grid as Grid15 } from "@elementor/ui";
+import { __ as __19 } from "@wordpress/i18n";
 var sizeControlOptions = [
   {
     value: "auto",
-    label: __17("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(LetterAIcon, { fontSize: size }),
+    label: __19("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: __17("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    label: __19("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: __17("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(ArrowBarBothIcon, { fontSize: size }),
+    label: __19("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __17("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(PencilIcon2, { fontSize: size }),
+    label: __19("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(PencilIcon2, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -3110,7 +3329,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil10);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef10(null);
+  const rowRef = useRef11(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -3118,7 +3337,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React48.createElement(Grid13, { container: true, spacing: 1.5 }, /* @__PURE__ */ React48.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React48.createElement(PopoverGridContainer, null, /* @__PURE__ */ React48.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(ControlFormLabel, null, __17("Size", "elementor"))), /* @__PURE__ */ React48.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React51.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React51.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React51.createElement(PopoverGridContainer, null, /* @__PURE__ */ React51.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlFormLabel, null, __19("Size", "elementor"))), /* @__PURE__ */ React51.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React51.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -3127,17 +3346,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React48.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React48.createElement(Grid13, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React48.createElement(PopoverGridContainer, null, /* @__PURE__ */ React48.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React48.createElement(
+  )))), isCustom ? /* @__PURE__ */ React51.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React51.createElement(Grid15, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React51.createElement(PopoverGridContainer, null, /* @__PURE__ */ React51.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React51.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React48.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React51.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React48.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React48.createElement(
+  ))), /* @__PURE__ */ React51.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React51.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React48.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React51.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -3145,7 +3364,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -3170,7 +3389,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef11({
+  const valuesHistory = useRef12({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -3238,21 +3457,21 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: __18("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: __18("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: __18("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: __18("Full", "elementor"), value: "full" }
+  { label: __20("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: __20("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: __20("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: __20("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue, disabled } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React49.createElement(PropProvider, { propType, value: overlayValues, setValue, disabled }, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React52.createElement(PropProvider, { propType, value: overlayValues, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React52.createElement(
     Repeater,
     {
       openOnAdd: true,
       disabled,
       values: overlayValues ?? [],
       setValues: setValue,
-      label: __18("Overlay", "elementor"),
+      label: __20("Overlay", "elementor"),
       itemSettings: {
         Icon: ItemIcon3,
         Label: ItemLabel3,
@@ -3263,7 +3482,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
   ));
 });
 var ItemContent3 = ({ anchorEl = null, bind }) => {
-  return /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React49.createElement(Content3, { anchorEl }));
+  return /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React52.createElement(Content3, { anchorEl }));
 };
 var Content3 = ({ anchorEl }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
@@ -3271,27 +3490,27 @@ var Content3 = ({ anchorEl }) => {
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React49.createElement(Box7, { sx: { width: "100%" } }, /* @__PURE__ */ React49.createElement(Box7, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React52.createElement(Box8, { sx: { width: "100%" } }, /* @__PURE__ */ React52.createElement(Box8, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React52.createElement(
     Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": __18("Background Overlay", "elementor")
+      "aria-label": __20("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React49.createElement(Tab, { label: __18("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React49.createElement(Tab, { label: __18("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React49.createElement(Tab, { label: __18("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React49.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React49.createElement(PopoverContent, null, /* @__PURE__ */ React49.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React49.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React49.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React49.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React49.createElement(PopoverContent, null, /* @__PURE__ */ React49.createElement(ColorOverlayContent, { anchorEl }))));
+    /* @__PURE__ */ React52.createElement(Tab, { label: __20("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React52.createElement(Tab, { label: __20("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React52.createElement(Tab, { label: __20("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React52.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React52.createElement(PopoverContent, null, /* @__PURE__ */ React52.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React52.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React52.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React52.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React52.createElement(PopoverContent, null, /* @__PURE__ */ React52.createElement(ColorOverlayContent, { anchorEl }))));
 };
 var ItemIcon3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React49.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React52.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React49.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React52.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React49.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React52.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -3304,11 +3523,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React49.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React52.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React52.createElement(
     CardMedia3,
     {
       image: imageUrl,
@@ -3323,41 +3542,41 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React49.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React52.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React49.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React52.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React49.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React52.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React49.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React52.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React49.createElement("span", null, color);
+  return /* @__PURE__ */ React52.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React49.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React52.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React49.createElement("span", null, __18("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React52.createElement("span", null, __20("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React49.createElement("span", null, __18("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React52.createElement("span", null, __20("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React49.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React49.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React52.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React52.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React49.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React49.createElement(Grid14, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React49.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React49.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlFormLabel, null, __18("Resolution", "elementor"))), /* @__PURE__ */ React49.createElement(Grid14, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React49.createElement(ImageControl, { sizes: backgroundResolutionOptions })))))), /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React49.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React49.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React49.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React49.createElement(BackgroundImageOverlayAttachment, null)));
+  return /* @__PURE__ */ React52.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React52.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React52.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React52.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React52.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React52.createElement(BackgroundImageOverlayAttachment, null)));
 };
 var StyledUnstableColorIndicator = styled5(UnstableColorIndicator2)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -3395,28 +3614,16 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  const isUsingNestedProps = isExperimentActive4("e_v_3_30");
-  const colorLabel = __19("Color", "elementor");
-  return /* @__PURE__ */ React50.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React50.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React50.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React50.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React50.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(Grid15, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React50.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React50.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React50.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(ColorControl, null)))));
-});
-
-// src/controls/switch-control.tsx
-import * as React51 from "react";
-import { booleanPropTypeUtil as booleanPropTypeUtil2 } from "@elementor/editor-props";
-import { Switch as Switch2 } from "@elementor/ui";
-var SwitchControl2 = createControl(() => {
-  const { value, setValue, disabled } = useBoundProp(booleanPropTypeUtil2);
-  const handleChange = (event) => {
-    setValue(event.target.checked);
-  };
-  return /* @__PURE__ */ React51.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React51.createElement(Switch2, { checked: !!value, onChange: handleChange, size: "small", disabled }));
+  const isUsingNestedProps = isExperimentActive5("e_v_3_30");
+  const colorLabel = __21("Color", "elementor");
+  return /* @__PURE__ */ React53.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React53.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React53.createElement(Grid16, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid16, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React53.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React53.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React53.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ColorControl, null)))));
 });
 
 // src/controls/repeatable-control.tsx
-import * as React52 from "react";
+import * as React54 from "react";
 import { useMemo as useMemo4 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
-import { Box as Box8 } from "@elementor/ui";
+import { Box as Box9 } from "@elementor/ui";
 
 // src/hooks/use-repeatable-control-context.ts
 import { createContext as createContext6, useContext as useContext6 } from "react";
@@ -3430,6 +3637,7 @@ var useRepeatableControlContext = () => {
 };
 
 // src/controls/repeatable-control.tsx
+var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
   ({
     repeaterLabel,
@@ -3448,16 +3656,16 @@ var RepeatableControl = createControl(
       () => createArrayPropUtils(childPropTypeUtil.key, childPropTypeUtil.schema),
       [childPropTypeUtil.key, childPropTypeUtil.schema]
     );
+    const contextValue = useMemo4(
+      () => ({
+        ...childControlConfig,
+        placeholder: placeholder || "",
+        patternLabel: patternLabel || ""
+      }),
+      [childControlConfig, placeholder, patternLabel]
+    );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const ItemLabel4 = ({ value: itemValue }) => {
-      const pattern = patternLabel || "";
-      const finalLabel = interpolate(pattern, itemValue.value);
-      if (finalLabel) {
-        return /* @__PURE__ */ React52.createElement("span", null, finalLabel);
-      }
-      return /* @__PURE__ */ React52.createElement(Box8, { component: "span", color: "text.tertiary" }, placeholder);
-    };
-    return /* @__PURE__ */ React52.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React52.createElement(RepeatableControlContext.Provider, { value: childControlConfig }, /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React54.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React54.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React54.createElement(
       Repeater,
       {
         openOnAdd: true,
@@ -3478,69 +3686,140 @@ var RepeatableControl = createControl(
   }
 );
 var ItemContent4 = ({ bind }) => {
-  return /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React52.createElement(Content4, null));
+  return /* @__PURE__ */ React54.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React54.createElement(Content4, null));
 };
-var ItemIcon4 = () => /* @__PURE__ */ React52.createElement(React52.Fragment, null);
+var ItemIcon4 = () => /* @__PURE__ */ React54.createElement(React54.Fragment, null);
 var Content4 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React52.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React52.createElement(PopoverGridContainer, null, /* @__PURE__ */ React52.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React54.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React54.createElement(PopoverGridContainer, null, /* @__PURE__ */ React54.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
-  if (Object.values(data).some((value) => value.value === "" || value === "")) {
-    return null;
+  if (!data) {
+    return template;
+  }
+  return template.replace(PLACEHOLDER_REGEX, (_, path) => {
+    const value = getNestedValue(data, path);
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      if (value.name) {
+        return value.name;
+      }
+      return JSON.stringify(value);
+    }
+    if (Array.isArray(value)) {
+      return value.join(", ");
+    }
+    return String(value ?? "");
+  });
+};
+var getNestedValue = (obj, path) => {
+  return path.split(".").reduce((current, key) => {
+    if (current && typeof current === "object") {
+      return current[key];
+    }
+    return {};
+  }, obj);
+};
+var isEmptyValue = (val) => {
+  if (typeof val === "string") {
+    return val.trim() === "";
+  }
+  if (Number.isNaN(val)) {
+    return true;
   }
-  return new Function(...Object.keys(data), `return \`${template}\`;`)(...Object.values(data));
+  if (Array.isArray(val)) {
+    return val.length === 0;
+  }
+  if (typeof val === "object" && val !== null) {
+    return Object.keys(val).length === 0;
+  }
+  return false;
+};
+var shouldShowPlaceholder = (pattern, data) => {
+  const propertyPaths = getAllProperties(pattern);
+  const values = propertyPaths.map((path) => getNestedValue(data, path));
+  if (values.length === 0) {
+    return false;
+  }
+  if (values.some((value) => value === null || value === void 0)) {
+    return true;
+  }
+  if (values.every(isEmptyValue)) {
+    return true;
+  }
+  return false;
+};
+var ItemLabel4 = ({ value }) => {
+  const { placeholder, patternLabel } = useRepeatableControlContext();
+  const label = shouldShowPlaceholder(patternLabel, value) ? placeholder : interpolate(patternLabel, value);
+  return /* @__PURE__ */ React54.createElement(Box9, { component: "span", color: "text.tertiary" }, label);
+};
+var getAllProperties = (pattern) => {
+  const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
+  return properties;
 };
 
 // src/controls/key-value-control.tsx
-import * as React53 from "react";
+import * as React55 from "react";
 import { useMemo as useMemo5, useState as useState11 } from "react";
-import { keyValuePropTypeUtil } from "@elementor/editor-props";
-import { FormHelperText, FormLabel as FormLabel3, Grid as Grid16, TextField as TextField9 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+import {
+  isTransformable,
+  keyValuePropTypeUtil,
+  stringPropTypeUtil as stringPropTypeUtil11
+} from "@elementor/editor-props";
+import { FormHelperText, FormLabel as FormLabel3, Grid as Grid17 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
 var KeyValueControl = createControl((props = {}) => {
-  const { value, setValue } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState11(null);
-  const [valueError, setValueError] = useState11(null);
+  const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
+  const [keyError, setKeyError] = useState11("");
+  const [valueError, setValueError] = useState11("");
   const [sessionState, setSessionState] = useState11({
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
-  const keyLabel = props.keyName || __20("Key", "elementor");
-  const valueLabel = props.valueName || __20("Value", "elementor");
+  const keyLabel = props.keyName || __22("Key", "elementor");
+  const valueLabel = props.valueName || __22("Value", "elementor");
   const [keyRegex, valueRegex, errMsg] = useMemo5(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
-      props.validationErrorMessage || __20("Invalid Format", "elementor")
+      props.validationErrorMessage || __22("Invalid Format", "elementor")
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
   const validate = (newValue, fieldType) => {
     if (fieldType === "key" && keyRegex) {
       const isValid = keyRegex.test(newValue);
-      setKeyError(isValid ? null : errMsg);
+      setKeyError(isValid ? "" : errMsg);
       return isValid;
     } else if (fieldType === "value" && valueRegex) {
       const isValid = valueRegex.test(newValue);
-      setValueError(isValid ? null : errMsg);
+      setValueError(isValid ? "" : errMsg);
       return isValid;
     }
     return true;
   };
-  const handleChange = (event, fieldType) => {
-    const newValue = event.target.value;
+  const handleChange = (newValue, options, meta) => {
+    const fieldType = meta?.bind;
+    if (!fieldType) {
+      return;
+    }
+    const newChangedValue = newValue[fieldType];
+    if (isTransformable(newChangedValue) && newChangedValue.$$type === "dynamic") {
+      setValue({
+        ...value,
+        [fieldType]: newChangedValue
+      });
+      return;
+    }
+    const extractedValue = stringPropTypeUtil11.extract(newChangedValue);
     setSessionState((prev) => ({
       ...prev,
-      [fieldType]: newValue
+      [fieldType]: extractedValue
     }));
-    if (validate(newValue, fieldType)) {
+    if (extractedValue && validate(extractedValue, fieldType)) {
       setValue({
         ...value,
-        [fieldType]: {
-          value: newValue,
-          $$type: "string"
-        }
+        [fieldType]: newChangedValue
       });
     } else {
       setValue({
@@ -3552,62 +3831,46 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  const isKeyInvalid = keyError !== null;
-  const isValueInvalid = valueError !== null;
-  return /* @__PURE__ */ React53.createElement(ControlActions, null, /* @__PURE__ */ React53.createElement(Grid16, { container: true, gap: 1.5 }, /* @__PURE__ */ React53.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(FormLabel3, { size: "tiny" }, keyLabel), /* @__PURE__ */ React53.createElement(
-    TextField9,
+  return /* @__PURE__ */ React55.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React55.createElement(Grid17, { container: true, gap: 1.5 }, /* @__PURE__ */ React55.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React55.createElement(FormLabel3, { size: "tiny" }, keyLabel), /* @__PURE__ */ React55.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React55.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError, sx: { pt: 1 } })), !!keyError && /* @__PURE__ */ React55.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React55.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React55.createElement(FormLabel3, { size: "tiny" }, valueLabel), /* @__PURE__ */ React55.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React55.createElement(
+    TextControl,
     {
-      autoFocus: true,
-      sx: { pt: 1 },
-      size: "tiny",
-      fullWidth: true,
-      value: sessionState.key,
-      onChange: (e) => handleChange(e, "key"),
-      error: isKeyInvalid
+      inputValue: sessionState.value,
+      error: !!valueError,
+      inputDisabled: !!keyError,
+      sx: { pt: 1 }
     }
-  ), isKeyInvalid && /* @__PURE__ */ React53.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React53.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(FormLabel3, { size: "tiny" }, valueLabel), /* @__PURE__ */ React53.createElement(
-    TextField9,
-    {
-      sx: { pt: 1 },
-      size: "tiny",
-      fullWidth: true,
-      value: sessionState.value,
-      onChange: (e) => handleChange(e, "value"),
-      disabled: isKeyInvalid,
-      error: isValueInvalid
-    }
-  ), isValueInvalid && /* @__PURE__ */ React53.createElement(FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React55.createElement(FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-import * as React54 from "react";
+import * as React56 from "react";
 import { useMemo as useMemo6 } from "react";
-import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
+import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
-import { isExperimentActive as isExperimentActive5 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive6 } from "@elementor/editor-v1-adapters";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
-import { Grid as Grid17, Select as Select5 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import { Grid as Grid18, Select as Select5 } from "@elementor/ui";
+import { __ as __23 } from "@wordpress/i18n";
 var positionOptions = [
-  { label: __21("Center center", "elementor"), value: "center center" },
-  { label: __21("Center left", "elementor"), value: "center left" },
-  { label: __21("Center right", "elementor"), value: "center right" },
-  { label: __21("Top center", "elementor"), value: "top center" },
-  { label: __21("Top left", "elementor"), value: "top left" },
-  { label: __21("Top right", "elementor"), value: "top right" },
-  { label: __21("Bottom center", "elementor"), value: "bottom center" },
-  { label: __21("Bottom left", "elementor"), value: "bottom left" },
-  { label: __21("Bottom right", "elementor"), value: "bottom right" }
+  { label: __23("Center center", "elementor"), value: "center center" },
+  { label: __23("Center left", "elementor"), value: "center left" },
+  { label: __23("Center right", "elementor"), value: "center right" },
+  { label: __23("Top center", "elementor"), value: "top center" },
+  { label: __23("Top left", "elementor"), value: "top left" },
+  { label: __23("Top right", "elementor"), value: "top right" },
+  { label: __23("Bottom center", "elementor"), value: "bottom center" },
+  { label: __23("Bottom left", "elementor"), value: "bottom left" },
+  { label: __23("Bottom right", "elementor"), value: "bottom right" }
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil11);
-  const isVersion331Active = isExperimentActive5("e_v_3_31");
+  const stringPropContext = useBoundProp(stringPropTypeUtil12);
+  const isVersion331Active = isExperimentActive6("e_v_3_31");
   const isCustom = !!positionContext.value && isVersion331Active;
   const availablePositionOptions = useMemo6(() => {
     const options = [...positionOptions];
     if (isVersion331Active) {
-      options.push({ label: __21("Custom", "elementor"), value: "custom" });
+      options.push({ label: __23("Custom", "elementor"), value: "custom" });
     }
     return options;
   }, [isVersion331Active]);
@@ -3619,7 +3882,7 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React54.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React54.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React54.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(ControlFormLabel, null, __21("Object position", "elementor"))), /* @__PURE__ */ React54.createElement(Grid17, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React56.createElement(Grid18, { container: true, spacing: 1.5 }, /* @__PURE__ */ React56.createElement(Grid18, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(ControlFormLabel, null, __23("Object position", "elementor"))), /* @__PURE__ */ React56.createElement(Grid18, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React56.createElement(
     Select5,
     {
       size: "tiny",
@@ -3628,9 +3891,133 @@ var PositionControl = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    availablePositionOptions.map(({ label, value }) => /* @__PURE__ */ React54.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React54.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React54.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React54.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React54.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React54.createElement(SizeControl, { startIcon: /* @__PURE__ */ React54.createElement(LetterXIcon2, { fontSize: "tiny" }) }))), /* @__PURE__ */ React54.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React54.createElement(SizeControl, { startIcon: /* @__PURE__ */ React54.createElement(LetterYIcon2, { fontSize: "tiny" }) })))))));
+    availablePositionOptions.map(({ label, value }) => /* @__PURE__ */ React56.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React56.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React56.createElement(Grid18, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(Grid18, { container: true, spacing: 1.5 }, /* @__PURE__ */ React56.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React56.createElement(SizeControl, { startIcon: /* @__PURE__ */ React56.createElement(LetterXIcon2, { fontSize: "tiny" }) }))), /* @__PURE__ */ React56.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React56.createElement(SizeControl, { startIcon: /* @__PURE__ */ React56.createElement(LetterYIcon2, { fontSize: "tiny" }) })))))));
 };
+
+// src/controls/transform-control/transform-repeater-control.tsx
+import * as React62 from "react";
+import { transformPropTypeUtil } from "@elementor/editor-props";
+import { __ as __27 } from "@wordpress/i18n";
+
+// src/controls/transform-control/transform-content.tsx
+import * as React59 from "react";
+import { Box as Box10, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2, useTabs as useTabs2 } from "@elementor/ui";
+import { __ as __25 } from "@wordpress/i18n";
+
+// src/controls/transform-control/functions/move.tsx
+import * as React58 from "react";
+import { useRef as useRef13 } from "react";
+import { moveTransformPropTypeUtil } from "@elementor/editor-props";
+import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
+import { Grid as Grid20 } from "@elementor/ui";
+import { __ as __24 } from "@wordpress/i18n";
+
+// src/controls/transform-control/functions/axis-row.tsx
+import * as React57 from "react";
+import { Grid as Grid19 } from "@elementor/ui";
+var AxisRow = ({ label, bindValue, startIcon, anchorRef }) => {
+  return /* @__PURE__ */ React57.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React57.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React57.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, label)), /* @__PURE__ */ React57.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React57.createElement(SizeControl, { anchorRef, startIcon })))));
+};
+
+// src/controls/transform-control/functions/move.tsx
+var moveAxisControls = [
+  {
+    label: __24("Move X", "elementor"),
+    bindValue: "x",
+    startIcon: /* @__PURE__ */ React58.createElement(ArrowRightIcon, { fontSize: "tiny" })
+  },
+  {
+    label: __24("Move Y", "elementor"),
+    bindValue: "y",
+    startIcon: /* @__PURE__ */ React58.createElement(ArrowDownSmallIcon, { fontSize: "tiny" })
+  },
+  {
+    label: __24("Move Z", "elementor"),
+    bindValue: "z",
+    startIcon: /* @__PURE__ */ React58.createElement(ArrowDownLeftIcon, { fontSize: "tiny" })
+  }
+];
+var Move = () => {
+  const context = useBoundProp(moveTransformPropTypeUtil);
+  const rowRef = useRef13(null);
+  return /* @__PURE__ */ React58.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React58.createElement(PropProvider, { ...context }, /* @__PURE__ */ React58.createElement(PropKeyProvider, { bind: "transform-move" }, moveAxisControls.map((control) => /* @__PURE__ */ React58.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
+};
+
+// src/controls/transform-control/transform-content.tsx
+var TransformContent = ({ bind }) => {
+  const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2("transform-move");
+  return /* @__PURE__ */ React59.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React59.createElement(PopoverContent, null, /* @__PURE__ */ React59.createElement(Box10, { sx: { width: "100%" } }, /* @__PURE__ */ React59.createElement(Box10, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React59.createElement(
+    Tabs2,
+    {
+      size: "small",
+      variant: "fullWidth",
+      ...getTabsProps(),
+      "aria-label": __25("Transform", "elementor")
+    },
+    /* @__PURE__ */ React59.createElement(Tab2, { label: __25("Move", "elementor"), ...getTabProps("transform-move") })
+  )), /* @__PURE__ */ React59.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps("transform-move") }, /* @__PURE__ */ React59.createElement(Move, null)))));
+};
+
+// src/controls/transform-control/transform-icon.tsx
+import * as React60 from "react";
+import { ArrowsMaximizeIcon as ArrowsMaximizeIcon2 } from "@elementor/icons";
+var TransformIcon = ({ value }) => {
+  switch (value.$$type) {
+    case "transform-move":
+      return /* @__PURE__ */ React60.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
+    default:
+      return null;
+  }
+};
+
+// src/controls/transform-control/transform-label.tsx
+import * as React61 from "react";
+import { Box as Box11 } from "@elementor/ui";
+import { __ as __26 } from "@wordpress/i18n";
+var transformMoveValue = (value) => Object.values(value).map((axis) => `${axis?.value.size}${axis?.value.unit}`).join(", ");
+var TransformLabel = (props) => {
+  const { $$type, value } = props.value;
+  switch ($$type) {
+    case "transform-move":
+      return /* @__PURE__ */ React61.createElement(Label2, { label: __26("Move", "elementor"), value: transformMoveValue(value) });
+    default:
+      return "";
+  }
+};
+var Label2 = ({ label, value }) => {
+  return /* @__PURE__ */ React61.createElement(Box11, { component: "span" }, label, ": ", value);
+};
+
+// src/controls/transform-control/transform-repeater-control.tsx
+var initialTransformValue = {
+  $$type: "transform-move",
+  value: {
+    x: { $$type: "size", value: { size: 0, unit: "px" } },
+    y: { $$type: "size", value: { size: 0, unit: "px" } },
+    z: { $$type: "size", value: { size: 0, unit: "px" } }
+  }
+};
+var TransformRepeaterControl = createControl(() => {
+  const { propType, value: transformValues, setValue, disabled } = useBoundProp(transformPropTypeUtil);
+  return /* @__PURE__ */ React62.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React62.createElement(
+    Repeater,
+    {
+      openOnAdd: true,
+      disabled,
+      values: transformValues ?? [],
+      setValues: setValue,
+      label: __27("Transform", "elementor"),
+      showDuplicate: false,
+      itemSettings: {
+        Icon: TransformIcon,
+        Label: TransformLabel,
+        Content: TransformContent,
+        initialValues: initialTransformValue
+      }
+    }
+  ));
+});
 export {
   AspectRatioControl,
   BackgroundControl,
@@ -3661,10 +4048,11 @@ export {
   SizeControl,
   StrokeControl,
   SvgMediaControl,
-  SwitchControl2 as SwitchControl,
+  SwitchControl,
   TextAreaControl,
   TextControl,
   ToggleControl,
+  TransformRepeaterControl,
   UrlControl,
   createControlReplacementsRegistry,
   injectIntoRepeaterItemIcon,